/* ============ TOKENS ============ */
:root{
  --bg: #02030c;
  --surface: rgba(6,9,26,0.72);
  --surface-solid: #070a1e;
  --border: rgba(120,140,255,0.14);
  --border-soft: rgba(120,140,255,0.08);
  --text: #eef0fb;
  --muted: #8d95c4;
  --faint-text: #545b8a;

  /* brand blue, sampled from the mark: #0000F5 */
  --brand: #0000f5;
  --brand-up: #1a34ff;
  --blue: #3654ff;
  --cyan: #2dd4e0;

  --grad: linear-gradient(115deg, var(--blue) 10%, var(--cyan) 90%);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.83,0,.17,1);
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 70% 45% at 22% 0%, rgba(0,0,245,0.20), transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 100%, rgba(45,212,224,0.07), transparent 65%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3{ font-family:'Sora', sans-serif; margin:0; letter-spacing:-0.025em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
::selection{ background: var(--brand); color:#fff; }

@media (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button{ cursor:none; }
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background: var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.pre-center{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.pre-mark{ width:88px; height:88px; border-radius:18px; animation: pre-float 2.4s ease-in-out infinite; }
@keyframes pre-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.pre-word{
  font-family:'Sora', sans-serif; font-weight:800; font-size:15px; letter-spacing:0.42em;
  color:#fff; padding-left:0.42em;
}
.pre-bottom{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding: 0 40px 32px;
  font-family:'JetBrains Mono', monospace; color:#fff;
}
.pre-label{ font-size:11px; letter-spacing:0.22em; opacity:0.75; padding-bottom:14px; }
.pre-count{ font-size: clamp(56px, 9vw, 110px); font-weight:500; line-height:0.9; }
.preloader.done{ display:none; }

/* ============ CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:2000;
  border-radius:50%; display:none;
}
.cursor-dot{ width:6px; height:6px; background: var(--cyan); margin:-3px 0 0 -3px; }
.cursor-ring{
  width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1.5px solid rgba(90,120,255,0.7);
  transition: transform 300ms var(--ease), background 300ms ease, border-color 300ms ease;
}
.cursor-ring.is-hover{ transform: scale(1.9); background: rgba(54,84,255,0.14); border-color: rgba(45,212,224,0.8); }
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring{ display:block; }

/* ============ BACKGROUND LAYERS ============ */
#webgl-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 95% 85% at 50% 45%, transparent 55%, rgba(1,2,8,0.75) 100%);
}
.grain{
  position:fixed; inset:-100%; z-index:60; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,3%); }
  50%{ transform:translate(3%,-2%); } 75%{ transform:translate(-3%,-3%); } 100%{ transform:translate(2%,2%); }
}

/* ============ RAIL ============ */
.rail{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; gap:18px;
}
.rail a{ display:flex; align-items:center; gap:10px; flex-direction:row-reverse; }
.rail i{
  width:7px; height:7px; border-radius:50%; border:1px solid var(--muted);
  transition: background 300ms ease, border-color 300ms ease, transform 300ms var(--ease);
}
.rail span{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--muted);
  opacity:0; transform:translateX(6px); transition: opacity 250ms ease, transform 250ms var(--ease);
}
.rail a:hover span{ opacity:1; transform:translateX(0); }
.rail a.active i{ background: var(--cyan); border-color: var(--cyan); transform:scale(1.35); }
@media (max-width:1100px){ .rail{ display:none; } }

/* ============ SHARED ============ */
.section{ position:relative; z-index:2; padding: 150px 24px; }
.section-inner{ max-width: var(--maxw); margin:0 auto; }
.section-head{ max-width: 680px; margin-bottom: 80px; }
.section-head h2{ font-size: clamp(32px, 4.6vw, 56px); font-weight:800; line-height:1.06; margin-top:20px; }
.section-sub{ margin-top:20px; color: var(--muted); font-size:16px; line-height:1.65; max-width: 500px; }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500;
  letter-spacing:0.16em; color: var(--cyan);
}
.text-gradient{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* reveal */
.js .reveal{ opacity:0; transform: translateY(34px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--i,0) * 100ms); }
.js .reveal.in{ opacity:1; transform: translateY(0); }

