/* =========================================================
   GPU Inu: styles (vanilla CSS, mobile first)
   ========================================================= */
:root {
  --bg: #fbfbfb;
  --surface: #ffffff;
  --ink: #0f110e;
  --ink-2: #3c4239;
  --muted: #6a7166;
  --line: #e6e9e3;
  --line-2: #d7dcd3;
  --green: #12b812;
  --green-ink: #0a7d0a;
  --neon: #39ff14;
  --green-soft: #eafbe6;
  --orange: #f28a24;
  --orange-soft: #fff1e2;
  --red: #e5484d;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 12, .04), 0 8px 28px -12px rgba(16, 24, 12, .14);
  --shadow-lg: 0 2px 4px rgba(16, 24, 12, .05), 0 24px 60px -20px rgba(16, 40, 12, .25);
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-hand: "Caveat", "Kaiti SC", "STKaiti", "KaiTi", cursive;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --nav-h: 68px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
html[data-lang="zh"] { --font-display: "Unbounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html[data-lang="ja"] { --font-display: "Unbounded", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-body: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
html[data-lang="ko"] { --font-display: "Unbounded", "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-body: system-ui, -apple-system, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
h1, h2, h3, p, li { overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--neon); color: var(--ink); }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 200; }
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 14px; }
html[data-lang="zh"] .kicker, html[data-lang="ja"] .kicker, html[data-lang="ko"] .kicker { letter-spacing: .08em; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.h2--xl { font-size: clamp(38px, 7vw, 88px); line-height: 1; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; margin: 14px 0 8px; }
.hl { color: var(--green); }
.lede { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 58ch; }
.hand { font-family: var(--font-hand); font-size: clamp(26px, 3vw, 36px); color: var(--green-ink); transform: rotate(-3deg); margin-top: 22px; }
.fineprint { font-size: 13px; color: var(--muted); margin-top: 18px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 0 rgba(57, 255, 20, .6); animation: pulse 1.8s infinite; flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(57, 255, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.1; white-space: nowrap; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn--primary { background: linear-gradient(180deg, #44f23a, #18c415); color: #062b06; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -10px rgba(24, 196, 21, .8); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 34px -12px rgba(24, 196, 21, .9); }
.btn--ghost { background: var(--surface); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 14px 26px; font-size: 17px; }
.ic--end { transition: transform .25s var(--ease-out); }
.btn:hover .ic--end { transform: translateX(4px); }
.is-soon { opacity: .55; cursor: not-allowed; }

/* ---------- Notice bar (config.js -> notice) ---------- */
.notice { position: relative; z-index: 60; overflow: hidden; background: linear-gradient(180deg, #44f23a, #18c415); color: #062b06; padding: 8px 0; border-bottom: 2px solid var(--green-ink); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset; }
.notice[hidden] { display: none; }
.notice--link { cursor: pointer; }
.notice--link:hover { background: linear-gradient(180deg, #55ff4a, #1ad417); }
.notice__track { display: flex; width: max-content; white-space: nowrap; animation: notice-scroll linear infinite; }
.notice__msg { display: inline-block; padding-inline: 28px; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.notice__msg::after { content: "\2022"; margin-left: 28px; color: #062b06; opacity: .45; }
@keyframes notice-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.notice:hover .notice__track { animation-play-state: paused; }
@media (max-width: 560px) { .notice__msg { font-size: 12px; padding-inline: 18px; } .notice__msg::after { margin-left: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .notice__track { animation: none; width: 100%; justify-content: center; }
  .notice__msg:not(:first-child) { display: none; }
  .notice__msg::after { content: none; }
}

/* ---------- Header ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 251, 251, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.25); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 16px; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.brand img { width: 40px; height: 40px; }
.brand__word { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.brand__word b { color: var(--green); font-weight: 900; }
.nav__links { display: none; gap: 4px; margin-inline: auto; }
.nav__links a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.nav__links a:hover { background: var(--green-soft); color: var(--ink); }
.nav__links a.is-active { color: var(--green-ink); background: var(--green-soft); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__buy { display: none; }
.nav__menu { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); }
.nav__menu .ic { width: 22px; height: 22px; }
.lang { position: relative; flex: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 13px; border-radius: 999px; background: #eef0ec; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; transition: background .2s, border-color .2s; }
.lang__btn:hover { background: var(--surface); border-color: var(--line-2); }
.lang__chev { width: 15px; height: 15px; color: var(--muted); transition: transform .2s; }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 132px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.lang__menu[hidden] { display: none; }
.lang__menu li { padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.lang__menu li:hover { background: var(--green-soft); color: var(--ink); }
.lang__menu li.is-on { background: var(--green-soft); color: var(--green-ink); font-weight: 800; }
.vram { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.vram__bar { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--green), var(--neon)); box-shadow: 0 0 10px rgba(57,255,20,.6); }
.vram__label { display: none; position: absolute; right: var(--gutter); top: 8px; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 4px 8px; border-radius: 999px; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--bg); padding: 10px var(--gutter) 18px; display: grid; gap: 2px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; border-bottom: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(18px, 4vw, 48px) 0 clamp(36px, 6vw, 72px); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.grid-dots { position: absolute; inset: -20% 0; background-image: radial-gradient(rgba(15, 17, 14, .08) 1.2px, transparent 1.3px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); }
.traces { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(18, 184, 18, .22); stroke-width: 2; stroke-dasharray: 6 10; animation: dash 18s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -400; } }
.float { position: absolute; color: var(--green); opacity: .5; will-change: transform; }
.float--1 { width: 54px; height: 54px; left: 4%; top: 14%; animation: spin 6s linear infinite; }
.float--2 { width: 40px; height: 40px; right: 8%; top: 8%; color: var(--orange); opacity: .45; }
.float--3 { width: 34px; height: 34px; right: 46%; bottom: 8%; animation: spin 4s linear infinite reverse; }
.float--4 { width: 30px; height: 30px; left: 44%; top: 6%; color: var(--orange); opacity: .5; }
.float--5 { width: 46px; height: 46px; left: 10%; bottom: 10%; opacity: .3; }
/* Robinhood Chain leaves, shown once the token is live (main.js loads them only then) */
.hero__leaves { position: absolute; inset: 0; pointer-events: none; }
.hero__leaves[hidden] { display: none; }
.hero__leaf { position: absolute; border-radius: 6px; opacity: .2; will-change: transform; animation: leafDrift 7s ease-in-out infinite; }
@keyframes leafDrift { 50% { opacity: .32; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .hero__leaf { animation: none; } }
@keyframes spin { to { rotate: 360deg; } }

.hero__grid { display: grid; gap: 12px; align-items: center; }
.hero__copy { min-width: 0; text-align: center; order: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 18px; text-align: left; line-height: 1.35; }
.hero__copy .eyebrow { background: #0f110e; border: 1.5px solid #39ff14; color: #f5f7f3; box-shadow: 0 0 0 4px rgba(57, 255, 20, .14), 0 8px 24px rgba(15, 17, 14, .28); animation: eyebrowGlow 2.4s ease-in-out infinite; }
.hero__copy .eyebrow .dot { background: #ff9a3c; box-shadow: 0 0 0 0 rgba(255, 154, 60, .7); animation: eyebrowPing 1.6s ease-out infinite; }
@keyframes eyebrowGlow { 50% { box-shadow: 0 0 0 7px rgba(57, 255, 20, .22), 0 8px 24px rgba(15, 17, 14, .28); } }
@keyframes eyebrowPing { 70% { box-shadow: 0 0 0 7px rgba(255, 154, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 154, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__copy .eyebrow, .hero__copy .eyebrow .dot { animation: none; } }
.eyebrow__warn { color: #ff9a3c; font-weight: 800; letter-spacing: .04em; text-shadow: 0 0 10px rgba(255, 154, 60, .45); }
.eyebrow__tg { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 26px; padding: 0 1px 0 0; border-radius: 999px; background: #229ed9; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1; transition: background .15s, transform .15s; }
.eyebrow__tg .ic { width: 16px; height: 16px; }
.eyebrow__tg:hover, .eyebrow__tg:focus-visible { background: #1a8bc2; transform: translateY(-1px); }
.eyebrow__join { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #39ff14; font-weight: 800; letter-spacing: .06em; }
.eyebrow__join i { font-style: normal; display: inline-block; animation: joinNudge 1s ease-in-out infinite; }
@keyframes joinNudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .eyebrow__join i { animation: none; } }
.eyebrow__on { color: #39ff14; font-weight: 800; letter-spacing: .04em; text-shadow: 0 0 10px rgba(57, 255, 20, .45); }
.hero__copy .eyebrow.is-live .dot { background: #39ff14; animation-name: eyebrowPingLive; }
@keyframes eyebrowPingLive { 70% { box-shadow: 0 0 0 7px rgba(57, 255, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); } }
/* "Live on Pons · Robinhood Chain · paired with ETH", under the contract box */
.launched { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.launched[hidden] { display: none; }
.launched__item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
a.launched__item:hover { color: var(--green); }
.launched__logo { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; }
.launched__sep { opacity: .5; }
.eyebrow__links { flex: none; display: inline-flex; gap: 6px; }
.eyebrow__x { background: #fff; color: #0f110e; }
.eyebrow__x .ic { width: 13px; height: 13px; }
.eyebrow__x:hover, .eyebrow__x:focus-visible { background: #e4e7e2; }
.wordmark { font-family: "Unbounded", "Arial Black", sans-serif; font-weight: 900; font-size: clamp(56px, 16vw, 136px); line-height: .9; letter-spacing: -.045em; display: flex; justify-content: center; flex-wrap: wrap; column-gap: .12em; }
.wordmark__gpu { background: linear-gradient(180deg, #4bff3b 0%, #16c513 55%, #0a8f0a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(57, 255, 20, .35)); }
.wordmark__inu { color: var(--ink); }
.hero__tag { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3.4vw, 34px); line-height: 1.15; margin-top: 16px; letter-spacing: -.01em; }
.hero__tag em { font-style: normal; color: var(--green); }
.hero__nothing { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .42em; text-transform: uppercase; margin-top: 10px; color: var(--ink-2); padding-left: .42em; }
html[data-lang="zh"] .hero__nothing, html[data-lang="ja"] .hero__nothing, html[data-lang="ko"] .hero__nothing { letter-spacing: .3em; }
.hero__lede { font-size: clamp(15.5px, 1.5vw, 18px); color: var(--ink-2); margin: 18px auto 0; max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.hero__cta .btn { flex: 1 1 220px; max-width: 320px; }

.ca { display: flex; align-items: center; gap: 10px; max-width: 100%; margin: 20px auto 0; padding: 6px 6px 6px 14px; width: fit-content; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 999px; }
.ca__label { font: 800 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--muted); flex: none; }
.ca__value { font: 600 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca__value--text { white-space: normal; font-size: 12.5px; line-height: 1.35; }
.ca__copy { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; transition: background .2s; }
.ca__copy:hover { background: var(--green-ink); }
.ca__copy.is-done { background: var(--green); color: #062b06; }
.ca--wide { margin: 0; width: 100%; }
.ca--wide .ca__value { flex: 1; }

.hero__stage { position: relative; order: 2; width: min(100%, 460px); margin: 18px auto 0; padding-bottom: 64px; }
.hero__glow { position: absolute; inset: 8% 6% 20%; background: radial-gradient(circle, rgba(57, 255, 20, calc(.18 + var(--oc, 0) * .45)) 0%, transparent 65%); filter: blur(20px); transition: background .2s; }
.hero__mascot { position: relative; aspect-ratio: 1; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); will-change: transform; }
.hero__video { width: 100%; height: 100%; object-fit: cover; background: var(--bg); mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect; }
.hero__mascot.is-oc { animation: shake .09s linear infinite; }
@keyframes shake { 0% { translate: 0 0; } 25% { translate: calc(var(--oc,0) * 2px) calc(var(--oc,0) * -1px); } 50% { translate: calc(var(--oc,0) * -2px) calc(var(--oc,0) * 1px); } 75% { translate: calc(var(--oc,0) * 1px) calc(var(--oc,0) * 2px); } }
.sparks { position: absolute; inset: 0; pointer-events: none; }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: spark .7s var(--ease-out) forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.note { position: absolute; z-index: 2; font-family: var(--font-hand); font-weight: 700; color: var(--green-ink); line-height: 1.05; font-size: clamp(20px, 2.4vw, 30px); pointer-events: none; }
.note--1 { right: 0; top: 0; transform: rotate(8deg); text-align: right; }
.note--2 { display: none; left: 0; bottom: 6px; max-width: 150px; transform: rotate(-6deg); transform-origin: left bottom; color: var(--orange); }
.oc { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; box-shadow: var(--shadow); max-width: calc(100% - 8px); }
.oc__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: background .2s, transform .2s; }
.oc__btn:active, .oc__btn.is-on { background: var(--green); color: #062b06; transform: scale(.97); }
.oc__meter { display: flex; align-items: center; gap: 6px; font: 700 13px/1 ui-monospace, Menlo, monospace; white-space: nowrap; }
.oc__rpm { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.oc__unit { color: var(--muted); font-size: 11px; }
.oc__bar { width: 48px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.oc__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--oc, 0)); background: linear-gradient(90deg, var(--green), var(--neon), var(--orange)); }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; background: var(--ink); color: #fff; padding: 14px 0; border-block: 3px solid var(--neon); transform: rotate(-1.2deg) scale(1.03); margin-block: 8px; }
.ticker__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 38s linear infinite; font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 1.8vw, 18px); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.ticker__track i { width: 10px; height: 10px; background: var(--neon); border-radius: 2px; transform: rotate(45deg); flex: none; box-shadow: 0 0 10px var(--neon); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 10vw, 128px) 0; position: relative; }

/* Live stats */
.live { padding-top: clamp(56px, 8vw, 96px); }
.live__head { margin-bottom: 26px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.stat--hero { grid-column: 1 / -1; background: linear-gradient(135deg, #0f130e, #1a2419); color: #fff; border-color: #1f2a1d; position: relative; overflow: hidden; }
.stat--hero::after { content: ""; position: absolute; width: 240px; height: 240px; right: -60px; top: -80px; background: radial-gradient(circle, rgba(57,255,20,.35), transparent 65%); }
.stat__label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; }
.stat--hero .stat__label { color: #a8b3a4; }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); margin-top: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: color .4s; }
.stat--hero .stat__value { font-size: clamp(34px, 6vw, 56px); color: var(--neon); text-shadow: 0 0 24px rgba(57, 255, 20, .35); }
.stat__value.flash-up { color: var(--green); }
.stat__value.flash-down { color: var(--red); }
.stat__meta { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.stat--hero .stat__meta { color: #a8b3a4; }
.chg { font-weight: 800; }
.chg.up { color: var(--neon); } .chg.down { color: #ff7b7f; }

/* Why */
.why__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.why__card { position: relative; }
.why__card::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(ellipse, rgba(57,255,20,.25), transparent 65%); filter: blur(24px); }
.gpu-card { position: relative; width: 100%; will-change: transform; }
.tree { position: relative; margin-top: clamp(40px, 7vw, 80px); padding: clamp(22px, 4vw, 44px) clamp(14px, 3vw, 32px) clamp(18px, 3vw, 32px); background: radial-gradient(ellipse 60% 45% at 50% 0%, #effcea, transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow); }
.tree__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.tree__wires .w-base { fill: none; stroke: var(--line-2); stroke-width: 3; }
.tree__wires .w-flow { fill: none; stroke: var(--neon); stroke-width: 3; stroke-dasharray: 6 14; opacity: .45; animation: dash 2.6s linear infinite; transition: opacity .3s, stroke-width .3s; }
.tree__wires .w-flow.is-on { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 6px var(--neon)); animation-duration: .7s; }
.tree__wires .pulse { fill: #fff; stroke: var(--neon); stroke-width: 3; filter: drop-shadow(0 0 5px var(--neon)); }
.tree__wires .pulse.is-on { fill: var(--neon); }

/* The daddy */
.tree__root { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(44px, 7vw, 72px); }
.daddy { position: relative; width: clamp(150px, 22vw, 210px); aspect-ratio: 1; display: grid; place-items: center; }
.daddy__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--neon), transparent 30%, var(--green) 50%, transparent 80%, var(--neon)); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); animation: spin 5s linear infinite; }
.daddy__halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(57,255,20,.35), transparent 70%); animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .6; } }
.daddy__dog { position: relative; width: 86%; height: auto; filter: drop-shadow(0 12px 24px rgba(15, 40, 12, .25)); animation: daddy-bob 3.2s ease-in-out infinite; }
@keyframes daddy-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.daddy__crown { position: absolute; top: -2%; left: 50%; width: 22%; translate: -50% 0; rotate: -8deg; animation: crown 3.2s ease-in-out infinite; }
.daddy__crown path { fill: #ffcf3f; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
@keyframes crown { 50% { transform: translateY(-5px) rotate(4deg); } }
.daddy__plate { margin-top: -10px; position: relative; padding: 12px 26px 14px; border-radius: 22px; background: var(--ink); color: #fff; text-align: center; box-shadow: 0 0 0 6px var(--green-soft), var(--shadow-lg); }
.tree__root-t { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 4vw, 44px); line-height: 1; letter-spacing: -.02em; }
.tree__root-s { font-family: var(--font-hand); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); color: var(--neon); line-height: 1.1; margin-top: 4px; }
.tree__hint { margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* The kids */
.tree__kids { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; transition: border-color .3s, transform .35s var(--ease-out), background .3s, box-shadow .3s; min-width: 0; }
.kid:hover { border-color: var(--line-2); }
.kid__ic { width: clamp(58px, 7vw, 72px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; background: #f3f5f1; transition: background .3s, transform .4s var(--ease-back), box-shadow .3s; }
.kid__ic svg { width: 78%; height: 78%; overflow: visible; }
.kid__t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.kid__q { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 13px; color: var(--ink-2); line-height: 1.4; transition: max-height .4s var(--ease-out), opacity .3s; }
.kid.is-on { border-color: var(--green); background: linear-gradient(180deg, #f3fdf0, #fff); transform: translateY(-4px); box-shadow: 0 14px 28px -16px rgba(18,184,18,.8); }
.kid.is-on .kid__ic { background: #0f130e; transform: scale(1.08); box-shadow: 0 0 0 4px var(--green-soft), 0 0 24px rgba(57,255,20,.45); }
.kid.is-on .kid__q { max-height: 8em; opacity: 1; }
.kid.is-boot .kid__ic { animation: boot .5s var(--ease-out); }
@keyframes boot { 0% { filter: brightness(2.2) saturate(0); } 100% { filter: none; } }

/* Icon drawing */
.ico { --ink-c: var(--ink); }
.kid.is-on .ico { --ink-c: #e9f5e6; }
.ico * { transform-box: fill-box; transform-origin: center; }
.ico path, .ico rect, .ico circle { stroke: var(--ink-c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, fill .3s; }
.ico .f-soft { fill: var(--green-soft); }
.ico .f-white { fill: #fff; }
.kid.is-on .ico .f-soft, .kid.is-on .ico .f-white { fill: #1b2419; }
/* chat: typing dots */
.ico--chat .dot { fill: var(--green); stroke: none; animation: typing 1.2s ease-in-out infinite; }
.ico--chat .dot:nth-of-type(2) { animation-delay: .15s; } .ico--chat .dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); fill: var(--neon); } }
/* image: mountains draw in, sun pulses, brush paints */
.ico--img .mtn { fill: none; stroke: var(--green); stroke-dasharray: 70; stroke-dashoffset: 70; animation: draw 3s var(--ease-out) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 70; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -70; } }
.ico--img .sun { fill: var(--orange); stroke: none; animation: sun 3s ease-in-out infinite; }
@keyframes sun { 50% { transform: scale(1.3); } }
.ico--img .brush { animation: brush 1.5s ease-in-out infinite; transform-origin: 60px 44px; }
.ico--img .handle { stroke-width: 4; } .ico--img .tip { fill: var(--neon); stroke-width: 2; }
@keyframes brush { 50% { transform: rotate(-16deg) translateX(-4px); } }
/* agent: orbit loop, blinking eyes, antenna light */
.ico--agent .orbit { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 5 9; animation: spin 6s linear infinite; }
.ico--agent .eyes rect { fill: var(--ink-c); stroke: none; animation: blink 3.2s infinite; }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
.ico--agent .ant { fill: var(--neon); animation: ant 1s steps(2) infinite; }
@keyframes ant { 50% { fill: #ff5d5d; } }
.ico--agent .mouth { stroke-width: 3; }
/* car: wheels spin, radar pings, road moves, body bounces */
.ico--car .body { fill: var(--orange); }
.ico--car .glass { fill: #d8ecff; stroke-width: 2.5; }
.ico--car .car { animation: bounce .45s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-1.5px); } }
.ico--car .wheel circle { fill: var(--ink-c); }
.ico--car .wheel path { stroke: #fff; stroke-width: 2; }
.ico--car .wheel { animation: spin .6s linear infinite; }
.ico--car .road { stroke-dasharray: 8 8; animation: road .5s linear infinite; }
@keyframes road { to { stroke-dashoffset: 16; } }
.ico--car .radar { fill: none; stroke: var(--green); animation: ping 1.4s ease-out infinite; }
.ico--car .r2 { animation-delay: .2s; }
@keyframes ping { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* dna: helix scrolls forever */
.ico--dna .helix { animation: helix 2.4s linear infinite; }
@keyframes helix { from { transform: translateY(0); } to { transform: translateY(-64px); } }
.ico--dna .strand { fill: none; stroke-width: 3.5; }
.ico--dna .strand.b { stroke: var(--green); }
.ico--dna .rung { stroke-width: 3; }
.ico--dna .rung.g { stroke: var(--neon); } .ico--dna .rung.o { stroke: var(--orange); }
/* robot dog: wagging tail, head tilt, confused "?" */
.ico--rdog .tail { stroke-width: 4; transform-origin: 14px 34px; transform-box: view-box; animation: wag .35s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
.ico--rdog .legs { stroke-width: 4; }
.ico--rdog .head { animation: tilt 2.2s ease-in-out infinite; transform-origin: 44px 34px; transform-box: view-box; }
@keyframes tilt { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } }
.ico--rdog .ear { fill: #fff; }
.ico--rdog .visor { fill: #c6f24e; stroke-width: 2; }
.ico--rdog .q { font: 900 16px/1 var(--font-display); fill: var(--orange); animation: q 2.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes q { 0%, 55% { opacity: 0; transform: translateY(4px); } 70%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kid:not(.is-on) .ico--rdog .q { visibility: visible; }
/* Pause icon animations while the tree is off-screen */
.tree:not(.is-live) .ico *, .tree:not(.is-live) .daddy * { animation-play-state: paused !important; }

/* How */
.how { background: linear-gradient(180deg, transparent, #f3f6f1 30%, #f3f6f1 70%, transparent); }
.steps { display: grid; gap: 14px; margin-top: 30px; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step__n { position: absolute; right: 16px; top: 8px; font-family: var(--font-display); font-weight: 900; font-size: 56px; color: #f0f2ee; line-height: 1; }
.step__ic { position: relative; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); }
.step p { position: relative; color: var(--ink-2); font-size: 15.5px; }

.flow { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); }
.flow__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 22px; }
.flow__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-right: auto; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #eef0ec; }
.seg__b { padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .2s, color .2s; }
.seg__b.is-on { background: var(--ink); color: #fff; }
.range { display: grid; gap: 6px; flex: 1 1 240px; min-width: 0; }
.range__lbl { font-size: 13.5px; color: var(--ink-2); }
.range__lbl b { font-variant-numeric: tabular-nums; color: var(--ink); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green) var(--fill, 10%), var(--line) var(--fill, 10%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green) var(--fill, 10%), var(--line) var(--fill, 10%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--green); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--green); }
.flow__viz { display: grid; gap: 10px; justify-items: center; }
.node { width: 100%; max-width: 320px; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; text-align: center; min-width: 0; }
.node__t { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }
.node__v { font-family: var(--font-display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.node__s { font-size: 12.5px; color: var(--ink-2); }
.node--tax { border-color: var(--ink); }
.node--vault { border-color: var(--green); background: var(--green-soft); }
.node--growth { border-color: var(--orange); background: var(--orange-soft); }
.flow__outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 660px; }
.flow__outs .node { max-width: none; }
.pipe { width: 6px; height: 34px; border-radius: 6px; background: var(--line); overflow: hidden; position: relative; }
.pipe i { position: absolute; inset: -40px 0 0; background: repeating-linear-gradient(180deg, var(--neon) 0 8px, transparent 8px 20px); animation: pipe var(--pipe-speed, 1.2s) linear infinite; }
@keyframes pipe { to { transform: translateY(40px); } }

/* Tokenomics */
.toke__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
.donut { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 20px 0 16px; }
.donut__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--a), var(--orange) var(--a) 100%); -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%); mask: radial-gradient(circle, transparent 57%, #000 58%); animation: spin 30s linear infinite; }
.donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__c b { font-family: var(--font-display); font-size: clamp(40px, 8vw, 56px); line-height: 1; }
.donut__c span { font-size: 13px; color: var(--muted); font-weight: 600; }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sw--g { background: var(--green); } .sw--o { background: var(--orange); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; transition: transform .3s var(--ease-out), border-color .3s; }
.tile:hover { transform: translateY(-3px); border-color: var(--green); }
.tile .ic { width: 30px; height: 30px; color: var(--green); }
.tile__l { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tile__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.2; overflow-wrap: anywhere; }

/* Buy */
.buysteps { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 28px; counter-reset: b; }
.bstep { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: var(--shadow); counter-increment: b; min-width: 0; }
.bstep::before { content: counter(b); position: absolute; right: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 14px/1 var(--font-display); }
.bstep .ic { width: 34px; height: 34px; color: var(--green); }
.bstep p { color: var(--ink-2); font-size: 15px; }
.buy__bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.buy__links { display: flex; flex-wrap: wrap; gap: 10px; }
.buy__links .btn { flex: 1 1 180px; }

/* Memes */
.meme-grid { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: minmax(0, 1fr); }
.meme { min-width: 0; display: flex; }
.meme__open { display: flex; flex-direction: column; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease-out), box-shadow .35s; }
.meme__open:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.meme__cap { flex: 1; padding: 16px 18px 14px; font-weight: 700; font-size: 16px; line-height: 1.4; }
.meme__open img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f4f4f2; }
.brain { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, 1fr); }
.brain p { display: flex; align-items: center; padding: 10px 14px; font-weight: 800; font-family: var(--font-display); font-size: clamp(14px, 1.6vw, 17px); line-height: 1.2; border-bottom: 1px solid var(--line); }
.brain p:nth-of-type(4) { border-bottom: 0; background: #0c1a0c; color: var(--neon); }
.brain img { grid-column: 2; grid-row: 1 / 5; width: 100%; height: 100%; aspect-ratio: 1 / 2; object-fit: cover; }

/* Wire */
.wire__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.tabs { display: inline-flex; padding: 4px; background: #eef0ec; border-radius: 999px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .2s, color .2s; }
.tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.wire__panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); overflow: hidden; }
.wire__scroll { max-height: min(640px, 72vh); overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.wire__list { list-style: none; margin: 0; padding: 0; }
.wi { border-bottom: 1px solid var(--line); animation: wi-in .5s var(--ease-out) both; }
@keyframes wi-in { from { opacity: 0; transform: translateY(10px); } }
.wi a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 18px; transition: background .2s; }
.wi a:hover { background: #f6f8f4; }
.wi__src { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 13px/1 var(--font-display); color: #fff; background: var(--ink); text-transform: uppercase; }
.wi__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.wi__meta .lang-badge { padding: 0 6px; border-radius: 6px; background: #eef0ec; font-size: 11px; }
.wi__meta .is-new { color: var(--green-ink); }
.wi__t { font-weight: 700; font-size: 15.5px; line-height: 1.4; margin-top: 2px; }
.wire__sentinel { height: 1px; }
.wire__status { padding: 18px; text-align: center; font-size: 14px; color: var(--muted); }
.wire__status:empty { display: none; }
.wire__new { position: absolute; z-index: 2; top: 12px; left: 50%; translate: -50% 0; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: var(--shadow-lg); animation: wi-in .4s var(--ease-out); }
.wire__x { padding: 18px; min-height: 280px; max-height: min(720px, 80vh); overflow-y: auto; overscroll-behavior: contain; }
.xcard { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, #f3fdf0, #fff); }
.xcard__av { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 2px solid var(--neon); flex: none; }
.xcard__who { min-width: 0; flex: 1; }
.xcard__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; }
.xcard__handle { color: var(--muted); font-size: 14px; }
.xcard__btn { flex: none; }
.xposts { display: grid; gap: 14px; margin-top: 16px; justify-items: center; }
.xposts .twitter-tweet-rendered { margin: 0 !important; }
.xpost { width: 100%; max-width: 550px; margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.xpost__head { font-size: 14.5px; } .xpost__head span { color: var(--muted); }
.xpost__text { margin-top: 6px; white-space: pre-line; font-size: 15.5px; line-height: 1.5; }
.xpost__date { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--green-ink); font-weight: 600; }
.wire__x-cta { display: grid; place-items: center; gap: 14px; text-align: center; padding: 40px 10px; color: var(--ink-2); }
.skel { height: 72px; margin: 12px 18px; border-radius: 12px; background: linear-gradient(90deg, #f1f3ef 25%, #e7ebe4 50%, #f1f3ef 75%); background-size: 200% 100%; animation: skel 1.2s infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* Join */
.join__box { display: grid; gap: 24px; align-items: center; justify-items: center; text-align: center; padding-block: clamp(32px, 6vw, 64px); background: radial-gradient(ellipse at 30% 0%, #eafbe6, transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-lg); overflow: hidden; }
.join__dog { width: clamp(150px, 26vw, 240px); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-3deg); } }
.join__copy .lede { margin-inline: auto; }
.join__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.foot__social { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.sbtn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--surface); transition: background .2s, color .2s, transform .2s; }
.sbtn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* Footer */
.foot { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot__inner { display: grid; gap: 14px; }
.foot__brand { display: flex; align-items: center; gap: 10px; }
.foot__motto { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.foot__legal { font-size: 12.5px; color: var(--muted); max-width: 90ch; line-height: 1.55; }
.foot__copy { font-size: 12.5px; color: var(--muted); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 64px 12px 90px; background: rgba(12, 14, 11, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[hidden] { display: none; }
.lightbox__stage { width: min(900px, 100%); max-height: 100%; overflow: auto; border-radius: var(--radius); background: var(--surface); animation: lb .35s var(--ease-back); }
@keyframes lb { from { transform: scale(.92); opacity: 0; } }
.lightbox__stage .meme__cap { font-size: clamp(16px, 2.2vw, 20px); }
.lightbox__stage img { width: 100%; }
.lightbox__stage .brain img { aspect-ratio: auto; }
.lightbox__x { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.lightbox__nav { position: absolute; bottom: 20px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.lightbox__prev { left: 16px; } .lightbox__next { right: 16px; }
.lightbox__share { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 95; translate: -50% 20px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--ease-out); max-width: calc(100% - 32px); text-align: center; }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------- Reveal on scroll (JS only) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Intro (first visit) ---------- */
.intro { display: none; }
.intro-on body { overflow: hidden; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 100; background: #fbfbfb; overflow: hidden; }
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(251,251,251,.94) 0%, rgba(251,251,251,.75) 45%, rgba(251,251,251,0) 80%); opacity: 0; transition: opacity .6s ease; }
.intro.is-text .intro__veil { opacity: 1; }
.intro__text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 16px; pointer-events: none; }
.intro__kicker, .intro__title, .intro__sub { font-family: "Unbounded", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 900; line-height: .95; }
.intro__kicker { font-size: clamp(22px, 5vw, 54px); color: var(--ink); letter-spacing: -.02em; }
.intro__title { font-size: clamp(64px, 17vw, 210px); letter-spacing: -.05em; margin: .08em 0; background: linear-gradient(180deg, #52ff42, #16c513 60%, #0a8f0a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(57,255,20,.45)); }
.intro__sub { font-size: clamp(22px, 5.4vw, 60px); color: var(--ink); letter-spacing: -.02em; }
.intro__text .ch { display: inline-block; opacity: 0; will-change: transform, opacity; }
.intro__text .ch.go { animation: fly .9s var(--ease-out) forwards; }
.intro__title .ch { background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes fly { 0% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s)); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
.intro.is-slam .intro__text { animation: slam .5s var(--ease-out); }
@keyframes slam { 0% { transform: scale(1.08); } 30% { transform: scale(.98) translate(3px, -2px); } 60% { transform: translate(-3px, 2px); } 100% { transform: none; } }
.intro.is-out { animation: intro-out .7s var(--ease-out) forwards; }
@keyframes intro-out { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
.intro__skip { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 10px 18px; border-radius: 999px; background: rgba(15,17,14,.85); color: #fff; font-weight: 700; font-size: 14px; }


/* ---------- GPUnks section (home) ---------- */
.gpunks { background: linear-gradient(180deg, transparent, #f3f6f1 25%, #f3f6f1 75%, transparent); }
.gpunks__grid { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; }
.gpunks__facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gpunks__facts li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); }
.gpunks__facts b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.gpunks__facts span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gpunks__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gpunks__cta .btn { flex: 1 1 210px; max-width: 330px; }
.gpunks__video { position: relative; }
.gpunks__el { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 26px; background: #0c0f0c; box-shadow: var(--shadow-lg); cursor: pointer; }
.gpunks__sound { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(15,17,14,.82); color: #fff; font-weight: 700; font-size: 13.5px; }
.gpunks__sound:hover { background: var(--ink); }
.note--3 { right: -4px; top: -30px; left: auto; transform: rotate(7deg); display: block; }
@media (min-width: 900px) { .gpunks__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }

/* ---------- Breakpoints ---------- */
@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree__kids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buysteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: 1.05fr 1fr; }
  .toke__grid { grid-template-columns: .9fr 1.1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .buy__links .btn { flex: 0 1 auto; }
  .join__box { grid-template-columns: auto 1fr; text-align: left; justify-items: start; padding-inline: clamp(32px, 5vw, 64px); }
  .join__copy .lede { margin-inline: 0; }
  .join__links { justify-content: flex-start; }
  .flow__viz { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1.6fr); align-items: center; }
  .pipe { width: 100%; height: 6px; }
  .pipe i { inset: 0 0 0 -40px; background: repeating-linear-gradient(90deg, var(--neon) 0 8px, transparent 8px 20px); animation-name: pipe-x; }
  @keyframes pipe-x { to { transform: translateX(40px); } }
  .flow__outs { grid-template-columns: minmax(0, 1fr); }
  .foot__inner { grid-template-columns: auto 1fr; align-items: center; }
  .foot__motto { text-align: right; }
  .foot__legal, .foot__copy { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  .mobile-menu { display: none !important; }
  .nav__buy { display: inline-flex; }
  .vram__label { display: block; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; }
  .hero__copy { order: 1; text-align: left; }
  .wordmark { justify-content: flex-start; flex-wrap: nowrap; font-size: min(8.4vw, 124px); }
  .hero__lede { margin-inline: 0; }
  .hero__cta { justify-content: flex-start; }
  .ca, .launched { margin-inline: 0; }
  .hero__stage { order: 2; width: 100%; margin-top: 0; }
  .note--1 { right: -4%; }
  .stats { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); }
  .stat--hero { grid-column: auto; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
  .tree__kids { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .meme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buysteps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* the doodle only fits beside the overclock meter once the grid hits its max width */
@media (min-width: 1280px) {
  .note--2 { left: -9%; display: block; }
}
@media (max-width: 380px) {
  .brand__word { font-size: 17px; }
  .brand img { width: 34px; height: 34px; }
  .lang__btn { padding: 0 8px 0 10px; font-size: 12.5px; }
  .oc__bar { display: none; }
  .note { display: none; }
}
@media (hover: none) { .meme__open:hover, .step:hover, .tile:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- GPUnks mint progress (assets/js/mint.js) ---------- */
.mintbar { margin: 22px 0 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-width: 560px; }
.mintbar[hidden] { display: none; }
.mintbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mintbar__label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.mintbar__pct { font-family: var(--font-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.mintbar__track { height: 12px; border-radius: 999px; background: #eef1ec; overflow: hidden; }
.mintbar__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--neon)); transition: width .8s var(--ease-out); }
.mintbar__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.mintbar__foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mintbar.is-done .mintbar__label { color: var(--orange); }
.mintbar.is-done .mintbar__track i { background: linear-gradient(90deg, var(--orange), #ffb45e); }
@media (prefers-reduced-motion: reduce) { .mintbar__track i { transition: none; } }

/* ---------- "GPUnks is LIVE" marquee (assets/js/nftbar.js) ----------
   Half again as tall as the green notice bar, and it scrolls the other way.
   overflow-x: clip hides the track sideways WITHOUT clipping downwards, so a hovered
   pup can grow past the bar's bottom edge over the page, while nothing below moves
   (transform never affects layout). Browsers without overflow: clip fall back to a
   plain hidden overflow: the hover is then cut at the bar edge, nothing else breaks. */
.nftbar { position: relative; z-index: 70; display: flex; align-items: center; height: 58px; overflow: hidden; text-decoration: none; background: #0c0f0c; border-bottom: 2px solid var(--green-ink); box-shadow: 0 -1px 0 rgba(57, 255, 20, .25) inset; cursor: pointer; }
@supports (overflow: clip) { .nftbar { overflow-x: clip; overflow-y: visible; } }
.nftbar[hidden] { display: none; }
/* "$GPUINU is LIVE" banner across the top (tokenbar.js): dark, still, pixel title + fireworks,
   Robinhood Chain leaves as polka dots, big Pons logo, a Fomo button. Hidden until a contract is set. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tokenbar { position: relative; z-index: 70; overflow: hidden; color: #f5f7f3;
  background: radial-gradient(120% 140% at 50% 0%, #152015 0%, #0a0d0a 55%, #060806 100%);
  border-bottom: 2px solid var(--green-ink); box-shadow: 0 -1px 0 rgba(57, 255, 20, .25) inset; }
.tokenbar[hidden] { display: none; }
.tokenbar__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; image-rendering: pixelated; }
.tokenbar__dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tokenbar__leaf { position: absolute; border-radius: 5px; opacity: .22; transform: translate(-50%, -50%); animation: leafTwinkle 4.8s ease-in-out infinite; }
@keyframes leafTwinkle { 50% { opacity: .5; } }
.tokenbar { display: flex; align-items: center; height: 84px; }
.tokenbar__track { position: relative; z-index: 2; display: flex; align-items: center; width: max-content; animation: nftbar-scroll 40s linear infinite; }
.tokenbar:hover .tokenbar__track, .tokenbar:focus-within .tokenbar__track { animation-play-state: paused; }
.tokenbar__group { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.tokenbar__spark { width: 8px; height: 8px; background: #39ff14; box-shadow: 0 0 10px #39ff14; transform: rotate(45deg); flex: none; }
.tokenbar__live { display: block; line-height: 0; text-decoration: none; filter: drop-shadow(0 0 10px rgba(204, 255, 0, .3)) drop-shadow(0 0 16px rgba(57, 255, 20, .3)); }
.tokenbar__title { display: block; height: 44px; width: auto; }
.tokenbar__big { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.tokenbar__pons { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 4px 8px 4px 4px; border-radius: 14px; transition: background .15s; }
a.tokenbar__pons:hover, a.tokenbar__pons:focus-visible { background: rgba(255, 255, 255, .06); }
.tokenbar__label { display: flex; flex-direction: column; line-height: 1.1; }
.tokenbar__label small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa39a; }
.tokenbar__label b { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
/* the Fomo button: impossible to miss */
.tokenbar__fomo { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; text-decoration: none; color: #cfd1ea; font-weight: 800; font-size: 16px;
  background: linear-gradient(180deg, #14123a, #060510); border: 2px solid #39ff14;
  box-shadow: 0 0 0 4px rgba(57, 255, 20, .18), 0 0 26px rgba(57, 255, 20, .45), 0 6px 16px rgba(0, 0, 0, .35);
  animation: fomoPulse 2s ease-in-out infinite; transition: transform .15s; white-space: nowrap; }
.tokenbar__fomo .tokenbar__big { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(57, 255, 20, .5); }
.tokenbar__fomo-word { height: 30px; width: auto; display: block; }
.tokenbar__fomo b { font-weight: 900; }
.tokenbar__fomo:hover, .tokenbar__fomo:focus-visible { transform: translateY(-2px) scale(1.03); }
@keyframes fomoPulse { 50% { box-shadow: 0 0 0 7px rgba(57, 255, 20, .1), 0 0 38px rgba(57, 255, 20, .65), 0 6px 16px rgba(0, 0, 0, .35); } }
@media (max-width: 640px) {
  .tokenbar { height: 64px; }
  .tokenbar__group { gap: 18px; padding-right: 18px; }
  .tokenbar__title { height: 28px; }
  .tokenbar__big { width: 36px; height: 36px; }
  .tokenbar__label b { font-size: 18px; }
  .tokenbar__fomo { font-size: 14px; padding-right: 14px; }
  .tokenbar__fomo .tokenbar__big { width: 32px; height: 32px; }
  .tokenbar__fomo-word { height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tokenbar__leaf, .tokenbar__fomo, .tokenbar__track { animation: none; } }
/* inside the collection section, between the kicker and the headline: a rounded card, not a full-width strip */
.gpunks__copy { min-width: 0; }                       /* the marquee's long track must not widen the column */
.nftbar--inline { width: 100%; max-width: 100%; min-width: 0; margin: 6px 0 20px; border: 1px solid #1f2a1f; border-bottom: 2px solid var(--green-ink); border-radius: 14px; }
.nftbar__track { display: flex; align-items: center; gap: 14px; width: max-content; padding-inline: 7px; animation: nftbar-scroll 200s linear infinite; }
@keyframes nftbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nftbar:hover .nftbar__track, .nftbar:focus-visible .nftbar__track { animation-play-state: paused; }
.nftbar__pup { position: relative; flex: none; width: 40px; height: 40px; border-radius: 8px; background-image: url("../img/gpunks-live.png?v=1"); background-size: 480px 320px; background-repeat: no-repeat; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; transform-origin: 50% 0; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
@media (hover: hover) {
  .nftbar__pup:hover { transform: scale(1.5); z-index: 2; box-shadow: 0 0 0 2px #39ff14, 0 10px 24px -6px rgba(0, 0, 0, .55); }
}
.nftbar__logo { flex: none; display: block; margin-inline: 10px; }
@media (max-width: 560px) { .nftbar__logo { height: 24px; width: auto; margin-inline: 6px; } }   /* 3/4 size: the wordmark would otherwise fill a phone */
.nftbar__dot { animation: nftbar-blink 1.2s steps(2, jump-none) infinite; }
@keyframes nftbar-blink { 50% { opacity: .15; } }
.nftbar:focus-visible { outline: 3px solid #39ff14; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .nftbar__track { animation: none; }
  .nftbar__dot { animation: none; }
  .nftbar__pup { transition: none; }
}

/* =========================================================
   Multichain (2026-09-24): chain cards, products, official contracts,
   chain pages and the language hint. Chain accents are accents only:
   the cards stay on the site's white surface, green and orange.
   ========================================================= */
.chain-card [hidden], .contracts [hidden], .product [hidden], .chainhero [hidden] { display: none !important; }

/* the language hint (i18n.js → showHint) */
.lang-hint { position: absolute; top: calc(100% + 12px); right: -4px; z-index: 70; width: max-content; max-width: 220px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.35; box-shadow: var(--shadow-lg); opacity: 0; translate: 0 -6px; transition: opacity .35s, translate .35s var(--ease-out); cursor: pointer; }
.lang-hint b { display: block; font-weight: 800; }
.lang-hint span { display: block; font-size: 12px; opacity: .72; }
.lang-hint::before { content: ""; position: absolute; top: -5px; right: 22px; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.lang-hint.is-on { opacity: 1; translate: 0 0; }
.lang:has(.lang-hint.is-on) .lang__btn { box-shadow: 0 0 0 3px var(--neon); animation: langPing 1.4s ease-in-out 3; }
@keyframes langPing { 50% { box-shadow: 0 0 0 7px rgba(57, 255, 20, .25); } }
@media (prefers-reduced-motion: reduce) { .lang-hint { transition: none; } .lang:has(.lang-hint.is-on) .lang__btn { animation: none; } }

/* chains section (home) */
.chains { padding-top: clamp(40px, 6vw, 72px); }
.chains__head { text-align: center; }
.chains__head .lede { margin-inline: auto; }
.chains__grid { display: grid; gap: 18px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.chain-card { --cc: var(--green); --cc-soft: var(--green-soft); position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 26px 22px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; }
.chain-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cc); }
.chain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.chain-card--robinhood { --cc: #b8f73a; --cc-soft: #f3fde0; }
.chain-card--bnb { --cc: #f0b90b; --cc-soft: #fff7dc; }
.chain-card--solana { --cc: linear-gradient(90deg, #9945ff, #14f195); --cc-soft: #f3edff; }
.chain-card__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chain-card__logo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--cc-soft); }
.chain-card__logo img { width: 34px; height: 34px; object-fit: contain; }
.chain-card__id { min-width: 0; }
.chain-card__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; color: var(--ink); text-decoration: none; }
.chain-card__name:hover { color: var(--green-ink); }
.chain-card__via { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.chain-card__via img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.chip { flex: none; align-self: flex-start; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: #f1f3ef; color: var(--muted); }
.chip--live { background: var(--green-soft); color: var(--green-ink); }
.chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(18, 184, 18, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18, 184, 18, 0); } }
.chain-card__ca { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 12px; border: 1px dashed var(--line-2); border-radius: 999px; }
.chain-card__ca .ca__value { flex: 1; }
.chain-card__ca .ca__copy { padding: 7px 11px; font-size: 12.5px; }
.chain-card__note { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.chain-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.chain-card__actions .btn { flex: 1 1 130px; }
@media (prefers-reduced-motion: reduce) { .chip--live::before { animation: none; } .chain-card, .product { transition: none; } }

/* products (home) */
.products__head { text-align: center; }
.products__head .lede { margin-inline: auto; }
.products__cat { display: flex; align-items: center; gap: 10px; margin: 34px 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.products__cat::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.products__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.product { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: inherit; text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s; }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: #0b0d0b; image-rendering: pixelated; }
.product__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.product__meta .chip { margin-left: 0; }
.chain-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: #f3f5f1; font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.chain-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted)); }
.chain-badge img { width: 16px; height: 16px; object-fit: contain; }
.product__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.product__desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.product__cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--green-ink); }
.product:hover .product__cta .ic { transform: translateX(3px); }
.product__cta .ic { transition: transform .25s var(--ease-out); }

/* official contracts (footer, every page) */
.contracts { width: 100%; max-width: 780px; margin: 4px 0 22px; padding: 18px 18px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: left; }
.contracts__title { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.contracts__note { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.contracts__row { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.contracts__chain { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; text-decoration: none; }
.contracts__chain img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.contracts__ca { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.contracts__soon { font-size: 13px; color: var(--muted); }
.contracts__row .ca__copy { padding: 6px 10px; font-size: 12px; }
@media (max-width: 560px) {
  .contracts__row { grid-template-columns: minmax(0, 1fr) auto; }
  .contracts__chain { grid-column: 1 / -1; }
}

/* chain pages */
.chainhero .eyebrow img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.chainhero .eyebrow b { color: var(--neon); font-weight: 800; }
.soonline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--orange-soft); border: 1px solid #f7d3ac; font-size: 13px; font-weight: 600; color: #7a4308; }
.soonline img { width: 18px; height: 18px; object-fit: contain; border-radius: 5px; }
.chartsec__head { text-align: center; }
.chartsec__head .lede { margin-inline: auto; }
.chartsec .chart { margin-top: 28px; }
.others__grid { display: grid; gap: 18px; margin-top: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.others__all { display: flex; justify-content: center; margin-top: 22px; }
@media (min-width: 1000px) {
  .chainhero .hero__copy .eyebrow, .chainhero .soonline, .chainhero .launched { margin-left: 0; margin-right: auto; }
}
.hub-eyebrow { text-decoration: none; color: var(--ink-2); }
.hub-eyebrow:hover { color: var(--ink); border-color: var(--line-2); }
.hub-eyebrow__logos { display: inline-flex; flex: none; }
.hub-eyebrow__logos img { width: 20px; height: 20px; padding: 2px; object-fit: contain; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--surface), 0 1px 3px rgba(0, 0, 0, .12); }
.hub-eyebrow__logos img + img { margin-left: -6px; }
/* tablets: two cards a row, and a lone last card spans the row instead of sitting half-empty */
@media (min-width: 620px) and (max-width: 979px) {
  .chains__grid { grid-template-columns: 1fr 1fr; }
  .chains__grid > .chain-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- "TrenchPALS is LIVE" marquee on /solana. Counterpart of .nftbar, in Solana's
   purple-to-green. Hidden until config.js -> links.trenchMint is filled in. ---- */
.trenchbar { position: relative; z-index: 70; display: flex; align-items: center; width: 100%; min-width: 0; height: 58px; margin: 6px 0 22px; overflow: hidden; text-decoration: none; background: #0b0d12; border: 1px solid #2a2340; border-bottom: 2px solid #9945FF; border-radius: 14px; box-shadow: 0 -1px 0 rgba(20, 241, 149, .25) inset; cursor: pointer; }
@supports (overflow: clip) { .trenchbar { overflow-x: clip; overflow-y: visible; } }
.trenchbar[hidden] { display: none; }
.trenchbar__track { display: flex; align-items: center; gap: 14px; width: max-content; padding-inline: 7px; text-decoration: none; animation: trenchbar-scroll 200s linear infinite; }
.trenchbar:hover .trenchbar__track, .trenchbar:focus-visible .trenchbar__track { animation-play-state: paused; }
.trenchbar__pal { position: relative; flex: none; width: 40px; height: 40px; border-radius: 8px; background-image: url("../img/trenchpals-roll.png?v=2"); background-size: 480px 320px; background-repeat: no-repeat; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; transform-origin: 50% 0; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
@media (hover: hover) { .trenchbar__pal:hover { transform: scale(1.5); z-index: 2; box-shadow: 0 0 0 2px #14F195, 0 10px 24px -6px rgba(0, 0, 0, .55); } }
.trenchbar__logo { flex: none; display: block; margin-inline: 10px; }
.trenchbar:focus-visible { outline: 3px solid #14F195; outline-offset: -3px; }
@media (max-width: 560px) { .trenchbar { height: 48px; } .trenchbar__logo { height: 24px; width: auto; margin-inline: 6px; } }
@keyframes trenchbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trenchbar__track { animation: none; } }

/* ---- "$GPUINU is about to go live" top banner on /solana. Pre-launch counterpart of
   .tokenbar; flips to the live styling once chains.solana.contract is set. ---- */
.solbar { position: relative; z-index: 70; display: flex; align-items: center; height: 72px; overflow: hidden; color: #f2f4f8; background: linear-gradient(90deg, #120a24 0%, #0b0d12 45%, #08160f 100%); border-bottom: 2px solid #9945FF; }
.solbar[hidden] { display: none; }
.solbar--live { border-bottom-color: #14F195; }
.solbar__track { display: flex; align-items: center; gap: 26px; width: max-content; padding-inline: 14px; text-decoration: none; animation: solbar-scroll 44s linear infinite; }
.solbar:hover .solbar__track { animation-play-state: paused; }
.solbar__title { flex: none; display: block; }
.solbar__mark { flex: none; display: block; width: 34px; height: 34px; border-radius: 9px; opacity: .92; }
.solbar--live .solbar__track { cursor: pointer; }
.solbar:focus-within { outline: 3px solid #14F195; outline-offset: -3px; }
@media (max-width: 560px) { .solbar { height: 56px; } .solbar__title { height: 26px; width: auto; } .solbar__mark { width: 24px; height: 24px; } }
@keyframes solbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .solbar__track { animation: none; } }