/* =========================================================
   Ancareto 设计系统 · 官网（明亮商务风 + 科技质感）
   约束：无外部 CDN，系统字体栈，自包含，双击可开
   ========================================================= */
:root{
  /* 主色 */
  --navy-900:#0A1626;
  --navy-800:#102A43;
  --navy-700:#1B4B7A;
  --navy-600:#2C6CB0;
  --orange:#FF8A4C;
  --orange-d:#E96B2E;
  --cyan:#2EC5CE;

  /* 背景 */
  --bg:#F7F9FC;
  --card:#FFFFFF;
  --soft:#EEF3F9;
  --soft-2:#E3EBF4;

  /* 文字 */
  --t-strong:#102A43;
  --t-body:#1A2433;
  --t-muted:#5A6B7B;

  /* 功能 */
  --ok:#2EC5CE; --warn:#FF8A4C; --bad:#E53E3E;

  /* 间距 / 圆角 / 阴影 */
  --sp:24px; --r:16px; --r-sm:10px;
  --sh-1:0 1px 3px rgba(16,42,67,.06),0 8px 24px rgba(16,42,67,.06);
  --sh-2:0 2px 8px rgba(16,42,67,.10),0 18px 48px rgba(16,42,67,.12);
  --maxw:1180px;

  --font:"思源黑体","Source Han Sans SC","Noto Sans SC",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--t-body);
  background:var(--bg);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-600);margin-bottom:14px;
}
h1,h2,h3{color:var(--t-strong);line-height:1.25;font-weight:700}
h2{font-size:32px;margin-bottom:14px}
h3{font-size:20px;margin-bottom:10px}
.lead{color:var(--t-muted);font-size:17px;max-width:62ch}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:var(--maxw);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-radius:18px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(16,42,67,.08);box-shadow:var(--sh-1);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy-800);font-size:18px}
.brand .logo{width:30px;height:30px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  font-size:14px;color:var(--t-muted);padding:8px 12px;border-radius:10px;
  transition:all .18s ease;cursor:pointer;font-weight:500;
}
.nav-links a:hover{color:var(--navy-800);background:var(--soft)}
.nav-links a.active{color:var(--navy-800);background:var(--soft);font-weight:700}
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:15px;border:none;border-radius:999px;
  padding:12px 24px;transition:transform .25s ease,background .2s ease,box-shadow .2s ease;
}
/* 同色系按钮（不跳色）：深蓝为主，hover 微提亮 */
.btn-primary{background:var(--navy-800);color:#fff;box-shadow:0 8px 24px rgba(16,42,67,.28)}
.btn-primary:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,42,67,.36)}
.btn-ghost{background:var(--soft);color:var(--navy-800)}
.btn-ghost:hover{background:var(--soft-2)}
.btn-glass{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.24)}
/* 纯文字品牌（无 logo） */
.brand-text{font-weight:800;font-size:20px;letter-spacing:.02em}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger{width:22px;height:2px;background:var(--navy-800);position:relative;display:block}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy-800)}
.burger::before{top:-6px}.burger::after{top:6px}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:150px 0 90px;overflow:hidden;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(44,108,176,.18),transparent 60%),
             radial-gradient(900px 500px at 10% 10%,rgba(255,138,76,.14),transparent 55%),
             linear-gradient(180deg,#fff,#F7F9FC);
}
.hero .glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}
.hero .glow.a{width:380px;height:380px;background:var(--navy-600);top:-120px;right:8%}
.hero .glow.b{width:300px;height:300px;background:var(--orange);bottom:-100px;left:6%}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:46px;letter-spacing:-.5px;margin-bottom:18px}
.hero h1 .hl{background:linear-gradient(120deg,var(--navy-700),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:19px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}
.hero-img{
  border-radius:20px;overflow:hidden;border:1px solid rgba(16,42,67,.08);
  box-shadow:var(--sh-2);background:#fff;
}

/* 数据指标条 */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.metric{
  background:var(--card);border:1px solid rgba(16,42,67,.07);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease;
}
.metric:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.metric .num{font-size:34px;font-weight:800;color:var(--navy-800);line-height:1}
.metric .num span{color:var(--orange)}
.metric .lbl{color:var(--t-muted);font-size:14px;margin-top:8px}

/* ---------- 通用区块 ---------- */
.section-head{text-align:center;max-width:680px;margin:0 auto 46px}
.section-head .lead{margin:0 auto}
.alt{background:var(--soft)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  background:var(--card);border:1px solid rgba(16,42,67,.07);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh-1);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(44,108,176,.25)}
.card .ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;margin-bottom:16px;
}
.card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:8px}
.card p{color:var(--t-muted);font-size:15px}

