/* ============================================================
   GRAWITY.TECH · stylesheet
   AI studio aesthetic — Vercel / Linear / Noco inspired.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* shared (type + layout) */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw:   1320px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-soft: 0 24px 48px -24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px var(--line), 0 20px 40px -20px color-mix(in srgb, var(--accent) 18%, transparent);
  --scheme: dark;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* ─── Theme: Grawity (default · brand teal) ─── */
:root,
[data-theme="grawity"]{
  --scheme: dark;
  --bg:        #0d2e32;
  --bg-2:      #0f383d;
  --surface:   #124045;
  --surface-2: #164a50;

  --ink:       #c8e5dc;
  --ink-soft:  rgba(200,229,220,0.78);
  --muted:     rgba(200,229,220,0.52);
  --faint:     rgba(200,229,220,0.30);
  --line:      rgba(200,229,220,0.10);
  --line-strong: rgba(200,229,220,0.18);

  --accent:    #6ee7b7;
  --accent-2:  #a7f3d0;
  --deep:      #064e3b;
  --warm:      #fcd34d;

  --on-primary: #0d2e32;
  --glow-1:    rgba(110,231,183,0.12);
  --glow-2:    rgba(6,78,59,0.16);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(110,231,183,0.18);
}

/* ─── Theme: Midnight (dark teal/navy) ─── */
[data-theme="midnight"]{
  --scheme: dark;
  --bg:        #0A0F1C;
  --bg-2:      #0D1422;
  --surface:   #131D2E;
  --surface-2: #182238;

  --ink:       #ECEAE3;
  --ink-soft:  rgba(236,234,227,0.78);
  --muted:     rgba(236,234,227,0.55);
  --faint:     rgba(236,234,227,0.32);
  --line:      rgba(236,234,227,0.10);
  --line-strong: rgba(236,234,227,0.18);

  --accent:    #2DD4BF;
  --accent-2:  #5EEAD4;
  --deep:      #1E40AF;
  --warm:      #E8C9A1;

  --on-primary: #0A0F1C;
  --glow-1:    rgba(45,212,191,0.10);
  --glow-2:    rgba(30,64,175,0.12);
  --scrim:     rgba(255,255,255,0.015);
  --terminal-grid: rgba(45,212,191,0.18);
}

/* ─── Theme: Oceanic (dark · deep blue + cyan) ─── */
[data-theme="oceanic"]{
  --scheme: dark;
  --bg:        #06182E;
  --bg-2:      #0A1F3C;
  --surface:   #102C4E;
  --surface-2: #173963;

  --ink:       #E6F1FB;
  --ink-soft:  rgba(230,241,251,0.78);
  --muted:     rgba(230,241,251,0.55);
  --faint:     rgba(230,241,251,0.32);
  --line:      rgba(230,241,251,0.10);
  --line-strong: rgba(230,241,251,0.20);

  --accent:    #06B6D4;
  --accent-2:  #67E8F9;
  --deep:      #2563EB;
  --warm:      #FBBF24;

  --on-primary: #06182E;
  --glow-1:    rgba(6,182,212,0.12);
  --glow-2:    rgba(37,99,235,0.14);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(6,182,212,0.20);
}

/* ─── Theme: Graphite (dark · monochrome editorial) ─── */
[data-theme="graphite"]{
  --scheme: dark;
  --bg:        #0E0E10;
  --bg-2:      #131316;
  --surface:   #18181B;
  --surface-2: #1F1F23;

  --ink:       #FAFAF9;
  --ink-soft:  rgba(250,250,249,0.76);
  --muted:     rgba(250,250,249,0.50);
  --faint:     rgba(250,250,249,0.30);
  --line:      rgba(250,250,249,0.08);
  --line-strong: rgba(250,250,249,0.16);

  --accent:    #94A3B8;
  --accent-2:  #CBD5E1;
  --deep:      #52525B;
  --warm:      #E7C9A0;

  --on-primary: #0E0E10;
  --glow-1:    rgba(250,250,249,0.04);
  --glow-2:    rgba(148,163,184,0.06);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(250,250,249,0.10);
}

/* ─── Theme: Ivory (light · clean teal) ─── */
[data-theme="ivory"]{
  --scheme: light;
  --bg:        #F7F4ED;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F0EBE1;

  --ink:       #0F1827;
  --ink-soft:  rgba(15,24,39,0.76);
  --muted:     rgba(15,24,39,0.55);
  --faint:     rgba(15,24,39,0.30);
  --line:      rgba(15,24,39,0.10);
  --line-strong: rgba(15,24,39,0.18);

  --accent:    #0E7C70;
  --accent-2:  #14B8A6;
  --deep:      #1E3A8A;
  --warm:      #B45309;

  --on-primary: #F7F4ED;
  --glow-1:    rgba(14,124,112,0.06);
  --glow-2:    rgba(30,58,138,0.05);
  --scrim:     rgba(0,0,0,0.02);
  --terminal-grid: rgba(14,124,112,0.18);
}

/* ─── Theme: Bone (light · warm editorial) ─── */
[data-theme="bone"]{
  --scheme: light;
  --bg:        #F0E8D7;
  --bg-2:      #ECE3CF;
  --surface:   #E5DAC2;
  --surface-2: #DCD0B5;

  --ink:       #1A1F2C;
  --ink-soft:  rgba(26,31,44,0.78);
  --muted:     rgba(26,31,44,0.55);
  --faint:     rgba(26,31,44,0.30);
  --line:      rgba(26,31,44,0.12);
  --line-strong: rgba(26,31,44,0.20);

  --accent:    #7C3F1A;
  --accent-2:  #B45309;
  --deep:      #1E3A8A;
  --warm:      #1E3A8A;

  --on-primary: #F0E8D7;
  --glow-1:    rgba(124,63,26,0.06);
  --glow-2:    rgba(180,83,9,0.05);
  --scrim:     rgba(0,0,0,0.025);
  --terminal-grid: rgba(124,63,26,0.18);
}

