/* TOKENS — the only file that may hold colour literals (rule 4).
   Provenance (all sampled from real pixels, none invented):
   --color-ink     #000000  mode pixel of brand/LOGO JUMPOFF PNG.png (1,198,736 px, ~90% of the opaque logo)
   --color-cream   #fdf5ef  mode cream of brand/LOGO JUMPOFF PNG...png (RGBA, alpha==255 pixels; also reference banner bg #fef5ee)
   --color-accent  #fb9928  mode orange of brand/LOGO JUMPOFF PNG...png (6,518 px)
   --color-red     #e31a02  mode red of reference/SAMPUL JUMPOFF JPG.jpg.jpeg headline (14,767 px)
   --color-mint    #00ffcc  given by the brief for the own-token pulse
   Surfaces/lines/muted text are color-mix() blends of the five above. */
:root{
  --color-ink:#000000;
  --color-cream:#fdf5ef;
  --color-accent:#fb9928;
  --color-red:#e31a02;
  --color-mint:#00ffcc;

  --color-bg:var(--color-cream);
  --color-surface:color-mix(in srgb,var(--color-cream) 35%,white);
  --color-surface-2:color-mix(in srgb,var(--color-cream) 88%,var(--color-ink));
  --color-line:color-mix(in srgb,var(--color-cream) 86%,var(--color-ink));
  --color-line-strong:color-mix(in srgb,var(--color-cream) 70%,var(--color-ink));
  --color-text:var(--color-ink);
  --color-text-muted:color-mix(in srgb,var(--color-ink) 68%,var(--color-cream));
  --color-text-subtle:color-mix(in srgb,var(--color-ink) 52%,var(--color-cream));
  --color-accent-soft:color-mix(in srgb,var(--color-accent) 18%,transparent);
  --color-up:var(--color-mint);
  --color-down:var(--color-red);

  /* reference-measured geometry */
  --radius-card:16px; --radius-lg:8px; --radius-md:6px; --radius-xl:12px; --radius-pill:9999px;
  --shadow-brutal:4px 4px 0 0 var(--color-ink);
  --shadow-brutal-sm:2px 2px 0 0 var(--color-ink);
  --ease:cubic-bezier(.4,0,.2,1); --dur:150ms;
  --font-display:"Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
  --font-sans:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1152px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.015em;overflow-wrap:anywhere;font-weight:400;line-height:1.1}
.muted{color:var(--color-text-muted)} .tiny{font-size:12px;color:var(--color-text-subtle)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.acc{color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px}

/* progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%}

/* CA slot */
.ca-bar{background:var(--color-ink);color:var(--color-cream);border-bottom:2px solid var(--color-ink)}
.ca-inner{max-width:1152px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px}
@media(min-width:640px){.ca-inner{padding:12px 24px;gap:16px}}
.ca-label{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--color-accent)}
.ca-value{font-family:var(--font-mono);font-size:clamp(16px,.35rem + 1.9vw,24px);font-weight:600;letter-spacing:.01em;overflow-wrap:anywhere;word-break:break-all;flex:1 1 220px;min-width:0;user-select:all}
.ca-bar[data-state="absent"] .ca-value{user-select:none;color:color-mix(in srgb,var(--color-cream) 60%,var(--color-ink));font-weight:500}
.ca-copy{min-width:44px;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);border:2px solid var(--color-cream);background:transparent;color:var(--color-cream);font-weight:700;font-size:13px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ca-copy:hover{background:var(--color-cream);color:var(--color-ink)}
.ca-copy[data-copied="1"]{background:var(--color-mint);border-color:var(--color-mint);color:var(--color-ink)}
.ca-feedback{font-size:12px;color:var(--color-mint);min-width:0}

/* header */
.site-header{position:sticky;top:0;z-index:30;border-bottom:2px solid var(--color-ink);background:color-mix(in srgb,var(--color-bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header-row{height:64px;display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px}
.brand-tile{width:40px;height:40px;border-radius:var(--radius-xl);background:var(--color-ink);border:2px solid var(--color-ink);display:grid;place-items:center;box-shadow:var(--shadow-brutal-sm)}
.brand-tile img{width:32px;height:32px}
.brand-word{font-size:18px}
.brand-word .dot{color:var(--color-accent)}
.main-nav{display:none;margin-left:8px;gap:4px}
.main-nav a{padding:6px 10px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;color:var(--color-text-muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);min-height:44px;display:inline-flex;align-items:center}
.main-nav a:hover{background:var(--color-surface-2);color:var(--color-text)}
@media(min-width:1024px){.main-nav{display:flex}}
@media(min-width:1280px){.main-nav a{padding:6px 12px}.main-nav{margin-left:16px}}
.socials{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
.social{width:44px;height:44px;border-radius:var(--radius-pill);border:2px solid var(--color-ink);background:var(--color-surface);display:grid;place-items:center;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);box-shadow:var(--shadow-brutal-sm)}
.social svg{width:18px;height:18px;fill:currentColor}
a.social:hover{background:var(--color-accent);transform:translateY(-1px);box-shadow:3px 3px 0 0 var(--color-ink)}
a.social:active{transform:translateY(1px);box-shadow:none}
span.social{border-color:var(--color-line-strong);color:var(--color-text-subtle);box-shadow:none;background:var(--color-surface-2);cursor:not-allowed}
@media(max-width:400px){.header-row{gap:8px}.brand-word{font-size:15px}.socials{gap:6px}.brand{gap:6px}}

/* hero */
.hero{position:relative;border-bottom:2px solid var(--color-ink);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;background:var(--color-bg)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.b1{width:420px;height:420px;left:-80px;top:-120px;background:var(--color-accent);animation:drift1 14000ms ease-in-out infinite alternate}
.b2{width:360px;height:360px;right:-60px;top:20px;background:var(--color-mint);opacity:.28;animation:drift2 18000ms ease-in-out infinite alternate}
.b3{width:320px;height:320px;left:35%;bottom:-160px;background:var(--color-red);opacity:.18;animation:drift3 16000ms ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(120px,60px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-100px,80px) scale(.9)}}
@keyframes drift3{to{transform:translate(-140px,-40px) scale(1.2)}}
.hero-grid{display:grid;gap:24px;align-items:center;padding-top:40px;padding-bottom:32px}
@media(min-width:768px){.hero-grid{grid-template-columns:1.05fr 1fr;padding-top:56px;padding-bottom:48px}}
.hero-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);padding:2px 6px;font-size:11px;line-height:1;color:var(--color-text-muted);background:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--color-text-subtle);display:inline-block}
.status[data-status="live"] .live-dot{background:var(--color-mint);animation:livePing 2000ms cubic-bezier(.4,0,.6,1) infinite}
.status[data-status="live"]{color:var(--color-ink);border-color:var(--color-ink)}
.status[data-status="error"] .live-dot{background:var(--color-red)}
@keyframes livePing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-mint) 70%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.h1{font-size:34px;margin:0}
@media(min-width:400px){.h1{font-size:36px}}
@media(min-width:640px){.h1{font-size:60px}}
.lede{margin:0;max-width:576px;color:var(--color-text-muted);font-size:16px}
@media(min-width:640px){.lede{font-size:18px}}
.cta{display:flex;flex-direction:column;gap:12px}
@media(min-width:400px){.cta{flex-direction:row}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border:2px solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-surface);font-weight:600;font-size:16px;white-space:nowrap;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:hover{background:var(--color-surface-2)}
.btn-primary{background:var(--color-accent);box-shadow:var(--shadow-brutal-sm)}
.btn-primary:hover{background:var(--color-accent);transform:translateY(-1px);box-shadow:3px 3px 0 0 var(--color-ink)}
.btn-primary:active{transform:translateY(1px);box-shadow:none}
.hero-visual{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin:0 auto;border:2px solid var(--color-ink);border-radius:var(--radius-card);background:var(--color-ink);box-shadow:var(--shadow-brutal);overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 55%,color-mix(in srgb,var(--color-accent) 38%,transparent),transparent 70%);animation:breathe 4000ms ease-in-out infinite alternate}
@keyframes breathe{to{opacity:.55;transform:scale(1.08)}}
.layer{position:absolute;inset:0;will-change:transform}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid color-mix(in srgb,var(--color-cream) 22%,transparent);transform:translate(-50%,-50%)}
.r1{width:68%;height:68%;border-style:dashed;animation:spin 40000ms linear infinite}
.r2{width:92%;height:92%;border-color:color-mix(in srgb,var(--color-accent) 40%,transparent);animation:spin 70000ms linear infinite reverse}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.chip{position:absolute;border-radius:50%;border:2px solid var(--color-ink)}
.c1{width:44px;height:44px;left:14%;top:20%;background:var(--color-accent);animation:bob 3600ms ease-in-out infinite alternate}
.c2{width:28px;height:28px;right:16%;top:30%;background:var(--color-mint);animation:bob 4400ms ease-in-out infinite alternate-reverse}
.c3{width:36px;height:36px;right:24%;bottom:16%;background:var(--color-cream);animation:bob 5000ms ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-14px)}}
.logo-layer{display:grid;place-items:center}
.hero-logo{width:74%;height:auto;filter:drop-shadow(0 12px 28px color-mix(in srgb,var(--color-accent) 40%,transparent))}

