/* ============================================================
   SUPALAB : Design System
   Built from the Supalab Brand Guidelines 2026
   Typefaces: Space Grotesk (human-facing), JetBrains Mono (system labels/data)
   ============================================================ */

/* ---------- Self-hosted fonts (Space Grotesk, JetBrains Mono) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-700-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-400-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-600-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700-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 {
  /* Core palette */
  --bg:            #0A0A12;   /* Void Black  : foundation */
  --bg-2:          #12121C;   /* raised dark surface */
  --bone:          #FAFAF8;   /* Bone White  : clarity */
  --surface:       #F4F3F0;   /* light card surface */
  --border:        #E5E4E0;   /* light border */
  --border-dark:   rgba(255,255,255,.10);

  /* Purple system */
  --purple:        #7C3AED;   /* Deep Purple : signature */
  --purple-light:  #EDE9FE;
  --purple-dark:   #4C1D95;
  --electric:      #A78BFA;   /* Electric Violet : accent */
  --violet-200:    #C4B5FD;

  /* Neutrals / text */
  --ink:           #0A0A12;
  --muted:         #71717A;
  --muted-light:   #A1A1AA;

  /* Accents (data, status, differentiation) */
  --coral:         #F97066;
  --gold:          #FBBF24;
  --teal:          #2DD4BF;

  /* System */
  --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--bone);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--electric); outline-offset:3px; border-radius:4px; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section { padding-block:clamp(64px,9vw,120px); position:relative; }