/* ─── Theme: Forest (dark · deep green + emerald) ─── */
[data-theme="forest"]{
  --scheme: dark;
  --bg:        #07140F;
  --bg-2:      #0B1F18;
  --surface:   #102B22;
  --surface-2: #16382C;

  --ink:       #E8F0EA;
  --ink-soft:  rgba(232,240,234,0.78);
  --muted:     rgba(232,240,234,0.55);
  --faint:     rgba(232,240,234,0.32);
  --line:      rgba(232,240,234,0.10);
  --line-strong: rgba(232,240,234,0.20);

  --accent:    #34D399;
  --accent-2:  #6EE7B7;
  --deep:      #064E3B;
  --warm:      #FCD34D;

  --on-primary: #07140F;
  --glow-1:    rgba(52,211,153,0.10);
  --glow-2:    rgba(6,78,59,0.14);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(52,211,153,0.20);
}

/* ─── Theme: Sage (light · soft olive green) ─── */
[data-theme="sage"]{
  --scheme: light;
  --bg:        #EDF1E7;
  --bg-2:      #F4F7EE;
  --surface:   #FBFCF6;
  --surface-2: #E2E8D6;

  --ink:       #1B2418;
  --ink-soft:  rgba(27,36,24,0.76);
  --muted:     rgba(27,36,24,0.55);
  --faint:     rgba(27,36,24,0.30);
  --line:      rgba(27,36,24,0.10);
  --line-strong: rgba(27,36,24,0.20);

  --accent:    #4F7942;
  --accent-2:  #65A030;
  --deep:      #14532D;
  --warm:      #B45309;

  --on-primary: #EDF1E7;
  --glow-1:    rgba(79,121,66,0.08);
  --glow-2:    rgba(180,83,9,0.04);
  --scrim:     rgba(0,0,0,0.02);
  --terminal-grid: rgba(79,121,66,0.20);
}

/* ─── Theme: Saffron (dark · ink black + golden yellow) ─── */
[data-theme="saffron"]{
  --scheme: dark;
  --bg:        #0E0C08;
  --bg-2:      #15110A;
  --surface:   #1C170E;
  --surface-2: #251D11;

  --ink:       #F4EAD2;
  --ink-soft:  rgba(244,234,210,0.78);
  --muted:     rgba(244,234,210,0.55);
  --faint:     rgba(244,234,210,0.32);
  --line:      rgba(244,234,210,0.10);
  --line-strong: rgba(244,234,210,0.20);

  --accent:    #F59E0B;
  --accent-2:  #FCD34D;
  --deep:      #92400E;
  --warm:      #FED7AA;

  --on-primary: #0E0C08;
  --glow-1:    rgba(245,158,11,0.10);
  --glow-2:    rgba(146,64,14,0.16);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(245,158,11,0.18);
}

/* ─── Theme: Amber (light · warm honey) ─── */
[data-theme="amber"]{
  --scheme: light;
  --bg:        #FAF3E2;
  --bg-2:      #FDF8EB;
  --surface:   #FFFFFF;
  --surface-2: #F1E7CC;

  --ink:       #2A1F0E;
  --ink-soft:  rgba(42,31,14,0.76);
  --muted:     rgba(42,31,14,0.55);
  --faint:     rgba(42,31,14,0.30);
  --line:      rgba(42,31,14,0.10);
  --line-strong: rgba(42,31,14,0.20);

  --accent:    #B45309;
  --accent-2:  #D97706;
  --deep:      #78350F;
  --warm:      #1E3A8A;

  --on-primary: #FAF3E2;
  --glow-1:    rgba(180,83,9,0.06);
  --glow-2:    rgba(217,119,6,0.05);
  --scrim:     rgba(0,0,0,0.025);
  --terminal-grid: rgba(180,83,9,0.20);
}

/* ─── Theme: Plum (dark · deep purple + lavender) ─── */
[data-theme="plum"]{
  --scheme: dark;
  --bg:        #0F0A1A;
  --bg-2:      #170F25;
  --surface:   #1F1632;
  --surface-2: #2A1F45;

  --ink:       #EFE9FB;
  --ink-soft:  rgba(239,233,251,0.78);
  --muted:     rgba(239,233,251,0.55);
  --faint:     rgba(239,233,251,0.32);
  --line:      rgba(239,233,251,0.10);
  --line-strong: rgba(239,233,251,0.20);

  --accent:    #A78BFA;
  --accent-2:  #C4B5FD;
  --deep:      #5B21B6;
  --warm:      #FBBF24;

  --on-primary: #0F0A1A;
  --glow-1:    rgba(167,139,250,0.10);
  --glow-2:    rgba(91,33,182,0.16);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(167,139,250,0.18);
}

/* ─── Theme: Lilac (light · pale violet, deep accents) ─── */
[data-theme="lilac"]{
  --scheme: light;
  --bg:        #F6F2FB;
  --bg-2:      #FBF8FE;
  --surface:   #FFFFFF;
  --surface-2: #ECE2F6;

  --ink:       #1F1530;
  --ink-soft:  rgba(31,21,48,0.76);
  --muted:     rgba(31,21,48,0.55);
  --faint:     rgba(31,21,48,0.30);
  --line:      rgba(31,21,48,0.10);
  --line-strong: rgba(31,21,48,0.20);

  --accent:    #6D28D9;
  --accent-2:  #8B5CF6;
  --deep:      #4C1D95;
  --warm:      #B45309;

  --on-primary: #F6F2FB;
  --glow-1:    rgba(109,40,217,0.06);
  --glow-2:    rgba(76,29,149,0.05);
  --scrim:     rgba(0,0,0,0.025);
  --terminal-grid: rgba(109,40,217,0.18);
}

