@font-face {
  font-family: "Archivo";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/files/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/files/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0E0E0E; --paper: #F2F0EB; --accent: #E4FF3A;
  --muted: #76746E; --line: rgba(14,14,14,.14); --lined: rgba(242,240,235,.14);
  --gutter: clamp(16px, 4.4vw, 64px); --maxw: 1440px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); font-size: clamp(16px, .6vw + 13px, 19px); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nw { white-space: nowrap; }

/* Hero */
.hero {
  position: relative; color: var(--paper); overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex;
  background:
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(228,255,58,.10), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(242,240,235,.06) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--ink);
}
.hero-in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(48px, 8vh, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 85%; font-size: clamp(24px, 2vw, 32px); letter-spacing: .01em; }
.brand img { width: 1.3em; height: 1.3em; border-radius: 8px; box-shadow: 0 0 0 1px var(--lined); }
.hero h1 { margin-top: clamp(18px, 3vh, 32px); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(64px, 14.6vw, 212px); line-height: .98; letter-spacing: -.012em; }
.hero h1 .ln { display: block; }
.hero h1 .hl { color: var(--accent); }
.soon { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 5vh, 56px); padding-top: 18px; border-top: 1px solid var(--lined); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(228,255,58,.2); }
@media (max-width: 640px) {
  .hero h1 { font-size: 24.5vw; line-height: .96; }
  .hero h1 .ln > span { display: block; }
}

/* Story: pinned stage, scroll steps through the lists (desktop) */
.story { position: relative; z-index: 1; background: var(--paper); }
.stage { padding-block: clamp(72px, 10vw, 150px); }
.split { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
}
.h, .mh, .avm h2 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(44px, 5vw, 80px); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
.aside { display: none; }
.mh { margin-bottom: clamp(24px, 4vw, 40px); }
.mh-b { margin-top: clamp(72px, 12vw, 140px); }

.list { list-style: none; border-top: 2px solid var(--ink); }
.list li { display: grid; grid-template-columns: 3.4em 1fr; column-gap: 12px; align-items: baseline; padding-block: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--line); }
.list .n { font-size: .85em; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.list .t { font-weight: 800; font-stretch: 78%; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.08; letter-spacing: -.005em; }
.list .d { grid-column: 2; margin-top: 8px; color: var(--muted); font-size: .95em; max-width: 46ch; }
.gone .t { position: relative; justify-self: start; color: rgba(14,14,14,.42); }
.gone s { text-decoration: none; }
.gone .t::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .055em; min-height: 2px; border-radius: 2px; background: var(--accent); }

.pin .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding-block: 0; }
.pin .stage .split { height: 100%; align-items: center; }
.pin .aside { display: block; }
.pin .mh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.pin .lists { position: relative; height: 100vh; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 8%, #000 92%, transparent 100%); }
.pin .have, .pin .gone { position: absolute; inset: 0 0 auto 0; border-top-color: transparent; }
.pin .have { transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.pin .gone { opacity: 0; transition: opacity .25s; top: 50%; transform: translateY(-50%); }
.pin .phase-b .have { opacity: 0; pointer-events: none; }
.pin .phase-b .gone { opacity: 1; }
.heads { display: grid; }
.heads .h { grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.heads .h-b { opacity: 0; transform: translateY(24px); }
.phase-b .heads .h-a { opacity: 0; transform: translateY(-24px); }
.phase-b .heads .h-b { opacity: 1; transform: none; }
.count { display: flex; margin-top: clamp(28px, 4vh, 48px); align-items: baseline; gap: 10px; font-weight: 900; font-stretch: 62%; line-height: .9; }
.count .cur { font-size: clamp(96px, 10vw, 168px); font-variant-numeric: tabular-nums; }
.count .tot { font-size: clamp(28px, 2.6vw, 40px); color: var(--muted); }

.pin .list li { position: relative; padding-inline: clamp(16px, 1.8vw, 28px); border-radius: 16px; border-bottom-color: transparent; }
.pin .list li::after { content: ""; position: absolute; left: clamp(16px, 1.8vw, 28px); right: clamp(16px, 1.8vw, 28px); bottom: 0; height: 1px; background: var(--line); }
.pin .have li { transition: background-color .06s linear; }
.pin .have li .t { color: rgba(14,14,14,.6); transition: color .06s linear; }
.pin .have li.on { background: var(--accent); transition-duration: .1s; }
.pin .have li.on .t { color: var(--ink); transition-duration: .1s; }
.pin .have li.on::after, .pin .have li:has(+ li.on)::after { opacity: 0; }
.pin .have li.on .n { color: var(--ink); }
.pin .have li.on .d { color: rgba(14,14,14,.72); }
.pin .have .d { max-width: none; white-space: nowrap; }
.pin .gone .t { color: var(--ink); transition: color .4s .2s; }
.pin .gone li.done .t { color: rgba(14,14,14,.62); }
.pin .gone .t::after { transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.pin .gone li.done .t::after { transform: scaleX(1); }

/* AVM: full screen, slides over the pinned stage */
.pin .avm { margin-top: -100vh; height: 100vh; }
.avm { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--accent); box-shadow: 0 -24px 60px rgba(0,0,0,.18); }
.avm-in { flex: 1; width: 100%; align-content: center; padding-block: clamp(96px, 12vh, 140px) clamp(48px, 8vh, 96px); }
@media (min-width: 1000px) { .avm-in { align-items: end; } }
.avm h2 { font-size: clamp(56px, 8vw, 140px); line-height: .95; }
.avm-p { margin-top: 22px; max-width: 30ch; font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; }
.mail { display: inline-block; margin-top: 28px; font-weight: 800; font-stretch: 85%; font-size: clamp(22px, 2.4vw, 36px); text-decoration: none; overflow-wrap: anywhere; transition: opacity .2s; }
.mail:hover { opacity: .65; }
.specs { border-top: 2px solid var(--ink); align-self: end; }
.specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid rgba(14,14,14,.22); }
.specs dt { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.specs dd { font-weight: 900; font-stretch: 62%; font-size: clamp(34px, 3.6vw, 60px); line-height: 1; }
.foot { background: var(--ink); color: rgba(242,240,235,.65); padding-block: 22px 28px; font-size: .85em; }

/* Reveal */
.js .rv { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }