/* Quant Bot landing: the profile banner's world, at page scale.
   A bright studio floor with a soft grid, white pills, dark panel cards
   floating in 3D, logo tiles drifting near the lens. One light look on
   purpose, the same as the banner. */
/* Self-hosted, so the site's content policy stays at 'self'. */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2'); }
:root {
  --floor: #f9fbfb; --floor2: #f2f3f6; --ink: #15171c; --ink2: #2a2d36; --grey: #8b8b92; --soft: #5b5f6b;
  --line: rgba(26, 33, 51, .08); --line2: rgba(26, 33, 51, .14);
  --card: #0c0d10; --card2: #16181d; --cardline: rgba(255, 255, 255, .07);
  --live: #3ccf7a; --gold: #f5b84b; --warm: #eab308; --hot: #f87171; --blurple: #5865f2;
  --shadow: 26, 33, 51;
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* The page never scrolls sideways. Decorative 3D pieces bleed past their
   boxes on purpose; if one reaches past the viewport, a phone would widen its
   layout viewport to fit it and draw the whole page zoomed out. clip (unlike
   hidden) doesn't create a scroll container, so the sticky nav keeps working. */
html { scroll-behavior: smooth; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* The studio light is a fixed layer of its own, not a viewport-attached
   background on body: iOS ignores that (or repaints the whole page with it on
   every scroll frame, which flickers). A fixed pseudo-element is composited
   once and simply stays put. */
body { margin: 0; color: var(--ink); font: 400 16px/1.55 var(--sans); background: var(--floor2); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 700px at 70% 0%, #ffffff 0%, var(--floor) 45%, var(--floor2) 100%); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(var(--shadow), .04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--shadow), .04) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(90% 70% at 60% 20%, #000 20%, transparent 80%); }
main, .nav, .foot { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--grey); letter-spacing: -.01em; }

/* ── shared bits ─────────────────────────────────────────────────────── */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--grey); flex: none; }
.dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(60, 207, 122, .18); animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgba(60, 207, 122, 0); } }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 1px rgba(var(--shadow), .06), 0 8px 22px -12px rgba(var(--shadow), .35); font-weight: 500; font-size: 14px; }
.pill img { width: 22px; height: 22px; border-radius: 7px; }
.pill-sub { color: var(--grey); font-weight: 400; padding-left: 8px; border-left: 1px solid var(--line2); }
.pill.sm { padding: 4px 10px; font-size: 12px; gap: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font: 500 15px/1 var(--sans);
  text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn.ink { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(var(--shadow), .7), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2), 0 6px 16px -12px rgba(var(--shadow), .4); }