/* ─── Theme: Crimson (dark · wine + red) ─── */
[data-theme="crimson"]{
  --scheme: dark;
  --bg:        #150A0E;
  --bg-2:      #1F0E13;
  --surface:   #29131A;
  --surface-2: #3A1A23;

  --ink:       #F4E5E5;
  --ink-soft:  rgba(244,229,229,0.78);
  --muted:     rgba(244,229,229,0.55);
  --faint:     rgba(244,229,229,0.32);
  --line:      rgba(244,229,229,0.10);
  --line-strong: rgba(244,229,229,0.20);

  --accent:    #F43F5E;
  --accent-2:  #FB7185;
  --deep:      #881337;
  --warm:      #FBBF24;

  --on-primary: #150A0E;
  --glow-1:    rgba(244,63,94,0.10);
  --glow-2:    rgba(136,19,55,0.16);
  --scrim:     rgba(255,255,255,0.02);
  --terminal-grid: rgba(244,63,94,0.20);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top: 88px; }
html, body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
input,textarea,select{ font:inherit; color:inherit; }

/* ambient backdrop */
body{ transition: background 400ms ease, color 400ms ease; }
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 85% -5%, var(--glow-1), transparent 55%),
    radial-gradient(ellipse 700px 450px at 5% 15%, var(--glow-2), transparent 50%),
    radial-gradient(ellipse 600px 400px at 50% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%);
  z-index:0;
  transition: background 400ms ease;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.4;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  z-index:0;
}
[data-theme="ivory"] body::after,
[data-theme="bone"] body::after,
[data-theme="sage"] body::after,
[data-theme="amber"] body::after,
[data-theme="lilac"] body::after{ opacity:0.2; }
main, .nav, .foot{ position:relative; z-index:1; }

/* container */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* selection */
::selection{ background:var(--accent); color:var(--on-primary); }

/* scrollbar */
html{ scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--ink-soft);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* focus rings */
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. TYPOGRAPHY PRIMITIVES ---------- */
.text-gradient{
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 50%, var(--warm) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.section-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.section-eyebrow::before{
  content:"";
  width:20px;
  height:1px;
  background:var(--accent);
  opacity:0.6;
}

.section-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:8px 14px;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.section-tag span{ color:var(--accent); font-weight:500; }
.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:8px 14px;
  border-radius:999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.kicker__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  50%   { box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent); }
}

.section-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(36px, 4.8vw, 64px);
  line-height:1.06;
  letter-spacing:-0.035em;
  margin:0 0 20px;
  color:var(--ink);
  max-width:22ch;
  text-wrap: balance;
}
.section-title em{
  font-style:normal;
  font-weight:600;
  color:var(--accent);
}

.section-lede{
  font-size:clamp(16px, 1.3vw, 18px);
  color:var(--ink-soft);
  max-width:56ch;
  line-height:1.65;
  text-wrap: pretty;
}

.section-head{ margin-bottom:64px; }
.section-head--wide .section-title{ max-width:28ch; }

/* ---------- 4. NAV ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px 0;
  transition: background 200ms ease, border-color 200ms ease, padding 200ms ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background: transparent;
  backdrop-filter: none;
  border-bottom:none;
  box-shadow: none;
  padding:12px 0;
}
.nav.is-scrolled .nav__inner{
  max-width: calc(var(--maxw) - 32px);
  padding:10px 20px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border:1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  border-radius:999px;
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.4),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav__brand{
  display:flex; align-items:center; gap:8px;
  font-weight:500; letter-spacing:-0.01em; font-size:14px;
}
.brand-logo{
  height: 34px;
  width: auto;
  display: block;
  border: none;
  box-shadow: none;
  transition: transform 280ms var(--ease-out), filter 280ms ease;
}
.brand-logo--dark{
  border-radius: 0;
  filter: none;
}
.brand-logo--light{
  border-radius: 6px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.nav__brand:hover .brand-logo--dark{
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.nav__brand:hover .brand-logo--light{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--accent) 25%, transparent));
}
.foot__logo{
  height: 52px;
  width: auto;
  border: none;
  box-shadow: none;
}
.foot__logo.brand-logo--dark{ filter: none; }
.foot__logo.brand-logo--light{
  border-radius: 8px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
}
/* Show dark-bg logo on dark themes, near-black logo on light themes */
.brand-logo--light{ display: none; }
[data-theme="ivory"]  .brand-logo--dark,
[data-theme="bone"]   .brand-logo--dark,
[data-theme="sage"]   .brand-logo--dark,
[data-theme="amber"]  .brand-logo--dark,
[data-theme="lilac"]  .brand-logo--dark{ display: none; }
[data-theme="ivory"]  .brand-logo--light,
[data-theme="bone"]   .brand-logo--light,
[data-theme="sage"]   .brand-logo--light,
[data-theme="amber"]  .brand-logo--light,
[data-theme="lilac"]  .brand-logo--light{ display: block; }

.nav__links{
  display:flex; gap:32px;
  font-size:14px;
  color:var(--ink-soft);
}
.nav__links a{
  position:relative;
  padding:6px 0;
  transition: color 150ms ease;
}
.nav__links a.is-active{ color:var(--ink); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform: scaleX(1); }

.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__cta .btn{ font-size:13px; padding:9px 16px; }
.nav__toggle{ display:none; }

/* ---- THEME SWITCHER ---- */
.theme{ position:relative; }
.theme__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 8px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:12px;
  color:var(--ink-soft);
  font-family:var(--mono);
  letter-spacing:0.06em;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.theme__btn:hover{ color:var(--ink); border-color:var(--accent); }
.theme__btn[aria-expanded="true"]{ color:var(--ink); border-color:var(--accent); }

.theme__swatch{
  display:inline-flex;
  align-items:center;
  background: var(--surface);
  border-radius:999px;
  padding:3px;
  gap:0;
  border:1px solid var(--line);
}
.theme__sw{
  display:block; width:9px; height:9px; border-radius:50%;
  margin-left:-3px;
}
.theme__sw:first-child{ margin-left:0; }
.theme__sw--bg{ background: var(--bg); border:1px solid var(--line-strong); }
.theme__sw--ink{ background: var(--ink); }
.theme__sw--accent{ background: var(--accent); }

.theme__name{ color:var(--ink); }

.theme__menu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border:1px solid var(--line-strong);
  border-radius: 14px;
  padding: 12px;
  display:flex; flex-direction:column;
  gap:6px;
  opacity:0; visibility:hidden;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45), 0 0 0 1px var(--line);
  z-index: 60;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.theme.is-open .theme__menu{
  opacity:1; visibility:visible;
  transform: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}
.theme__menu ul{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.theme__group{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 6px 4px;
}
.theme__menu li{
  display:flex; flex-direction:column;
  align-items:flex-start; gap:8px;
  padding: 10px;
  border-radius: 10px;
  cursor:pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.theme__menu li:hover{
  background: var(--bg-2);
  border-color: var(--line);
  transform: translateY(-1px);
}
.theme__menu li.is-current{
  background: var(--bg-2);
  border-color: var(--accent);
}
.theme__menu li.is-current::before{
  content:"";
  position:absolute;
  margin-top:6px; margin-left: 6px;
  width:6px; height:6px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.theme__previewSet{
  display:flex;
  width:100%; height:36px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  flex-shrink:0;
  position:relative;
}
.theme__previewSet i{ flex:1; display:block; }
.theme__menu strong{
  display:block;
  font-family: var(--sans);
  font-weight:500;
  font-size:13px;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.theme__menu em{
  display:block;
  font-family: var(--mono);
  font-style:normal;
  font-size:10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top:2px;
}
.theme__menu li{ position: relative; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:-0.005em;
  padding:13px 22px;
  border-radius:999px;
  transition: background 220ms cubic-bezier(.2,.8,.2,1),
              color 220ms ease,
              transform 220ms cubic-bezier(.2,.8,.2,1),
              border-color 220ms ease,
              box-shadow 220ms ease;
  white-space:nowrap;
  isolation: isolate;
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn--primary{
  background:var(--ink);
  color:var(--on-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-primary) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 25%, transparent),
    0 1px 2px rgba(0,0,0,0.12);
}
.btn--primary:hover{
  background:var(--accent);
  color:var(--on-primary);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn--primary:active{ transform: translateY(0); }

.btn--ghost{
  border:1px solid var(--line-strong);
  color:var(--ink);
  background: color-mix(in srgb, var(--surface) 30%, transparent);
}
.btn--ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.btn--text{
  padding:13px 4px;
  color:var(--ink-soft);
  border-radius:0;
  position:relative;
}
.btn--text::after{
  content:"";
  position:absolute; left:4px; right:4px; bottom:8px;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.btn--text:hover{ color:var(--ink); }
.btn--text:hover::after{ transform: scaleX(1); }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  padding: clamp(140px, 18vh, 200px) 0 clamp(80px, 12vh, 120px);
  border-bottom:1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong), transparent) 1;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:0; left:10%; right:10%;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, var(--line)), transparent);
  pointer-events:none;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5vw, 80px);
  align-items:center;
  position:relative;
  z-index:2;
}
.hero__topo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  color: var(--accent);
}
.hero__spotlight{
  position:absolute;
  pointer-events:none;
  width: 700px; height: 700px;
  border-radius: 50%;
  left: var(--mx, 30%);
  top: var(--my, 30%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 70%);
  z-index: 1;
  opacity: 0;
  transition: opacity 380ms ease;
  filter: blur(20px);
}
.hero:hover .hero__spotlight{ opacity: 1; }
[data-theme="grawity"] .hero__topo,
[data-theme="midnight"] .hero__topo,
[data-theme="oceanic"]  .hero__topo,
[data-theme="graphite"] .hero__topo{ opacity: 0.55; }
[data-theme="ivory"]    .hero__topo,
[data-theme="bone"]     .hero__topo{ opacity: 0.40; }

.hero__trace{ display:none; }

.hero__title{
  font-family:var(--sans);
  font-weight:600;
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 1.06;
  letter-spacing:-0.04em;
  margin:20px 0 28px;
  color:var(--ink);
  text-wrap: balance;
}
.hero__title em,
.hero__title .text-gradient{
  font-style:normal;
  font-weight:600;
}

.hero__lede{
  font-size: clamp(17px, 1.4vw, 20px);
  color:var(--ink-soft);
  max-width:52ch;
  line-height:1.65;
  margin:0 0 32px;
}
.hl{
  color:var(--accent);
  font-weight:500;
}
/* word-stagger removed */
.hero__title span{
  display:inline;
  opacity:1;
  transform:none;
  filter:none;
  animation:none;
}

.hero__cta{
  display:flex; gap:18px; align-items:center;
  margin-bottom:64px;
  flex-wrap:wrap;
}

