/* ═══════════════════════════════════════════════════════════════
   WALLY landing v2 — tokens mirror the real app (index.html)
   Outfit / Plus Jakarta Sans / JetBrains Mono · violet #7c5cff
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --acc:#7c5cff; --acc-2:#6a48ee; --acc-glow:rgba(124,92,255,.22); --acc-dim:rgba(124,92,255,.12);
  --green:#22c98a; --red:#ff5e6c; --yellow:#ffc94c; --blue:#4c9aff; --orange:#ff8a3d;

  --disp:'Outfit','Plus Jakarta Sans',sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1200px; --pad:40px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media(max-width:680px){ :root{ --pad:20px; } }

html[data-theme="dark"]{
  --bg:#0a0a14; --bg-2:#0e0e1a; --surface:#13131f; --surface-2:#1a1a28; --surface-3:#222234;
  --line:#22223a; --line-2:#33334e;
  --ink:#f3f3fb; --ink-2:#a3a3c2; --ink-3:#6b6b88; --ink-4:#3e3e58;
  --card-bg:#161624; --card-bd:#23233a;
  --shadow:0 16px 48px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --app-bg:radial-gradient(1100px 760px at 82% -8%, rgba(124,92,255,.16), transparent 58%),
           radial-gradient(820px 560px at -10% 108%, rgba(76,141,255,.12), transparent 55%), #0a0a14;
  --grid:rgba(255,255,255,.035);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f4f3fb; --bg-2:#efeef7; --surface:#ffffff; --surface-2:#f7f6fc; --surface-3:#efeef7;
  --line:#e9e7f3; --line-2:#d6d4e6;
  --ink:#1a1730; --ink-2:#5d597e; --ink-3:#8b88a8; --ink-4:#bcbacf;
  --card-bg:#ffffff; --card-bd:#ecebf5;
  --shadow:0 16px 48px rgba(20,18,50,.12), 0 4px 14px rgba(20,18,50,.06);
  --shadow-sm:0 2px 10px rgba(20,18,50,.05);
  --app-bg:radial-gradient(1100px 760px at 82% -8%, rgba(124,92,255,.13), transparent 58%),
           radial-gradient(820px 560px at -10% 108%, rgba(76,141,255,.09), transparent 55%), #f4f3fb;
  --grid:rgba(20,18,50,.04);
  color-scheme:light;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--app-bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
img{ display:block; max-width:100%; }
::selection{ background:var(--acc); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.disp{ font-family:var(--disp); font-weight:700; letter-spacing:-.03em; line-height:1; }
.mono{ font-family:var(--mono); }
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-3);
  padding:6px 12px 6px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface);
}
.kicker .sq{ width:7px; height:7px; background:var(--acc); border-radius:2px; box-shadow:0 0 10px var(--acc); }

/* ─── Buttons ─── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:14.5px;
  padding:13px 22px; border-radius:var(--r-md); border:1px solid transparent;
  transition:transform .15s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn .arr{ transition:transform .18s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{ background:var(--acc); color:#fff; box-shadow:0 10px 26px -8px var(--acc-glow), 0 0 0 0 var(--acc); }
.btn-primary:hover{ background:var(--acc-2); transform:translateY(-2px); box-shadow:0 16px 34px -10px var(--acc-glow); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-2px); }
.btn-lg{ padding:12px 12px; font-size:15.5px; }

/* ─── Nav ─── */
nav.top{
  position:sticky; top:0; z-index:80;
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:4px 8px; display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img{ width:34px; height:34px; border-radius:10px; }
.brand-name{ font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.02em; }
.brand-name b{ color:var(--acc); font-weight:800; }
.nav-links{ display:flex; gap:2px; margin-left:8px; }
.nav-links a{ padding:8px 13px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-2); transition:.15s; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); background:var(--acc-dim); }
.nav-spacer{ flex:1; }
.nav-actions{ display:flex; gap:8px; align-items:center; }
.icon-btn{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; color:var(--ink-2); border:1px solid var(--line); background:var(--surface); transition:.15s; font-size:17px; }
.icon-btn:hover{ color:var(--acc); border-color:var(--acc); }
.theme-toggle .moon{ display:none; }
html[data-theme="dark"] .theme-toggle .sun{ display:none; }
html[data-theme="dark"] .theme-toggle .moon{ display:inline; }
@media(max-width:900px){ .nav-links{ display:none; } }

/* ─── Hero ─── */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 60px,
            linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/60px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%); mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; padding:72px 0 80px; }
.hero h1{ font-family:var(--disp); font-weight:800; font-size:clamp(40px,5.9vw,76px); line-height:.97; letter-spacing:-.04em; margin:22px 0 22px; max-width:13ch; }
.hero h1 .em{ color:var(--acc); }
.hero-sub{ font-size:clamp(16px,1.35vw,19px); color:var(--ink-2); max-width:50ch; line-height:1.55; }
.hero-sub b{ color:var(--ink); font-weight:700; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:30px; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.hero-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-2); padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); }
.hero-chip i{ color:var(--acc); }
.hero-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:560px; }
.hero-glow{ position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, var(--acc-glow), transparent 65%); filter:blur(8px); z-index:0; animation:breathe 7s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.12); opacity:1 } }
.hero-orbit-chip{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-family:var(--disp); font-weight:700; font-size:13px; box-shadow:var(--shadow-sm); }
.hero-orbit-chip .b{ width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-weight:800; font-size:10px; }
.hero-orbit-chip.o1{ top:8%; right:2%; animation:float 6s ease-in-out infinite; }
.hero-orbit-chip.o2{ top:46%; left:-6%; animation:float 5.4s ease-in-out .5s infinite; }
.hero-orbit-chip.o3{ bottom:10%; right:6%; animation:float 5.8s ease-in-out .9s infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media(max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; padding:48px 0 60px; }
  .hero-stage{ min-height:520px; }
}

/* ─── Phone mockup (built from app tokens) ─── */
.phone{ position:relative; width:300px; flex-shrink:0; border-radius:42px; padding:11px; background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2); box-shadow:var(--shadow); z-index:2; }
.phone-screen{ position:relative; border-radius:32px; overflow:hidden; background:var(--app-bg); background-color:var(--surface); height:610px; display:flex; flex-direction:column; border:1px solid var(--line); }
.phone.sm .phone-screen{ height:560px; }
.ps-pad{ padding:16px 15px; display:flex; flex-direction:column; gap:13px; flex:1; overflow:hidden; }

/* app topbar */
.app-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.acct{ display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); }
.acct .av{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--disp); font-weight:800; font-size:12px; }
.acct .nm{ font-family:var(--disp); font-weight:700; font-size:13px; }
.acct .cv{ font-size:9px; color:var(--ink-3); }
.app-top .tb-ico{ width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:15px; }

/* balance */
.bal{ text-align:center; padding:10px 0 4px; }
.bal .l{ font-size:11px; color:var(--ink-3); font-weight:600; letter-spacing:.02em; }
.bal .v{ font-family:var(--disp); font-weight:800; font-size:38px; letter-spacing:-.03em; margin-top:3px; }
.bal .v .dec{ color:var(--ink-3); }
.bal .chg{ display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:11.5px; font-weight:700; color:var(--green); background:color-mix(in oklab,var(--green) 14%,transparent); padding:3px 9px; border-radius:999px; }

/* action row */
.acts{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.act{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:11px 0; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.act .ci{ width:32px; height:32px; border-radius:10px; background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:15px; }
.act .cl{ font-size:10px; font-weight:700; color:var(--ink-2); }

/* asset list */
.assets{ display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.asset{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.asset .ico{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-weight:800; font-size:11px; flex-shrink:0; }
.asset .meta{ flex:1; min-width:0; }
.asset .nm{ font-family:var(--disp); font-weight:700; font-size:13.5px; line-height:1.2; }
.asset .ch{ font-size:10px; color:var(--ink-3); font-weight:600; }
.asset .amt{ text-align:right; }
.asset .amt .a{ font-weight:700; font-size:13px; }
.asset .amt .f{ font-size:10px; color:var(--ink-3); }
.asset .amt .f.up{ color:var(--green); } .asset .amt .f.dn{ color:var(--red); }

/* bottom nav */
.app-nav{ display:flex; justify-content:space-around; padding:11px 8px; border-top:1px solid var(--line); background:var(--surface); }
.app-nav .n{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; font-weight:700; color:var(--ink-3); }
.app-nav .n i{ font-size:17px; }
.app-nav .n.on{ color:var(--acc); }

/* import screen */
.imp-head{ display:flex; align-items:center; gap:10px; }
.imp-head .bk{ width:32px; height:32px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
.imp-head .t{ font-family:var(--disp); font-weight:700; font-size:15px; }
.imp-title{ font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.02em; margin-top:4px; }
.imp-title .em{ color:var(--acc); }
.imp-sub{ font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.4; }
.imp-opt{ display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.imp-opt.on{ border-color:var(--acc); background:var(--acc-dim); box-shadow:0 0 0 1px var(--acc); }
.imp-opt .oi{ width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:15px; flex-shrink:0; }
.imp-opt.on .oi{ background:var(--acc); color:#fff; border-color:var(--acc); }
.imp-opt .ot{ flex:1; min-width:0; }
.imp-opt .ot .a{ font-family:var(--disp); font-weight:700; font-size:13px; }
.imp-opt .ot .b{ font-size:10px; color:var(--ink-3); font-weight:600; margin-top:1px; }
.imp-opt .chk{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-2); flex-shrink:0; }
.imp-opt.on .chk{ background:var(--acc); border-color:var(--acc); display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; }
.seedgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.seedgrid .w{ display:flex; align-items:center; gap:5px; padding:7px 8px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:600; }
.seedgrid .w .i{ color:var(--ink-4); font-size:9px; }
.imp-cta{ margin-top:auto; padding:12px; border-radius:13px; background:var(--acc); color:#fff; text-align:center; font-family:var(--disp); font-weight:700; font-size:14px; }

/* ─── Section scaffold ─── */
section.s{ padding:104px 0; border-bottom:1px solid var(--line); position:relative; }
@media(max-width:680px){ section.s{ padding:68px 0; } }
.s-head{ max-width:720px; margin-bottom:54px; }
.s-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.s-head .kicker{ margin-bottom:18px; }
.s-title{ font-family:var(--disp); font-weight:800; font-size:clamp(30px,4.3vw,52px); line-height:1.02; letter-spacing:-.03em; }
.s-title .em{ color:var(--acc); }
.s-lede{ font-size:17.5px; color:var(--ink-2); max-width:56ch; line-height:1.55; margin-top:18px; }
.s-head.center .s-lede{ margin-left:auto; margin-right:auto; }
.s-lede b{ color:var(--ink); font-weight:700; }

/* ─── Ticker ─── */
.ticker{ border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; position:relative; }
.ticker::before,.ticker::after{ content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(90deg,var(--bg-2),transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg,var(--bg-2),transparent); }
.ticker-track{ display:flex; gap:12px; padding:18px 0; width:max-content; animation:marquee 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.tk{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; padding:9px 16px 9px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.tk.legacy{ border-style:dashed; }
.tk .b{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-weight:800; font-size:10px; }
.tk .s{ font-family:var(--disp); font-weight:700; font-size:14px; }
.tk .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }

/* ─── Import / Electrum differentiator ─── */
.bring{ display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:center; }
@media(max-width:920px){ .bring{ grid-template-columns:1fr; gap:48px; justify-items:center; } .bring .left{ max-width:620px; } }
.imports{ display:flex; flex-direction:column; gap:10px; margin-top:30px; }
.import-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); transition:.2s var(--ease); }
.import-row:hover{ border-color:var(--acc); transform:translateX(4px); }
.import-row.star{ border-color:var(--acc); background:var(--acc-dim); }
.import-row .ii{ width:46px; height:46px; border-radius:13px; background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.import-row.star .ii{ background:var(--acc); color:#fff; }
.import-row .it{ flex:1; min-width:0; }
.import-row .it .a{ font-family:var(--disp); font-weight:700; font-size:16.5px; display:flex; align-items:center; gap:9px; }
.import-row .it .a .badge{ font-family:var(--mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--acc); background:var(--acc-dim); padding:2px 7px; border-radius:5px; }
.import-row .it .b{ font-size:13.5px; color:var(--ink-2); margin-top:3px; line-height:1.45; }
.import-row .it .b code{ font-family:var(--mono); font-size:12px; background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; }

/* ─── Legacy chains moment ─── */
.legacy-moment{ background:var(--bg-2); }
.legacy-wall{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.legacy-coin{ display:inline-flex; align-items:center; gap:11px; padding:13px 18px 13px 13px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); transition:.18s var(--ease); }
.legacy-coin:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.legacy-coin .b{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-weight:800; font-size:12px; flex-shrink:0; }
.legacy-coin .lt .s{ font-family:var(--disp); font-weight:700; font-size:15px; }
.legacy-coin .lt .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.legacy-coin .lt .y{ font-family:var(--mono); font-size:9.5px; color:var(--acc); font-weight:600; }

/* ─── Networks grid ─── */
.nets{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.net-row{ display:grid; grid-template-columns:210px 1fr; gap:28px; padding:26px 30px; border-bottom:1px solid var(--line); align-items:start; }
.net-row:last-child{ border-bottom:0; }
.net-meta .nm{ font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; }
.net-meta .nm .tag{ font-family:var(--mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:5px; background:color-mix(in oklab,var(--yellow) 20%,transparent); color:color-mix(in oklab,var(--yellow) 60%,var(--ink)); }
.net-meta .ns{ font-family:var(--mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; margin-top:7px; }
.coins{ display:flex; flex-wrap:wrap; gap:8px; }
.coin{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 8px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); transition:.15s var(--ease); }
.coin:hover{ transform:translateY(-2px); border-color:var(--line-2); }
.coin .b{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-weight:800; font-size:10px; }
.coin .ct{ display:flex; flex-direction:column; line-height:1.15; }
.coin .cs{ font-family:var(--disp); font-weight:700; font-size:13.5px; }
.coin .cn{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.net-row.soon .coin{ border-style:dashed; opacity:.72; }
.net-row.soon .coin .b{ background:transparent !important; color:var(--ink-3) !important; border:1.5px dashed var(--line-2); }
@media(max-width:680px){ .net-row{ grid-template-columns:1fr; gap:14px; } }

/* ─── Showcase (product) ─── */
.showcase{ display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:center; }
@media(max-width:920px){ .showcase{ grid-template-columns:1fr; gap:48px; justify-items:center; } .showcase .right{ max-width:620px; } }
.show-feats{ display:flex; flex-direction:column; gap:6px; }
.show-feat{ display:flex; gap:16px; padding:20px; border-radius:var(--r-md); border:1px solid transparent; transition:.2s var(--ease); }
.show-feat:hover{ background:var(--surface); border-color:var(--line); }
.show-feat .fi{ width:46px; height:46px; border-radius:13px; background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.show-feat .ft{ font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.01em; }
.show-feat .fb{ font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:5px; }

/* ─── Principles ─── */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.principle{ padding:34px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s; }
.principle:hover{ background:var(--surface-2); }
.principles .principle:nth-child(3n){ border-right:0; }
.principles .principle:nth-last-child(-n+3){ border-bottom:0; }
.p-ico{ width:46px; height:46px; border-radius:13px; background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; }
.p-title{ font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.p-body{ font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:9px; }
.p-body code{ font-family:var(--mono); font-size:12px; background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; }
@media(max-width:900px){ .principles{ grid-template-columns:1fr 1fr; } .principles .principle:nth-child(3n){ border-right:1px solid var(--line); } .principles .principle:nth-child(2n){ border-right:0; } }
@media(max-width:540px){ .principles{ grid-template-columns:1fr; } .principle{ border-right:0 !important; } }

/* ─── $WAY DAO ─── */
.dao-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
@media(max-width:920px){ .dao-grid{ grid-template-columns:1fr; gap:42px; } }
.token-card{ border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.token-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 28px; border-bottom:1px solid var(--line); background:var(--acc-dim); }
.token-tick{ display:inline-flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:800; font-size:19px; }
.token-tick .blk{ width:36px; height:36px; border-radius:10px; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:15px; }
.token-top .sup{ text-align:right; }
.token-top .sup .l{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); }
.token-top .sup .v{ font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:-.02em; margin-top:2px; }
.token-body{ padding:30px 28px; }
.pie-stack{ display:flex; align-items:center; gap:30px; }
.pie{ width:170px; height:170px; flex-shrink:0; border-radius:50%; position:relative; }
.pie::after{ content:''; position:absolute; inset:31px; background:var(--surface); border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); }
.pie-mid{ position:absolute; inset:31px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.pie-mid .v{ font-family:var(--disp); font-weight:800; font-size:27px; letter-spacing:-.02em; }
.pie-mid .l{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-top:3px; }
.alloc{ flex:1; display:flex; flex-direction:column; gap:13px; min-width:0; }
.alloc-row{ display:flex; align-items:center; gap:12px; }
.alloc-dot{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.alloc-info{ flex:1; min-width:0; }
.alloc-info .n{ font-size:13.5px; font-weight:700; }
.alloc-info .d{ font-size:11.5px; color:var(--ink-3); margin-top:1px; line-height:1.4; }
.alloc-pct{ font-family:var(--mono); font-weight:700; font-size:14px; }
@media(max-width:480px){ .pie-stack{ flex-direction:column; align-items:stretch; } .pie{ align-self:center; } }
.flywheel{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.fw-step{ display:flex; gap:16px; align-items:flex-start; position:relative; }
.fw-num{ width:38px; height:38px; flex-shrink:0; border-radius:11px; border:1px solid var(--acc); background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:13px; }
.fw-step:not(:last-child) .fw-num::after{ content:''; position:absolute; left:18px; top:42px; width:1px; height:calc(100% - 30px); background:var(--acc); opacity:.4; }
.fw-txt .ft{ font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.fw-txt .fb{ font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:3px; }
.fw-txt .fb b{ color:var(--ink); font-weight:700; }
.split{ display:flex; gap:12px; margin-top:12px; }
.split .chip{ flex:1; border:1px solid var(--line); border-radius:13px; padding:14px 16px; background:var(--surface-2); }
.split .chip .big{ font-family:var(--disp); font-weight:800; font-size:25px; letter-spacing:-.02em; }
.split .chip .sm{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-top:3px; }
.split .chip.burn .big{ color:var(--orange); }
.split .chip.treasury .big{ color:var(--acc); }

/* ─── Steps ─── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.step{ padding:34px 30px; border-right:1px solid var(--line); }
.steps .step:last-child{ border-right:0; }
.step .sn{ font-family:var(--disp); font-weight:800; font-size:30px; color:var(--acc); letter-spacing:-.02em; }
.step .st{ font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.01em; margin-top:14px; }
.step .sb{ font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:9px; }
.step .sb code{ font-family:var(--mono); font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; }
@media(max-width:780px){ .steps{ grid-template-columns:1fr; } .step{ border-right:0; border-bottom:1px solid var(--line); } .steps .step:last-child{ border-bottom:0; } }

/* ─── CTA ─── */
.cta{ padding:112px 0; border-bottom:1px solid var(--line); position:relative; overflow:hidden; text-align:center; }
.cta-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(640px 400px at 50% 0%, var(--acc-glow), transparent 68%); }
.cta .inner{ position:relative; z-index:1; }
.cta .mini-mascot{ width:100px; border-radius:26%; margin:0 auto 26px; box-shadow:var(--shadow); }
.cta h2{ font-family:var(--disp); font-weight:800; font-size:clamp(32px,5.2vw,62px); line-height:1; letter-spacing:-.04em; }
.cta h2 .em{ color:var(--acc); }
.cta p{ color:var(--ink-2); font-size:18px; margin:20px auto 0; max-width:48ch; }
.cta .cta-row{ justify-content:center; }

/* ─── Footer ─── */
footer{ padding:66px 0 48px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px; }
.foot-brand{ display:flex; gap:13px; align-items:flex-start; }
.foot-brand img{ width:46px; height:46px; border-radius:13px; }
.foot-brand .fb-name{ font-family:var(--disp); font-weight:800; font-size:19px; }
.foot-brand .fb-name b{ color:var(--acc); }
.foot-brand p{ color:var(--ink-2); font-size:13.5px; line-height:1.5; margin-top:8px; max-width:34ch; }
.foot-col h4{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px; }
.foot-col a{ display:block; color:var(--ink-2); font-size:14px; padding:5px 0; transition:.15s; }
.foot-col a:hover{ color:var(--acc); }
.foot-meta{ margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.foot-meta .sigs{ display:flex; gap:10px; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:460px){ .foot-grid{ grid-template-columns:1fr; } }

/* ─── Reveal ─── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}