@import url("brand/tokens.css");
/* ============================================
   MetaDerive 官网深化版 · 共享设计系统 v1.2
   基调：方案A 深海智性（深色沉静）
   令牌来源：品牌识别规范 v1.4 / tokens.css
   ============================================ */
:root{
  --navy:var(--md-navy); --navy-2:var(--md-surface); --navy-3:var(--md-surface-deep);
  --navy-light:var(--md-navy-light);
  --glow:var(--md-glow); --glow-soft:var(--md-glow-soft);
  --jade:var(--md-jade); --cinnabar:var(--md-cinnabar);
  --line:rgba(77,168,255,.16);
  --t72:var(--md-text-primary); --t55:var(--md-text-secondary); --t40:var(--md-text-caption);
  --font-sans:var(--md-font-sans);
  --font-mono:var(--md-font-mono);
  --ease:var(--md-ease);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--t72);font-family:var(--font-sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--font-mono)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
section{padding:104px 0;position:relative}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;border:1px solid transparent;transition:.24s var(--ease);cursor:pointer;white-space:nowrap}
.btn-glow{background:var(--glow);color:var(--navy);font-weight:600}
.btn-glow:hover{box-shadow:0 8px 28px rgba(77,168,255,.4);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--glow);color:var(--glow)}
.btn-lg{height:48px;padding:0 24px;font-size:16px}
.nav-cta{height:36px;padding:0 16px;font-size:13px}

/* ---------- 导航 ---------- */
nav.md{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(10,31,68,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1200px;margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between}
.nav-in img{height:56px}
.nav-links{display:flex;gap:34px;list-style:none;font-size:14px}
.nav-links a{color:var(--t55);transition:.2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--glow)}
.nav-toggle{display:none;width:38px;height:38px;background:transparent;border:1px solid var(--line);border-radius:var(--md-r-sm);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:17px;height:1.8px;background:var(--glow-soft);border-radius:2px;transition:.24s var(--ease)}

/* 产品下拉菜单 */
.has-dropdown{position:relative}
.has-dropdown>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);transition:.2s}
.has-dropdown:hover>a::after,.has-dropdown.open>a::after{transform:rotate(225deg) translate(-1px,0)}
.dropdown{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:216px;list-style:none;background:rgba(13,37,80,.97);border:1px solid var(--line);border-radius:var(--md-r-md);padding:8px;box-shadow:0 24px 60px rgba(4,12,28,.55);z-index:110}
.dropdown::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.has-dropdown.open .dropdown{display:block}
.dropdown a{display:block;padding:9px 14px;border-radius:var(--md-r-sm);font-size:13.5px;color:var(--t72);white-space:nowrap}
.dropdown a:hover{background:rgba(77,168,255,.1);color:var(--glow)}

@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:16px;right:16px;flex-direction:column;gap:2px;background:rgba(13,37,80,.97);border:1px solid var(--line);border-radius:var(--md-r-md);padding:10px;box-shadow:0 24px 60px rgba(4,12,28,.55)}
  .nav-links.open{display:flex}
  .nav-links li a{display:block;padding:12px 14px;border-radius:var(--md-r-sm);font-size:15px;color:var(--t72)}
  .nav-links li a:hover,.nav-links li a[aria-current="page"]{background:rgba(77,168,255,.1);color:var(--glow)}
  .has-dropdown>a::after{display:none}
  .nav-links .dropdown{display:block;position:static;transform:none;min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 0 13px;margin:2px 0 4px 13px;border-left:1px solid var(--line);border-radius:0}
  .nav-links .dropdown a{padding:9px 14px;font-size:14px;color:var(--t55)}
  .nav-in{position:relative}
}

/* ---------- 章节标题 ---------- */
.sec-head{margin-bottom:60px}
.sec-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--glow);margin-bottom:18px}
.sec-title{font-size:clamp(30px,4vw,46px);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.15;max-width:780px}
.sec-lede{color:var(--t55);font-size:17px;margin-top:18px;max-width:700px;font-weight:300}