/* ticker */
.ticker{border-bottom:2px solid var(--color-ink);background:var(--color-ink);color:var(--color-cream);overflow:hidden;min-height:44px}
.ticker-track{display:flex;width:max-content;animation:marquee 60000ms linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:8px;padding:0 20px;min-height:44px;font-size:13px;white-space:nowrap;font-family:var(--font-mono)}
.tick b{font-family:var(--font-sans);font-weight:700}
.tick .up{color:var(--color-mint)} .tick .down{color:var(--color-accent)}
.tick .sk{display:inline-block;width:110px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--color-cream) 18%,transparent);animation:pulse 2000ms cubic-bezier(.4,0,.6,1) infinite}
.tile{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:700 11px var(--font-sans);background:var(--color-accent);color:var(--color-ink);flex:none;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}

.stack{display:flex;flex-direction:column;gap:48px;padding-top:32px;padding-bottom:16px}
@media(min-width:640px){.stack{padding-top:40px}}

/* stats */
.stats{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:420px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.stats{grid-template-columns:repeat(5,1fr)}}
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.stat{padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.stat-l{font-size:12px;color:var(--color-text-muted)}
.stat-v{font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px}
@media(min-width:640px){.stat-v{font-size:24px}}
.stat-s{font-size:11px;color:var(--color-text-subtle)}

/* spotlight */
.spot{position:relative;overflow:hidden}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--color-accent-soft),transparent 70%);transition:opacity 200ms var(--ease)}
.spot:hover::after{opacity:1}
.spot>*{position:relative;z-index:1}

/* sections */
.sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.eyebrow{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted)}
.sec-note{font-size:12px;color:var(--color-text-subtle)}
.sec-note.err{color:var(--color-red);font-weight:600}

