/* ============================================================
   ZELYQOR LABS — Design System v2
   Vision Deserves Infrastructure.
   Quiet power. Dark infrastructure. Precision. Restraint.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');

:root {
  /* Surfaces */
  --void:     #050505;
  --carbon:   #0F1116;
  --graphite: #17191F;

  /* Legacy surface aliases (subpages) */
  --bg: var(--void);
  --s1: #0A0B0E;
  --s2: var(--carbon);
  --s3: var(--graphite);
  --s4: #1E2028;

  /* Type */
  --white:  #F7F7F8;
  --silver: #C4C7CE;
  --grey:   #888B95;
  --text:   var(--white);
  --muted:  #9DA0A8;
  --faint:  var(--grey);

  /* Signal */
  --violet:      #7A5CFF;
  --violet-deep: #4A35B8;
  --violet-dim:  rgba(122,92,255,.10);
  /* Legacy accent aliases — everything maps to the one signal color */
  --blue:     var(--violet);
  --blue-lt:  #9B85FF;
  --blue-dim: var(--violet-dim);
  --violet-lt: #9B85FF;
  --cyan:     #9B85FF;
  --cyan-dim: var(--violet-dim);
  --glow-b: none;
  --glow-v: none;

  /* Lines */
  --border:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.08);
  --border-b: rgba(122,92,255,.35);
  --border-v: rgba(122,92,255,.35);

  /* Geometry — square by default */
  --r:   0px;
  --rlg: 2px;

  /* Layout */
  --max: 1200px;
  --ease: .35s cubic-bezier(.4,0,.2,1);

  /* Type system */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--void);
  color:var(--silver);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--ease), border-color var(--ease), background var(--ease); }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--white); }

::selection { background:var(--violet); color:#fff; }
:focus-visible { outline:1px solid var(--violet); outline-offset:3px; }

/* ── Layout ── */
.wrap { max-width:var(--max); margin:0 auto; padding:0 48px; }
.sec  { padding:140px 0; position:relative; }
.sec + .sec, .sec-line { border-top:1px solid var(--line); }

/* Optional faint grid texture — much quieter than before */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s cubic-bezier(.25,.1,.25,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; }
.reveal.d2 { transition-delay:.18s; }
.reveal.d3 { transition-delay:.28s; }
.reveal.d4 { transition-delay:.38s; }

/* ── Typography ── */
.eyebrow {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--grey); margin-bottom:32px;
}
.eyebrow::before { content:''; width:24px; height:1px; background:var(--violet); margin-right:14px; }
.sec-h {
  font-size:clamp(32px,4.2vw,64px); font-weight:300;
  letter-spacing:-.01em; line-height:1.08; color:var(--white);
}
.sec-h strong, .sec-h b { font-weight:500; }
.sec-sub {
  font-size:16px; color:var(--grey); line-height:1.85; max-width:560px; margin-top:24px; font-weight:400;
}
.gradient-text { color:var(--white); } /* gradients retired — signal via violet elsewhere */

/* Statement band — thin rules above/below, used for brand lines */
.statement {
  font-size:clamp(15px,1.8vw,22px); font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--white); line-height:1.7;
  padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.statement .sig { color:var(--violet); }

