/* ══════════════════════════════════════════════════════════════════════
   回收兌換平台 — 官方網站  ·  Codename 活線 / LIVELINE
   Dark-futuristic neon. Tokens are law (DESIGN_SPEC §1). Neon ≤5% viewport.
   ══════════════════════════════════════════════════════════════════════ */

/* ───────── Tokens ───────── */
:root{
  /* void / surfaces */
  --void:#08090a; --void-2:#0a0c0d; --surface:#0e0f11; --surface-2:#121316;
  --glass:rgba(14,16,18,.55);
  /* lines */
  --line:#1a1c1e; --line-strong:#26282b; --line-neon:rgba(52,211,153,.18);
  /* text */
  --text:#f4f5f4; --text-2:#8b8f8c; --text-3:#51544f;
  /* neon protagonist */
  --emerald:#10b981; --emerald-lt:#34d399; --teal:#14b8a6; --emerald-dp:#047857;
  --danger:#f43f5e;
  /* glows */
  --glow-soft:rgba(52,211,153,.18); --glow-mid:rgba(52,211,153,.40);
  --glow-strong:rgba(52,211,153,.60); --glow-bloom:rgba(16,185,129,.55);
  --vein:linear-gradient(90deg,#10b981 0%,#34d399 50%,#14b8a6 100%);

  /* type */
  --fs-hero:clamp(3.2rem,9vw,9.5rem); --fs-h2:clamp(2.2rem,5.5vw,4.5rem);
  --fs-h3:clamp(1.5rem,3vw,2.4rem); --fs-lead:clamp(1.15rem,1.6vw,1.5rem);
  --fs-body:1.0625rem; --fs-small:.9375rem; --fs-eyebrow:.72rem;
  --fs-data-xl:clamp(2.8rem,6vw,5rem); --fs-data:1.25rem;
  --lh-tight:1.04; --lh-body:1.9; --measure:62ch;
  --tracking-display:-.03em; --tracking-eyebrow:.3em; --tracking-mono:.04em;

  /* spacing */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:192px;
  --section-pad:clamp(96px,14vh,200px); --gutter:clamp(20px,5vw,80px);
  --maxw:1280px; --maxw-wide:1600px;

  /* radius */
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:32px;--r-pill:999px;

  /* shadow & glow */
  --shadow-float:0 40px 80px -20px rgba(0,0,0,.6),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-card:0 20px 50px -24px rgba(0,0,0,.7);
  --glow-line:0 0 20px var(--glow-mid),0 0 4px var(--glow-strong);
  --glow-node:0 0 24px 4px var(--glow-bloom);
  --glow-text:0 0 12px var(--glow-mid);
  --glow-focus:0 0 0 2px var(--void),0 0 0 4px var(--emerald-lt),0 0 16px var(--glow-mid);
  --card-inset:inset 0 1px 0 rgba(255,255,255,.04);

  /* easing / duration */
  --ease-reveal:cubic-bezier(.16,1,.3,1); --ease-smooth:cubic-bezier(.45,0,.15,1);
  --ease-out3:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:.35s;--d-base:.6s;--d-slow:.9s;--d-cine:1.6s;

  --font-display:"Sora","Space Grotesk",sans-serif;
  --font-mono:"Space Mono","JetBrains Mono",ui-monospace,monospace;
  --font-body:"Noto Sans TC",sans-serif;
}

/* ───────── Reset / base ───────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--font-body);background:var(--void);color:var(--text);
  font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--emerald);color:#04140d}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--glow-focus);border-radius:var(--r-sm)}
@media(forced-colors:active){:focus-visible{outline-color:Highlight}}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-mono)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ───────── Ambient: aurora + grain ───────── */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora b{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:.5;will-change:transform}
.aurora b.e{width:46vw;height:46vw;left:58%;top:-10%;background:radial-gradient(circle,rgba(16,185,129,.33),transparent 60%);animation:drift 24s var(--ease-smooth) infinite}
.aurora b.t{width:40vw;height:40vw;left:-12%;top:46%;background:radial-gradient(circle,rgba(20,184,166,.27),transparent 60%);animation:drift 30s var(--ease-smooth) infinite reverse}
.aurora b.d{width:34vw;height:34vw;left:40%;top:78%;background:radial-gradient(circle,rgba(4,120,87,.30),transparent 62%);animation:drift 27s var(--ease-smooth) 2s infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-40px,30px,0) scale(1.12)}}
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────── Scroll progress + cursor + ledger ───────── */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9100;transform:scaleX(0);transform-origin:left;background:var(--vein);box-shadow:var(--glow-line)}
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9200;pointer-events:none;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.cursor{width:6px;height:6px;background:var(--emerald-lt);box-shadow:0 0 10px var(--glow-strong);transform:translate(-50%,-50%)}
.cursor-ring{width:34px;height:34px;border:1.5px solid var(--glow-mid);transform:translate(-50%,-50%);transition:width .3s var(--ease-out3),height .3s var(--ease-out3),border-color .3s,opacity .3s}
.cursor-ring.is-link{width:54px;height:54px;border-color:var(--emerald-lt)}
.cursor-ring.is-hide{opacity:0}
.ledger{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:800;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-3);
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none;opacity:.7}
.ledger b{color:var(--emerald-lt);font-weight:400}