/* board */
.board{border:2px solid var(--color-ink);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-brutal-sm);overflow:hidden}
.board-head{display:none}
.row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"n t p" ". c c";gap:6px 12px;align-items:center;padding:12px 14px;border-top:1px solid var(--color-line);position:relative;overflow:hidden;color:inherit;background:var(--color-surface);transition:background var(--dur) var(--ease)}
.row:first-child{border-top:0}
a.row:hover{background:var(--color-surface-2)}
.row::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--color-accent-soft),transparent 70%);transition:opacity 200ms var(--ease)}
.row:hover::after{opacity:1}
.c-n{grid-area:n;font-size:12px;color:var(--color-text-subtle)}
.c-t{grid-area:t;display:flex;align-items:center;gap:10px;min-width:0}
.c-t .tile{width:36px;height:36px;font-size:14px}
.c-t .tile.brandtile{background:var(--color-ink)}
.tname{min-width:0;display:flex;flex-direction:column}
.tname b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tname span{font-size:12px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-p{grid-area:p;text-align:right;font-weight:600;font-size:14px}
.cells{grid-area:c;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px}
.cells>span{display:inline-flex;gap:6px;align-items:baseline}
.cells em{font-style:normal;color:var(--color-text-subtle);font-family:var(--font-sans)}
.chg{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-weight:600}
.chg.up{background:var(--color-mint);color:var(--color-ink)}
.chg.down{background:var(--color-red);color:var(--color-cream)}
.chg.flat{background:var(--color-surface-2);color:var(--color-text-muted)}
@media(min-width:768px){
  .board-head,.row{grid-template-columns:44px minmax(0,2.2fr) 1.2fr 1fr 1.2fr 1.2fr;grid-template-areas:none;gap:12px;padding:12px 18px}
  .board-head{display:grid;padding:10px 18px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-subtle);background:var(--color-surface-2);border-bottom:1px solid var(--color-line)}
  .c-n,.c-t,.c-p{grid-area:auto}.c-p{text-align:right}
  .cells{display:contents}.cells>span{display:block;font-size:14px;text-align:right}.cells em{display:none}
  .board-head span:nth-child(n+3){text-align:right}
}
.row.own{border-left:2px solid var(--color-accent);animation:ownPulse 2000ms cubic-bezier(.4,0,.6,1) infinite}
@keyframes ownPulse{0%,100%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--color-mint) 0%,transparent)}50%{box-shadow:inset 0 0 28px 0 color-mix(in srgb,var(--color-mint) 38%,transparent)}}
.row.own[data-state="placeholder"]{cursor:default}
.own-tag{font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--color-ink);color:var(--color-cream);border-radius:var(--radius-pill);padding:0 6px;margin-left:6px;vertical-align:middle}
.row.skel{min-height:68px}
.sk-bar{display:block;height:14px;border-radius:7px;background:var(--color-surface-2);animation:pulse 2000ms cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}
.row.in{animation:rowIn 420ms var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.row.own.in{animation:rowIn 420ms var(--ease) both,ownPulse 2000ms cubic-bezier(.4,0,.6,1) 420ms infinite}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flash-up{animation:flashUp 900ms ease-out}
.flash-down{animation:flashDown 900ms ease-out}
@keyframes flashUp{0%{background:color-mix(in srgb,var(--color-mint) 70%,transparent)}100%{background:transparent}}
@keyframes flashDown{0%{background:color-mix(in srgb,var(--color-red) 55%,transparent);color:var(--color-cream)}100%{background:transparent}}
.dash{color:var(--color-text-subtle)}

/* cards */
.grid3,.grid4{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.grid3{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}}
.tilecard{padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tilecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-brutal)}
.tilecard h3{margin:0;font-size:18px}
.tilecard p{margin:0;color:var(--color-text-muted);font-size:14px}
.idx{font:700 12px var(--font-mono);color:var(--color-accent);background:var(--color-ink);border-radius:var(--radius-pill);padding:2px 10px;align-self:flex-start}
.notice{padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.notice-title{margin:0;font-weight:600}
.notice .muted{margin:0}

/* footer */
.site-footer{margin-top:64px;border-top:2px solid var(--color-ink)}
.foot-grid{display:grid;gap:32px;padding-top:40px;padding-bottom:40px;font-size:14px}
@media(min-width:640px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand p{margin:0}
.site-footer nav{display:flex;flex-direction:column}
.site-footer nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--color-text-muted)}
.site-footer nav a:hover{color:var(--color-text);text-decoration:underline}
.foot-h{margin:0 0 4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}

/* reveal: JS adds .js and drives opacity/transform with the spring solver */
.js .reveal{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.reveal{opacity:1!important;transform:none!important}
  .ticker{overflow-x:auto}
  .ticker-track{transform:none!important}
}