/* Swarmy games: one continuous surface. A field of dots runs behind every page and lights up around
   the pointer; sections flow into each other with no boxes between them. The brain and the agents are
   inline SVG, so their moods and idle moves live here too.
   Palette kept from the brand: night ground, pale ink, yellow on the action, lime and tomato in the art. */

@font-face { font-family: Switzer; font-weight: 400; font-display: swap; src: url(../assets/fonts/switzer-400.woff2) format('woff2'); }
@font-face { font-family: Switzer; font-weight: 600; font-display: swap; src: url(../assets/fonts/switzer-600.woff2) format('woff2'); }
@font-face { font-family: Unbounded; font-weight: 500 800; font-display: swap; src: url(../assets/fonts/unbounded-latin.woff2) format('woff2'); 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; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); 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; }
/* the same faces for Vietnamese, Cyrillic and other Latin letters (Google Fonts subsets, OFL); Switzer has none
   of them, so Vietnamese and Russian pages set their text in Inter instead (see the :lang rules) */
@font-face { font-family: Unbounded; font-weight: 500 800; font-display: swap; src: url(../assets/fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; font-weight: 500 800; font-display: swap; src: url(../assets/fonts/unbounded-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Unbounded; font-weight: 500 800; font-display: swap; src: url(../assets/fonts/unbounded-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(../assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(../assets/fonts/jetbrains-mono-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Inter; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/inter-latin.woff2) format('woff2'); 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 {
  --ground: #07130d;
  --tile: #10241a;
  --tile-2: #173424;
  --ink: #eef7e8;
  --soft: #b8cbbd;
  --accent: #f6e016;
  --lime: #c8ff2e;
  --tom: #ff5a36;
  --sky: #9ad9ff;
  --mint: #bfeccf;
  --line: rgba(238, 247, 232, .13);

  --display: Unbounded, 'Arial Black', system-ui, sans-serif;
  --body: Switzer, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --h1: clamp(42px, 6.4vw, 100px);
  --h2: clamp(32px, 4.4vw, 68px);
  --h3: clamp(22px, 2.1vw, 32px);
  --lead: clamp(18px, 1.45vw, 22px);

  --nav-h: 68px;
  --side: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mood: var(--mint);
}
html[data-mood='happy'] { --mood: var(--lime); }
html[data-mood='angry'] { --mood: var(--tom); }
html[data-mood='stressed'] { --mood: var(--accent); }
html[data-mood='focus'] { --mood: var(--sky); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color-scheme: dark; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
/* languages: Switzer has no Vietnamese or Cyrillic letters; Japanese, Korean, Chinese and Thai use the
   system's own fonts after the Latin ones, with looser lines and no tightened letter spacing */
:lang(vi), :lang(ru) { --body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
:lang(ja) { --cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo; }
:lang(ko) { --cjk: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic'; }
:lang(zh) { --cjk: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei'; }
:lang(th) { --cjk: Thonburi, 'Noto Sans Thai', 'Leelawadee UI', Tahoma; }
:lang(ja), :lang(ko), :lang(zh), :lang(th) { --body: Switzer, var(--cjk), system-ui, sans-serif; --display: Unbounded, var(--cjk), system-ui, sans-serif; }
:is(:lang(ja), :lang(ko), :lang(zh), :lang(th)) :is(.h1, .h2, .h3, .row-t) { letter-spacing: 0; line-height: 1.25; }
:is(:lang(vi), :lang(ru)) :is(.h1, .h2) { line-height: 1.12; }
:lang(th) body { line-height: 1.75; }

body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: rgba(238, 247, 232, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--ground); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--side); }
main, .foot, .nav { position: relative; z-index: 1; }
.h1 { font: 800 var(--h1)/.98 var(--display); letter-spacing: -.025em; }
.h2 { font: 800 var(--h2)/1 var(--display); letter-spacing: -.025em; }
.h3 { font: 800 var(--h3)/1.12 var(--display); letter-spacing: -.01em; }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--soft); max-width: 46ch; }
.meta { font: 500 13px/1.6 var(--mono); color: var(--soft); letter-spacing: .02em; }
.small { font-size: 14px; color: var(--soft); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .lead { margin: 0; }
section + section { margin-top: clamp(96px, 12vw, 180px); }

/* ---------------------------------------------------------------- the field behind everything */

.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aur { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.aur-1 { left: -30vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(200, 255, 46, .11), transparent); animation: drift 26s ease-in-out infinite alternate; }
.aur-2 { right: -35vmax; bottom: -45vmax; background: radial-gradient(closest-side, rgba(154, 217, 255, .09), transparent); animation: drift 32s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(238, 247, 232, .13) 1.2px, transparent 1.7px); background-size: 30px 30px; }
.dots--lit { inset: auto; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%;
  background-image: radial-gradient(var(--mood) 1.6px, transparent 2.2px);
  transform: translate(calc(var(--mx, -999px) - 260px), calc(var(--my, -999px) - 260px));
  background-position: calc(260px - var(--mx, -999px)) calc(260px - var(--my, -999px));
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }

/* ---------------------------------------------------------------- menu */

.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 28px; padding-inline: var(--side);
  background: linear-gradient(rgba(7, 19, 13, .94), rgba(7, 19, 13, .8)); border-bottom: 1px solid transparent; transition: border-color .3s; view-transition-name: nav; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo-brain { width: 50px; flex: none; }
.logo-word { font: 800 19px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.w-arm { color: var(--accent); }
.nav-links { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { flex: none; }
.nav-links a { position: relative; padding: 8px 12px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--soft); transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-mood { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--soft); padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
.nav-mood i { width: 8px; height: 8px; border-radius: 50%; background: var(--mood); box-shadow: 0 0 10px var(--mood); transition: background .4s, box-shadow .4s; }
.nav-mood b { color: var(--ink); font-weight: 500; }
/* the globe: every language, as a small menu that drops from the nav */
.lang { position: relative; flex: none; }
.lang summary { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; font: 500 12px/1 var(--mono); color: var(--soft); cursor: pointer; list-style: none; transition: color .2s, border-color .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 15px; height: 15px; }
.lang summary:hover, .lang[open] summary { color: var(--ink); border-color: var(--accent); }
.lang ul { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 200px; max-height: min(80vh, 560px); overflow-y: auto;
  background: rgba(10, 26, 18, .96); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); animation: lang-in .22s var(--ease); }
.lang a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; }
.lang a:hover { background: rgba(238, 247, 232, .07); color: var(--ink); }
.lang a[aria-current] { color: var(--ground); background: var(--accent); }
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } }
.nav-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--lime), var(--accent)); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------------------------------------------------------------- buttons, rows, cards and the pointer */

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 99px; border: 1px solid rgba(238, 247, 232, .28);
  background: rgba(16, 36, 26, .55); color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none; overflow: hidden; cursor: pointer;
  transform: translate(var(--bx, 0), var(--by, 0)); transition: transform .35s var(--ease), border-color .25s, background-color .25s; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--sx, 50%) var(--sy, 50%), rgba(200, 255, 46, .35), transparent 70%); opacity: 0; transition: opacity .25s; }
.btn:hover { border-color: var(--lime); }
.btn:hover::before { opacity: 1; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.btn--accent::before { background: radial-gradient(120px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .55), transparent 70%); }
.btn--accent:hover { border-color: var(--accent); }
.btn--soon { border-style: dashed; color: var(--soft); background: none; cursor: default; }
.links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; margin-top: 20px; }

[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before, [data-spot]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
[data-spot]::before { z-index: -1; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(200, 255, 46, .09), transparent 60%); }
[data-spot]::after { padding: 1px; background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), var(--lime), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(180px, 5fr) minmax(0, 7fr) 28px; gap: 8px 32px; align-items: center; padding: 26px 20px; border-bottom: 1px solid var(--line); text-decoration: none; border-radius: 4px; }
.row-t { font: 500 clamp(20px, 1.9vw, 28px)/1.2 var(--display); letter-spacing: -.01em; transition: transform .45s var(--ease), color .3s; }
.row-d { color: var(--soft); overflow-wrap: anywhere; }
.arr { width: 26px; height: 26px; color: var(--soft); transition: transform .45s var(--ease), color .3s; }
.row:hover .row-t { transform: translateX(10px); color: var(--accent); }
.row:hover .arr { transform: translate(4px, -4px); color: var(--lime); }
/* the one inbox: the address large, what it is for underneath */
.rows--mail .row { grid-template-columns: 1fr; gap: 10px; padding-block: 30px; }
.rows--mail .row-t { font-size: clamp(20px, 2.1vw, 32px); overflow-wrap: normal; }

.card { border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: rgba(16, 36, 26, .6); }

/* ---------------------------------------------------------------- the brain */