.hero__stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
}
.hero__stats > div{
  display:flex; flex-direction:column; gap:6px;
  padding:20px 20px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(12px);
}
.hero__stats > div:first-child{ border-top-left-radius:var(--radius-lg); border-bottom-left-radius:var(--radius-lg); }
.hero__stats > div:last-child{
  border-top-right-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
}
.hero__stats dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__stats dd{
  margin:0;
  font-family:var(--sans);
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.hero__stats > div:first-child dd{ color:var(--accent); }

/* hero terminal panel */
.hero__panel{
  position:relative;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  border-radius: var(--radius-xl);
  overflow:hidden;
  backdrop-filter: blur(16px);
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  min-height: 380px;
}
.panel__chrome{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  background: var(--scrim);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted);
}
.panel__dot{ width:8px; height:8px; border-radius:50%; background: var(--line-strong); }
.panel__dot:nth-child(1){ background:#FF5F57; opacity:0.55; }
.panel__dot:nth-child(2){ background:#FEBC2E; opacity:0.55; }
.panel__dot:nth-child(3){ background:#28C840; opacity:0.55; }
.panel__title{ margin-left:8px; }
.panel__body{
  padding:18px 20px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.75;
  color:var(--ink-soft);
  min-height: 320px;
  max-height: 360px;
  overflow:hidden;
  position:relative;
  z-index:1;
  mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.panel__body .ts{ color:var(--muted); }
.panel__body .ok{ color:var(--accent); }
.panel__body .warn{ color:var(--warm); }
.panel__body .ev{ color:var(--ink); }
.panel__body .arrow{ color:var(--faint); }
.panel__body .num{ color:var(--accent-2); }
.panel__body .line{
  display:block;
  opacity:0;
  transform: translateY(2px);
  animation: lineIn 360ms ease forwards;
}
@keyframes lineIn{ to{ opacity:1; transform:none; } }
.panel__mesh{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}
.panel__mesh .mesh-dot{ fill: var(--accent); fill-opacity: 0.18; }
.panel__mesh .halo-in{ stop-color: var(--accent); stop-opacity: 0.35; }
.panel__mesh .halo-out{ stop-color: var(--accent); stop-opacity: 0; }

.hero__scroll{
  position:absolute;
  left:var(--gutter);
  bottom:30px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted);
}
.hero__scroll-line{
  width:60px; height:1px; background:var(--line-strong); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; left:-30%; top:0; width:30%; height:100%;
  background:var(--accent);
  animation: scrollLine 2.6s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ left:-30%; } 60%{ left:100%; } 100%{ left:100%; }
}

/* ---------- 7. MARQUEE ---------- */
.marquee{
  border-bottom:1px solid var(--line);
  padding:36px 0;
  overflow:hidden;
  background: linear-gradient(180deg, transparent, var(--scrim));
  position:relative;
}
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.marquee::before{
  left:0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.marquee::after{
  right:0;
  background: linear-gradient(270deg, var(--bg), transparent);
}
.marquee__track{
  display:flex; gap:48px;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(32px, 4.5vw, 56px);
  font-style:italic;
  color:var(--ink-soft);
  animation: marquee 55s linear infinite;
  width:max-content;
  animation-play-state: running;
}
.marquee__track span:nth-child(odd){
  color:var(--ink);
  font-style:normal;
  font-weight:400;
}
.marquee__track span:nth-child(even){
  color:var(--accent);
  opacity:0.85;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- 7.5 STACK STRIP ---------- */
.stack{
  padding: 50px 0;
  border-bottom: 1px solid var(--line);
}
.stack__inner{ display:flex; flex-direction:column; gap:24px; }
.stack__label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.stack__list{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stack__list li{
  display:flex; align-items:center; gap:10px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 200ms ease, background 200ms ease;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.stack__list li:hover{
  color: var(--ink);
  background: var(--surface);
}
.stack__list svg{
  width: 22px; height: 22px;
  color: var(--accent);
  flex-shrink:0;
}
@media (max-width: 1100px){
  .stack__list{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .stack__list{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 8. MANIFESTO ---------- */
.manifesto{
  padding: clamp(64px, 10vh, 100px) 0;
  border-bottom:1px solid var(--line);
}
.manifesto__inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items:center;
  padding:48px 56px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border:1px solid var(--line);
  backdrop-filter: blur(16px);
  position:relative;
  overflow:hidden;
}
.manifesto__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(500px 280px at 100% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 55%);
  pointer-events:none;
}
.manifesto__copy{
  position:relative;
}
.manifesto__text{
  font-family:var(--serif);
  font-size:clamp(24px, 3vw, 40px);
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:none;
  text-wrap: balance;
  position:relative;
}
.manifesto__text em{
  font-style:italic;
  color:var(--accent);
}
.manifesto__tenets{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
.manifesto__tenet{
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  transition: border-color 220ms ease;
}
.manifesto__tenet:hover{
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
.manifesto__tenet-kicker{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.manifesto__tenet-title{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:6px;
}
.manifesto__tenet-body{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
}
@media (max-width: 900px){
  .manifesto__inner{
    grid-template-columns: 1fr;
    padding:32px 28px;
    gap:28px;
  }
  .manifesto__tenets{ grid-template-columns: 1fr; }
}

/* ---------- 8.5 PILLARS ---------- */
.pillars{
  padding: clamp(64px, 10vh, 100px) 0;
  border-bottom:1px solid var(--line);
}
.pillars__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.pillar{
  padding:32px 28px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(12px);
  transition: border-color 260ms ease, transform 260ms var(--ease-out), box-shadow 260ms ease;
}
.pillar:hover{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.pillar__icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--accent);
  margin-bottom:20px;
}
.pillar__icon svg{ width:20px; height:20px; }
.pillar__title{
  font-family:var(--sans);
  font-weight:600;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 10px;
}
.pillar__body{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
@media (max-width: 900px){
  .pillars__grid{ grid-template-columns: 1fr; }
}

/* ---------- 9. CAPABILITIES (bento grid) ---------- */
.capabilities{ padding: clamp(88px, 12vh, 128px) 0; border-bottom:1px solid var(--line); }
.cap-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  border:none;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  background:transparent;
}
.cap{
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:28px 24px 24px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(12px);
  transition: border-color 260ms ease, transform 260ms var(--ease-out), box-shadow 260ms ease;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 280px;
  overflow:hidden;
}
.cap--wide{ grid-column: span 2; min-height: 240px; }
.cap:nth-child(4n){ border-right:1px solid var(--line); }
.cap:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.cap::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 10%, transparent),
              transparent 65%);
  opacity:0;
  transition: opacity 320ms ease;
  pointer-events:none;
  z-index:0;
}
.cap::after{ display:none; }
.cap > *{ position:relative; z-index:1; }
.cap:hover::before{ opacity: 1; }
.cap:hover .cap__num{ color:var(--accent); }
.cap__head{
  display:flex; justify-content:flex-start; align-items:center;
  gap:12px;
  padding-bottom:20px;
}
.cap__icon{
  width:36px; height:36px;
  padding:6px;
  border-radius:8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  flex-shrink:0;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.cap:hover .cap__icon{ transform: scale(1.05); }
.cap__head .cap__num{ margin-left:auto; }
.cap__num{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  transition: color 200ms ease;
}
.cap__tag{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  padding:3px 8px;
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius:999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cap h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin: 0 0 10px;
}
.cap p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 14px;
}
.cap__bullets{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.03em;
  color:var(--muted);
  display:flex; flex-direction:column; gap:4px;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid var(--line);
}
.cap__bullets li::before{ content:"→ "; color:var(--accent); opacity:0.7; }

/* ---------- 10. INDUSTRIES ---------- */
.industries{
  padding: clamp(88px, 12vh, 128px) 0;
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
}

.ind{
  position:relative;
  display:flex; flex-wrap:wrap; gap:4px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px;
  margin-bottom:32px;
  width:fit-content;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(12px);
}
.ind__tab{
  position:relative;
  z-index:2;
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  color:var(--ink-soft);
  padding:10px 20px;
  border-radius:999px;
  transition: color 240ms ease;
}
.ind__tab:hover{ color:var(--ink); }
.ind__tab.is-active{ color:var(--on-primary); }

.ind__indicator{
  position:absolute;
  top:5px; bottom:5px; left:0;
  width:0;
  background: var(--ink);
  border-radius:999px;
  z-index:1;
  transition: transform 460ms cubic-bezier(.2,.8,.2,1), width 460ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  opacity:0;
}
.ind__indicator.is-ready{ opacity:1; }

.ind__panels{
  position:relative;
  padding:40px 48px;
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(16px);
}
.ind__panel{
  display:none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap:64px;
  row-gap:24px;
  align-items:start;
}
.ind__panel.is-active{
  display:grid;
  animation: fadeUp 400ms ease;
}
.ind__meta{
  grid-column:1 / -1;
  grid-row:1;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex; gap:16px;
}
.ind__title{
  grid-column:1;
  grid-row:2;
  font-family:var(--sans);
  font-weight:600;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0;
  max-width:none;
  align-self:start;
}
.ind__art{
  grid-column:1;
  grid-row:3;
  margin:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  align-self:start;
}
.ind__body{
  grid-column:2;
  grid-row:2;
  padding-top:0;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:none;
  align-self:start;
}
.ind__list{
  grid-column:2;
  grid-row:3;
  margin-top:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0 24px;
  border-top:1px solid var(--line);
  align-self:start;
}
.ind__list li{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-soft);
  position:relative;
  padding-left:16px;
}
.ind__list li::before{
  content:"";
  position:absolute; left:0; top:18px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--accent);
}
.ind__art svg{
  width:100%; height:auto;
  color: var(--ink-soft);
  stroke: currentColor;
  stroke-width: 1.1;
  fill: none;
}
.ind__art-accent{ color: var(--accent); }
.ind__art .ind__art-accent[fill="currentColor"]{ fill: var(--accent); }
.ind__art [stroke-linecap]{ stroke: currentColor; }
.ind__art text{ stroke:none; fill: currentColor; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: none; }
}

/* ---------- 11. APPROACH ---------- */
.approach{ padding: clamp(88px, 12vh, 128px) 0; border-bottom:1px solid var(--line); }
.approach__grid{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  gap:64px;
  align-items:start;
}
.approach__steps{
  margin-top:50px;
  display:flex; flex-direction:column;
}
.approach__steps li{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap:20px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.approach__steps li:last-child{ border-bottom:1px solid var(--line); }
.approach__steps li > span{
  font-family:var(--mono);
  font-size:12px;
  color:var(--accent);
  padding-top:4px;
}
.approach__steps li strong{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:20px;
  letter-spacing:-0.02em;
  margin-bottom:6px;
  color:var(--ink);
}
.approach__steps li p{
  margin:0;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.55;
  max-width:52ch;
}

.approach__diagram{
  margin:0;
  position:sticky; top:120px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:24px;
  backdrop-filter: blur(12px);
}
.approach__diagram svg{ width:100%; height:auto; }
.diag-spine{ stroke: var(--accent); stroke-width: 1; opacity: 0.6; }
.diag-node rect{
  fill: var(--surface-2);
  stroke: var(--line-strong);
  transition: stroke 220ms ease, fill 220ms ease, transform 320ms ease;
  transform-box: fill-box;
  transform-origin: center;
}
.diag-node:hover rect{ stroke: var(--accent); }
.diag-node--accent rect{ stroke: var(--accent); fill: none; }
.diag-node--accent .diag-tag{ fill: var(--accent); }
.diag-pulse{
  fill: var(--accent);
  animation: diagFlow 5.6s ease-in-out infinite;
}
.diag-pulse-halo{
  fill: var(--accent);
  fill-opacity: 0.18;
  animation: diagFlow 5.6s ease-in-out infinite;
}
@keyframes diagFlow{
  0%   { transform: translate(0, 0);   opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(0, 540px); opacity: 0; }
}
.diag-tag{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:0.18em;
  fill: var(--accent);
}
.diag-title{
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  fill: var(--ink);
}
.diag-meta{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  fill: var(--muted);
}

/* ---------- 12. WORK ---------- */
.work{
  padding: clamp(88px, 12vh, 128px) 0;
  border-bottom:1px solid var(--line);
  background: transparent;
}
.work__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}
.case{
  position:relative;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  display:flex; flex-direction:column;
  gap:16px;
  transition: border-color 260ms ease, transform 320ms var(--ease-out), box-shadow 320ms ease;
  overflow:hidden;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(12px);
}
.case:hover{
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.case::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(500px 320px at var(--mx, 70%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 9%, transparent),
              transparent 60%);
  opacity:0;
  transition: opacity 320ms ease;
  pointer-events:none;
  z-index:0;
}
.case > *{ position:relative; z-index:1; }
.case:hover::before{ opacity: 1; }
.case:hover .case__line{ stroke-width: 1.8; }
.case .case__line, .case__bars rect, .case__redact rect{
  transition: all 320ms ease;
}
.case__meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; gap:14px;
}
.case h3{
  font-family:var(--sans);
  font-weight:600;
  font-size: clamp(22px, 2vw, 26px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:28ch;
}
.case p{
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.55;
  max-width:52ch;
}
.case__viz{
  margin: 8px 0 4px;
  padding: 18px 18px 14px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.case__viz svg{
  width:100%; height:auto;
  color: var(--ink-soft);
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  display:block;
}
.case__viz figcaption{
  margin-top:10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__line{ stroke: var(--accent); stroke-width: 1.4; }
.case__line--soft{ stroke: var(--ink-soft); opacity: 0.5; }
.case__fill{ fill: var(--accent); fill-opacity: 0.07; stroke: none; }
.case__dot{ fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.case__label{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  fill: var(--accent);
  stroke: none;
  text-transform: uppercase;
}
.case__bars rect{ fill: var(--ink-soft); stroke: none; opacity: 0.30; }
.case__bars .case__bar-active{ fill: var(--accent); opacity: 1; }
.case__redact rect{ fill: var(--ink-soft); stroke: none; opacity: 0.18; }

.case__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.case__stats li{ display:flex; flex-direction:column; gap:4px; padding-right:12px; }
.case__stats strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:30px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.case__stats span{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 13. COMPANY ---------- */
.company{ padding: 130px 0; border-bottom:1px solid var(--line); }
.company__grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:80px;
  align-items:start;
}
.company__body p{
  font-size:17px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 18px;
  max-width:60ch;
}
.company__principles{
  margin-top:36px;
  border-top:1px solid var(--line);
}
.company__principles li{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-weight:500;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--ink-soft);
}
.company__principles strong{
  font-weight:600;
  color:var(--ink);
  margin-right:6px;
}
.company__principles em{ color:var(--accent); font-style:normal; font-weight:500; }

/* ---------- 13.5 CTA BAND ---------- */
.cta-band{
  padding: clamp(72px, 10vh, 100px) 0;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 700px 400px at 15% 50%, var(--glow-1), transparent 55%),
    radial-gradient(ellipse 600px 350px at 85% 50%, var(--glow-2), transparent 50%),
    color-mix(in srgb, var(--surface) 30%, var(--bg));
}
.cta-band__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(36px, 5vw, 56px);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(16px);
}
.cta-band__title{
  font-family:var(--sans);
  font-weight:600;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height:1.08;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 12px;
  text-wrap: balance;
}
.cta-band__title em{
  font-style:normal;
  color:var(--accent);
}
.cta-band__lede{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
  max-width:48ch;
}
.cta-band__actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-shrink:0;
}
@media (max-width: 820px){
  .cta-band__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .cta-band__actions{ width:100%; }
  .cta-band__actions .btn{ width:100%; justify-content:center; }
}

/* ---------- 14. CONTACT ---------- */
.contact{
  padding: clamp(100px, 16vh, 160px) 0;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 500px at 75% 100%, var(--glow-1), transparent 55%),
    radial-gradient(ellipse 600px 400px at 20% 80%, var(--glow-2), transparent 50%),
    var(--bg);
}
.contact__title{
  font-family:var(--sans);
  font-weight:600;
  font-size: clamp(40px, 6vw, 72px);
  line-height:1.02;
  letter-spacing:-0.035em;
  margin:0 0 24px;
  color:var(--ink);
  text-wrap: balance;
}
.contact__email{
  display:inline-flex;
  align-items:center;
  font-family:var(--sans);
  font-weight:500;
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing:-0.02em;
  color:var(--ink);
  padding:12px 0;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat bottom left;
  background-size: 0% 2px;
  transition: color 220ms ease, background-size 320ms var(--ease-out);
}
.contact__email:hover{
  color:var(--accent);
  background-size: 100% 2px;
}

/* form */
.contact__form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: var(--radius-xl);
  padding:36px;
  position:relative;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}
