/* Self-hosted Geist and JetBrains Mono (SIL Open Font License 1.1, license texts in /fonts/geist-OFL.txt and /fonts/jetbrains-mono-OFL.txt).
   Mirrors the Google Fonts subsets and unicode ranges, so rendering is unchanged. */
/* Geist, cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist, cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist, vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist, latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist, latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono, cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono, greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono, vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* DARK MODE (default) — token names kept stable so style code doesn't need rewriting */
  --accent: #7A6FF5;       /* brighter indigo: 4.98:1 on --paper (AA) */
  --accent-bright: #8A80F7;
  --ink: #F5F1EA;          /* text-on-bg */
  --ink-2: #ECE7DA;
  --paper: #0F0E0C;        /* page bg */
  --paper-2: #181714;
  --paper-3: #221F1A;
  --white: #F5F1EA;
  --muted: #A39D92;
  --rule: #2A2620;
  --rule-strong: #3A3530;
  --nav-bg: rgba(15, 14, 12, 0.82);

  /* Blueprint grid tints — dark mode default (warm indigo on near-black paper) */
  --bp-minor: rgba(107, 95, 240, 0.06);
  --bp-major: rgba(107, 95, 240, 0.18);

  /* "inverted" / elevated sections — unified with body bg for flat, consistent surface */
  --inv-bg: #0F0E0C;
  --inv-text: #F5F1EA;
  --inv-text-muted: #A39D92;
  --inv-rule: #2A2620;
  --inv-rule-dashed: #3A3530;
  --inv-accent: #7A6FF5;

  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: 32px;
  --pad-y: 120px;

  --dur: 0.3s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  --accent: #4338CA;
  --accent-bright: #5044E6;
  --ink: #0F0E0C;
  --ink-2: #1A1714;
  --paper: #F4F1EA;
  --paper-2: #ECE7DA;
  --paper-3: #E0D9C5;
  --white: #FFFFFF;
  --muted: #6B6358;
  --rule: #DDD4C0;
  --rule-strong: #C3B89E;
  --nav-bg: rgba(244, 241, 234, 0.85);

  /* Blueprint grid tints — light mode (deep indigo on warm paper) */
  --bp-minor: rgba(67, 56, 202, 0.05);
  --bp-major: rgba(67, 56, 202, 0.13);

  --inv-bg: #F4F1EA;
  --inv-text: #0F0E0C;
  --inv-text-muted: #6B6358;
  --inv-rule: #DDD4C0;
  --inv-rule-dashed: #C3B89E;
  --inv-accent: #4338CA;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  position: relative;
}
/* ─── Blueprint grid ───
   Fixed background; minor 24px grid + major 120px grid (every 5th line).
   Token-driven so dark/light themes inherit it automatically. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: transparent;
  background-image:
    /* major grid (every 120px) — stronger */
    linear-gradient(to right,  var(--bp-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-major) 1px, transparent 1px),
    /* minor grid (every 24px) — hairline */
    linear-gradient(to right,  var(--bp-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  /* fade out toward the center so content stays clean */
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.95) 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.95) 100%);
  transition: opacity 0.4s var(--ease);
}
/* Make sure nav, main, footer sit above the grid */
body > * { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration: none; }

/* ─── Container ─── */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── Eyebrow / mono label ─── */
.eye {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.eye::before { content: "//"; color: var(--accent); }
.eye--no::before { display: none; }

/* ─── Section header ─── */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 64px; align-items: end; margin-bottom: 56px;
}
.sec-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.sec-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(28px, 4.2vw, 52px); letter-spacing: -0.025em;
  line-height: 1.05; color: var(--ink);
  max-width: 14ch;
}
.sec-blurb {
  font-family: var(--font-body); font-size: 17px; color: var(--muted);
  line-height: 1.55; max-width: 56ch;
}
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
}