/* ── Buttons — quiet, bordered, violet signal on hover ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  padding:16px 32px; border:1px solid rgba(255,255,255,.22); border-radius:var(--r);
  color:var(--white); background:transparent;
  transition:border-color var(--ease), color var(--ease), background var(--ease);
  cursor:pointer; white-space:nowrap; position:relative;
}
.btn::before {
  content:''; position:absolute; bottom:-1px; left:0; height:1px; width:0;
  background:var(--violet); transition:width .45s cubic-bezier(.4,0,.2,1);
}
.btn:hover::before { width:100%; }
.btn:hover { border-color:rgba(255,255,255,.45); color:var(--white); }
.btn-primary { background:var(--white); color:var(--void); border-color:var(--white); }
.btn-primary:hover { background:var(--silver); border-color:var(--silver); color:var(--void); }
.btn-secondary { background:transparent; color:var(--silver); }
.btn-secondary:hover { color:var(--white); }
.btn-lg { padding:18px 40px; }

/* ── Nav — minimal, thin ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background var(--ease), border-color var(--ease), backdrop-filter var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background:rgba(5,5,5,.86); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-row { display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-logo { display:flex; align-items:baseline; gap:8px; line-height:1; }
.nav-logo-z {
  font-weight:500; font-size:14px; letter-spacing:.32em; color:var(--white);
}
.nav-logo-sub { font-size:9px; font-weight:400; letter-spacing:.38em; color:var(--grey); }
.nav-links { display:flex; align-items:center; gap:40px; }
.nav-links a {
  font-size:11px; font-weight:400; color:var(--grey); letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
  background:var(--violet); transition:width .35s ease;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta {
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--white); border:1px solid rgba(255,255,255,.25);
  padding:11px 22px; transition:var(--ease); position:relative;
}
.nav-cta::before {
  content:''; position:absolute; bottom:-1px; left:0; height:1px; width:0;
  background:var(--violet); transition:width .45s ease;
}
.nav-cta:hover { border-color:rgba(255,255,255,.5); color:var(--white); }
.nav-cta:hover::before { width:100%; }
.nav-mob { display:none; flex-direction:column; gap:6px; cursor:pointer; padding:6px; }
.nav-mob span { width:24px; height:1px; background:var(--white); }

/* ── Mobile menu ── */
#mob-menu {
  position:fixed; inset:0; z-index:200; background:rgba(5,5,5,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  opacity:0; pointer-events:none; transition:opacity var(--ease);
}
#mob-menu.open { opacity:1; pointer-events:all; }
#mob-menu a {
  font-size:15px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--silver);
}
#mob-menu a:hover { color:var(--white); }
#mob-menu .mob-cta-link { color:var(--violet); }
.mob-close { position:absolute; top:26px; right:32px; font-size:24px; color:var(--grey); cursor:pointer; }

/* ── Mobile sticky CTA ── */
#mob-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:90; padding:14px 20px;
  background:rgba(5,5,5,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(120%); transition:transform var(--ease); display:none;
}
#mob-cta.show { transform:none; }
#mob-cta.hide-cta { transform:translateY(120%) !important; }

/* ── Skip link ── */
.skip-link {
  position:absolute; top:-48px; left:16px; z-index:1000;
  background:var(--violet); color:#fff; padding:10px 18px;
  font-size:12px; font-weight:500; letter-spacing:.1em; transition:top .2s ease;
}
.skip-link:focus { top:16px; }

/* ── Footer ── */
footer { border-top:1px solid var(--line); padding:88px 0 48px; background:var(--void); }
.footer-top { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.footer-logo-row { display:flex; align-items:baseline; gap:8px; margin-bottom:20px; }
.footer-logo-z { font-weight:500; font-size:14px; letter-spacing:.32em; color:var(--white); }
.footer-logo-sub { font-size:9px; font-weight:400; letter-spacing:.38em; color:var(--grey); }
.footer-tagline { font-size:13px; color:var(--grey); line-height:1.8; max-width:300px; margin-bottom:20px; }
.footer-social { display:flex; flex-direction:column; gap:8px; }
.footer-social a { font-size:12px; color:var(--grey); letter-spacing:.04em; }
.footer-social a:hover { color:var(--white); }
.footer-col-title { font-size:9px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--grey); margin-bottom:20px; }
.footer-col-links { display:flex; flex-direction:column; gap:12px; }
.footer-col-links a { font-size:13px; color:var(--muted); }
.footer-col-links a:hover { color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:32px; flex-wrap:wrap; }
.footer-copy { font-size:11px; color:var(--grey); letter-spacing:.04em; }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { font-size:11px; color:var(--grey); letter-spacing:.04em; }
.footer-bottom-links a:hover { color:var(--silver); }

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ── Hero — cinematic, single statement ── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:160px 0 120px; position:relative; overflow:hidden;
  background:var(--void);
}
#hero-wave { position:absolute; inset:auto 0 0 0; width:100%; height:58%; pointer-events:none; opacity:.9; }
.hero-content { position:relative; z-index:2; max-width:900px; }
.hero-label {
  font-size:10px; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--grey); margin-bottom:44px; display:flex; align-items:center; gap:16px;
}
.hero-label::before { content:''; width:32px; height:1px; background:var(--violet); }
.hero-h {
  font-size:clamp(52px,8.5vw,124px); font-weight:300;
  line-height:1.02; letter-spacing:-.015em; color:var(--white); margin-bottom:44px;
}
.hero-h .em { font-weight:500; }
.hero-sub-large { font-size:clamp(17px,1.6vw,21px); color:var(--silver); line-height:1.6; font-weight:400; margin-bottom:16px; max-width:560px; }
.hero-sub { font-size:14px; color:var(--grey); line-height:1.85; max-width:480px; margin-bottom:56px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.hero-coord {
  position:absolute; bottom:40px; right:48px; z-index:2;
  font-size:9px; letter-spacing:.3em; color:var(--grey); text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.hero-coord::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--violet); }

/* ── Thesis / infrastructure gap ── */
.thesis-h {
  font-size:clamp(30px,4vw,58px); font-weight:300; line-height:1.12;
  letter-spacing:-.01em; color:var(--white); margin-bottom:72px; max-width:900px;
}
.thesis-h .dim { color:var(--grey); }
.thesis-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px 96px; align-items:start; }
.thesis-fragments { display:flex; flex-direction:column; }
.thesis-fragment {
  display:flex; align-items:center; gap:20px; padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:14px; color:var(--grey); letter-spacing:.02em;
}
.thesis-fragment:first-child { border-top:1px solid var(--line); }
.thesis-fragment .idx { font-size:10px; letter-spacing:.2em; color:var(--grey); opacity:.6; min-width:28px; }
.thesis-fragment.converge { color:var(--white); border-bottom-color:rgba(122,92,255,.4); }
.thesis-fragment.converge .idx { color:var(--violet); opacity:1; }
.thesis-copy p { font-size:15px; color:var(--muted); line-height:1.95; }
.thesis-copy p + p { margin-top:20px; }
.thesis-close {
  margin-top:96px; font-size:clamp(16px,2.2vw,26px); font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--white); text-align:center;
}
.thesis-close .sig { color:var(--violet); }

/* ── Build index (What We Build) ── */
.build-index { border-top:1px solid var(--line); margin-top:80px; }
.build-row {
  display:grid; grid-template-columns:120px 1fr 1.2fr 48px; gap:40px; align-items:center;
  padding:44px 0; border-bottom:1px solid var(--line);
  position:relative; transition:var(--ease);
}
.build-row::after {
  content:''; position:absolute; bottom:-1px; left:0; height:1px; width:0;
  background:var(--violet); transition:width .6s cubic-bezier(.4,0,.2,1);
}
.build-row:hover::after { width:100%; }
.build-num {
  font-size:clamp(28px,3vw,44px); font-weight:300; color:var(--grey);
  letter-spacing:-.02em; transition:color var(--ease);
}
.build-row:hover .build-num { color:var(--violet); }
.build-name {
  font-size:clamp(17px,1.8vw,24px); font-weight:400; letter-spacing:.08em;
  text-transform:uppercase; color:var(--white);
}
.build-desc { font-size:14px; color:var(--grey); line-height:1.8; max-width:480px; }
.build-arrow { font-size:16px; color:var(--grey); transition:var(--ease); justify-self:end; }
.build-row:hover .build-arrow { color:var(--white); transform:translateX(4px); }

/* ── Selected builds — editorial case studies ── */
.case { display:grid; grid-template-columns:1.15fr 1fr; gap:72px; align-items:center; padding:88px 0; border-bottom:1px solid var(--line); }
.case:last-of-type { border-bottom:none; }
.case.flip .case-img { order:2; }
.case-img { position:relative; overflow:hidden; background:var(--carbon); }
.case-img img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; filter:saturate(.85); transition:transform 1.2s cubic-bezier(.25,.1,.25,1), filter .8s ease; }
.case:hover .case-img img { transform:scale(1.03); filter:saturate(1); }
.case-num { font-size:11px; letter-spacing:.3em; color:var(--grey); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.case-num::after { content:''; width:24px; height:1px; background:var(--violet); }
.case-name { font-size:clamp(24px,2.6vw,38px); font-weight:400; letter-spacing:.01em; color:var(--white); margin-bottom:10px; }
.case-type { font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--violet); margin-bottom:24px; font-weight:500; }
.case-desc { font-size:14.5px; color:var(--muted); line-height:1.9; margin-bottom:28px; }
.case-link {
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--silver);
  padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.2); transition:var(--ease);
}
.case-link:hover { color:var(--white); border-bottom-color:var(--violet); }
.case-full { position:relative; padding:0; border-bottom:none; display:block; }
.case-full .case-img img { aspect-ratio:21/8; }
.case-full-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:56px; background:linear-gradient(to top, rgba(5,5,5,.88) 0%, rgba(5,5,5,.2) 55%, transparent 100%);
}

/* ── Orbital process ── */
.process-split { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; margin-top:72px; }
.orbital { position:relative; aspect-ratio:1; max-width:460px; margin:0 auto; width:100%; }
.orbital svg { width:100%; height:100%; overflow:visible; }
.orbital .ring { fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; }
.orbital .z-core {
  font-family:var(--font-display); font-weight:300; font-size:64px; fill:var(--silver); letter-spacing:0;
}
.orbital .node { fill:#33343c; transition:fill .5s ease, r .5s ease; }
.orbital .node.on { fill:var(--violet); }
.orbital .node-label {
  font-family:var(--font-display); font-size:9.5px; letter-spacing:.24em; fill:var(--grey);
  text-transform:uppercase; transition:fill .5s ease;
}
.orbital .node-label.on { fill:var(--white); }
.orbital-sweep { transform-box:view-box; transform-origin:200px 200px; }
.orbital .node.pulse { animation:nodePulse 1s ease-out; }
@keyframes nodePulse {
  0%   { fill:var(--violet); r:4; }
  25%  { fill:#B7A6FF; r:6.5; }
  100% { r:4; }
}
.orbital .pulse-ring { fill:none; stroke:var(--violet); stroke-width:1; opacity:0; pointer-events:none; }
.orbital .pulse-ring.go { animation:ringPulse 1.1s ease-out; }
@keyframes ringPulse {
  0%   { opacity:.8; r:5; }
  100% { opacity:0; r:22; }
}
.process-steps { display:flex; flex-direction:column; }
.process-step { padding:36px 0; border-bottom:1px solid var(--line); transition:var(--ease); }
.process-step:first-child { border-top:1px solid var(--line); }
.step-head { display:flex; align-items:baseline; gap:24px; margin-bottom:10px; }
.step-num { font-size:12px; letter-spacing:.2em; color:var(--grey); transition:color .5s ease; }
.step-name { font-size:17px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); transition:color .5s ease; }
.process-step.on .step-num { color:var(--violet); }
.process-step.on .step-name { color:var(--white); }
.step-desc { font-size:14px; color:var(--grey); line-height:1.8; padding-left:44px; max-width:440px; }

/* ── Browser-chrome frame for project screenshots ── */
.case-img[data-url], .work-card-img[data-url] {
  border:1px solid var(--line);
  padding:40px 1px 1px;
  background:linear-gradient(to bottom, var(--graphite) 0, var(--graphite) 39px, rgba(255,255,255,.08) 39px, rgba(255,255,255,.08) 40px, var(--carbon) 40px);
  position:relative; box-sizing:border-box;
}
.case-img[data-url]::before, .work-card-img[data-url]::before {
  content:''; position:absolute; top:16px; left:18px; width:8px; height:8px; border-radius:50%;
  background:#2E3038; box-shadow:14px 0 0 #2E3038, 28px 0 0 #2E3038; z-index:2;
}
.case-img[data-url]::after, .work-card-img[data-url]::after {
  content:attr(data-url); position:absolute; top:13px; left:64px;
  font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:.1em;
  color:var(--grey); z-index:2; white-space:nowrap; overflow:hidden; max-width:calc(100% - 80px);
}

/* ── Brand visuals — full-bleed section imagery ── */
.section-visual { margin-top:88px; position:relative; }
.section-visual img { width:100%; display:block; }
.section-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, var(--void), transparent 18%, transparent 82%, var(--void)); pointer-events:none; }

/* ── AI Philosophy — full width statement ── */
.philosophy { position:relative; overflow:hidden; background:var(--void); }
.phil-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right bottom; opacity:.75; pointer-events:none; }
.philosophy::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, rgba(5,5,5,.92) 30%, rgba(5,5,5,.4) 65%, transparent); pointer-events:none; }
#phil-wave { position:absolute; inset:auto 0 0 0; width:100%; height:46%; pointer-events:none; opacity:.55; }
.phil-inner { position:relative; z-index:2; max-width:860px; }
.phil-h {
  font-size:clamp(34px,5vw,72px); font-weight:300; line-height:1.08;
  letter-spacing:-.01em; color:var(--white); margin-bottom:56px;
}
.phil-h .dim { color:var(--grey); }
.phil-copy { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.phil-copy p { font-size:14.5px; color:var(--muted); line-height:1.95; }
.phil-copy p + p { margin-top:18px; }

/* ── Operating principles ── */
.principles { border-top:1px solid var(--line); margin-top:80px; }
.principle-row {
  display:grid; grid-template-columns:160px 1fr; gap:48px; align-items:baseline;
  padding:48px 0; border-bottom:1px solid var(--line); transition:var(--ease);
  position:relative;
}
.principle-row::before {
  content:''; position:absolute; left:0; top:0; width:1px; height:0;
  background:var(--violet); transition:height .5s ease;
}
.principle-row:hover::before { height:100%; }
.principle-num { font-size:clamp(36px,4vw,56px); font-weight:300; color:#33343c; letter-spacing:-.02em; transition:color var(--ease); }
.principle-row:hover .principle-num { color:var(--grey); }
.principle-text { font-size:clamp(18px,2vw,28px); font-weight:300; letter-spacing:.06em; text-transform:uppercase; color:var(--white); }

/* ── Build notes index ── */
.bn-index { border-top:1px solid var(--line); margin-top:80px; }
.bn-row {
  display:grid; grid-template-columns:130px 130px 1fr 48px; gap:40px; align-items:center;
  padding:40px 0; border-bottom:1px solid var(--line); position:relative; transition:var(--ease);
}
.bn-row::after {
  content:''; position:absolute; bottom:-1px; left:0; height:1px; width:0;
  background:var(--violet); transition:width .6s cubic-bezier(.4,0,.2,1);
}
a.bn-row:hover::after { width:100%; }
.bn-id { font-size:12px; letter-spacing:.24em; color:var(--grey); }
.bn-topic { font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--violet); font-weight:500; }
.bn-title { font-size:clamp(15px,1.6vw,20px); font-weight:400; color:var(--silver); line-height:1.45; letter-spacing:.02em; transition:color var(--ease); }
a.bn-row:hover .bn-title { color:var(--white); }
.bn-status { font-size:9px; letter-spacing:.22em; color:var(--grey); text-transform:uppercase; justify-self:end; white-space:nowrap; }
.bn-arrow { font-size:15px; color:var(--grey); justify-self:end; transition:var(--ease); }
a.bn-row:hover .bn-arrow { color:var(--white); transform:translateX(4px); }

/* ── Final CTA ── */
.final-cta { position:relative; overflow:hidden; text-align:center; padding:200px 0; }
.final-cta-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.55; pointer-events:none; }
.final-cta::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 70% 80% at center, rgba(5,5,5,.55) 0%, rgba(5,5,5,.92) 100%);
  pointer-events:none;
}
.final-cta .wrap { position:relative; z-index:2; }
.cta-mark { width:88px; height:88px; border-radius:50%; margin:0 auto 44px; display:block; }
.final-h {
  font-size:clamp(36px,5.5vw,80px); font-weight:300; line-height:1.06;
  letter-spacing:-.01em; color:var(--white); margin:0 auto 32px; max-width:900px;
}
.final-h .em { font-weight:500; }
.final-sub { font-size:15px; color:var(--grey); line-height:1.85; max-width:460px; margin:0 auto 56px; }

/* ============================================================
   SUBPAGE COMPONENTS (restyled to system)
   ============================================================ */

/* ── Page hero ── */
.page-hero { padding:200px 0 96px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero-eyebrow {
  display:inline-flex; align-items:center; font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--grey); margin-bottom:36px;
}
.page-hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--violet); margin-right:14px; }
.page-hero h1 { font-size:clamp(40px,6vw,88px); font-weight:300; letter-spacing:-.015em; line-height:1.04; margin-bottom:28px; }
.page-hero h1 em { font-style:normal; font-weight:500; }
.page-hero p { font-size:16px; color:var(--muted); line-height:1.85; max-width:600px; }
.page-hero-meta { display:flex; gap:36px; flex-wrap:wrap; margin-top:44px; }
.page-hero-meta span { font-size:11px; color:var(--grey); letter-spacing:.06em; position:relative; padding-left:16px; }
.page-hero-meta span::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--violet); }

/* ── Work / case cards (Work page) ── */
.work-list { display:flex; flex-direction:column; margin-top:0; border-top:1px solid var(--line); }
.work-card {
  display:grid; grid-template-columns:460px 1fr; gap:0;
  border-bottom:1px solid var(--line); background:transparent; transition:background var(--ease);
}
.work-card:hover { background:rgba(255,255,255,.015); }
.work-card-img { overflow:hidden; background:var(--carbon); align-self:stretch; }
.work-card-img img { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.85); transition:transform 1s cubic-bezier(.25,.1,.25,1), filter .6s ease; }
.work-card:hover .work-card-img img { transform:scale(1.03); filter:saturate(1); }
.work-card-body { padding:56px 0 56px 64px; display:flex; flex-direction:column; justify-content:center; }
.work-card-type { font-size:9.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); margin-bottom:18px; }
.work-card-name { font-size:clamp(20px,2.2vw,30px); font-weight:400; letter-spacing:.01em; color:var(--white); margin-bottom:16px; }
.work-card-desc { font-size:14px; color:var(--muted); line-height:1.85; margin-bottom:22px; }
.work-card-outcome { font-size:12.5px; font-weight:500; color:var(--silver); margin-bottom:22px; display:flex; align-items:center; gap:10px; letter-spacing:.02em; }
.work-card-outcome::before { content:''; width:18px; height:1px; background:var(--violet); flex-shrink:0; }
.work-card-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.work-card-tag { font-size:9px; font-weight:500; color:var(--grey); border:1px solid var(--line); padding:5px 12px; letter-spacing:.14em; text-transform:uppercase; }
.work-card-featured { border-left:1px solid var(--violet); }
.work-card-featured .work-card-body { padding-left:63px; }

/* ── Demo credentials ── */
.demo-creds { background:var(--carbon); border:1px solid var(--line); border-left:1px solid var(--violet); padding:18px 22px; margin:0 0 24px; display:flex; flex-direction:column; gap:8px; }
.demo-creds-label { font-size:9px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--violet); margin-bottom:4px; }
.demo-creds-row { display:flex; align-items:center; gap:12px; }
.demo-creds-row span { font-size:10px; color:var(--grey); min-width:52px; letter-spacing:.1em; text-transform:uppercase; }
.demo-creds-row code { font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:12px; color:var(--silver); background:var(--graphite); border:1px solid var(--line); padding:3px 9px; }

/* ── Engagements (Services page) ── */
.engagement-list { display:flex; flex-direction:column; margin-top:0; border-top:1px solid var(--line); }
.engagement-row { display:grid; grid-template-columns:320px 1fr; background:transparent; border-bottom:1px solid var(--line); transition:background var(--ease); }
.engagement-row:hover { background:rgba(255,255,255,.015); }
.engagement-row.featured { border-left:1px solid var(--violet); }
.eng-left { padding:56px 48px 56px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.engagement-row.featured .eng-left { padding-left:32px; }
.eng-num { font-size:13px; letter-spacing:.24em; color:var(--grey); margin-bottom:16px; }
.eng-badge { display:inline-block; font-size:8.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--violet); border:1px solid var(--border-b); padding:5px 12px; margin-bottom:16px; width:fit-content; }
.eng-name { font-size:18px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--white); margin-bottom:14px; }
.eng-desc { font-size:13.5px; color:var(--grey); line-height:1.85; flex:1; margin-bottom:28px; }
.eng-from { font-size:10px; color:var(--grey); margin-bottom:4px; letter-spacing:.18em; text-transform:uppercase; }
.eng-price { font-size:30px; font-weight:300; color:var(--white); letter-spacing:-.01em; margin-bottom:24px; }
.eng-cta {
  display:block; text-align:center; padding:14px; font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; border:1px solid rgba(255,255,255,.22);
  color:var(--white); background:transparent; transition:var(--ease); position:relative;
}
.eng-cta::before { content:''; position:absolute; bottom:-1px; left:0; height:1px; width:0; background:var(--violet); transition:width .45s ease; }
.eng-cta:hover { border-color:rgba(255,255,255,.45); color:var(--white); }
.eng-cta:hover::before { width:100%; }
.eng-right { padding:56px 0 56px 56px; }
.eng-right h4 { font-size:9px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--grey); margin-bottom:26px; }
.eng-features { display:flex; flex-direction:column; gap:13px; }
.eng-feat { font-size:13.5px; color:var(--muted); padding-left:26px; position:relative; line-height:1.6; }
.eng-feat::before { content:''; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--violet); }
.eng-meta { display:flex; gap:40px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); margin-top:32px; }
.eng-meta-label { font-size:8.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); margin-bottom:5px; }
.eng-meta-val { font-size:13px; color:var(--silver); }

/* ── Stat rows (About + Services process) ── */
.stat-row { display:flex; gap:0; border:1px solid var(--line); margin-top:64px; }
.stat-item { flex:1; padding:40px 36px; border-right:1px solid var(--line); }
.stat-item:last-child { border-right:none; }
.stat-num { font-size:32px; font-weight:300; letter-spacing:-.01em; color:var(--white); }
.stat-label { font-size:12.5px; color:var(--grey); margin-top:10px; line-height:1.6; }

