/* 智阅官网落地页 · 零依赖静态样式（2026-10-01 一期本地稿）
   品牌：深蓝 #0D2B5E + 金 #C8962E + 白底
   口径：不引 CDN、不引字体文件；中文字体栈给全平台回退；
        排版节奏：容器 1040px、正文 ≥13.5px；间距 8pt 阶梯。 */

/* ═══ 设计令牌 ═══ */
:root{
  /* 品牌色 */
  --blue:#0D2B5E; --blue-d:#092041; --blue-l:#16386f;
  --gold:#C8962E; --gold-d:#8a6a1e; --gold-l:#faf3e3;
  /* 中性色 */
  --ink:#2b3550; --gray:#5a6478; --gray-md:#6B7280; --gray-l:#67718a;
  --line:#e6e9f0; --line-d:#d7ddea; --bg:#f7f9fc; --bg-soft:#fbfcfe;
  /* 间距（8pt 阶梯） */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:48px; --sp-7:88px; --sp-8:112px;
  /* 字号阶梯 */
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:32px; --fs-hero:48px;
  /* 圆角 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  /* 阴影 */
  --shadow-xs:0 1px 2px rgba(13,43,94,.05);
  --shadow-sm:0 2px 8px rgba(13,43,94,.07);
  --shadow-md:0 10px 28px rgba(13,43,94,.10);
  --shadow-gold:0 2px 10px rgba(200,150,46,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff; line-height:1.7;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}
.btn:focus-visible{outline-color:var(--gold)}
.wrap{max-width:1040px; margin:0 auto; padding:0 22px}
.center{text-align:center}
.tiny{font-size:var(--fs-sm); color:var(--gray-md); line-height:1.6; margin:10px 0 0}
details.acc{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:0 18px; margin-top:var(--sp-2)}
details.acc summary{cursor:pointer; padding:14px 0; font-size:15px; color:var(--blue); font-weight:600; list-style:none}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:'＋'; float:right; color:var(--gray-l); font-weight:400}
details.acc[open] summary::after{content:'－'}
details.acc .body{padding:0 0 16px; font-size:14px; color:#3b4252; line-height:1.75}
form.mini{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          margin-top:var(--sp-2); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px}
form.mini .full{grid-column:1/-1}
form.mini input,form.mini select,form.mini textarea{width:100%; padding:10px 12px; border:1px solid #d8dde9;
          border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink)}
form.mini input:focus,form.mini select:focus,form.mini textarea:focus{outline:none; border-color:var(--gold)}
form.mini button{grid-column:1/-1; padding:12px 20px; background:var(--blue); color:#fff; border:none;
          border-radius:9px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit}
form.mini button:hover{background:var(--blue-l)}
#buymsg{margin-top:8px; font-size:13.5px; grid-column:1/-1}
.ok{color:#1a7f37} .err{color:#c0392b}
.dark{--x:0}
.tb{display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0; font-size:13px; color:var(--gray)}
.tb span{display:inline-flex; align-items:center; gap:6px}
.tb .ico{width:15px; height:15px; color:var(--gray-l)}
.note{font-size:var(--fs-sm); color:var(--gray); background:var(--bg); border-left:3px solid var(--gold);
      padding:12px 16px; border-radius:var(--r-md); margin-top:var(--sp-3); line-height:1.7}
.ph{color:#b3452b; background:#fdf3ef; border:1px dashed #e8c4b8; border-radius:var(--r-sm); padding:0 4px}

/* ── 吸顶导航 ── */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
     backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line)}
.navin{display:flex; align-items:center; gap:18px; padding:12px 22px}
.brand{font-size:19px; font-weight:800; color:var(--blue); letter-spacing:.5px}
.brand span{color:var(--gold)}
.links{display:flex; gap:18px; flex:1; flex-wrap:wrap}
.links a{color:var(--gray); font-size:13.5px}
.links a:hover{color:var(--blue); text-decoration:none}
.navcta{display:flex; gap:10px; align-items:center}
.navlink{color:var(--gray) !important; font-size:14px; text-decoration:none !important}
.navlink:hover{color:var(--blue) !important}
.navtip{text-align:right; font-size:var(--fs-xs); color:var(--gray-md); padding:0 22px 10px}

/* ── 按钮 ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
     background:var(--blue); color:#fff !important; font-weight:600; border:1px solid transparent;
     padding:10px 20px; border-radius:var(--r-md); font-size:14px; text-decoration:none !important;
     transition:background .18s ease, box-shadow .18s ease, transform .1s ease}
.btn:hover{background:var(--blue-l)}
.btn:focus-visible{outline:3px solid rgba(200,150,46,.45); outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:15px 30px; font-size:17px; border-radius:var(--r-lg); font-weight:700;
        box-shadow:0 6px 18px rgba(13,43,94,.18)}
.btn.lg:hover{box-shadow:0 8px 22px rgba(13,43,94,.24)}

.ghostbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
          background:#fff; color:var(--blue) !important; font-weight:600;
          border:1px solid #9db3dd; padding:10px 20px; border-radius:var(--r-md); font-size:14px;
          text-decoration:none !important;
          transition:border-color .18s ease, background .18s ease, transform .1s ease}
.ghostbtn:hover{background:#f0f5fc; border-color:var(--blue)}
.ghostbtn:focus-visible{outline:3px solid rgba(200,150,46,.45); outline-offset:2px}
.ghostbtn:active{background:#e4edf9; transform:translateY(1px)}
.ghostbtn.lg{padding:15px 26px; font-size:16px; border-radius:var(--r-lg)}
.ghostbtn.sm{padding:8px 16px; font-size:var(--fs-sm); border-radius:var(--r-md)}

/* 内联箭头（按钮内） */
.arr{display:inline-block; vertical-align:-2px; margin-left:7px; flex:none;
     transition:transform .2s ease}
.btn:hover .arr, .ghostbtn:hover .arr{transform:translateX(3px)}

/* ── Hero ── */
.hero{padding:var(--sp-7) 0 var(--sp-6); background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
           gap:var(--sp-5); align-items:center}
.hero h1{font-size:var(--fs-hero); line-height:1.2; color:var(--blue); margin:0 0 var(--sp-2);
         max-width:720px; letter-spacing:-.5px; font-weight:800; text-wrap:balance}
.hero .sub{font-size:var(--fs-md); color:var(--gray); max-width:680px; line-height:1.7; margin:0 0 var(--sp-4); text-wrap:pretty}
.hero .tiny{font-size:14px; color:#5f6b7a; line-height:1.6; margin-top:24px}
.cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* Hero 右侧 · 示例产出卡（真实数字） */
.hero-card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
           padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-sm);
           color:var(--ink) !important; text-decoration:none !important;
           transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.hero-card:hover{border-color:var(--blue-l); box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none}
.hero-card-eyebrow{display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:1px;
                   color:var(--gold-d); margin-bottom:4px}
.hstats{list-style:none; margin:0; padding:0}
.hstats li{display:grid; grid-template-columns:104px 1fr; align-items:baseline; gap:6px; padding:11px 0;
           border-top:1px solid var(--line); font-size:14px; color:var(--gray); line-height:1.4}
.hstats li:first-child{border-top:none; padding-top:4px}
.hstats li b{font-size:17px; font-weight:800; color:var(--blue); letter-spacing:-.3px; white-space:nowrap}
/* 卡底一行：导出格式（不属于指标，单独呈现） */
.hcard-foot{margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line);
            font-size:13px; color:var(--gray-md)}
.hcard-foot b{color:var(--blue); font-weight:700}

/* ── 信任条 ── */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.trustin{display:flex; gap:28px; flex-wrap:wrap; padding:14px 22px; font-size:var(--fs-sm); color:var(--gray)}