/* ════════ NAV ════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background 0.4s var(--ease);
}
.nav--scrolled { border-bottom-color: var(--rule); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav__brand {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 22px; letter-spacing: -0.04em; line-height: 1;
  display: inline-flex; align-items: baseline;
}
.nav__brand .slash { color: var(--accent); }
.nav__links {
  display: flex; gap: 32px; align-items: center;
  font-family: var(--font-body); font-size: 14px; color: var(--muted);
}
.nav__links a { transition: color var(--dur) var(--ease); white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  padding: 8px 16px; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__cta:hover { background: var(--accent); transform: translateY(-1px); }
.nav__cta .arrow { transition: transform var(--dur) var(--ease); }
.nav__cta:hover .arrow { transform: translateX(3px); }
@media (max-width: 1080px) {
  .nav__links { gap: 18px; font-size: 13px; }
}
@media (max-width: 900px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ════════ HERO ════════ */
.hero {
  padding: clamp(80px, 14vw, 140px) 0 clamp(80px, 12vw, 120px);
  position: relative;
}
.hero__inner { position: relative; }
.hero__eye { margin-bottom: 32px; }
.hero__h1 {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(40px, 8.5vw, 104px); letter-spacing: -0.035em;
  line-height: 0.98; color: var(--ink);
  max-width: 16ch;
  margin-bottom: 32px;
}
.hero__h1 .accent { color: var(--accent); }
.hero__sub {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(17px, 2vw, 22px); line-height: 1.5;
  color: var(--ink); opacity: 0.7;
  max-width: 56ch; margin-bottom: 40px;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 4px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--ink); color: var(--paper);
}
.btn--primary:hover { background: var(--accent); transform: translateY(-2px); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.hero__meta {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px dashed var(--rule-strong);
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta b { color: var(--ink); font-weight: 600; }
.hero__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ════════ SECTIONS ════════ */
section {
  padding: var(--pad-y) 0;
  position: relative;
}
/* Hairline section divider — drawn left-to-right as the section enters view */
section::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--rule);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease);
  pointer-events: none;
  z-index: 2;
}
section.section-in::before { transform: scaleX(1); }

/* Section content above any patterns */
section > .wrap { position: relative; z-index: 1; }

/* ════════ AMBIENT GLOW — two soft indigo orbs drift across the viewport
   behind every section. Fixed-position so they're visible regardless of scroll. */
.bg-glow {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bg-glow::before,
.bg-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  filter: blur(80px);
}
.bg-glow::before {
  width: 65vmin; height: 65vmin;
  top: -15vmin; left: -15vmin;
  opacity: 0.28;
  animation: glowDriftA 38s ease-in-out infinite alternate;
}
.bg-glow::after {
  width: 55vmin; height: 55vmin;
  bottom: -15vmin; right: -15vmin;
  opacity: 0.22;
  animation: glowDriftB 52s ease-in-out infinite alternate;
}
[data-theme="light"] .bg-glow::before { opacity: 0.16; }
[data-theme="light"] .bg-glow::after  { opacity: 0.12; }

@keyframes glowDriftA {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(45vw, 20vh); }
  50%  { transform: translate(70vw, 60vh); }
  75%  { transform: translate(20vw, 75vh); }
  100% { transform: translate(55vw, 30vh); }
}
@keyframes glowDriftB {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-35vw, -55vh); }
  50%  { transform: translate(-75vw, -25vh); }
  75%  { transform: translate(-40vw, -65vh); }
  100% { transform: translate(-60vw, -35vh); }
}

/* Keep page content above the ambient glow */
header.nav, main, footer { position: relative; z-index: 1; }

@media (max-width: 820px) { :root { --pad-y: 80px; } }

/* ─── What we do ─── */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 40px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.pillar:hover { border-color: var(--ink); transform: translateY(-4px); }
/* Engineering corner-registration mark — draws in on hover */
.pillar::before, .pillar::after {
  content: "";
  position: absolute;
  background: var(--accent);
  pointer-events: none;
  transition: transform 0.4s var(--ease);
}
.pillar::before {
  top: 14px; left: 14px;
  width: 16px; height: 1.5px;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.pillar::after {
  top: 14px; left: 14px;
  width: 1.5px; height: 16px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition-delay: 0.08s;
}
.pillar:hover::before { transform: scaleX(1); }
.pillar:hover::after  { transform: scaleY(1); }
/* Cursor-tracking glow — soft accent light that follows the mouse */
.pillar__glow {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.pillar:hover .pillar__glow { opacity: 1; }
.pillar__num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.04em;
}
.pillar__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 28px; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ink);
}
.pillar__body {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  opacity: 0.78; line-height: 1.55;
}
.pillar__list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pillar__list li {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  padding-left: 18px; position: relative;
  letter-spacing: 0;
}
.pillar__list li::before {
  content: "▸"; position: absolute; left: 0; top: 0; color: var(--accent);
}
.pillar__tag {
  margin-top: auto; padding-top: 18px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.pillar__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #6DB688; display: inline-block; margin-right: 6px; vertical-align: middle; }
.pillar__tag--stealth .dot { background: var(--accent); }

.pillar__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--accent); padding-bottom: 1px;
  border-bottom: 1px solid var(--accent);
  width: fit-content;
  transition: gap var(--dur) var(--ease);
}
.pillar__cta:hover { gap: 10px; }
.pillar__cta .arrow { transition: transform var(--dur) var(--ease); }

