/* ============================================================
   TOAIWAY · 概念方案「品牌蓝 / ToBlue」
   主色 = 官网图标 T 的品牌蓝 #175CDB(纯色,无渐变)。
   纯视觉层:只改外观,不动文案与结构。
   本文件最后加载,撤掉这一行引用即完整恢复线上原样。
   ============================================================ */

/* ---------- 0. 设计变量 ---------- */
:root{
  --rd-ink:#12264A;
  --rd-muted:#5C6C88;
  --rd-brand:#175CDB;
  --rd-brand-dark:#1149B3;
  --rd-brand-soft:#E8F1FF;
  --rd-sky-1:#F4F8FF;
  --rd-sky-2:#EAF2FF;
  --rd-line:#E2E9F4;
  --rd-soft:#F5F8FD;
  --rd-shadow-s:0 4px 14px rgba(23,92,219,.07);
  --rd-shadow-m:0 14px 40px rgba(23,92,219,.11);
  --rd-shadow-l:0 28px 70px rgba(18,64,170,.15);
  --rd-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 1. 全局基底:干净亮白 ---------- */
html{scroll-padding-top:104px}
body{
  background:#fff;
  font-family:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--rd-brand);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#BCD2F2;border-radius:8px;border:2px solid #fff}
::-webkit-scrollbar-thumb:hover{background:#8FB4EA}
a{transition:color .18s var(--rd-ease)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #5B9DFF;outline-offset:3px
}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;color:var(--rd-ink)}
h1{font-size:clamp(38px,4.6vw,60px);line-height:1.16;letter-spacing:-.03em}
h2{font-size:clamp(27px,3vw,38px);line-height:1.24}
p{color:var(--rd-muted)}

/* ---------- 2. macOS 级玻璃导航 ---------- */
.header{
  height:auto;
  padding:14px 0;
  background:transparent;
  border-bottom:0;
  position:sticky;top:0;z-index:60;
}
.commerce-page .header{background:transparent}
.nav{
  height:62px;
  padding:0 10px 0 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(24px) saturate(1.9);
  backdrop-filter:blur(24px) saturate(1.9);
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  box-shadow:
    0 14px 38px rgba(23,92,219,.15),
    0 2px 8px rgba(23,92,219,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(170,195,235,.3);
}
.brand{color:var(--rd-ink);font-weight:800}
.brand:hover{color:var(--rd-brand)}
.brand small{color:#7C8AA5;font-weight:500}
/* 图标 = favicon 同款:纯品牌蓝 + 白 T */
.brand-mark{
  background:var(--rd-brand);
  border-radius:11px;
  box-shadow:0 5px 14px rgba(23,92,219,.32);
}
.nav-links a{color:#46587E}
.nav-links a:hover{color:var(--rd-brand)}
.nav-links .btn{color:#fff}
.menu-toggle{
  border:1px solid #D8E2F2;
  border-radius:999px;
  color:#46587E;
  background:#F4F8FF;
}
.skip{border-radius:10px;box-shadow:var(--rd-shadow-m)}

/* ---------- 3. 按钮:胶囊 + 纯品牌蓝 ---------- */
.btn{
  position:relative;
  border:0;
  border-radius:999px;
  padding:13px 28px;
  font-weight:700;
  letter-spacing:.01em;
  background:var(--rd-brand);
  color:#fff;
  box-shadow:0 10px 24px rgba(23,92,219,.3);
  transition:transform .2s var(--rd-ease),box-shadow .25s var(--rd-ease),background .2s;
  overflow:hidden;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.3) 50%,transparent 66%);
  transform:translateX(-120%);transition:transform .6s var(--rd-ease);
}
.btn:hover{background:var(--rd-brand-dark);transform:translateY(-2px);box-shadow:0 16px 34px rgba(23,92,219,.4)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(23,92,219,.3)}
.btn.light{
  background:#fff;color:var(--rd-ink);
  border:1.5px solid #D8E2F2;
  box-shadow:0 4px 12px rgba(23,92,219,.07);
}
.btn.light:hover{background:var(--rd-sky-1);border-color:#AECBF6;color:var(--rd-brand);box-shadow:0 10px 22px rgba(23,92,219,.12)}
.btn.small{padding:9px 20px}
.btn.unavailable{background:#E7ECF4;color:#7C8AA5;box-shadow:none;border:0}

/* ---------- 4. 首屏:顶部蓝色渐变 + 流光线条,向下柔和过渡到纯白 ---------- */
.hero{
  position:relative;
  /* 往上顶 90px(头部高度),让蓝色渐变从页面最顶端开始,
     毛玻璃导航悬浮在它上面 —— 否则顶部会留一条白边,出现生硬的横向分界 */
  margin-top:-90px;
  padding:186px 0 110px;   /* 原 96px 上间距 + 90px 头部高度 */
  overflow:hidden;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='fade' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFFFFF' stop-opacity='0'/><stop offset='0.22' stop-color='%23FFFFFF' stop-opacity='0.85'/><stop offset='0.55' stop-color='%23FFFFFF' stop-opacity='0.5'/><stop offset='0.85' stop-color='%23FFFFFF' stop-opacity='0.12'/><stop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/></linearGradient></defs><g fill='none' stroke='url(%23fade)' stroke-width='1.1'><path d='M-80 290 C 240 130, 600 450, 900 270 S 1350 110, 1560 240'/><path d='M-80 390 C 280 230, 640 550, 940 370 S 1380 210, 1560 340'/><path d='M-80 495 C 320 335, 680 655, 980 475 S 1400 315, 1560 445'/><path d='M-80 600 C 360 440, 720 760, 1020 580 S 1420 420, 1560 550'/></g></svg>") center top/100% auto no-repeat,
    /* 感知均匀的多段斜坡:深蓝 → 品牌蓝 → 浅蓝 → 纯白,避免两端出现硬边与色带 */
    linear-gradient(180deg,
      #0A2050 0%,
      #0D2A69 11%,
      #123C93 22%,
      #15499F 30%,
      #175CDB 41%,
      #2A6CF0 50%,
      #4C82F2 58%,
      #709BF4 66%,
      #99BAF7 74%,
      #BFD5FA 81%,
      #DEEAFD 87%,
      #F1F7FF 93%,
      #FBFDFF 97%,
      #FFFFFF 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(6,26,70,.22)}
.hero h1 em{color:#C7E4FF}
.hero-copy{color:#E8F1FF}
.hero-note{color:#BCD2F2}
.eyebrow{
  display:inline-flex;gap:10px;align-items:center;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:999px;padding:7px 16px;
  color:#DCE9FF;font-size:12px;letter-spacing:2.4px;
  box-shadow:none;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#8DF0FF}
/* 蓝底上主按钮用白底蓝字,更跳 */
.hero .btn{background:#fff;color:var(--rd-brand)}
.hero .btn:hover{background:#F2F7FF;color:var(--rd-brand-dark)}
.hero .btn.light{
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.36);
  color:#EAF2FF;
}
.hero .btn.light:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);color:#fff}
/* 入场动画只动 opacity 与 translate 属性:translate 与 transform 互不干扰,
   否则动画结尾的 transform 会一直压住卡片的悬停/倾斜效果 */
@keyframes rd-rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.hero-grid>div{animation:rd-rise .7s var(--rd-ease) both}
.hero-grid>div:last-child{animation-delay:.14s}

/* 首屏右侧:白色交付卡(3D 跟随鼠标倾斜 + 聚光 + 点击翻转)
   背面为纯品牌蓝、无任何内容 */
.receipt{
  --tilt-r:1.5deg;  /* 基础微倾角 */
  --tilt-x:0deg;    /* 上下倾斜 */
  --tilt-y:0deg;    /* 左右倾斜 */
  --tilt-tx:0px;
  --tilt-ty:0px;
  --tilt-s:1;
  --flip:0deg;      /* 0deg = 正面,180deg = 背面 */
  position:relative;
  cursor:pointer;
  background:rgba(255,255,255,.95);
  border:1px solid #E4EDFA;
  border-radius:26px;
  box-shadow:0 40px 90px rgba(18,64,170,.2);
  transform-style:preserve-3d;
  /* 注意:这里不能用 backdrop-filter —— 它会强制 transform-style 降级为 flat,
     导致正面内容的 backface-visibility 失效(翻转后会看到镜像的正面)。 */
  transform:perspective(1200px)
            rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + var(--flip))) rotate(var(--tilt-r))
            translate3d(var(--tilt-tx),var(--tilt-ty),0) scale(var(--tilt-s));
  transition:transform .6s var(--rd-ease),box-shadow .45s var(--rd-ease),border-color .3s;
  will-change:transform;
}
/* 正面内容:翻到背面时隐藏
   backface-visibility 只能藏住"平"的元素 —— 卡内自带 transform 的后代(动效滑杆的
   滑块/扫光等)在 3D 上下文里会变成独立平面,父级的 backface 管不住它。所以再加一层
   opacity:整棵子树作为一组合成,任何后代都藏得住。 */
.receipt>*{
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:opacity .12s linear .3s; /* 翻回正面时,等转过大半圈再显形 */
}
.receipt.is-flipped>*{
  opacity:0;
  pointer-events:none;
  transition:opacity .12s linear;     /* 翻向背面时立即淡出 */
}
/* 背面:纯品牌蓝 + 品牌图标 T(favicon 同款造型的反白版,无文字)
   注意:背面不能用 backface-visibility 控制显隐 —— 在这个 3D 上下文里
   它会把背面自己也藏掉(实测蓝色完全不出)。改用透明度 + 延迟:翻过约 90° 才显形。 */
.receipt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect width='40' height='40' rx='11' fill='%23ffffff'/><path d='M9 11h22M20 11v20' fill='none' stroke='%23175CDB' stroke-width='3' stroke-linecap='round'/></svg>") center/104px 104px no-repeat,
    var(--rd-brand);
  transform:rotateY(180deg);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s linear; /* 翻回正面时立即淡出 */
}
/* 指针进入后缩短过渡,跟手更紧;离开自动回到基础倾角 */
.receipt.fx-active{
  transition:transform .12s linear,box-shadow .45s var(--rd-ease),border-color .3s;
  border-color:#C9DCFA;
}
/* 翻转时用较慢的过渡,避免被跟手过渡带得太快 */
.receipt.is-flipping{
  transition:transform .62s var(--rd-ease),box-shadow .45s var(--rd-ease),border-color .3s;
}
.receipt:hover{box-shadow:0 52px 105px rgba(18,64,170,.28),0 0 0 1px rgba(23,92,219,.16)}
.receipt.is-flipped{--flip:180deg;border-color:var(--rd-brand)}
.receipt.is-flipped::before{
  opacity:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .14s linear .2s; /* 翻到背面时等转过大半圈再显形 */
}
/* 翻到背面时不显示聚光 */
.fx-card.receipt.is-flipped:hover::after{opacity:0}
/* 卡内可交互元素保持自己的鼠标样式,点击不触发翻转 */
.receipt a,.receipt button,.receipt input,.receipt label,.receipt summary,.receipt .mode-slider{cursor:pointer}
.receipt .mode-slider{cursor:default}
/* 「点击翻转卡片」提示:文字保持原来的淡色,只有翻转图标用品牌蓝 */
.flip-hint{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:13px;
  font-size:12px;line-height:1.5;letter-spacing:.02em;
  color:#AFBBD0;
  user-select:none;-webkit-user-select:none;
}
.flip-hint-icon{
  display:inline-grid;place-items:center;
  width:19px;height:19px;border-radius:50%;
  font-size:12px;color:var(--rd-brand);
  background:rgba(23,92,219,.09);
  transition:transform .35s var(--rd-ease);
}
.receipt:hover .flip-hint-icon{transform:rotate(-180deg)}
.receipt-top{border-bottom-color:#E8EFFA}
.receipt-top strong{color:var(--rd-ink)}
.receipt .caps{color:#7C8AA5}
.receipt-title{color:var(--rd-ink)}
.receipt-sub{color:var(--rd-muted)}
.plan-switch a{
  background:#F4F8FE;
  border:1px solid #E0E9F7;
  color:#3D5178;border-radius:14px;
  transition:background .2s,border-color .2s,transform .2s var(--rd-ease),box-shadow .2s;
}
.plan-switch a:hover{border-color:#AECBF6;transform:translateY(-1px);box-shadow:var(--rd-shadow-s)}
.plan-switch a:first-child{
  background:var(--rd-brand);
  border-color:var(--rd-brand);color:#fff;
  box-shadow:0 8px 20px rgba(23,92,219,.32);
}
.plan-switch a:first-child:hover{background:var(--rd-brand-dark)}
.route{background:var(--rd-sky-1);border:1px solid #E4EDFA;border-radius:16px}
.route-step{color:#2C3E63;transition:transform .22s var(--rd-ease),color .2s}
.route-step:hover{transform:translateX(5px);color:var(--rd-brand)}
.route-step:hover small{color:#4B6690}
.route-step:hover .step-check{box-shadow:0 0 0 4px rgba(23,92,219,.12)}
.route-step small{color:#7C8AA5}
.step-check{transition:box-shadow .25s var(--rd-ease),background .2s,color .2s}
.step-check{background:#E2EDFF;color:var(--rd-brand);font-weight:700}
.route-step:last-child .step-check{background:var(--rd-brand);color:#fff}
.receipt-foot{color:#7C8AA5}
.receipt-foot b{color:var(--rd-ink)}
/* 动效滑杆(亮底适配) */
.mode-demo{color:var(--rd-brand)}
.mode-demo-kicker{color:#7C8AA5}
.mode-fast-label{color:#94A3BC}
.mode-slider-rail{background:#E9EFF9}
.mode-stops span{background:#CFDBEE}
/* 滑杆手感:整条滑杆都由脚本连续跟随(不再走原生 range 的 5 档量化),
   滑块用 transform 走合成层,移动端不再逐帧重排 */
.mode-range{pointer-events:none}
.mode-thumb{
  left:0;
  transform:translate3d(var(--thumb-px,0px),0,0);
  transition:transform .18s var(--rd-ease),color .2s,box-shadow .2s;
  will-change:transform;
}
.mode-slider-fill{width:calc(var(--thumb-px,0px) + 44px);transition:width .18s var(--rd-ease)}
.mode-demo[data-dragging="true"] .mode-thumb{transition:color .2s,box-shadow .2s}
.mode-demo[data-dragging="true"] .mode-slider-fill{transition:none}

/* ---------- 5. 信任条:悬浮白卡咬住首屏 ---------- */
.trust-strip{
  margin-top:-58px;position:relative;z-index:2;
  background:#fff;
  border:1px solid #E1EAF7;
  border-radius:22px;
  box-shadow:0 26px 64px rgba(18,64,170,.16),0 2px 10px rgba(18,64,170,.05);
  padding:30px 12px;
}
.trust-item{border-right-color:#EBF1F9;font-weight:600;color:#33425E}
.trust-item .icon{
  width:38px;height:38px;border-radius:13px;
  display:inline-grid;place-items:center;font-size:17px;
  background:var(--rd-brand-soft);
  color:var(--rd-brand);
  transition:transform .25s var(--rd-ease);
}
.trust-item:hover .icon{transform:scale(1.12) rotate(-4deg)}

/* ---------- 6. 章节节奏(统一纯白底,靠留白与卡片分层) ---------- */
.section{padding:66px 0}   /* 区块内留白收紧(原 96px) */
.section.soft{background:#fff}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:2.6px;font-weight:800;
  color:var(--rd-brand);
}
.section-top p{font-size:16px}
.section-aside{
  border:1px solid #D8E6FA;background:var(--rd-sky-1);
  border-radius:14px;padding:12px 16px;font-weight:600;color:#2F4E8C;
}

/* ---------- 7. 定价双卡 ---------- */
.price-card{
  border:1px solid var(--rd-line);
  border-radius:26px;
  padding:36px;
  background:#fff;
  box-shadow:var(--rd-shadow-s);
  transition:transform .28s var(--rd-ease),box-shadow .3s var(--rd-ease),border-color .25s;
}
.price-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 26px 60px rgba(23,92,219,.2),0 0 0 4px rgba(23,92,219,.12);
  border-color:#8FB8F5;
}
.price-card:active{transform:translateY(-3px) scale(1.004);transition-duration:.1s}
.price-card.featured{
  border:1.5px solid var(--rd-brand);
  box-shadow:0 20px 55px rgba(23,92,219,.16);
}
.price-card.featured:hover{box-shadow:0 32px 76px rgba(23,92,219,.26),0 0 0 4px rgba(23,92,219,.14)}
.price-card.product{background:#FAFCFF}
.pill{
  background:var(--rd-brand);color:#fff;
  padding:5px 14px;border-radius:999px;font-weight:700;
  box-shadow:0 5px 14px rgba(23,92,219,.28);
}
.price-card.product .pill{background:#EDF2FA;color:#5C6C88;box-shadow:none}
.price-heading h3{font-size:27px}
.price-card.featured .price{color:var(--rd-brand)}
.price{font-weight:800}
.checklist{border-top-color:#EDF2F9}
.checklist li{align-items:center;gap:13px}
.checklist li::before{
  content:"✓";
  width:23px;height:23px;border-radius:50%;flex:0 0 auto;
  display:inline-grid;place-items:center;
  font-size:12px;font-weight:800;
  background:var(--rd-brand-soft);
  color:var(--rd-brand);
}
.price-note{color:#7C8AA5}

/* ---------- 8. 开通流程:编号徽章卡 ---------- */
.steps article{
  background:#fff;border:1px solid var(--rd-line);border-radius:20px;
  padding:26px 22px;box-shadow:var(--rd-shadow-s);
  transition:transform .26s var(--rd-ease),box-shadow .3s var(--rd-ease),border-color .22s;
}
.steps article:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 20px 46px rgba(23,92,219,.16),0 0 0 4px rgba(23,92,219,.1);
  border-color:#8FB8F5;
}
.steps article:active{transform:translateY(-2px) scale(1.006);transition-duration:.1s}
.step-num{
  width:46px;height:46px;margin-bottom:20px;
  border-radius:15px;display:grid;place-items:center;
  background:var(--rd-brand);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:0;
  box-shadow:0 10px 22px rgba(23,92,219,.32);
}
.step-num::after{display:none}
.delivery{
  border:1px solid #C9DEFA;border-radius:16px;
  background:#F0F7FF;
  box-shadow:var(--rd-shadow-s);
}

/* ---------- 9. 价值三卡 ---------- */
.value{
  position:relative;overflow:hidden;
  border:1px solid var(--rd-line);border-radius:20px;
  background:#fff;padding:30px 26px;
  box-shadow:var(--rd-shadow-s);
  transition:transform .26s var(--rd-ease),box-shadow .3s var(--rd-ease);
}
.value::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--rd-brand);
}
.value:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 20px 46px rgba(23,92,219,.16),0 0 0 4px rgba(23,92,219,.1);
}
.value:active{transform:translateY(-2px) scale(1.006);transition-duration:.1s}
.value-tag{font-weight:800;letter-spacing:1.8px;color:var(--rd-brand)}

/* ---------- 10. 服务承诺:纯品牌蓝面板(上下留白收紧,避免孤立) ---------- */
#support{padding:8px 0}
/* 面板内两列改为顶部对齐:里面那块展开时只向下长,可点击的标题行不会上移 */
#support .service-panel{align-items:start}
.service-panel{
  position:relative;overflow:hidden;
  background:var(--rd-brand);
  border:1px solid var(--rd-brand);
  border-radius:30px;
  box-shadow:0 30px 80px rgba(23,92,219,.4);
}
.service-panel h2{color:#fff}
.service-panel .kicker{color:#BFE0FF}
.service-panel p{color:#DCE9FF}
.service-panel a{color:#CFE6FF}
.service-rule{border-bottom-color:rgba(255,255,255,.25)}
.service-rule h3{color:#fff}
.compact-service details{border-color:rgba(255,255,255,.28)}
.compact-service summary{color:#fff}
.compact-service summary::after{color:#BFE0FF}
.compact-service details p{color:#DCE9FF}

/* ---------- 11. 常见问题:卡片手风琴 ---------- */
#faq details{
  border:1px solid var(--rd-line);
  border-radius:16px;
  background:#fff;
  padding:0 24px;
  margin-bottom:12px;
  transition:border-color .22s,box-shadow .25s,transform .22s var(--rd-ease);
}
#faq details:hover{
  transform:translateY(-2px);
  border-color:#AECBF6;
  box-shadow:var(--rd-shadow-m),0 0 0 3px rgba(23,92,219,.1);
}
#faq details[open]{border-color:#8FB8F5;box-shadow:var(--rd-shadow-m)}
#faq summary{font-weight:700;color:var(--rd-ink)}
/* 折叠项 +/− 统一为圆形按钮,top:50% + translate 精确垂直居中 */
#faq details:not(.risk-note) summary{padding-right:48px}
#faq details:not(.risk-note) summary::after{
  width:30px;height:30px;top:50%;right:2px;translate:0 -50%;
  border-radius:50%;display:grid;place-items:center;line-height:1;
  background:#EFF5FF;color:var(--rd-brand);font-weight:600;
  transition:transform .25s var(--rd-ease),background .2s;
}
#faq details:not(.risk-note)[open] summary::after{transform:rotate(180deg);background:#DCEAFF}
/* 「购买须知」紧凑型:小号圆钮 */
#faq .risk-note summary{padding-right:40px}
#faq .risk-note summary::after{
  width:26px;height:26px;top:50%;right:0;translate:0 -50%;
  border-radius:50%;display:grid;place-items:center;line-height:1;
  background:#EFF5FF;color:var(--rd-brand);font-size:17px;font-weight:600;
}
/* 联系页/开通页/订单页/邀请页折叠项:迷你圆钮 */
.order-details summary::after,.purchase-details summary::after,
.private-link-details summary::after,.referral-rules summary::after{
  width:22px;height:22px;top:50%;right:0;translate:0 -50%;
  border-radius:50%;display:grid;place-items:center;line-height:1;
  background:#EFF5FF;color:var(--rd-brand);font-size:15px;font-weight:600;
}
/* 深蓝服务面板内的折叠项:保持亮蓝符号,仅修正居中 */
.compact-service summary::after{top:50%;translate:0 -50%;color:#BFE0FF}
.faq-intro a{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;color:var(--rd-brand);
  border-bottom:2px solid #C9DEFC;padding-bottom:2px;
}
.faq-intro a:hover{color:var(--rd-brand-dark);border-color:var(--rd-brand)}
.risk-note{
  border:1px solid #D8E6FA;border-left:4px solid var(--rd-brand);
  border-radius:14px;background:#F5F9FF;
}

/* ---------- 12. CTA 横幅:纯品牌蓝 ---------- */
.cta-band{
  position:relative;overflow:hidden;
  border-radius:28px;
  padding:52px 56px;
  background:var(--rd-brand);
  box-shadow:0 30px 70px rgba(23,92,219,.36);
}
.cta-band h2{color:#fff}
.cta-band p{color:#DCE9FF}
.cta-band .btn{
  background:#fff;color:var(--rd-brand);
  box-shadow:0 14px 34px rgba(10,40,110,.28);
}
.cta-band .btn:hover{background:#F2F7FF;color:var(--rd-brand-dark)}

/* ---------- 13. 页脚:纯白收束 ---------- */
.footer{
  background:#fff;
  border-top:1px solid #E8EEF8;
  padding:42px 0 26px;
}
.footer .brand{color:var(--rd-ink)}
.footer .brand small{color:#7C8AA5}
.footer p{color:#71829F}
.footer-links a{color:#46587E}
.footer-links a:hover{color:var(--rd-brand)}
.footer-bottom{border-top-color:#E2EAF6;color:#8494AF}
.mobile-bar{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid #E2EAF6;
  color:#46587E;
  box-shadow:0 -8px 26px rgba(23,92,219,.1);
}

/* ---------- 14. 规则页 ---------- */
.legal-hero{
  background:#fff;
  border-bottom:1px solid #E8EEF8;
  padding:64px 0 44px;
}
.crumb{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;color:var(--rd-brand);
  border:1px solid #D6E4FA;background:#fff;
  border-radius:999px;padding:7px 16px;font-size:13px;
  box-shadow:var(--rd-shadow-s);
  transition:transform .2s var(--rd-ease),box-shadow .2s;
}
.crumb:hover{transform:translateX(-3px);box-shadow:var(--rd-shadow-m)}
.notice{
  background:#F0F6FF;
  border:1px solid #D6E4FA;border-left:4px solid var(--rd-brand);
  border-radius:12px;color:#2F4E8C;
}
.prose h2{color:var(--rd-ink)}
.prose p,.prose li{color:#4E5F7E}
.recharge-qr{
  display:block;
  border:1px solid #E2E9F4;border-radius:20px;
  padding:16px;background:#fff;
  box-shadow:var(--rd-shadow-m);
}
.legal-nav a{border-radius:10px;transition:background .18s,color .18s}
.legal-nav a:hover{background:#F0F5FD;color:var(--rd-brand)}
.legal-nav a.active{background:#EAF2FF;color:var(--rd-brand);font-weight:700}

/* ---------- 15. 联系页 / 快速开通卡 ---------- */
.quick-order{
  border:1px solid #E2EAF6;border-radius:28px;
  box-shadow:var(--rd-shadow-l);
  padding:44px 48px;
  background:#fff;
}
.quick-order h1{color:var(--rd-brand)}
.order-price{font-weight:800;color:var(--rd-brand)}
.order-price small{color:#7A8AA5;font-weight:400}
.selected-plan,.muted-pill{
  border:1px solid #C9DEFC;border-radius:999px;
  background:#EFF5FF;
  color:var(--rd-brand);font-weight:700;
}
.contact-message{background:#F4F8FD;border:1px solid #E2EAF6;border-radius:14px}
.contact-email a{font-weight:700;color:var(--rd-brand)}
.delivery-line{
  display:inline-block;width:100%;
  padding:12px;border-radius:12px;
  background:#F0F7FF;border:1px dashed #B9D2F6;
  color:#2F5288;font-weight:600;
}
.order-details details,.purchase-details{
  border:1px solid var(--rd-line);border-radius:14px;
  background:#FBFCFF;padding:2px 18px;margin-top:12px;
  transition:border-color .2s,box-shadow .2s;
}
.order-details details:hover,.purchase-details:hover{border-color:#AECBF6}
.order-details details[open],.purchase-details[open]{border-color:#8FB8F5;box-shadow:var(--rd-shadow-s)}
.recharge-contact{
  border:1px solid #D6E4FA;border-radius:22px;
  background:#F7FBFF;
  box-shadow:var(--rd-shadow-m);
}
.payment-code,.manual-payment-codes figure{
  border:1px solid #E2EAF6;border-radius:18px;
  box-shadow:var(--rd-shadow-s);
  transition:transform .24s var(--rd-ease),box-shadow .26s,border-color .2s;
}
.payment-code:hover,.manual-payment-codes figure:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:var(--rd-shadow-m),0 0 0 4px rgba(23,92,219,.1);
  border-color:#AECBF6;
}
.contact-copy input{border-radius:12px;border:1.5px solid #D5DFEF;background:#fff}
.contact-copy input:focus-visible{outline:0;border-color:var(--rd-brand);box-shadow:0 0 0 4px rgba(23,92,219,.16)}
.copy-button{border-radius:12px;border:1.5px solid #D5DFEF;font-weight:700;transition:all .2s}
.copy-button:hover{border-color:var(--rd-brand);background:#EFF5FF}
/* 大容器卡:轻微浮起回应 */
.quick-order,.commerce-card,.recharge-contact{
  transition:transform .28s var(--rd-ease),box-shadow .3s var(--rd-ease),border-color .22s;
}
.quick-order:hover,.commerce-card:hover,.recharge-contact:hover{
  transform:translateY(-3px);
  box-shadow:var(--rd-shadow-l);
  border-color:#C6DAF6;
}

/* ---------- 16. 商业页(开通/订单/邀请) ---------- */
.commerce-page{background:#fff}
.commerce-heading h1{color:var(--rd-brand);font-weight:800}
.commerce-nav a{color:#46587E;font-weight:600}
.commerce-nav a:hover{color:var(--rd-brand)}
.commerce-card{
  border:1px solid #E2EAF6;border-radius:24px;
  box-shadow:var(--rd-shadow-m);padding:34px;background:#fff;
}
.commerce-notice{
  border:1px solid #C9DEFC;border-radius:14px;
  background:#EFF5FF;
  color:#2F5288;
}
.environment-banner{
  top:90px;
  background:#FFF3D6;
  border-bottom:1px solid #EDD9A3;
}
.commerce-page input:not([type=checkbox]):not([type=radio]),
.commerce-page textarea,.commerce-page select{
  border:1.5px solid #D5DFEF;border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.commerce-page input:focus-visible,.commerce-page select:focus-visible,.commerce-page textarea:focus-visible{
  outline:0;border-color:var(--rd-brand);
  box-shadow:0 0 0 4px rgba(23,92,219,.16);
}
.commerce-page input[readonly]{background:#F5F8FD}
.payment-option{
  border:1.5px solid #D9E2F1;border-radius:14px;
  transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--rd-ease);
}
.payment-option:hover{border-color:#AECBF6;transform:translateY(-1px)}
.payment-option:has(input:checked){
  border-color:var(--rd-brand);
  background:#EFF5FF;
  box-shadow:0 6px 16px rgba(23,92,219,.12);
  font-weight:700;
}
.checkout-price strong{color:var(--rd-brand)}
.status-symbol{
  background:var(--rd-brand);color:#fff;
  box-shadow:0 10px 24px rgba(23,92,219,.32);
  font-weight:700;
}
.order-steps li{
  border-top:3px solid #E4EAF3;padding-top:10px;border-radius:2px;
}
.order-steps li.is-complete{
  border-color:var(--rd-brand);color:var(--rd-brand);font-weight:700;
}
.order-facts dd{font-weight:600;color:var(--rd-ink)}
.order-payment{
  border:1px solid #D6E4FA;border-radius:16px;
  background:#F7FBFF;
}
.payment-qr{border-radius:16px;box-shadow:var(--rd-shadow-s)}
.copy-field .btn{border-radius:12px}
.reward-balances strong{color:var(--rd-brand)}
.reward-balances>div:last-child strong{color:var(--rd-ink)}
.text-button{border-radius:8px}
.text-button:hover{background:#EFF5FF;text-decoration:none}
.form-message{border-radius:12px}
.manual-payment-summary{
  border:1px solid #D6E4FA;border-radius:16px;
  background:#F7FBFF;
  box-shadow:var(--rd-shadow-s);
}
.manual-payment-summary span{font-weight:800}
.manual-contact-code img{border-radius:16px;box-shadow:var(--rd-shadow-s)}
.manual-payment-warning{border:1px solid #F2E3B6;border-radius:12px}
.commerce-footer{
  background:transparent;border-top:1px solid #E2EAF6;
}
.commerce-footer a{color:#4A6288}
.commerce-footer a:hover{color:var(--rd-brand)}
.real-stats strong{color:#2F5288}

/* ---------- 17. 鼠标跟随:卡片聚光 / 首屏卡片倾斜 / 按钮磁吸 ---------- */
.fx-card{position:relative;isolation:isolate}
.fx-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  opacity:0;transition:opacity .3s var(--rd-ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(23,92,219,.16),transparent 62%);
}
.fx-card:hover::after{opacity:1}
/* 蓝色面板上改为白色聚光 */
.fx-card-light::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%);
}
@supports not (isolation:isolate){
  .fx-card::after{z-index:0}
}
/* 首屏卡片聚光略强一点,和倾斜动作呼应 */
.receipt.fx-card::after{
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(23,92,219,.14),transparent 60%);
}
/* 首屏 / CTA 按钮:磁吸跟随(由脚本写入 --mag-x / --mag-y) */
.hero .actions .btn,.cta-band .btn{
  --mag-x:0px;--mag-y:0px;--lift:0px;
  transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0);
}
.hero .actions .btn:hover,.cta-band .btn:hover{--lift:-2px}
.hero .actions .btn:active,.cta-band .btn:active{--lift:0px}

/* ---------- 18. 滚动浮现:内容进入视口时淡入上移(层次感) ----------
   纯白背景下靠"浮现"建立层次:未进入视口时略低、略透明,进入后归位。
   用 translate 而非 transform,避免压住卡片的悬停浮起。
   由 reveal.js 添加 .reveal 类,脚本失效时内容照常全部可见。 */
.reveal{
  opacity:0;
  translate:0 30px;
  transition:opacity .72s var(--rd-ease) var(--reveal-delay,0ms),
             translate .72s var(--rd-ease) var(--reveal-delay,0ms);
  will-change:opacity,translate;
}
.reveal.is-revealed{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;transition:none}
}

/* ---------- 19. 响应式微调 ---------- */
@media(max-width:900px){
  .service-panel{border-radius:24px}
}
@media(max-width:680px){
  html{scroll-padding-top:88px}
  .header{padding:9px 0}
  .nav{height:56px;padding:0 8px 0 16px}
  .hero{margin-top:-74px;padding:134px 0 84px}
  .hero-grid{grid-template-columns:1fr}
  .trust-strip{margin-top:-44px;padding:22px 8px;border-radius:18px}
  .trust-item .icon{width:32px;height:32px;border-radius:11px;font-size:15px}
  .section{padding:46px 0}
  .price-card{padding:26px;border-radius:22px}
  /* 手机端:关掉鼠标倾斜(没有悬停指针),但必须保留翻转的旋转 ——
     不能用 transform:none,那会把 rotateY(--flip) 一起关掉,翻转就没有转动感了。 */
  .receipt{
    --tilt-r:0deg;--tilt-x:0deg;--tilt-y:0deg;
    --tilt-tx:0px;--tilt-ty:0px;--tilt-s:1;
  }
  .receipt::before{background-size:88px 88px,auto}
  .cta-band{padding:34px 26px;border-radius:22px}
  .cta-band .btn{width:100%}
  .quick-order{padding:28px 22px;border-radius:22px}
  .commerce-card{padding:24px 20px;border-radius:20px}
  .environment-banner{top:74px}
  .service-panel{border-radius:20px}
  #faq details{padding:0 18px}
}
@media(max-width:860px){
  .nav-links{
    top:calc(100% + 10px);
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.84));
    -webkit-backdrop-filter:blur(24px) saturate(1.9);backdrop-filter:blur(24px) saturate(1.9);
    border:1px solid rgba(255,255,255,.85);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(23,92,219,.24),inset 0 1px 0 rgba(255,255,255,.95);
  }
  .nav-links a{color:#46587E;border-radius:10px}
  .nav-links a:hover{background:var(--rd-sky-1);color:var(--rd-brand)}
  .nav-links .btn{margin-top:10px;color:#fff}
}
@media(prefers-reduced-motion:reduce){
  .hero-grid>div{animation:none}
  .btn,.btn::after,.receipt,.price-card,.steps article,.value{transition:none}
  .fx-card::after{display:none}
}

/* ---------- 20. 钉住式滚动(JS 驱动,不用 sticky) ----------
   做法:区块本身拉高;内容用绝对定位放在区块顶部,再由脚本写入 --pin-y
   使其在滚动时"钉"在视口顶部。区块加 overflow:clip —— 内容不可能溢出到相邻区块,
   即使脚本失效也只是停留在区块顶部,不会造成错位。 */
@media(min-width:901px){
  /* —— 价值区:三张卡履带 —— */
  section.section:has(.values){
    position:relative;
    height:168vh;
    padding:0;
    background:#fff;
    overflow:clip;
  }
  section.section:has(.values) > .wrap{
    position:sticky;top:0;               /* 原生粘性:由合成器驱动,和滚动完全同步,不会抖 */
    height:100vh;
    display:grid;
    grid-template-columns:.98fr 1.02fr;
    gap:60px;
    align-items:center;                 /* 左栏垂直居中 */
    padding-top:0;padding-bottom:0;
  }
  section.section:has(.values) .section-top{display:block;margin:0}
  section.section:has(.values) .section-top h2{
    font-size:clamp(22px,2.25vw,31px);
    white-space:nowrap;                 /* 标题保持一行 */
    letter-spacing:-.5px;
  }
  /* 履带:卡片之间留间距,整条队列随滚动上移 */
  section.section:has(.values) .values{
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
    transform:translate3d(0,var(--track-y,0px),0);
    will-change:transform;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
  section.section:has(.values) .value{
    padding:26px 30px;
    transform-origin:center;
    /* --focus:1=正中(清晰),0=边缘(模糊+缩小+变淡);由脚本逐帧写入,滚动更柔 */
    opacity:calc(.3 + .7 * var(--focus,0));
    scale:calc(.96 + .04 * var(--focus,0));
    filter:blur(calc((1 - var(--focus,0)) * 3.4px));
    transition:border-color .3s,box-shadow .3s;
  }
  section.section:has(.values) .value.is-active{
    border-color:#B9D2F8;
    box-shadow:0 22px 54px rgba(23,92,219,.16);
  }
  .pin-dots{display:flex;gap:8px;margin-top:28px}
  .pin-dots i{
    width:26px;height:4px;border-radius:999px;background:#DCE6F5;
    transition:background .3s var(--rd-ease),width .3s var(--rd-ease);
  }
  .pin-dots i.is-on{background:var(--rd-brand);width:46px}

  /* —— FAQ:同一套(左栏居中 + 问题履带) —— */
  #faq{position:relative;padding:0;overflow:clip}
  #faq > .wrap{position:relative;height:100%}
  #faq .faq-layout{
    position:sticky;top:0;               /* 原生粘性,避免 JS 位移带来的抖动 */
    height:100vh;
    padding:0 28px;
    display:grid;
    grid-template-columns:.75fr 1.4fr;
    gap:70px;
    align-items:center;                 /* 左栏垂直居中 */
  }
  #faq .faq-intro{align-self:center}
  #faq .faq-scroll{
    display:grid;
    grid-template-columns:1fr;
    align-content:start;                /* 从顶部排:展开只向下长,不把整列顶上去 */
    height:78vh;                        /* 固定高度:容器不因展开而重新居中 */
    gap:14px;
    transform:translate3d(0,var(--track-y,0px),0);
    will-change:transform;
  }
  #faq .faq-scroll > details{
    opacity:calc(.3 + .7 * var(--focus,0));
    scale:calc(.972 + .028 * var(--focus,0));
    filter:blur(calc((1 - var(--focus,0)) * 2.6px));
    transition:border-color .3s,box-shadow .3s;
  }
  #faq .faq-scroll > details.is-active{
    border-color:#AECBF6;
    box-shadow:var(--rd-shadow-m);
  }
  /* 「购买须知」:顶部锚定在整段底部区域,展开向下长 */
  #faq .risk-note{position:absolute;left:28px;right:28px;top:calc(100% - 240px);margin:0}
}
/* 手机端:不做钉住,正常上下堆叠 */
@media(max-width:900px){
  section.section:has(.values){height:auto;padding:46px 0}
  section.section:has(.values) > .wrap{position:static;height:auto;display:block;padding:0 21px;transform:none}
  section.section:has(.values) .section-top{margin-bottom:26px}
  section.section:has(.values) .section-top h2{white-space:normal}
  section.section:has(.values) .values{display:grid;grid-template-columns:1fr;gap:20px;transform:none;-webkit-mask-image:none;mask-image:none}
  section.section:has(.values) .value{opacity:1;scale:none;filter:none}
  #faq{position:static;overflow:visible}
  #faq > .wrap{height:auto}
  #faq .faq-layout{position:static;height:auto;padding:0 21px;transform:none}
  #faq .faq-scroll{display:grid;grid-template-columns:1fr;gap:12px;height:auto;transform:none;-webkit-mask-image:none;mask-image:none}
  #faq .faq-scroll > details{opacity:1;scale:none;filter:none}
  #faq .risk-note{position:static;margin:26px 21px 0}
  .pin-dots{display:none}
}
/* 滚动监听:当前正在阅读的那一条轻微高亮 */
.value.is-active{
  border-color:#AECBF6;
  box-shadow:0 18px 44px rgba(23,92,219,.13),0 0 0 3px rgba(23,92,219,.08);
}