/* ============ BUTTONS ============ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:14px;
  padding: 13px 24px; border-radius: 999px;
  white-space:nowrap;
  transition: background 250ms ease, border-color 250ms ease, box-shadow 250ms var(--ease), color 250ms ease;
}
.btn-primary{
  color:#fff; background: var(--brand);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 34px rgba(0,0,245,0.36);
}
.btn-primary:hover{ background: var(--brand-up); box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 16px 46px rgba(26,52,255,0.5); }
.btn-ghost{ color: var(--text); background: rgba(120,140,255,0.05); border:1px solid var(--border); }
.btn-ghost:hover{ background: rgba(120,140,255,0.1); border-color: rgba(120,140,255,0.3); }
.btn-nav{ padding:10px 20px; font-size:13px; }
.btn-lg{ padding:16px 30px; font-size:15px; }
.btn-xl{ padding:20px 38px; font-size:17px; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 20px 32px;
  transition: background 300ms ease, border-color 300ms ease, padding 300ms ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background: rgba(2,3,12,0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--border-soft);
  padding: 13px 32px;
}
.nav-inner{ max-width: 1360px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:34px; height:34px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-word{ font-family:'Sora', sans-serif; font-weight:800; font-size:15px; letter-spacing:0.05em; display:flex; flex-direction:column; line-height:1.05; }
.brand-sub{ font-family:'JetBrains Mono', monospace; font-weight:400; font-size:9px; letter-spacing:0.3em; color: var(--muted); }

.nav-links{ display:flex; gap:34px; }
.nav-links a{
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--muted); transition: color 200ms ease;
}
.nav-links a em{ font-style:normal; font-size:9px; color: var(--faint-text); }
.nav-links a:hover{ color: var(--text); }

.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:38px; height:38px; background:none; border:none; padding:0; cursor:pointer;
}
.nav-burger span{ width:100%; height:1.5px; background: var(--text); transition: transform 300ms var(--ease); }
.nav-burger.open span:nth-child(1){ transform: translateY(3.75px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width:900px){
  .nav-links, .btn-nav{ display:none; }
  .nav-burger{ display:flex; }
}

/* ============ MENU ============ */
.menu{
  position:fixed; inset:0; z-index:95;
  background: var(--brand);
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 32px 60px;
  transform: translateY(-100%);
  transition: transform 700ms var(--ease-io);
  visibility:hidden;
}
.menu.open{ transform: translateY(0); visibility:visible; }
.menu-links{ display:flex; flex-direction:column; gap:6px; }
.menu-links a{
  font-family:'Sora', sans-serif; font-weight:800;
  font-size: clamp(40px, 9vw, 72px); color:#fff; line-height:1.15;
  display:flex; align-items:baseline; gap:16px;
  opacity:0; transform: translateY(30px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.menu.open .menu-links a{ opacity:1; transform:translateY(0); }
.menu.open .menu-links a:nth-child(1){ transition-delay:180ms; }
.menu.open .menu-links a:nth-child(2){ transition-delay:260ms; }
.menu.open .menu-links a:nth-child(3){ transition-delay:340ms; }
.menu.open .menu-links a:nth-child(4){ transition-delay:420ms; }
.menu-links em{ font-style:normal; font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:400; opacity:0.7; }
.menu-meta{
  position:absolute; bottom:32px; left:32px; right:32px;
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em; color:rgba(255,255,255,0.75);
}

/* ============ HERO ============ */
.hero{
  position:relative; z-index:2; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding: 140px 24px 120px;
}
.hero-inner{ max-width: 1080px; text-align:center; display:flex; flex-direction:column; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.22em; color: var(--muted);
  padding: 9px 18px; border-radius:999px; border:1px solid var(--border);
  background: rgba(2,3,12,0.5);
  margin-bottom: 40px;
}
.dot-live{ width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow:0 0 0 0 rgba(45,212,224,0.6); animation: pulse-dot 2.2s infinite; }
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(45,212,224,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(45,212,224,0); }
  100%{ box-shadow:0 0 0 0 rgba(45,212,224,0); }
}

.hero-title{
  font-size: clamp(48px, 9.6vw, 132px);
  font-weight:800; line-height:0.98; letter-spacing:-0.035em;
}
.hl{ display:block; overflow:hidden; padding: 0.045em 0.06em; margin: -0.045em -0.06em; }
.hl-in{ display:block; }
.js .hl-in{ transform: translateY(118%); }

.hero-sub{
  margin-top:34px; font-size: clamp(16px, 1.9vw, 19px);
  color: var(--muted); line-height:1.65; max-width:620px;
}
.hero-actions{ display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; justify-content:center; }

.js .hero-el{ opacity:0; }

.hud{
  position:absolute; bottom:36px; z-index:2;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.16em; color: var(--faint-text);
}
.hud b{ font-weight:500; color: var(--cyan); }
.hud-bl{ left:36px; }
.hud-br{ right:36px; }
@media (max-width:760px){ .hud{ display:none; } }

.hero-promise{
  display:flex; align-items:center; gap:18px; margin-top:44px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color: var(--muted);
  flex-wrap:wrap; justify-content:center;
}
.hero-promise i{ width:1px; height:14px; background: var(--border); }
@media (max-width:560px){ .hero-promise i{ display:none; } .hero-promise{ gap:10px 20px; } }

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.3em; color: var(--faint-text);
}
.scroll-cue-line{ width:1px; height:44px; background: var(--border); position:relative; overflow:hidden; }
.scroll-cue-line i{ position:absolute; top:-40%; left:0; width:100%; height:40%; background: var(--grad); animation: cue-drop 2s infinite ease-in-out; }
@keyframes cue-drop{ 0%{ top:-40%; } 100%{ top:100%; } }

