/* ═══════════════════════════════════════════════════════════
   PROBIN.DEV — main.css
   Tokens · reset · type · layout · nav · hero · sections · footer
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --bg:        #06070B;
  --bg-2:      #0A0C13;
  --bg-3:      #10131C;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(150,170,210,.13);
  --line-2:    rgba(150,170,210,.24);

  --text:      #E9EDF6;
  --text-2:    #AEB6C8;
  --muted:     #7B8497;

  --cyan:      #4FF0D6;
  --cyan-dim:  #2BB49E;
  --violet:    #9080FF;
  --amber:     #FFC46B;
  --rose:      #FF7A9A;

  --accent:    var(--cyan);
  --on-accent: #04120F;

  --glow:      0 0 0 1px rgba(79,240,214,.28), 0 12px 44px -12px rgba(79,240,214,.35);
  --shadow:    0 30px 80px -40px rgba(0,0,0,.9);
  --ring:      0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);

  --grid-line: rgba(120,160,220,.055);
  --noise-op:  .035;

  --font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1240px;
  --pad:   clamp(18px, 5vw, 56px);
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  24px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);
}

[data-theme="light"]{
  --bg:        #F3F4F0;
  --bg-2:      #EAEBE5;
  --bg-3:      #FFFFFF;
  --surface:   rgba(10,14,24,.035);
  --surface-2: rgba(10,14,24,.06);
  --line:      rgba(20,30,50,.14);
  --line-2:    rgba(20,30,50,.26);

  --text:      #0E1118;
  --text-2:    #3C4454;
  --muted:     #5A6172;

  /* Darkened against the paper background so 11–13px accent text
     and white-on-accent buttons clear WCAG AA, not just look nice. */
  --cyan:      #0A7361;
  --cyan-dim:  #08604F;
  --violet:    #5B46D6;
  --amber:     #B9701A;
  --rose:      #D6456B;

  --on-accent: #FFFFFF;
  --glow:      0 0 0 1px rgba(10,115,97,.3), 0 14px 40px -16px rgba(10,115,97,.4);
  --shadow:    0 30px 70px -40px rgba(20,30,60,.5);
  --grid-line: rgba(20,40,80,.06);
  --noise-op:  .02;
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img,svg,canvas,iframe{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--cyan); color:var(--on-accent); }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--cyan); color:var(--on-accent);
  padding:10px 18px; border-radius:0 0 10px 10px; font-weight:700;
}
.skip-link:focus{ top:0; }

.hp{ position:absolute!important; left:-9999px; opacity:0; height:0; width:0; }

/* ── Layout ─────────────────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

section{ position:relative; }

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.03em;
}
.dim{ color:var(--muted); }
kbd{
  font-family:var(--font-mono); font-size:.72em; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px;
  padding:2px 6px; color:var(--text-2);
}
code{ font-family:var(--font-mono); font-size:.9em; color:var(--cyan); }

/* ── Global fx layers ───────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:var(--noise-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9997; pointer-events:none;
  background:transparent;
}
.scroll-rail i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--violet),var(--cyan) 60%,var(--amber));
  box-shadow:0 0 14px rgba(79,240,214,.6);
}

/* Custom cursor */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); transform:translate(-50%,-50%);
  transition:width .25s var(--spring), height .25s var(--spring), border-color .25s;
}
.cursor.is-hot .cursor__ring{ width:56px; height:56px; border-color:#fff; }
.cursor.is-hot .cursor__dot{ opacity:0; }
.cursor__label{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .2s;
}
.cursor.is-label .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ── Boot ───────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg); display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{ width:min(420px,84vw); text-align:left; }
.boot__mark{
  font-family:var(--font-display); font-size:52px; font-weight:800; color:var(--cyan);
  line-height:1; margin-bottom:18px;
}
.boot__mark span{ display:inline-block; animation:bootPulse 1.4s var(--ease) infinite; }
@keyframes bootPulse{ 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:.35;transform:translateY(-3px)} }
.boot__log{
  font-family:var(--font-mono); font-size:11.5px; line-height:1.9; color:var(--muted);
  min-height:112px; white-space:pre-wrap;
}
.boot__log b{ color:var(--cyan); font-weight:400; }
.boot__bar{ height:2px; background:var(--surface-2); border-radius:2px; overflow:hidden; margin-top:16px; }
.boot__bar i{ display:block; height:100%; width:0; background:var(--cyan); transition:width .3s linear; }
.boot__skip{
  margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--muted);
  letter-spacing:.1em; transition:color .2s;
}
.boot__skip:hover{ color:var(--cyan); }

/* ── Nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:clamp(12px,3vw,34px);
  padding:14px var(--pad);
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:10px;
}
.nav__brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav__mark{ color:var(--cyan); display:grid; place-items:center; }
.nav__mark .mk-p{ stroke-dasharray:60; stroke-dashoffset:0; transition:stroke-dashoffset .6s var(--ease); }
.nav__brand:hover .mk-p{ stroke-dashoffset:60; }
.nav__mark .mk-dot{ transition:transform .5s var(--spring); transform-origin:24px 24px; }
.nav__brand:hover .mk-dot{ transform:scale(1.9); }
.nav__name{ font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; }
.nav__name i{ color:var(--muted); font-style:normal; font-weight:400; }

.nav__links{ display:flex; gap:4px; margin-inline:auto; }
.nav__links a{
  position:relative; padding:8px 13px; border-radius:99px;
  font-size:14px; color:var(--text-2); transition:color .25s;
}
.nav__links a::before{
  content:''; position:absolute; inset:0; border-radius:99px;
  background:var(--surface-2); opacity:0; transform:scale(.85);
  transition:opacity .3s var(--ease), transform .3s var(--spring); z-index:-1;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::before{ opacity:1; transform:scale(1); }
.nav__links a.is-active{ color:var(--cyan); }
.nav__links a.is-active::after{
  content:''; position:absolute; left:50%; bottom:2px; width:4px; height:4px; border-radius:50%;
  background:var(--cyan); transform:translateX(-50%); box-shadow:0 0 8px var(--cyan);
}

.nav__tools{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tool{
  width:36px; height:36px; display:grid; place-items:center; position:relative;
  border-radius:10px; border:1px solid var(--line); color:var(--text-2);
  transition:color .25s, border-color .25s, background .25s, transform .25s var(--spring);
}
.tool:hover{ color:var(--cyan); border-color:var(--line-2); background:var(--surface); transform:translateY(-2px); }
.tool[aria-pressed="true"]{ color:var(--on-accent); background:var(--cyan); border-color:var(--cyan); }
.tool__kbd{
  position:absolute; bottom:-6px; right:-5px; font-family:var(--font-mono); font-size:8px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:4px; padding:0 3px; color:var(--muted);
}
/* The command palette is the fastest way around the site, so it gets a
   labelled button rather than hiding behind a shortcut nobody guesses. */
.tool--k{
  width:auto; padding:0 12px 0 11px; gap:8px; display:flex;
  background:var(--surface); border-color:var(--line-2);
}
.tool--k .tool__txt{ font-size:13.5px; font-weight:600; color:var(--text-2); transition:color .25s; }
.tool--k:hover .tool__txt{ color:var(--cyan); }
.tool--k kbd{
  background:var(--bg); border:1px solid var(--line); border-bottom-width:2px;
  font-size:10px; padding:2px 5px; color:var(--muted);
}
@media (max-width:1240px){
  .tool--k .tool__txt,
  .tool--k kbd{ display:none; }
  .tool--k{ width:36px; padding:0; }
}
.ic-sun{ display:none; }
[data-theme="light"] .ic-sun{ display:block; }
[data-theme="light"] .ic-moon{ display:none; }
#btn-sound:not([aria-pressed="true"]) .wave{ opacity:.25; }

.nav__burger{ display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; }
.nav__burger i{ display:block; width:16px; height:1.5px; background:currentColor; margin:3.5px auto; transition:transform .35s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:99px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--spring), box-shadow .3s var(--ease), color .3s, border-color .3s;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn__arrow{ font-style:normal; position:relative; z-index:2; transition:transform .35s var(--spring); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--lg{ padding:15px 27px; font-size:15.5px; }
.btn--sm{ padding:8px 15px; font-size:13px; }

.btn--primary{ background:var(--cyan); color:var(--on-accent); }
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(110deg,var(--violet),var(--cyan) 45%,var(--amber));
  opacity:0; transition:opacity .4s var(--ease);
}
.btn--primary:hover{ box-shadow:var(--glow); }
.btn--primary:hover::before{ opacity:1; }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost::before{
  content:''; position:absolute; inset:0; z-index:1; background:var(--surface-2);
  transform:translateY(101%); transition:transform .4s var(--ease-out);
}
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--ghost:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.96); }

