/* ============================================================
   批次 149 · 代理商申请入口
   站点主色实测：主 #3d29a4（style.css 出现 402 次）辅 #d38a3b（39 次）
   本文件同时被 en/view/layout.html（悬浮图标）与
   en/view/index/agent*.html（表单页）引用
   ============================================================ */

/* ---------- 1. 右下角悬浮入口 ---------- */
.kp-agent-float {
  position: fixed;
  right: 0;
  top: 56%;
  z-index: 9980;
  transform: translateY(-50%);
}

.kp-agent-float-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 14px 0 16px;
  background: #3d29a4;
  color: #fff;
  text-decoration: none;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 6px 22px rgba(61, 41, 164, .28);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.kp-agent-float-btn i {
  font-size: 19px;
  line-height: 1;
  margin-bottom: 8px;
}

.kp-agent-float-btn span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.25;
  white-space: nowrap;
}

.kp-agent-float-btn:hover,
.kp-agent-float-btn:focus {
  background: #d38a3b;
  color: #fff;
  text-decoration: none;
  transform: translateX(-3px);
  box-shadow: 0 8px 26px rgba(211, 138, 59, .34);
}

/* 紧凑模式触发条件（批次一百四十九 · 修订 149c）
   ------------------------------------------------------------
   原来只写 (max-width: 767px)，手机横屏会漏掉：
   iPhone 横过来是 844×390，宽度 844 已经越过 767，于是退回桌面竖排样式，
   19 个字母竖起来 206px 高，而横屏视口只有 390px —— 那个紫色长条直接吃掉
   半个屏幕，看着就像"页面没显示出来"。实测占屏高 53%。

   所以断点改成「窄」或「矮」两者之一。这里刻意不再加 max-width 上限：
   触发条件是视口高度 ≤520px，这本身就只发生在手机横屏、以及桌面窗口被
   压成 1440×420 这种分屏高度的时候。两种情况病根一样（屏幕高度不够放
   206px 的竖排按钮），就不该按设备类型区别对待 —— 之前试过加
   (max-width:1024px) 排除桌面，结果 1440×420 的窗口按钮仍然占屏高 49%。 */
@media (max-width: 767px),
       (orientation: landscape) and (max-height: 520px) {
  .kp-agent-float {
    top: auto;
    bottom: 22px;
    transform: none;
  }
  /* 手机上不显示竖排文案：19 个字母竖起来有 150px 高，会实实在在压住正文。
     收成 48px 圆形图标，点得到、又不挡字。 */
  .kp-agent-float-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(61, 41, 164, .34);
  }
  .kp-agent-float-btn i {
    font-size: 20px;
    margin: 0;
  }
  .kp-agent-float-btn span {
    display: none;
  }
}

/* 兜底：不管命中哪条断点，按钮都不许超出视口。
   竖排文案的高度是跟着字数走的，将来后台把文案改长（比如填成
   "Become an Authorized Distributor"，25 个字母就是 270px），
   在矮屏上照样会顶出屏幕。这里给一个与视口绑死的上限，超了就让
   容器滚不动 —— 宁可少显示几个字母，也不让按钮跑到屏幕外面点不到。 */
.kp-agent-float-btn {
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

/* ---------- 2. 表单通用（复用站点 .form-input 的底子，只补 select） ---------- */
.kp-agent-form .form-wrap { margin-bottom: 4px; }

/* 原生 select 被 .form-input 的 appearance:none 去掉了箭头，这里补一个 */
.kp-agent-form select.form-input,
.kp-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233d29a4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px 8px;
  padding-right: 48px;
  cursor: pointer;
}