/* ───────── 活線 LIVELINE overlay ───────── */
.vein-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:visible}
.vein-layer svg{width:100%;height:100%}
.vein-path{fill:none;stroke:url(#veinGrad);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--glow-mid))}
.vein-node{fill:var(--emerald-lt);filter:drop-shadow(0 0 8px var(--glow-bloom))}
.vein-packet{fill:var(--emerald-lt);filter:drop-shadow(0 0 6px var(--glow-strong))}

/* ───────── Nav ───────── */
.nav{position:fixed;top:0;left:0;right:0;height:72px;z-index:8000;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--gutter);transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,9,10,.55);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.nav__brand{display:flex;align-items:center;gap:11px;font-weight:500}
.nav__mark{display:grid;place-items:center;width:34px;height:34px}
.nav__mark svg{filter:drop-shadow(0 0 6px var(--glow-mid))}
.nav__word{font-size:16px;letter-spacing:.02em}
.nav__links{display:flex;gap:var(--sp-6);align-items:center}
.nav__links a{position:relative;font-size:14.5px;color:var(--text-2);padding:6px 0;transition:color .3s;display:inline-flex;gap:7px;align-items:baseline}
.nav__links a em{font-family:var(--font-mono);font-style:normal;font-size:10px;color:#777b77}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:var(--vein);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out3)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{font-size:14px;font-weight:500;padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--line-neon);color:var(--text);transition:.35s var(--ease-out3)}
.nav__cta:hover{background:var(--emerald);color:#04140d;border-color:var(--emerald);box-shadow:0 0 24px var(--glow-mid)}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:8100}
.nav__burger span{width:24px;height:1.5px;background:var(--text);transition:.3s}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.navmenu{position:fixed;inset:0;z-index:8050;background:rgba(8,9,10,.97);backdrop-filter:blur(8px);
  display:none;flex-direction:column;justify-content:center;gap:var(--sp-4);padding:var(--gutter);opacity:0;transition:opacity .4s}
.navmenu.open{display:flex;opacity:1}
.navmenu a{font-family:var(--font-display);font-size:clamp(2rem,7vw,3.2rem);font-weight:700;color:var(--text);display:flex;align-items:baseline;gap:14px}
.navmenu a em{font-family:var(--font-mono);font-style:normal;font-size:14px;color:var(--emerald-lt)}

/* ───────── Buttons / magnetic ───────── */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:15px;padding:15px 30px;border-radius:var(--r-pill);transition:transform .35s var(--ease-out3),box-shadow .35s,background .35s,color .35s,border-color .35s}
.btn--primary{color:#04140d;background:var(--emerald);box-shadow:0 0 0 0 var(--glow-mid)}
.btn--primary:hover{box-shadow:0 0 34px var(--glow-mid)}
.btn--ghost{color:var(--text);border:1px solid var(--line-neon)}
.btn--ghost:hover{border-color:var(--emerald);background:rgba(16,185,129,.08);box-shadow:0 0 24px var(--glow-soft)}
.btn__ico{width:18px;height:18px}

/* ───────── Layout primitives ───────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--maxw-wide)}
section{position:relative;padding-block:var(--section-pad)}
/* inner pages: first section clears the fixed nav + trims dead void above the fold */
body:not([data-page="home"]) main>section:first-of-type{padding-top:max(var(--section-pad),calc(72px + var(--sp-7)));padding-bottom:var(--sp-6)}
.band-2{background:var(--void-2)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-3);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--emerald);box-shadow:0 0 6px var(--glow-mid)}
.section-head{max-width:780px;margin-bottom:var(--sp-9)}
.section-head h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:var(--tracking-display);margin-top:var(--sp-4)}
.section-head .lead{margin-top:var(--sp-4);color:var(--text-2);font-size:var(--fs-lead);max-width:var(--measure)}
.lead{font-size:var(--fs-lead);color:var(--text-2)}
.kicker{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;color:var(--emerald-lt);text-transform:uppercase}