/* ─── Who we build for ─── */
.segs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.seg {
  display: grid; grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 32px; padding: 40px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background var(--dur) var(--ease);
  position: relative;
}
/* Engineering left-edge bar grows on hover */
.seg::before {
  content: "";
  position: absolute; left: 0; top: 50%; bottom: 50%; width: 2px;
  background: var(--accent); pointer-events: none;
  transition: top 0.45s var(--ease), bottom 0.45s var(--ease);
}
.seg:hover { background: var(--paper-2); }
.seg:hover::before { top: 12%; bottom: 12%; }
.seg__num {
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  color: var(--accent); letter-spacing: 0.06em;
}
.seg__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.15;
}
.seg__desc {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--ink); opacity: 0.78;
}
.seg__desc strong { color: var(--ink); font-weight: 500; opacity: 1; }
@media (max-width: 760px) {
  .seg { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
}

/* ════════ INVERTED — How we work (flips with theme to create rhythm break) ════════ */
.inverted {
  background: var(--inv-bg); color: var(--inv-text);
  border-top: 1px solid var(--inv-bg);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.inverted .sec-num { color: var(--inv-accent); }
.inverted .sec-title { color: var(--inv-text); }
.inverted .sec-blurb { color: var(--inv-text-muted); }
.inverted .eye { color: var(--inv-text-muted); }
.inverted .eye::before { color: var(--inv-accent); }

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--inv-rule);
}
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; } }
.principle {
  padding: 48px 32px 40px;
  border-right: 1px solid var(--inv-rule);
  border-bottom: 1px solid var(--inv-rule);
  display: flex; flex-direction: column; gap: 16px;
}
.principle:last-child { border-right: none; }
@media (max-width: 820px) {
  .principle { border-right: none; }
}
.principle__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--inv-accent); letter-spacing: 0.1em;
}
.principle__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 28px; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--inv-text);
}
.principle__body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--inv-text-muted);
}
.principle__quote {
  margin-top: auto; padding-top: 18px;
  border-top: 1px dashed var(--inv-rule-dashed);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--inv-text-muted);
  line-height: 1.55;
}

/* ─── Partnership / Experience ─── */
.gsd {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 80px; align-items: center;
}
@media (max-width: 820px) { .gsd { grid-template-columns: 1fr; gap: 40px; } }
.gsd__left { }
.gsd__pre {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.gsd__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.025em;
  line-height: 1.05; color: var(--ink); margin-bottom: 24px;
}
.gsd__title .gsd-mark {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.88em; letter-spacing: -0.04em;
  background: #0F0E0C; color: #FB923C;
  padding: 0.04em 0.18em 0.08em; border-radius: 4px; display: inline-block;
  line-height: 1; vertical-align: baseline;
}
.gsd__body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink); opacity: 0.78; max-width: 48ch;
  margin-bottom: 28px;
}
.gsd__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--accent); padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: gap var(--dur) var(--ease);
}
.gsd__link:hover { gap: 12px; }