.btn.light { background: #fff; color: var(--ink); }
.btn.outline { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn.ink:hover { box-shadow: 0 16px 30px -12px rgba(var(--shadow), .75), inset 0 1px 0 rgba(255,255,255,.12); } }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible, .links a:focus-visible, .brand:focus-visible { outline: 2px solid var(--blurple); outline-offset: 3px; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.head { display: grid; gap: 14px; justify-items: center; text-align: center; margin: 0 auto 44px; max-width: 760px; }
.head h2 { font: 500 clamp(32px, 4.4vw, 52px)/1.04 var(--sans); letter-spacing: -.035em; }
.head h2 em { font-size: 1.1em; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 20; margin: 14px auto 0; width: min(1120px, calc(100% - 32px));
  display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 14px; border-radius: 999px;
  /* Near-opaque instead of a live blur: a sticky backdrop-filter re-blurs what
     scrolls beneath it every frame, and on iOS that blur trails behind the
     scroll, so a lagging smear showed around the Add to Discord button. */
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 30px -18px rgba(var(--shadow), .45); }
/* Inside the floating nav the ink button gets a tight shadow; the hero's long
   soft one read as a dark backdrop dragging under the bar. */
.nav .btn.ink { box-shadow: 0 4px 10px -6px rgba(var(--shadow), .55), inset 0 1px 0 rgba(255,255,255,.12); }
@media (hover: hover) { .nav .btn.ink:hover { box-shadow: 0 8px 16px -8px rgba(var(--shadow), .6), inset 0 1px 0 rgba(255,255,255,.12); } }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 26px; height: 26px; border-radius: 8px; }
.links { display: flex; gap: 4px; margin-left: 10px; }
.links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--soft); text-decoration: none; transition: background-color .2s, color .2s; }
@media (hover: hover) { .links a:hover { background: rgba(var(--shadow), .05); color: var(--ink); } }
.nav-cta { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 760px) { .links { display: none; } .nav-cta .ghost { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { width: min(1180px, 100%); margin: 0 auto; padding: 72px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 640px;
  overflow-x: clip; /* the tilted stage and its corner tile bleed right; keep them inside the hero */ }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.hero h1 { font: 500 clamp(42px, 5.2vw, 68px)/1.0 var(--sans); letter-spacing: -.045em; }
.hero h1 em { font-size: 1.1em; display: inline-block; }
.lead { margin: 0; max-width: 34em; font-size: 18px; color: var(--soft); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.stats { display: flex; gap: 0; margin: 4px 0 0; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.stats div { padding: 8px 18px; display: grid; gap: 2px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.stats dd { margin: 0; font: 500 22px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 48px; min-height: 0; } .stage { height: 420px; } }

/* The stage: a floor plane in perspective with cards hovering over it. */
.stage { position: relative; height: 560px; perspective: 1400px; perspective-origin: 50% 35%; }
.plane { position: absolute; left: 50%; top: 50%; width: 520px; height: 420px; margin: -210px 0 0 -260px; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 50deg)) rotateZ(var(--rz, -24deg)); transition: transform .9s var(--ease); }
.card, .chip { position: absolute; transform-style: preserve-3d; will-change: transform; } /* their hover bob moves a blurred shadow; a layer of its own keeps it from re-blurring */
.card { width: 230px; height: 108px; border-radius: 16px; padding: 16px 18px; background: linear-gradient(180deg, var(--card2), var(--card)); color: #e9eaee;
  box-shadow: inset 0 0 0 1px var(--cardline), inset 0 1px 0 rgba(255,255,255,.08); display: grid; align-content: start; gap: 6px;
  --z: 40px; transform: translateZ(var(--z)); animation: hover 6s ease-in-out infinite; }
.card::after, .chip::after { content: ''; position: absolute; inset: 10% 8%; border-radius: 16px; background: rgba(var(--shadow), .55); filter: blur(18px);
  transform: translateZ(calc(var(--z) * -1)) translate(calc(var(--z) * .12), calc(var(--z) * .38)); z-index: -1; opacity: .7; }
.card .ic { font-size: 15px; }
.card .v { font: 500 26px/1 var(--mono); letter-spacing: -.02em; color: #f2f3f5; }
.card .v.live { color: var(--live); }
.card .l { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7d8190; }
.c1 { left: 10px; top: 40px; --z: 70px; animation-delay: -1s; }
.c2 { left: 270px; top: 0; --z: 40px; animation-delay: -3s; }
.c3 { left: 290px; top: 150px; --z: 95px; animation-delay: -2s; }
.c4 { left: 30px; top: 190px; --z: 30px; animation-delay: -4.5s; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--card2); color: #e9eaee; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--cardline); font: 500 15px/1 var(--sans); --z: 140px; transform: translateZ(var(--z)) rotateX(-20deg); animation: hover 5s ease-in-out infinite; }
.c5 { left: 300px; top: 300px; animation-delay: -1.5s; }
.c6 { left: 60px; top: 320px; --z: 110px; animation-delay: -3.5s; }
/* The plane is a fixed 520px board turned in 3D, so it needs about 630px of
   width. On narrow screens shrink it as a whole (scale composes with the
   pointer tilt in transform) rather than letting it run off the edge. */
@media (max-width: 900px) { .stage { height: 420px; } } /* the 900px rule above loses to the base .stage that follows it */
/* Measured: these are the largest scales whose cards still land inside the
   screen (the nudge right centres the board, whose 3D footprint leans left).
   The hero clips the few pixels the hover bob adds, so nothing scrolls. */
@media (max-width: 700px) { .plane { scale: .86; } .stage { height: 400px; } }
@media (max-width: 520px) { .plane { scale: .74; translate: 6px 0; } .stage { height: 360px; } .t1 { width: 60px; } }
@media (max-width: 400px) { .plane { scale: .66; translate: 10px 0; } .stage { height: 340px; } }
@keyframes hover { 50% { transform: translateZ(calc(var(--z) + 14px)); } }
.chip { animation-name: hoverchip; }
@keyframes hoverchip { 0%, 100% { transform: translateZ(var(--z)) rotateX(-20deg); } 50% { transform: translateZ(calc(var(--z) + 16px)) rotateX(-20deg); } }
.tile { position: absolute; border-radius: 24%; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px -16px rgba(var(--shadow), .55), 0 4px 10px -4px rgba(var(--shadow), .25);
  animation: drift 9s ease-in-out infinite; }
/* will-change keeps the blurred tile on its own layer, so its drift moves the
   already-blurred bitmap instead of re-blurring it every frame. */
.tile.soft { filter: blur(14px); opacity: .8; will-change: translate; }
.t1 { width: 74px; right: 4%; top: 2%; transform: rotate(9deg); }
.t2 { width: 50px; left: 6%; top: 10%; transform: rotate(-12deg); animation-delay: -3s; }
.t3 { width: 40px; right: 14%; bottom: 10%; animation-delay: -5s; }
@keyframes drift { 50% { translate: 0 -12px; } }

/* ── marquee ─────────────────────────────────────────────────────────── */
.marquee { overflow: hidden; margin: 10px 0 90px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: slide 40s linear infinite; will-change: transform; }
.track span { padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: 15px; color: var(--ink2); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── features ────────────────────────────────────────────────────────── */
.features, .how, .show { width: min(1180px, 100%); margin: 0 auto 110px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 22px; border-radius: 26px; background: rgba(255,255,255,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 1px rgba(var(--shadow), .04), 0 24px 48px -32px rgba(var(--shadow), .35); min-width: 0; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { .f:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 30px 60px -30px rgba(var(--shadow), .45); } }
.f.wide { grid-column: span 2; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; align-items: center; }
.f h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
.f p { margin: 6px 0 0; color: var(--soft); font-size: 15px; }
.screen { position: relative; min-height: 190px; border-radius: 18px; background: linear-gradient(180deg, var(--card2), var(--card)); color: #e9eaee;
  box-shadow: inset 0 0 0 1px var(--cardline); padding: 18px; overflow: hidden; }
.f.wide.full { grid-column: 1 / -1; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); }
.f.full .md { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .f.wide, .f.wide.full { grid-column: auto; grid-template-columns: 1fr; } .f.full .md { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* giveaways: winners stamped one after another */
.gw { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.ticket { position: relative; padding: 16px; border-radius: 14px; background: #ece4d6; color: var(--ink); display: grid; gap: 4px; }
.ticket small { font: 500 10px/1 var(--mono); letter-spacing: .16em; color: #2233f5; }
.ticket b { font: 700 30px/1 var(--sans); letter-spacing: -.03em; }
.ticket span { font: 500 11px/1.2 var(--mono); color: #5b5f6b; }
.ticket::after { content: ''; position: absolute; right: 18%; top: 10px; bottom: 10px; border-right: 2px dashed rgba(21,23,28,.25); }
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.queue li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-weight: 500; font-size: 14px; }
.queue i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 11px/1 var(--mono); font-style: normal; background: rgba(255,255,255,.08); }
.stamp { font: 700 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--live); padding: 5px 7px; border-radius: 5px;
  border: 1.5px solid rgba(60, 207, 122, .8); rotate: -7deg; opacity: 0; animation: stamp 6s var(--ease) infinite; }
.s2 { animation-delay: .6s; } .s3 { animation-delay: 1.2s; }
@keyframes stamp { 0%, 8% { opacity: 0; scale: 1.8; } 14%, 80% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; scale: 1; } }

/* verification: ring fills, shield checks */
.vr { display: grid; place-items: center; }
.vr svg { width: 150px; height: 150px; overflow: visible; }
.vr .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; }
.vr .fill { fill: none; stroke: url(#none); stroke: #4d5cff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
  transform: rotate(-90deg); transform-origin: 60px 60px; animation: ring 4.5s var(--ease) infinite; }
.vr .shield { fill: #2233f5; animation: shield 4.5s var(--ease) infinite; }
.vr .check { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: check 4.5s var(--ease) infinite; }
@keyframes ring { 0% { stroke-dashoffset: 276.5; } 45%, 85% { stroke-dashoffset: 0; stroke: var(--live); } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes shield { 0%, 44% { fill: #23264a; } 50%, 85% { fill: #2233f5; } 100% { fill: #23264a; } }
@keyframes check { 0%, 48% { stroke-dashoffset: 30; } 58%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }

/* leveling: the XP curve grows */
.lv { display: grid; align-items: end; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #4d5cff, #2233f5); transform-origin: bottom;
  animation: grow 5s var(--ease) infinite; }
.bars i:nth-child(2) { animation-delay: .08s; } .bars i:nth-child(3) { animation-delay: .16s; } .bars i:nth-child(4) { animation-delay: .24s; }
.bars i:nth-child(5) { animation-delay: .32s; } .bars i:nth-child(6) { animation-delay: .4s; } .bars i.top { animation-delay: .48s; background: linear-gradient(180deg, var(--gold), #e2683c); }
@keyframes grow { 0% { transform: scaleY(.05); } 30%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
.lvpill { position: absolute; right: 16px; top: 14px; font: 500 12px/1 var(--mono); padding: 6px 10px; border-radius: 999px; background: rgba(245,184,75,.15); color: var(--gold); }
/* the climb (home.js): the pill rolls through the ranks, the chip names the role */
.lv { padding-top: 56px; }
.lv-roll { display: grid; overflow: hidden; height: 1em; min-width: 16ch; text-align: right; }
.lv-roll b { grid-area: 1 / 1; font-weight: 500; white-space: nowrap; }
.lv-roll b.in { animation: lv-in .42s var(--ease) both; } .lv-roll b.out { animation: lv-out .42s var(--ease) both; }
@keyframes lv-in { from { transform: translateY(110%); opacity: 0; } }
@keyframes lv-out { to { transform: translateY(-110%); opacity: 0; } }
.lv-xp { display: none; }
.lv.run .lvpill { display: grid; gap: 5px; background: rgba(255,255,255,.07); color: #e9eaee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .4s, color .4s, box-shadow .4s; }
.lv.run .lv-xp { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.lv.run .lv-xp i { display: block; height: 100%; background: var(--rk, #4d5cff); transform: scaleX(0); transform-origin: left; }
.lvpill.pop { animation: lv-pop .45s var(--ease); }
@keyframes lv-pop { 40% { scale: 1.08; } }
.lv.run .lvpill.gold { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px rgba(245,184,75,.18); }
.lv.run .lvpill.gold .lv-xp { opacity: 0; }
.lv-fleck { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 1.5px; pointer-events: none; animation: lv-fleck .85s var(--ease) both; }
@keyframes lv-fleck { from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(120deg) scale(.4); opacity: 0; } }
.lv-who { position: absolute; left: 16px; top: 14px; display: none; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); color: #c9ccd4; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.05); }
.lv.run .lv-who { display: inline-flex; }
/* a narrow card has no room for both side by side: the chip drops under the pill */
.lv { container-type: inline-size; }
@container (max-width: 310px) { .lv.run .bars { margin-top: 30px; height: 128px; } .lv.run .lv-who { top: 52px; left: auto; right: 16px; } }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: #8b8b92; transition: background-color .3s; }
.lv-who.pop { animation: lv-pop .4s var(--ease); }
.lv-who.given { background: rgba(60,207,122,.14); color: var(--live); }
.lv-plus { position: absolute; transform: translateX(-50%); font: 600 10px/1 var(--mono); color: #b9c0ff; white-space: nowrap; pointer-events: none; animation: lv-plus 1.2s var(--ease) both; }
@keyframes lv-plus { from { opacity: 0; translate: 0 6px; } 20% { opacity: 1; } to { opacity: 0; translate: 0 -22px; } }
/* the bars rise one at a time, on the climb's beat, instead of the looping keyframes */
.lv.run .bars i { animation: none; transform: scaleY(.05); transition: transform .5s cubic-bezier(.34, 1.45, .5, 1); }
.lv.run .bars i.on { transform: scaleY(1); }
.lv.run .bars i.flash { animation: lv-flash .6s var(--ease); }
@keyframes lv-flash { 0% { filter: brightness(1.7); } }

/* news: headlines drop onto the stack */
.nw { display: grid; align-content: start; gap: 8px; }
.news { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); animation: drop 6s var(--ease) infinite; }
.news b { font: 700 13px/1.2 var(--sans); letter-spacing: .01em; } .news small { grid-column: 2; font: 500 10px/1.2 var(--mono); color: #7d8190; }
.live-tag { grid-row: span 2; font: 700 9px/1 var(--mono); letter-spacing: .12em; padding: 5px 7px; border-radius: 999px; background: #e2683c; color: #fff; }
.n2 { animation-delay: .25s; } .n3 { animation-delay: .5s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-18px) scale(.98); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* tickets: age bars */
.tk { display: grid; align-content: center; gap: 12px; }
.tk .row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font: 600 13px/1 var(--sans); }
.age { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
.age::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--c); animation: age 5s var(--ease) infinite; transform-origin: left; }
@keyframes age { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* moderation: toggles switching on */
.md { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-weight: 500; font-size: 14px; }
.sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); flex: none; animation: swbg 5s var(--ease) infinite; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c9ccd4; animation: swk 5s var(--ease) infinite; }
.sw.s2, .sw.s2::after { animation-delay: .3s; } .sw.s3, .sw.s3::after { animation-delay: .6s; } .sw.s4, .sw.s4::after { animation-delay: .9s; }
@keyframes swbg { 0%, 10% { background: rgba(255,255,255,.12); } 22%, 85% { background: var(--live); } 100% { background: rgba(255,255,255,.12); } }
@keyframes swk { 0%, 10% { transform: none; background: #c9ccd4; } 22%, 85% { transform: translateX(16px); background: #fff; } 100% { transform: none; } }

/* ── the small details, each on its card's own beat ── */
/* giveaways: the winner's row lights up as its stamp lands, its number turns green */
.queue li { animation: gw-row 6s var(--ease) infinite; }
.queue li i { animation: gw-num 6s var(--ease) infinite; }
.queue li:nth-child(2), .queue li:nth-child(2) i { animation-delay: .6s; } .queue li:nth-child(3), .queue li:nth-child(3) i { animation-delay: 1.2s; }
@keyframes gw-row { 0%, 10% { background: rgba(255,255,255,.04); } 14% { background: rgba(60,207,122,.16); } 34%, 100% { background: rgba(255,255,255,.04); } }
@keyframes gw-num { 0%, 11% { background: rgba(255,255,255,.08); color: inherit; } 15%, 80% { background: var(--live); color: #0c0d10; } 92%, 100% { background: rgba(255,255,255,.08); color: inherit; } }
/* verification: what the ring is doing, in words */
.vr { gap: 10px; }
.vr-cap { display: grid; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vr-cap b { grid-area: 1 / 1; text-align: center; font-weight: 600; }
.vr-cap .a { color: #7d8190; animation: vr-a 4.5s var(--ease) infinite; } .vr-cap .b { color: var(--live); opacity: 0; animation: vr-b 4.5s var(--ease) infinite; }
@keyframes vr-a { 0%, 44% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vr-b { 0%, 50% { opacity: 0; transform: translateY(5px); } 58%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
/* news: the LIVE tags breathe */
.live-tag { animation: tag-live 1.8s ease-out infinite; }
@keyframes tag-live { 0% { box-shadow: 0 0 0 0 rgba(226,104,60,.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(226,104,60,0); } }
/* tickets: how long each has waited, and the oldest one asks for attention */
.tk .row { grid-template-columns: 110px 1fr 34px; }
.tk .row small { font: 500 11px/1 var(--mono); color: #7d8190; text-align: right; animation: tk-ago 5s var(--ease) infinite; }
@keyframes tk-ago { 0%, 30% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
.tk .row.old b { display: inline-flex; align-items: center; gap: 7px; }
.tk .row.old b::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); animation: tk-alert 1.4s ease-out infinite; }
@keyframes tk-alert { 0% { box-shadow: 0 0 0 0 rgba(248,113,113,.6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(248,113,113,0); } }
/* moderation: a check pops beside each switch as it turns on */
.tg span::after { content: ' ✓'; color: var(--live); font-weight: 700; display: inline-block; opacity: 0; animation: md-ok 5s var(--ease) infinite; }
.tg:nth-child(2) span::after { animation-delay: .3s; } .tg:nth-child(3) span::after { animation-delay: .6s; } .tg:nth-child(4) span::after { animation-delay: .9s; }
@keyframes md-ok { 0%, 20% { opacity: 0; transform: scale(.4); } 26% { opacity: 1; transform: scale(1.25); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── how it works ────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; }
.steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 44px; border-top: 2px dashed var(--line2); }
.steps li { position: relative; display: grid; gap: 8px; justify-items: start; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px #fff, 0 20px 40px -30px rgba(var(--shadow), .35); }
.steps .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 16px/1 var(--mono); margin-bottom: 6px; }
.steps b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--soft); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }

/* ── the panel window, tilted until it arrives ───────────────────────── */
.window-wrap { perspective: 1600px; }
.window { display: grid; grid-template-columns: 64px 1fr; min-height: 460px; border-radius: 26px; overflow: hidden; background: var(--card);
  box-shadow: 0 60px 100px -50px rgba(var(--shadow), .6), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform: rotateX(var(--tilt, 24deg)) scale(var(--sc, .92)); transform-origin: 50% 100%; will-change: transform;
  /* No transition: home.js eases this every frame; a transition on top lags and overshoots. */ }
.window aside { display: grid; align-content: start; justify-items: center; gap: 14px; padding: 16px 0; background: #0f1013; border-right: 1px solid var(--cardline); }
.window aside img { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 8px; }
.window aside i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.07); }
.window aside i.on { background: rgba(77, 92, 255, .5); }
.win-main { padding: 22px; display: grid; gap: 16px; align-content: start; color: #e9eaee; min-width: 0; }
.win-head { display: flex; justify-content: space-between; align-items: center; }
.win-head b { font-weight: 600; }
.win-head .pill { background: rgba(255,255,255,.06); color: #e9eaee; box-shadow: none; }
.win-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px; border-radius: 16px; background: linear-gradient(110deg, #121a33, #0f1013 60%); box-shadow: inset 0 0 0 1px var(--cardline); }
.win-hero small { width: 100%; color: #8a8f9c; font-size: 13px; } .win-hero b { font-size: 20px; margin-right: auto; }
.qb { padding: 7px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--cardline); }
.win-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.win-tiles div { padding: 16px; border-radius: 14px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--cardline); display: grid; gap: 4px; }
.win-tiles b { font: 500 22px/1 var(--mono); } .win-tiles b.live { color: var(--live); } .win-tiles small { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: #7d8190; }
.win-rows { display: grid; gap: 8px; } .win-rows i { height: 34px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
@media (max-width: 700px) { .window { grid-template-columns: 1fr; } .window aside { display: none; } .win-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── closing ─────────────────────────────────────────────────────────── */
.closing { width: min(1180px, calc(100% - 32px)); margin: 0 auto 60px; }
.end { position: relative; overflow: hidden; padding: 90px 24px; border-radius: 34px; background: radial-gradient(600px 300px at 50% 0%, #23283a, var(--ink) 70%); color: #fff;
  display: grid; justify-items: center; gap: 28px; text-align: center; }
.end h2 { font: 500 clamp(36px, 5vw, 64px)/1.02 var(--sans); letter-spacing: -.04em; }
.end h2 em { color: #9aa0ad; font-size: 1.1em; }
/* The two tiles frame the headline instead of sitting on it: the left one
   rides high, the right one drops level with the buttons. Measured on a 375px
   phone (headline 90-204px down the card, buttons 232-342px and 184px wide):
   the left tile peeks over the card's top-left corner, the right one floats
   beside the buttons. Same sizes as before; the drift animation still runs. */
.e1 { width: 84px; left: 8%; top: 7%; transform: rotate(-10deg); }
.e2 { width: 64px; right: 10%; top: 54%; transform: rotate(12deg); animation-delay: -4s; }
@media (max-width: 760px) {
  .e1 { left: -14px; top: -16px; transform: rotate(-14deg); }
  .e2 { right: 7%; top: 58%; }
}
.e3 { width: 220px; right: -4%; bottom: -24%; animation-delay: -2s; }

.foot { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--soft); font-size: 14px; }
.foot span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); } .foot img { border-radius: 6px; }
.foot nav { display: flex; gap: 18px; } .foot a { text-decoration: none; } @media (hover: hover) { .foot a:hover { color: var(--ink); } }

/* ── intro: the panel's launch splash, in the studio light ─────────────
   The logo springs in with a sheen across it and two soft rings breathing
   out, a small live dot orbits it, QUANTBOT ripples in letter by letter as
   its tracking settles, logo tiles drift in from the corners, and a light
   runs along the line. On the way out the card lifts and the tiles scatter. */
#intro { display: none; }
.js #intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(900px 600px at 50% 42%, #ffffff 0%, var(--floor) 50%, var(--floor2) 100%);
  transition: opacity .75s var(--ease), visibility .75s; animation: in-giveup .6s 6s forwards; }
#intro::before { content: ''; position: absolute; inset: -32px; pointer-events: none;
  background-image: linear-gradient(rgba(var(--shadow), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--shadow), .05) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(46% 46% at 50% 46%, #000 10%, transparent 75%);
  animation: in-fade 1s var(--ease) both, in-grid 9s linear infinite; }
#intro.out { opacity: 0; visibility: hidden; pointer-events: none; } /* no full-screen blur on the way out: blurring the whole viewport every frame of the fade is what flickers */
.in-card { position: relative; display: grid; justify-items: center; gap: 18px; transition: transform .8s var(--ease); }
#intro.out .in-card { transform: translateY(-10px) scale(1.06); }

.in-mark { position: relative; width: 72px; height: 72px; animation: in-pop .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.in-mark img { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 20px; display: block;
  box-shadow: 0 1px 1px rgba(var(--shadow), .06), 0 20px 40px -18px rgba(var(--shadow), .55), 0 4px 10px -4px rgba(var(--shadow), .2); }
.in-mark::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 20px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) no-repeat; background-size: 250% 100%;
  animation: in-sheen 1.5s .55s var(--ease) both; }
.in-ring { position: absolute; inset: -2px; border-radius: 24px; border: 1.5px solid rgba(88, 101, 242, .32); opacity: 0;
  animation: in-ripple 2.2s .4s cubic-bezier(.2, .7, .2, 1) infinite; }
.in-ring.two { border-color: rgba(60, 207, 122, .3); animation-delay: 1.5s; }
.in-orbit { position: absolute; left: 50%; top: 50%; z-index: 3; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px rgba(60, 207, 122, .18), 0 0 10px rgba(60, 207, 122, .6);
  animation: in-fade .5s .7s both, in-orbit 2.6s .7s linear infinite; }

.in-word { display: flex; align-items: center; font: 600 15px/1 var(--sans); letter-spacing: .26em; color: var(--ink); perspective: 400px;
  animation: in-track 1.4s .2s var(--ease) both; }
.in-word b { display: inline-block; font-weight: 600; transform-origin: 50% 100%;
  animation: in-letter .75s var(--ease) both; animation-delay: calc(.3s + var(--i) * 55ms); }
.in-word .dot { margin-left: .5em; animation: in-fade .4s .85s both, breathe 2.4s var(--ease) infinite 1.2s; }
.in-line { width: 132px; height: 2px; border-radius: 2px; background: rgba(var(--shadow), .08); overflow: hidden; animation: in-fade .6s .55s both; }
.in-line i { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blurple), transparent);
  animation: in-run 1.15s ease-in-out infinite; }

.in-tile { position: absolute; border-radius: 24%; opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px -16px rgba(var(--shadow), .5), 0 4px 10px -4px rgba(var(--shadow), .2);
  animation: in-drift 1.5s var(--ease) both, in-bob 6s 1.5s ease-in-out infinite; }
.in-tile.a { width: 46px; left: calc(50% - 230px); top: calc(46% - 150px); --r: -12deg; --dx: -60px; --dy: -40px; --o: 1; animation-delay: .15s, 1.6s; }
.in-tile.b { width: 58px; left: calc(50% + 170px); top: calc(46% - 110px); --r: 10deg; --dx: 60px; --dy: -30px; --o: 1; animation-delay: .25s, 1.7s; }
.in-tile.c { width: 34px; left: calc(50% - 170px); top: calc(46% + 120px); --r: 8deg; --dx: -50px; --dy: 40px; --o: .9; animation-delay: .35s, 1.8s; }
.in-tile.d { width: 130px; left: calc(50% + 160px); top: calc(46% + 80px); --r: 14deg; --dx: 70px; --dy: 60px; --o: .45; filter: blur(16px); will-change: transform, translate; animation-delay: .2s, 1.65s; }
#intro.out .in-tile { animation: in-away .7s var(--ease) forwards; }

@keyframes in-pop { from { opacity: 0; transform: translateY(14px) scale(.6); } }
@keyframes in-sheen { from { background-position: 150% 0; } to { background-position: -60% 0; } }
@keyframes in-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes in-orbit { from { transform: rotate(0deg) translateX(58px); } to { transform: rotate(360deg) translateX(58px); } }
@keyframes in-letter { from { opacity: 0; transform: translateY(12px) rotateX(-75deg); filter: blur(6px); } }
@keyframes in-track { from { letter-spacing: .6em; } }
@keyframes in-run { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes in-fade { from { opacity: 0; } }
@keyframes in-grid { to { background-position: 32px 32px; } }
@keyframes in-drift { to { opacity: var(--o); transform: rotate(var(--r)); } }
@keyframes in-bob { 50% { translate: 0 -10px; } }
@keyframes in-away { from { opacity: var(--o); transform: rotate(var(--r)); } to { opacity: 0; transform: translate(calc(var(--dx) * 2.2), calc(var(--dy) * 2.2)) rotate(var(--r)) scale(1.15); } }
@keyframes in-giveup { to { opacity: 0; visibility: hidden; } }
@media (max-width: 520px) { .in-tile.a { left: 8%; } .in-tile.b { left: auto; right: 8%; } .in-tile.c { left: 14%; } .in-tile.d { left: auto; right: -10%; } }

/* ── entrances: visible without JS; with JS, things rise as they arrive ── */
/* Opacity and rise only. A blur here was re-rasterised every frame on every
   section as it arrived, which flickered on phones; these two stay on the
   compositor. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .08s; } .hero .reveal:nth-child(3) { transition-delay: .16s; } .hero .reveal:nth-child(4) { transition-delay: .24s; } .hero .reveal:nth-child(5) { transition-delay: .32s; }
.js .stage { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s; }
.js .stage.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .stage { opacity: 1; transform: none; filter: none; }
  .stamp, .news { opacity: 1; } .vr .fill { stroke-dashoffset: 0; } .vr .check { stroke-dashoffset: 0; } .bars i, .age::after { transform: none; }
  .vr-cap .a { opacity: 0; } .vr-cap .b, .tk .row small, .tg span::after { opacity: 1; }
  .window { --tilt: 0deg !important; --sc: 1 !important; }
}