/* ───────── Reveal system (gated on html.js → no-JS/failed-JS shows content) ───────── */
html.js [data-reveal]{opacity:0;transform:translateY(40px)}
html.js [data-reveal].in{opacity:1;transform:none;transition:opacity .9s var(--ease-reveal),transform .9s var(--ease-reveal)}
.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block}

/* ───────── Exhibit chrome (rebuilt UI base) ───────── */
.exhibit{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card),var(--card-inset);padding:var(--sp-6)}
.exhibit:hover{will-change:transform}
.exhibit--glass{background:var(--glass);backdrop-filter:blur(14px);border-color:var(--line-neon)}
.exhibit__eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* === 5.1 即時點數卡 === */
.c-points{min-width:260px}
.c-points__top{display:flex;justify-content:space-between;align-items:flex-start}
.c-points__persona{display:flex;align-items:center;gap:10px;margin-top:var(--sp-4)}
.c-points__avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,var(--emerald),var(--teal));display:grid;place-items:center;color:#04140d;font-weight:700;font-size:14px}
.c-points__persona b{font-weight:500;font-size:14px}
.c-points__persona i{font-style:normal;color:var(--text-3);font-size:12px}
.c-points__bal{display:flex;align-items:baseline;gap:8px;margin-top:var(--sp-5)}
.c-points__bal .v{font-family:var(--font-mono);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:var(--emerald-lt);text-shadow:var(--glow-text);line-height:1}
.c-points__bal .u{color:var(--text-2);font-size:18px}
.c-points__delta{font-family:var(--font-mono);font-size:13px;color:var(--emerald-lt);background:rgba(16,185,129,.1);border:1px solid var(--line-neon);padding:4px 10px;border-radius:var(--r-pill)}
.c-points__spark{margin-top:var(--sp-5);height:40px;width:100%}
.c-points__spark path{fill:none;stroke:var(--emerald-lt);stroke-width:2;filter:drop-shadow(0 0 4px var(--glow-mid))}
.c-points__spark .fill{fill:url(#sparkFill);stroke:none}

/* === 5.2 QR 會員卡 === */
.c-qr{width:300px}
.c-qr__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5)}
.c-qr__chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--emerald-lt);border:1px solid var(--line-neon);padding:4px 10px;border-radius:var(--r-pill)}
.c-qr__grid{position:relative;width:160px;height:160px;margin:0 auto;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:2px;padding:12px;background:#0b0d0e;border-radius:var(--r-md);border:1px solid var(--line)}
.c-qr__grid i{background:var(--text);border-radius:1px}
.c-qr__grid i.on{background:var(--text)}.c-qr__grid i.off{background:transparent}
.c-qr__scan{position:absolute;left:8px;right:8px;top:14px;height:2px;background:linear-gradient(90deg,transparent,var(--emerald-lt),transparent);box-shadow:0 0 10px var(--glow-strong);animation:qrscan 2.8s var(--ease-smooth) infinite;will-change:transform}
@keyframes qrscan{0%,100%{transform:translateY(0)}50%{transform:translateY(132px)}}
.c-qr__foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-5)}
.c-qr__timer{display:flex;align-items:center;gap:10px}
.c-qr__ring{width:38px;height:38px}
.c-qr__ring circle{fill:none;stroke-width:3}
.c-qr__ring .bg{stroke:var(--line)}
.c-qr__ring .fg{stroke:var(--emerald-lt);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--glow-mid));transform:rotate(-90deg);transform-origin:center}
.c-qr__timer b{font-family:var(--font-mono);font-size:18px;color:var(--emerald-lt)}
.c-qr__note{font-size:11px;color:var(--text-3);text-align:right;max-width:120px}