/* ============ MARQUEE ============ */
.marquee{
  position:relative; z-index:2; overflow:hidden;
  padding: 34px 0;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  background: rgba(2,3,12,0.4);
}
.marquee-track{
  display:inline-flex; align-items:center; white-space:nowrap; gap:40px;
  font-family:'Sora', sans-serif; font-weight:800;
  font-size: clamp(26px, 3.6vw, 48px); letter-spacing:-0.02em;
  animation: scroll-left 40s linear infinite;
}
.marquee-track span{ color: var(--text); }
.marquee-track .hollow{
  color: transparent;
  -webkit-text-stroke: 1px rgba(120,140,255,0.55);
}
.marquee-track i{ font-style:normal; color: var(--blue); font-size:0.6em; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ WHY (cinematic scroll-story) ============ */
.story{ position:relative; z-index:2; }
.story-pin{
  height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 120px 24px; text-align:center; overflow:hidden;
}
.story-tag{ position:absolute; top: 110px; left:50%; transform:translateX(-50%); }
.story-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.4);
  width: 900px; height:900px; max-width:130vw; max-height:130vw; border-radius:50%;
  background: radial-gradient(circle, rgba(54,84,255,0.28), rgba(0,0,245,0.08) 42%, transparent 68%);
  filter: blur(20px); opacity:0; pointer-events:none;
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.story-glow.lit{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.story-stage{
  position:relative; width:100%; max-width:1040px;
  min-height: 46vh; display:flex; align-items:center; justify-content:center;
}
.story-beat{
  position:absolute; width:100%;
  font-family:'Sora', sans-serif; font-weight:800;
  font-size: clamp(28px, 4.6vw, 64px); line-height:1.14; letter-spacing:-0.03em;
  color: var(--text);
  pointer-events:none;
}
/* each word materializes out of the particle haze, in sequence */
.story-beat .w{
  display:inline-block;
  opacity:0; transform: translateY(0.55em) scale(1.06); filter: blur(16px);
  transition: opacity 640ms var(--ease), transform 760ms var(--ease), filter 640ms var(--ease);
  transition-delay: calc(var(--wi) * 55ms);
}
.story-beat.active .w{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
.story-beat.past .w{
  opacity:0; transform: translateY(-0.5em) scale(0.97); filter: blur(16px);
  transition-delay: calc(var(--wi) * 24ms);
}
.story-peak{ font-size: clamp(32px, 6vw, 84px); }
.story-peak .w{ transition-delay: calc(var(--wi) * 78ms); }

.story-hint{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em;
  color: var(--faint-text); white-space:nowrap;
}
@media (pointer:coarse){ .story-hint{ display:none; } }
.story-progress{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  width:200px; height:2px; background: rgba(120,140,255,0.14); border-radius:2px; overflow:hidden;
}
.story-progress i{ display:block; height:100%; width:0%; background: var(--grad); }

/* ---- WHY story on touch: native scroll-snap panels ----
   Each line becomes a full-screen panel the phone magnets onto (scroll-snap),
   instead of the JS scroll-jack that iOS fights. scroll-snap-stop:always means
   even a hard flick stops on the next line, so you always get to read it. */
@media (pointer: coarse){
  html{ scroll-snap-type: y proximity; }
  .story-pin{ height:auto; min-height:0; display:block; padding:0; overflow:visible; }
  .story-stage{ min-height:0; max-width:none; display:block; }
  .story-beat{
    position:relative; width:auto;
    min-height:100svh; display:flex; align-items:center; justify-content:center;
    padding:0 26px; box-sizing:border-box;
    scroll-snap-align:center; scroll-snap-stop:always;
  }
  .story-tag{ position:sticky; top:88px; }
  .story-glow, .story-progress{ display:none; }
}

/* ============ WHAT WE BUILD (3x2 grid, lives inside SKILLS) ============ */
.builds-title{
  margin-top:88px; text-align:center;
  font-family:'Sora', sans-serif; font-weight:800;
  font-size: clamp(26px, 3.6vw, 40px); letter-spacing:-0.02em; line-height:1.1;
}
.builds-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:44px;
}
.platform-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 32px 30px;
  text-align:left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease);
}
.platform-card:hover{
  border-color: rgba(54,84,255,0.55);
  box-shadow: 0 30px 80px rgba(0,0,245,0.18);
  transform: translateY(-5px);
}
.platform-icon{ width:40px; height:40px; margin-bottom:24px; }
.platform-icon svg{ width:100%; height:100%; }
.platform-card h3{ font-size:21px; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px; }
.platform-sub{ font-size:13.5px; color:var(--muted); line-height:1.4; }
@media (max-width:820px){ .builds-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .builds-grid{ grid-template-columns:1fr; } }