/* ---------- 分段底色 ---------- */
.band{background:var(--navy-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- 卡片 ---------- */
.card{border:1px solid var(--line);border-radius:16px;padding:34px 30px;background:rgba(255,255,255,.02);transition:.3s var(--ease)}
.card:hover{border-color:rgba(77,168,255,.45);background:rgba(27,58,107,.28)}
.card .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--glow);margin-bottom:14px}
.card h3{font-size:19px;color:#fff;font-weight:500;margin-bottom:10px}
.card p{font-size:14px;color:var(--t55)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:960px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.grid-4{grid-template-columns:1fr}}

/* ---------- KPI ---------- */
.kpi{border:1px solid var(--line);border-radius:16px;padding:30px 26px;background:rgba(255,255,255,.02)}
.kpi .v{font-family:var(--font-mono);font-size:42px;font-weight:500;color:var(--glow);letter-spacing:-.02em;line-height:1}
.kpi .l{font-size:13.5px;color:var(--t55);margin-top:14px}
.kpi .d{font-family:var(--font-mono);font-size:11px;color:var(--jade);margin-top:10px}
.note{font-family:var(--font-mono);font-size:11px;color:var(--t40);letter-spacing:.04em;margin-top:26px;line-height:1.7}

/* ---------- 标签 ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:var(--md-r-sm);background:rgba(77,168,255,.1);color:var(--glow-soft);border:1px solid rgba(77,168,255,.22)}
.tag-jade{background:rgba(0,194,168,.1);color:var(--jade);border-color:rgba(0,194,168,.25)}

/* ---------- 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:st}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:16px;padding:32px 30px;background:rgba(255,255,255,.02);position:relative}
.step::before{counter-increment:st;content:"0" counter(st);font-family:var(--font-mono);font-size:12px;color:var(--glow);letter-spacing:.14em}
.step h3{font-size:19px;color:#fff;font-weight:500;margin:16px 0 9px}
.step p{font-size:14px;color:var(--t55)}

/* ---------- 内页 Hero ---------- */
.page-hero{padding:168px 0 72px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-180px;top:-260px;background:radial-gradient(circle,rgba(77,168,255,.15),transparent 65%)}
.crumbs{font-family:var(--font-mono);font-size:12px;color:var(--t40);margin-bottom:26px;letter-spacing:.05em}
.crumbs a{color:var(--t55)}
.crumbs a:hover{color:var(--glow)}
.page-hero .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;color:var(--glow);margin-bottom:20px}
.page-hero h1{font-size:clamp(36px,4.8vw,56px);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.14}
.page-hero .lede{color:var(--t55);font-size:17px;margin-top:22px;max-width:640px;font-weight:300}
.page-hero .chips{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}

/* ---------- CTA ---------- */
.cta{text-align:center}
.cta-box{border:1px solid var(--line);border-radius:var(--md-r-lg);padding:80px 40px;background:radial-gradient(700px 340px at 50% 0,rgba(77,168,255,.14),transparent 70%),rgba(255,255,255,.02);position:relative;overflow:hidden}
.cta h2{font-size:clamp(28px,3.8vw,42px);color:#fff;font-weight:600;letter-spacing:-.02em}
.cta p{color:var(--t55);margin:18px auto 38px;max-width:540px;font-size:16px;font-weight:300}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 页脚 ---------- */
footer{background:var(--navy-3);border-top:1px solid var(--line);padding:70px 0 32px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}}
footer .ft-logo{height:48px;margin-bottom:18px}
.ft-about p{font-size:13px;color:var(--t55);max-width:300px}
footer h4{font-size:14px;color:#fff;font-weight:500;margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:13.5px}
footer li a{color:var(--t55);transition:.2s}
footer li a:hover{color:var(--glow)}
.ft-bottom{margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--t40)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--glow);text-align:left;padding:15px 20px;background:rgba(77,168,255,.06);border-bottom:1px solid var(--line);font-weight:500;text-transform:uppercase}
td{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--t55);vertical-align:top}
tr:last-child td{border-bottom:none}
td b{color:#fff;font-weight:500}
tr:hover td{background:rgba(77,168,255,.04)}

/* ---------- 动效 ---------- */
.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.in){opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 立即咨询弹窗 ---------- */
.trial-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px}
.trial-modal[hidden]{display:none}
.trial-mask{position:absolute;inset:0;background:rgba(4,12,28,.64);backdrop-filter:blur(3px)}
.trial-card{position:relative;width:100%;max-width:360px;max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:var(--md-r-md);box-shadow:0 30px 80px rgba(4,12,28,.5);animation:trialIn .28s var(--ease)}
@keyframes trialIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.trial-head{position:relative;background:linear-gradient(120deg,#0A1F44,#1B3A6B 55%,#2F6FC0);padding:22px 24px;border-radius:var(--md-r-md) 18px 0 0}
.trial-head img{height:32px;display:block}
.trial-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;border-radius:var(--md-r-sm);transition:.2s}
.trial-close:hover{background:rgba(255,255,255,.14)}

.trial-qr{width:216px;height:216px;margin:0 auto;border:1px dashed rgba(10,31,68,.28);border-radius:var(--md-r-sm);background:#f6f9fd;display:flex;align-items:center;justify-content:center;color:#8A97AB;font-size:13px;line-height:1.7}
.trial-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 42px;margin-top:26px;border-radius:var(--md-r-sm);background:var(--glow);color:var(--navy);font-size:16px;font-weight:600;letter-spacing:.02em}
.trial-cap{margin-top:18px;color:#0A1F44;font-size:16px;font-weight:500}
@media(prefers-reduced-motion:reduce){.trial-card{animation:none}}

/* v1.3：现有品牌方案深化 */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--glow-soft);outline-offset:4px}
.skip-link{position:fixed;top:8px;left:8px;z-index:300;padding:12px 16px;background:var(--glow);color:var(--navy);border-radius:var(--md-r-sm);transform:translateY(-160%)}
.skip-link:focus{transform:none}
#main-content{scroll-margin-top:80px;outline:none}
.scope-note{font-size:14px;color:var(--t55);line-height:1.8;margin-top:24px;max-width:760px}
.page-hero.product-hero .wrap:first-child{padding-right:360px;min-height:290px}
.page-hero.product-hero .prod-anchor{right:32px;bottom:20px;width:280px;height:250px}
.page-hero.product-hero .lede{max-width:760px}
.note{font-size:12px;line-height:1.8}