.brain { display: block; --lobe: var(--lime); --lt: 0; --lb: 0px; }
.brain-svg { width: 100%; height: auto; overflow: visible; }
.brain * { transform-box: fill-box; }
.b-body { transform-origin: 50% 100%; }
.b-lobe, .b-lid-top, .b-lid-bot { fill: var(--lobe, #c8ff2e); transition: fill .6s, transform .28s var(--ease); }
.b-shadow { transform-origin: center; }
.b-lid-top { transform-origin: 50% 0; transform: scaleY(var(--lt)); transition: transform .28s var(--ease); }
.b-lid-bot { transform: translateY(var(--lb)); transition: transform .3s var(--ease); }
.b-pupil circle:first-child { transform-origin: center; transition: transform .3s var(--ease); }
.b-brow { transform-origin: center; transition: transform .35s var(--ease); }
.m { opacity: 0; transform-origin: center; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease); }
.b-cheek, .b-sweat, .b-steam, .b-zz, .b-spark { opacity: 0; transition: opacity .3s; }
.b-spark path { transform-origin: center; }
.brain.is-blink { --lt: 1 !important; }
.brain.is-blink .b-lid-top { transition-duration: .08s; }

.brain[data-mood='calm'] { --lobe: var(--mint); --lt: .42; }
.brain[data-mood='calm'] .m-calm { opacity: 1; transform: none; }
.brain[data-mood='calm'] .b-brow { transform: translateY(4px); }
.brain[data-mood='calm'] .b-zz { opacity: 1; animation: zz 3s ease-in-out infinite; }
.brain[data-mood='calm'] .b-body { animation: breathe 4.5s ease-in-out infinite; }

.brain[data-mood='focus'] { --lobe: var(--lime); --lt: .18; }
.brain[data-mood='focus'] .m-focus { opacity: 1; transform: none; }
.brain[data-mood='focus'] .b-brow { transform: translateY(5px); }
.brain[data-mood='focus'] .b-body { animation: breathe 2.6s ease-in-out infinite; }

.brain[data-mood='happy'] { --lobe: #d8ff5a; --lb: -26px; }
.brain[data-mood='happy'] .m-happy { opacity: 1; transform: none; }
.brain[data-mood='happy'] .b-brow { transform: translateY(-8px); }
.brain[data-mood='happy'] .b-cheek { opacity: .6; }
.brain[data-mood='happy'] .b-spark { opacity: 1; }
.brain[data-mood='happy'] .b-spark path { animation: twinkle 1.1s ease-in-out infinite alternate; }
.brain[data-mood='happy'] .b-body { animation: bounce .62s var(--ease) infinite alternate; }

.brain[data-mood='angry'] { --lobe: var(--tom); --lt: .32; }
.brain[data-mood='angry'] .m-angry { opacity: 1; transform: none; }
.brain[data-mood='angry'] .b-brow-l { transform: translate(6px, 12px) rotate(22deg); }
.brain[data-mood='angry'] .b-brow-r { transform: translate(-6px, 12px) rotate(-22deg); }
.brain[data-mood='angry'] .b-steam { opacity: 1; }
.brain[data-mood='angry'] .b-steam circle { animation: puff 1s ease-out infinite; transform-origin: center; }
.brain[data-mood='angry'] .b-body { animation: shake .22s linear infinite; }

.brain[data-mood='stressed'] { --lobe: var(--accent); }
.brain[data-mood='stressed'] .m-stressed { opacity: 1; transform: none; }
.brain[data-mood='stressed'] .b-pupil circle:first-child { transform: scale(.55); }
.brain[data-mood='stressed'] .b-brow-l { transform: translate(0, -8px) rotate(-16deg); }
.brain[data-mood='stressed'] .b-brow-r { transform: translate(0, -8px) rotate(16deg); }
.brain[data-mood='stressed'] .b-sweat { opacity: 1; animation: drip 1.4s ease-in infinite; }
.brain[data-mood='stressed'] .b-body { animation: jitter .14s linear infinite; }

@keyframes breathe { 50% { transform: scale(1.025, .985); } }
@keyframes bounce { to { transform: translateY(-14px) scale(1.02, .98); } }
@keyframes shake { 25% { transform: translateX(-5px) rotate(-1deg); } 75% { transform: translateX(5px) rotate(1deg); } }
@keyframes jitter { 33% { transform: translate(1.5px, -1px); } 66% { transform: translate(-1.5px, 1px); } }
@keyframes zz { 50% { transform: translate(6px, -8px); opacity: .5; } }
@keyframes twinkle { to { transform: scale(.55) rotate(30deg); } }
@keyframes puff { from { transform: translateY(8px) scale(.5); opacity: 1; } to { transform: translateY(-18px) scale(1.3); opacity: 0; } }
@keyframes drip { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

/* ---------------------------------------------------------------- the agents' idle moves */

.agent { overflow: visible; }
.agent * { transform-box: fill-box; }
.a-float, .a-hover { animation: float 2.4s ease-in-out infinite; }
.a-hover { animation-duration: 1.5s; }
.a-shadow { transform-origin: center; animation: shadow 2.4s ease-in-out infinite; }
.a-prop { transform-origin: center; animation: prop .2s linear infinite; }
.a-scan { animation: scan 3.2s ease-in-out infinite; }
.a-blink { transform-origin: center; animation: blink 4.2s infinite; }
.a-scribble { transform-origin: 0 0; animation: scribble .45s ease-in-out infinite alternate; }
.a-squish { transform-origin: 50% 100%; animation: squish 1.4s ease-in-out infinite; }
.a-paint { transform-origin: 0 100%; animation: paint .6s ease-in-out infinite alternate; }
.a-cursor, .a-light { animation: on-off .9s steps(1) infinite; }
.a-mash1 { animation: on-off .34s steps(1) infinite; }
.a-mash2 { animation: on-off .34s steps(1) .17s infinite; }
.a-type1 { animation: type .2s ease-in-out infinite alternate; }
.a-type2 { animation: type .2s ease-in-out .1s infinite alternate; }
.a-thump { transform-origin: center; animation: thump .5s ease-out infinite; }
.a-note { animation: note 2s ease-out infinite; opacity: 0; }
.a-note2 { animation-delay: 1s; }
.a-dart { animation: scan 1.6s ease-in-out infinite; }
.a-flame { transform-origin: 50% 0; animation: flame .12s ease-in-out infinite alternate; }
.a-spin { transform-origin: center; animation: spin 4s linear infinite; }
.a-spin--slow { animation-duration: 6s; }
.a-beam { animation: beam 1.6s ease-in-out infinite; }
.a-smoke { transform-origin: 50% 100%; animation: smoke .9s ease-in-out infinite alternate; }
.a-wave { transform-origin: 0 100%; animation: wave .7s ease-in-out infinite alternate; }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes shadow { 50% { transform: scaleX(.75); opacity: .25; } }
@keyframes prop { 50% { transform: scaleX(.18); } }
@keyframes scan { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes scribble { from { transform: rotate(-9deg); } to { transform: rotate(7deg) translateY(2px); } }
@keyframes squish { 50% { transform: scale(1.05, .95); } }
@keyframes paint { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes on-off { 50% { opacity: .2; } }
@keyframes type { to { transform: translateY(4px); } }
@keyframes thump { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes note { 0% { transform: translateY(6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes flame { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes beam { 50% { opacity: .05; } }
@keyframes smoke { from { transform: scale(.9, .85); } to { transform: scale(1.06, 1.1); } }
@keyframes wave { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- hero: the name merges like two branches */

.hero { position: relative; display: grid; align-content: center; gap: clamp(32px, 4vw, 56px); min-height: calc(100svh - var(--nav-h)); padding-block: 48px 40px; }
.hero-swarm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm { position: relative; font: 800 clamp(64px, 13.4vw, 220px)/.88 var(--display); letter-spacing: -.04em; margin: 0; }
.wm-1, .wm-2 { display: block; }
.wm-1 { padding-top: .36em; }
.wm-word { position: relative; display: inline-block; cursor: pointer; }
.w-arm { position: relative; }
.wm .w-arm { text-shadow: 0 0 .45em rgba(246, 224, 22, .32); }
.mg-ghost { position: absolute; left: 0; top: 0; color: var(--accent); opacity: 0; pointer-events: none; }
.mg-pad { visibility: hidden; }
.js .is-merging .mg-a { animation: merge-a 1.5s var(--ease) both; }
.js .is-merging .mg-b { animation: merge-b 1.5s var(--ease) both; }
.js .is-merging .mg-ghost { animation: merge-ghost 1.5s var(--ease) both; }
.js .is-merging .w-arm { animation: merge-a 1.5s var(--ease) both, flash .9s ease-out 1.45s both; }
@keyframes merge-a { 0% { opacity: 0; transform: translate(-.5em, -.5em); } 28%, 52% { opacity: 1; transform: translate(-.18em, -.5em); } 100% { opacity: 1; transform: none; } }
@keyframes merge-b { 0% { opacity: 0; transform: translate(.5em, .5em); } 28%, 52% { opacity: 1; transform: translate(.18em, .5em); } 100% { opacity: 1; transform: none; } }
@keyframes merge-ghost { 0% { opacity: 0; transform: translate(.5em, .5em); } 28%, 52% { opacity: 1; transform: translate(.18em, .5em); } 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes flash { 0% { text-shadow: 0 0 .1em #fff, 0 0 .5em var(--accent), 0 0 1.2em var(--accent); color: #fffbe0; } 100% { text-shadow: 0 0 .45em rgba(246, 224, 22, .32); } }
.bk { position: absolute; left: var(--l, 0); width: var(--w, 0); height: .2em; border: max(2px, .018em) solid var(--lime); pointer-events: none; display: none; }
.js .bk { display: block; }
.bk i { position: absolute; left: 50%; transform: translateX(-50%); font: 500 max(12px, .085em)/1 var(--mono); font-style: normal; letter-spacing: .1em; white-space: nowrap; padding: 0 .5em; background: var(--ground); }
.bk--swarm { top: .02em; border-bottom: 0; border-radius: .06em .06em 0 0; }
.bk--swarm i { top: -.62em; color: var(--lime); }
.bk--army { bottom: -.3em; border-top: 0; border-color: var(--accent); border-radius: 0 0 .06em .06em; }
.bk--army i { bottom: -.6em; color: var(--accent); }
.js .bk { clip-path: inset(0 100% 0 0); }
.js .is-merged .bk { animation: draw .8s var(--ease) forwards; }
.js .is-merged .bk--army { animation-delay: .2s; }
@keyframes draw { to { clip-path: inset(-1em -1em -1em -1em); } }

/* "games": quiet grey under the name, the letters bobbing a beat apart */
.wm-2 { margin-top: .4em; font-size: .74em; letter-spacing: -.02em; }
.wm-2 span { display: inline-block; color: #7f9286; text-shadow: 0 .07em 0 #0b2116, 0 .1em .08em rgba(0, 0, 0, .45); animation: bob 2.6s ease-in-out calc(var(--i) * .14s) infinite; transition: transform .3s var(--ease); }
.js .wm-2 span { animation: pop-in .6s var(--ease) calc(1.5s + var(--i) * .08s) both, bob 2.6s ease-in-out calc(2.2s + var(--i) * .14s) infinite; }
.wm-2 span:hover { animation-play-state: paused; transform: translateY(-.14em) rotate(-6deg) scale(1.08); }
@keyframes bob { 50% { transform: translateY(-.045em); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(.3em) scale(.4); } }

.hero-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 32px 56px; align-items: end; }
.hero-lead { margin: 0; }
.term-win { border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 26, 18, .86); overflow: hidden; box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--mood) 45%, transparent); transition: box-shadow .6s; }
.term-bar { display: flex; align-items: center; gap: 7px; margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--line); font: 500 11.5px/1 var(--mono); color: var(--soft); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--tom); }
.term-bar i:nth-child(2) { background: var(--accent); } .term-bar i:nth-child(3) { background: var(--lime); }
.term-bar span { margin-left: 8px; }
.term { margin: 0; padding: 16px 22px 18px; font: 500 13.5px/1.9 var(--mono); color: var(--soft); white-space: pre; overflow: hidden; }
.js .term { height: calc(9 * 1.9em + 34px); display: flex; flex-direction: column; justify-content: flex-end; }
.term .ln { display: block; animation: ln-in .25s var(--ease); }
@keyframes ln-in { from { opacity: 0; transform: translateY(6px); } }
.t-bar { color: var(--c, var(--lime)); }
.t-dim { color: rgba(184, 203, 189, .55); }
.t-big { color: var(--accent); }
.term b { color: var(--accent); font-weight: 500; }
.t-p { color: var(--lime); }
.t-ok { color: var(--lime); }
.t-cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--lime); animation: on-off 1s steps(1) infinite; }
.js .wm-1 { animation: none; }
.js .hero-foot { animation: rise 1s var(--ease) .9s both; }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }

/* ---------------------------------------------------------------- who we are */

.who-say { margin: clamp(28px, 4vw, 48px) 0 0; font: 500 clamp(26px, 3.4vw, 54px)/1.18 var(--display); letter-spacing: -.02em; max-width: 24ch; }
.js .who-say span { color: rgba(238, 247, 232, .18); transition: color .35s; }
.js .who-say span.is-lit { color: var(--ink); }
.facts { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.facts li { padding: 28px 24px 28px 0; border-radius: 4px; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts .h3 { display: block; font-size: clamp(20px, 1.6vw, 24px); margin-bottom: 12px; }
.facts p { color: var(--soft); margin: 0; }

/* ---------------------------------------------------------------- our team: the squads in orbit */

.team { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(32px, 4vw, 64px); align-items: center; }
.team-copy .lead { margin: 20px 0 28px; }
.team-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.team-list button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; border-radius: 4px; transition: background-color .25s; }
.tl-bot { grid-row: 1 / span 2; width: 40px; }
.team-list b { font: 800 16px/1.2 var(--display); transition: color .25s; }
.tl-job { grid-column: 2; font-size: 14px; color: var(--soft); }
.tl-tasks { grid-column: 3; grid-row: 1 / span 2; justify-self: end; text-align: right; font: 500 11px/1.3 var(--mono); color: var(--soft); }
.tl-tasks b { display: block; font: 500 17px/1.2 var(--mono); color: var(--c); font-variant-numeric: tabular-nums; transition: transform .25s var(--ease), text-shadow .25s; }
.tl-tasks b.is-bump { transform: translateY(-3px) scale(1.08); text-shadow: 0 0 12px var(--c); }
.team-list button:hover, .team-list button.is-hl { background: color-mix(in srgb, var(--c) 9%, transparent); }
.team-list button:hover b, .team-list button.is-hl b { color: var(--c); }

.orbit { position: relative; margin-bottom: 52px; aspect-ratio: 1 / .9; width: 100%; max-width: 760px; justify-self: center; }
.orbit-ring { position: absolute; left: 6%; right: 6%; top: 12%; bottom: 12%; border-radius: 50%; border: 1.5px dashed rgba(238, 247, 232, .16); }
.orbit-ring--in { left: 24%; right: 24%; top: 28%; bottom: 28%; border-style: solid; border-color: rgba(200, 255, 46, .08); background: radial-gradient(closest-side, color-mix(in srgb, var(--mood) 18%, transparent), transparent); transition: background .6s; }
.brain--hero { position: absolute; left: 50%; top: 47%; width: 40%; translate: -50% -50%; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.brain--hero.is-fire { animation: recoil .35s var(--ease); }
@keyframes recoil { 30% { scale: 1.07 .93; } 60% { scale: .97 1.04; } }
.orb { position: absolute; left: 0; top: 0; width: clamp(76px, 14%, 116px); padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; will-change: transform; }
.orb.is-front { z-index: 3; }
.orb-bot { display: block; transition: filter .3s; }
.orb:hover .orb-bot { filter: drop-shadow(0 0 14px var(--c)); }
.orb.is-hit .orb-bot { animation: hit .45s var(--ease); }
@keyframes hit { 20% { transform: scale(1.3, .72) translateY(10%); } 50% { transform: scale(.88, 1.16) translateY(-12%); } 75% { transform: scale(1.05, .96); } }
.orb-name { position: absolute; left: 50%; top: 100%; translate: -50% 4px; font: 600 12px/1 var(--body); color: var(--soft); white-space: nowrap; padding: 4px 8px; border-radius: 99px; background: rgba(7, 19, 13, .8); transition: color .2s; }
.orb:hover .orb-name, .orb.is-hl .orb-name { color: var(--c); }
.brain-status { position: absolute; left: 50%; bottom: -44px; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--mood) 45%, transparent);
  border-radius: 99px; background: rgba(10, 26, 18, .9); font: 500 12.5px/1.2 var(--mono); color: var(--soft); white-space: nowrap; transition: border-color .4s; }
.brain-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--mood); box-shadow: 0 0 10px var(--mood); animation: on-off 1.4s ease-in-out infinite; transition: background .4s; }
.brain-status b { color: var(--mood); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; transition: color .4s; }
.brain-status span { color: var(--ink); }
.brain-status.is-new span { animation: ln-in .35s var(--ease); }
.orbit-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* ---------------------------------------------------------------- how we work: the build plays on its own */

.build-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.build-head .lead { margin: 0; }
.build-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(28px, 4vw, 72px); align-items: center; --c: var(--sky); }
.build-left { display: grid; grid-template-rows: auto auto; gap: 8px; min-width: 0; }
.build-org { display: grid; place-items: center; }
.org { width: 100%; max-width: 520px; max-height: 470px; overflow: visible; }
.cab { fill: none; stroke: rgba(238, 247, 232, .12); stroke-width: 3; }
.cab-on path { fill: none; stroke: var(--c); stroke-linecap: round; }
.cab-on { opacity: 0; transition: opacity .4s; }
.cab-glow { stroke-width: 12; opacity: .22; }
.cab-core { stroke-width: 3.5; }
.cab-on.is-on { opacity: 1; }
.cab-on.is-done { opacity: .3; }
.cab-on.is-done .cab-glow { opacity: 0; }
.cab-dot { fill: #fff; stroke: var(--c); stroke-width: 3; opacity: 0; transition: opacity .3s; }
.cab-dot.is-on { opacity: 1; }
.sq { cursor: pointer; outline: none; }
.sq-ring { fill: var(--c); opacity: 0; transition: opacity .35s; }
.sq:hover .sq-ring, .sq:focus-visible .sq-ring { opacity: .08; }
.sq.is-on .sq-ring { opacity: .2; }
.sq-name { fill: var(--soft); font: 600 14px var(--body); transition: fill .3s; }
.sq-n { fill: rgba(184, 203, 189, .7); font: 500 11px var(--mono); }
.sq.is-on .sq-name { fill: var(--c); }

/* the stage notes roll up from below, fading out at the top and bottom edges */
.ticker { position: relative; height: 176px; overflow: hidden; max-width: 560px; width: 100%; justify-self: center;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.ticker-run { transform: translateY(var(--y, 0px)); transition: transform .8s var(--ease); }
.tk { padding: 14px 0; opacity: .28; filter: blur(1.5px); transition: opacity .6s, filter .6s; }
.tk.is-on { opacity: 1; filter: none; }
.tk-h { font: 800 22px/1.1 var(--display); letter-spacing: -.01em; }
.tk-h span { font: 500 12px var(--mono); color: var(--c); vertical-align: 3px; margin-right: 6px; }
.tk-who { margin: 6px 0 8px; font: 500 12px/1.4 var(--mono); color: var(--c); }
.tk-text { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.tk-log { margin: 8px 0 0; font: 500 12px/1.4 var(--mono); color: var(--ink); }
.tk-log::before { content: '› '; color: var(--c); }

.build-phone { display: grid; place-items: center; }
.phone { height: min(76vh, 680px); aspect-ratio: 405 / 720; border-radius: 38px; padding: 9px; background: #0c1e15; contain: layout paint;
  box-shadow: 0 0 0 1px rgba(238, 247, 232, .16), 0 30px 90px -30px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 9px rgba(16, 36, 26, .4);
  transition: box-shadow .6s; }
.screen { display: block; width: 100%; height: 100%; border-radius: 30px; }
.screen text { font-family: var(--display); font-weight: 800; }
.l-code, .l-bugs, .l-ship, .l-eq, .l-hud { opacity: 0; }
.eqb, .ph { transform-box: fill-box; transform-origin: 50% 100%; }
.l-code text { font-family: var(--mono); font-weight: 500; white-space: pre; }

/* the stages: one agent each; the playing one's border fills as it runs. Tap one to watch it again */
.steps { grid-column: 1 / -1; list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 16px); }
.steps button { position: relative; display: grid; place-items: center; width: clamp(48px, 6vw, 72px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 18px;
  background: rgba(10, 26, 18, .7); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: transform .3s var(--ease), background-color .3s; }
.steps button:hover { transform: translateY(-3px); }
.sp-bot { width: 62%; opacity: .45; filter: saturate(.4); transition: opacity .3s, filter .3s, transform .3s var(--ease); }
.sp-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-ring rect { width: calc(100% - 3px); height: calc(100% - 3px); fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--f, 0)); }
.steps .is-on button { background: color-mix(in srgb, var(--c) 12%, rgba(10, 26, 18, .7)); }
.steps .is-on .sp-bot { opacity: 1; filter: none; transform: scale(1.08); }
.steps .is-done .sp-bot { opacity: .85; filter: none; }
.steps .is-done .sp-ring rect { opacity: .45; }

/* ---------------------------------------------------------------- what we build: a home screen of app icons */

.apps { list-style: none; margin: 0; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 40px 24px;
  border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(120% 90% at 20% 0%, rgba(200, 255, 46, .07), transparent 60%), rgba(10, 26, 18, .6); }
.app { display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; color: inherit; transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease); }
.app-icon { width: clamp(96px, 9vw, 132px); aspect-ratio: 1; border-radius: 23%; margin-bottom: 12px; box-shadow: 0 0 0 1px rgba(238, 247, 232, .14), 0 18px 40px -18px rgba(0, 0, 0, .8); transition: transform .4s var(--ease), box-shadow .4s; }
a.app:hover .app-icon { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 2px var(--accent), 0 26px 50px -18px rgba(246, 224, 22, .45); }
a.app:active .app-icon { transform: scale(.92); transition-duration: .1s; }
.app b { font: 800 17px/1.2 var(--display); }
.app span { font-size: 14px; color: var(--soft); }
.app .app-plat { font: 500 12px/1.4 var(--mono); color: var(--lime); }
.app-icon--soon, .app-icon--idea { position: relative; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed rgba(238, 247, 232, .25); box-shadow: none; }
.app-icon--soon .agent { width: 64%; opacity: .35; filter: saturate(.2); }
.app--soon b, .app--soon span { opacity: .6; }
.slot-scan { position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: var(--lime); box-shadow: 0 0 14px 3px rgba(200, 255, 46, .5); animation: sweep 2.4s ease-in-out infinite alternate; }
@keyframes sweep { to { transform: translateY(clamp(94px, 9vw, 130px)); } }
.app-icon--idea { border-color: rgba(246, 224, 22, .5); color: var(--accent); background: rgba(246, 224, 22, .05); }
.app-icon--idea svg { width: 40%; transition: transform .4s var(--ease); }
a.app--idea:hover .app-icon--idea svg { transform: rotate(90deg); }

/* ---------------------------------------------------------------- AI that builds AI */

.line { position: relative; display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 28px); padding: 24px 0 26px; }
.line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 5px;
  background: repeating-linear-gradient(90deg, rgba(238, 247, 232, .18) 0 18px, transparent 18px 30px); animation: belt 1.2s linear infinite; }
@keyframes belt { to { background-position: 30px 0; } }
.line-belt { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 28px); flex: 1; min-width: 0; }
.line-bot { flex: 1; max-width: 110px; animation: hop 1.4s var(--ease) infinite; }
.line-bot:nth-child(2) { animation-delay: .2s; } .line-bot:nth-child(3) { animation-delay: .4s; } .line-bot:nth-child(4) { animation-delay: .6s; }
.line-bot:nth-child(5) { animation-delay: .8s; } .line-bot:nth-child(6) { animation-delay: 1s; } .line-bot:nth-child(7) { animation-delay: 1.2s; }
@keyframes hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-12px); } }
.proto { position: relative; flex: none; width: clamp(96px, 11vw, 150px); }
.proto-wire .agent *, .proto-wire .agent { fill: none !important; stroke: var(--lime) !important; stroke-width: 1.6px !important; animation: none !important; }
.proto-box { position: relative; }
.proto-wire, .proto-solid { display: block; }
/* the fill and the scan line share one clock: the line sits exactly on the top edge of the fill */
.proto-solid { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); animation: compile 5.5s linear infinite; }
.proto-scan { position: absolute; inset: 0 -8%; animation: scanline 5.5s linear infinite; pointer-events: none; }
.proto-scan::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--lime); box-shadow: 0 0 16px 3px rgba(200, 255, 46, .55); }
@keyframes compile { 0%, 10% { clip-path: inset(100% 0 0 0); opacity: 1; } 75%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes scanline { 0%, 10% { transform: translateY(100%); opacity: 1; } 75% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(0); opacity: 0; } }
/* the factory arm: its two joints turn so the welding tip rides the scan line up the new agent */
.proto { margin-left: clamp(30px, 4.5vw, 70px); }
.proto-arm { position: absolute; top: 0; right: 72%; height: 100%; width: auto; aspect-ratio: 3 / 5; overflow: visible; pointer-events: none; z-index: 1; }
.pa-up { transform-origin: 24px 110px; animation: pa-up 5.5s linear infinite; }
.pa-fore { transform-origin: 96px 110px; animation: pa-fore 5.5s linear infinite; }
.pa-spark { transform-origin: 164px 110px; animation: pa-spark 5.5s linear infinite; }
.pa-spark path { animation: on-off .12s steps(1) infinite; }
@keyframes pa-up { 0%, 10% { transform: rotate(10.1deg); } 20.83% { transform: rotate(-13.3deg); } 31.67% { transform: rotate(-36.5deg); } 42.5% { transform: rotate(-58deg); } 53.33% { transform: rotate(-73.1deg); } 64.17% { transform: rotate(-78.8deg); } 75%, 80% { transform: rotate(-73.3deg); } 90% { transform: rotate(-58deg); } 100% { transform: rotate(10.1deg); } }
@keyframes pa-fore { 0%, 10% { transform: rotate(72deg); } 20.83% { transform: rotate(94.7deg); } 31.67% { transform: rotate(106.9deg); } 42.5% { transform: rotate(108.7deg); } 53.33% { transform: rotate(99.6deg); } 64.17% { transform: rotate(80.5deg); } 75%, 80% { transform: rotate(47.1deg); } 90% { transform: rotate(108.7deg); } 100% { transform: rotate(72deg); } }
@keyframes pa-spark { 0%, 9% { transform: scale(0); } 11%, 74% { transform: scale(1); } 76%, 100% { transform: scale(0); } }
.proto b { display: block; margin-top: 10px; text-align: center; font: 500 11px/1.3 var(--mono); color: var(--lime); }