/* === 5.3 兌換成功卡 + 兌換碼 === */
.c-redeem{width:320px;text-align:center}
.c-redeem__check{width:56px;height:56px;margin:0 auto var(--sp-4)}
.c-redeem__check circle{fill:rgba(16,185,129,.12);stroke:var(--emerald);stroke-width:2}
.c-redeem__check path{fill:none;stroke:var(--emerald-lt);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--glow-mid))}
.c-redeem h4{font-family:var(--font-display);font-size:22px;font-weight:700}
.c-redeem__item{color:var(--text-2);font-size:14px;margin-top:4px}
.c-ticket{position:relative;margin-top:var(--sp-5);background:var(--void-2);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:var(--sp-4);display:flex;flex-direction:column;gap:4px}
.c-ticket::before,.c-ticket::after{content:"";position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--surface);transform:translateY(-50%)}
.c-ticket::before{left:-9px}.c-ticket::after{right:-9px}
.c-ticket .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.c-ticket .code{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--emerald-lt);letter-spacing:.1em;text-shadow:var(--glow-text)}

/* === 5.4 統計數字 roll === */
.c-stat{display:flex;flex-direction:column;gap:var(--sp-3)}
.c-stat .v{font-family:var(--font-mono);font-size:var(--fs-data-xl);font-weight:700;color:var(--emerald-lt);line-height:1;text-shadow:var(--glow-text)}
.c-stat .lbl{color:var(--text-2);font-size:var(--fs-small);max-width:24ch}
.c-stat .src{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}

/* === 5.5 AI 掃描 HUD === */
.c-scan{width:340px;aspect-ratio:3/4;position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#0c2a22,#070d0b);border:1px solid var(--line-neon)}
.c-scan__bottle{position:absolute;inset:0;display:grid;place-items:center;font-size:130px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));animation:bobbing 5s var(--ease-smooth) infinite}
@keyframes bobbing{50%{transform:translateY(-12px)}}
.c-scan__bar{position:absolute;left:6%;right:6%;top:12%;height:2px;background:linear-gradient(90deg,transparent,var(--emerald-lt),transparent);box-shadow:0 0 14px var(--glow-strong);animation:scanbar 2.6s var(--ease-smooth) infinite;will-change:transform}
@keyframes scanbar{0%,100%{transform:translateY(0)}50%{transform:translateY(300px)}}
.c-scan__box{position:absolute;inset:24% 22% 30% 22%;border-radius:6px}
.c-scan__box span{position:absolute;width:26px;height:26px;border:2px solid var(--emerald-lt);filter:drop-shadow(0 0 5px var(--glow-mid))}
.c-scan__box .tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.c-scan__box .tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.c-scan__box .bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.c-scan__box .br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.c-scan__hud{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(7,13,11,.8);backdrop-filter:blur(8px);border:1px solid var(--line-neon);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.c-scan__row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:13px}
.c-scan__row b{color:var(--emerald-lt)}
.c-scan__conf{margin-top:8px;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.c-scan__conf i{position:absolute;left:0;top:0;bottom:0;width:94%;background:var(--vein);border-radius:3px;box-shadow:0 0 8px var(--glow-mid)}
.c-scan__conf .th{position:absolute;left:70%;top:-2px;bottom:-2px;width:1.5px;background:var(--text-2)}
.c-scan__chips{display:flex;gap:6px;margin-top:8px}
.c-scan__chips span{font-family:var(--font-mono);font-size:10px;color:var(--text-3);border:1px solid var(--line);padding:2px 7px;border-radius:var(--r-pill)}
.c-scan__chips span.on{color:var(--emerald-lt);border-color:var(--line-neon)}

/* === 5.6 ledger row === */
.c-ledger{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
.c-ledger__row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-family:var(--font-mono);font-size:13px}
.c-ledger__row .ico{width:18px;height:18px;opacity:.7}
.c-ledger__row .name{font-family:var(--font-body);font-weight:500}
.c-ledger__row .bc{color:var(--text-3);margin-left:auto}
.c-ledger__row .pts{color:var(--emerald-lt);font-weight:700}
.c-ledger__row--junk{border-left:2px solid var(--danger)}
.c-ledger__row--junk .pts{color:var(--danger)}
.c-ledger__row--junk .tag{color:var(--danger);font-size:11px}

/* === 5.7 分類點數卡 === */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.c-cat{display:flex;flex-direction:column;gap:var(--sp-3);text-align:left}
.c-cat__ico{font-size:36px}
.c-cat__name{font-weight:500}.c-cat__name em{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--text-3);margin-left:6px}
.c-cat__pts{font-family:var(--font-mono);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--emerald-lt);text-shadow:var(--glow-text);line-height:1}
.c-cat__pts em{font-style:normal;font-size:16px;color:var(--text-2);margin-left:4px}

