/* ORBIT — the small custom layer Tailwind can't express (textures, 3D, cursor, slider, odometer, code tokens) */

:root {
  --cobalt: #1b2cff;
  --cobalt-deep: #0e169a;
  --ink: #0a0a0a;
  --cream: #f5f1e6;
  --lime: #c6ff3d;
  --flare: #ff5a1f;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--cobalt);
  color-scheme: light;
}
@media (min-width: 2200px) {
  html { font-size: 20px; }
}
@media (min-width: 3000px) {
  html { font-size: 26px; }
}

body {
  overflow-x: clip;
  background-color: var(--cobalt);
  background-image:
    radial-gradient(70% 55% at 78% 0%, rgba(84, 108, 255, 0.55), transparent 70%),
    linear-gradient(rgba(245, 241, 230, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 241, 230, 0.075) 1px, transparent 1px);
  background-size: 100% 110vh, 72px 72px, 72px 72px;
  background-position: 0 0, -1px -1px, -1px -1px;
  background-repeat: no-repeat, repeat, repeat;
}

::selection { background: var(--lime); color: var(--ink); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.menu-open { overflow: hidden; }

/* keyboard focus: thick, unmistakable */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-light :focus-visible,
.bg-cream :focus-visible,
.bg-lime :focus-visible {
  outline-color: var(--cobalt);
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 400;
  background: var(--lime); color: var(--ink); border: 2px solid var(--ink);
  padding: 0.6rem 1rem; font-weight: 700; box-shadow: 4px 4px 0 var(--ink);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

/* film grain (static, one raster) */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- loading states ---------- */
#intro { display: none; position: fixed; inset: 0; z-index: 300; background: var(--ink); color: var(--lime); }
html.js-intro #intro { display: block; }
#intro-inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; }
#intro-bar { transform-origin: 0 50%; transform: scaleX(0); height: 100%; background: var(--lime); }
html.js-intro body { overflow: hidden; }

/* ---------- textures ---------- */
.grid-tex {
  background-image:
    linear-gradient(rgba(245, 241, 230, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 241, 230, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.grid-tex-ink {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
}
.halftone {
  background-image: radial-gradient(circle, rgba(245, 241, 230, 0.22) 1.6px, transparent 1.9px);
  background-size: 11px 11px;
}
.halftone-dark {
  background-image: radial-gradient(circle, rgba(10, 10, 10, 0.22) 1.6px, transparent 1.9px);
  background-size: 11px 11px;
}
.halftone-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* ---------- type helpers ---------- */
.text-outline { --stroke: #f5f1e6; color: transparent !important; -webkit-text-stroke: 2px var(--stroke); }
.stroke-lime { --stroke: #c6ff3d; }
.stroke-ink { --stroke: #0a0a0a; }
.stroke-cream { --stroke: #f5f1e6; }
.mask-word {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.14em 0.06em 0.1em; margin: -0.14em -0.06em -0.1em;
}
.char { display: inline-block; will-change: transform; }
.micro { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- buttons: hard offset shadow that presses in ---------- */
.btn {
  --bg: var(--lime); --fg: var(--ink); --sh: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem 1.6rem; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: 5px 5px 0 0 var(--sh);
  transition: translate 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.2s;
}
.btn:hover, .btn:focus-visible { translate: 5px 5px; box-shadow: 0 0 0 0 var(--sh); }
.btn:active { translate: 5px 5px; box-shadow: 0 0 0 0 var(--sh); }
.btn .arr { display: inline-block; transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-lg { padding: 1.25rem 2.1rem; font-size: 1.15rem; }
.btn-sm { padding: 0.65rem 1.05rem; font-size: 0.875rem; box-shadow: 3px 3px 0 0 var(--sh); }
.btn-sm:hover, .btn-sm:focus-visible, .btn-sm:active { translate: 3px 3px; }
.btn-ink { --bg: var(--ink); --fg: var(--cream); }
.btn-cream { --bg: var(--cream); --fg: var(--ink); }
.btn-cobalt { --bg: var(--cobalt); --fg: var(--cream); }
.sh-lime { --sh: var(--lime); }
.sh-cream { --sh: var(--cream); }
.sh-cobalt { --sh: var(--cobalt); }
.sh-ink { --sh: var(--ink); }
.btn.is-done { --bg: var(--lime); --fg: var(--ink); }

/* ---------- marquee ---------- */
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; flex-shrink: 0; align-items: center; }

/* ---------- FX ticker ---------- */
.tick {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.4rem;
  border-right: 2px solid rgba(245, 241, 230, 0.16);
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.8rem; white-space: nowrap;
}
.tick-sym { font-weight: 700; letter-spacing: 0.04em; color: rgba(245, 241, 230, 0.72); }
.tick-px { padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; }
.tick-chg { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.tick-chg.is-up { color: var(--lime); }
.tick-chg.is-down { color: #ff8a5c; }

/* ---------- hero toasts ---------- */
.toast {
  position: absolute; right: 0; bottom: 0; width: 100%;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem;
  background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 0.9rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.toast-chip { display: grid; place-items: center; min-width: 2.6rem; height: 2.1rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); font: 700 0.7rem 'Space Mono', monospace; }
.toast-body { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.toast-t1 { font-weight: 800; font-size: 0.86rem; }
.toast-t2 { font: 400 0.66rem 'Space Mono', monospace; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-amt { margin-left: auto; font: 700 0.8rem 'Space Mono', monospace; color: #0a7a2f; white-space: nowrap; }

/* ---------- city tags over the globe ---------- */
#city-labels { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 5; pointer-events: none; overflow: hidden; }
.city-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.55rem;
  background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  font: 700 0.64rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink); opacity: 0; will-change: transform, opacity;
}
.city-tag::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--flare); }

/* ---------- globe canvas + WebGL fallback ---------- */
#globe {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none;
}
#globe-fallback {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: none; place-items: center; pointer-events: none;
  --fx: 24vw; --fy: 0vh; --fs: 1;
}
.no-webgl #globe-fallback { display: grid; }
#globe-fallback svg { width: min(92vw, 88vh, 920px); height: auto; transform: translate(var(--fx), var(--fy)) scale(var(--fs)); will-change: transform; }
.fb-spin { transform-origin: 0 0; animation: fbspin 60s linear infinite; }
.fb-ring { transform-origin: 0 0; animation: fbspin 28s linear infinite reverse; }
.fb-arc { stroke-dasharray: 8 300; animation: fbdash 4.5s linear infinite; }
@keyframes fbspin { to { transform: rotate(360deg); } }
@keyframes fbdash { from { stroke-dashoffset: 320; } to { stroke-dashoffset: -20; } }
html.is-dragging, html.is-dragging * { user-select: none !important; }

/* ---------- custom cursor ---------- */
#cursor-dot, #cursor-ring { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; display: none; will-change: transform; }
html.cursor-on #cursor-dot, html.cursor-on #cursor-ring { display: grid; }
#cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); transition: transform 0.25s var(--ease), opacity 0.2s; }
#cursor-dot[data-state='label'] { transform: scale(0); }
#cursor-ring {
  width: 40px; height: 40px; place-items: center; border-radius: 50%;
  border: 2px solid var(--cream); box-shadow: 0 0 0 1.5px rgba(10, 10, 10, 0.55), inset 0 0 0 1.5px rgba(10, 10, 10, 0.55);
  transition: width 0.4s var(--ease), height 0.4s var(--ease), background-color 0.25s, border-color 0.25s, scale 0.25s var(--ease);
}
#cursor-ring[data-state='link'] { width: 64px; height: 64px; background: rgba(198, 255, 61, 0.28); border-color: var(--lime); }
#cursor-ring[data-state='label'] { width: 96px; height: 96px; background: var(--lime); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
#cursor-ring.is-down { scale: 0.86; }
#cursor-label { font: 700 0.72rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); opacity: 0; transition: opacity 0.2s; }
#cursor-ring[data-state='label'] #cursor-label { opacity: 1; }
html.cursor-on, html.cursor-on body,
html.cursor-on a, html.cursor-on button, html.cursor-on [role='tab'], html.cursor-on [role='switch'],
html.cursor-on summary, html.cursor-on label, html.cursor-on select, html.cursor-on input[type='range'] { cursor: none; }
html.cursor-on input:not([type='range']), html.cursor-on textarea { cursor: text; }

/* ---------- mobile menu ---------- */
#menu:focus { outline: none; }
#menu {
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.7s;
}
html.menu-open #menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
#menu li { transform: translateY(40px); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.5s; }
html.menu-open #menu li { transform: none; opacity: 1; }
html.menu-open #menu li:nth-child(1) { transition-delay: 0.25s; }
html.menu-open #menu li:nth-child(2) { transition-delay: 0.3s; }
html.menu-open #menu li:nth-child(3) { transition-delay: 0.35s; }
html.menu-open #menu li:nth-child(4) { transition-delay: 0.4s; }
html.menu-open #menu li:nth-child(5) { transition-delay: 0.45s; }

/* ---------- story ---------- */
.story-node { transition: color 0.3s, opacity 0.3s; opacity: 0.55; }
.story-node::before { content: ''; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.5rem; border: 2px solid currentColor; border-radius: 50%; background: transparent; transition: background-color 0.3s; }
.story-node.is-on { color: var(--lime); opacity: 1; }
.story-node.is-on::before { background: var(--lime); }
.no-gsap .story-steps { min-height: 0 !important; }
.no-gsap .story-step { position: static !important; margin-bottom: 3rem; }

/* ---------- platform tab panels ---------- */
.tab-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s linear 0.35s; }
.tab-panel[data-active='true'] { opacity: 1; visibility: visible; transition-delay: 0s; }
.tab-panel .stag { opacity: 0; transform: translateY(20px); }
.tab-panel[data-active='true'] .stag { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }

/* odometer digits */
.roll { display: inline-flex; vertical-align: bottom; line-height: 1; }
.roll-digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.roll-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.1, 1); }
.roll-col > span { display: block; height: 1em; line-height: 1; text-align: center; }
.roll-sep { display: inline-block; line-height: 1; }

/* payouts */
.po-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 0.85rem; box-shadow: 3px 3px 0 var(--ink); }
.po-pill { margin-left: auto; padding: 0.2rem 0.65rem; border: 2px solid var(--ink); border-radius: 999px; font: 700 0.64rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; background: var(--cream); transition: background-color 0.25s; }
.po-row[data-status='sending'] .po-pill { background: var(--flare); animation: blink 0.7s steps(2) infinite; }
.po-row[data-status='landed'] .po-pill { background: var(--lime); }
.po-time { min-width: 2.6rem; text-align: right; font: 700 0.7rem 'Space Mono', monospace; }

/* treasury sparkline */
.spark-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tab-panel[data-active='true'] .spark-path { animation: draw 1.8s 0.3s var(--ease) forwards; }
.spark-area { opacity: 0; }
.tab-panel[data-active='true'] .spark-area { animation: fadein 1s 1.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.45; } }

/* switches */
.switch { position: relative; width: 3.1rem; height: 1.75rem; flex-shrink: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); cursor: pointer; transition: background-color 0.25s; }
.switch-knob { position: absolute; left: 0.16rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); transition: transform 0.3s var(--ease), background-color 0.25s; }
.switch[aria-checked='true'] { background: var(--lime); }
.switch[aria-checked='true'] .switch-knob { transform: translateX(1.3rem); }
.mini-card { transition: filter 0.4s, transform 0.4s var(--ease); }
.mini-card[data-frozen='true'] { filter: grayscale(1) contrast(0.9); transform: rotate(-2deg) scale(0.97); }

/* ---------- 3D cards ---------- */
.stage-3d { perspective: 1600px; perspective-origin: 50% 42%; }
.stack-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; --cw: 380px; }
.vcard-face { position: absolute !important; inset: 0; }
.vcard {
  position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 1.586;
  margin-left: calc(var(--cw) / -2); margin-top: calc(var(--cw) / -3.17);
  transform-style: preserve-3d; will-change: transform; border-radius: 1.35rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(245, 241, 230, 0.16);
}

/* ---------- stats ---------- */
#stats { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#stats::-webkit-scrollbar { display: none; }
#stats .stat-panel { scroll-snap-align: center; }
#stats.is-hpin { overflow: hidden; height: 100vh; height: 100svh; scroll-snap-type: none; }
.no-gsap #stats { overflow-x: auto; height: auto; }

/* ---------- code window ---------- */
.code { font: 400 0.86rem/1.7 'Space Mono', ui-monospace, monospace; white-space: pre; tab-size: 2; }
.tk-c { color: #7c7c7c; }
.tk-s { color: var(--lime); }
.tk-k { color: #9aa6ff; }
.tk-n { color: #ff8a5c; }
.tk-f { color: var(--cream); font-weight: 700; }
.tk-u { color: #7dd3fc; }
.caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--lime); animation: blink 0.9s steps(2) infinite; }
#code-resp { opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.6s var(--ease); }
#code-resp.is-on { opacity: 1; transform: none; }
#code-status .st-dot { background: #8a8a8a; }
#code-status.is-on .st-dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.25); }

/* ---------- range slider ---------- */
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; cursor: pointer; outline-offset: 6px;
  border: 2px solid var(--ink); border-radius: 999px;
  background: linear-gradient(to right, var(--lime) 0, var(--lime) var(--p, 50%), var(--cream) var(--p, 50%), var(--cream) 100%);
}
.range::-webkit-slider-runnable-track { height: 12px; background: transparent; border-radius: 999px; }
.range::-moz-range-track { height: 12px; background: transparent; border-radius: 999px; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -10px; border-radius: 9px;
  background: var(--cream); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.15s var(--ease);
}
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: var(--cream); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---------- FAQ ---------- */
.faq-item .faq-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.faq-item[data-open='true'] .faq-grid { grid-template-rows: 1fr; }
.faq-item .faq-plus { transition: transform 0.4s var(--ease), background-color 0.2s; }
.faq-item[data-open='true'] .faq-plus { transform: rotate(45deg); background: var(--lime); }
.faq-item[data-open='true'] { background: var(--cream); box-shadow: 6px 6px 0 var(--ink); translate: -3px -3px; }
.faq-item { transition: box-shadow 0.3s var(--ease), translate 0.3s var(--ease), background-color 0.3s; }

/* ---------- misc ---------- */
.rot-slow { animation: spin 22s linear infinite; }
.rot-slow-rev { animation: spin 30s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.burst-shape { clip-path: polygon(50% 0%, 61% 8%, 75% 5%, 82% 18%, 95% 22%, 93% 37%, 100% 50%, 93% 63%, 95% 78%, 82% 82%, 75% 95%, 61% 92%, 50% 100%, 39% 92%, 25% 95%, 18% 82%, 5% 78%, 7% 63%, 0% 50%, 7% 37%, 5% 22%, 18% 18%, 25% 5%, 39% 8%); }
[data-plan] { will-change: transform; }
#cta-msg[data-state='error'] { color: #ffd0c0; }
#cta-msg[data-state='ok'] { color: var(--lime); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .roll-col { transition: none; }
  .marquee-track { transform: none !important; }
}