/* ── Values / principles cards (About page) ── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.value-card { background:transparent; padding:44px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background var(--ease); }
.value-card:hover { background:rgba(255,255,255,.015); }
.value-num { font-size:12px; letter-spacing:.24em; color:var(--violet); margin-bottom:18px; }
.value-t { font-size:13px; font-weight:500; letter-spacing:.14em; color:var(--white); margin-bottom:12px; text-transform:uppercase; }
.value-d { font-size:13px; color:var(--grey); line-height:1.8; }

/* ── Note cards (legacy grid — build-notes homepage teaser) ── */
.notes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.note-card { background:transparent; padding:40px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background var(--ease); position:relative; }
.note-card:hover { background:rgba(255,255,255,.015); }
.note-type { font-size:9px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--violet); margin-bottom:16px; }
.note-title { font-size:16px; font-weight:400; color:var(--white); line-height:1.45; letter-spacing:.01em; margin-bottom:12px; }
.note-desc { font-size:13px; color:var(--grey); line-height:1.8; }
.note-card-link { display:block; color:inherit; }
.note-read { margin-top:20px; font-size:10px; color:var(--silver); letter-spacing:.22em; font-weight:500; text-transform:uppercase; }
.note-card-link:hover .note-read { color:var(--white); }

/* ── CTA banner (subpages) ── */
.cta-banner { border:1px solid var(--line); padding:88px 80px; position:relative; overflow:hidden; text-align:center; }
.cta-banner::after {
  content:''; position:absolute; left:50%; bottom:-220px; transform:translateX(-50%);
  width:520px; height:320px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(122,92,255,.12), transparent 65%);
  pointer-events:none;
}
.cta-banner-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.cta-h { font-size:clamp(28px,4vw,56px); font-weight:300; line-height:1.1; letter-spacing:-.01em; margin-bottom:20px; }
.cta-sub { font-size:14.5px; color:var(--grey); line-height:1.85; max-width:480px; margin:0 auto 44px; }
.cta-actions { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* ── Intake form ── */
.field-input {
  width:100%; background:var(--carbon); border:1px solid var(--line);
  padding:14px 18px; font-size:14px; color:var(--white);
  font-family:var(--font-body); outline:none; transition:var(--ease); box-sizing:border-box;
}
.field-input:focus { border-color:var(--violet); }
.field-input::placeholder { color:#4A4C55; }
select.field-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23777A83' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 18px center; }
.field-label { font-size:9.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; display:block; }
.field-group { margin-bottom:24px; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; margin-top:56px; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); background:transparent; }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 0; background:none; border:none; color:var(--silver);
  font-size:15px; font-weight:400; font-family:var(--font-body); text-align:left;
  transition:color .2s; letter-spacing:.01em;
}
.faq-q:hover { color:var(--white); }
.faq-icon { font-size:18px; color:var(--violet); flex-shrink:0; transition:transform .3s; font-weight:300; }
.faq-a { display:none; padding:0 0 28px; font-size:14px; color:var(--grey); line-height:1.9; max-width:640px; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ── Note article ── */
.article-hero { padding:200px 0 72px; border-bottom:1px solid var(--line); }
.article-meta-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.article-tag { font-size:9.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); }
.article-date { font-size:11px; color:var(--grey); letter-spacing:.08em; }
.article-h1 { font-size:clamp(30px,4.4vw,58px); font-weight:300; letter-spacing:-.01em; line-height:1.12; margin-bottom:28px; }
.article-lede { font-size:17px; color:var(--muted); line-height:1.85; max-width:680px; }
.article-body { max-width:680px; margin:0 auto; padding:88px 0 48px; }
.article-body h2 { font-size:clamp(17px,1.9vw,23px); font-weight:500; letter-spacing:.1em; color:var(--white); margin:64px 0 24px; line-height:1.35; text-transform:uppercase; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--white); margin:40px 0 16px; text-transform:uppercase; }
.article-body p { font-size:15.5px; color:var(--muted); line-height:1.95; margin-bottom:22px; }
.article-body strong { color:var(--silver); font-weight:500; }
.article-body a { color:var(--white); border-bottom:1px solid rgba(122,92,255,.5); transition:border-color .2s; }
.article-body a:hover { border-bottom-color:var(--violet); }
.article-body ul, .article-body ol { margin:0 0 22px; display:flex; flex-direction:column; gap:11px; }
.article-body ul li { font-size:14.5px; color:var(--muted); line-height:1.75; padding-left:26px; position:relative; }
.article-body ul li::before { content:''; position:absolute; left:0; top:12px; width:12px; height:1px; background:var(--violet); }
.article-body ol { counter-reset:oli; }
.article-body ol li { font-size:14.5px; color:var(--muted); line-height:1.75; padding-left:34px; position:relative; counter-increment:oli; }
.article-body ol li::before { content:counter(oli,decimal-leading-zero); position:absolute; left:0; font-size:10px; letter-spacing:.1em; color:var(--violet); top:4px; }
.article-body code { font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:13px; color:var(--silver); background:var(--carbon); border:1px solid var(--line); padding:2px 7px; }
.article-body pre { background:var(--carbon); border:1px solid var(--line); padding:22px 26px; overflow-x:auto; margin-bottom:22px; }
.article-body pre code { background:none; border:none; padding:0; font-size:13px; line-height:1.7; color:var(--silver); }
.article-callout { background:var(--carbon); border:1px solid var(--line); border-left:1px solid var(--violet); padding:24px 28px; margin:32px 0; }
.article-callout p { margin:0; font-size:14px; }
.article-divider { width:48px; height:1px; background:var(--violet); margin:56px 0; border:none; }
.article-footer { max-width:680px; margin:0 auto; padding:44px 0 96px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.article-back { font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); }
.article-back:hover { color:var(--white); }