/* 流程步骤 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;background:var(--card);border:1px solid rgba(16,42,67,.07);border-radius:var(--r);padding:26px 22px;box-shadow:var(--sh-1)}
.step .n{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));margin-bottom:14px;
}
.step h3{font-size:17px}
.step p{font-size:14px;color:var(--t-muted)}
.step::after{content:"";position:absolute;top:46px;right:-12px;width:24px;height:2px;background:linear-gradient(90deg,var(--orange),transparent);z-index:2}
.step:last-child::after{display:none}

/* 对比 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs .col{border-radius:var(--r);padding:28px;box-shadow:var(--sh-1)}
.vs .no{background:#FBEAE0;border:1px solid rgba(229,62,62,.18)}
.vs .yes{background:#E6F7F8;border:1px solid rgba(46,197,206,.25)}
.vs h3{display:flex;align-items:center;gap:8px}
.vs ul{list-style:none;margin-top:12px}
.vs li{padding:9px 0;border-bottom:1px dashed rgba(16,42,67,.12);font-size:15px;display:flex;gap:10px;align-items:flex-start}
.vs li:last-child{border-bottom:none}
.vs .x{color:var(--bad);font-weight:800}
.vs .y{color:var(--cyan);font-weight:800}

/* 表格 */
.tbl-wrap{border-radius:var(--r);overflow:hidden;border:1px solid rgba(16,42,67,.08);box-shadow:var(--sh-1);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--soft)}
th{background:var(--navy-800);color:#fff;font-weight:600}
tbody tr:hover{background:var(--soft)}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.tag.hot{background:#FBEAE0;color:var(--orange-d)}
.tag.mid{background:var(--soft);color:var(--navy-600)}

/* 产品卡 */
.prod{position:relative;overflow:hidden}
.prod .idx{position:absolute;right:18px;top:14px;font-size:40px;font-weight:800;color:rgba(16,42,67,.06)}

/* 沙盘入口 */
.sandbox-cta{
  position:relative;border-radius:24px;overflow:hidden;padding:54px 48px;color:#fff;
  background:radial-gradient(800px 400px at 85% 20%,rgba(46,197,206,.4),transparent),linear-gradient(135deg,var(--navy-900),var(--navy-700));
}
.sandbox-cta h2{color:#fff}
.sandbox-cta p{color:var(--t-ondark-muted)}
.sandbox-cta .badge{position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,76,.35),transparent 70%)}

/* 洞察 / 公众号 */
.insight-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.post{display:flex;gap:16px;align-items:center;padding:18px;border-radius:var(--r);background:#fff;border:1px solid rgba(16,42,67,.07);box-shadow:var(--sh-1);transition:transform .2s ease}
.post:hover{transform:translateX(4px)}
.post .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none}
.post .meta{font-size:13px;color:var(--t-muted)}
.post h4{font-size:16px;color:var(--navy-800);font-weight:700}
.brand-block{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));border-radius:var(--r);padding:30px;color:#fff;box-shadow:var(--sh-2)}
.brand-block .name{font-size:24px;font-weight:800;background:linear-gradient(120deg,#fff,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-block p{color:var(--t-ondark-muted);font-size:14px;margin-top:8px}
.qr{width:120px;height:120px;border-radius:14px;background:#fff;margin-top:18px;display:grid;place-items:center;color:var(--navy-800);font-size:12px;text-align:center;padding:8px}
.toc{background:var(--soft);border-radius:var(--r);padding:20px 24px}
.toc h4{font-size:15px;margin-bottom:10px;color:var(--navy-800)}
.toc a{display:block;padding:7px 0;color:var(--t-muted);font-size:14px;border-bottom:1px dashed rgba(16,42,67,.1)}
.toc a:last-child{border-bottom:none}

/* 价格 */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price{border-radius:var(--r);padding:28px;background:#fff;border:1px solid rgba(16,42,67,.08);box-shadow:var(--sh-1);text-align:center}
.price .p{font-size:30px;font-weight:800;color:var(--navy-800)}
.price .p small{font-size:14px;color:var(--t-muted);font-weight:500}

/* 三步走 */
.steps-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
.flow{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--sh-1);border:1px solid rgba(16,42,67,.07)}
.flow .n{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--navy-700),var(--navy-600))}

/* ---------- 极简 Hero（意境图 + 数字底座） ---------- */
.hero-v{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:#fff;text-align:center;
}
.hero-v .bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 底图保持原图清晰度：不做模糊、不过度压暗（用户明确认可原图清晰度）。
   仅轻微提饱和，可读性交给上层遮罩，不牺牲画面细节。 */
.hero-v .bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:brightness(.9) saturate(1.05) contrast(1.02);
}
/* 数字底座叠加层：网格 + 流动光点 */
.hero-v .grid-layer{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,197,206,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,197,206,.12) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9),transparent 75%);
  mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9),transparent 75%);
  animation:gridDrift 24s linear infinite}