.contact__lede{
  font-size:17px;
  color:var(--ink-soft);
  margin:0 0 28px;
  max-width:50ch;
  line-height:1.6;
}
.contact__honey{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.contact__submit[disabled]{ opacity:0.72; cursor:not-allowed; transform:none; }
.contact__submit-loading{ display:none; }
.contact__form.is-sending .contact__submit-label{ display:none; }
.contact__form.is-sending .contact__submit-loading{ display:inline; }

.contact__feedback{
  grid-column: 1 / -1;
  margin:0;
  font-size:14px;
  line-height:1.5;
  display:none;
  padding:12px 14px;
  border-radius:8px;
}
.contact__feedback--success{
  color:var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.contact__feedback--error{
  color:var(--warm);
  background: color-mix(in srgb, var(--warm) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--warm) 25%, transparent);
}
.contact__feedback--error a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.contact__form.is-sent .contact__feedback--success{ display:block; }
.contact__form.is-pending .contact__feedback--success{ display:block; }
.contact__form.is-error .contact__feedback--error{ display:block; }
.contact__form.is-sent .contact__submit,
.contact__form.is-sending .contact__submit{ pointer-events:none; }
.contact__form label{
  display:flex; flex-direction:column; gap:8px;
}
.contact__form label.full{ grid-column: 1 / -1; }
.contact__form label span{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  transition: color 220ms ease;
}
.contact__form label{ position:relative; }
.contact__form label::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px; width:100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.contact__form label:focus-within::after{ transform: scaleX(1); }
.contact__form label:focus-within span{ color: var(--accent); }

.contact__submit span{
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  text-transform:none;
}

.contact__form input,
.contact__form textarea,
.contact__form select{
  background: transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding: 10px 0;
  font-size:15px;
  color:var(--ink);
  border-radius:0;
  outline:none;
  resize:vertical;
  transition: border-color 180ms ease;
}
.contact__form input:focus-visible,
.contact__form textarea:focus-visible,
.contact__form select:focus-visible{ outline:none; }
.contact__form select{
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus{ border-bottom-color: var(--accent); }
.contact__form textarea::placeholder{ color:var(--faint); }
.contact__form .btn{ grid-column: 1 / -1; justify-self:start; margin-top:8px; }

.case__tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  list-style:none;
}
.case__tags li{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.case:hover .case__tags li{
  color:var(--ink-soft);
  border-color:var(--line-strong);
}
.case:hover .case__tags li:first-child{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- 15. FOOTER ---------- */
.foot{
  padding: clamp(64px, 10vh, 96px) 0 40px;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 30%, var(--bg)));
  position:relative;
}
.foot::before{
  content:"";
  position:absolute;
  top:0; left:10%; right:10%;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, var(--line)), transparent);
}
.foot__inner{
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap:60px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
}
.foot__brand{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.foot__tagline{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--ink-soft);
  max-width:24ch;
  margin:0;
  line-height:1.35;
}
.foot__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}
.foot__h{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
}
.foot__cols ul{ display:flex; flex-direction:column; gap:10px; }
.foot__cols a{
  font-size:14px;
  color:var(--ink-soft);
  transition: color 180ms ease, transform 180ms ease;
  display:inline-block;
}
.foot__cols a:hover{
  color:var(--accent);
  transform: translateX(3px);
}
.foot__strip{
  padding-top:28px;
  display:flex;
  justify-content:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 16. SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity 800ms cubic-bezier(.2,.7,.2,1),
              transform 800ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--stagger{ transform: translateY(28px); }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 1100px){
  .cap-grid{ grid-template-columns: repeat(2, 1fr); }
  .cap--wide{ grid-column: span 2; }
  .ind__panels{ padding:28px 32px; }
  .ind__list{ grid-template-columns: 1fr; }
  .approach__grid, .company__grid, .ind__panels, .contact__grid, .hero__grid{
    grid-template-columns: 1fr;
    gap:48px;
  }
  .approach__diagram{ position:static; }
  .ind__panel{ grid-template-columns: 1fr; grid-template-rows:none; row-gap:20px; }
  .ind__meta, .ind__title, .ind__body, .ind__list, .ind__art{ grid-column:1; grid-row:auto; }
  .ind__art{ margin-top:0; }
  .manifesto__inner{ padding:28px 24px; }
  .foot__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .nav__links, .nav__cta{ display:none; }
  .nav.is-open .nav__cta{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:12px;
    padding-top:16px;
    margin-top:8px;
    border-top:1px solid var(--line);
  }
  .nav.is-open .nav__cta .btn{ width:100%; justify-content:center; }
  .nav.is-open .theme{ align-self:flex-start; }
  .nav__toggle{
    display:flex; flex-direction:column; gap:5px;
    width:32px; height:32px; padding:8px;
    align-items:center; justify-content:center;
  }
  .nav__toggle span{
    display:block; width:18px; height:1px; background:var(--ink);
    transition: transform 200ms ease;
  }
  .nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(3px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ transform: translateY(-3px) rotate(-45deg); }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; gap:16px;
    width:100%; padding-top:18px;
    border-top:1px solid var(--line);
    margin-top:8px;
  }
  .nav.is-open .nav__inner{ flex-wrap:wrap; }

  .hero{ padding: 130px 0 70px; }
  .hero__stats{ grid-template-columns: repeat(2, 1fr); gap:10px; }

  .cap-grid{ grid-template-columns: 1fr; }
  .cap--wide{ grid-column: span 1; }
  .ind__panels{ padding:24px 20px; }
  .work__grid{ grid-template-columns: 1fr; }

  .ind{ overflow-x:auto; flex-wrap:nowrap; max-width:100%; }
  .ind__tab{ white-space:nowrap; }

  .contact__form{ grid-template-columns: 1fr; padding:22px; }
  .case__stats{ grid-template-columns: 1fr 1fr; gap:18px; }
  .foot__cols{ grid-template-columns: 1fr 1fr; }
  .foot__strip{ justify-content:center; }
}

/* respect motion prefs */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
}