/* ============ TECHNOLOGY ============ */
.tech{ position:relative; z-index:2; padding: 150px 24px; }
.tech-inner{ max-width: 900px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.tech-title{ font-size: clamp(30px, 4.4vw, 56px); font-weight:800; line-height:1.08; letter-spacing:-0.03em; margin-top:22px; }
.tech-copy{ margin-top:28px; max-width:660px; color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); line-height:1.7; }

/* ============ THE METHOD (orbital) ============ */
.method{ position:relative; z-index:2; padding: 120px 24px; }
.method-head{ text-align:center; max-width:760px; margin:0 auto; }
.method-head h2{ font-size: clamp(30px, 4vw, 50px); font-weight:800; line-height:1.08; margin-top:18px; }
.method-sub{
  margin-top:14px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--muted);
}

.orbit{
  position:relative;
  display:flex; flex-direction:column; gap:20px;
  max-width:640px; margin: 60px auto 0;
}
.orbit-ring, .orbit-core{ display:none; }

.orbit-card{
  position:relative;
  width:100%;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 26px;
  padding: 36px 34px 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.orbit-card:hover{
  border-color: rgba(54,84,255,0.55);
  box-shadow: 0 30px 80px rgba(0,0,245,0.18);
}
/* big ghost number demoted to a small top index; the stage NAME is now the big title */
.cap-num{
  font-family:'JetBrains Mono', monospace; font-weight:500; font-size:13px;
  letter-spacing:0.24em; color: var(--faint-text);
  margin-bottom:20px;
}
.cap-icon{ width:46px; height:46px; margin-bottom:24px; }
.cap-icon svg{ width:100%; height:100%; }
.orbit-card h3{ font-size: clamp(34px, 3.4vw, 50px); font-weight:800; letter-spacing:-0.02em; line-height:1.05; margin-bottom:18px; }
.orbit-card > p{ color: var(--muted); font-size:16.7px; line-height:1.6; margin-bottom:26px; }
.cap-tags{ display:flex; gap:9px; flex-wrap:wrap; }
.cap-tags span{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em;
  color: var(--muted); padding:7px 13px; border:1px solid var(--border-soft); border-radius:999px;
}

.orbit-hud{ display:none; }

/* pinned orbital mode, activated by JS on desktop */
.method.orbit-on{
  height:100vh; height:100svh;
  padding: 90px 24px 0;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.method.orbit-on .orbit{
  flex:1; max-width:none; margin:0;
  display:block;
}
.method.orbit-on .orbit-card{
  position:absolute; left:50%; top:47%;
  width: min(420px, 36vw);
  will-change: transform, opacity;
}
.method.orbit-on .orbit-ring{
  display:block; position:absolute; left:50%; top:47%;
  transform: translate(-50%,-50%);
  border:1px dashed rgba(120,140,255,0.16);
  border-radius:50%;
  pointer-events:none;
}
.method.orbit-on .orbit-core{
  display:block; position:absolute; left:50%; top:47%;
  width:150px; height:150px; transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(54,84,255,0.35), rgba(0,0,245,0.12) 55%, transparent 72%);
  filter: blur(2px);
  animation: core-pulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes core-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:0.85; } 50%{ transform:translate(-50%,-50%) scale(1.18); opacity:1; } }