/* === 5.8 dashboard tiles === */
.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.c-tile{display:flex;flex-direction:column;gap:var(--sp-3)}
.c-tile .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.c-tile .v{font-family:var(--font-mono);font-size:2.4rem;font-weight:700;color:var(--text);line-height:1}
.c-tile .v em{font-style:normal;color:var(--emerald-lt);font-size:14px;margin-left:8px}
.c-donut{display:flex;align-items:center;gap:var(--sp-5)}
.c-donut__ring{width:120px;height:120px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--emerald) 0 52.2%,var(--teal) 52.2% 95.7%,var(--text-3) 95.7% 100%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);mask:radial-gradient(circle,transparent 56%,#000 57%)}
.c-donut__legend{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:13px}
.c-donut__legend span{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.c-donut__legend i{width:9px;height:9px;border-radius:2px}
.c-spark svg{width:100%;height:60px}
.c-spark path.l{fill:none;stroke:var(--emerald-lt);stroke-width:2;filter:drop-shadow(0 0 4px var(--glow-mid))}
.c-spark path.a{fill:url(#trendFill);stroke:none}

/* === SDGs cards === */
.sdg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.c-sdg{display:flex;flex-direction:column;gap:var(--sp-3)}
.c-sdg .n{font-family:var(--font-mono);font-size:3.4rem;font-weight:700;color:var(--emerald-lt);line-height:1;text-shadow:var(--glow-text)}
.c-sdg h3{font-family:var(--font-display);font-size:18px;font-weight:600}
.c-sdg p{color:var(--text-2);font-size:14px}

/* === role matrix === */
.matrix{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px}
.matrix th,.matrix td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center}
.matrix th{color:var(--text-3);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.matrix td:first-child,.matrix th:first-child{text-align:left;color:var(--text)}
.matrix .y{color:var(--emerald-lt);text-shadow:var(--glow-text)}
.matrix .n{color:var(--text-3)}

/* === download QR card === */
.c-dl{width:300px;text-align:center}
.c-dl__spec{display:flex;justify-content:center;gap:var(--sp-5);margin-top:var(--sp-5);font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.c-dl__spec b{display:block;color:var(--emerald-lt);font-size:14px}

/* ───────── Hero ───────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:var(--sp-10);position:relative}
.hero__eye{position:absolute;top:120px;left:var(--gutter)}
.hero__loop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hero__loopsvg{width:min(720px,80vw);overflow:visible}
.hero__node-label{font-family:var(--font-mono);font-size:13px;fill:var(--text-2);letter-spacing:.1em}
.hero__title{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--tracking-display);position:relative;z-index:2}
.hero__title .grad{color:var(--text);filter:drop-shadow(0 8px 34px var(--glow-soft))}
.hero__sub{margin-top:var(--sp-5);max-width:46ch;color:var(--text-2);font-size:var(--fs-lead);position:relative;z-index:2}
.hero__kicker{position:absolute;right:var(--gutter);bottom:var(--sp-10);writing-mode:vertical-rl;font-family:var(--font-mono);font-size:13px;letter-spacing:.4em;color:var(--text-3)}
.hero__cta{margin-top:var(--sp-7);display:flex;gap:var(--sp-4);flex-wrap:wrap;position:relative;z-index:2}
.scrollcue{position:absolute;bottom:var(--sp-6);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-3);font-family:var(--font-mono);font-size:10px;letter-spacing:.2em}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--emerald-lt),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* editorial drop + floating exhibit */
.drop{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-9);align-items:center}
.drop__type{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:var(--tracking-display)}
.drop__type .dim{color:var(--text-2)}
.drop__body{margin-top:var(--sp-5);color:var(--text-2);max-width:var(--measure)}
.drop__exhibit{display:flex;justify-content:center}

/* three-ends teaser tiles */
.ends{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.c-end{display:flex;flex-direction:column;gap:var(--sp-4);min-height:200px;transition:border-color .4s,transform .4s var(--ease-out3)}
.c-end:hover{border-color:var(--line-neon);transform:translateY(-6px)}
.c-end__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--emerald-lt);text-transform:uppercase}
.c-end h3{font-family:var(--font-display);font-size:22px;font-weight:600}
.c-end p{color:var(--text-2);font-size:14px}
.c-end__go{margin-top:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.trust span{font-family:var(--font-mono);font-size:13px;color:var(--text-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 18px}
.trust span b{color:var(--emerald-lt);font-weight:400}

/* video module */
.videowrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-neon);box-shadow:var(--shadow-float);aspect-ratio:16/9;background:#000}
.videowrap video{width:100%;height:100%;object-fit:cover}
.videowrap__play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:#04140d;background:var(--emerald);box-shadow:0 0 40px var(--glow-mid);transition:transform .35s,opacity .35s}
.videowrap__play svg{width:34px;height:34px;margin-left:3px}
.videowrap__play:hover{transform:scale(1.08)}
.videowrap__play.hidden{opacity:0;pointer-events:none}

/* CTA stage */
.cta-stage{text-align:center;padding-block:var(--sp-9)}
.cta-stage h2{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;line-height:1;letter-spacing:var(--tracking-display)}
.cta-stage .lead{margin:var(--sp-5) auto 0;max-width:46ch}
.cta-stage .btn{margin-top:var(--sp-7)}

/* pinned chapters (how) */
.chapter{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center}
.chapter__idx{font-family:var(--font-mono);font-size:13px;color:var(--text-3);letter-spacing:.2em}
.chapter h3{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;line-height:1.1;margin:var(--sp-4) 0}
.chapter p{color:var(--text-2);max-width:42ch}
.chapter__stage{display:flex;justify-content:center}

/* horizontal rail (apps) */
.rail{position:relative}
.rail__track{display:flex;gap:var(--sp-8);will-change:transform}
.rail__panel{flex:0 0 86vw;max-width:1100px;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-8);background:var(--void-2)}
.rail__panel h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700}
.rail__panel .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--emerald-lt);text-transform:uppercase}
.rail__panel ul{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:10px;color:var(--text-2)}
.rail__panel li{padding-left:20px;position:relative}
.rail__panel li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--glow-mid)}
.rail__stage{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-4)}