/* ── 通用分节 ── */
.sec{padding:var(--sp-7) 0}
.sec.alt{background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec h2{font-size:var(--fs-2xl); color:var(--blue); margin:0 0 10px; letter-spacing:-.2px; line-height:1.35}
.lead{font-size:var(--fs-base); color:var(--gray); max-width:760px; line-height:1.7; margin:0 0 var(--sp-4); text-wrap:pretty}
.grid{display:grid; gap:var(--sp-3); margin-top:var(--sp-3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-3) 26px;
      display:flex; flex-direction:column; box-shadow:var(--shadow-xs);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#dbe3f2}
/* 整卡可点入口（六个入口卡）*/
a.cardlink{display:block; color:inherit !important; text-decoration:none !important; height:100%}
a.cardlink:hover{text-decoration:none !important}
a.cardlink:hover .card{border-color:#c9d6f0}
a.cardlink .card{height:100%; padding-bottom:16px}
.card .go{display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:auto;
          padding:8px 14px; border:1px solid #cfdcf6; border-radius:9px; background:#eef4ff;
          font-size:13px; font-weight:600; color:var(--blue); align-self:stretch}
a.cardlink:hover .card .go{background:var(--blue); border-color:var(--blue); color:#fff}
a.cardlink:hover .go .arr{transform:translateX(3px)}
.card .go .arr{transition:transform .18s ease}
.price .card:hover{border-color:#eddfbe}
.qa:hover,.startstep:hover{transform:translateY(-3px)}
.qa,.startstep{transition:transform .18s ease, box-shadow .18s ease}
.card h3{font-size:var(--fs-md); color:var(--blue); margin:6px 0 8px; line-height:1.4}
.card p{margin:0 0 8px; font-size:var(--fs-base); color:#3b4252; line-height:1.6; text-wrap:pretty}
.card p:last-child{margin-bottom:0}
.card .meta{font-size:12.5px; color:var(--gray-l); margin:0}
.card.soft{background:var(--bg-soft)}
.badge{display:inline-block; align-self:flex-start; font-size:11.5px; color:#4a5568; background:#eef2f8;
       border:1px solid #dde5f1; border-radius:var(--r-sm); padding:2px 9px; margin-bottom:8px; line-height:1.5}
.badge.gold{color:#7a5a1a; background:var(--gold-l); border-color:#eddfbe}
.badge.free{color:#0f6b57; background:#e4f4ee; border-color:#c9e6dd}      /* 免费 / 合规 */
.badge.inside{color:#2a4a8a; background:#e8eefb; border-color:#cfdcf6}    /* 综述内可直接调用 */
ul.plain{list-style:none; padding:0; margin:8px 0}
ul.plain li{font-size:var(--fs-base); padding:4px 0; color:#3b4252; line-height:1.7}
ul.plain li span + span::before{content:"|"; margin:0 9px; color:var(--line-d); font-weight:400}

/* 额度行：单独成块 + 贴底 + 小标签 */
.card .quota{margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
             font-size:var(--fs-sm); color:var(--gray); line-height:1.6}
.card .quota .qtag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.3px;
                   color:var(--blue); background:#eef2f8; border:1px solid #dde5f1;
                   border-radius:var(--r-sm); padding:1px 7px; margin-right:7px; vertical-align:1px}
.card .quota b{color:var(--blue); font-weight:700}
.card .quota .qtag.free{color:#0f6b57; background:#e4f4ee; border-color:#c9e6dd}

/* ── 流水线动效演示（CSS 实现；明确标注为动效示意，非录屏）── */
.pipedemo{margin:8px 0 var(--sp-3); background:#fff; border:1px solid var(--line);
          border-radius:var(--r-lg); padding:16px 18px 12px; box-shadow:var(--shadow-xs)}
.pipetrack{height:4px; background:#eef2f8; border-radius:999px; overflow:hidden}
.pipetrack i{display:block; height:100%; width:0;
             background:linear-gradient(90deg,#7ba2dc,var(--blue));
             animation:pipeFill 12s steps(6, start) infinite}   /* 台阶式：走到第 N 步就填 N/6 */
@keyframes pipeFill{0%{width:0}100%{width:100%}}
.pipesteps{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; list-style:none; margin:12px 0 6px; padding:0}
.pipesteps li{font-size:13px; color:var(--gray); text-align:center; padding:7px 4px; border-radius:9px;
              animation:pipeStep 12s linear infinite}
.pipesteps li b{display:block; font-size:12px; color:var(--gray-l); font-weight:700; margin-bottom:2px}
.pipesteps li.on-anim b{color:inherit}
.pipesteps li:nth-child(1){animation-delay:0s}
.pipesteps li:nth-child(2){animation-delay:2s}
.pipesteps li:nth-child(3){animation-delay:4s}
.pipesteps li:nth-child(4){animation-delay:6s}
.pipesteps li:nth-child(5){animation-delay:8s}
.pipesteps li:nth-child(6){animation-delay:10s}
@keyframes pipeStep{0%,13%{background:#dbe7fb; color:var(--blue);
              box-shadow:inset 0 0 0 1px #c7d8f5}13.5%,100%{background:transparent; color:var(--gray); box-shadow:none}}
.pipenote{margin:2px 0 0; font-size:12.5px; color:var(--gray-l)}
@media (max-width:760px){.pipesteps{grid-template-columns:repeat(3,1fr)}}

/* ── 工作流程 ── */
.steps .step{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 20px;
             box-shadow:var(--shadow-xs)}
.steps .step i{font-style:normal; font-size:var(--fs-md); font-weight:800; color:var(--gold-d)}
.steps .step h3{font-size:var(--fs-base); color:var(--blue); margin:6px 0 6px}
.steps .step p{margin:0; font-size:14px; color:#3b4252; line-height:1.6}
.steps .step .you{margin-top:10px; font-size:12.8px; color:var(--blue); background:#f2f6fd;
                  border-radius:var(--r-sm); padding:6px 10px; line-height:1.5}

/* ── 定价档位 ── */
.price .card{text-align:center; justify-content:center}
.price .tier{font-size:12.5px; font-weight:700; color:var(--gold-d); letter-spacing:2px}
.price .num{font-size:26px; font-weight:800; color:var(--blue); margin:4px 0 2px; letter-spacing:-.5px}
.price .card p{font-size:var(--fs-sm); color:#3b4252; margin:2px 0}
.price .card .meta{color:var(--gray-l)}
.price .card.hot{border-color:#eddfbe; background:var(--gold-l); box-shadow:var(--shadow-gold)}
.price .card.hot .meta{color:#5f6a80}

/* ── 图标（内联 SVG，统一尺寸与描边）── */
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none;
     stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.card .ico{color:var(--blue); margin-bottom:8px}
.card h3 + .ico, .step .ico{color:var(--blue)}

/* ── 真实界面区 ── */
.shots{display:grid; gap:var(--sp-3); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--sp-3)}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
figure.shot{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
            overflow:hidden; box-shadow:var(--shadow-xs); display:flex; flex-direction:column}
figure.shot img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top;
                border-bottom:1px solid var(--line); background:#f3f6fb}
figure.shot.wide img{aspect-ratio:16/7}
figure.shot a.shotlink{display:block; cursor:zoom-in}
figure.shot a.shotlink:hover img{filter:brightness(1.03)}
@media (max-width:760px){figure.shot img{aspect-ratio:4/3}figure.shot.wide img{aspect-ratio:4/3}}
figure.shot figcaption{padding:12px 16px; font-size:13.5px; color:var(--gray); line-height:1.6}
figure.shot figcaption b{color:var(--blue); display:block; font-size:14.5px; margin-bottom:2px}
.shot.wide{grid-column:1/-1}

/* ── 常见问题 ── */
.faq{display:grid; gap:var(--sp-2); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-top:var(--sp-3)}
.qa{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-xs)}
.qa h3{font-size:15px; color:var(--blue); margin:0 0 6px}
.qa p{margin:0; font-size:14px; color:#3b4252; line-height:1.7}

/* ── 三步开始 ── */
.start{display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--sp-3)}
.startstep{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;
           box-shadow:var(--shadow-xs); position:relative}
.startstep .n{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
              border-radius:50%; background:var(--blue); color:#fff; font-weight:800; font-size:14px; margin-bottom:10px}
.startstep h3{font-size:15.5px; color:var(--blue); margin:0 0 6px}
.startstep p{margin:0; font-size:14px; color:#3b4252; line-height:1.7}
.startstep .tip{margin-top:8px; font-size:12.8px; color:#67718a}

/* ── 深色节奏带（质量与可核验区反白）── */
.sec.band{background:linear-gradient(180deg,#0D2B5E 0%,#0a2149 100%); border-top:none; border-bottom:none}
.sec.band h2, .sec.band h3{color:#fff}
.sec.band .lead{color:#c9d4ea}
.sec.band .card{background:rgba(255,255,255,.06); border-color:rgba(201,212,234,.22); box-shadow:none}
.sec.band .card p{color:#dbe4f5}
.sec.band .card .ico{color:#f0c674}
.sec.band .card.soft{background:rgba(255,255,255,.10)}
.sec.band .note{background:rgba(255,255,255,.08); color:#dbe4f5; border-left-color:var(--gold)}
.sec.band .tiny{color:#c9d4ea}

/* ── 暗色模式（跟随系统 prefers-color-scheme；品牌深蓝保留，文字与面反相）── */
@media (prefers-color-scheme: dark){
  html{color-scheme:dark}
  /* ⚠️ 关键：先把「文字用」的颜色变量整体换掉，否则 .hero h1 / .sec h2 / .card h3 这些
     更高特异性的规则仍取浅色模式的深蓝，出现深蓝字压深底（实测 h1 仅 1.33:1）。
     所有把 --blue 当**背景**用的地方（.btn / .startstep .n / .btn:hover）都已在本块内显式覆盖。 */
  :root{--ink:#e6ecf7; --gray:#a8b8d4; --gray-md:#9db0cc; --gray-l:#8fa2c0;
        --blue:#cfe0ff; --blue-d:#eaf1fb; --blue-l:#3a6ac4; --line:#2f3d59; --line-d:#3b4a6b;
        --bg:#111a2b; --bg-soft:#1a2437; --gold-l:#2a2314}
  body{background:#0d1523; color:var(--ink)}
  a{color:#9ec1ff}
  h1,h2,h3,.hero h1,.sec h2,.card h3,.step h3,.qa h3,.startstep h3{color:#eaf1fb}
  .hero .sub{color:#a8b8d4}
  .hero .tiny{color:#9db0cc; }
  .tiny{color:#9db0cc}
  .lead{color:#a8b8d4}
  .nav{background:rgba(13,21,35,.92); border-bottom-color:#26324a}
  .brand{color:#eaf1fb} .brand span{color:#e0b25c}
  .links a{color:#a8b8d4} .links a:hover{color:#eaf1fb}
  .navtip{color:#9db0cc}
  .hero{background:linear-gradient(180deg,#0f1826 0%,#0d1523 100%)}
  .hero-card{background:#162033; border-color:#26324a; box-shadow:none; color:#e6ecf7 !important}
  .hero-card-eyebrow{color:#e0b25c}
  .hstats li{border-top-color:#26324a; color:#a8b8d4}
  .hstats li b{color:#cfe0ff}
  .hcard-foot{border-top-color:#26324a; color:#9db0cc} .hcard-foot b{color:#cfe0ff}
  .trust{background:#111a2b; border-color:#26324a} .trustin{color:#a8b8d4}
  .sec.alt{background:#111a2b; border-color:#26324a}
  .card,.qa,.startstep,figure.shot,.pipedemo{background:#162033; border-color:#26324a; box-shadow:none}
  .pipetrack{background:#1d2a42}
  .pipesteps li{color:#a8b8d4}
  .pipesteps li b{color:#8fa2c0}
  .pipenote{color:#8fa2c0}
  @keyframes pipeStep{0%,13%{background:#1b2748; color:#cfe0ff}13.5%,100%{background:transparent; color:#a8b8d4}}
  .pipenote,.pipesteps li{--x:0}
  .card p,.qa p,.startstep p,.step p{color:#cbd8ec}
  .card .meta,.price .card .meta,.qa .meta{color:#9db0cc}
  .card.soft{background:#1a2437}
  .badge{background:#1d2a42; border-color:#2c3c5c; color:#c7d5ec}
  .badge.gold{background:#2a2314; border-color:#4a3c1c; color:#e0b25c}
  .badge.free{background:#12291f; border-color:#1f4a38; color:#7fd6b4}
  .badge.inside{background:#1b2748; border-color:#2f4270; color:#a9c2ff}
  .card .quota{border-top-color:#26324a; color:#a8b8d4}
  .card .quota .qtag{background:#1d2a42; border-color:#2c3c5c; color:#a9c2ff}
  .card .quota .qtag.free{background:#12291f; border-color:#1f4a38; color:#7fd6b4}
  .card .quota b{color:#cfe0ff}
  .note{background:#162033; color:#cbd8ec}
  .btn{background:#2f5bab; color:#fff !important}
  .btn:hover{background:#3a6ac4}
  .ghostbtn{background:#162033; border-color:#33415e; color:#bcd0f5 !important}
  .ghostbtn:hover{background:#1c2a42}
  .sec.band{background:linear-gradient(180deg,#0a1424 0%,#08111e 100%)}
  .sec.band .card{background:rgba(255,255,255,.07)}
  .price .num{color:#cfe0ff} .price .tier{color:#e0b25c}
  .steps .step{background:#162033; border-color:#26324a; box-shadow:none}
  .steps .step .you{background:#1b2748; color:#cfe0ff}
  .startstep .n{background:#2f5bab; color:#fff}
  .shots figure.shot img{background:#111a2b}
  figure.shot figcaption{color:#a8b8d4} figure.shot figcaption b{color:#eaf1fb}
  .ok{color:#7fd6b4} .err{color:#ff9b8a}
  .final{background:linear-gradient(180deg,#0d1523,#111a2b)}
  .foot{background:#0d1523; border-top-color:#26324a} .foot .col a{color:#a8b8d4}
  .contact{background:#162033; border-color:#26324a}
  .warn{background:#2a2113; border-color:#4a3c1c}
}

/* ── 最终 CTA ── */
.final{padding:var(--sp-7) 0 var(--sp-6); text-align:center; background:linear-gradient(180deg,#fff,#f7f9fc)}
.final h2{font-size:var(--fs-2xl); color:var(--blue); margin:0 0 var(--sp-4)}

/* ── 页脚 ── */
.foot{border-top:1px solid var(--line); padding:var(--sp-4) 0 var(--sp-2); background:#fff}
.footin{display:flex; gap:22px; flex-wrap:wrap; justify-content:space-between; font-size:var(--fs-sm); color:var(--gray)}
.foot .col a{color:#5a6b80}
.foot .tiny{font-size:var(--fs-sm)}

/* ── 响应式 ── */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:var(--sp-4)}
}
@media (max-width:360px){
  .brand{font-size:17px}
  .navcta{width:100%}
  .navcta .btn,.navcta .ghostbtn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .pipesteps li{animation:none; background:#eef4ff; color:var(--blue)}
  .pipetrack i{animation:none; width:100%}
}
@media print{
  .nav{position:static}
  .cta,.navcta{display:none}
  .card,.step{break-inside:avoid}
}
@media (max-width:760px){
  body{font-size:14px}
  .navin{flex-wrap:wrap; gap:10px}
  .links{order:3; width:100%; gap:8px 14px; flex-wrap:wrap; white-space:normal; overflow-x:visible}
  .links a{font-size:var(--fs-sm)}
  .navtip{text-align:left}
  .hero{padding:var(--sp-5) 0 var(--sp-4)}
  .hero h1{font-size:28px}
  .hero .sub{font-size:var(--fs-base)}
  .btn.lg,.ghostbtn.lg{width:100%}
  .cta{gap:10px}
  .sec{padding:var(--sp-5) 0}
  .sec h2{font-size:var(--fs-xl)}
  .trustin{gap:14px; font-size:12.5px}
  .footin{flex-direction:column; gap:10px}
}