/* Hoodveil home. Layout grid: 90rem page, 5rem inset; rem scales with the viewport (1rem = 16px at 1440). */
:root {
  --page-w: 90rem; --inset: 5rem; --gap: 4.5rem; --bar-h: 5.5rem;
  --t-sec: 2.75rem; --t-sec-em: 3.125rem; --l-sec: 3.875rem;
  --title-em: #d6dadd; --glass-b: rgba(255,255,255,.22); --card: rgba(11,12,14,.86);
  --float: 0 .5rem 1.375rem -.25rem rgba(0,0,0,.5);
}
@media (width <= 1200px) { :root { --page-w: 64rem; --inset: 3rem; --gap: 4rem; --t-sec: 2.25rem; --t-sec-em: 2.5rem; --l-sec: 3.125rem; } }
@media (width <= 900px)  { :root { --page-w: 48rem; --inset: 2.5rem; --gap: 3.5rem; --t-sec: 1.875rem; --t-sec-em: 2rem; --l-sec: 2.625rem; --bar-h: 4rem; } }
@media (width <= 580px)  { :root { --page-w: 24.375rem; --inset: 1.25rem; --gap: 3rem; --t-sec: 1.5rem; --t-sec-em: 1.625rem; --l-sec: 2rem; --bar-h: 3.5rem; } }
html { font-size: min(1.111111vw, 21.333333px); color-scheme: dark; scrollbar-color: #3a3d41 #000; }
@media (width <= 1200px) { html { font-size: min(1.5625vw, 16px); } }
@media (width <= 900px)  { html { font-size: min(2.083333vw, 16px); } }
@media (width <= 580px)  { html { font-size: min(4.102564vw, 16px); } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { overflow-x: clip; }
h1, h2, h3, h4, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; white-space: nowrap; }
.mono.wrapok { white-space: normal; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.sans { font-family: var(--sans); font-weight: 500; }
.page { overflow-x: clip; }
main { position: relative; margin: 0 auto; width: var(--page-w); overflow-y: clip; }
.sp { height: var(--gap); }
section, footer { position: relative; }
.ab { position: absolute; }
.tag-ex { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: 0 .375rem; border-radius: .3125rem; border: 1px dashed rgba(255,255,255,.22); font-family: var(--mono); font-size: .6875rem; line-height: 1.0625rem; letter-spacing: .03rem; color: var(--dim); text-transform: uppercase; }
[data-live] .tag-ex, .tag-ex[data-off] { display: none; }

/* backdrop */
.bg { position: absolute; inset: 0; pointer-events: none; }
.bg-top { position: absolute; left: 0; right: 0; top: 0; height: 72rem; }
.bg-light { position: absolute; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 35rem; background: linear-gradient(to bottom, rgba(255,255,255,.05), transparent); }
.bg-dots { position: absolute; inset: 0 calc(50% - 50vw); background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px); background-size: 1.5rem 1.5rem; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 62% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 70% 55% at 62% 30%, #000 10%, transparent 70%); opacity: .55; }
.bg-specks { position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,.35) 0 1px, transparent 2px), radial-gradient(circle at 34% 9%, rgba(255,255,255,.25) 0 1px, transparent 2px), radial-gradient(circle at 71% 22%, rgba(255,255,255,.3) 0 1px, transparent 2px), radial-gradient(circle at 88% 41%, rgba(255,255,255,.25) 0 1px, transparent 2px), radial-gradient(circle at 46% 63%, rgba(255,255,255,.2) 0 1px, transparent 2px), radial-gradient(circle at 7% 74%, rgba(255,255,255,.2) 0 1px, transparent 2px); }

/* light stream */
#veil-stream { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; pointer-events: none; mix-blend-mode: screen; display: block; }
.hero-fallback { position: absolute; left: calc(50% - 50vw); width: 100vw; top: calc(var(--bar-h) * -1); height: calc(100% + var(--bar-h)); object-fit: cover; opacity: .9; pointer-events: none; }

/* buttons */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.5rem; border-radius: 999px; font-weight: 500; font-size: .875rem; line-height: 1.25rem; white-space: nowrap; cursor: pointer; border: 0; background: none; transition: transform .2s var(--ease); }
.pill.lg { height: 3rem; font-size: 1rem; line-height: 1.5rem; }
.pill svg { flex: none; }
.pill.white { background: #f4f5f6; color: #0b0b0d; box-shadow: var(--float); }
.pill.white:hover { background: #fff; }
.glass { color: #111; border: 1px solid rgba(255,255,255,.7); background: linear-gradient(to bottom, #ffffff, #e9eaec); box-shadow: var(--float); }
.glass:hover { background: #fff; }
.ring { position: absolute; inset: -1px; border-radius: 999px; padding: 1px; background: conic-gradient(from 0deg, var(--ring-c, var(--accent)) var(--fill, 0%), transparent var(--fill, 0%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; transition: --fill .5s var(--ease); }
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.pill:hover .ring { --fill: 100%; }

/* top bar */
.tb { position: fixed; inset-inline: 0; top: 0; z-index: 40; }
.tb-plate { position: absolute; inset: 0; background: rgba(0,0,0,.84); opacity: 0; transition: opacity .3s var(--ease); }
.tb.scrolled .tb-plate { opacity: 1; }
.tb-in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar-h); width: var(--page-w); margin: 0 auto; padding: 0 var(--inset); }
.tb-logo { justify-self: start; display: flex; }
.tb-logo .logo, .f-logo .logo, .f-co .logo { display: block; width: 2.75rem; height: 2.75rem; color: #fff; background: linear-gradient(145deg, #f6cf7c, #dc9d3c 55%, #bb7a22); border-radius: 28%; padding: .42rem; box-sizing: border-box; box-shadow: 0 .4rem 1.2rem -.3rem rgba(201,138,46,.55); }
.tb-links { display: flex; gap: 2.5rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.tb-links a { transition: color .15s var(--ease); }
.tb-links a:hover { color: var(--accent); }
.tb-act { display: flex; align-items: center; gap: .75rem; justify-self: end; }
.tb-soc { display: flex; gap: .5rem; }
.tb-soc a { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); display: grid; place-items: center; color: rgba(255,255,255,.8); transition: color .15s, background .15s; }
.tb-soc a:hover { color: #fff; background: rgba(255,255,255,.09); }
.burger { display: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); position: relative; cursor: pointer; padding: 0; }
.burger i { position: absolute; height: 2px; border-radius: 2px; background: rgba(255,255,255,.9); left: .6875rem; width: 1rem; transition: transform .25s var(--ease), opacity .2s; }
.burger i:nth-child(1) { top: .8125rem; } .burger i:nth-child(2) { top: 1.1875rem; } .burger i:nth-child(3) { top: 1.5rem; left: .875rem; width: .625rem; }
.tb.open .burger i:nth-child(1) { transform: translateY(.375rem) rotate(45deg); }
.tb.open .burger i:nth-child(2) { opacity: 0; }
.tb.open .burger i:nth-child(3) { transform: translateY(-.3125rem) rotate(-45deg); left: .6875rem; width: 1rem; }
.drawer { position: absolute; left: 8px; right: 8px; top: 8px; z-index: -1; transform-origin: top right; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.1); background: #131416; padding: 3.5rem .5rem .5rem; visibility: hidden; opacity: 0; transform: scale(.96); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.tb.open .drawer { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.drawer ul { display: flex; flex-direction: column; gap: 2px; }
.drawer a { display: flex; gap: .75rem; align-items: center; border-radius: .875rem; padding: .625rem; }
.drawer a:hover { background: rgba(255,255,255,.04); }
.drawer .t { width: 2.25rem; height: 2.25rem; border-radius: .6875rem; border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; font-family: var(--mono); font-size: .875rem; color: var(--muted); flex: none; }
.drawer a:hover .t { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.1); color: var(--accent); }
.drawer b { display: block; font-weight: 500; font-size: 1rem; line-height: 1.5rem; }
.drawer small { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.tb-space { height: var(--bar-h); }
@media (width <= 1200px) { .tb-links { gap: 2rem; } }
@media (width <= 900px) { .tb-links { gap: 1.5rem; } .tb-soc { display: none; } }
@media (width <= 580px) { .tb-links { display: none; } .burger { display: block; } .tb-act { gap: .5rem; } .tb-logo .logo { width: 2.5rem; height: 2.5rem; } }

/* intro (first paint) */
html[data-intro] [data-in], html[data-intro] .tb-in { opacity: 0; transform: translateY(1.25rem); animation: hv-safe .6s 3s forwards; }
@keyframes hv-safe { to { opacity: 1; transform: none; } }
[data-in], .tb-in { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* section titles */
.title { font-weight: 600; font-size: var(--t-sec); line-height: var(--l-sec); letter-spacing: -.125rem; background: linear-gradient(to bottom, #fff, #bababa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title em, .h-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--t-sec-em); line-height: 1; -webkit-text-fill-color: var(--title-em); color: var(--title-em); letter-spacing: 0; padding-right: .06em; }
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.shead-l { width: 47.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.shead-a { width: 27.5rem; font-size: 1rem; line-height: 1.5rem; color: var(--muted); margin-bottom: .25rem; }
@media (width <= 1200px) { .shead { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .shead-l { width: 100%; align-items: center; } .shead-a { width: 35rem; margin: 0; } }
@media (width <= 580px) { .shead { gap: .75rem; } .shead-a { width: 100%; } }

/* reveal primitives */
.js [data-rise] { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].on { opacity: 1; transform: none; }
.js [data-focus] { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--rv, 0%) - 40%), transparent var(--rv, 0%)); mask-image: linear-gradient(90deg, #000 calc(var(--rv, 0%) - 40%), transparent var(--rv, 0%)); transition: --rv 1.3s var(--ease); transition-delay: var(--d, 0ms); }
@property --rv { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.js [data-focus].on { --rv: 140%; }
.js [data-focus].done { -webkit-mask-image: none; mask-image: none; }
.js [data-draw] { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-draw].on { transform: none; }

/* hero */
#hero { --frame: 44.5rem; --extra: max(0px, calc(100svh - var(--bar-h) - var(--frame))); height: calc(var(--frame) + var(--extra)); }
.hero-in { position: absolute; inset-inline: 0; top: calc(var(--extra) / 2); height: var(--frame); }
.h-col { position: absolute; left: 5rem; top: 0; bottom: 0; width: 36.25rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 2; }
.h-title { width: 36.25rem; font-weight: 600; font-size: 4.5rem; line-height: 5.25rem; letter-spacing: -.125rem; background: linear-gradient(to bottom, #fff, #bababa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-title em { font-size: 4.875rem; }
.h-sub { margin-top: 2.5rem; width: 29.4375rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--muted); }
.h-act { margin-top: 2rem; display: flex; gap: .75rem; }
.h-ca { margin-top: .9rem; min-height: 3rem; max-width: 100%; }
.ca-soon { opacity: .75; cursor: default; color: var(--muted); padding: 0 1.5rem 0 1.5rem; font-family: var(--mono); font-size: .875rem; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.02); }
.ca-live { display: flex; align-items: center; gap: .625rem; min-height: 3rem; max-width: 100%; padding: .375rem .375rem .375rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,12,.82); box-shadow: var(--float); }
.ca-lab { font-family: var(--mono); font-size: .75rem; letter-spacing: .08rem; color: #0b0b0d; background: var(--accent); border-radius: .375rem; padding: .0625rem .4375rem; flex: none; }
.ca-addr { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: #fff; letter-spacing: .01rem; overflow-wrap: anywhere; min-width: 0; }
.ca-copy { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); font-family: var(--mono); font-size: .75rem; letter-spacing: .06rem; color: #fff; cursor: pointer; flex: none; }
.ca-copy:hover { background: rgba(255,255,255,.14); }
.ca-copy.ok { background: var(--accent); color: #0b0b0d; border-color: var(--accent); }
.h-note { margin-top: 1.5rem; color: var(--muted); max-width: 34rem; line-height: 1.6; white-space: normal; }

.wfit { position: absolute; left: 40.625rem; top: 2.75rem; width: calc(49.375rem * var(--ws)); height: calc(39rem * var(--ws)); --ws: 1; }
.wtilt { position: absolute; inset: 0; transform-origin: 76% 50%; pointer-events: none; transition: transform .6s var(--ease); }
.wscale { position: absolute; left: 0; top: 0; width: 49.375rem; height: 39rem; transform: scale(var(--ws)); transform-origin: 0 0; --gx: 6.875rem; }
.w-bloom { position: absolute; left: -13rem; top: -12.75rem; width: 87.5rem; height: 63.75rem; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),.06) 55%, transparent); pointer-events: none; }
.win { position: absolute; left: var(--gx); top: 0; width: 42.5rem; height: 39rem; border-radius: 1.75rem; background: linear-gradient(160deg, rgba(20,19,24,.9), rgba(10,10,12,.86) 55%, rgba(14,12,18,.9)); overflow: clip; }
.win-ring { position: absolute; left: var(--gx); top: 0; width: 42.5rem; height: 39rem; border-radius: 1.75rem; padding: 1px; background: linear-gradient(to bottom right, rgba(var(--accent-rgb),.5), rgba(var(--accent-rgb),.22) 30%, rgba(255,255,255,.07) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.w-grid { position: absolute; inset: 5.5rem 0 0 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px); background-size: 1.25rem 1.25rem; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); opacity: .5; }
.w-chrome .cd { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.2); }
.w-ttl { left: 2.4375rem; top: 2.4375rem; font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.w-div { left: 10.4rem; top: 2.75rem; width: 1px; height: .875rem; background: rgba(255,255,255,.16); }
.w-meta { left: 11.65rem; top: 2.5625rem; color: var(--ink); }
.w-rule { left: 0; top: 5.4375rem; width: 100%; height: 1px; background: rgba(255,255,255,.07); }
.w-tools { left: 2.4375rem; top: 6.9375rem; display: flex; flex-direction: column; gap: .5rem; }
.w-tools span { width: 2.25rem; height: 2.25rem; border-radius: .625rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); display: grid; place-items: center; color: rgba(255,255,255,.75); }
.w-tools span.on { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; }
.w-tools svg { width: 1.25rem; height: 1.25rem; }
.w-zoom { left: 36.3125rem; top: 6.9375rem; border-radius: .5rem; padding: .3125rem .6875rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--muted); }
.w-run { right: 2.4375rem; top: 2.5625rem; text-align: right; color: var(--accent); transition: opacity .3s; }
.w-edges { left: 0; top: 0; width: 49.375rem; height: 39rem; overflow: visible; pointer-events: none; }
.w-edges path { fill: none; stroke: rgba(var(--accent-rgb),.55); stroke-width: 1.4; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s var(--ease); }
.w-edges path#e2, .w-edges path#e4 { stroke: rgba(255,255,255,.28); }
.w-edges.on path { stroke-dashoffset: 0; }
.w-edges .edot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.9)); }
.node { position: absolute; height: 4.75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(24,24,28,.92); padding: .8125rem 1.1875rem; display: flex; flex-direction: column; gap: .25rem; white-space: nowrap; box-shadow: var(--float); opacity: 0; transform: translateY(.5rem) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .6s; }
.node.on { opacity: 1; transform: none; }
.node b { font-weight: 500; font-size: 1rem; line-height: 1.5rem; }
.node span { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: var(--dim); }
.node.glow { box-shadow: 0 0 16px 0 rgba(var(--accent-rgb),.22), 0 10px 22px -4px rgba(0,0,0,.55); }
.node.hot { border-color: rgba(var(--accent-rgb),.55); }
.n1 { left: calc(var(--gx) + 10.5625rem); top: 10.125rem; width: 13.125rem; }
.n2 { left: calc(var(--gx) + 10.5625rem); top: 20.125rem; width: 13.125rem; }
.n3 { left: calc(var(--gx) + 28.6875rem); top: 15.125rem; width: 11.25rem; }
.ntrig { left: 0; top: 15.25rem; width: 12.5rem; }
.wchip { left: calc(var(--gx) + 28.6875rem); top: 20.5rem; display: flex; align-items: center; gap: .5rem; border-radius: .375rem; border: 1px solid rgba(255,255,255,.12); background: rgba(22,23,26,.9); padding: .1875rem .6875rem; color: var(--muted); opacity: 0; transition: opacity .6s; }
.wchip.on { opacity: 1; }
.wchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.8); }
.blab { border-radius: .375rem; border: 1px solid rgba(255,255,255,.1); background: rgba(22,23,26,.9); padding: .1875rem .4375rem; color: var(--muted); opacity: 0; transition: opacity .6s; }
.blab.on { opacity: 1; }
.bl1 { left: calc(var(--gx) + 6.5rem); top: 13.5rem; }
.bl2 { left: calc(var(--gx) + 6.5rem); top: 19.625rem; }
.lr-rule { left: 2.4375rem; top: 27.5625rem; width: 37.5rem; height: 1px; background: rgba(255,255,255,.07); }
.lr-lab { left: 2.4375rem; top: 28.8125rem; color: var(--dim); }
.lr-list { left: 2.4375rem; top: 30.875rem; width: 37.5rem; height: 5.6rem; overflow: clip; }
.lr-row { position: absolute; left: 0; right: 0; top: 0; height: 1.3125rem; display: flex; align-items: center; gap: .9rem; padding-left: 1.25rem; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; white-space: nowrap; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.lr-row i { position: absolute; left: 0; top: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.lr-row.new i { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.9); }
.lr-row .t { flex: none; min-width: 4.75rem; color: var(--dim); }
.lr-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.lr-row .d { flex: none; color: var(--dim); }
@media (width <= 1200px) {
  .h-col { left: 3rem; width: 23.75rem; }
  .h-title { width: 23.75rem; font-size: 2.75rem; line-height: 3.25rem; }
  .h-title em { font-size: 3rem; }
  .h-sub { width: 23.75rem; margin-top: 1.5rem; }
  .h-act { margin-top: 1.75rem; flex-wrap: wrap; }
  .h-note { margin-top: 1.25rem; white-space: normal; }
  .wfit { left: 27rem; top: 3rem; --ws: .75; }
}
@media (width <= 900px) {
  #hero { height: auto; --extra: 0px; }
  .hero-in { position: relative; top: 0; height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem var(--inset) 2rem; }
  .h-col { position: relative; left: auto; top: auto; bottom: auto; width: 100%; align-items: center; }
  .h-title { width: 100%; font-size: 2.25rem; line-height: 2.875rem; }
  .h-title em { font-size: 2.5rem; }
  .h-sub { width: 30rem; margin-top: 1rem; }
  .h-act { margin-top: 1.5rem; justify-content: center; }
  .wfit { position: relative; left: auto; top: auto; margin-top: 3rem; --ws: .87; }
  .wtilt { transform-origin: 50% 66%; }
}
@media (width <= 580px) {
  .hero-in { padding: 4.5rem var(--inset) 5rem; }
  .h-title { font-size: 1.75rem; line-height: 2.375rem; letter-spacing: -.08rem; }
  .h-title em { font-size: 2rem; }
  .h-sub { width: 100%; font-size: 1rem; line-height: 1.5rem; margin-top: 1.5rem; }
  .h-act { flex-direction: column; width: 100%; }
  .h-act .pill { width: 100%; }
  .h-ca { width: 100%; display: flex; justify-content: center; margin-top: 1.5rem; }
  .ca-live { border-radius: 1.25rem; padding: .5rem .5rem .5rem .75rem; text-align: left; }
  .ca-addr { font-size: .78rem; line-height: 1.15rem; }
  .ca-copy span { display: none; }
  .ca-copy { width: 2.25rem; padding: 0; justify-content: center; }
  .h-note, .wfit { display: none; }
}

/* steps track */
#track { height: 22.125rem; overflow: clip; }
.trk-cap { position: absolute; left: 5rem; top: 6rem; color: var(--muted); }
.trk-cap2 { display: none; }
.trk-row { position: absolute; left: 5rem; top: 10rem; display: flex; gap: 7.125rem; }
.trk-row li { position: relative; width: 3.75rem; height: 3.75rem; flex: none; }
.tile { position: absolute; inset: 0; border-radius: 1rem; overflow: clip; opacity: 0; transform: scale(.8); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.trk-row.on .tile { opacity: 1; transform: none; }
.tile > span { position: absolute; inset: 0; border-radius: 1rem; display: grid; place-items: center; font-family: var(--mono); font-size: .8125rem; letter-spacing: 1px; transition: opacity .5s var(--ease); }
.tile .idle { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--muted); }
.tile .act { border: 1px solid rgba(var(--accent-rgb),.55); background: linear-gradient(to bottom, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08) 45%, rgb(14,13,18)); color: var(--accent); opacity: 0; box-shadow: 0 0 18px rgba(var(--accent-rgb),.25) inset; }
.trk-row li.hot .act { opacity: 1; }
.trk-row .lab { position: absolute; top: 4.875rem; left: 50%; transform: translateX(-50%); width: 6rem; text-align: center; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: var(--muted); white-space: nowrap; }
.trk-row li:first-child .lab { left: 0; transform: none; text-align: left; }
.trk-row li:last-child .lab { left: auto; right: 0; transform: none; text-align: right; }
.trk-row li.hot .lab { color: #fff; }
.trk-rail { position: absolute; inset: 0; pointer-events: none; }
.trk-rail svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.trk-rail line { stroke: rgba(255,255,255,.35); stroke-width: 1.4; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.pkt { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.8); opacity: 0; }
@media (width <= 1200px) { #track { height: 13.25rem; } .trk-cap { left: 3rem; top: 2rem; } .trk-row { left: 3rem; top: 5.25rem; gap: 7.1rem; } .trk-row .h1024 { display: none; } }
@media (width <= 900px) { #track { height: 14.25rem; } .trk-cap { left: 2.5rem; top: 2.5rem; } .trk-row { left: 2.5rem; top: 5.75rem; gap: 4.1rem; } .trk-row li:first-child .lab, .trk-row li:last-child .lab { left: 50%; right: auto; transform: translateX(-50%); text-align: center; } }
@media (width <= 580px) { #track { display: none; } }

/* slab band behind the middle sections */
.band { position: relative; }
.band::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: rgba(6,6,8,.22); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); pointer-events: none; }

/* product */
#stealth { display: flex; flex-direction: column; padding: 6rem 5rem 2rem; }
#stealth .shead { padding-bottom: 4rem; }
.hair { height: 1px; background: rgba(255,255,255,.09); width: 100%; }
.frow { display: flex; align-items: center; justify-content: space-between; padding: 3rem 0; gap: 2rem; }
.frow.rev { flex-direction: row-reverse; }
.frow.last { padding-bottom: 0; }
.fcopy { width: 27.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fidx { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; letter-spacing: 1px; color: rgba(var(--accent-rgb),.55); }
.fttl { font-weight: 500; font-size: 1.625rem; line-height: 2rem; letter-spacing: -.0625rem; }
.fbody { font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.pcard { width: 47.5rem; min-height: 20.5rem; border-radius: 1.625rem; border: 1px solid rgba(255,255,255,.07); background: var(--card); overflow: clip; position: relative; padding: 1.9375rem; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; min-width: 0; }
.pc-head { display: flex; justify-content: space-between; align-items: center; min-height: 1.25rem; gap: 1rem; }
.pc-head.start { justify-content: flex-start; gap: 1.5rem; }
.pc-head b { font-weight: 400; color: #fff; }
.pc-rule { height: 1px; background: rgba(255,255,255,.07); margin: .6875rem 0 .5rem; }
.srow { display: grid; grid-template-columns: 1rem 10.25rem 1fr 6rem; align-items: center; gap: .75rem; height: 2.625rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.srow .ic { width: 1rem; height: 1rem; }
.srow .ic.ok { color: var(--accent); }
.srow .ic.dim { color: var(--dim); }
.srow .trk { position: relative; height: .75rem; }
.srow .sp { position: absolute; top: 0; height: .75rem; border-radius: .25rem; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.pcard.on .srow .sp { transform: none; }
.srow .sp.hot { background: linear-gradient(to right, var(--brand), var(--accent)); }
.srow .sp.w { background: rgba(255,255,255,.8); }
.srow .sp.pend { background: rgba(var(--accent-rgb),.16); border: 1px dashed rgba(var(--accent-rgb),.6); animation: pend 1.6s ease-in-out infinite; }
@keyframes pend { 50% { opacity: .45; } }
.srow .v { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.axis { display: grid; grid-template-columns: 1rem 10.25rem 1fr 6rem; gap: .75rem; margin-top: .75rem; }
.axis .ln { grid-column: 3; position: relative; height: 2.25rem; border-top: 1px solid rgba(255,255,255,.09); }
.axis .tk { position: absolute; top: 0; width: 1px; height: 5px; background: rgba(255,255,255,.16); }
.axis .tl { position: absolute; top: .5625rem; transform: translateX(-50%); color: var(--dim); }
.ib-body { position: relative; height: 16rem; }
.dots3 { position: absolute; left: 2.5rem; top: 3rem; display: flex; gap: 4px; transition: opacity .3s; }
.dots3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: blink 1.2s infinite; }
.dots3 i:nth-child(2) { animation-delay: .2s; } .dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }
.pcard.msg-on .dots3 { opacity: 0; }
.msg { position: absolute; inset: 0; opacity: 0; transform: translateY(.5rem); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pcard.msg-on .msg { opacity: 1; transform: none; }
.msg .av { position: absolute; left: 0; top: .75rem; width: 1.75rem; height: 1.75rem; border-radius: .55rem; background: linear-gradient(145deg, #f6cf7c, #dc9d3c 55%, #bb7a22); border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; color: #fff; }
.msg .av svg { width: 1.1rem; height: 1.1rem; }
.msg .who { position: absolute; left: 2.5rem; top: 1rem; font-family: var(--sans); font-weight: 500; font-size: .875rem; }
.msg .tm { position: absolute; right: 0; top: 1rem; color: var(--dim); }
.msg .tx { position: absolute; left: 2.5rem; top: 3.1875rem; right: 4rem; font-family: var(--sans); font-size: 1rem; line-height: 1.5rem; color: var(--muted); white-space: normal; }
.msg .bar { position: absolute; left: 2.5rem; top: 6.75rem; width: 3px; height: 5rem; border-radius: 999px; background: linear-gradient(var(--accent), rgba(var(--accent-rgb),.2)); transform-origin: top; transform: scaleY(0); transition: transform .8s var(--ease) .3s; }
.pcard.msg-on .msg .bar { transform: none; }
.msg dl { position: absolute; left: 3.5rem; top: 6.75rem; display: grid; grid-template-columns: 7.5rem auto; row-gap: .5rem; }
.msg dt { color: var(--dim); }
.msg dd { font-family: var(--sans); font-weight: 500; color: #fff; margin: 0; }
.msg .btns { position: absolute; left: 2.5rem; top: 12.75rem; display: flex; gap: .5rem; }
.mbtn { display: inline-flex; align-items: center; gap: .5rem; border-radius: .5rem; font-family: var(--sans); font-weight: 500; font-size: .875rem; padding: .75rem 1rem; box-shadow: var(--float); }
.mbtn.a { background: var(--brand); color: var(--on-brand); }
.mbtn.b { background: #131416; border: 1px solid rgba(255,255,255,.16); padding: .6875rem .9375rem; }
.msg .wait { position: absolute; right: 0; top: 13.5rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.msg .wait b { font-weight: 400; }
.chart { position: relative; height: 16.5rem; margin-top: .5rem; }
.bars { position: absolute; left: 0; right: 0; bottom: 2.25rem; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 .125rem; }
.iso { position: relative; width: 4.75rem; }
.iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.iso .body { transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); transform-box: fill-box; }
.pcard.on .iso .body { transform: none; }
.iso .glw { position: absolute; left: -30%; top: -1.5rem; width: 160%; height: 4.5rem; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.6), transparent); opacity: 0; transition: opacity 1s 1.2s; pointer-events: none; }
.pcard.on .iso.top .glw { opacity: 1; }
.base { position: absolute; left: 0; right: 0; bottom: 2rem; height: 1px; background: rgba(255,255,255,.08); }
.days { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--dim); }
.days span { width: 4.75rem; text-align: center; }
.days .on { color: var(--accent); }
@media (width <= 1200px) {
  #stealth { padding: 5rem 3rem 2rem; } #stealth .shead { padding-bottom: 2rem; }
  .fcopy { width: 22.5rem; } .pcard { width: 33rem; padding: 1.4375rem; }
  .srow, .axis { grid-template-columns: .75rem 8.5rem 1fr 4.5rem; gap: .5rem; }
  .iso, .days span { width: 3.5rem; } .fttl { font-size: 1.5rem; }
}
@media (width <= 900px) {
  #stealth { padding: 2.75rem 2.5rem 2rem; }
  .frow, .frow.rev { flex-direction: column; gap: 2rem; }
  .fcopy { width: 32.5rem; text-align: center; align-items: center; }
  .pcard { width: 100%; max-width: 43rem; }
  .fttl { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (width <= 580px) {
  #stealth { padding: 3rem 1.25rem 2rem; }
  .frow { padding: 1.5rem 0; gap: 1.5rem; } .fcopy { width: 100%; }
  .pcard { padding: 1.1875rem; font-size: .75rem; line-height: 1.125rem; }
  .pc-head { font-size: .75rem; }
  .srow, .axis { grid-template-columns: .75rem 6.5rem 1fr 3.25rem; gap: .4rem; height: auto; }
  .srow { height: 2.2rem; }
  .axis .tl { font-size: .75rem; }
  .fttl { font-size: 1.125rem; line-height: 1.5rem; }
  .hair.in { display: none; }
  .msg .tx { font-size: .875rem; line-height: 1.25rem; right: 0; }
  .msg dl { grid-template-columns: 5.5rem auto; left: 3.25rem; }
  .msg .btns { top: 13rem; }
  .iso, .days span { width: 2.6875rem; }
  .ib-body { height: 18rem; }
  .msg .wait { top: 16.25rem; left: 2.5rem; right: auto; }
}

/* statement panel (opens while you scroll) */
.st-wrap { position: relative; height: calc(34.5rem + 15rem); }
.st-stick { position: sticky; top: calc(50lvh - 17.25rem); clip-path: inset(var(--clip, 50%) round 2rem); }
#statement { position: relative; overflow: clip; border-radius: 2rem; background: var(--brand); height: 34.5rem; color: var(--on-brand); }
.st-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--on-brand-rgb),.16) 1px, transparent 1.3px); background-size: 3rem 3rem; background-position: 1.5rem 1.5rem; }
.st-kick { position: absolute; top: 4rem; left: 0; right: 0; text-align: center; color: rgba(var(--on-brand-rgb),.7); }
.st-title { position: absolute; top: 6.75rem; left: 5rem; right: 5rem; text-align: center; font-weight: 600; font-size: var(--t-sec); line-height: var(--l-sec); letter-spacing: -.125rem; }
.st-title .ln { display: block; }
.st-title .w { display: inline-block; opacity: .12; transform: translateY(.4rem); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.st-title .w.on { opacity: 1; transform: none; }
.st-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--t-sec-em); line-height: 1; letter-spacing: 0; }
.st-mark { position: absolute; top: 18.25rem; left: calc(50% - 2.375rem); width: 4.75rem; height: 4.75rem; transform: scale(.6); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.st-mark.on { transform: none; opacity: 1; }
.tile-mark { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 31%; background: linear-gradient(145deg, #f6cf7c, #dc9d3c 55%, #bb7a22); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 12px 30px -8px rgba(120,64,8,.6); color: #fff; }
.tile-mark svg { width: 58%; height: 58%; }
.st-stem { position: absolute; top: 23rem; left: calc(50% - .5px); width: 1px; height: 6.375rem; transform-origin: top; transform: scaleY(var(--stem, 0)); background: linear-gradient(to bottom, rgba(var(--on-brand-rgb),.85), rgba(var(--on-brand-rgb),.2)); }
.st-cap { position: absolute; top: 28rem; left: 5rem; color: rgba(var(--on-brand-rgb),.65); }
.st-ticks { position: absolute; top: 30.25rem; left: 5rem; right: 5rem; height: 1.125rem; }
.st-ticks svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-ticks line { stroke: var(--on-brand); stroke-width: 1; opacity: 0; transition: opacity .25s; }
.st-ticks line.on { opacity: var(--o, .55); }
.st-now { position: absolute; top: 29.375rem; left: calc(50% - 1.875rem); width: 3.75rem; text-align: center; opacity: 0; transition: opacity .4s; }
.st-dot { position: absolute; top: 30.8rem; left: calc(50% - 5px); width: 10px; height: 10px; transform: scale(0); transition: transform .5s var(--ease); }
.st-dot b { position: absolute; inset: 0; border-radius: 50%; background: var(--on-brand); box-shadow: 0 0 0 2px rgba(var(--on-brand-rgb),.3); }
.st-dot i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--on-brand-rgb),.6); animation: halo 2.2s ease-out infinite; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
#statement.done .st-now { opacity: 1; } #statement.done .st-dot { transform: none; }
.st-hours { position: absolute; top: 31.75rem; left: 5rem; right: 5rem; height: 1.25rem; color: rgba(var(--on-brand-rgb),.7); }
.st-hours li { position: absolute; top: 0; width: 5rem; text-align: center; transform: translateX(-50%); opacity: 0; transition: opacity .5s; }
.st-hours li:first-child { transform: none; text-align: left; }
.st-hours li:last-child { transform: translateX(-100%); text-align: right; }
#statement.done .st-hours li { opacity: 1; }
@media (width <= 1200px) {
  .st-wrap { height: calc(33rem + 15rem); } #statement { height: 33rem; }
  .st-title { top: 5.25rem; left: 3rem; right: 3rem; } .st-mark { top: 14.5rem; } .st-stem { top: 19.25rem; height: 8.625rem; }
  .st-cap { top: 25.375rem; left: 3rem; } .st-ticks { top: 28rem; left: 3rem; right: 3rem; } .st-now { top: 27.1rem; } .st-dot { top: 28.5rem; }
  .st-hours { top: 29.75rem; left: 3rem; right: 3rem; } .st-kick { top: 3rem; }
}
@media (width <= 900px) { .st-title { top: 4.75rem; left: 2.5rem; right: 2.5rem; } .st-kick { top: 2.5rem; } .st-cap { left: 2.5rem; } .st-ticks, .st-hours { left: 2.5rem; right: 2.5rem; } .st-mark { top: 15.5rem; } .st-stem { top: 20.25rem; height: 7.5rem; } }
@media (width <= 580px) {
  .st-wrap { height: calc(23.1875rem + 15rem); } .st-stick { top: calc(50lvh - 11.6rem); clip-path: inset(var(--clip, 50%) round 1.5rem); }
  #statement { height: 23.1875rem; border-radius: 1.5rem; }
  .st-kick { top: 1.25rem; font-size: .75rem; } .st-title { top: 3rem; left: 1.25rem; right: 1.25rem; letter-spacing: -.06rem; }
  .st-mark { top: 11rem; width: 3.5rem; height: 3.5rem; left: calc(50% - 1.75rem); } .st-stem { top: 14.75rem; height: 3rem; }
  .st-cap { top: 16.6rem; left: 1.25rem; font-size: .75rem; } .st-ticks { top: 18.8rem; left: 1.25rem; right: 1.25rem; }
  .st-now { top: 17.9rem; } .st-dot { top: 19.25rem; } .st-hours { top: 20.7rem; left: 1.25rem; right: 1.25rem; font-size: .75rem; } .st-hours .h390 { display: none; }
}

/* chain cards */
#scan { padding: 6rem 5rem 4rem; }
#scan .shead { margin-bottom: 5rem; }
.scards { display: flex; gap: 1.25rem; }
.scard { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(to bottom, rgba(23,24,26,.92), rgba(14,15,17,.86)); padding: 1.9375rem; overflow: clip; }
.scard h3 { font-weight: 500; font-size: 1.625rem; line-height: 2rem; letter-spacing: -.0625rem; }
.scard > p { font-size: 1rem; line-height: 1.5rem; color: var(--muted); max-width: 31.25rem; }
.art { position: relative; width: 100%; margin-top: .75rem; }
.hub { position: relative; width: 100%; aspect-ratio: 566 / 336; }
.hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub .hn { position: absolute; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: #141518; display: grid; place-items: center; font-family: var(--mono); font-size: .6875rem; color: var(--muted); opacity: 0; transition: opacity .6s, border-color .4s, color .4s; }
.hub .hn.on { opacity: 1; }
.hub .hn.hot { border-color: rgba(var(--accent-rgb),.7); color: var(--accent); }
.hub .hl { position: absolute; transform: translate(-50%, 0); font-family: var(--mono); font-size: .75rem; color: var(--dim); white-space: nowrap; opacity: 0; transition: opacity .6s; }
.hub .hl.on { opacity: 1; }
.hub .core { position: absolute; left: 50%; top: 50%; width: 5.75rem; height: 5.75rem; transform: translate(-50%, -50%) scale(.6); opacity: 0; border-radius: 1.25rem; background: linear-gradient(160deg, var(--brand-hi), var(--brand) 55%, var(--brand-lo)); box-shadow: 0 0 40px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25); display: grid; place-items: center; color: var(--on-brand); transition: transform .8s var(--ease), opacity .8s var(--ease); }
.hub .core.on { transform: translate(-50%, -50%); opacity: 1; }
.hub .core svg { width: 2.75rem; height: 2.75rem; }
.hub .core::before { content: ""; position: absolute; left: 12%; right: 12%; top: 7%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.18); }
.lanes { display: flex; flex-direction: column; }
.lane { position: relative; height: 3.5rem; display: grid; grid-template-columns: 11rem 1fr 4.5rem; align-items: start; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); padding-top: .25rem; }
.lane .nm { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; }
.lane .ct { font-size: .875rem; line-height: 1.25rem; color: var(--dim); }
.lane .trk { position: relative; height: 10px; margin-top: 5px; border-radius: 999px; background: rgba(255,255,255,.07); }
.lane .fl { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: rgba(255,255,255,.32); width: var(--w, 0%); transition: width 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.lane:first-child .fl { background: var(--accent); }
.lane .hd { position: absolute; top: 0; left: var(--w, 0%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #f4f5f6; transition: left 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.lane .sh { font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.snote { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; color: var(--dim); white-space: normal; }
.snote svg { width: .875rem; height: .875rem; flex: none; }
@media (width <= 1200px) { #scan { padding: 5rem 3rem 3rem; } #scan .shead { margin-bottom: 3rem; } .scards { gap: .75rem; } .scard { padding: 1.4375rem; } .scard h3 { font-size: 1.5rem; } .lane { grid-template-columns: 8.5rem 1fr 4rem; } }
@media (width <= 900px) { #scan { padding: 5rem 2.5rem 3rem; } .scards { flex-direction: column; } .scard h3 { font-size: 1.25rem; line-height: 1.75rem; } }
@media (width <= 580px) { #scan { padding: 3rem 1.25rem 2rem; } .scard { padding: 1.1875rem; } .scard h3 { font-size: 1.125rem; line-height: 1.25rem; letter-spacing: 0; } .scard > p { font-size: .875rem; line-height: 1.25rem; } .lane { grid-template-columns: 7rem 1fr 3rem; gap: .6rem; } .lane .nm, .lane .sh { font-size: .75rem; } .lane .ct { font-size: .8125rem; } .hub .hn { width: 2rem; height: 2rem; font-size: .5625rem; } .hub .hl { font-size: .625rem; } .hub .core { width: 4rem; height: 4rem; border-radius: .9rem; } .hub .core svg { width: 2rem; height: 2rem; } }

/* day widgets */
#day { padding: 6rem 5rem 4rem; }
#day .shead { margin-bottom: 3rem; }
.wgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.wdg { position: relative; overflow: clip; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.07); background: var(--card); padding: 1.4375rem; min-height: 15.25rem; min-width: 0; }
.wdg > .wl { color: var(--dim); }
.w-week { grid-column: span 8; min-height: 16rem; }
.w-ring { grid-column: span 4; min-height: 16rem; }
.w-wal, .w-flow, .w-keys { grid-column: span 4; }
.nchip { position: absolute; right: 1.25rem; top: 1.25rem; display: flex; align-items: center; gap: .5rem; border-radius: .5rem; border: 1px solid rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.06); padding: .3125rem .6875rem; box-shadow: var(--float); color: #fff; }
.nchip svg { width: 14px; height: 14px; color: var(--accent); }
.heat { display: grid; grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr)); column-gap: 1rem; margin-top: 1.25rem; }
.heat .hrs { display: flex; flex-direction: column; justify-content: space-between; padding: .125rem 0 2.25rem; color: var(--dim); }
.heat .col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.heat .cell { height: 14px; border-radius: 4px; position: relative; opacity: 0; transition: opacity .5s var(--ease); transition-delay: var(--d, 0ms); }
.wdg.on .heat .cell { opacity: 1; }
.heat .cell.pk { background: linear-gradient(to right, var(--accent), rgba(var(--accent-rgb),.72)); box-shadow: 0 0 14px 2px rgba(var(--accent-rgb),.45); }
.heat .dl { margin-top: .8125rem; text-align: center; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: var(--dim); }
.heat .dl.on { color: var(--muted); }
.heat .today { height: 2px; border-radius: 1px; background: rgba(var(--accent-rgb),.75); margin-top: 3px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) .9s; }
.wdg.on .heat .today { transform: none; }
.ringw { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; gap: .75rem; text-align: center; }
.ringb { position: relative; width: 8.125rem; height: 8.125rem; }
.ringb svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ringb .rt { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.ringb .rf { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.6s var(--ease) .2s; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.5)); }
.wdg.on .ringb .rf { stroke-dashoffset: 1.26; }
.ringb p { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 500; font-size: 1.75rem; letter-spacing: -.0625rem; font-variant-numeric: tabular-nums; }
.wcap { font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.faces { display: flex; margin-top: 1.75rem; }
.faces li { width: 3.25rem; height: 3.25rem; border-radius: 50%; margin-right: -.5rem; border: 2px solid #0e0f11; background: #1b1c20; display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; color: var(--muted); opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0ms); }
.faces li:nth-child(1) { background: rgba(var(--accent-rgb),.16); color: var(--accent); }
.wdg.on .faces li { opacity: 1; transform: none; }
.cnt { display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.cnt b { font-weight: 500; font-size: 2rem; line-height: 2.5rem; letter-spacing: -.0625rem; color: var(--accent); }
.curves { width: 100%; height: auto; margin-top: 1.25rem; display: block; overflow: visible; }
.curves path { fill: none; stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s var(--ease); }
.wdg.on .curves path { stroke-dashoffset: 0; }
.curves circle { opacity: 0; transition: opacity .4s 1.6s; }
.wdg.on .curves circle { opacity: 1; }
.legend { display: flex; gap: 1.25rem; margin-top: 1rem; color: var(--dim); }
.legend li { display: flex; align-items: center; gap: .5rem; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.keymap { position: relative; margin-top: 1rem; }
.keymap .kdots { width: 100%; height: auto; display: block; }
.pin { position: absolute; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; opacity: 0; transition: opacity .6s .6s; }
.wdg.on .pin { opacity: 1; }
.pin .rg { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(194,194,194,.35); }
.pin .hl { position: absolute; inset: -3px; border-radius: 50%; background: radial-gradient(closest-side, rgba(194,194,194,.22), transparent); }
.pin .pt { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent-soft); }
.pin .pg { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 1px solid var(--accent); animation: halo 2.4s ease-out infinite; }
.pin .pl { position: absolute; left: 1.5rem; top: .25rem; border-radius: .375rem; background: rgba(11,11,11,.92); box-shadow: var(--float); padding: .125rem .5rem; color: #fff; }
@media (width <= 1200px) { #day { padding: 5rem 3rem 3rem; } .wgrid { gap: .75rem; } .w-week, .w-ring { grid-column: span 6; } .heat { column-gap: .5rem; } .nchip .long { display: none; } }
@media (width <= 900px) { #day { padding: 5rem 2.5rem 3rem; } .wgrid { grid-template-columns: 1fr 1fr; } .w-week { grid-column: 1 / -1; order: 5; } .w-ring, .w-wal, .w-flow, .w-keys { grid-column: auto; } .w-keys { order: 1; } .w-ring { order: 2; } .w-wal { order: 3; } .w-flow { order: 4; } }
@media (width <= 580px) { #day { padding: 3rem 1.25rem 2rem; } .wgrid { grid-template-columns: minmax(0, 1fr); } .w-flow { display: none; } .nchip { position: relative; right: auto; top: auto; margin-top: .75rem; display: inline-flex; font-size: .75rem; } .heat { grid-template-columns: 1.75rem repeat(7, minmax(0, 1fr)); column-gap: .3rem; } .heat .dl { font-size: .75rem; } }

/* math */
#math { padding: 6rem 5rem 5rem; overflow: clip; }
.blooms { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; }
#math.lit .blooms { opacity: 1; }
.blooms .bl { position: absolute; border-radius: 50%; }
.blooms .a { top: 3.75rem; left: -2.5rem; width: 58.75rem; height: 42.5rem; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05) 55%, transparent); }
.blooms .b { top: 1.25rem; left: 37.5rem; width: 58.75rem; height: 42.5rem; background: radial-gradient(closest-side, rgba(var(--alt-rgb),.1), rgba(var(--alt-rgb),.03) 55%, transparent); }
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; position: relative; }
.pf-head .shead-l { width: 33.5rem; }
.pf-hair { position: relative; height: 1px; background: rgba(255,255,255,.09); margin: 2.5rem 0 2rem; }
.stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat .num { font-weight: 600; font-size: 3.5rem; line-height: 3.75rem; letter-spacing: -.125rem; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.stat .num sup { font-size: .5em; line-height: 0; vertical-align: .9em; letter-spacing: -.05rem; }
.stat .cap { margin-top: .75rem; color: var(--muted); white-space: normal; }
.stat .cap sup { font-size: .7em; line-height: 0; }
.vis { position: relative; height: 3.5rem; margin-top: 1.5rem; }
.vis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tpill { align-self: flex-start; margin-top: 1.375rem; border-radius: .5rem; padding: .3125rem .6875rem; background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent-rgb),.45); color: var(--accent); white-space: normal; }
.ctick { width: 1.75rem; height: 2px; border-radius: 999px; background: rgba(255,255,255,.25); margin-top: 2.75rem; }
.stat blockquote { margin-top: 1.75rem; font-size: 1rem; line-height: 1.5rem; }
.stat figcaption { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 2px; }
.stat figcaption b { font-weight: 500; font-size: .875rem; line-height: 1.25rem; }
.prog { position: absolute; left: 0; right: 0; top: 1.25rem; height: 14px; border-radius: 999px; overflow: clip; background: rgba(255,255,255,.07); }
.prog i { position: absolute; inset: 0; background: linear-gradient(175deg, var(--accent-soft) 28%, var(--accent) 67%); clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.8s var(--ease) .3s; }
.stat.on .prog i { clip-path: inset(0 2% 0 0 round 999px); }
.vbars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; }
.vbars i { width: 15%; border-radius: .5rem; background: linear-gradient(160deg, var(--accent-soft) 10%, var(--accent) 60%, var(--brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.stat.on .vbars i { transform: none; }
.vspark path.ln { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.8s var(--ease); }
.vspark path.ar { fill: url(#sparkfill); opacity: 0; transition: opacity 1s 1s; }
.stat.on .vspark path.ln { stroke-dashoffset: 0; }
.stat.on .vspark path.ar { opacity: 1; }
@media (width <= 1200px) { #math { padding: 3rem 3rem 4rem; } .pf-head { flex-direction: column; align-items: center; text-align: center; } .pf-head .shead-l { width: 100%; align-items: center; } .stats { gap: 1.5rem; } .stat .num { font-size: 2.75rem; line-height: 3rem; } }
@media (width <= 900px) { #math { padding: 3rem 2.5rem 4rem; } .stat .num { font-size: 2.25rem; line-height: 2.75rem; } .stats { gap: 1rem; } }
@media (width <= 580px) { #math { padding: 3rem 1.25rem 3rem; } .pf-hair { display: none; } .stats { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 2rem; } .stat { border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.07); background: #0c0d0e; padding: 1.25rem; } .stat .num { font-size: 1.75rem; line-height: 2.125rem; } }

/* footer */
#footer { padding: 6rem 5rem 4rem; overflow: clip; }
.f-top { position: relative; display: grid; grid-template-columns: 33.125rem minmax(0, 1fr); gap: 1.25rem; }
.f-brand { position: relative; overflow: clip; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(148.88deg, #202326, #111214 55%, #0a0b0c); padding: 1.9375rem; min-height: 20rem; }
.f-glyph { position: absolute; left: -2.5rem; top: 15.5rem; width: 18.75rem; height: 18.75rem; color: rgba(var(--accent-rgb), .06); pointer-events: none; }
.f-logo { position: relative; display: inline-flex; }
.f-logo .logo { width: 4.5rem; height: 4.5rem; }
.f-tag { position: relative; margin-top: 3.5rem; font-size: 1.125rem; line-height: 1.75rem; width: 22.5rem; }
.f-hl { position: relative; height: 1px; background: rgba(255,255,255,.14); margin: 2.75rem 0 1.25rem; }
.f-soc { position: relative; display: flex; justify-content: space-between; align-items: center; }
.f-soc ul { display: flex; gap: .5rem; }
.f-soc a { width: 2rem; height: 2rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.1); display: grid; place-items: center; color: rgba(255,255,255,.8); transition: color .15s var(--ease); }
.f-soc a:hover { color: #fff; }
.f-cta { position: relative; overflow: clip; border-radius: 1.5rem; background: linear-gradient(135deg, var(--brand-hi), var(--brand) 60%, var(--brand-lo)); box-shadow: var(--float); padding: 2.5rem; color: var(--on-brand); display: flex; flex-direction: column; align-items: flex-start; }
.f-cta .ey { color: rgba(var(--on-brand-rgb),.65); }
.f-cta h2 { margin-top: 1rem; overflow: clip; font-weight: 600; font-size: 2.25rem; line-height: 3.25rem; letter-spacing: -.0625rem; }
.f-cta h2 span { display: block; transform: translateY(108%); transition: transform 1s var(--ease) .25s; }
.f-cta.on h2 span { transform: none; }
.f-cta h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.5rem; letter-spacing: 0; }
.f-cta p.cp { margin-top: .5rem; font-size: 1rem; line-height: 1.5rem; color: rgba(var(--on-brand-rgb),.82); max-width: 40.625rem; }
.f-go { margin-top: auto; }
.f-cta .f-go { margin-top: 2.5rem; color: #0b0b0d; }
.f-hair { position: relative; height: 1px; background: rgba(255,255,255,.09); margin-top: 2.375rem; }
.f-bot { position: relative; display: grid; grid-template-columns: 25rem 1fr; gap: 6rem; margin-top: 3.3rem; }
.f-co { display: grid; row-gap: .5rem; align-content: start; }
.f-co .logo { width: 2.5rem; height: 2.5rem; }
.f-co p { font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.f-co .mono { color: var(--dim); white-space: normal; font-size: .875rem; overflow-wrap: anywhere; min-width: 0; }
.f-co { min-width: 0; }
.f-cols { display: flex; justify-content: flex-end; gap: 6rem; }
.f-cols div { display: flex; flex-direction: column; gap: .75rem; }
.f-cols h4 { margin: 0; font-weight: 400; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: var(--dim); }
.f-cols ul { display: flex; flex-direction: column; gap: .375rem; }
.f-cols a { font-size: .875rem; line-height: 1.25rem; color: var(--muted); transition: color .15s var(--ease); }
.f-cols a:hover { color: var(--accent); }
.f-hair2 { margin-top: 3rem; }
.f-legal { position: relative; display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; color: var(--dim); }
@media (width <= 1200px) { #footer { padding: 4rem 3rem 3rem; } .f-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; } .f-brand { padding: 1.4375rem; min-height: 17.4rem; } .f-tag { margin-top: 3rem; width: 15.4rem; } .f-hl { margin: 2rem 0 1rem; } .f-cta { padding: 1.5rem; } .f-cta h2 { font-size: 2rem; line-height: 2.625rem; } .f-cta h2 em { font-size: 2rem; } .f-bot { grid-template-columns: 18.75rem 1fr; gap: 3rem; } }
@media (width <= 900px) { #footer { padding: 2.5rem 2.5rem 3rem; } .f-top { grid-template-columns: minmax(0, 1fr); } .f-tag { width: 18.25rem; } .f-cta h2 { font-size: 1.625rem; line-height: 2.125rem; } .f-cta h2 em { font-size: 1.625rem; } .f-bot { grid-template-columns: 1fr; gap: 2.5rem; } .f-cols { justify-content: flex-start; gap: 4rem; } }
@media (width <= 580px) { #footer { padding: 0 1.25rem 3rem; } .f-tag { width: 100%; margin-top: 4rem; } .f-cta { padding: 1.25rem; } .f-cta h2 { font-size: 2rem; line-height: 2.625rem; } .f-cta h2 em { font-size: 2rem; } .f-cols { flex-wrap: wrap; row-gap: 2rem; } .f-legal { flex-direction: column; gap: .5rem; white-space: normal; } .f-cta .f-go { width: 100%; } }

/* coming soon dialog */
.soon { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 1.25rem; }
.soon-card { width: min(24rem, 100%); border-radius: 1.5rem; border: 1px solid rgba(var(--accent-rgb),.35); background: linear-gradient(160deg, rgba(var(--accent-rgb),.1), #0d0c10 70%); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.soon-t { font-weight: 600; font-size: 1.75rem; letter-spacing: -.05rem; }
.soon-s { color: var(--muted); font-size: 1rem; line-height: 1.5rem; margin-bottom: .5rem; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  [data-rise], [data-in] { opacity: 1 !important; transform: none !important; }
  [data-focus] { -webkit-mask-image: none; mask-image: none; }
  [data-draw] { transform: none; }
}

/* ---------- token page (/token) ---------- */
.tk-stream { position: absolute; top: calc(var(--bar-h) * -1); left: calc(50% - 50vw); width: 100vw; height: 52rem; object-fit: cover; object-position: 30% 40%; opacity: .8; mix-blend-mode: screen; transform: translateX(min(30vw, 30rem)); -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 55%, transparent); mask-composite: intersect; pointer-events: none; }
.tk-hero { position: relative; padding: 7rem 5rem 3rem; display: flex; flex-direction: column; align-items: flex-start; }
.tk-kick { color: var(--muted); }
.tk-title { margin-top: 1.5rem; width: 44rem; max-width: 100%; }
.tk-sub { margin-top: 1.75rem; width: 34rem; max-width: 100%; }
.tk-act { margin-top: 2rem; flex-wrap: wrap; }
.pill.ghost { color: #fff; border: 1px solid rgba(255,255,255,.22); background: rgba(10,10,12,.6); }
.pill.ghost:hover { background: rgba(255,255,255,.08); }
.tk-ca-note { margin-top: 1.5rem; display: flex; gap: .625rem; align-items: center; color: var(--muted); white-space: normal; max-width: 100%; }
.tk-ca-note svg { flex: none; color: var(--accent); }
.tk-ca-note a, .tk-faq a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tk-sec { padding: 6rem 5rem 2rem; }
.tk-sec .shead { margin-bottom: 3rem; }
.tk-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.tk-step { border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.08); background: var(--card); padding: 1.6rem; display: flex; flex-direction: column; gap: .75rem; min-height: 15rem; min-width: 0; }
.tk-step h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -.04rem; }
.tk-step p:not(.fidx) { font-size: .9375rem; line-height: 1.4rem; color: var(--muted); }
.tk-buyrow { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.tk-buyrow .mono { white-space: normal; }
.tk-stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.tk-stats .wdg { min-height: 12rem; display: flex; flex-direction: column; }
.tk-num { margin-top: auto; font-weight: 600; font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -.09rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-stats .wcap { margin-top: .5rem; font-size: .9375rem; }
.tk-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.tk-list li { display: flex; gap: .75rem; font-size: 1rem; line-height: 1.5rem; color: #d9dce0; }
.tk-list svg { width: 1rem; height: 1rem; margin-top: .25rem; flex: none; color: var(--accent); }
.tk-hold { border-color: rgba(var(--accent-rgb),.45); background: linear-gradient(160deg, rgba(var(--brand-rgb),.3), rgba(14,15,17,.75) 60%); }
.tk-hold > .mono { color: var(--accent); }
.tk-faq { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.09); }
.tk-faq details { border-bottom: 1px solid rgba(255,255,255,.09); }
.tk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -.03rem; }
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted); transition: transform .3s var(--ease); }
.tk-faq details[open] summary svg { transform: rotate(45deg); color: var(--accent); }
.tk-faq details > p, .tk-contracts { padding: 0 0 1.5rem; max-width: 52rem; font-size: 1rem; line-height: 1.6rem; color: var(--muted); }
.tk-contracts dl { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .6rem 1rem; margin-top: 1rem; }
.tk-contracts dt { color: #fff; font-weight: 500; }
.tk-contracts dd { margin: 0; min-width: 0; }
.tk-contracts dd a { color: var(--accent); overflow-wrap: anywhere; white-space: normal; font-size: .875rem; }
.tk-links { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.tk-links a { display: flex; flex-direction: column; gap: .5rem; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.08); background: var(--card); padding: 1.4rem; min-width: 0; transition: border-color .2s, background .2s; }
.tk-links a:hover { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--brand-rgb),.12); }
.tk-links b { font-weight: 500; font-size: 1.125rem; overflow-wrap: anywhere; }
@media (width <= 1200px) {
  .tk-hero { padding: 6rem 3rem 3rem; } .tk-sec { padding: 5rem 3rem 2rem; }
  .tk-steps, .tk-stats, .tk-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
@media (width <= 900px) { .tk-stream { transform: none; opacity: .55; } .tk-hero { padding: 4rem 2.5rem 2rem; align-items: center; text-align: center; } .tk-act { justify-content: center; } .tk-sec { padding: 4rem 2.5rem 2rem; } }
@media (width <= 580px) {
  .tk-hero { padding: 3.5rem 1.25rem 1.5rem; } .tk-sec { padding: 3rem 1.25rem 1.5rem; }
  .tk-title { font-size: 2rem; line-height: 2.5rem; } .tk-title em { font-size: 2.25rem; }
  .tk-act { flex-direction: column; width: 100%; } .tk-act .pill { width: 100%; }
  .tk-ca-note { text-align: left; font-size: .8125rem; line-height: 1.2rem; }
  .tk-steps, .tk-stats, .tk-links { grid-template-columns: minmax(0, 1fr); }
  .tk-step { min-height: 0; } .tk-num { font-size: 2rem; line-height: 2.5rem; }
  .tk-faq summary { font-size: 1.0625rem; line-height: 1.5rem; }
  .tk-contracts dl { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .tk-contracts dd { margin-bottom: .6rem; }
  .tk-buyrow .pill { width: 100%; }
}
:root[data-pal="neon"] .tk-stream { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(38deg); }
:root[data-pal="ice"] .tk-stream { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(182deg); }
:root[data-pal="violet"] .tk-stream { filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(238deg); }
/* keep copy readable where the light stream runs behind it */
.band .shead-a, .band .fbody, .band .fttl, .band .fidx, #track .trk-cap, #track .lab, .stat .cap, .stat blockquote, .stat figcaption, .stat > .mono, .f-co p, .f-cols a, .f-legal { text-shadow: 0 1px 14px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.85); }

/* ---------- Hood Portal: hero pin -> hood-arch portal into section 2 (driven by home.js wirePortal) ---------- */
.hp-wrap { position: relative; }
.hp-stick { position: sticky; top: var(--bar-h); }
.hp-after { position: relative; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.hp-after.hp-on { will-change: transform, clip-path; pointer-events: none; background-color: rgba(0, 0, 0, var(--hp-bg, 1)); background-image: radial-gradient(ellipse 60% 45% at 50% 24%, rgba(var(--accent-rgb), calc(var(--hp-bg, 1) * .09)), transparent 70%); background-repeat: no-repeat; background-size: 100% 100vh; }
.hp-after.hp-hide { visibility: hidden; }
.hp-fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.hp-core { position: fixed; left: 50%; top: 50%; pointer-events: none; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(var(--accent-rgb), .55) 22%, rgba(var(--brand-rgb), .18) 52%, transparent 72%); opacity: 0; transform: scale(.5); will-change: opacity, transform; }
.hp-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.hp-rim path { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hp-rim .g1 { stroke-width: 1.4; stroke: var(--accent-soft); }
.hp-rim .g2 { stroke-width: 6; opacity: .26; }
.hp-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(var(--accent-rgb), .9), rgba(var(--brand-rgb), .35) 55%, transparent 85%); opacity: 0; }
/* split headline */
.hp-w { display: inline-block; white-space: nowrap; }
.hp-l { display: inline-block; position: relative; contain: layout style; background: linear-gradient(to bottom, #fff, #bababa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-title em .hp-l { background: none; -webkit-text-fill-color: var(--title-em); color: var(--title-em); }
.hp-l > b { contain: layout style; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 .62em/1 var(--mono); letter-spacing: 0; color: var(--accent); -webkit-text-fill-color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .8); visibility: hidden; }
.hp-l.scr, .h-title em .hp-l.scr { background: none; color: transparent; -webkit-text-fill-color: transparent; }
.hp-l.scr > b { visibility: visible; }
.h-title.hp-split { position: relative; }
.hp-spk { position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 6px rgba(var(--accent-rgb), .95); opacity: 0; pointer-events: none; }
@media (width <= 580px) {
  #hero { min-height: calc(100svh - var(--bar-h)); display: flex; flex-direction: column; justify-content: center; }
  .hp-core { width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; }
}

/* launch-time line in the CA pill (UTC): allow wrapping on narrow screens */
#hv-ca .ca-soon { white-space: normal; height: auto; min-height: 3rem; line-height: 1.45; padding-top: .55rem; padding-bottom: .55rem; text-align: center; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; }
#hv-ca .ca-soon.has-time { opacity: 1; color: var(--accent); border-color: rgba(var(--accent-rgb), .45); border-style: solid; background: rgba(var(--accent-rgb), .06); }
@media (width > 580px) { #hv-ca .ca-soon { white-space: nowrap; } }