.linkish{
  color:var(--cyan); font-weight:600; position:relative; font-size:inherit;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease);
}
.linkish:hover{ background-size:100% 1px; }

/* ── Reveal ─────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── Section headers ────────────────────────────────────── */
.sec-head{ max-width:760px; margin-bottom:clamp(38px,6vw,72px); }
.sec-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:20px;
}
.sec-eyebrow i{ width:26px; height:1px; background:currentColor; display:block; }
.sec-title{ font-size:clamp(32px,5.4vw,60px); margin-bottom:18px; }
.sec-lede{ color:var(--text-2); font-size:clamp(15px,1.2vw,17.5px); max-width:60ch; }
.sec-lede b{ color:var(--text); }

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:110px; padding-bottom:80px; overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 20%, var(--bg) 85%),
    radial-gradient(60% 50% at 15% 30%, rgba(144,128,255,.14), transparent 70%),
    radial-gradient(50% 45% at 88% 62%, rgba(79,240,214,.11), transparent 70%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(20px,4vw,56px); align-items:center;
}
.hero__copy{ min-width:0; }

/* ── portrait ───────────────────────────────────────────── */
.hero__portrait{
  position:relative; margin:0; justify-self:center; width:100%; max-width:440px;
}
/* Soft bloom so the cut-out isn't floating. Kept faint and heavily blurred:
   at higher opacity its circular edge reads as a box around the portrait,
   which is worse than no glow at all. Dark mode can take more. */
.hero__portrait::before{
  content:''; position:absolute; left:50%; bottom:4%; z-index:0;
  width:124%; aspect-ratio:1/1; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 45%,
    color-mix(in srgb,var(--cyan) 13%,transparent) 0%,
    color-mix(in srgb,var(--violet) 9%,transparent) 40%,
    transparent 72%);
  filter:blur(34px);
}
[data-theme="dark"] .hero__portrait::before{
  background:radial-gradient(circle at 50% 45%,
    color-mix(in srgb,var(--cyan) 26%,transparent) 0%,
    color-mix(in srgb,var(--violet) 20%,transparent) 42%,
    transparent 72%);
  filter:blur(26px);
}
.hero__portrait::after{           /* ground shadow */
  content:''; position:absolute; left:50%; bottom:-2%; z-index:0;
  width:62%; height:26px; transform:translateX(-50%);
  border-radius:50%; background:rgba(10,20,40,.22); filter:blur(16px);
}
.hero__portrait picture{ position:relative; z-index:1; display:block; }
.hero__portrait img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 24px 40px rgba(12,24,46,.28));
  animation:floaty 7s var(--ease) infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.hero__portrait figcaption{
  position:absolute; z-index:3; right:-4px; bottom:11%;
  background:color-mix(in srgb,var(--bg-3) 88%,transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:14px; padding:10px 15px;
  box-shadow:var(--shadow); animation:floaty 7s var(--ease) infinite; animation-delay:.5s;
}
.hero__portrait figcaption b{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:-.02em; }
.hero__portrait figcaption span{ font-size:11.5px; color:var(--muted); font-family:var(--font-mono); }

/* ── social row ─────────────────────────────────────────── */
.hero__social{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.hero__social a{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 14px; border-radius:99px;
  border:1px solid var(--line); background:color-mix(in srgb,var(--bg-3) 55%,transparent);
  font-size:14px; font-weight:600; color:var(--text-2);
  transition:color .25s, border-color .25s, transform .3s var(--spring), background .25s;
}
.hero__social a:hover{
  color:var(--cyan); border-color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 8%,transparent); transform:translateY(-3px);
}
.hero__social svg{ width:17px; height:17px; flex:0 0 auto; }

.hero__tag{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:28px;
  padding:7px 15px 7px 12px; border-radius:99px;
  border:1px solid var(--line); background:color-mix(in srgb,var(--bg-2) 70%,transparent);
  backdrop-filter:blur(8px);
  font-size:13px; color:var(--text-2); font-family:var(--font-mono); letter-spacing:.02em;
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--cyan); display:block; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(79,240,214,.7); animation:pulseRing 2s infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(79,240,214,.6)}
  70%{box-shadow:0 0 0 9px rgba(79,240,214,0)}
  100%{box-shadow:0 0 0 0 rgba(79,240,214,0)}
}

.hero__title{
  font-size:clamp(38px,6.4vw,84px);   /* sized for the two-column hero */
  letter-spacing:-.045em; line-height:.96; margin-bottom:28px;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .w{
  display:inline-block; transform:translateY(110%) rotate(4deg); opacity:0;
  transition:transform .9s var(--ease-out), opacity .7s var(--ease-out);
}
.hero__title.is-in .w{ transform:none; opacity:1; }
.hero__title .grad{
  background:linear-gradient(104deg,var(--cyan) 0%,var(--violet) 48%,var(--amber) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradSlide 9s linear infinite;
}
@keyframes gradSlide{ to{ background-position:220% 0; } }

.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:26px; }
.bot-dot{
  width:9px; height:9px; border-radius:50%; display:block;
  background:radial-gradient(circle at 35% 35%,#fff,var(--violet));
  box-shadow:0 0 10px var(--violet); animation:pulseRing 2.4s infinite;
}
.hero__hint{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em; }

.hero__ticker{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-2) 55%,transparent);
  backdrop-filter:blur(10px); overflow:hidden; padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{ display:flex; gap:44px; width:max-content; animation:tick 34s linear infinite; }
.hero__ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }
.ticker__track span{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:44px; white-space:nowrap;
}
.ticker__track span::after{ content:'◆'; color:var(--cyan); font-size:8px; }

.hero__scroll{
  position:absolute; bottom:74px; right:var(--pad); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--cyan),transparent); position:relative; }
.hero__scroll i::after{
  content:''; position:absolute; top:0; left:-1.5px; width:4px; height:4px; border-radius:50%;
  background:var(--cyan); animation:scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{transform:translateY(0);opacity:0} 30%{opacity:1} 100%{transform:translateY(42px);opacity:0} }
@media (max-width:900px){ .hero__scroll{ display:none; } }

/* ── MANIFESTO ──────────────────────────────────────────── */
.manifesto{ padding:clamp(90px,14vw,180px) 0; }

/* The statement panel — a framed callout with a title bar, so the
   paragraph reads as a deliberate exhibit instead of loose text
   stranded in the middle of an empty section. */
.mfx{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden;
  margin-bottom:clamp(38px,5.5vw,66px);
  box-shadow:var(--shadow);
}
.mfx__bar{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.mfx__dots{ display:flex; gap:6px; }
.mfx__dots i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.mfx__dots i:first-child{ background:color-mix(in srgb,var(--rose) 70%,transparent); }
.mfx__dots i:nth-child(2){ background:color-mix(in srgb,var(--amber) 70%,transparent); }
.mfx__dots i:last-child{ background:color-mix(in srgb,var(--cyan) 70%,transparent); }
.mfx__file{ color:var(--text-2); }
.mfx__meta{ margin-left:auto; }
@media (max-width:560px){ .mfx__meta{ display:none; } }

.mfx__body{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(240px,.95fr);
  gap:clamp(24px,3.4vw,46px);
  padding:clamp(26px,3.6vw,46px);
}
@media (max-width:900px){ .mfx__body{ grid-template-columns:1fr; } }

.kinetic{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px,2.6vw,33px); line-height:1.36; letter-spacing:-.02em;
  max-width:30ch; margin:0;
}
.kinetic .k{ color:color-mix(in srgb,var(--muted) 45%,transparent); transition:color .35s var(--ease); }
.kinetic .k.lit{ color:var(--text); }

/* The rail: every claim in the paragraph, as a thing you can press. */
.mfx__try{
  border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,32px);
  align-self:start;
}
@media (max-width:900px){
  .mfx__try{ border-left:0; border-top:1px solid var(--line); padding:24px 0 0; }
}
.mfx__try h3{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:14px;
}
.mfx__try ul{ list-style:none; display:grid; gap:8px; }
.mfx__try li > *{
  width:100%; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; align-items:center;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r);
  background:transparent; text-align:left; color:var(--text);
  transition:border-color .3s, background .3s, transform .4s var(--ease-out);
}
.mfx__try li > *:hover{
  border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));
  background:var(--surface-2); transform:translateX(3px);
}
.mfx__try li > *:focus-visible{ outline:none; box-shadow:var(--ring); }
.mfx__try kbd{ grid-row:span 2; min-width:34px; text-align:center; font-size:11px; }
.mfx__try b{ font-size:14px; font-weight:700; }
.mfx__try em{ font-style:normal; font-size:12px; color:var(--muted); }
.mfx__foot{ margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; }

.manifesto__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.mcard{
  position:relative; padding:30px 26px 28px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface); overflow:hidden;
  transition:border-color .4s, transform .5s var(--ease-out), background .4s;
}
.mcard::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(340px 220px at var(--mx,50%) var(--my,0%), rgba(79,240,214,.13), transparent 70%);
}
.mcard:hover{ border-color:var(--line-2); transform:translateY(-5px); }
.mcard:hover::before{ opacity:1; }
.mcard__no{
  font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:.2em;
  display:block; margin-bottom:16px;
}
.mcard h3{ font-size:22px; margin-bottom:11px; }
.mcard h3 em{ font-style:italic; color:var(--cyan); }
.mcard p{ color:var(--text-2); font-size:14.8px; }

/* ── Section rhythm ─────────────────────────────────────── */
.work,.proof,.services,.process,.arcade,.contact{ padding:clamp(80px,12vw,150px) 0; }
.proof,.arcade{ background:var(--bg-2); border-block:1px solid var(--line); }
.services{
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:clamp(60px,8vw,96px); overflow:hidden; }
.foot__inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start; }
.foot__big{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(56px,12vw,150px); line-height:.85; letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--text) 20%,transparent 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px; cursor:default;
}
.foot__big span{ display:inline-block; transition:transform .5s var(--spring), color .3s; }
.foot__brand p{ color:var(--muted); font-size:14px; max-width:44ch; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__cols h5{ font-size:12px; font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:400; }
.foot__cols a,.foot__cols button{
  display:block; text-align:left; font-size:14.5px; color:var(--text-2); padding:5px 0;
  transition:color .25s, transform .25s var(--ease); background:none;
}
.foot__cols a:hover,.foot__cols button:hover{ color:var(--cyan); transform:translateX(4px); }
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:clamp(40px,6vw,70px); padding-block:22px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); font-family:var(--font-mono);
}
.heart{ color:var(--rose); font-style:normal; display:inline-block; animation:beat 1.6s var(--ease) infinite; }
@keyframes beat{ 0%,100%{transform:scale(1)} 14%{transform:scale(1.25)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} }

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:9500;
  transform:translate(-50%,140%); opacity:0; pointer-events:none;
  background:var(--bg-3); border:1px solid var(--line-2); box-shadow:var(--shadow);
  padding:12px 20px; border-radius:99px; font-size:14px; font-weight:600;
  transition:transform .5s var(--spring), opacity .4s;
  max-width:min(420px,90vw); text-align:center;
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }
.toast b{ color:var(--cyan); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__links.is-open{
    display:flex; position:fixed; inset:64px 12px auto 12px; flex-direction:column;
    background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
    padding:12px; gap:2px; box-shadow:var(--shadow);
  }
  .nav__links.is-open a{ padding:13px 16px; font-size:16px; }
  .nav__burger{ display:block; }
  .nav__cta span{ display:none; }
  .nav__cta{ padding:11px 14px; }
  .nav__cta .btn__arrow{ font-size:18px; }
}
@media (max-width:940px){
  /* headline first, portrait under it — the words do the selling */
  .hero__inner{ grid-template-columns:1fr; gap:28px; }
  .hero__title{ font-size:clamp(40px,9vw,68px); }
  .hero__portrait{ max-width:330px; }
  .hero__portrait figcaption{ right:-6px; bottom:8%; }
}
@media (max-width:760px){
  #btn-sound{ display:none; }
  .hero__social a{ padding:8px 14px; font-size:13.5px; }
  .foot__inner{ grid-template-columns:1fr; gap:36px; }
  .foot__cols{ grid-template-columns:repeat(2,1fr); }
  .hero{ padding-top:96px; }
  .hero__ticker{ padding:9px 0; }
}
@media (max-width:520px){
  .foot__cols{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .hero__title .w{ opacity:1; transform:none; }
  .grain{ display:none; }
}