.method.orbit-on .orbit-hud{
  display:block; position:absolute; left:50%; bottom:44px;
  transform:translateX(-50%);
  width: 300px; z-index:20;
}
.orbit-hud-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'JetBrains Mono', monospace; margin-bottom:10px;
}
.orbit-name{ font-family:'Sora', sans-serif; font-size:15px; font-weight:700; color: var(--text); }
.orbit-count{ font-size:11px; letter-spacing:0.14em; color: var(--faint-text); }
.orbit-count b{ font-weight:500; color: var(--cyan); }
.orbit-bar{ height:2px; background: rgba(120,140,255,0.15); border-radius:2px; overflow:hidden; }
.orbit-bar i{ display:block; height:100%; width:0%; background: var(--grad); }

/* ============ INTELLIGENCE ============ */
.intelligence{ position:relative; z-index:2; padding: 180px 24px; }
.intel-head{ text-align:center; max-width:820px; margin:0 auto; }
.intel-head h2{ font-size: clamp(30px, 4.4vw, 56px); font-weight:800; line-height:1.08; margin-top:18px; }

.intel-panels{ position:relative; width:100%; max-width:640px; height:160px; }
.intel-panel{
  position:absolute; inset:0; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform: translateY(26px) scale(0.98);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  pointer-events:none;
}
.intel-panel.active{ opacity:1; transform:translateY(0) scale(1); }
.intel-num{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--cyan);
  padding:6px 14px; border:1px solid var(--border); border-radius:999px; margin-bottom:20px;
  background: rgba(2,3,12,0.5);
}
.intel-panel h3{ font-size:26px; font-weight:800; margin-bottom:12px; }
.intel-panel p{ color: var(--muted); font-size:15px; line-height:1.65; max-width:470px; }

.intel-hud{ position:absolute; inset:0; pointer-events:none; }
.hud-stat{ position:absolute; display:flex; flex-direction:column; font-family:'JetBrains Mono', monospace; }
.hud-num{ font-size: clamp(24px, 3vw, 38px); font-weight:500; color: var(--blue); line-height:1; }
.hud-suffix{ font-size:18px; font-weight:500; color: var(--blue); }
.hud-label{ font-size:10px; letter-spacing:0.14em; color: var(--faint-text); margin-top:8px; text-transform:uppercase; }
.hud-stat-a{ top:12%; left:7%; }
.hud-stat-b{ top:18%; right:7%; align-items:flex-end; }
.hud-stat-c{ bottom:14%; left:9%; }
.hud-wave{ position:absolute; bottom:8%; right:5%; width:260px; height:52px; opacity:0.5; }
.hud-wave-line{ stroke: var(--cyan); }
@media (max-width:760px){ .hud-stat, .hud-wave{ display:none; } }

