/* Unics landing. Sections in page order; the phone screens (.a-*) are the app,
   drawn at the phone's own scale (1em = 4.2% of the phone's width). */

/* ============================================================ hero */
.hero { position: relative; padding: calc(var(--nav-h) + 56px) 0 0; overflow: hidden; isolation: isolate; }
.hero-sky {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 46% at 14% 18%, #d9efff 0%, rgba(217, 239, 255, 0) 70%),
    radial-gradient(52% 44% at 88% 26%, #e3e8ff 0%, rgba(227, 232, 255, 0) 70%),
    radial-gradient(70% 50% at 50% 92%, #d6eeff 0%, rgba(214, 238, 255, 0) 70%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 46%, #f3f9ff 100%);
}
.wheel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.trinkets { position: absolute; left: 0; top: 0; width: 100%; height: min(100vh, 980px); pointer-events: none; }
.trinkets.back { z-index: -1; filter: blur(4px); opacity: 0.7; }
.trinkets.front { z-index: 5; filter: drop-shadow(0 20px 24px rgba(46, 123, 196, 0.26)); }
.hero:not(.has-gl) .trinkets { display: none; }
.hero-in { display: grid; justify-items: center; text-align: center; }
.hero-copy { max-width: 920px; display: grid; justify-items: center; }
.hero-copy .h1 { margin: 22px 0 24px; }
.hero-copy .lede { max-width: 36em; margin: 0 auto; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 26px; }
.curves-mini { font-size: 13px; color: var(--ink-3); }

.hero-stage { position: relative; width: 100%; height: clamp(560px, 48vw, 700px); margin-top: clamp(40px, 5vw, 72px); --mw: min(940px, 68vw); }
.phones { position: absolute; inset: 0; --hp: 0; text-align: left; }
.phones .phone { position: absolute; left: 50%; top: 0; transition: transform 1.2s var(--ease-out); }
.p-m { --pw: clamp(210px, 16.5vw, 250px); z-index: 4; top: 120px; transform: translate3d(calc(var(--mw) / 2 - 34px + var(--hp) * 50px + var(--mx, 0) * 12px), calc(var(--my, 0) * 8px + var(--hp) * -50px), 0) rotate(3deg); }
.p-l { --pw: clamp(216px, 18vw, 262px); z-index: 2; transform: translate3d(calc(-50% - clamp(230px, 22vw, 330px) - var(--hp) * 60px + var(--mx, 0) * 6px), calc(64px + var(--hp) * -10px), 0) rotate(-4deg); }
.p-r { --pw: clamp(180px, 14vw, 210px); z-index: 4; top: 200px; transform: translate3d(calc(-100% - var(--mw) / 2 + 34px - var(--hp) * 50px + var(--mx, 0) * 8px), calc(var(--hp) * -20px), 0) rotate(-4deg); }
.p-l { display: none; }
.hero:not(.is-ready) .phones .phone { opacity: 0; }
.hero.is-ready .phones .phone { animation: phoneIn 1.4s var(--ease-out) both; }
.hero.is-ready .p-l { animation-delay: 0.16s; }
.hero.is-ready .p-r { animation-delay: 0.28s; }
@keyframes phoneIn { from { opacity: 0; translate: 0 90px; } to { opacity: 1; translate: 0 0; } }

.stations { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.st {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--hair), 0 16px 34px -18px rgba(13, 40, 80, 0.4);
  opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero.is-ready .st { opacity: 1; transform: none; }
.st-i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--deep); transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.5s var(--ease); flex: none; }
.st-i svg { width: 18px; height: 18px; }
.st-t { display: grid; line-height: 1.15; text-align: left; }
.st-t b { font-size: 14px; font-weight: 650; }
.st-t i { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.st.is-hit .st-i { background: var(--accent); color: var(--ink); transform: scale(1.12); }
/* the open MacBook */
.mac { position: absolute; left: 50%; top: 0; width: var(--mw); z-index: 2; transform: translate3d(-50%, calc(var(--hp) * -26px), 0); transition: transform 1.2s var(--ease-out); }
.hero:not(.is-ready) .mac { opacity: 0; }
.hero.is-ready .mac { animation: phoneIn 1.4s var(--ease-out) both; }
.mac-lid { position: relative; padding: calc(var(--mw) * 0.016) calc(var(--mw) * 0.016) calc(var(--mw) * 0.026); border-radius: calc(var(--mw) * 0.024) calc(var(--mw) * 0.024) calc(var(--mw) * 0.007) calc(var(--mw) * 0.007); background: #0b0d12;
  box-shadow: 0 0 0 calc(var(--mw) * 0.0022) #c7ced8, 0 0 0 calc(var(--mw) * 0.0045) #eef1f5, 0 50px 90px -50px rgba(12, 40, 80, 0.55), 0 20px 40px -24px rgba(12, 40, 80, 0.35); }
.mac-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--mw) * 0.006); background: #e8f3ff; }
.mac-screen > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mac-notch { position: absolute; left: 50%; top: calc(var(--mw) * 0.016); width: 10%; height: calc(var(--mw) * 0.017); transform: translateX(-50%); background: #0b0d12; border-radius: 0 0 calc(var(--mw) * 0.008) calc(var(--mw) * 0.008); }
.mac-base { position: relative; width: 116%; margin-left: -8%; height: calc(var(--mw) * 0.026); border-radius: 0 0 calc(var(--mw) * 0.05) calc(var(--mw) * 0.05) / 0 0 calc(var(--mw) * 0.022) calc(var(--mw) * 0.022);
  background: linear-gradient(180deg, #f1f3f7 0%, #d4dae3 38%, #b2bbc8 100%); box-shadow: inset 0 1px 0 #ffffff, 0 26px 40px -22px rgba(12, 40, 80, 0.5); }
.mac-lip { position: absolute; left: 50%; top: 0; width: 15%; height: 40%; transform: translateX(-50%); border-radius: 0 0 calc(var(--mw) * 0.012) calc(var(--mw) * 0.012); background: linear-gradient(180deg, #a9b2bf, #cfd5de); }
.mac-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.08) 100%); }
/* the cursor walks to the first row's quick buy (94.4%, 54.5% of the screen), clicks, a toast confirms */
.mac-cursor { position: absolute; width: calc(var(--mw) * 0.024); left: 0; top: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); animation: macCursor 7s var(--ease) infinite; }
@keyframes macCursor {
  0%, 8% { transform: translate(calc(var(--mw) * 0.55), calc(var(--mw) * 0.42)); }
  38% { transform: translate(calc(var(--mw) * 0.9), calc(var(--mw) * 0.338)); }
  44% { transform: translate(calc(var(--mw) * 0.9), calc(var(--mw) * 0.338)) scale(0.82); }
  50%, 78% { transform: translate(calc(var(--mw) * 0.9), calc(var(--mw) * 0.338)); }
  100% { transform: translate(calc(var(--mw) * 0.55), calc(var(--mw) * 0.42)); }
}
.mac-hit { position: absolute; left: 94.4%; top: 54.5%; width: calc(var(--mw) * 0.06); height: calc(var(--mw) * 0.06); margin: calc(var(--mw) * -0.03) 0 0 calc(var(--mw) * -0.03); border-radius: 50%; background: rgba(60, 182, 250, 0.45); opacity: 0; animation: macHit 7s var(--ease) infinite; }
@keyframes macHit { 0%, 42% { opacity: 0; transform: scale(0.2); } 46% { opacity: 1; transform: scale(0.6); } 60%, 100% { opacity: 0; transform: scale(1.6); } }
.mac-toast { position: absolute; right: 2.4%; top: 3.6%; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; align-items: center; padding: 0.7em 1.1em 0.7em 0.8em; border-radius: 1em; font-size: calc(var(--mw) * 0.0155); color: #0d1a2b;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff, 0 12px 30px -14px rgba(12, 40, 80, 0.45); opacity: 0; transform: translateY(-30%); animation: macToast 7s var(--ease-out) infinite; }
.mac-toast i { grid-row: span 2; width: 1.9em; height: 1.9em; border-radius: 50%; background: #12a150 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.3 4.2L19 7.2' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; }
.mac-toast b { font-weight: 700; }
.mac-toast em { font-style: normal; color: #5d6d83; font-size: 0.85em; }
@keyframes macToast { 0%, 48% { opacity: 0; transform: translateY(-30%); } 54%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-30%); } }
.st[data-at="creator"] { left: 1%; top: 3%; transition-delay: 0.7s; }
.st[data-at="holders"] { right: 1%; top: 6%; transition-delay: 0.85s; }
.st[data-at="burn"] { left: 26%; top: 90%; transition-delay: 1s; }
.st[data-at="team"] { right: 26%; top: 90%; transition-delay: 1.15s; }
.st[data-at="promo"] { display: none; }

.snow { pointer-events: none; display: block; }
.snow-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.snow-page { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -1; }

/* ============================================================ phone screens (the app) */
.phone .scr {
  --ink: #f2f6fb; --ink-2: #a9b6c7; --ink-3: #6f7d91; --mist: #151d29; --mist-2: #212b39;
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16); --accent-wash: rgba(60, 182, 250, 0.14); --accent-soft: rgba(60, 182, 250, 0.3);
  background: #0b111a; color: var(--ink);
}
.phone .scr .a-btn { color: #06121f; }
.phone .scr .a-btn.ink { background: #f2f6fb; color: #0b111a; }
.phone .scr .a-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.phone .scr .a-round { color: #06121f; }
.phone .scr .a-opt.is-on .a-oi { color: #06121f; }
.phone .home { background: #f2f6fb; }
.phone .scr .a-seg b { background: #2a3546; color: #f2f6fb; box-shadow: none; }
.views { position: relative; height: calc(100% - var(--pw) * 0.14); }
.views > .view { position: absolute; inset: 0; height: auto; }
.view { opacity: 0; transform: translateX(8%); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out); pointer-events: none; }
.view.is-on { opacity: 1; transform: none; }
.view.is-out { opacity: 0; transform: translateX(-8%); }
.caret { display: inline-block; width: 0.08em; height: 1em; margin-left: 0.06em; vertical-align: -0.12em; background: var(--accent); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.a-btn { transition: transform 0.25s var(--ease), filter 0.3s var(--ease); }
.a-btn.is-press { transform: scale(0.95); filter: brightness(1.15); }
.a-sheet { margin-top: auto; border-radius: 1.4em 1.4em 1em 1em; background: #121a26; box-shadow: inset 0 0 0 1px var(--hair-2), 0 -1em 2em rgba(0, 0, 0, 0.4); padding: 1em; display: grid; gap: 0.6em; animation: sheetUp 0.6s var(--ease-out); }
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.a-sheet-h b { display: block; font: 400 1.5em/1.1 var(--serif); }
.a-sheet-h em { font-style: normal; font-size: 0.78em; color: var(--ink-3); }
.a-sheet-b { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0.5em; }
.a-sheet-b .a-btn { height: 3em; font-size: 0.95em; }
#dApprove { display: flex; gap: 0.5em; align-items: center; justify-content: center; }
#dApprove .spin { display: none; width: 1em; height: 1em; border-radius: 50%; border: 0.15em solid rgba(6, 18, 31, 0.25); border-top-color: #06121f; animation: spin 0.8s linear infinite; }
#dApprove.is-busy .spin { display: inline-block; }
#dApprove.is-done { background: #12a150; color: #fff; }
.a-livebadge { margin-left: auto; font-size: 0.66em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #06121f; background: var(--accent); padding: 0.4em 0.7em; border-radius: 999px; }
.a-bal { padding: 0.9em; border-radius: 1.1em; background: var(--mist); display: grid; gap: 0.15em; }
.a-bal span { font-size: 0.76em; color: var(--ink-3); }
.a-bal b { font-size: 2.1em; font-weight: 400; letter-spacing: -0.03em; }
.a-bal em { font-style: normal; font-size: 0.76em; color: var(--ink-3); }
.a-list.rew > div { align-items: center; }
.a-list.rew span { display: inline-flex; align-items: center; gap: 0.5em; }
.a-list.rew .a-logo { width: 1.6em; height: 1.6em; font-size: 0.75em; font-style: normal; }
.a-list.rew > .is-new b, .a-list-coins > .is-new .a-mid b { color: var(--accent); }
.a-list-coins { display: grid; gap: 0.5em; }
.a-list-coins > .is-new { animation: rowIn 0.8s var(--ease-out); box-shadow: inset 0 0 0 1.5px var(--accent); }
.a-new { font-size: 0.62em; font-weight: 700; letter-spacing: 0.1em; color: #06121f; background: var(--accent); padding: 0.2em 0.5em; border-radius: 999px; margin-left: 0.4em; vertical-align: 0.1em; }
.a-pad { position: relative; display: flex; flex-direction: column; gap: 0.72em; height: calc(100% - var(--pw) * 0.14); padding: 0.25em 1.1em 1.5em; }
.a-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; min-height: 2.3em; }
.a-h { font: 700 1.2em/1 var(--sans); letter-spacing: -0.02em; }
.a-top > .a-h:first-child { font-size: 1.65em; }
.a-back { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--mist); display: grid; place-items: center; }
.a-back svg { width: 1.1em; height: 1.1em; }
.a-step { font-size: 0.85em; color: var(--ink-3); }
.a-seg { display: inline-flex; background: var(--mist); border-radius: 999px; padding: 0.22em; font-size: 0.82em; font-weight: 600; color: var(--ink-3); }
.a-seg > * { padding: 0.38em 0.75em; border-radius: 999px; }
.a-seg b { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 22, 70, 0.1); font-weight: 600; }
.a-prog { height: 0.3em; border-radius: 9px; background: var(--mist-2); overflow: hidden; flex: none; }
.a-prog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.a-coin { display: flex; align-items: center; gap: 0.7em; }
.a-coin b { display: block; font-weight: 700; font-size: 1.02em; }
.a-coin em { font-style: normal; color: var(--ink-3); font-size: 0.82em; }
.a-coin.big .a-logo { width: 3em; height: 3em; }
.a-coin.big b { font-size: 1.25em; }
.a-logo {
  width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 500 1.15em/1 var(--serif); letter-spacing: -0.02em;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.38), transparent 46%), var(--c, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.l1 { --c: #3cb6fa; color: #06121f; } .l2 { --c: #1d2a3d; color: #fff; } .l3 { --c: #a9ddfc; color: #06121f; } .l4 { --c: #0f6ab0; color: #fff; } .l5 { --c: #5bc0f8; color: #06121f; } .l6 { --c: #33445c; color: #fff; }
.a-title { font: 400 1.8em/1.04 var(--serif); letter-spacing: -0.025em; margin-top: 0.15em; }
.a-title.sm { font-size: 1.5em; }
.a-opts { display: grid; gap: 0.45em; }
.a-opt { display: flex; align-items: center; gap: 0.65em; padding: 0.55em 0.7em; border-radius: 1em; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 0.6s var(--ease), background-color 0.6s var(--ease); }
.a-opt.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-wash); }
.a-oi { width: 2.15em; height: 2.15em; border-radius: 0.72em; display: grid; place-items: center; background: var(--mist); color: var(--accent); flex: none; transition: background-color 0.6s var(--ease), color 0.6s var(--ease); }
.a-oi svg { width: 1.25em; height: 1.25em; }
.a-opt.is-on .a-oi { background: var(--accent); color: #fff; }
.a-ot { flex: 1; min-width: 0; line-height: 1.2; }
.a-ot b { display: block; font-weight: 650; font-size: 0.98em; }
.a-ot em { font-style: normal; font-size: 0.78em; color: var(--ink-3); }
.a-radio { width: 1.15em; height: 1.15em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-2); flex: none; transition: box-shadow 0.6s var(--ease); }
.a-opt.is-on .a-radio { box-shadow: inset 0 0 0 0.36em var(--accent); }
.a-split { display: flex; align-items: center; gap: 0.8em; padding: 0.7em; border-radius: 1em; background: var(--mist); margin-top: auto; line-height: 1.25; }
.a-donut { width: 3em; height: 3em; transform: rotate(-90deg); flex: none; }
.d-bg { fill: none; stroke: var(--mist-2); stroke-width: 5; }
.d-fg, .d-s1, .d-s2, .d-s3 { fill: none; stroke-width: 5; }
.d-fg { stroke: var(--accent); }
.d-s1 { stroke: var(--accent); } .d-s2 { stroke: #a9ddfc; } .d-s3 { stroke: var(--deep); }
.a-split b { display: block; font-size: 0.95em; }
.a-split em { font-style: normal; font-size: 0.76em; color: var(--ink-3); }
.a-btn { height: 3.3em; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 650; flex: none; }
.a-btn.ink { background: var(--ink); margin-top: auto; }
.a-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.15em 0.65em; align-items: center; padding: 0.7em 0.75em; border-radius: 1.1em; box-shadow: inset 0 0 0 1px var(--hair); }
.a-mid { min-width: 0; line-height: 1.1; }
.a-mid b { display: block; font-weight: 700; }
.a-chip { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.72em; font-weight: 600; color: var(--accent); background: var(--accent-wash); padding: 0.28em 0.6em 0.28em 0.45em; border-radius: 999px; margin-top: 0.3em; }
.a-chip svg { width: 1.15em; height: 1.15em; }
.a-end { text-align: right; line-height: 1.2; }
.a-end b { display: block; font-size: 0.92em; font-weight: 500; }
.a-end span { font-size: 0.75em; }
.a-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.75em; color: var(--ink-2); padding-top: 0.55em; border-top: 1px solid var(--hair); margin-top: 0.4em; }
.a-spark { width: 100%; height: 4.6em; flex: none; }
.sp-a { fill: var(--accent-wash); }
.sp-l { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.a-round { padding: 0.85em 0.9em; border-radius: 1.1em; background: var(--accent); color: #fff; flex: none; }
.a-rh { display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; }
.a-rh span { display: inline-flex; gap: 0.35em; align-items: center; font-weight: 600; }
.a-rh svg { width: 1.25em; height: 1.25em; }
.a-rh em { font-style: normal; opacity: 0.8; }
.a-rv { margin-top: 0.45em; display: flex; align-items: baseline; gap: 0.45em; }
.a-rv b { font-size: 2em; font-weight: 400; letter-spacing: -0.03em; }
.a-rv span { font-size: 0.8em; opacity: 0.85; }
.a-list { display: grid; overflow: hidden; }
.a-list > div { display: flex; justify-content: space-between; padding: 0.55em 0.1em; border-bottom: 1px solid var(--hair); font-size: 0.85em; }
.a-list b { color: var(--accent); font-weight: 500; }
.a-list > .is-new { animation: rowIn 0.7s var(--ease-out); }
.a-upload { display: flex; align-items: center; gap: 0.8em; padding: 0.8em; border-radius: 1em; box-shadow: inset 0 0 0 1.5px var(--hair); border: 0; }
.a-logo.xl { width: 3.3em; height: 3.3em; font-size: 1.3em; }
.a-upload em { font-style: normal; font-size: 0.8em; color: var(--ink-3); }
.a-field { display: grid; gap: 0.15em; padding: 0.55em 0.8em; border-radius: 0.9em; background: var(--mist); }
.a-field span { font-size: 0.72em; color: var(--ink-3); font-weight: 600; }
.a-field b { font-weight: 600; }
.a-field b.thin { font-weight: 450; font-size: 0.86em; line-height: 1.35; }
.a-curve { padding: 0.65em 0.8em; border-radius: 1em; box-shadow: inset 0 0 0 1px var(--hair); display: grid; grid-template-columns: 1fr auto; gap: 0.15em 0.5em; align-items: center; }
.a-curve b { font-weight: 650; font-size: 0.95em; }
.a-curve em { grid-column: 1 / -1; font-style: normal; font-size: 0.76em; color: var(--ink-3); }
.a-curve.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-wash); }
.a-live, .a-soon { font-size: 0.64em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35em 0.65em; border-radius: 999px; }
.a-live { color: var(--accent); background: var(--accent-wash); }
.a-curve.is-on .a-live { background: #fff; }
.a-soon { color: var(--ink-3); background: var(--mist); }
.a-pie svg { width: 54%; margin: 0.1em auto 0.2em; transform: rotate(-90deg); }
.a-slice { display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; padding: 0.4em 0; border-bottom: 1px solid var(--hair); }
.a-slice i { width: 0.75em; height: 0.75em; border-radius: 3px; flex: none; }
.a-slice .s1 { background: var(--accent); } .a-slice .s2 { background: #a9ddfc; } .a-slice .s3 { background: var(--deep); }
.a-slice b { flex: 1; font-weight: 600; }
.a-slice.dim { color: var(--ink-3); border: 0; font-size: 0.8em; }
.a-slice.dim i { background: var(--mist-2); }
.a-pad.sign { justify-content: center; }
.a-done { text-align: center; display: grid; justify-items: center; gap: 0.45em; }
.a-check { width: 4.2em; height: 4.2em; border-radius: 50%; background: var(--accent); color: #06121f; display: grid; place-items: center; box-shadow: 0 0 0 0.6em var(--accent-wash); margin-bottom: 0.4em; }
.a-check svg { width: 2em; height: 2em; }
.a-done b { font: 400 1.75em/1.1 var(--serif); letter-spacing: -0.02em; }
.a-done em { font-style: normal; font-size: 0.8em; color: var(--ink-3); }
.a-tx { margin: 0.6em 0 0.4em; border-radius: 1em; background: var(--mist); padding: 0.2em 0.9em; }
.a-tx div { display: flex; justify-content: space-between; padding: 0.62em 0; border-bottom: 1px solid var(--hair); font-size: 0.85em; }
.a-tx div:last-child { border: 0; }
.a-tx span { color: var(--ink-3); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-0.6em); } to { opacity: 1; transform: none; } }

/* ============================================================ strip */
.strip { padding: 18px 0 8px; display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip-row { display: flex; width: max-content; }
.strip-track { display: flex; gap: 12px; padding-right: 12px; animation: marquee 70s linear infinite; }
.strip-row.rev .strip-track { animation-direction: reverse; animation-duration: 84s; }
.strip:hover .strip-track { animation-play-state: paused; }
.sc { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 7px; border-radius: 999px; background: var(--mist); white-space: nowrap; font-size: 15px; color: var(--ink-2); }
.sc .a-logo { --pw: 260px; width: 34px; height: 34px; font-size: 15px; }
.sc b { color: var(--ink); font-weight: 650; }
.sc svg { width: 18px; height: 18px; color: var(--em); }
.sc .to { color: var(--ink-3); }

/* ============================================================ section heads */
.sec-head { display: grid; gap: 22px; justify-items: start; max-width: 780px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head.row { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 28px 48px; }
.sec-head.row .lede { justify-self: end; }

/* ============================================================ routes */
.rt { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 28px; align-items: start; }
.rt-list { display: grid; gap: 3px; position: sticky; top: calc(var(--nav-h) + 28px); }
.rt-tab {
  display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px 9px 10px; border-radius: 16px; text-align: left; color: var(--ink-2);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rt-tab .n { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.rt-tab .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--ink-2); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.rt-tab .ic svg { width: 19px; height: 19px; }
.rt-tab b { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.rt-tab:hover { background: var(--mist); }
.rt-tab:hover .ic { background: #fff; }
.rt-tab[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-1); }
.rt-tab[aria-selected="true"] .ic { background: var(--accent); color: var(--ink); }
.rt-tab .tag { height: 20px; font-size: 10px; }

.rt-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 56px); border-radius: var(--r-xl); background: var(--mist); overflow: hidden; min-height: 700px; }
.rt-stage::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 22% 50%, rgba(60, 182, 250, 0.06) 0deg 0.4deg, transparent 0.4deg 6deg); -webkit-mask-image: radial-gradient(circle at 22% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 22% 50%, #000 0%, transparent 70%); pointer-events: none; }
.rt-phone { --pw: clamp(236px, 20vw, 286px); position: relative; }
.rt-side { position: relative; display: grid; gap: 28px; min-width: 0; }
.rt-copy { display: grid; gap: 14px; justify-items: start; }
.rt-copy .h3 { font-size: clamp(34px, 3.4vw, 50px); }
.rt-copy p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 32em; }
.rt-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rt-facts li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); min-width: 120px; }
.rt-facts b { font: 500 18px/1.1 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
.rt-facts span { font-size: 12.5px; color: var(--ink-3); }
.rt-flow { min-height: 210px; }
.routes { padding-top: clamp(72px, 8vw, 128px); }
.rt-flow svg { width: 100%; height: auto; overflow: visible; }
.fl-edge { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; }
.fl-run { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4 10; animation: run 1.2s linear infinite; }
.fl-run.dim { stroke: var(--ink-3); opacity: 0.6; }
.fl-node rect { fill: #fff; stroke: var(--hair-2); stroke-width: 1; }
.fl-node.blue rect { fill: var(--accent); stroke: var(--accent); }
.fl-node.ink rect { fill: var(--ink); stroke: var(--ink); }
.fl-node text { font: 600 13px var(--sans); fill: var(--ink); }
.fl-node.ink text { fill: #fff; }
.fl-node.blue text { fill: #06121f; }
.fl-node text.sub { font: 500 11px var(--mono); fill: var(--ink-3); }
.fl-node.ink text.sub { fill: rgba(255, 255, 255, 0.75); }
.fl-node.blue text.sub { fill: rgba(6, 18, 31, 0.7); }
.fl-dot { fill: var(--accent); }
.fl-pulse { fill: var(--accent); stroke: #fff; stroke-width: 2; opacity: 0; }
.fl-pulse.dim { fill: var(--ink-3); }
.fl-x { stroke: var(--down); stroke-width: 1.6; }
@keyframes run { to { stroke-dashoffset: -28; } }
.rt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(17, 26, 66, 0.05); }
.rt-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.rt-stage .swap { transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out), filter 0.45s var(--ease); }
.rt-stage.is-swap .swap { opacity: 0; transform: translateY(12px); filter: blur(4px); }

/* route phone screens */
.rs-head { display: flex; align-items: center; gap: 0.7em; margin-top: 0.2em; }
.rs-foot { margin-top: auto; display: grid; gap: 0.6em; }
.rs-foot .a-split { margin-top: 0; }
.rs-head .a-oi { background: var(--accent); color: #06121f; width: 2.6em; height: 2.6em; border-radius: 0.85em; }
.rs-head .a-oi svg { width: 1.45em; height: 1.45em; }
.rs-head b { display: block; font: 400 1.6em/1 var(--serif); letter-spacing: -0.02em; }
.rs-head em { font-style: normal; font-size: 0.78em; color: var(--ink-3); }
.rs-box { border-radius: 1em; background: var(--mist); padding: 0.85em 0.9em; display: grid; gap: 0.5em; }
.rs-big { font: 400 2.2em/1 var(--serif); letter-spacing: -0.03em; }
.rs-big small { font: 500 0.4em/1 var(--sans); color: var(--ink-3); letter-spacing: 0; margin-left: 0.3em; }
.rs-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.86em; padding: 0.5em 0; border-bottom: 1px solid var(--hair); gap: 0.5em; }
.rs-row:last-child { border-bottom: 0; }
.rs-row span { color: var(--ink-3); }
.rs-row b { font-weight: 600; }
.rs-row s { color: var(--ink-3); }
.rs-bar { height: 0.5em; border-radius: 9px; background: var(--mist-2); overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.rs-w { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55em; font-size: 0.85em; padding: 0.45em 0; border-bottom: 1px solid var(--hair); }
.rs-w:last-child { border: 0; }
.rs-w .dot { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; color: var(--accent); font-size: 0.8em; font-weight: 700; }
.rs-w.out { color: var(--ink-3); }
.rs-w.out .dot { background: var(--mist-2); color: var(--ink-3); }
.rs-w.out .mono { text-decoration: line-through; }
.rs-step { display: flex; align-items: center; gap: 0.6em; font-size: 0.86em; padding: 0.42em 0; }
.rs-step i { width: 1.35em; height: 1.35em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-2); flex: none; display: grid; place-items: center; }
.rs-step.done i { background: var(--accent); box-shadow: none; color: #06121f; }
.rs-step.done i svg { width: 0.9em; height: 0.9em; }
.rs-step.now i { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rs-step.now b { color: var(--accent); }
.rs-step b { flex: 1; font-weight: 600; }
.rs-step span { color: var(--ink-3); font-size: 0.9em; }
.rs-input { border-radius: 0.9em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); padding: 0.65em 0.8em; font-size: 0.86em; }
.rs-ok { display: flex; align-items: center; gap: 0.4em; color: var(--accent); font-size: 0.8em; font-weight: 600; }
.rs-ok svg { width: 1.2em; height: 1.2em; }
.rs-note { font-size: 0.76em; color: var(--ink-3); line-height: 1.4; }
.rs-handle { display: grid; justify-items: center; gap: 0.4em; padding: 1.2em 0.8em; border-radius: 1em; background: var(--mist); text-align: center; }
.rs-handle .at { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.rs-handle .at svg { width: 1.6em; height: 1.6em; }
.rs-handle b { font-size: 1.15em; }
.rs-pool { position: relative; height: 6.4em; border-radius: 1em; background: var(--mist); overflow: hidden; }
.rs-pool i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
.rs-pool i.was { background: var(--accent-soft); }
.rs-pool span { position: absolute; left: 0.8em; top: 0.7em; font-size: 0.8em; font-weight: 600; z-index: 1; }

/* ============================================================ how */
.how-panel { padding: clamp(28px, 4vw, 64px) clamp(16px, 3vw, 48px) clamp(32px, 4vw, 60px); overflow: hidden; }
.how-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 34px); }
.how-step { container-type: inline-size; display: grid; align-content: start; }
.how-step:nth-child(even) { margin-top: 48px; }
.how-step .phone { --pw: min(100cqi, 268px); margin: 0 auto; }
.how-txt { margin-top: 26px; }
.how-n { color: var(--deep); font-size: 13px; }
.how-txt h3 { font: 400 30px/1.05 var(--serif); margin: 8px 0; letter-spacing: -0.022em; }
.how-txt p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 22em; }

/* ============================================================ watch: scroll zooms into its screen
   Sizes are in em of --aw (the watch's width, px, set every frame), so the face
   stays sharp at any zoom: the text is laid out at its real size, never scaled. */
.watch { position: relative; height: 420vh; }
.watch-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.watch-stage { position: absolute; inset: 0; }
.aw { position: absolute; left: 50%; top: 50%; font-size: var(--aw, 240px); width: 1em; height: 1.22em; opacity: var(--op, 0); transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)); isolation: isolate; --shd: 1; }
.aw-case { position: absolute; inset: 0; border-radius: 0.27em; background: linear-gradient(145deg, #f6f8fb 0%, #ccd3dd 28%, #f0f3f7 52%, #aab3c0 100%);
  box-shadow: inset 0 0.004em 0 #fff, inset 0 -0.006em 0.012em rgba(0, 0, 0, 0.22), 0 0.14em 0.22em -0.08em rgba(12, 40, 80, calc(0.42 * var(--shd))), 0 0.03em 0.05em rgba(12, 40, 80, calc(0.22 * var(--shd))); }
.aw-r .aw-case { background: linear-gradient(145deg, #4a5262 0%, #1c222c 30%, #3a4250 55%, #11151c 100%); }
.aw-screen { position: absolute; inset: 0.055em; border-radius: 0.22em; background: #000; overflow: hidden; box-shadow: inset 0 0 0 0.006em #20242c; }
.aw-face { position: absolute; inset: 0.05em 0.045em; display: grid; place-items: center; align-content: center; text-align: center; color: #fff; }
.aw-time { position: absolute; top: 0.02em; right: 0.035em; font: 600 0.072em/1 var(--sans); letter-spacing: -0.01em; }
.aw-mark { position: absolute; top: 0.018em; left: 0.03em; width: 0.08em; height: 0.08em; border-radius: 0.02em; }
.aw-ring { position: absolute; left: 50%; top: 50%; width: 0.7em; height: 0.7em; transform: translate(-50%, -52%) rotate(-90deg); overflow: visible; }
.aw-ring circle { fill: none; stroke-width: 5; }
.aw-ring .r0 { stroke: rgba(60, 182, 250, 0.16); }
.aw-ring .r1 { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--ring, 18) 100; }
.aw-l1 { position: relative; display: block; font: 700 0.128em/0.95 var(--sans); letter-spacing: -0.04em; text-transform: uppercase; }
.aw-l2 { position: relative; display: block; font: italic 400 0.17em/0.9 var(--serif); color: var(--accent); letter-spacing: -0.03em; margin-top: 0.02em; }
.aw-sub { position: absolute; bottom: 0.05em; left: 0; right: 0; font: 500 0.04em/1 var(--mono); color: #7d8ba0; letter-spacing: 0.04em; }
.aw-crown { position: absolute; z-index: 1; right: -0.046em; top: 0.25em; width: 0.062em; height: 0.17em; border-radius: 0.022em; background: repeating-linear-gradient(180deg, #e3e7ed 0 0.007em, #949eab 0.007em 0.013em); box-shadow: inset -0.006em 0 0.008em rgba(0, 0, 0, 0.3); }
.aw-btn { position: absolute; z-index: 1; right: -0.022em; top: 0.56em; width: 0.03em; height: 0.2em; border-radius: 0.016em; background: linear-gradient(90deg, #b3bbc7, #eef1f5); }
.aw-r .aw-crown, .aw-r .aw-btn { filter: brightness(0.55); }
.aw-band { position: absolute; z-index: -1; left: 0.1em; right: 0.1em; height: 0.92em; background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.24) 26%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.22)), var(--band); }
.aw-band.top { bottom: calc(100% - 0.08em); border-radius: 0.16em 0.16em 0.05em 0.05em; -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent); mask-image: linear-gradient(0deg, #000 70%, transparent); }
.aw-band.bot { top: calc(100% - 0.08em); border-radius: 0.05em 0.05em 0.16em 0.16em; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 0.016em, transparent 0.019em), linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.24) 26%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.22)); background-size: 0.1em 0.1em, 100% 100%; background-position: center 0.42em, 0 0; background-repeat: repeat-y, no-repeat; background-color: var(--band); }
.watch-hint { position: absolute; left: 0; right: 0; bottom: 6vh; margin: 0; text-align: center; font: 600 12px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .watch { height: auto; } .watch-pin { position: relative; height: 80vh; } }

/* ============================================================ rounds (cobalt) */
.rounds { padding: 0 clamp(8px, 1.6vw, 20px); }
.rounds-in { position: relative; overflow: hidden; border-radius: clamp(28px, 4vw, 52px); background: radial-gradient(70% 90% at 78% 40%, #12304d 0%, rgba(18, 48, 77, 0) 70%), var(--night); color: #fff; padding: clamp(80px, 10vw, 150px) 0; isolation: isolate; }
.rounds-in::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from 0deg at 76% 52%, rgba(255, 255, 255, 0.07) 0deg 0.35deg, transparent 0.35deg 5deg); -webkit-mask-image: radial-gradient(circle at 76% 52%, #000, transparent 72%); mask-image: radial-gradient(circle at 76% 52%, #000, transparent 72%); }
.rounds .h2 { color: #fff; margin: 22px 0 24px; }
.rounds .h2 em { color: var(--accent); }
.rounds .lede { color: rgba(255, 255, 255, 0.84); }
.eyebrow.white { color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.rounds-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.rounds-facts { list-style: none; padding: 0; margin: 44px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.rounds-facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); align-items: baseline; }
.rounds-facts b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.rounds-facts span { color: rgba(255, 255, 255, 0.78); font-size: 15.5px; }
.dial-wrap { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; justify-self: end; }
.dial { width: 100%; height: 100%; overflow: visible; }
.dial .tk { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; }
.dial .tk.big { stroke: #fff; stroke-width: 2; }
.dial .ring { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.dial .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.dial .hand { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.dial .tip { fill: var(--accent); }
.dial .hub { fill: #fff; }
.dial .lbl { font: 500 12px var(--mono); fill: rgba(255, 255, 255, 0.7); text-anchor: middle; dominant-baseline: middle; }
.dial .pay { fill: var(--accent); }
.dial-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; pointer-events: none; }
.dial-mid span { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.dial-mid b { font: 400 clamp(36px, 3.6vw, 52px)/1 var(--serif); letter-spacing: -0.02em; }
.dial-mid em { font-style: normal; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.receipt { position: absolute; right: -14%; bottom: -12%; width: 56%; min-width: 230px; background: #fff; color: var(--ink); border-radius: 22px; padding: 16px 18px 14px; box-shadow: 0 40px 80px -30px rgba(5, 10, 60, 0.65); transform: rotate(3deg); }
.rc-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px dashed var(--hair-2); }
.rc-h b { color: var(--ink); }
.rc-l { display: grid; font-size: 13px; height: 168px; align-content: start; overflow: hidden; }
.rc-l > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hair); animation: rowIn 0.6s var(--ease-out) both; }
.rc-l b { color: var(--accent); font-weight: 500; }
.rc-f { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 600; font-size: 14px; }

/* ============================================================ hub bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bx { position: relative; border-radius: var(--r-xl); background: var(--mist); padding: clamp(22px, 2.4vw, 32px); overflow: hidden; display: flex; flex-direction: column; gap: 20px; min-height: 320px; }
.bx-burn { grid-column: span 7; grid-row: span 2; background: var(--ink); color: #fff; min-height: 660px; }
.bx-never { grid-column: span 5; grid-row: span 2; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.bx-fuel { grid-column: span 5; }
.bx-pool { grid-column: span 3; }
.bx-promo { grid-column: span 4; }
.bx-top { display: flex; justify-content: space-between; align-items: center; }
.bx-i { width: 46px; height: 46px; border-radius: 15px; background: #fff; display: grid; place-items: center; color: var(--em); box-shadow: inset 0 0 0 1px var(--hair); }
.bx-i svg { width: 22px; height: 22px; }
.bx-burn .bx-i { background: rgba(255, 255, 255, 0.07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.bx-never .bx-i { background: var(--mist); }
.bx-burn .tag.ink { background: rgba(255, 255, 255, 0.1); }
.bx-txt { margin-top: auto; }
.bx-txt h3 { font: 400 clamp(26px, 2.4vw, 34px)/1.04 var(--serif); margin: 0 0 10px; letter-spacing: -0.022em; }
.bx-txt p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 34em; }
.bx-burn .bx-txt p { color: rgba(255, 255, 255, 0.68); }
.burn-count { display: grid; gap: 6px; margin-top: 10px; }
.burn-count span { font: 400 clamp(38px, 5.2vw, 76px)/1 var(--mono); letter-spacing: -0.05em; }
.burn-count em { font-style: normal; color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.furnace { width: min(100%, 380px); height: auto; align-self: center; margin: 6px 0 -6px; overflow: visible; }
.furnace .fl { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; transform-origin: 160px 150px; }
.furnace .f1 { animation: flick 2.6s var(--ease) infinite alternate; }
.furnace .f2 { stroke: #fff; animation: flick 1.9s var(--ease) infinite alternate-reverse; }
.furnace .grate { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.6; stroke-linecap: round; }
.furnace .spark { fill: #fff; }
@keyframes flick { 0% { transform: scale(1, 1); } 50% { transform: scale(0.97, 1.05); } 100% { transform: scale(1.02, 0.97); } }
.nv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.nv i { aspect-ratio: 1; border-radius: 50%; background: var(--accent); position: relative; transition: background-color 0.6s var(--ease), transform 0.6s var(--ease); display: grid; place-items: center; color: #06121f; font: 600 11px/1 var(--mono); font-style: normal; }
.nv i.out { background: var(--mist-2); color: var(--ink-3); transform: scale(0.82); }
.nv i.out::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 1.6px; background: var(--ink-3); transform: rotate(-35deg); }
.nv-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.nv-meta b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.fuel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0; }
.fc { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); color: #06121f; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 46%), var(--accent); position: relative; }
.fc.b { color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.3), transparent 46%), var(--ink); }
.fuel-flame { position: absolute; width: 28px; height: 28px; right: -6px; top: -8px; color: var(--em); background: #fff; border-radius: 50%; padding: 4px; box-shadow: var(--shadow-1); }
.fuel-line { width: 100%; height: 20px; overflow: visible; }
.fuel-line path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; animation: run 0.9s linear infinite; vector-effect: non-scaling-stroke; }
.pool { position: relative; height: 120px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.pool-w { position: absolute; left: 0; bottom: 0; width: 200%; height: 60%; animation: wave 5s linear infinite, rise 9s var(--ease) infinite alternate; }
.pool-w svg { width: 100%; height: 26px; display: block; }
.pool-w svg path { fill: var(--accent); }
.pool-w::after { content: ""; display: block; height: calc(100% - 25px); background: var(--accent); }
@keyframes wave { to { transform: translateX(-50%); } }
@keyframes rise { from { height: 42%; } to { height: 74%; } }
.promo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: p; }
.promo li { counter-increment: p; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--hair); }
.promo li::before { content: counter(p); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--mono); box-shadow: inset 0 0 0 1.5px var(--hair-2); color: var(--ink-3); transition: background-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease); flex: none; }
.promo li.done { color: var(--ink); }
.promo li.done::before { content: "✓"; background: var(--accent); color: #06121f; box-shadow: none; font-family: var(--sans); font-weight: 700; }
.promo li.now::before { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--deep); }

/* ============================================================ next */
.next-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.nx { border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-1); display: flex; flex-direction: column; gap: 16px; min-height: 520px; }
.nx-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-h h3 { font: 400 clamp(30px, 3vw, 40px)/1 var(--serif); margin: 0; letter-spacing: -0.022em; }
.nx .body { margin: 0; font-size: 16px; }
.toll { margin-top: auto; }
.toll-chart { width: 100%; height: 230px; overflow: visible; }
.toll-chart .grid { stroke: var(--hair); stroke-width: 1; }
.toll-chart .area { fill: var(--accent-wash); }
.toll-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.toll-chart .mk { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.toll-chart .gl { font: 500 11px var(--mono); fill: var(--ink-3); }
.toll-pin { position: absolute; }
.toll-read { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 16px 0 10px; color: var(--ink-2); font-size: 15px; }
.toll-read b { color: var(--ink); font-weight: 500; }
.toll-read strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; color: var(--em); letter-spacing: -0.03em; white-space: nowrap; }
.toll-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.toll-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 9px; background: linear-gradient(90deg, var(--accent) var(--p, 20%), var(--mist-2) var(--p, 20%)); }
.toll-range input::-moz-range-track { height: 4px; border-radius: 9px; background: var(--mist-2); }
.toll-range input::-moz-range-progress { height: 4px; border-radius: 9px; background: var(--accent); }
.toll-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--accent), var(--shadow-1); }
.toll-range input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--accent), var(--shadow-1); }
.toll-ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.chains { position: relative; height: 320px; margin-top: auto; }
.chains-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chains-lines path { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; animation: run 1.6s linear infinite; }
.chains-lines path.live { stroke: var(--accent); stroke-dasharray: none; animation: none; }
.cn { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-1); color: var(--ink-2); }
.cn svg { width: 15px; height: 15px; color: var(--em); }
.cn.on { background: var(--accent); color: var(--ink); box-shadow: none; }
.cn.on svg { color: var(--ink); }
.cn.hub-c { width: 70px; height: 70px; padding: 0; border-radius: 22px; left: 50%; top: 50%; box-shadow: var(--shadow-2); }
.cn.hub-c img { width: 70px; height: 70px; display: block; border-radius: inherit; }

/* ============================================================ numbers */
.nums { padding: 0 0 var(--sec); }
.nums-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; border-top: 1px solid var(--hair); }
.nm { padding: 34px 24px 0 0; display: grid; gap: 14px; align-content: start; }
.nm + .nm { padding-left: 24px; border-left: 1px solid var(--hair); }
.nm b { font-size: clamp(64px, 8.4vw, 132px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 400; color: var(--ink); white-space: nowrap; }
.nm:first-child b { color: var(--em); }
.nm small { font-size: 0.28em; margin-left: 0.12em; letter-spacing: 0; font-family: var(--sans); font-weight: 500; color: var(--ink-3); }
.nm > span { color: var(--ink-2); max-width: 15em; font-size: 15.5px; }

/* ============================================================ trust */
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.trust-head { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 26px; justify-items: start; }
.trust-cols { display: grid; gap: 16px; }
.tc { border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 34px); background: var(--mist); }
.tc.can { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.tc h4 { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.tc ul { list-style: none; margin: 0; padding: 0; }
.tc li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.tc li:last-child { border: 0; padding-bottom: 2px; }
.tc li svg { width: 22px; height: 22px; color: var(--em); margin-top: 2px; }
.tc li b { display: block; font-size: 17px; font-weight: 650; margin-bottom: 3px; }
.tc li span { color: var(--ink-2); font-size: 15px; }

/* ============================================================ faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list details:first-child { border-top: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 400 clamp(21px, 2vw, 27px)/1.2 var(--serif); letter-spacing: -0.016em; transition: color 0.3s var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230c0f1a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.5s var(--ease), background-color 0.3s var(--ease); }
.faq-list summary:hover { color: var(--deep); }
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: var(--accent-wash); }
.faq-list details p { margin: -6px 0 26px; color: var(--ink-2); max-width: 40em; font-size: 16.5px; }
.faq-list details[open] p { animation: faqIn 0.6s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================ final */
.final { position: relative; padding: calc(var(--sec) * 1.1) 0 var(--sec); overflow: hidden; text-align: center; isolation: isolate; }
.final-rays { position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from -90deg at 50% 120%, rgba(60, 182, 250, 0.13) 0deg 0.3deg, transparent 0.3deg 4deg); -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 100%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 75% 90% at 50% 100%, #000 15%, transparent 72%); }
.final-in { display: grid; justify-items: center; gap: 28px; }
.final .lede { text-align: center; }
.final-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============================================================ stickers (chrome + voxel gold) */
.stk { position: absolute; z-index: 3; pointer-events: none; user-select: none; height: auto; filter: drop-shadow(0 24px 28px rgba(46, 123, 196, 0.3)); animation: bob 7s var(--ease) infinite alternate; }
@keyframes bob { from { transform: translateY(-6px) rotate(calc(var(--r, 0deg) - 4deg)); } to { transform: translateY(8px) rotate(calc(var(--r, 0deg) + 4deg)); } }
.routes .sec-head { position: relative; }
.stk-spark { width: clamp(70px, 8vw, 120px); left: min(560px, 62%); top: 18px; --r: 10deg; animation-duration: 5.5s; }
.rt { position: relative; }
.stk-coin { width: clamp(110px, 11vw, 170px); right: -34px; top: -78px; --r: -12deg; z-index: 4; }
.stk-heart { width: clamp(110px, 12vw, 170px); left: -10%; top: -6%; --r: -14deg; animation-duration: 6.4s; }
.bento { position: relative; }
.stk-ingot { width: clamp(130px, 13vw, 200px); left: calc(58.33% - 120px); top: -86px; --r: 8deg; z-index: 4; animation-duration: 8s; }
.trust-head { position: relative; }
.stk-cross { width: clamp(90px, 9vw, 140px); right: 4%; top: -40px; --r: 14deg; animation-duration: 6.8s; }
.final-in { position: relative; }
.stk-mark { position: relative; width: clamp(130px, 14vw, 190px); margin-bottom: -10px; --r: -8deg; }
.stk-fs1 { width: 70px; left: 14%; top: 18%; --r: 18deg; animation-duration: 5s; }
.stk-fs2 { width: 46px; right: 16%; top: 8%; --r: -10deg; animation-duration: 6s; }
.stk-fs3 { width: 96px; right: 10%; bottom: 6%; --r: 12deg; animation-duration: 7.5s; }

/* ===== the landing on the terminal's sky (css/termbg.css + js/termbg.js): transparent page, glass panels */
body.home { background: transparent; }
body.home .hero-sky { display: none; }
/* the landing has its own 3D objects and stickers; the backdrop keeps only its sky, blobs and snow */
body.home .tbg-trk { display: none; }
body.home .panel, body.home .rt-stage, body.home .bx:not(.bx-burn), body.home .nx, body.home .tc, body.home .card, body.home .sc, body.home .how-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.28));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 22px 34px -24px rgba(255, 255, 255, 0.9), inset 0 -18px 30px -26px rgba(90, 170, 240, 0.45), 0 24px 60px -32px rgba(20, 80, 160, 0.32);
}
body.home .tc.can, body.home .bx-never { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)); }
body.home .sc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 24px -16px rgba(20, 80, 160, 0.3); }
body.home .rt-stage::after, body.home .bx:not(.bx-burn)::after, body.home .nx::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0) 100%);
}
body.home .rt-stage > *, body.home .bx > *, body.home .nx > * { position: relative; z-index: 1; }
body.home .rt-stage > .rt-bar { position: absolute; }
body.home .rounds-in, body.home .bx-burn {
  background: linear-gradient(160deg, rgba(10, 18, 29, 0.9), rgba(14, 30, 50, 0.8));
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 80px -40px rgba(10, 30, 70, 0.55);
}
body.home .rt-facts li, body.home .pool, body.home .bx-i { background: rgba(255, 255, 255, 0.55); }
body.home .faq-list details, body.home .faq-list details:first-child { border-color: rgba(13, 30, 52, 0.1); }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .rt { grid-template-columns: 250px minmax(0, 1fr); }
  .rt-stage { grid-template-columns: 1fr; justify-items: center; min-height: 0; }
  .rt-side { width: 100%; }
  .dial-wrap { aspect-ratio: auto; }
  .dial { height: auto; aspect-ratio: 1; }
  .dial-mid { bottom: auto; aspect-ratio: 1; }
  .receipt { position: relative; right: auto; bottom: auto; width: min(100%, 360px); margin: 8px auto 0; transform: rotate(1.5deg); }
}
@media (max-width: 960px) {
  .hero-stage { height: 600px; }
  .sec-head.row { grid-template-columns: 1fr; }
  .sec-head.row .lede { justify-self: start; }
  .rt { grid-template-columns: 1fr; }
  .rt-list { position: relative; top: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); scrollbar-width: none; }
  .rt-list::-webkit-scrollbar { display: none; }
  .rt-tab { width: auto; grid-template-columns: 34px auto auto; flex: none; scroll-snap-align: start; padding-right: 14px; background: var(--mist); }
  .rt-tab .n { display: none; }
  .rt-tab .ic { width: 34px; height: 34px; }
  .how-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .how-row::-webkit-scrollbar { display: none; }
  .how-step { scroll-snap-align: center; }
  .how-step:nth-child(even) { margin-top: 0; }
  .rounds-grid { grid-template-columns: 1fr; }
  .dial-wrap { justify-self: center; max-width: 440px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bx-burn, .bx-never { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .bx-fuel { grid-column: 1 / -1; }
  .bx-pool, .bx-promo { grid-column: span 1; }
  .next-grid { grid-template-columns: 1fr; }
  .nums-row { grid-template-columns: 1fr 1fr; }
  .nm { padding: 28px 18px 28px 0; }
  .nm + .nm { padding-left: 0; border-left: 0; }
  .nm:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hair); }
  .nm:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .trust-grid, .faq-grid { grid-template-columns: 1fr; }
  .trust-head { position: relative; top: 0; }
}
@media (max-width: 560px) {
  .stk-coin { right: -10px; top: -60px; width: 96px; }
  .stk-ingot { left: auto; right: 0; top: -70px; width: 120px; }
  .stk-heart { left: 0; top: -4%; width: 96px; }
  .stk-spark { left: auto; right: 0; top: 0; width: 64px; }
  .stk-fs1, .stk-fs2 { display: none; }
  .stk-fs3 { display: none; }
  .hero-stage { height: 520px; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); width: calc(100% + var(--gut) * 2); }
  .hero-stage { --mw: 94vw; height: 330px; }
  .p-m { --pw: 150px; top: 120px; transform: translate3d(calc(var(--mw) / 2 - 120px), 0, 0) rotate(4deg); }
  .p-r { display: none; }
  .st { padding: 5px 11px 5px 5px; gap: 7px; }
  .st-i { width: 28px; height: 28px; }
  .st-i svg { width: 15px; height: 15px; }
  .st-t b { font-size: 12.5px; }
  .st-t i { font-size: 11px; }
  .st[data-at="creator"], .st[data-at="burn"], .st[data-at="team"], .st[data-at="promo"] { display: none; }
  .st[data-at="holders"] { right: 3%; top: -26px; }
  .hero-cta { gap: 18px 22px; }
  .strip { padding-top: 6px; }
  .sc { height: 42px; font-size: 14px; }
  .sc .a-logo { width: 30px; height: 30px; }
  .rt-stage { padding: 22px 16px 28px; }
  .rt-phone { --pw: 236px; }
  .rt-facts li { min-width: 0; flex: 1 1 40%; }
  .rounds-facts li { grid-template-columns: 1fr; gap: 4px; }
  .bento { grid-template-columns: 1fr; }
  .bx-pool, .bx-promo { grid-column: 1 / -1; }
  .bx-burn { min-height: 0; }
  .nx { min-height: 0; }
  .chains { height: 280px; }
  .nm b { font-size: 60px; }
  .nm > span { font-size: 14px; }
  .faq-list summary { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .strip-track, .pool-w, .furnace .fl, .fl-run, .fuel-line path, .chains-lines path, .stk { animation: none !important; }
  .hero:not(.is-ready) .phones .phone, .st { opacity: 1; transform: none; }
}