.kp-agent-form select.form-input:invalid,
.kp-agent-form select.form-input option[value=""] { color: #a5a2b0; }

.kp-agent-form textarea.form-input { min-height: 96px; resize: vertical; }

/* 蜜罐字段：真人不该看见，但不能用 display:none —— 部分机器人会跳过隐藏元素 */
.kp-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- 2.1 文字层级（149g 修订） ----------
   原来的问题不是"注释颜色和标题太像"，而是三层文字全都挤在同一个灰度带里：
     label       #888   16px  字重 300   ← 最该醒目，结果是最淡的那个
     placeholder #757575 16px           ← 示例值，反而比 label 还深
     hint        #8b8898 12.5px         ← 注释
   深浅只差两三个色阶，整屏灰字，眼睛找不到落点，就是"花"。

   修法不是"把注释再调浅一点"——那只会让注释消失、label 还是淡的。
   而是把 label 从浅灰直接拉到深墨（质变），让另外两层真正退到后面。
   三重差异叠加：颜色深度 + 字重 + 字号。任意一档单独失效都还分得清，
   不依赖某一个色值被改回来就全塌。

   注意：只在 .kp-agent-form 内覆盖。站点的 .form-label-outside 是全局类，
   contacts.html 的索样表单也在用（7 处），不能动全局。 */
.kp-agent-form .form-label-outside {
  display: block;
  color: #33304a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  margin-bottom: 8px;
}

/* placeholder 是「示例」，不是要读的内容，明度压到比 label 低一档。
   #a5a2b0 在浅灰输入框底上仍有 ~3:1，看得见但不会抢注意力。 */
.kp-agent-form .form-input::placeholder { color: #a5a2b0; opacity: 1; }
.kp-agent-form .form-input::-webkit-input-placeholder { color: #a5a2b0; opacity: 1; }
.kp-agent-form .form-input::-moz-placeholder { color: #a5a2b0; opacity: 1; }

.kp-agent-req { color: #b71c24; font-weight: 700; }

/* 字段级提示（如「Amount in US dollars, numbers only.」）
   比 label 小 3px、淡一档、字重 400，三重差异都在。 */
.kp-agent-hint {
  font-size: 12px;
  line-height: 1.6;
  color: #8e8b9c;
  margin: 6px 0 0;
}

/* 整段说明（表单顶部「Fields marked * are required...」）
   它承载的是规则说明，必须读到，所以比字段级 hint 稍深、稍大。
   两者都用 .kp-agent-hint 会让"必填说明"和"金额单位提示"看起来同等次要。 */
.kp-agent-note {
  font-size: 13px;
  line-height: 1.7;
  color: #6f6b7c;
  margin: 12px 0 0;
}
.kp-agent-note a { color: #3d29a4; text-decoration: underline; }

/* ---------- 2.2 锚点偏移（149g 修订） ----------
   三个入口（悬浮图标 / 页脚 / 联系页卡片）现在都指向 /en/agent.html#apply，
   点进去直接落在表单上，不用再自己滚 1.7 屏。

   但页头是固定的（实测：桌面 nav.rd-navbar 高 68px，手机 rd-navbar-panel 高 56px），
   锚点默认会滚到标题正好被导航盖住的位置，等于白跳。
   scroll-margin-top 就是让浏览器"提前停一点"。

   取 88px = 桌面 68 + 20 呼吸 / 手机 56 + 32 呼吸，一档覆盖两种，不做媒体查询。
   注意这条只在有 id="apply" 的页面生效（全站只有代理商页有），
   而 agent.css 又被 layout 全局引入，所以不存在影响其他页面的风险。 */
#apply { scroll-margin-top: 88px; }

/* ---------- 3. 联系页 / 页脚里的入口按钮 ---------- */
.kp-agent-btn {
  display: inline-block;
  padding: 11px 24px;
  background: #3d29a4;
  color: #fff !important;
  border: 0;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .2s ease;
}

.kp-agent-btn:hover,
.kp-agent-btn:focus { background: #d38a3b; color: #fff !important; }

/* 联系页索样表单上方的虚线说明卡 */
.kp-agent-card {
  border: 1px dashed #c9c3e6;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 4px 0 28px;
  background: #faf9ff;
}

.kp-agent-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #29293a;
}

.kp-agent-card p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #5f5c6e;
}

/* ---------- 4. 申请页正文里的卖点块 ---------- */
.kp-agent-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 8px 0 34px;
}

.kp-agent-point {
  border: 1px solid #ece9f6;
  border-radius: 10px;
  padding: 20px 20px 18px;
  background: #fff;
}

.kp-agent-point em {
  display: block;
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
  color: #3d29a4;
  margin-bottom: 8px;
}

.kp-agent-point strong {
  display: block;
  font-size: 14px;
  color: #29293a;
  margin-bottom: 6px;
}

.kp-agent-point span {
  font-size: 13px;
  line-height: 1.7;
  color: #6b6879;
}

@media (max-width: 991px) {
  .kp-agent-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .kp-agent-points { grid-template-columns: 1fr; }
  .kp-agent-card { padding: 16px 16px; }
}

/* ---------- 5. 弹窗内（embed=1）的紧凑版 ---------- */
.kp-agent-embed {
  padding: 22px 22px 30px;
  background: #fff;
}

.kp-agent-embed h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: #29293a;
}

.kp-agent-embed .kp-agent-embed-sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: #7b7788;
}

@media (max-width: 575px) {
  .kp-agent-embed { padding: 16px 14px 24px; }
}

/* ============================================================
   4. 招商页 Banner —— 纯 CSS 流体光斑（批次一百四十九）
   ------------------------------------------------------------
   为什么不用图片：
     · 零版权风险：没有一个像素来自图库或摄影素材，出版社不会找上门；
     · 颜色精确：底色与光斑取自站内实测量值（主紫 #3d29a4、
       金橙 #d38a3b、标红 #b71c24），不是"看着像"的自配色；
     · 分辨率无关：4K / 折叠屏都不会糊，也不用为 @2x 再传一份；
     · 零额外请求：不给首页/落地页增加图片带宽。
   性能取舍：刻意不用 filter:blur() —— radial-gradient 本身边缘就是渐隐的，
   三个满屏大面积 blur 在低端安卓上会掉帧，这里用渐变替代虚化。
   ============================================================ */
.kp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  /* .breadcrumbs-custom 原始 padding 是 35px 0 40px，这里覆盖成纵向舒展的落地页头部 */
  padding: 88px 0 76px;
  overflow: hidden;
  background: #191046;
  isolation: isolate;
}

/* 光斑容器单独一层，文字层压在其上 */
.kp-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.kp-hero-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.kp-hero-blob-1 {
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  top: -22%;
  left: -12%;
  background: radial-gradient(circle at 50% 50%,
    rgba(109, 86, 255, 0.92) 0%,
    rgba(109, 86, 255, 0.52) 32%,
    rgba(109, 86, 255, 0) 68%);
  animation: kp-hero-drift-a 24s ease-in-out infinite;
}

.kp-hero-blob-2 {
  width: 48vw;
  height: 48vw;
  max-width: 720px;
  max-height: 720px;
  right: -14%;
  bottom: -34%;
  background: radial-gradient(circle at 50% 50%,
    rgba(211, 138, 59, 0.82) 0%,
    rgba(211, 138, 59, 0.40) 34%,
    rgba(211, 138, 59, 0) 70%);
  animation: kp-hero-drift-b 31s ease-in-out infinite;
}

.kp-hero-blob-3 {
  width: 42vw;
  height: 42vw;
  max-width: 620px;
  max-height: 620px;
  right: 4%;
  top: -30%;
  background: radial-gradient(circle at 50% 50%,
    rgba(46, 132, 214, 0.76) 0%,
    rgba(46, 132, 214, 0.36) 36%,
    rgba(46, 132, 214, 0) 70%);
  animation: kp-hero-drift-c 27s ease-in-out infinite;
}

/* 刻意没有第 4 个红色光斑：
   品牌红 #b71c24 铺在深紫底上会发暗褐，而且超大圆被裁切后边缘接近水平，
   视觉上是一条横贯画面的脏带 —— 比"少一个光斑"难看得多。 */

/* 极淡细网格：压住大色块，避免整片"糊成一团" */
.kp-hero-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 22%, transparent 78%);
}

