/* 铭眸 · 官网前台样式
配色遵循《VI视觉规范_铭眸.html》Style A 深蓝守护：
- 主蓝 #185FA5 家族，深空 #0B2440 → #071A30（与登录页同族）
- 健康辅助色：青 #38BDF8 / 绿 #10B981（健康板块专用）
- 清爽=大量留白+细线+浅底；科技感=深空 Hero+网格+光晕+渐变文字 */
:root{
--p-50:#EDF4FC; --p-100:#D7E7F8; --p-200:#B0CDEF; --p-300:#82AEE4;
--p-400:#4F8BD3; --p-500:#2A6FBE; --p-600:#185FA5; --p-700:#134C86;
--p-800:#0F3B68; --p-900:#0B2A4B;
--p:#185FA5; --p-soft:#EDF4FC; --p-line:#B0CDEF;
--grad-main:linear-gradient(120deg,#2A6FBE,#0F3B68);
--grad-hero:linear-gradient(150deg,#185FA5 0%,#134C86 55%,#0F3B68 100%);
--deep:#0B2440; --deep2:#071A30;
--cy:#38BDF8; --heal:#10B981; --heal-d:#2E7D6B; --heal-soft:#E7F3EF;
--ok:#2E7D6B; --warn:#A85B0A; --danger:#A32D2D;
--ink:#1C1F23; --ink2:#5A6270; --ink3:#98A0AB;
--line:#E6E9EE; --line2:#D8DDE4;
--bg:#F4F6F9; --card:#fff;
--mono:Consolas,"SF Mono",Menlo,monospace;
--r:14px;
--sh-1:0 1px 2px rgba(16,30,50,.05),0 1px 3px rgba(16,30,50,.05);
--sh-2:0 4px 12px rgba(16,30,50,.07),0 2px 4px rgba(16,30,50,.04);
--sh-3:0 16px 40px rgba(16,30,50,.12),0 4px 10px rgba(16,30,50,.05);
--sh-blue:0 10px 30px rgba(24,95,165,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
background:#fff; color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
font-size:15.5px; line-height:1.75;
-webkit-font-smoothing:antialiased;
}
a{color:var(--p); text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{line-height:1.3; letter-spacing:-.3px; margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
/* ============ 顶部导航 ============ */
.nav{
position:fixed; top:0; left:0; right:0; height:64px; /* 层级靠 DOM 末尾，z-index 会触发无头渲染伪影 */
display:flex; align-items:center;
transition:background .25s, box-shadow .25s, border-color .25s;
border-bottom:1px solid transparent;
}
.nav.on{background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(16,30,50,.04)}
.nav .wrap{display:flex; align-items:center; gap:26px; width:100%}
.brand{display:flex; align-items:center; gap:9px; font-size:16.5px; font-weight:800; color:#fff;
letter-spacing:-.2px; transition:color .25s}
.brand .lg{width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:var(--grad-main);
display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(24,95,165,.35)}
.brand small{display:block; font-size:10px; font-weight:400; color:var(--ink3); letter-spacing:.5px; margin-top:1px}
.nav.on .brand{color:var(--ink)}
.nav .menu{display:flex; gap:2px; margin-left:8px}
.nav .menu a{
color:rgba(255,255,255,.82); font-size:14px; font-weight:500; padding:7px 13px; border-radius:8px;
transition:.15s;
}
.nav.on .menu a{color:var(--ink2)}
.nav .menu a:hover{color:#fff; background:rgba(255,255,255,.1); text-decoration:none}
.nav.on .menu a:hover{color:var(--p); background:var(--p-soft)}
.nav .menu a.nav-on{color:#fff; background:rgba(255,255,255,.12); font-weight:700}
.nav.on .menu a.nav-on{color:var(--p); background:var(--p-soft)}
.nav .sp{flex:1}
.nav .cta{display:flex; gap:10px; align-items:center}
.nav .ghost{color:rgba(255,255,255,.85); font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:9px;
border:1px solid rgba(255,255,255,.28); transition:.15s}
.nav .ghost:hover{background:rgba(255,255,255,.1); color:#fff; text-decoration:none}
.nav.on .ghost{color:var(--ink2); border-color:var(--line2)}
.nav.on .ghost:hover{color:var(--p); border-color:var(--p-line); background:var(--p-soft)}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
border-radius:10px; font-weight:600; cursor:pointer; transition:.16s; white-space:nowrap; border:1px solid transparent;
font-family:inherit;
}
.btn.pri{background:var(--grad-main); color:#fff; box-shadow:var(--sh-blue); font-size:14px; height:42px; padding:0 22px}
.btn.pri:hover{background:linear-gradient(120deg,#2E77C9,#134C86); transform:translateY(-1px); text-decoration:none; color:#fff}
.btn.big{height:48px; padding:0 28px; font-size:15px; border-radius:12px}
.btn.line{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3); font-size:14px; height:42px; padding:0 20px}
.btn.line:hover{background:rgba(255,255,255,.15); text-decoration:none; color:#fff}
.btn.white{background:#fff; color:var(--p-700); font-size:14.5px; height:44px; padding:0 24px; box-shadow:0 6px 18px rgba(4,14,26,.35)}
.btn.white:hover{transform:translateY(-1px); text-decoration:none; color:var(--p-600)}
.nav .btn.pri{height:36px; padding:0 16px; font-size:13.5px}
/* ============ Hero ============ */
.hero{
position:relative; overflow:hidden; color:#fff;
background:linear-gradient(168deg,#0B2440 0%,#0A2038 55%,#071A30 100%);
padding:148px 0 110px;
}
/* 网格 */
.hero .grid-bg{position:absolute; inset:0; opacity:.5;
background-image:linear-gradient(rgba(122,167,214,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,167,214,.07) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 75%);
mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 75%);
}
/* 双光晕：一蓝一绿（绿=健康） */
.hero .glow-a{position:absolute; width:640px; height:640px; border-radius:50%;
background:radial-gradient(circle,rgba(42,111,190,.30),transparent 62%); top:-230px; right:-140px}
.hero .glow-b{position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,.14),transparent 62%); bottom:-240px; left:-120px}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:center}
.hero .tag{
display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.3px;
color:#9FD3FF; background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.30);
padding:5px 13px; border-radius:999px; margin-bottom:22px;
}
.hero .tag .pulse{width:7px; height:7px; border-radius:50%; background:var(--cy); box-shadow:0 0 0 0 rgba(56,189,248,.6); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}70%{box-shadow:0 0 0 9px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.hero h1{font-size:46px; font-weight:800; letter-spacing:-1px; margin:0 0 18px; line-height:1.22}
.hero h1 .grad{
background:linear-gradient(105deg,#7FD3FF 0%,#B0CDEF 55%,#7FE8C8 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{font-size:16.5px; color:#9FB6CE; max-width:480px; margin:0 0 30px}
.hero .sub b{color:#D8E7F6; font-weight:600}
.hero .acts{display:flex; gap:13px; align-items:center; flex-wrap:wrap}
.hero .facts{display:grid; grid-template-columns:repeat(2,auto); gap:18px 34px; margin-top:40px; width:fit-content}
.hero .facts .f .n{font-size:21px; font-weight:800; font-family:var(--mono); color:#CFE4F8; letter-spacing:-.5px}
.hero .facts .f .n i{font-style:normal; color:var(--cy)}
.hero .facts .f .t{font-size:12px; color:#6E87A3; margin-top:2px}
/* Hero 右侧产品浮层 */
.hero-shot{position:relative}
.hero-shot .float{
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:18px;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
box-shadow:0 30px 70px rgba(0,0,0,.45); padding:16px;
animation:hover 7s ease-in-out infinite;
}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-shot .bar{display:flex; gap:6px; padding:2px 4px 12px}
.hero-shot .bar i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16)}
.hero-shot .bar i:first-child{background:rgba(16,185,129,.55)}
/* 浮层内：模拟家长端卡片 */
.mock{background:#fff; border-radius:12px; overflow:hidden; color:var(--ink)}
.mock .mh{background:var(--grad-hero); color:#fff; padding:16px 18px 18px}
.mock .mh .t{font-size:16px; font-weight:700}
.mock .mh .d{font-size:10.5px; color:rgba(255,255,255,.72); margin-top:2px}
.mock .mb{padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px}
.mock .mcard{border:1px solid var(--line); border-radius:11px; padding:11px 13px}
.mock .mcard .r1{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700}
.mock .mcard .r1 .dot{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.mock .mcard .r1 .dot.w{background:var(--warn)}
.mock .mcard .r1 .pill{margin-left:auto; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:6px;
background:var(--p-soft); color:var(--p)}
.mock .mcard .r2{font-size:9.5px; color:var(--ink3); margin-top:3px; font-family:var(--mono)}
.mock .mcard .r3{display:flex; align-items:baseline; gap:6px; margin-top:7px}
.mock .mcard .r3 b{font-size:17px; font-family:var(--mono); letter-spacing:-.5px}
.mock .mcard .r3 span{font-size:10px; color:var(--ink3)}
.mock .track{height:5px; background:#EEF1F5; border-radius:3px; overflow:hidden; margin-top:7px}
.mock .track i{display:block; height:100%; width:38%; background:var(--grad-prog); border-radius:3px}
.mock .mcard.hot .track i{width:96%; background:linear-gradient(90deg,#C2543F,#A32D2D)}
.hero-shot .chip{
position:absolute; background:#fff; border-radius:12px; box-shadow:var(--sh-3);
padding:10px 14px; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; color:var(--ink);
}
.hero-shot .chip .ic{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 30px}
.hero-shot .chip small{display:block; font-size:10px; color:var(--ink3); font-weight:400; margin-top:1px}
.hero-shot .chip.a{right:-18px; top:26px; animation:hover 6s ease-in-out infinite .8s}
.hero-shot .chip.b{left:-22px; bottom:44px; animation:hover 8s ease-in-out infinite .3s}
/* ============ 通用区块 ============ */
section.sec{padding:88px 0}
section.sec.tint{background:var(--bg)}
.sec-head{text-align:center; max-width:640px; margin:0 auto 52px}
.sec-head .kicker{
display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; letter-spacing:1.5px;
color:var(--p); background:var(--p-soft); padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.sec-head .kicker.green{color:var(--heal-d); background:var(--heal-soft)}
.sec-head h2{font-size:31px; font-weight:800; letter-spacing:-.7px; margin-bottom:13px}
.sec-head p{color:var(--ink2); font-size:15px; margin:0}
/* 能力卡片 */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card2{
background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
box-shadow:var(--sh-1); transition:.2s; position:relative;
}
.card2:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--p-line)}
.card2 .ic{
width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
background:var(--p-soft); margin-bottom:16px;
}
.card2 .ic.g{background:var(--heal-soft)}
.card2 h3{font-size:16.5px; font-weight:700; margin-bottom:8px}
.card2 p{font-size:13.5px; color:var(--ink2); margin:0; line-height:1.72}
.card2 .more{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--p); margin-top:14px}
/* 工作流 */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:st}
.step{padding:0 22px; position:relative; text-align:left}
.step .no{
width:40px; height:40px; border-radius:12px; background:var(--grad-main); color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; font-family:var(--mono);
box-shadow:var(--sh-blue); margin-bottom:16px; position:relative; z-index:1;
}
.step:not(:last-child)::after{
content:''; position:absolute; top:20px; left:74px; right:0; height:1px;
background:repeating-linear-gradient(90deg,var(--p-line) 0 7px,transparent 7px 13px);
}
.step h4{font-size:15.5px; font-weight:700; margin-bottom:7px}
.step p{font-size:13px; color:var(--ink2); margin:0}
/* 健康专区 */
.health{
background:linear-gradient(165deg,#0C2B25 0%,#0A2433 60%,#0B2440 100%);
color:#fff; border-radius:24px; padding:56px 52px; position:relative; overflow:hidden;
}
.health::before{content:''; position:absolute; width:480px; height:480px; border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,.16),transparent 62%); top:-180px; right:-120px}
.health::after{content:''; position:absolute; width:380px; height:380px; border-radius:50%;
background:radial-gradient(circle,rgba(56,189,248,.12),transparent 62%); bottom:-160px; left:-80px}
.health .hwrap{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.health .kicker{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:1.5px;
color:#7FE8C8; background:rgba(16,185,129,.13); border:1px solid rgba(16,185,129,.32);
padding:5px 14px; border-radius:999px; margin-bottom:16px}
.health h2{font-size:29px; font-weight:800; margin-bottom:14px}
.health .lead{color:#A8C3BC; font-size:14.5px; margin:0 0 26px}
.health .lead b{color:#D7F2E7; font-weight:600}
.hlist{display:flex; flex-direction:column; gap:14px}
.hitem{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:15px 17px; transition:.18s}
.hitem:hover{background:rgba(255,255,255,.08); transform:translateX(4px)}
.hitem .ic{width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
background:rgba(16,185,129,.16); border:1px solid rgba(16,185,129,.30)}
.hitem b{display:block; font-size:14.5px; margin-bottom:2px}
.hitem span{font-size:12.5px; color:#9DB8B1; line-height:1.65}
/* 双端展示 */
.dual{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}
.panel{
border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#FDFEFF,#F6F9FC);
padding:40px 38px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
}
.panel.dark{background:linear-gradient(165deg,#0B2440,#071A30); border-color:transparent; color:#fff}
.panel .ptag{font-size:11.5px; font-weight:700; letter-spacing:1.5px; color:var(--p); text-transform:uppercase; margin-bottom:12px}
.panel.dark .ptag{color:var(--cy)}
.panel h3{font-size:22px; font-weight:800; margin-bottom:10px}
.panel .pdesc{font-size:14px; color:var(--ink2); margin:0 0 22px; max-width:400px}
.panel.dark .pdesc{color:#9FB6CE}
.panel ul{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px}
.panel li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink2)}
.panel.dark li{color:#C4D6E8}
.panel li .ck{width:18px; height:18px; flex:0 0 18px; border-radius:50%; margin-top:2px;
display:flex; align-items:center; justify-content:center; background:var(--p-soft)}
.panel.dark li .ck{background:rgba(56,189,248,.15)}
.panel .visual{margin-top:6px}
/* 手机框 */
.phone-frame{
width:250px; margin:0 auto; border-radius:26px; background:#0F1720; padding:9px;
box-shadow:0 24px 50px rgba(16,30,50,.28);
}
.phone-frame .scr{border-radius:19px; overflow:hidden; background:#F4F6F9; color:var(--ink)}
.pf-head{background:var(--grad-hero); color:#fff; padding:14px 15px 16px}
.pf-head .t{font-size:13.5px; font-weight:700}
.pf-head .d{font-size:8.5px; color:rgba(255,255,255,.7); margin-top:2px}
.pf-body{padding:9px; display:flex; flex-direction:column; gap:8px}
.pf-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.pf-card .l1{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700}
.pf-card .l1 .dot{width:5px; height:5px; border-radius:50%; background:var(--ok)}
.pf-card .l1 .dot.w{background:var(--warn)}
.pf-card .l1 .m{margin-left:auto; font-size:7.5px; font-weight:700; background:var(--p-soft); color:var(--p); padding:1px 6px; border-radius:5px}
.pf-card .l2{display:flex; align-items:baseline; gap:5px; margin-top:5px}
.pf-card .l2 b{font-size:13px; font-family:var(--mono)}
.pf-card .l2 span{font-size:7.5px; color:var(--ink3)}
.pf-card .track{height:4px; background:#EEF1F5; border-radius:2px; margin-top:5px; overflow:hidden}
.pf-card .track i{display:block; height:100%; width:42%; background:var(--grad-prog); border-radius:2px}
.pf-card.hot .track i{width:93%; background:linear-gradient(90deg,#C2543F,#A32D2D)}
/* 遮罩示意 */
.mask-demo{
border-radius:16px; background:linear-gradient(165deg,#0F2E4D,#0B2440);
padding:30px 20px; text-align:center; color:#fff; border:1px solid rgba(255,255,255,.08);
}
.mask-demo .shield{width:42px; height:42px; margin:0 auto 12px; border-radius:13px;
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
display:flex; align-items:center; justify-content:center}
.mask-demo b{display:block; font-size:14.5px; margin-bottom:5px}
.mask-demo span{font-size:10.5px; color:#9FB6CE; display:block; line-height:1.7}
.mask-demo .ask{margin:14px auto 0; display:inline-flex; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
color:#fff; font-size:10.5px; font-weight:600; padding:7px 16px; border-radius:8px}
/* 解决方案 */
.sol{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.sol .card2{padding:28px 26px}
.sol .who{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.sol .who .ic{margin-bottom:0}
.sol .scenes{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.sol .scenes i{font-style:normal; font-size:11.5px; color:var(--ink2); background:var(--bg);
border:1px solid var(--line); padding:3px 10px; border-radius:999px}
/* FAQ */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:11px}
.qa{background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden; transition:.16s}
.qa summary{
list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px;
padding:16px 20px; font-size:14.5px; font-weight:600;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{margin-left:auto; width:22px; height:22px; flex:0 0 22px; border-radius:7px; background:var(--p-soft);
color:var(--p); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
transition:transform .2s; line-height:1}
.qa[open]{border-color:var(--p-line); box-shadow:var(--sh-1)}
.qa[open] summary .pm{transform:rotate(45deg)}
.qa .a{padding:0 20px 17px 55px; font-size:13.5px; color:var(--ink2); line-height:1.75}
.qa .a b{color:var(--ink)}
/* 尾部 CTA
【注意】必须用 section.cta 限定：顶部导航右侧的按钮容器也叫 .cta（view/home/_foot.html 73 行），
若写成裸 .cta，深色渐变背景 + padding:86px 0 会泄漏到导航上，把容器撑到 200px+ 高，
滚动时盖住页面内容（2026-10-14 修复的线上问题）。 */
section.cta{
background:linear-gradient(160deg,#0B2440 0%,#0A2038 60%,#071A30 100%);
position:relative; overflow:hidden; color:#fff; padding:86px 0; text-align:center;
}
section.cta::before{content:''; position:absolute; width:560px; height:560px; border-radius:50%;
background:radial-gradient(circle,rgba(42,111,190,.28),transparent 62%); top:-200px; left:50%; transform:translateX(-50%)}
.cta .grid-bg{position:absolute; inset:0; opacity:.4;
background-image:linear-gradient(rgba(122,167,214,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,167,214,.06) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 75%);
mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 75%);}
.cta .wrap{position:relative}
.cta h2{font-size:33px; font-weight:800; margin-bottom:14px; letter-spacing:-.6px}
.cta p{color:#9FB6CE; font-size:15px; margin:0 0 32px}
.cta .acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* 页脚 */
footer{background:#061420; color:#7E93A8; padding:56px 0 0; font-size:13px}
footer .top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px}
footer .brand{color:#fff}
footer .desc{margin-top:14px; font-size:12.5px; color:#64809A; line-height:1.8; max-width:280px}
footer h5{color:#C9D8E6; font-size:13px; font-weight:700; margin:0 0 14px; letter-spacing:.5px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
footer a{color:#7E93A8}
footer a:hover{color:#CFE4F8; text-decoration:none}
footer .btm{border-top:1px solid rgba(255,255,255,.07); padding:18px 0 22px; display:flex; align-items:center; gap:14px}
footer .btm .sp{flex:1}
footer .btm span{font-size:12px; color:#54708B}
/* 滚动进入动效 */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1; transform:none; transition:none}
.hero-shot .float,.hero-shot .chip{animation:none}
}
/* ============ 内页 ============ */
.page-hero{
background:linear-gradient(168deg,#0B2440 0%,#0A2038 60%,#071A30 100%);
color:#fff; padding:132px 0 64px; position:relative; overflow:hidden;
}
.page-hero .grid-bg{position:absolute; inset:0; opacity:.5;
background-image:linear-gradient(rgba(122,167,214,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,167,214,.07) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 75%);
mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 75%);}
.page-hero .wrap{position:relative}
.page-hero .kicker{display:inline-flex; font-size:12px; font-weight:700; letter-spacing:1.5px; color:#9FD3FF;
background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.30); padding:4px 13px; border-radius:999px; margin-bottom:16px}
.page-hero h1{font-size:36px; font-weight:800; letter-spacing:-.8px; margin-bottom:12px}
.page-hero p{color:#9FB6CE; font-size:15px; max-width:560px; margin:0}
.doc{max-width:800px; margin:0 auto}
.doc h3{font-size:18px; font-weight:700; margin:34px 0 10px; padding-left:12px; border-left:3px solid var(--p)}
.doc p,.doc li{font-size:14px; color:var(--ink2); line-height:1.85}
.doc ul,.doc ol{padding-left:20px; margin:8px 0}
.doc .note{background:var(--p-soft); border:1px solid var(--p-line); border-radius:12px; padding:14px 17px;
font-size:13px; color:var(--p-deep,#0F3B66); margin:16px 0}
.doc table{width:100%; border-collapse:collapse; font-size:13px; margin:14px 0}
.doc th{text-align:left; background:#FAFBFC; font-weight:600; color:var(--ink2); font-size:12px; padding:9px 13px; border:1px solid var(--line)}
.doc td{padding:9px 13px; border:1px solid var(--line); color:var(--ink2)}
/* 下载页 */
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.dl{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 26px; box-shadow:var(--sh-1); transition:.2s; text-align:center}
.dl:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--p-line)}
.dl .ic{width:52px; height:52px; border-radius:14px; background:var(--grad-main); margin:0 auto 16px;
display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-blue)}
.dl h3{font-size:16.5px; font-weight:700; margin-bottom:5px}
.dl .meta{font-size:12px; color:var(--ink3); margin-bottom:18px; font-family:var(--mono)}
.dl .btn{width:100%}
.dl .soon{background:#EEF1F5; color:var(--ink3); box-shadow:none; cursor:not-allowed}
.install{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.install .st{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 18px}
.install .st .n{width:30px; height:30px; border-radius:9px; background:var(--p-soft); color:var(--p); font-weight:800;
display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; margin-bottom:12px}
.install .st b{display:block; font-size:14px; margin-bottom:5px}
.install .st span{font-size:12.5px; color:var(--ink2); line-height:1.7}
.hash{background:#0B2440; color:#9FD3FF; border-radius:12px; padding:16px 20px; font-family:var(--mono); font-size:12.5px;
display:flex; align-items:center; gap:14px; overflow:auto}
.hash .lb{color:#6E87A3; flex:0 0 auto}
/* ============ 响应式 ============ */
@media (max-width:980px){
.hero .wrap{grid-template-columns:1fr; gap:52px}
.hero h1{font-size:36px}
.hero-shot{max-width:430px; margin:0 auto}
.cards,.sol,.dl-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr); gap:26px}
.step:not(:last-child)::after{display:none}
.install{grid-template-columns:repeat(2,1fr)}
.health .hwrap{grid-template-columns:1fr; gap:34px}
.health{padding:42px 30px}
.dual{grid-template-columns:1fr}
footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
.nav .menu{display:none}
section.sec{padding:62px 0}
.hero{padding:118px 0 78px}
.hero h1{font-size:29px}
.hero .facts{gap:22px}
.cards,.sol,.dl-grid,.steps,.install{grid-template-columns:1fr}
.sec-head h2{font-size:24px}
.health h2{font-size:23px}
.page-hero h1{font-size:27px}
.cta h2{font-size:25px}
footer .top{grid-template-columns:1fr}
.hero-shot .chip.a{right:0; top:10px}
.hero-shot .chip.b{left:0; bottom:20px}
.qa .a{padding-left:20px}
}