.trial-card a:focus-visible,.trial-card button:focus-visible{outline-color:var(--md-navy)}
.nav-links{max-height:calc(100dvh - 96px);overflow-y:visible}
@media(max-width:1000px){.page-hero.product-hero .wrap:first-child{padding-right:32px;min-height:0}.page-hero.product-hero .prod-anchor{display:none}}
@media(max-width:880px){.nav-links{overflow-y:auto;overscroll-behavior:contain}.nav-toggle{width:44px;height:44px}.nav-cta{min-height:40px}}
@media(max-width:600px){.wrap{padding:0 24px}.nav-in{padding:12px 24px;gap:16px}.nav-in img{height:44px}.page-hero{padding:128px 0 48px}.page-hero.product-hero .wrap:first-child{padding-right:24px}section{padding:64px 0}.sec-head{margin-bottom:32px}.cta-box{padding:48px 24px}.card{padding:24px}.rec-item{min-height:40px}.ft-grid{gap:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-ready .reveal:not(.in){opacity:1;transform:none;transition:none}}
/* Intrinsic image dimensions reserve space; fixed-height logos keep their aspect ratio. */
.nav-in img,footer .ft-logo,.trial-head img{width:auto;object-fit:contain}
.rec-view>.note{padding:0 16px;margin:0}.rec-view>.note:not(:empty){padding:12px 16px}

@media(max-width:880px){
 html:not(.nav-ready) nav.md{position:static}
 html:not(.nav-ready) .nav-in{flex-wrap:wrap}
 html:not(.nav-ready) .nav-links{display:flex;position:static;order:3;width:100%;max-height:none;overflow:visible;box-shadow:none}
}

/* 立即咨询弹窗：企业微信二维码。 */
/* ---------- 立即咨询弹窗 ---------- */
.trial-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px}
.trial-modal[hidden]{display:none}
.trial-mask{position:absolute;inset:0;background:rgba(4,12,28,.64);backdrop-filter:blur(3px)}
.trial-card{position:relative;width:100%;max-width:360px;max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(4,12,28,.5);animation:trialIn .28s var(--ease)}
@keyframes trialIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.trial-head{position:relative;background:linear-gradient(120deg,#0A1F44,#1B3A6B 55%,#2F6FC0);padding:22px 24px;border-radius:18px 18px 0 0}
.trial-head img{height:32px;display:block}
.trial-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;border-radius:9px;transition:.2s}
.trial-close:hover{background:rgba(255,255,255,.14)}
.trial-body{padding:30px 28px 34px;text-align:center}
.trial-qr{width:216px;height:216px;margin:0 auto;border:1px dashed rgba(10,31,68,.28);border-radius:12px;background:#f6f9fd;display:flex;align-items:center;justify-content:center;color:#8A97AB;font-size:13px;line-height:1.7}
.trial-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 42px;margin-top:26px;border-radius:10px;background:var(--glow);color:var(--navy);font-size:16px;font-weight:600;letter-spacing:.02em}
.trial-cap{margin-top:18px;color:#0A1F44;font-size:16px;font-weight:500}
@media(prefers-reduced-motion:reduce){.trial-card{animation:none}}

.trial-head img{width:auto;object-fit:contain}

/* 文案可读性：在现有方案区解释选择路径。 */
.copy-paths{margin-bottom:24px}
.copy-start{margin-top:32px;padding:24px;border-left:3px solid var(--glow);background:rgba(77,168,255,.06);border-radius:var(--md-r-sm)}
.copy-start h3{font-size:19px;color:#fff;margin-bottom:12px}
.copy-start p{font-size:15px;line-height:1.9;color:var(--t72)}

/* 保留二维码白边，完整展示扫码区域。 */
.trial-qr{border:0;background:#fff}
.trial-qr img{display:block;width:100%;height:100%;object-fit:contain}