.gsd__right {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 32px; background: var(--paper);
}
.gsd__right-eye {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px;
}
.gsd__right-eye::before { content: "// "; color: var(--accent); }
.gsd__years {
  font-family: var(--font-body); font-weight: 700;
  font-size: 64px; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink); margin-bottom: 8px;
}
.gsd__years-suffix {
  font-family: var(--font-body); font-size: 15px; color: var(--muted);
  margin-bottom: 28px;
}
.gsd__co {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.gsd__co li {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--rule);
  font-family: var(--font-body); font-size: 15px;
}
.gsd__co li:last-child { border-bottom: 1px solid var(--rule); }
.gsd__co .co-name { font-weight: 600; color: var(--ink); }
.gsd__co .co-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ─── Final CTA / Contact ─── */
.cta {
  padding: clamp(80px, 14vw, 140px) 0;
}
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
@media (max-width: 820px) { .cta__inner { grid-template-columns: 1fr; gap: 40px; } }
.cta__eye { margin-bottom: 20px; }
.cta__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(36px, 6vw, 72px); letter-spacing: -0.03em;
  line-height: 1; color: var(--ink); margin-bottom: 20px;
}
.cta__title .accent { color: var(--accent); }
.cta__body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink); opacity: 0.78; max-width: 44ch;
}
.cta__meta {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--muted);
}
.cta__meta a { color: var(--ink); border-bottom: 1px dashed var(--rule-strong); padding-bottom: 1px; }
.cta__meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Form ─── */
.form {
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .form__row { grid-template-columns: 1fr; } }
/* hCaptcha's iframe is a fixed 303×78; shrink padding and scale it so it fits small phones */
.form { min-width: 0; }
@media (max-width: 420px) {
  .form { padding: 20px; }
  .h-captcha { height: 62px; overflow: hidden; }
  .h-captcha iframe { transform: scale(0.8); transform-origin: left top; }
}
@media (max-width: 340px) {
  .h-captcha { height: 55px; }
  .h-captcha iframe { transform: scale(0.7); }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea, .field select {
  appearance: none;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.form__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.form__hint {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--muted);
}
.form.is-loading { pointer-events: none; opacity: 0.6; transition: opacity 0.2s var(--ease); }
.form__error {
  background: rgba(217, 117, 96, 0.08);
  border: 1px solid rgba(217, 117, 96, 0.35);
  color: #C8553D;
  padding: 10px 14px; border-radius: 4px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
}
[data-theme="dark"] .form__error { color: #E89280; background: rgba(217, 117, 96, 0.12); }

/* ─── Success state ─── */
.form__success {
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.form__success-tick {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(109, 182, 136, 0.14);
  color: #6DB688;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.form__success-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
}
.form__success-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink); opacity: 0.78; margin: 0;
}
.form__success-body a { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 1px; }
.form__success-body a:hover { border-bottom-style: solid; }

/* ─── Footer (matches body bg — closure via heavier top border) ─── */
footer {
  background: var(--inv-bg); color: var(--inv-text);
  padding: 64px 0 32px;
  border-top: 1px solid var(--rule-strong);
  position: relative;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  overflow: hidden;
}
footer > .wrap { position: relative; z-index: 1; }
.ft { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 820px) { .ft { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .ft { grid-template-columns: 1fr; } }
.ft__brand {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 32px; letter-spacing: -0.04em; line-height: 1;
  display: inline-flex; align-items: baseline; margin-bottom: 20px;
  color: var(--inv-text);
}
.ft__brand .slash { color: var(--inv-accent); }
.ft__about {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--inv-text-muted);
  max-width: 28ch;
}
.ft__addr {
  margin-top: 16px;
  font-family: var(--font-body); font-style: normal;
  font-size: 13px; line-height: 1.55;
  color: var(--inv-text-muted);
  max-width: 36ch;
}
.ft__col h2 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--inv-text-muted); margin-bottom: 14px;
  font-weight: 500;
}
.ft__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ft__col a {
  font-family: var(--font-body); font-size: 14px;
  color: var(--inv-text); opacity: 0.85;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ft__col a:hover { color: var(--inv-accent); opacity: 1; }
.ft__bot {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--inv-rule);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--inv-text-muted);
}
.ft__bot .accent { color: var(--inv-accent); }

.ft__cookies {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  transition: color var(--dur) var(--ease);
}
.ft__cookies:hover { color: var(--inv-accent); }
.ft__cookies:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 2px; opacity: 1; }