.kp-hero .parallax-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 底部收口：橙色光斑原本会漫到 hero 底边，和下面的白色内容区形成一条
   像"漏光"的浅色脏边。压一层深色渐变把它收干净，同时给整块一个明确的结束线。 */
.kp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(to top,
    #191046 0%,
    rgba(25, 16, 70, 0.82) 38%,
    rgba(25, 16, 70, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.kp-hero-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d9ab6a;
}

.kp-hero .breadcrumbs-custom-title {
  text-shadow: 0 2px 26px rgba(10, 6, 40, 0.5);
}

.kp-hero .breadcrumbs-custom-path {
  margin-top: 10px;
}

@keyframes kp-hero-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, 8%, 0) scale(1.14); }
}

@keyframes kp-hero-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-7%, -6%, 0) scale(0.94); }
}

@keyframes kp-hero-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5%, 10%, 0) scale(1.1); }
}

@media (max-width: 991px) {
  .kp-hero {
    min-height: 320px;
    padding: 72px 0 62px;
  }
}

@media (max-width: 575px) {
  .kp-hero {
    min-height: 280px;
    padding: 58px 0 50px;
  }
  .kp-hero-grid {
    background-size: 40px 40px;
  }
}

/* 横屏矮视口（批次一百四十九 · 修订 149c）
   ------------------------------------------------------------
   844×390 这种横屏，min-height:320px 就吃掉 82% 视口高度，标题以下
   一点正文都露不出来，用户会以为"页面没打开"。这里把 hero 压到刚够
   放标题的高度，让下面那段正文能在首屏露头。
   同时把光斑缩一圈：60vw 在 844 宽下是 519px，比 hero 本身还高，
   裁切后只剩一片糊，缩小后反而看得出是「流体」。 */
@media (orientation: landscape) and (max-height: 520px) {
  .kp-hero {
    min-height: 0;
    padding: 46px 0 40px;
  }
  .kp-hero-kicker {
    margin-bottom: 8px;
  }
  .kp-hero-blob-1 { width: 38vw; height: 38vw; }
  .kp-hero-blob-2 { width: 30vw; height: 30vw; }
  .kp-hero-blob-3 { width: 26vw; height: 26vw; }
}

/* 系统开了"减少动态效果"就停掉光斑漂移：前庭不适不是审美偏好 */
@media (prefers-reduced-motion: reduce) {
  .kp-hero-blob {
    animation: none !important;
  }
}