/* ============ WHAT SHIPS ============ */
.out-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.out-card{
  position:relative;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:26px;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  overflow:hidden;
  transition: border-color 300ms ease, transform 300ms var(--ease), box-shadow 300ms ease;
}
.out-card:hover{
  border-color: rgba(54,84,255,0.55);
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,245,0.16);
}
.out-side{ padding: 38px 36px; display:flex; flex-direction:column; }
.out-side-problem{ background: rgba(255,255,255,0.014); }
.out-side-becomes{ border-left:1px solid var(--border-soft); }
.out-label{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.24em;
  color: var(--faint-text); margin-bottom:18px;
}
.out-label-ships{ color: var(--cyan); }
.out-problem{
  font-size:20px; line-height:1.48; color: var(--text);
  font-style:italic; margin:0;
}
.out-card h3{ font-size:24px; font-weight:700; letter-spacing:-0.01em; line-height:1.15; margin:0 0 14px; }
.out-solution{ font-size:16px; color: var(--muted); line-height:1.62; margin:0; }
@media (max-width:980px){ .out-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .out-card{ grid-template-columns:1fr; }
  .out-side{ padding:28px 26px; }
  .out-side-becomes{ border-left:none; border-top:1px solid var(--border-soft); }
  .out-problem{ font-size:18px; }
  .out-card h3{ font-size:21px; }
}

/* ============ SKILLS / EVERY DISCIPLINE ============ */
.skills-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
.skill-col h3{
  position:relative;
  font-size:16px; font-weight:700; color:var(--text);
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.skill-col h3::after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:34px; height:1px; background:var(--grad);
}
.skill-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.skill-col li{
  font-size:14.5px; color:var(--muted); line-height:1.3; width:fit-content;
  transition:color 200ms ease, transform 240ms var(--ease);
}
.skill-col li:hover{ color:var(--text); transform:translateX(5px); }
.skills-line{
  margin-top:64px; text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--faint-text);
}
@media (max-width:900px){ .skills-grid{ grid-template-columns:repeat(2,1fr); gap:38px 28px; } }
@media (max-width:520px){ .skills-grid{ grid-template-columns:1fr; gap:32px; } }

/* ============ CTA ============ */
.cta{ position:relative; z-index:2; padding: 200px 24px; text-align:center; }
.cta-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.cta-title{ font-size: clamp(40px, 7.4vw, 88px); font-weight:800; line-height:1.02; margin-top:24px; letter-spacing:-0.03em; }
.cta-sub{ margin-top:26px; color: var(--muted); font-size:16px; line-height:1.65; max-width:480px; }
.cta .btn-xl{ margin-top:44px; }
.cta-status{
  margin-top:28px; display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color: var(--muted);
}

/* ============ FOOTER ============ */
.footer{ position:relative; z-index:2; border-top:1px solid var(--border-soft); padding: 60px 32px 32px; overflow:hidden; background: rgba(2,3,12,0.55); }
.footer-word{
  font-family:'Sora', sans-serif; font-weight:800;
  font-size: clamp(90px, 21vw, 300px); line-height:0.8; letter-spacing:-0.04em;
  text-align:center; user-select:none;
  color:transparent; -webkit-text-stroke:1px rgba(120,140,255,0.28);
  margin-bottom:70px;
  transition: color 700ms ease;
}
.footer-word:hover{ color: rgba(0,0,245,0.25); }
.footer-inner{
  max-width: var(--maxw); margin:0 auto 60px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
}
.footer-col{ display:flex; flex-direction:column; gap:10px; font-size:14px; color: var(--muted); line-height:1.6; }
.footer-label{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.24em; color: var(--faint-text); margin-bottom:6px; }
.footer-link{ transition: color 200ms ease; width:fit-content; }
.footer-link:hover{ color: var(--text); }
.footer-time{ font-family:'JetBrains Mono', monospace; color: var(--cyan); }
.footer-cities{ display:flex; flex-direction:column; gap:7px; }
.footer-cities span{ transition: color 200ms ease; width:fit-content; }
.footer-cities span:hover{ color: var(--text); }
.footer-meta{
  max-width: var(--maxw); margin:0 auto; padding-top:24px;
  border-top:1px solid var(--border-soft);
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; color: var(--faint-text);
}
.footer-top{ transition: color 200ms ease; }
.footer-top:hover{ color: var(--cyan); }
@media (max-width:700px){ .footer-inner{ grid-template-columns:1fr; } }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .js .hl-in{ transform:none; }
  .js .hero-el, .js .reveal{ opacity:1; transform:none; }
  .grain{ animation:none; }
}