/* ─── Cookie consent banner ─── */
.cookie {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 420px;
  padding: 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong); border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; gap: 16px;
}
.cookie__text { font-size: 14px; color: var(--muted); }
.cookie__text strong { color: var(--ink); font-weight: 500; }
.cookie__status {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.cookie__actions { display: flex; gap: 8px; justify-content: flex-end; }
.cookie .btn { padding: 10px 18px; font-size: 14px; }

/* `hidden` must win over author rules like .form__success { display: flex } */
[hidden] { display: none !important; }

/* ─── Reveal (no fade — transform + clip only) ─── */
.reveal { opacity: 1; filter: none; }

/* Section titles do a precise clip-reveal from the left */
.sec-title {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s var(--ease) 0.15s;
}
.reveal.is-in .sec-title,
.reveal.sec-head.is-in .sec-title { clip-path: inset(0 0 0 0); }

/* Staggered children: slide up only, no opacity — fast and decisive */
.reveal-stagger > * {
  opacity: 1; filter: none;
  transform: translateY(20px);
  transition: transform 0.6s var(--ease);
}
.reveal-stagger.is-in > * { transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 110ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 330ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 440ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 550ms; }

/* Hero entrance — content cascades in around the typewriter */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__eye  { animation: heroRise 0.6s var(--ease) both; }
.hero__sub  { animation: heroRise 0.7s var(--ease) 0.35s both; }
.hero__cta  { animation: heroRise 0.7s var(--ease) 0.55s both; }
.hero__meta { animation: heroRise 0.7s var(--ease) 0.85s both; }

/* H1 — solid accent bar sweeps in behind "AI products" after the typewriter passes it */
.hero__h1 .hl {
  position: relative;
  display: inline-block;
  line-height: inherit;
  isolation: isolate; /* own stacking context — keeps the bar's paint order deterministic */
}
.hero__h1 .hl::after {
  content: "";
  position: absolute;
  left: -0.03em; right: -0.03em;
  bottom: 0.01em;
  height: 0.09em;
  background: var(--accent);
  z-index: -1; /* behind the glyphs so descenders sit on top */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease);
}
.hero__h1 .hl.hl-drawn::after { transform: scaleX(1); }

/* H1 — terminal-style typewriter on load. main.js lays out every character hidden
   and reveals them in order, so wrapping never changes and nothing shifts. The caret
   is an absolutely positioned bar after the last revealed character. */
.hero__h1 .hero__h1-body { display: inline; }
.hero__h1 .tw-c { visibility: hidden; }
.hero__h1 .tw-c.tw-on { visibility: visible; }
.hero__h1 .tw-caret { position: relative; }
.hero__h1 .tw-caret::after {
  content: "";
  position: absolute;
  top: 0.06em; bottom: 0.02em; right: -0.1em;
  width: 0.08em;
  background: var(--accent);
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* ─── Scroll progress bar ─── */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
  background: var(--accent); z-index: 100;
  pointer-events: none;
}

/* ─── Active nav section ─── */
.nav__links a[data-section] {
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__links a[data-section].is-active { color: var(--ink); }
.nav__links a[data-section]::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -22px;
  height: 2px; background: var(--accent);
  transition: right 0.4s var(--ease);
}
.nav__links a[data-section].is-active::after { right: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal, .reveal-stagger > *, .hero__inner > *, .hero__h1 .word { opacity: 1; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}

/* ─── Theme toggle ─── */
.theme-toggle {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 4px; cursor: pointer; color: var(--ink);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
  padding: 0;
}
.theme-toggle:hover { border-color: var(--ink); background: var(--paper-2); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ─── Blueprint crosshairs — "+" marks twinkle at major grid intersections ─── */
.bg-marks {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  font-family: var(--font-mono);
}
[data-theme="light"] .bg-marks { opacity: 0.55; }
.bg-marks span {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 13px; line-height: 1;
  color: var(--accent);
  opacity: 0;
  animation: markBlink 5s ease-in-out infinite;
}
@keyframes markBlink { 0%, 100% { opacity: 0; } 50% { opacity: 0.6; } }

/* ─── Capabilities ticker ─── */
.ticker {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: tickerScroll 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__half { display: flex; flex-shrink: 0; }
.ticker__half span {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; white-space: nowrap;
}
.ticker__half i { font-style: normal; color: var(--accent); margin: 0 28px; opacity: 0.7; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ─── Theme toggle — circular reveal via View Transitions API ─── */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html.vt-active * { transition: none !important; }

/* ─── Skip link ─── */
.skip {
  position: absolute; top: -40px; left: 8px;
  padding: 8px 14px; background: var(--accent); color: var(--paper);
  font-family: var(--font-body); font-size: 14px;
  border-radius: 4px; z-index: 100;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: 8px; }

/* Honeypot field for bots; kept off-screen without an inline style attribute */
.form__botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ─── Legal pages (privacy notice) ─── */
.cookie__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal__wrap { max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
.legal__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 18px 0 10px;
}
.legal__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 40px; }
.legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 48px 0 14px; }
.legal h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
.legal p, .legal li, .legal__address { font-size: 16px; line-height: 1.65; color: var(--ink); opacity: 0.85; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal__address { font-style: normal; margin: 0 0 14px; }
.legal a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.legal a:not(.btn):hover { color: var(--accent); text-decoration-color: var(--accent); }
.legal code { font-family: var(--font-mono); font-size: 0.9em; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.form__legal { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.form__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }