/* MagicEngine 官网 · 蓝白科技风
   浅色端：冰白底 + 深墨蓝字；深色端：低饱和深空蓝 + 单一电光蓝强调 */

:root{
  --bg:#F4F7FC;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;
  --line:#E3EAF5;
  --line-soft:#EEF3FA;
  --ink:#0C1A2C;
  --ink-2:#33455C;
  --ink-3:#5B6C82;
  --brand:#2F7BFF;
  --brand-deep:#12489E;
  --brand-soft:#E8F0FE;
  --deep:#081226;
  --deep-2:#0C1C36;
  --on-deep:#E8EFF9;
  --on-deep-2:#A9BDD6;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:14px;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
::selection{background:rgba(47,123,255,.18)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
section[id],main[id]{scroll-margin-top:78px}

/* ── 顶栏 ─────────────────────────────────────── */
.topbar{
  position:fixed; inset:0 0 auto; z-index:50;
  background:linear-gradient(180deg,rgba(8,18,38,.78),rgba(8,18,38,0));
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom:1px solid transparent;
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--on-deep)}
.logo-mark{
  width:16px; height:16px; flex:none; border-radius:4px;
  background:linear-gradient(135deg,var(--brand),#6FA8FF);
  box-shadow:0 0 0 3px rgba(47,123,255,.14);
}
.logo-text{font-size:15px; font-weight:600; letter-spacing:.2px}
.logo-sub{font-size:11.5px; color:var(--on-deep-2); padding-left:10px; border-left:1px solid rgba(255,255,255,.18)}
.topnav{display:flex; align-items:center; gap:26px}
.topnav a{
  color:rgba(232,239,249,.7); text-decoration:none; font-size:13.5px;
  letter-spacing:.1px; padding:4px 0; border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.topnav a:hover{color:#fff; border-bottom-color:rgba(255,255,255,.4)}
.topnav-docs{
  color:#fff !important; padding:7px 14px !important; border-radius:8px !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.topnav-docs:hover{background:rgba(255,255,255,.1)}

.topbar.scrolled{background:rgba(255,255,255,.94); backdrop-filter:blur(12px) saturate(1.4); border-bottom-color:var(--line)}
.topbar.scrolled .logo{color:var(--ink)}
.topbar.scrolled .logo-sub{color:var(--ink-3); border-left-color:var(--line)}
.topbar.scrolled .topnav a{color:var(--ink-2)}
.topbar.scrolled .topnav a:hover{color:var(--brand-deep); border-bottom-color:var(--brand)}
.topbar.scrolled .topnav-docs{color:var(--brand-deep) !important; border-color:#BFD6F8 !important}
.topbar.scrolled .topnav-docs:hover{background:var(--brand-soft)}

/* ── HERO ─────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(47,123,255,.20), transparent 62%),
    radial-gradient(700px 380px at 8% 8%, rgba(47,123,255,.10), transparent 60%),
    linear-gradient(180deg,#081226 0%,#0A1730 62%,#0C1C36 100%);
  color:var(--on-deep);
  padding:132px 0 92px;
}
.hero-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 20%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 20%, #000 40%, transparent 100%);
}
.hero-inner{
  position:relative; display:grid; grid-template-columns:1.14fr .86fr;
  gap:56px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px; padding:5px 13px 5px 11px;
  border:1px solid rgba(255,255,255,.14); border-radius:99px;
  background:rgba(255,255,255,.05);
  font-size:12px; letter-spacing:.3px; color:rgba(232,239,249,.86);
  font-variant-numeric:tabular-nums;
}
.dot{width:6px; height:6px; border-radius:50%; background:#54D6A0; box-shadow:0 0 0 3px rgba(84,214,160,.16)}
.hero h1{
  margin:0 0 22px; font-size:clamp(33px,3.6vw,48px); line-height:1.22;
  font-weight:600; letter-spacing:-.6px; color:#fff; word-break:keep-all;
}
.lede{
  margin:0 0 30px; max-width:36em; font-size:16px; line-height:1.85;
  color:rgba(232,239,249,.80);
}
.lede abbr{text-decoration:none; border-bottom:1px dashed rgba(127,178,255,.6); color:#CFE2FF; cursor:help}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px}
.btn{
  display:inline-flex; align-items:center; height:44px; padding:0 22px;
  border-radius:9px; font-size:14.5px; font-weight:500; text-decoration:none;
  transition:transform .16s ease, background .18s, border-color .18s, box-shadow .18s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 22px -10px rgba(47,123,255,.85)}
.btn-primary:hover{background:#1F6BFA}
.btn-ghost{color:#DDE9F8; border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.34)}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,auto); gap:0 34px;
  margin:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
}
.hero-stats div{min-width:0}
.hero-stats dt{font-size:11.5px; color:var(--on-deep-2); letter-spacing:.2px; margin-bottom:2px}
.hero-stats dd{
  margin:0; font-size:21px; font-weight:500; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.2px;
}
.hero-stats small{font-size:12px; font-weight:400; color:var(--on-deep-2); margin:0 2px}

/* 代码卡 */
.spec-card{
  margin:0; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.115);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.spec-head{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--mono); font-size:11.5px; color:var(--on-deep-2);
}
.spec-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); flex:none}
.spec-title{letter-spacing:.2px}
.spec-badge{
  margin-left:auto; padding:2px 8px; border-radius:5px; flex:none;
  background:rgba(255,196,84,.12); border:1px solid rgba(255,196,84,.32);
  color:#F2C879; font-size:11px; letter-spacing:0;
}
.spec-code{
  margin:0; padding:16px 18px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.78;
  color:#C6D6EA; tab-size:2;
}
.spec-code code{font:inherit; background:none; padding:0; color:inherit}
.c-com{color:#6F86A6}
.c-str{color:#9BC7A8}
.c-num{color:#8FB8FF}
.c-id{color:#E4EDF9}
.spec-out{border-top:1px solid rgba(255,255,255,.09); padding:14px 18px 16px; background:rgba(0,0,0,.18)}
.spec-cmd{font-family:var(--mono); font-size:12px; color:#8FB8FF; margin-bottom:10px; word-break:break-all}
.spec-log{list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:11.5px; line-height:1.95; color:#C6D6EA}
.spec-log b{color:#7FA8DE; font-weight:400}
.spec-log i{position:absolute; right:0; top:0; font-style:normal; color:#7C90AA}
.spec-log li{position:relative; padding-right:72px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 通用 section ─────────────────────────────── */
.band{padding:96px 0}
.band-alt{background:var(--surface)}
.band-dark{
  background:linear-gradient(180deg,#0A1730,#081226);
  color:var(--on-deep);
}
.sec-head{margin-bottom:44px; max-width:74ch}
.sec-num{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:1.6px;
  color:var(--brand-deep); margin-bottom:10px;
}
.sec-head h2{
  margin:0 0 12px; font-size:clamp(25px,3.1vw,36px); line-height:1.28;
  font-weight:600; letter-spacing:-.5px;
}
.sec-lede{margin:0; font-size:15px; color:var(--ink-3); line-height:1.8; max-width:66ch}
.band-dark .sec-num{color:#7FB2FF}
.band-dark .sec-lede{color:var(--on-deep-2)}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 24px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.band-alt .card{background:var(--surface-2)}
.card:hover{border-color:#C9DAF2; box-shadow:0 14px 34px -26px rgba(12,26,44,.55); transform:translateY(-1px)}
.card h3{margin:0 0 12px; font-size:17px; font-weight:600; letter-spacing:-.1px; line-height:1.5}
.card p{margin:0; font-size:14px; color:var(--ink-3); line-height:1.8}
.card-tall{padding-top:24px}
.tag{
  display:inline-block; margin-bottom:14px; padding:3px 9px; border-radius:5px;
  background:var(--brand-soft); color:var(--brand-deep);
  font-family:var(--mono); font-size:11px; letter-spacing:.4px;
}
.ticks{list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft)}
.ticks li{
  position:relative; padding-left:16px; margin:6px 0;
  font-size:13.2px; color:var(--ink-2); line-height:1.65;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; border-radius:1px; background:var(--brand);
}
code{
  font-family:var(--mono); font-size:.9em;
  background:#EDF2FA; color:#1B3A66; padding:1.5px 5px; border-radius:4px;
}

/* ── 能力分级 ─────────────────────────────────── */
.tier{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.tier-tabs{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-bottom:1px solid var(--line)}
.tier-tab{
  appearance:none; cursor:pointer; text-align:left;
  padding:14px 16px; border:0; border-right:1px solid var(--line-soft);
  background:transparent; color:var(--ink-2); font-family:var(--sans); font-size:13px;
  line-height:1.45; transition:background .18s, color .18s;
}
.tier-tab:last-child{border-right:0}
.tier-tab span{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.6px;
  color:var(--ink-3); margin-bottom:3px;
}
.tier-tab:hover{background:#F5F9FF}
.tier-tab.is-on{background:var(--ink); color:#fff}
.tier-tab.is-on span{color:#8FB8FF}
.tier-body{display:grid; grid-template-columns:1fr .92fr; gap:0}
.tier-table{
  width:100%; border-collapse:collapse; font-size:13.5px;
  border-right:1px solid var(--line-soft);
}
.tier-table th{
  width:56%; text-align:left; font-weight:400; color:var(--ink-3);
  padding:11px 20px; border-bottom:1px solid var(--line-soft); white-space:nowrap;
}
.tier-table td{
  padding:11px 20px; border-bottom:1px solid var(--line-soft); text-align:left;
  font-family:var(--mono); font-size:13px; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tier-table tr:last-child th,.tier-table tr:last-child td{border-bottom:0}
.tier-table td[data-state="no"]{color:var(--ink-3)}
.tier-table td[data-state="yes"]{color:var(--brand-deep)}
.tier-side{padding:22px 24px; background:#FAFCFF; display:flex; flex-direction:column; justify-content:flex-start}
.tier-note{margin:0 0 20px; font-size:13px; line-height:1.78; color:var(--ink-2)}
.bars{display:flex; flex-direction:column; gap:9px}
.bar-row{display:grid; grid-template-columns:14px 1fr 52px; align-items:center; gap:9px; opacity:.42; transition:opacity .2s}
.bar-row span{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.bar-track{height:7px; background:#E9F0FA; border-radius:2px; overflow:hidden}
.bar-row i{
  display:block; height:100%; border-radius:2px; min-width:3px;
  width:calc(var(--p) * 1%);
  background:linear-gradient(90deg,#8FB8FF,var(--brand));
  transition:width .25s ease;
}
.bar-row em{font-family:var(--mono); font-size:11px; font-style:normal; color:var(--ink-3); text-align:right}
.bar-row.is-on{opacity:1}
.bar-row.is-on i{background:var(--brand)}
.bar-row.is-on .bar-track{background:#DCE8FA}
.bar-row.is-on em{color:var(--brand-deep)}
.bars-cap{margin:12px 0 0; font-size:11px; color:var(--ink-3); font-family:var(--mono)}

/* ── 编译链 ───────────────────────────────────── */
.pipe{
  list-style:none; display:grid; grid-template-columns:repeat(7,1fr);
  gap:0; margin:0 0 44px; padding:0;
  counter-reset:none;
}
.pipe li{
  position:relative; padding:18px 14px 16px; border-top:2px solid rgba(255,255,255,.14);
  border-right:1px solid rgba(255,255,255,.07);
}
.pipe li:last-child{border-right:0}
.pipe li.hl{border-top-color:var(--brand)}
.pipe b{
  display:block; font-family:var(--mono); font-size:11.5px; font-weight:400;
  color:#7C90AA; margin-bottom:8px;
}
.pipe li.hl b{color:#8FB8FF}
.pipe span{display:block; font-family:var(--mono); font-size:14px; color:#fff; letter-spacing:.2px; margin-bottom:5px}
.pipe em{display:block; font-style:normal; font-size:12px; color:var(--on-deep-2); line-height:1.6}
.pipe-notes{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-top:8px}
.pipe-notes h4{margin:0 0 8px; font-size:14px; font-weight:500; color:#fff}
.pipe-notes p{margin:0; font-size:13px; line-height:1.8; color:var(--on-deep-2)}
.band-dark code{background:rgba(127,178,255,.14); color:#BFD9FF}

/* ── 路线图 ───────────────────────────────────── */
.phases{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:52px}
.phase{
  padding:22px 22px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px;
}
.phase.is-now{background:#F7FAFF; border-color:#BFD6F8; box-shadow:inset 2px 0 0 var(--brand)}
.ph-tag{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.3px}
.phase.is-now .ph-tag{color:var(--brand-deep)}
.phase h3{margin:8px 0 8px; font-size:15.5px; font-weight:600}
.phase p{margin:0; font-size:13px; color:var(--ink-3); line-height:1.78}

.tl{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px 26px}
.tl-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.tl-title{font-size:13.5px; color:var(--ink-2); font-weight:500}
.tl-legend{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.tl-scale{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:6px;
}
.tl-track{
  position:relative; height:112px; margin-bottom:8px;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px calc(100% / 26));
  border-radius:4px;
}
.tl-track::after{
  content:""; position:absolute; left:0; right:0; top:52px; height:1px; background:var(--line);
}
.tl-ms{
  position:absolute; top:0; height:112px; width:116px;
  left:calc(var(--w) / 26 * 100%); transform:translateX(-50%);
  text-align:center;
}
.tl-ms::before{
  content:""; position:absolute; top:52px; left:50%; width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:#fff; border:2px solid var(--brand);
}
.tl-ms b{
  position:absolute; left:0; right:0; line-height:1.7;
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--brand-deep);
}
.tl-ms span{
  position:absolute; left:0; right:0; line-height:1.7;
  font-size:11.5px; color:var(--ink-3); white-space:nowrap;
}
.tl-ms:nth-child(odd) b{top:12px}
.tl-ms:nth-child(odd) span{top:31px}
.tl-ms:nth-child(even) b{top:60px}
.tl-ms:nth-child(even) span{top:79px}
.tl-ms-end{transform:translateX(-100%); text-align:right}
.tl-ms-end::before{left:100%; margin-left:-4.5px}
.tl-ms-end b,.tl-ms-end span{right:2px}
.tl-doD{
  list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:1fr 1fr; gap:6px 32px;
}
.tl-doD li{font-size:12.8px; color:var(--ink-3); line-height:1.8}
.tl-doD b{color:var(--ink); font-family:var(--mono); font-weight:500; font-size:11.8px; margin-right:8px}

/* ── 已有实物 ─────────────────────────────────── */
.stats .stat{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px;
  margin:0;
}
.stat dd{
  margin:0; font-size:38px; line-height:1.1; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-1px;
}
.stat dt{font-size:13.5px; color:var(--ink-2); margin-top:6px; font-weight:500}
.stat p{margin:8px 0 0; font-size:12.3px; color:var(--ink-3); line-height:1.7}
.shipped-note{
  margin-top:20px; padding:20px 24px; border-radius:12px;
  background:#F7FAFF; border:1px solid #DEEAFA;
}
.shipped-note p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.85}

/* ── 不做 ─────────────────────────────────────── */
.ng{display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
.ng-item{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.ng-item b{font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding-left:18px}
.ng-item b::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:2px; background:#C2CFDF;
}
.ng-item span{font-size:13px; color:var(--ink-3); padding-left:18px; line-height:1.7}

/* ── 文档 ─────────────────────────────────────── */
.docs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.doc-link{
  display:block; text-decoration:none; padding:18px 18px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.doc-link:hover{border-color:#BFD6F8; box-shadow:0 12px 28px -22px rgba(12,26,44,.6); transform:translateY(-1px)}
.doc-link b{display:block; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:5px}
.doc-link span{display:block; font-size:12.3px; color:var(--ink-3); line-height:1.65}
.doc-link:hover b{color:var(--brand-deep)}

/* ── 页脚 ─────────────────────────────────────── */
.footer{background:var(--deep); color:var(--on-deep-2); padding:48px 0 42px}
.footer-inner{display:grid; grid-template-columns:1fr auto; gap:16px 40px; align-items:center}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand b{display:block; font-size:14.5px; color:#fff; font-weight:500}
.footer-brand span{display:block; font-size:12px; color:var(--on-deep-2)}
.footer-meta{display:flex; gap:22px; flex-wrap:wrap; font-size:12px; font-family:var(--mono)}
.footer-fine{
  grid-column:1 / -1; margin:14px 0 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08); font-size:11.8px; line-height:1.8;
  color:#7C90AA;
}

/* ── 响应式 ───────────────────────────────────── */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr; gap:44px}
  .spec-card{max-width:640px}
  .grid-4,.docs-grid{grid-template-columns:1fr 1fr}
  .phases{grid-template-columns:1fr 1fr}
  .tier-body{grid-template-columns:1fr}
  .tier-table{border-right:0; border-bottom:1px solid var(--line-soft)}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-3 .card:last-child{grid-column:1 / -1}
}
@media (max-width:860px){
  .topnav{gap:16px}
  .topnav a:not(.topnav-docs){display:none}
  .hero{padding:112px 0 72px}
  .band{padding:72px 0}
  .pipe{grid-template-columns:1fr 1fr}
  .pipe li{border-right:1px solid rgba(255,255,255,.07)}
  .pipe li:nth-child(2n){border-right:0}
  .pipe-notes{grid-template-columns:1fr; gap:22px}
  .ng{grid-template-columns:1fr; gap:0}
  .tl-doD{grid-template-columns:1fr}
  .tl-scale{display:none}
  .tl-track{height:auto; background:none; display:flex; flex-direction:column; gap:10px; padding-left:4px}
  .tl-track::after{display:none}
  .tl-ms,.tl-ms-end{
    position:relative; left:0; transform:none; width:auto; height:auto; text-align:left;
    display:flex; align-items:baseline; gap:10px; padding-left:18px;
    border-left:1px solid var(--line);
  }
  .tl-ms::before,.tl-ms-end::before{left:-5px; margin:0; top:9px}
  .tl-ms b,.tl-ms span,
  .tl-ms:nth-child(odd) b,.tl-ms:nth-child(odd) span,
  .tl-ms:nth-child(even) b,.tl-ms:nth-child(even) span{position:static; left:auto; right:auto; top:auto; line-height:1.8}
  .tl-ms-end b,.tl-ms-end span{right:auto}
  .grid-3,.grid-4,.docs-grid,.phases{grid-template-columns:1fr}
  .grid-3 .card:last-child{grid-column:auto}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  body{font-size:15px}
  .hero-stats{grid-template-columns:1fr 1fr; gap:16px 24px}
  .hero-stats dd{font-size:19px}
  .logo-sub{display:none}
  .tier-tabs{grid-template-columns:1fr 1fr}
  .tier-tab{border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft)}
  .tier-tab:nth-child(2n){border-right:0}
  .tier-tab:nth-child(5){grid-column:1 / -1; border-bottom:0}
  .pipe{grid-template-columns:1fr}
  .pipe li{border-right:0}
  .tl{padding:20px 16px}
  .footer-inner{grid-template-columns:1fr}
  .footer-meta{gap:10px 18px}
  .spec-code{font-size:11.5px; padding:14px}
  .spec-log{font-size:11px}
  .spec-log i{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}