@keyframes gridDrift{from{background-position:0 0}to{background-position:60px 60px}}
.hero-v .dots{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-v .dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);opacity:0;animation:rise 6s linear infinite}
.hero-v .dots i:nth-child(1){left:12%;animation-delay:0s}
.hero-v .dots i:nth-child(2){left:28%;animation-delay:1.2s}
.hero-v .dots i:nth-child(3){left:47%;animation-delay:2.4s}
.hero-v .dots i:nth-child(4){left:63%;animation-delay:.8s}
.hero-v .dots i:nth-child(5){left:79%;animation-delay:3.2s}
.hero-v .dots i:nth-child(6){left:90%;animation-delay:2s}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.4}100%{transform:translateY(-90vh);opacity:0}}
.hero-v .mask{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,22,38,.58) 0%,rgba(10,22,38,.62) 42%,rgba(10,22,38,.72) 100%)}
/* 数字底座：底图城市的内在数据地基。
   竖排数字、高低错落、只显数字不显汉字，刻意压低存在感，不抢底图与标题的戏。 */
.hero-v .data-base{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:44vh;min-height:220px;
  display:flex;align-items:flex-end;gap:2px;padding:0 1.5vw;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.95) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.95) 100%);
}
.hero-v .data-base i{
  flex:1 1 0;min-width:0;display:block;
  font-size:10px;line-height:1.4;text-align:center;white-space:nowrap;
  color:rgba(46,197,206,var(--a,0.42));font-variant-numeric:tabular-nums;
}
.hero-v .data-base i.warm{color:rgba(255,138,76,var(--a,0.42))}
/* 屏2 的淡数字纹理，延续首屏数据瀑布，但更淡更疏 */
#what{position:relative}
#what .data-base-light{
  position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;
  display:flex;align-items:flex-end;gap:2px;padding:0 3vw;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.45) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.45) 100%);
}
#what .data-base-light i{
  flex:1 1 0;min-width:0;display:block;
  font-size:10px;line-height:1.5;text-align:center;white-space:nowrap;
  color:rgba(16,42,67,var(--a,0.12));font-variant-numeric:tabular-nums;
}
#what .data-base-light i.warm{color:rgba(255,138,76,var(--a,0.12))}
#what .wrap{position:relative;z-index:1}
/* 首屏底部渐隐到下一屏底色：深色首屏与浅色第二屏之间不再硬切 */
.hero-v::after{
  content:'';position:absolute;left:0;right:0;bottom:-60px;height:250px;z-index:4;
  background:linear-gradient(180deg,rgba(247,249,252,0) 0%,rgba(247,249,252,.55) 65%,#F7F9FC 100%);
  pointer-events:none;
}
.hero-v .wrap{position:relative;z-index:5;padding:120px 24px}

/* ---------- 滚动场景切换 ---------- */
/* 每屏吸附：滚动时整屏整屏地换场，而不是连续长滚 */
html{scroll-snap-type:y proximity}
#front .hero-v,#front .screen{scroll-snap-align:start}
/* 场景指示器：右侧圆点，显示当前所处场景，也可点击直达 */
.scene-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:14px}
.scene-dots button{
  width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(16,42,67,.22);border:1px solid rgba(255,255,255,.55);
  transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.scene-dots button:hover{background:rgba(16,42,67,.45)}
.scene-dots button.active{background:var(--orange);border-color:rgba(255,255,255,.9);transform:scale(1.35)}
@media(max-width:820px){.scene-dots{display:none}}
.hero-v .kicker{font-size:14px;letter-spacing:.22em;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:22px}
.hero-v h1{color:#fff;font-size:54px;line-height:1.5;margin-bottom:22px;letter-spacing:-.5px;
  text-shadow:0 2px 24px rgba(8,18,32,.55)}
.hero-v h1 .accent{color:var(--orange);font-weight:800}
.hero-v .sub{font-size:18px;color:rgba(255,255,255,.82);max-width:46ch;margin:0 auto 36px}
.hero-v .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* 漂浮按钮（不跳色，点击光晕） */
.float-btn{
  position:fixed;right:28px;bottom:32px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border:1px solid rgba(16,42,67,.14);color:var(--navy-800);
  font-weight:700;font-size:15px;box-shadow:0 8px 28px rgba(16,42,67,.16);
  transition:transform .25s ease;
}
.float-btn:hover{transform:translateY(-3px)}
.float-btn .ripple{position:absolute;inset:-4px;border-radius:999px;pointer-events:none}
.float-btn:active .ripple{animation:glowPulse .7s ease-out}
@keyframes glowPulse{0%{box-shadow:0 0 0 0 rgba(46,197,206,.55)}100%{box-shadow:0 0 0 22px rgba(46,197,206,0)}}
.float-btn.hidden{opacity:0;pointer-events:none;transform:translateY(20px)}
.float-btn{transition:opacity .35s ease,transform .25s ease}

/* ---------- 下拉菜单（沙盘演示） ---------- */
.dropdown{position:relative}
.drop-toggle{cursor:pointer;font-size:14px;color:var(--t-muted);padding:8px 12px;border-radius:10px;transition:all .18s ease;font-weight:500}
.drop-toggle:hover{color:var(--navy-800);background:var(--soft)}
.drop-panel{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid rgba(16,42,67,.1);border-radius:16px;box-shadow:var(--sh-2);
  padding:14px;width:300px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:60;
}
.dropdown:hover .drop-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mini-sandbox{border-radius:12px;overflow:hidden;margin-bottom:10px;background:#0A1626}
.mini-sandbox svg{width:100%;display:block}
.mini-sandbox .hot{animation:miniPulse 1.4s ease-in-out infinite alternate}
@keyframes miniPulse{from{stroke-opacity:.5}to{stroke-opacity:1}}
.drop-panel>a{display:block;text-align:center;font-size:14px;color:var(--navy-800);font-weight:700;padding:8px}
.drop-panel>a:hover{color:var(--orange)}

/* ---------- 热力图（抽象地铁图式样） ---------- */
.heatmap{position:relative;max-width:860px;margin:0 auto}
.heat-svg{width:100%;height:auto}
.heat-svg .node circle{transition:transform .25s ease}
.heat-svg .node:hover circle{transform:scale(1.2)}
.heat-svg .node text{font-size:13px}
.heat-legend{display:flex;gap:18px;justify-content:center;margin-top:18px;font-size:13px;color:var(--t-muted)}
.heat-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* 单核心屏 */
.screen{min-height:80vh;display:flex;align-items:center}
.screen .wrap{width:100%}
.screen .big{font-size:44px;line-height:1.22;font-weight:800;color:var(--navy-800);margin-bottom:20px;letter-spacing:-.4px}
.screen .big em{font-style:normal;color:var(--orange)}
.screen .one{font-size:17px;color:var(--t-muted);max-width:56ch}
.screen.dark{background:var(--navy-900);color:#fff}
.screen.dark .big{color:#fff}
.screen.dark .one{color:#9FB2C6}

/* 第二屏：客户真正在问的问题，放在大标题之上作引子 */
/* 与下方大标题间隔拉大（32px），同时让问题块整体上提一行（margin-top 留负） */
.asks{
  list-style:none;margin:-6px auto 32px;max-width:820px;
  display:grid;gap:4px;text-align:left;
}
.asks li{
  position:relative;padding-left:28px;
  font-size:19px;line-height:1.5;font-weight:400;letter-spacing:-.1px;
  color:var(--t-muted);                 /* 浅灰，不抢标题戏 */
}
/* 中文引号用衬线字体，与文字同色橙 */
.asks li::before{
  content:'“';position:absolute;left:4px;top:-8px;
  font-size:32px;line-height:1;font-weight:800;color:var(--orange);
  font-family:Georgia,"Songti SC","SimSun",serif;
}
/* 第二屏大标题居中 */
#what .big{text-align:center}
/* 第二屏副标题（养老×城市更新）居中，接在大标题下面 */
#what .one{text-align:center;margin-left:auto;margin-right:auto;max-width:62ch}
@media(max-width:820px){
  .asks{max-width:none;margin-bottom:16px;gap:3px}
  .asks li{font-size:16.5px;padding-left:24px}
  .asks li::before{font-size:28px;top:-6px}
}

/* 屏3 玻璃门背后的图表装饰：饼图 + 折线，刻意做淡做虚 */
#gate .chart-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#gate .chart-bg svg{position:absolute}
#gate .chart-bg .bg-pie{
  right:8%;bottom:12%;width:280px;height:280px;
  opacity:.12;filter:blur(1.5px) saturate(.6)
}
#gate .chart-bg .bg-line{
  left:6%;bottom:22%;width:42%;height:200px;
  opacity:.10;filter:blur(1.5px) saturate(.6)
}
@media(max-width:820px){
  #gate .chart-bg .bg-pie{width:180px;height:180px;opacity:.10}
  #gate .chart-bg .bg-line{height:140px;opacity:.08}
}

/* 三点角色 */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.role{padding:22px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.role .tag{font-size:13px;color:var(--orange);font-weight:700;letter-spacing:.12em;margin-bottom:12px;display:block}
.role h3{color:#fff;font-size:30px;margin-bottom:8px;letter-spacing:-.3px}
.role p{color:#9FB2C6;font-size:14px}

/* 页脚 */
.footer{background:var(--navy-900);color:var(--t-ondark-muted);padding:60px 0 30px}
.footer h4{color:#fff;font-size:16px;margin-bottom:14px}
.footer a{color:var(--t-ondark-muted);font-size:14px;display:block;padding:5px 0;transition:color .18s}
.footer a:hover{color:var(--orange)}
.footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footer .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;color:#6c7d92}
.footer .disc{font-size:12px;line-height:1.6;margin-top:10px;color:#5a6b7b}

/* 滚动揭示 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============ 数据流扫描（理工科技风） ============ */
.scan-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);gap:10px;padding:16px;pointer-events:none;overflow:hidden;opacity:.14}
.scan-cell{
  border:1px solid rgba(46,197,206,.25);border-radius:8px;position:relative;overflow:hidden;
  background:rgba(16,42,67,.35);backdrop-filter:blur(2px);
}
.scan-cell .stream{
  position:absolute;inset:0;font-family:"JetBrains Mono",Consolas,monospace;font-size:10px;line-height:1.4;
  color:rgba(46,197,206,.8);white-space:pre;animation:scanUp linear infinite;
}
@keyframes scanUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.scan-cell .stream.warm{color:rgba(255,138,76,.8);animation-duration:7s}
.scan-cell .stream.dim{color:rgba(155,178,198,.5);animation-duration:11s}

/* 第三页数字瀑布：父层整体提亮一档，否则 opacity:.14 会把"亮现"压没；
   同时把字符基础色压淡，维持原本若隐若现的质感，只在亮起时形成对比。 */
#gate .scan-grid{opacity:.6}
#gate .scan-cell{border-color:rgba(46,197,206,.07);background:rgba(16,42,67,.09);backdrop-filter:none}
#gate .scan-cell .stream{color:rgba(46,197,206,.19)}
#gate .scan-cell .stream.warm{color:rgba(255,138,76,.19)}
#gate .scan-cell .stream.dim{color:rgba(155,178,198,.13)}
/* 熄灭慢（留余晖），亮起快（像被瞬间点亮） */
#gate .scan-cell .stream span{transition:color .38s ease,text-shadow .38s ease}
#gate .scan-cell .stream span.lit{
  transition:color .06s linear,text-shadow .06s linear;
  color:#E6FEFF;text-shadow:0 0 10px rgba(46,197,206,.95),0 0 22px rgba(46,197,206,.5)
}
#gate .scan-cell .stream.warm span.lit{
  color:#FFF0E2;text-shadow:0 0 10px rgba(255,138,76,.95),0 0 22px rgba(255,138,76,.5)
}
#gate .scan-cell .stream.dim span.lit{
  color:#F2F8FD;text-shadow:0 0 8px rgba(155,178,198,.85)
}
@media(prefers-reduced-motion:reduce){
  #gate .scan-cell .stream span.lit{transition:none}
}

/* ============ 玻璃拟态密码层（若隐若现） ============ */
/* 玻璃门刻意做薄：模糊从 24px 降到 7px、遮罩压淡，
   让背后流动的数字瀑布能贯穿透出来，而不是把整块背景糊死。 */
.glass-gate{
  position:relative;border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.045);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(10,22,38,.4),inset 0 0 60px rgba(46,197,206,.05);
}
.glass-gate .ghost-preview{
  position:relative;min-height:386px;overflow:hidden;
  filter:blur(2px);opacity:.32;      /* 压淡，让背景瀑布透上来 */
}
.glass-gate .gate-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;
  background:linear-gradient(180deg,rgba(10,22,38,.10),rgba(10,22,38,.32))}
/* 文字加投影，保证在更透的背景上仍然读得清 */
.gate-veil h3{text-shadow:0 2px 12px rgba(10,22,38,.75)}
.gate-veil .hint{text-shadow:0 1px 8px rgba(10,22,38,.7)}
.gate-veil .lock-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);margin-bottom:18px}
.gate-veil h3{color:#fff;font-size:22px;margin-bottom:8px}
.gate-veil .hint{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:22px}
.gate-form{display:flex;gap:10px;align-items:center}
.gate-form input{
  width:220px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;font-size:15px;letter-spacing:.2em;
  outline:none;transition:border-color .2s ease;
}
.gate-form input::placeholder{color:rgba(255,255,255,.45);letter-spacing:0}
.gate-form input:focus{border-color:var(--cyan)}
.gate-form .enter{position:relative;padding:12px 20px;border-radius:12px;border:none;cursor:pointer;
  background:var(--navy-700);color:#fff;font-weight:700;font-size:15px;overflow:hidden}
.gate-form .enter:active::after{content:"";position:absolute;inset:0;box-shadow:0 0 0 0 rgba(46,197,206,.5);animation:glowPulse .7s ease-out}
.gate-err{color:var(--bad);font-size:13px;margin-top:10px;height:18px}

/* 左侧玻璃门 + 右侧 to C 入口：桌面端两栏
   比例 1.85:1 → 1.6:1：左侧工作台更突出，右侧四卡获得更合理宽度（长句不再挤成三行） */
.gate-row{
  display:grid;grid-template-columns:1.6fr 1fr;gap:20px;
  max-width:1180px;margin:0 auto;align-items:stretch
}
@media(max-width:980px){
  .gate-row{grid-template-columns:1fr}
}

/* to C 入口：放在右侧，竖排；四卡等高均分，与左侧工作台齐平 */
.toc-portal{display:flex;flex-direction:column;gap:13px;margin-top:0;height:100%}
.toc-card{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;
  padding:16px 20px;border-radius:16px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:all .2s ease}
.toc-card:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.toc-card h4{color:#fff;font-size:16.5px;margin-bottom:5px;line-height:1.4}
.toc-card p{color:rgba(255,255,255,.6);font-size:12.8px;line-height:1.55}
.toc-card .soon{display:inline-block;margin-top:9px;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(255,138,76,.18);color:var(--orange)}
@media(max-width:980px){
  .toc-portal{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:18px;height:auto}
  .toc-card{flex:1;max-width:340px}
}

/* ============ 后台数据工作台（dashboard） ============ */
#dash-view{display:none;min-height:100vh;background:var(--navy-900);color:#fff;position:relative}
#dash-view.open{display:block}
.dash-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  background:rgba(10,22,38,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(46,197,206,.15)}
.dash-top .brand{font-weight:800;font-size:18px}
.dash-top .btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px 16px;font-size:14px}
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:24px}
.dash-card{grid-column:span 4;border-radius:16px;padding:16px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(46,197,206,.14)}
.dash-card.wide{grid-column:span 6}
.dash-card.full{grid-column:span 12}
.dash-card h4{color:var(--cyan);font-size:14px;letter-spacing:.08em;margin-bottom:14px;font-weight:700}
.dash-card .kpi-num{font-size:34px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px}
.dash-card .kpi-lbl{font-size:13px;color:#9FB2C6;margin-top:6px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi-row .dash-card{grid-column:span 1}
/* 饼图（SVG） */
.pie-wrap{display:flex;align-items:center;gap:18px}
.pie-legend{flex:1}
.pie-legend .li{display:flex;align-items:center;gap:8px;font-size:13px;color:#9FB2C6;padding:5px 0}
.pie-legend .li i{width:10px;height:10px;border-radius:3px}
/* 条形 */
.dbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:#9FB2C6}
.dbar .lb{width:90px;flex:none}
.dbar .track{flex:1;height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.dbar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--orange))}
.dbar .val{width:44px;text-align:right;flex:none;color:#fff}
@media(max-width:900px){
  .dash-card,.dash-card.wide,.dash-card.full{grid-column:span 12}
  .kpi-row{grid-template-columns:1fr 1fr}
  .kpi-row .dash-card{grid-column:span 1}
}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .grid-3,.price-grid,.steps,.steps-flow{grid-template-columns:1fr 1fr}
  .grid-2,.insight-grid,.vs{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{
    position:absolute;top:64px;right:14px;left:14px;flex-direction:column;align-items:stretch;
    background:#fff;border:1px solid rgba(16,42,67,.1);border-radius:14px;padding:10px;box-shadow:var(--sh-2);
    display:none;
  }
  .nav-links.show{display:flex}
  .nav-links a{padding:12px}
  .nav-toggle{display:block}
  .hero h1{font-size:33px}
  .grid-3,.price-grid,.steps,.steps-flow,.metrics{grid-template-columns:1fr}
  section{padding:60px 0}
  .step::after{display:none}
  .sandbox-cta{padding:36px 24px}
  .hero-v h1{font-size:36px}
  .screen .big{font-size:30px}
  .roles{grid-template-columns:1fr}
  .screen{min-height:auto;padding:70px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}