/* ---------------------------------------------------------------- footer */

.foot { margin-top: clamp(120px, 14vw, 200px); padding-top: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.foot-say .lead { margin-top: 20px; }
.foot-mark { margin: clamp(56px, 8vw, 110px) 0 0; padding-inline: var(--side); font: 800 120px/.86 var(--display); letter-spacing: -.04em; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1.5px rgba(238, 247, 232, .28); background: radial-gradient(380px circle at var(--sx, -999px) var(--sy, -999px), var(--lime), transparent 70%); -webkit-background-clip: text; background-clip: text; }
.foot-mark > span { display: inline-block; }
.foot-mark .w-arm { -webkit-text-stroke-color: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 28px; margin-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.foot-bottom p { margin: 0; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------------------------------------------------------------- game page */

.g-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 40px clamp(32px, 5vw, 96px); align-items: center; min-height: calc(88svh - var(--nav-h)); padding-block: 48px; }
.g-icon { width: clamp(96px, 10vw, 148px); aspect-ratio: 1; border-radius: 23%; box-shadow: 0 0 0 1px rgba(238, 247, 232, .16), 0 24px 60px -24px rgba(200, 255, 46, .5); margin-bottom: 28px; }
.g-title { font-size: clamp(54px, 8.4vw, 136px); }
.g-copy .lead { margin-top: 20px; }
.plats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.plat > a, .plat > div { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.plat b { font: 800 17px/1.2 var(--display); }
.plat span { font-size: 13px; color: var(--soft); }
.plat i { font: 500 12px/1.4 var(--mono); font-style: normal; margin-top: 6px; }
.plat--live i { color: var(--lime); } .plat--soon i { color: var(--accent); } .plat--off { opacity: .5; } .plat--off i { color: var(--soft); }
.plat--live > a:hover { border-color: var(--lime); transform: translateY(-3px); }
.install { padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: rgba(10, 26, 18, .75); text-align: center; }
.qr { width: 100%; max-width: 260px; margin: 0 auto 22px; border-radius: 14px; }
.install .h3 { margin-bottom: 10px; }
.install p { color: var(--soft); font-size: 15px; }
.install-link { font: 500 12.5px var(--mono); color: var(--lime); overflow-wrap: anywhere; }

.feature-art { position: relative; display: block; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 40px 100px -40px rgba(200, 255, 46, .35);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.feature-art img { width: 100%; transition: transform .8s var(--ease); }
.feature-art:hover img { transform: scale(1.04); }
.glare { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .2), transparent 60%); opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; }
.feature-art:hover .glare { opacity: 1; }
.g-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(32px, 5vw, 96px); align-items: center; }
.g-story .h2 { margin-bottom: 24px; }
.g-story .lead { max-width: 52ch; }
.g-sub { margin: 36px 0 12px; }
.g-about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.g-shots { display: flex; gap: 20px; }
.g-shots img { width: calc(50% - 10px); border-radius: 20px; border: 6px solid #0c1e15; box-shadow: 0 0 0 1px var(--line); }
.g-shots img:last-child { transform: translateY(40px); }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.ticks li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 20px; width: 12px; height: 12px; border-radius: 3px; background: var(--lime); }
.g-crew { text-align: center; }
.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; margin: 32px 0; }
.crew-bot { display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
.crew-bot .agent { height: clamp(64px, 7vw, 92px); width: auto; transition: transform .4s var(--ease); }
.crew-bot:hover .agent { transform: translateY(-8px) scale(1.08); }
.crew-bot b { font-weight: 600; }
.g-data .h2 { margin-bottom: 28px; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 16px 14px 16px 0; border-bottom: 1px solid var(--line); }
thead th { font: 600 14px/1.4 var(--body); color: var(--soft); }
tbody th { font-weight: 600; }
td { color: var(--soft); }
.g-data .small { margin-top: 18px; }
section > .h2 + .rows { margin-top: 32px; }
.get { min-height: 70vh; padding-block: clamp(48px, 8vw, 120px); }
.get .lead { margin-top: 20px; }
.get .plats { margin-bottom: 32px; }

/* ---------------------------------------------------------------- pressing things: no stray selection, a cartoon pop instead */

html { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: var(--ground); }
button, .btn, .nav, .row, .app, .orbit, .team-list, .build-stage, .steps, .hero, .wm, .plat, .crew, .line, .sq { -webkit-user-select: none; user-select: none; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.btn:active { transform: translate(var(--bx, 0), var(--by, 0)) scale(.95); transition-duration: .08s; }
.boom { position: fixed; z-index: 200; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.boom i { position: absolute; left: -3px; top: -3px; width: 6px; height: 18px; border-radius: 3px; background: var(--c, var(--accent)); transform-origin: 3px 3px; transform: rotate(var(--a)) translateY(8px) scaleY(.2); animation: spike .45s var(--ease) forwards; }
.boom b { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--c, var(--accent)); animation: ring .45s var(--ease) forwards; }
@keyframes spike { 40% { opacity: 1; } to { transform: rotate(var(--a)) translateY(26px) scaleY(.6); opacity: 0; } }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------------------------------------------------------------- policy pages */

.doc-hero { padding-block: clamp(48px, 8vw, 120px) clamp(40px, 5vw, 72px); }
.doc-hero .h1 { max-width: 17ch; }
.doc-hero .lead { margin-top: 24px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc-meta p { margin: 0; }
.doc-meta b { color: var(--ink); font-weight: 500; }
.doc { display: grid; grid-template-columns: 210px minmax(0, 68ch) minmax(220px, 1fr); gap: 48px clamp(28px, 4vw, 64px); align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 68ch) minmax(260px, 1fr); gap: 48px clamp(28px, 5vw, 80px); align-items: start; }
.toc, .answers { position: sticky; top: calc(var(--nav-h) + 24px); }
.toc-h { font: 500 12px/1 var(--mono); color: var(--soft); text-transform: uppercase; letter-spacing: .1em; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: 14px; color: var(--soft); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.is-here { color: var(--accent); border-left-color: var(--accent); }
.prose { min-width: 0; }
.prose section { padding-bottom: 20px; }
.prose section + section { margin-top: 24px; }
.prose .h3 { margin: 8px 0 16px; }
.prose li { margin-bottom: 8px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose table { font-size: 15px; margin-bottom: 1em; }
.answers .h3 { margin-bottom: 16px; }
.answers dt { font-weight: 600; margin-top: 16px; }
.answers dd { margin: 4px 0 0; color: var(--soft); font-size: 15px; }
.faq dt { font-weight: 600; font-size: 19px; margin-top: 28px; }
.faq dd { margin: 6px 0 0; color: var(--soft); }
.form label { display: grid; gap: 6px; margin-top: 16px; font-size: 14px; color: var(--soft); }
.form input, .form select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 16px var(--body); }
.form input:focus, .form select:focus { border-color: var(--lime); outline: none; }
.form .btn { margin: 24px 0 14px; }

.lost { display: grid; grid-template-columns: minmax(160px, 300px) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 70vh; }
.lost .lead { margin-top: 20px; }

/* ---------------------------------------------------------------- scroll reveal */

.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 1100px) {
  .team { grid-template-columns: 1fr; gap: 0; }
  .team-copy { display: contents; }
  .team .orbit { order: 1; margin-block: 24px 64px; }
  .team-list { order: 2; margin-top: 24px; }
  .doc { grid-template-columns: 190px minmax(0, 1fr); }
  .doc .answers { grid-column: 2; position: static; }
}

@media (max-width: 960px) {
  .nav-mood { display: none; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .hero { min-height: calc(92svh - var(--nav-h)); padding-top: 24px; }
  .hero-foot, .team, .g-hero, .g-story, .g-about, .sec-head, .build-head, .foot-top, .split { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .install { max-width: 420px; }
  .doc { grid-template-columns: 1fr; }
  .doc .answers, .toc, .answers { position: static; grid-column: auto; }
  .toc ol { columns: 2; column-gap: 16px; }

  /* the build: team, then the notes, then the phone, then the stages */
  .build-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .org { max-height: 360px; }
  .phone { height: min(68svh, 600px); border-radius: 30px; padding: 7px; }
  .screen { border-radius: 24px; }
  .steps { gap: min(1.6vw, 10px); }
  .steps button { width: min(11.4vw, 56px); border-radius: 14px; }
  .sp-ring rect { rx: 12px; }
}

@media (max-width: 640px) {
  .nav { gap: 10px; }
  .logo-word, .nav-mood, .nl-how { display: none; }
  .logo-brain { width: 44px; }
  .nav-links a { padding: 8px 7px; font-size: 14px; }
  .nav-links a::after { left: 7px; right: 7px; }
  .term { font-size: 11px; }
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 22px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--line); }
  .orbit { aspect-ratio: 1 / 1.05; }
  .orb { width: 64px; }
  .orb-name { font-size: 10.5px; padding: 3px 6px; }
  .brain-status { font-size: 11px; padding: 7px 12px; }
  .brain--hero { width: 44%; }
  .wm { font-size: 18vw; }
  .hero { min-height: 0; }
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 10px; padding: 24px 14px; border-radius: 24px; }
  .app-icon { width: 76px; }
  .app b { font-size: 14px; }
  .app span { font-size: 12px; }
  @keyframes sweep { to { transform: translateY(74px); } }
  .plats { gap: 6px; }
  .plat > a, .plat > div { padding: 10px; border-radius: 12px; }
  .plat b { font-size: 14px; }
  .plat span { font-size: 11.5px; }
  .row { grid-template-columns: minmax(0, 1fr) 24px; padding: 20px 8px; }
  .row-d { grid-column: 1; grid-row: 2; font-size: 14px; }
  .arr { grid-column: 2; grid-row: 1 / span 2; }
  .rows--mail .row { grid-template-columns: 1fr; }
  .ticker { height: 200px; }
  .lost { grid-template-columns: 1fr; }
  .lost-bot { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}