/* ── Scroll progress — hairline violet ── */
#dz-progress { position:fixed; top:0; left:0; height:1px; width:0%; background:var(--violet); z-index:300; pointer-events:none; }
#dz-noise { display:none; }

/* ── Filter buttons (Work page) ── */
.filter-bar { display:flex; gap:0; flex-wrap:wrap; margin-bottom:56px; border:1px solid var(--line); width:fit-content; }
.filter-btn {
  font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:12px 22px; border:none; border-right:1px solid var(--line);
  color:var(--grey); background:transparent; transition:var(--ease); cursor:pointer;
  font-family:var(--font-body);
}
.filter-btn:last-child { border-right:none; }
.filter-btn:hover { color:var(--white); }
.filter-btn.active { background:var(--white); color:var(--void); }
.project-hidden { display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .thesis-grid { grid-template-columns:1fr; gap:48px; }
  .process-split { grid-template-columns:1fr; gap:64px; }
  .orbital { max-width:380px; }
  .phil-copy { grid-template-columns:1fr; gap:24px; }
  .case { grid-template-columns:1fr; gap:40px; padding:64px 0; }
  .case.flip .case-img { order:0; }
  .work-card { grid-template-columns:1fr; }
  .work-card-img img { aspect-ratio:16/8; }
  .work-card-body { padding:44px 0; }
  .work-card-featured .work-card-body { padding-left:0; }
  .work-card-featured { border-left:none; }
  .engagement-row { grid-template-columns:1fr; }
  .eng-left { border-right:none; border-bottom:1px solid var(--line); padding:40px 0; }
  .engagement-row.featured .eng-left { padding-left:20px; }
  .eng-right { padding:40px 0; }
  .build-row { grid-template-columns:80px 1fr 40px; }
  .build-desc { display:none; }
  .bn-row { grid-template-columns:100px 1fr 40px; }
  .bn-topic { display:none; }
}
@media(max-width:900px){
  .wrap { padding:0 28px; }
  .sec { padding:96px 0; }
  .nav-links, .nav-cta { display:none; }
  .nav-mob { display:flex; }
  #mob-cta { display:block; }
  .hero { min-height:auto; padding:150px 0 96px; }
  .hero-coord { display:none; }
  .values-grid { grid-template-columns:1fr; }
  .notes-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .stat-row { flex-direction:column; }
  .stat-item { border-right:none; border-bottom:1px solid var(--line); }
  .stat-item:last-child { border-bottom:none; }
  .cta-banner { padding:64px 32px; }
  .final-cta { padding:120px 0; }
  .case-full-overlay { padding:28px; position:relative; background:none; }
  .case-full .case-img img { aspect-ratio:16/9; }
  .principle-row { grid-template-columns:80px 1fr; gap:24px; }
}
@media(max-width:640px){
  .wrap { padding:0 20px; }
  .hero-h { font-size:clamp(30px,9.4vw,44px); }
  .page-hero h1 { font-size:clamp(30px,8.6vw,44px); }
  .final-h { font-size:clamp(28px,8vw,40px); }
  .phil-h, .thesis-h { font-size:clamp(26px,7.6vw,36px); }
  .footer-top { grid-template-columns:1fr; }
  .eng-meta { flex-direction:column; gap:18px; }
  .build-row { grid-template-columns:56px 1fr 32px; gap:20px; padding:32px 0; }
  .bn-row { grid-template-columns:1fr 32px; gap:16px; }
  .bn-id { display:none; }
  .thesis-fragment { gap:14px; }
}

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