/* long-form (about) */
.longform{max-width:var(--measure);font-weight:300;font-size:var(--fs-lead);color:var(--text-2)}
.longform p{margin-bottom:var(--sp-5)}
.longform strong{color:var(--text);font-weight:500}

/* footer */
.footer{border-top:1px solid var(--line);padding:var(--sp-9) var(--gutter) var(--sp-6);background:var(--void-2)}
.footer__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-7)}
.footer__brand{display:flex;align-items:center;gap:11px;font-weight:500;font-size:17px;margin-bottom:var(--sp-4)}
.footer__tag{color:var(--text-2);font-size:14px;max-width:30ch}
.footer__col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4)}
.footer__col a,.footer__col p{display:block;color:var(--text-2);font-size:14px;margin-bottom:10px;transition:color .3s}
.footer__col a:hover{color:var(--emerald-lt)}
.footer__bottom{max-width:var(--maxw);margin:var(--sp-8) auto 0;padding-top:var(--sp-5);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.footer__sdg{display:flex;gap:10px}
.footer__sdg em{font-style:normal;color:var(--emerald-lt)}

/* view transitions */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:cubic-bezier(.45,0,.15,1)}

/* ───────── Responsive ───────── */
@media(max-width:980px){
  .drop,.chapter,.dash,.stat-band,.cat-grid,.sdg-grid,.ends{grid-template-columns:1fr;gap:var(--sp-6)}
  .footer__grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .ledger{display:none}
  .hero__kicker{display:none}
  .rail__track{flex-direction:column}
  .rail__panel{flex:none;grid-template-columns:1fr;width:100%}
}
@media(max-width:560px){
  .stat-band{gap:var(--sp-6)}
  .c-qr,.c-redeem,.c-scan,.c-dl,.c-points{width:100%;max-width:340px}
}

/* ───────── Reduced motion ───────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .cursor,.cursor-ring,.ledger{display:none!important}
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}