.section--bone   { background:var(--bone);   color:var(--ink); }
.section--dark   { background:var(--bg);     color:var(--bone); }
.section--purple { background:var(--purple); color:#fff; }
.section--raised { background:var(--bg-2);   color:var(--bone); }

/* ---------- Type ---------- */
h1,h2,h3 { font-weight:700; letter-spacing:-.02em; line-height:1.04; }
.display { font-size:clamp(48px,8.5vw,104px); letter-spacing:-.035em; line-height:.94; }
h1 { font-size:clamp(40px,6vw,76px); }
h2 { font-size:clamp(32px,4.6vw,54px); }
h3 { font-size:clamp(20px,2.4vw,26px); letter-spacing:-.01em; }
.lead { font-size:clamp(18px,2.1vw,22px); line-height:1.55; color:var(--muted); max-width:60ch; }
.section--dark .lead, .section--purple .lead, .section--raised .lead { color:rgba(255,255,255,.62); }
p { font-size:16px; }

.eyebrow {
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--purple);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before { content:""; width:22px; height:1px; background:currentColor; opacity:.6; }
.section--dark .eyebrow, .section--raised .eyebrow { color:var(--electric); }
.section--purple .eyebrow { color:#fff; }

.text-accent { color:var(--purple); }
.section--dark .text-accent, .section--raised .text-accent { color:var(--electric); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:100px; border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  will-change:transform;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--purple); color:#fff; }
.btn--primary:hover { background:#6D28D9; }
.btn--ghost { background:transparent; border-color:rgba(255,255,255,.22); color:#fff; }
.btn--ghost:hover { border-color:#fff; }
.section--bone .btn--ghost { border-color:var(--border); color:var(--ink); }
.section--bone .btn--ghost:hover { border-color:var(--ink); }
.btn--light { background:var(--bone); color:var(--ink); }
.btn--light:hover { background:#fff; }
.btn .arrow { transition:transform .18s var(--ease); }
.btn:hover .arrow { transform:translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,18,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-dark);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .wordmark { font-weight:700; letter-spacing:.14em; font-size:16px; color:#fff; }
.nav { display:flex; align-items:center; gap:34px; }
.nav a { font-size:15px; color:rgba(255,255,255,.72); transition:color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color:#fff; }
.nav a[aria-current="page"] { position:relative; }
.nav a[aria-current="page"]::after {
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px;
  background:var(--purple); border-radius:2px;
}
.nav > .btn { display:none; } /* in-nav CTA is for the mobile menu only */
.header-cta { display:flex; align-items:center; gap:18px; }
.header-cta .btn { padding:10px 18px; font-size:14px; min-width:156px; justify-content:center; }
.nav-toggle { display:none; background:none; border:0; width:40px; height:40px; position:relative; }
.nav-toggle span { position:absolute; left:9px; right:9px; height:2px; background:#fff; transition:.25s var(--ease); }
.nav-toggle span:nth-child(1){ top:14px; } .nav-toggle span:nth-child(2){ top:20px; } .nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle { display:block; }
  .header-cta > .btn { display:none; }
  .nav {
    position:fixed; inset:70px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(10,10,18,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-dark);
    transform:translateY(-120%); transition:transform .3s var(--ease); padding:8px 0 16px;
  }
  .nav[data-open="true"] { transform:translateY(0); }
  .nav a { padding:16px var(--pad); font-size:17px; border-bottom:1px solid var(--border-dark); }
  .nav a[aria-current="page"]::after { display:none; }
  .nav > .btn { display:inline-flex; margin:14px var(--pad) 0; justify-content:center; }
}

/* ---------- Prism mark ---------- */
.prism { flex:0 0 auto; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--bg); }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero::after { /* vignette so text stays legible over the pulse grid */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 15% 20%, transparent 30%, rgba(10,10,18,.55) 100%);
}
.hero .wrap { position:relative; z-index:2; }
.hero--home .wrap { min-height:clamp(560px,88vh,860px); display:flex; flex-direction:column; justify-content:center; padding-block:120px; }
.hero--page .wrap { padding-block:clamp(84px,14vh,150px); }
.hero__glow {
  position:absolute; z-index:0; width:820px; height:820px; top:-260px; right:-180px;
  background:radial-gradient(circle, rgba(124,58,237,.20) 0%, transparent 68%); pointer-events:none;
}
.hero__glow.two { width:620px; height:620px; top:auto; bottom:-320px; left:-160px; right:auto;
  background:radial-gradient(circle, rgba(167,139,250,.10) 0%, transparent 70%); }
.hero .lead { color:rgba(255,255,255,.66); margin-top:26px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* ---------- Grids ---------- */
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.section-head { max-width:760px; margin-bottom:clamp(40px,5vw,60px); }
.section-head h2 { margin-bottom:18px; }

/* ---------- Cards ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(24px,3vw,34px);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.section--dark .card, .section--raised .card {
  background:rgba(255,255,255,.035); border-color:var(--border-dark);
}
.card h3 { margin-bottom:10px; }
.card p { color:var(--muted); font-size:15.5px; }
.section--dark .card p, .section--raised .card p { color:rgba(255,255,255,.6); }
.card--link:hover { transform:translateY(-3px); border-color:var(--purple); box-shadow:0 20px 50px -24px rgba(124,58,237,.5); }

.tag {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; background:var(--purple-light); color:var(--purple-dark);
}
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag--active   { background:rgba(45,212,191,.16); color:#0d9488; }
.tag--building { background:rgba(251,191,36,.18); color:#92400e; }
.tag--explore  { background:rgba(167,139,250,.18); color:var(--purple-dark); }
.section--dark .tag--active   { background:rgba(45,212,191,.15); color:var(--teal); }
.section--dark .tag--building { background:rgba(251,191,36,.15); color:var(--gold); }
.section--dark .tag--explore  { background:rgba(167,139,250,.16); color:var(--electric); }

/* ---------- "Two doors" cards (home) ---------- */
.door {
  display:flex; flex-direction:column; gap:16px; min-height:340px;
  padding:clamp(28px,3.4vw,42px); border-radius:var(--radius);
  background:var(--bg); color:var(--bone); border:1px solid var(--border-dark);
  position:relative; overflow:hidden; transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.door:hover { transform:translateY(-4px); border-color:var(--purple); }
.door .door__glow { position:absolute; width:360px; height:360px; top:-160px; right:-120px;
  background:radial-gradient(circle, rgba(124,58,237,.22) 0%, transparent 70%); pointer-events:none; }
.door .num { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--electric); }
.door h3 { font-size:clamp(24px,3vw,32px); margin-top:auto; }
.door p { color:rgba(255,255,255,.62); position:relative; z-index:1; }
.door .go { margin-top:6px; color:var(--electric); font-weight:600; display:inline-flex; gap:8px; align-items:center; }
.door .go .arrow { transition:transform .18s var(--ease); }
.door:hover .go .arrow { transform:translateX(4px); }

/* ---------- Lifecycle spine (services) ---------- */
.spine { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width:820px){ .spine { grid-template-columns:1fr; } }
.stage__head {
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; letter-spacing:.02em; color:#fff; padding:16px; border-radius:var(--radius-sm);
  font-size:18px;
}
.stage--acq { background:var(--purple-dark); }
.stage--onb { background:var(--purple); }
.stage--act { background:#5B21B6; }
.stage__desc { text-align:center; color:var(--muted); font-size:14px; margin:14px 0 18px; min-height:42px; }
.section--dark .stage__desc { color:rgba(255,255,255,.55); }
.stage__list { display:flex; flex-direction:column; gap:10px; }
.stage__item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; font-weight:600; font-size:15px;
}
.section--dark .stage__item { background:rgba(255,255,255,.04); border-color:var(--border-dark); }

/* ---------- Steps / timeline ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
@media (max-width:760px){ .steps { grid-template-columns:1fr; } }
.step .num { font-family:var(--mono); font-size:14px; color:var(--purple); font-weight:600; letter-spacing:.1em; }
.section--dark .step .num { color:var(--electric); }
.step h3 { font-size:19px; margin:10px 0 8px; }
.step p { color:var(--muted); font-size:15px; }
.section--dark .step p { color:rgba(255,255,255,.6); }
.step { border-top:2px solid var(--border); padding-top:18px; }
.section--dark .step { border-color:var(--border-dark); }

/* ---------- Feature rows / list ---------- */
.pill-row { display:flex; flex-wrap:wrap; gap:12px; }
.pill {
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  padding:9px 16px; border-radius:100px; border:1px solid var(--border);
  background:var(--bone); color:var(--ink);
}
.section--dark .pill { background:rgba(255,255,255,.04); border-color:var(--border-dark); color:rgba(255,255,255,.82); }

.dot-list { display:grid; gap:14px; }
.dot-list li { list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.dot-list li::before { content:"→"; color:var(--purple); font-weight:700; flex:0 0 auto; }
.section--dark .dot-list li::before { color:var(--electric); }

/* ---------- Manifesto / quote ---------- */
.manifesto { font-size:clamp(24px,3.6vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1.22; max-width:20ch; }
.quote { font-size:clamp(22px,3vw,34px); font-weight:500; line-height:1.3; letter-spacing:-.015em; max-width:24ch; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; }
.cta-band h2 { margin-bottom:22px; }
.cta-band .btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Contact form ---------- */
.segmented { display:inline-flex; background:rgba(255,255,255,.05); border:1px solid var(--border-dark); border-radius:100px; padding:5px; gap:4px; }
.segmented button {
  border:0; background:transparent; color:rgba(255,255,255,.6);
  padding:10px 20px; border-radius:100px; font-weight:600; font-size:14px; transition:.18s var(--ease);
}
.segmented button[aria-selected="true"] { background:var(--purple); color:#fff; }
.form { display:grid; gap:16px; max-width:620px; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form .row { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.field input, .field textarea, .field select {
  background:rgba(255,255,255,.04); border:1px solid var(--border-dark); border-radius:var(--radius-sm);
  color:#fff; padding:13px 15px; font:inherit; font-size:15px; transition:border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--purple); }
.field textarea { min-height:130px; resize:vertical; }
.field select option { color:#000; }

/* ---------- Footer ---------- */
.site-footer { background:var(--bg); border-top:1px solid var(--border-dark); padding-block:64px 40px; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:52px; }
@media (max-width:820px){ .footer-top { grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:480px){ .footer-top { grid-template-columns:1fr; } }
.footer-brand .wordmark { font-weight:700; letter-spacing:.14em; color:#fff; font-size:18px; }
.footer-brand p { color:rgba(255,255,255,.5); font-size:14px; margin-top:14px; max-width:34ch; }
.footer-col h4 { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; font-weight:500; }
.footer-col a, .footer-col span { display:block; color:rgba(255,255,255,.72); font-size:14.5px; padding-block:6px; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--border-dark); padding-top:26px; font-size:13px; color:rgba(255,255,255,.4); }
.footer-bottom .mono { font-family:var(--mono); letter-spacing:.04em; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  .btn:hover, .card--link:hover, .door:hover { transform:none; }
}

/* ---------- Utilities ---------- */
.mt-s{ margin-top:14px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:44px; }
.center{ text-align:center; } .mx-auto{ margin-inline:auto; }
.divider { width:64px; height:3px; background:var(--purple); border-radius:2px; margin:28px 0; }
.section--dark .divider, .section--purple .divider { background:var(--electric); }

/* ---------- Contact form: honeypot + submit status ---------- */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#form-status { font-size:14px; margin-top:16px; min-height:1.2em; color:rgba(255,255,255,.6); }
#form-status[data-state="ok"]    { color:var(--teal); }
#form-status[data-state="error"] { color:var(--coral); }