@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== 与 Demo 站同一套 tokens ===== */
:root{
  --bg:#0E0E10; --surface-1:#151517; --surface-2:#1B1B1E; --surface-3:#232327; --surface-hover:#26262B;
  --text-1:#F2F2F0; --text-2:rgba(242,242,240,.62); --text-3:rgba(242,242,240,.38);
  --border:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.12);
  --accent:#7FFFAD; --accent-from:#5AF3E3; --accent-to:#9CFE68; --on-accent:#04120A;
  --up:#7FFFAD; --down:#FF4D5E;
  --grad:linear-gradient(90deg,#5AF3E3 0%,#7FFFAD 50%,#9CFE68 100%);
  --grad-gold:linear-gradient(90deg,#E8A33D 0%,#FFC84D 55%,#FFE08A 100%);
  --grad-pink:linear-gradient(90deg,#FF4D7E 0%,#FF6B9E 50%,#FF9DE2 100%);
  --grad-violet:linear-gradient(90deg,#E879F9 0%,#A855F7 50%,#7C3AED 100%);
  --font-ui:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-full:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-ui);font-size:14px;line-height:1.55;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(60% 40% at 50% -8%,rgba(127,255,173,.05),transparent 70%),
  radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:auto,26px 26px}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;width:100%}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.dim{color:var(--text-3)}
.muted{color:var(--text-2)}

/* ===== nav（Demo 同款） ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,14,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:14px;height:62px;max-width:1280px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:20px;height:20px;border-radius:6px;background:var(--grad);box-shadow:0 0 14px rgba(127,255,173,.35)}
.beta{font-size:9px;font-family:var(--font-mono);color:var(--text-2);border:1px solid var(--border-strong);border-radius:4px;padding:1px 6px;font-weight:400}
.search{flex:1;max-width:400px;height:36px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--text-3);font-size:12.5px;margin-left:8px}
.search svg{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2}
.search .k{margin-left:auto;font-family:var(--font-mono);font-size:10px;border:1px solid var(--border-strong);border-radius:4px;padding:0 5px;color:var(--text-3)}
.nav-links{display:flex;gap:18px;font-size:12.5px;color:var(--text-2);margin-left:4px}
.nav-links a:hover{color:var(--text-1)}
.nav-actions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ===== buttons（Demo 同款） ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-full);padding:9px 20px;font-size:13px;font-weight:600;font-family:var(--font-ui);cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-1);white-space:nowrap;transition:box-shadow .2s ease,border-color .2s ease,transform .12s ease}
.btn:hover{border-color:rgba(255,255,255,.22);background:var(--surface-3)}
.btn-neon{background:var(--grad);color:var(--on-accent);border:none;box-shadow:0 0 18px rgba(127,255,173,.55),0 6px 42px rgba(90,243,227,.28)}
.btn-neon:hover{background:var(--grad);box-shadow:0 0 26px rgba(127,255,173,.8),0 8px 52px rgba(90,243,227,.4);transform:translateY(-1px)}
.btn-glow{background:var(--accent);color:var(--on-accent);border:none}
.btn-glow:hover{background:var(--accent);filter:brightness(1.06);transform:translateY(1px)}
.btn-cta{background:rgba(127,255,173,.06);color:var(--accent);font-weight:600;border:1px solid var(--border-strong);box-shadow:0 0 16px rgba(127,255,173,.16),0 4px 28px rgba(90,243,227,.07)}
.btn-cta:hover{background:rgba(127,255,173,.1);border-color:rgba(255,255,255,.22);box-shadow:0 0 22px rgba(127,255,173,.28),0 6px 36px rgba(90,243,227,.12)}
.btn-sm{padding:5px 14px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-full);padding:6px 13px;font-size:12px;color:var(--text-2);border:1px solid var(--border);background:var(--surface-2)}
.pill.on{background:var(--surface-3);color:var(--text-1);border-color:rgba(255,255,255,.16)}

/* ===== hero ===== */
.hero{position:relative;min-height:calc(100vh - 62px);display:flex;align-items:center;padding:48px 0 190px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(52% 44% at 50% 44%,rgba(127,255,173,.07),transparent 70%),
   radial-gradient(28% 32% at 30% 78%,rgba(255,200,77,.055),transparent 70%),
   radial-gradient(30% 30% at 72% 82%,rgba(168,85,247,.07),transparent 70%);
  filter:blur(18px)}
.hero-bg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 18px);-webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 100%)}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-2);text-transform:uppercase;margin-bottom:14px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.hero h1{font-size:clamp(34px,4.2vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:600;margin-bottom:12px}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero-sub{font-size:13.5px;line-height:1.8;color:var(--text-2);max-width:640px;margin-bottom:20px}
.hero-kpis{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.kpi{min-width:98px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:8px 14px;text-align:left}
.kpi b{display:block;font-family:var(--font-mono);font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.kpi span{display:block;font-size:10px;color:var(--text-3);margin-top:2px}

/* ===== stage / stacked cards ===== */
.stage{position:relative;width:100%;max-width:470px;margin:0 auto;perspective:900px}
.stack{position:relative;z-index:1}
.stage:after{content:"";position:absolute;left:12%;right:12%;bottom:-30px;height:64px;background:linear-gradient(90deg,rgba(127,255,173,.28),rgba(255,200,77,.2) 40%,rgba(168,85,247,.25));filter:blur(24px);z-index:0;border-radius:50%}
.stack-card{position:absolute;left:50%;top:0;width:100%;height:100%;border-radius:18px;transform-origin:50% 96%;pointer-events:none;filter:blur(1.6px);transition:transform .45s var(--ease),opacity .45s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.13);background:#141418}
.stack-card.c1{background:linear-gradient(180deg,rgba(127,255,173,.20),#141418 42%);transform:translate(calc(-50% - 10px),18px) rotate(-5deg) scale(.995);opacity:.92;box-shadow:0 0 0 1px rgba(127,255,173,.18),0 20px 50px rgba(0,0,0,.5)}
.stack-card.c2{background:linear-gradient(180deg,rgba(255,200,77,.20),#141418 42%);transform:translate(calc(-50% + 10px),34px) rotate(5deg) scale(.98);opacity:.88;box-shadow:0 0 0 1px rgba(255,200,77,.16),0 20px 50px rgba(0,0,0,.5)}
.stack-card.c3{background:linear-gradient(180deg,rgba(168,85,247,.22),#141418 42%);transform:translate(calc(-50% - 22px),50px) rotate(-9deg) scale(.965);opacity:.82;box-shadow:0 0 0 1px rgba(168,85,247,.18),0 20px 50px rgba(0,0,0,.5)}
.stack-card.c4{background:linear-gradient(180deg,rgba(90,243,227,.20),#141418 42%);transform:translate(calc(-50% + 22px),66px) rotate(9deg) scale(.95);opacity:.76;box-shadow:0 0 0 1px rgba(90,243,227,.16),0 20px 50px rgba(0,0,0,.5)}
.stack-card.c5{background:linear-gradient(180deg,rgba(251,113,133,.18),#141418 42%);transform:translate(-50%,82px) rotate(0deg) scale(.935);opacity:.7;box-shadow:0 0 0 1px rgba(251,113,133,.14),0 20px 50px rgba(0,0,0,.5)}
.stack.pop .c1{transform:translateX(-50%) translateY(5px) scale(.985);opacity:.95}
.stack.pop .c2{transform:translateX(-50%) translateY(15px) scale(.955);opacity:.8}
.stack.pop .c3{transform:translateX(-50%) translateY(26px) scale(.925);opacity:.65}

.like{position:relative;width:100%;text-align:left;background:var(--surface-1);border:1px solid var(--border);border-radius:16px;overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:transform .18s var(--ease),box-shadow .3s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:2}
.like:hover{box-shadow:0 34px 80px rgba(0,0,0,.65);border-color:rgba(255,255,255,.12)}
.like.swipe-right{transform:translateX(120%) rotate(14deg)!important;opacity:0;transition:transform .42s ease-in,opacity .42s ease-in!important}
.like.swipe-left{transform:translateX(-120%) rotate(-14deg)!important;opacity:0;transition:transform .42s ease-in,opacity .42s ease-in!important}
.like.enter{animation:cardIn .38s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}

/* effect layers — 全部常驻/悬停，不再有开关文字 */
.fx-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3}
.fx-spot{opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,30%),rgba(127,255,173,.16),transparent 68%);mix-blend-mode:screen}
.like:hover .fx-spot{opacity:1}
.fx-shine{padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75}
.fx-shine:before{content:"";position:absolute;inset:-80%;background:conic-gradient(from 0deg,transparent 0 60%,rgba(127,255,173,.75) 72%,rgba(255,200,77,.7) 78%,transparent 88%);animation:shineSpin 6s linear infinite}
.fx-glow{opacity:0;transition:opacity .3s;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(127,255,173,.9),transparent 72%)}
.like:hover .fx-glow{opacity:1}
@keyframes shineSpin{to{transform:rotate(360deg)}}
.like .inner{position:relative;z-index:2}

/* media */
.media{height:320px;position:relative;overflow:hidden;background:
  radial-gradient(120% 120% at 8% 0%,hsl(var(--hue,162) 68% 22%/.65),transparent 55%),
  radial-gradient(80% 80% at 92% 18%,hsl(calc(var(--hue,162) + 50) 78% 30%/.35),transparent 60%),
  linear-gradient(135deg,#0F0F12,#191920)}
.mgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(75% 75% at 50% 40%,#000 25%,transparent 100%)}
.morb{position:absolute;width:220px;height:220px;right:-50px;top:-70px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(127,255,173,.32),transparent 65%);filter:blur(8px)}
.mlive{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;color:var(--accent);border:1px solid rgba(127,255,173,.32);background:rgba(127,255,173,.08);padding:3px 8px;border-radius:999px;z-index:2}
.mlive i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulseDot 2s infinite}
.mchg{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--up)}
.mchg span{font-size:8.5px;color:var(--text-3);font-weight:400;margin-left:3px}
.chart-head{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.kline{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.chart-tag{position:absolute;left:14px;top:94px;z-index:5;font-family:var(--font-mono);font-size:7px;color:var(--gold);border:1px solid rgba(255,200,77,.3);background:rgba(255,200,77,.08);padding:1px 6px;border-radius:999px}
.chart-axis{position:absolute;left:13px;right:13px;bottom:31px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:7px;color:var(--text-3);z-index:5}
.chart-ohlc{position:absolute;left:13px;right:13px;bottom:10px;display:flex;justify-content:space-between;gap:4px;font-family:var(--font-mono);font-size:7px;color:var(--text-3);z-index:5;white-space:nowrap}
.chart-ohlc b{color:var(--text-2);font-weight:500}
.kline .area{fill:url(#areaFill)}
.kline .line{fill:none;stroke:hsl(var(--hue,162) 82% 68%);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px hsl(var(--hue,162) 82% 60% / .45))}
.kline .floor{stroke:rgba(255,200,77,.45);stroke-width:1;stroke-dasharray:3 4}
.kline .clear{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 4}
.kline text{font-family:var(--font-mono);font-size:6.5px;fill:rgba(242,242,240,.38)}
.media:after{display:none}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(127,255,173,.35)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(127,255,173,0)}}

/* body */
.like .body{padding:14px 16px 15px}
.name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.name-block{min-width:0}
.like h4{font-size:19px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;line-height:1.2}
.hexrow{display:flex;gap:6px;flex:none;margin-top:1px}
.hex{width:30px;height:34px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:600;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.hex b{font-weight:600}
.hex svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hex.pink{color:#FFD7E4;background:linear-gradient(160deg,#FF6B9E,#7A2340)}
.hex.teal{color:#D7FFF7;background:linear-gradient(160deg,#5AF3E3,#124A46)}
.hex.purple{color:#EDD7FF;background:linear-gradient(160deg,#A855F7,#3A1E5A)}
.intro{font-size:10.5px;color:var(--text-2);line-height:1.65;margin-top:8px}
.b{margin-top:9px}
.like h4 b{font-weight:600;font-size:19px;letter-spacing:-.02em}
.like h4 span{font-family:var(--font-mono);font-size:10px;color:var(--text-3);font-weight:400}
.like .s{font-size:11.5px;color:var(--text-2);margin-top:3px}
.like .b{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.vtag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-ui);font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-2);background:var(--surface-3);line-height:1.5}
.like .b .vtag.rev{color:var(--accent);border-color:rgba(127,255,173,.32);background:rgba(127,255,173,.06);animation:badgeBreath 2.8s var(--ease) infinite}
.like .b .vtag.tra{color:#A9C6D8;background:#22303C;border-color:#33445A}
.like .b .vtag.live{color:var(--gold);border-color:rgba(255,200,77,.35);background:rgba(255,200,77,.07)}
.like .b .vtag.grad{color:var(--accent);border-color:rgba(127,255,173,.32);background:rgba(127,255,173,.06)}
.like .b .vtag.zk{color:var(--text-2);border-style:dashed}
@keyframes badgeBreath{0%,100%{box-shadow:0 0 0 0 rgba(127,255,173,.16)}50%{box-shadow:0 0 0 4px rgba(127,255,173,.04)}}
.like .m{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:11px}
.like .m div{background:var(--surface-2);padding:8px 10px}
.like .m b{font-family:var(--font-mono);font-size:15px;font-weight:500;display:block;line-height:1.2;letter-spacing:-.02em}
.like .m span{font-size:8.5px;color:var(--text-3);display:block;margin-top:2px}

/* progress + live activity */
.prog{margin-top:11px}
.prog-top{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--text-2);margin-bottom:5px}
.prog-top b{color:var(--text-1);font-weight:500}
.tube{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.tube i{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .5s var(--ease)}
.live-row{display:flex;align-items:center;gap:7px;margin-top:9px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.015);font-family:var(--font-mono);font-size:8.5px;color:var(--text-2);overflow:hidden;white-space:nowrap}
.live-row i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(127,255,173,.6);flex:none;animation:pulseDot 2s infinite}
.live-row .t{overflow:hidden;text-overflow:ellipsis;opacity:1;transition:opacity .25s}
.live-row .t.fade{opacity:0}

/* actions */
.like .a{display:flex;gap:8px;margin-top:12px}
.like .a .btn{flex:1;padding:10px 20px;font-size:13px;border-radius:999px}
.like .a .btn-skip{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-2);font-weight:600;box-shadow:none}
.like .a .btn-skip:hover{background:var(--surface-3);color:var(--text-1)}

/* live strip */
.live-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.012);padding:9px 0;overflow:hidden}
.live-strip .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.live-strip .lab{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:8.5px;letter-spacing:.12em}
.live-strip .lab i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulseDot 2s infinite}
.live-strip a{margin-left:auto;color:var(--text-2)}
.live-strip a:hover{color:var(--accent)}

/* scroll hint + explain（线框同结构） */
.scroll-hint{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--text-3);padding:14px 0}
.explain{padding:44px 0 30px}
.grid.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.explain .card{border:1px solid var(--border);background:var(--surface-1);border-radius:12px;padding:20px;transition:border-color .25s,transform .25s var(--ease)}
.explain .card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.explain .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--accent);margin-bottom:10px}
.explain h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.explain p{font-size:12.5px;color:var(--text-2);line-height:1.8}
.explain .meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
.explain .meta b{color:var(--text-1);font-weight:500}

/* English slogan — 放下面 */
.slogan{padding:34px 0 80px;text-align:center;position:relative;overflow:hidden}
.slogan:before{content:"";position:absolute;left:50%;top:50%;width:900px;height:320px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(127,255,173,.07),transparent 65%);filter:blur(12px);pointer-events:none}
.slogan h2{position:relative;font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.035em;font-weight:600;margin-bottom:12px}
.slogan h2 em{font-style:normal;color:var(--accent)}
.slogan p{position:relative;font-size:13px;color:var(--text-2);max-width:620px;margin:0 auto 20px;line-height:1.8}
.slogan .cta{position:relative;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.slogan .foot-note{position:relative;margin-top:16px;font-family:var(--font-mono);font-size:8.5px;color:var(--text-3)}

/* footer */
.foot{border-top:1px solid var(--border);margin-top:auto;padding:18px 0 20px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--text-3)}
.foot .wrap a{color:var(--text-2)}
.foot .wrap a:hover{color:var(--text-1)}
.foot .next{font-family:var(--font-mono);font-size:10px;color:var(--accent)}

@media(max-width:1080px){
  .search{display:none}
  .nav-links{display:none}
  .grid.g3{grid-template-columns:1fr}
  .explain .card{max-width:620px;margin:0 auto}
}
@media(max-width:720px){
  .nav-in{padding:0 14px;gap:10px}
  .nav-actions .btn:first-child{display:none}
  .brand{font-size:15px}
  .hero{padding:30px 0 24px}
  .hero h1{font-size:32px}
  .hero-kpis{gap:7px}
  .kpi{min-width:82px;padding:7px 10px}
  .stage{max-width:100%}
  .like{width:100%}
  .media{height:250px}
  .stack-card.c4,.stack-card.c5{display:none}
  .stack-card.c1{transform:translate(calc(-50% - 6px),12px) rotate(-4deg) scale(.99)}
  .stack-card.c2{transform:translate(calc(-50% + 6px),24px) rotate(4deg) scale(.975)}
  .stack-card.c3{transform:translate(calc(-50% - 12px),36px) rotate(-7deg) scale(.96)}
  .live-strip .wrap{gap:12px}
  .live-strip a{margin-left:0}
  .foot .next{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mchart path{fill:none;stroke:hsl(var(--hue,162) 82% 66%);stroke-width:2}