/* =====================================================================
   In My Mind — v1.1 brand kit
   Tagline: "Spatial Human/AI Collaboration"
   Source: In My Mind - Brand Foundation Document v1.1 FINAL.md
   ===================================================================== */

:root {
  /* v1.1 brand palette */
  --imm-indigo:       #1E1B4B;   /* Primary — IMM Deep Indigo */
  --imm-violet:       #6D28D9;   /* Primary accent — Spatial Violet */
  --imm-cyan:         #06B6D4;   /* Secondary — Cognitive Cyan */
  --imm-amber:        #F59E0B;   /* Highlight — Signal Amber */
  --imm-graphite:     #1F2937;   /* Neutral dark */
  --imm-bone:         #F9FAFB;   /* Neutral light */

  /* Derivations (computed once so we stop typing rgba() everywhere) */
  --indigo-50:        #1E1B4B0D;
  --indigo-100:       #1E1B4B1A;
  --indigo-300:       #1E1B4B4D;
  --violet-100:       #6D28D91A;
  --violet-300:       #6D28D94D;
  --violet-400:       #6D28D966;
  --violet-500:       #6D28D9;
  --violet-soft:      #A78BFA;
  --cyan-100:         #06B6D41A;
  --cyan-300:         #06B6D44D;
  --cyan-500:         #06B6D4;
  --cyan-soft:        #67E8F9;
  --amber-100:        #F59E0B1A;
  --amber-500:        #F59E0B;
  --ok:               #34D399;

  --ink:              #05060F;   /* Even deeper than indigo — page bg */
  --ink-elev:         #0A0B1A;
  --line:             #FFFFFF14;
  --line-strong:      #FFFFFF24;
  --text-1:           #F4F4F8;
  --text-2:           #B8BACB;
  --text-3:           #7E809B;
  /* --text-4 lifted from #4F516B -> #7A7C97 (2026-07-05) so eyebrow +
     mono caption text on --ink/--ink-elev passes WCAG AA (4.5:1). Old
     value hit 2.6:1 and was flagged by PageSpeed. Stays in the same
     neutral-cool brand ramp. */
  --text-4:           #7A7C97;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text-1);
  font-family: 'Calibri', 'Carlito', 'Segoe UI', system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: var(--violet-400); color: #fff; }

/* atmosphere — used for hero + section backgrounds */
.atmo {
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%,  rgba(109, 40, 217, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(6, 182, 212, 0.16)  0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(30, 27, 75, 0.55)   0%, transparent 60%);
}

.dotgrid {
  background-image: radial-gradient(rgba(167,139,250,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.grain::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* =====================================================================
   NAVIGATION — same on every page
   ===================================================================== */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(5, 6, 15, 0.7);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 32px;
  height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Nav brand = the approved wordmark as a single image, never disassembled.
   Brand guidelines: preserve the 3.17:1 aspect ratio (scale by height only)
   and maintain clear space around the lockup. */
.nav-brand {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  padding-right: 24px;  /* clear space — keeps nav links off the wordmark */
}
.nav-brand img { height: 48px; width: auto; display: block; }

/* Footer brand lockup = same approved wordmark image as the nav, sized
   for the footer context. Tagline below is a separate text line — the
   wordmark image itself is never modified. */
.foot-wordmark { height: 60px; width: auto; display: block; margin: 0; }
.foot-tagline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; color: var(--cyan-soft);
  margin: 18px 0 0;
}

/* Product screenshots — slight darken so window chrome / OS backgrounds blend
   into the dark page rather than reading as bright rectangles. Targets PNGs
   served from /img/ (the real product captures); excludes brand assets and
   inline UI icons. */
img[src^="/img/"][src$=".png"] {
  filter: brightness(0.75) contrast(1.05);
}

/* Lightbox — click any .screenshot-thumb image to expand it full-screen.
   The default thumbnail caps display width so screenshots stay scannable
   in the page layout; click reveals the full-resolution capture. */
.screenshot-thumb {
  max-width: 720px;
  margin: 0 auto;
  cursor: zoom-in;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.screenshot-thumb:hover {
  transform: translateY(-2px);
}
.screenshot-thumb::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(5, 6, 15, 0.78) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>") center / 16px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.screenshot-thumb:hover::after { opacity: 1; }

dialog.lightbox-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
dialog.lightbox-dialog::backdrop {
  background: rgba(2, 3, 9, 0.92);
  backdrop-filter: blur(6px);
}
.lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  cursor: zoom-out;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
  filter: none;
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(15, 16, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-1);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lightbox-close:hover {
  background: rgba(30, 27, 75, 0.95);
  border-color: var(--violet-soft);
}

.nav-links { display: flex; gap: 20px; font-size: 13.5px; align-items: center; }
.nav-links a { color: var(--text-2); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-1); }
.nav-sep { color: var(--text-4); opacity: 0.5; font-size: 14px; user-select: none; }

/* site-nav + site-footer are Web Components defined in /js/chrome.js. They
   need display:block so layout matches the inline <nav>/<footer> they replaced.
   min-height reserves nav space so the deferred chrome.js can upgrade the
   custom element without a Cumulative Layout Shift. Matches the CSS
   nav-inner height (80px desktop, 68px mobile). */
site-nav { display: block; min-height: 80px; }
site-footer { display: block; }
@media (max-width: 880px) { site-nav { min-height: 68px; } }

/* <main> landmark — added on every page for accessibility (WCAG landmark
   navigation). No visual effect; just ensures screen readers + PageSpeed
   audits recognize the primary content region. */
main { display: block; }

/* =====================================================================
   Four-layer ladder — used on /skills/ as the canonical explanation of
   how Doctrine, Zone Playbook, Skills, and Workflows compose. Also lifted
   onto /builders/ so the story matches across both pages.
   ===================================================================== */
.ladder-stack { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.ladder-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: stretch;
  padding: 22px 24px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.02);
  transition: transform 0.2s, border-color 0.2s;
}
.ladder-row:hover { border-color: var(--line-strong); transform: translateX(4px); }
.ladder-row.l-doctrine  { border-left: 3px solid #818cf8; }
.ladder-row.l-playbook  { border-left: 3px solid #06b6d4; }
.ladder-row.l-skill     { border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.04); }
.ladder-row.l-workflow  { border-left: 3px solid #34d399; }
.ladder-label { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ladder-tier { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4); }
.ladder-name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-1); }
.ladder-when { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--violet-soft); margin-top: 2px; }
.l-doctrine  .ladder-when { color: #a5b4fc; }
.l-playbook  .ladder-when { color: var(--cyan-soft); }
.l-skill     .ladder-when { color: #fcd34d; }
.l-workflow  .ladder-when { color: var(--ok); }
.ladder-body { font-size: 15px; line-height: 1.55; color: var(--text-2); margin: 0; }
.ladder-body strong { color: var(--text-1); font-weight: 700; }

/* Stack-example — composability snapshot used only on /skills/ ("all four
   working together in one real zone"). Lives here so the layer-color tokens
   stay co-located with .ladder-* above. */
.stack-example { background: linear-gradient(155deg, #0A0B1A 0%, #1E1B4B 100%); border: 1px solid var(--line-strong); border-radius: 16px; padding: 28px; margin-top: 40px; }
.stack-example .header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stack-example .header .tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--cyan-soft); letter-spacing: 0.15em; }
.stack-example .header .name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.stack-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 0; align-items: baseline; }
.stack-row + .stack-row { border-top: 1px solid var(--line); }
.stack-row .layer { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); padding-top: 2px; }
.stack-row .layer.l1 { color: #a5b4fc; }
.stack-row .layer.l2 { color: var(--cyan-soft); }
.stack-row .layer.l3 { color: #fcd34d; }
.stack-row .layer.l4 { color: var(--ok); }
.stack-row .text { font-size: 14px; color: var(--text-2); line-height: 1.5; margin: 0; }
.stack-row .text strong { color: var(--text-1); }
@media (max-width: 720px) {
  .ladder-row { grid-template-columns: 1fr; gap: 12px; }
  .stack-row { grid-template-columns: 1fr; gap: 4px; }
}

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .signin { color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.nav-cta .signin:hover { color: var(--text-1); }

/* =====================================================================
   Hamburger + mobile drawer (Web Component paints markup in js/chrome.js).
   Hidden on desktop; the drawer replaces the horizontal nav-links + CTA
   below the 880px breakpoint.
   ===================================================================== */
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-drawer {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--ink);
  z-index: 40;
  overflow-y: auto;
  padding: 32px 24px 48px;
  border-top: 1px solid var(--line);
  animation: nav-drawer-in 0.22s ease-out;
}
@keyframes nav-drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.nav.menu-open .nav-mobile-drawer { display: block; }
.nav-mobile-inner { display: flex; flex-direction: column; gap: 20px; max-width: 480px; margin: 0 auto; }
.nav-mobile-links { display: flex; flex-direction: column; gap: 4px; }
.nav-mobile-links a {
  color: var(--text-1);
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}
.nav-mobile-links a:hover, .nav-mobile-links a.active { color: var(--violet-soft); }
.nav-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.nav-mobile-cta a { text-align: center; padding: 12px 16px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; }
.nav-mobile-cta a:not(.btn) { color: var(--text-2); border: 1px solid var(--line); }
.nav-mobile-cta .btn { color: #fff; }

/* =====================================================================
   Mobile / tablet responsive layer. Breakpoints:
     ≤880px — hide desktop nav + CTA, show hamburger + drawer
     ≤760px — stack most 2/N-column layouts into single column
     ≤480px — tighten section padding + typography
   ===================================================================== */
@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .nav-inner { height: 68px; }
  .nav-brand img { height: 40px; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 760px) {
  /* Stack any hardcoded inline grid that isn't already auto-fit-based */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Section vertical rhythm */
  .section { padding: 56px 0 !important; }
  .section-hero, .section-hero.atmo { padding-top: 40px !important; padding-bottom: 48px !important; }
  .section-sm { padding: 28px 0 !important; }
  /* Container padding */
  .wrap, .wrap-narrow { padding-left: 20px !important; padding-right: 20px !important; }
  /* Footer: 4 cols → 2 cols → 1 col */
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-legal { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  /* Screenshot thumbs already max-width 720; nothing further */
  /* Ladder rows already handled at 720px */
  /* Buttons hit-target */
  .btn, .btn-primary, .btn-secondary { min-height: 44px; }
}

@media (max-width: 480px) {
  .section { padding: 40px 0 !important; }
  .section-hero, .section-hero.atmo { padding-top: 28px !important; padding-bottom: 36px !important; }
  .wrap, .wrap-narrow { padding-left: 16px !important; padding-right: 16px !important; }
  .foot-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .h-display { font-size: clamp(26px, 8vw, 40px) !important; }
  .h-large { font-size: clamp(24px, 6vw, 34px) !important; }
  .h-mid { font-size: clamp(20px, 5vw, 26px) !important; }
  .lead { font-size: 16px !important; }
  /* Prevent horizontal scroll from long inline mono strings */
  .mono { overflow-wrap: anywhere; }
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--imm-violet), var(--imm-cyan));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(109, 40, 217, 0.45);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(109, 40, 217, 0.6); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
.btn-ghost { color: var(--text-2); padding: 8px 0; }
.btn-ghost:hover { color: var(--text-1); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* =====================================================================
   TYPOGRAPHY HELPERS
   ===================================================================== */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan-soft); margin-bottom: 18px;
}
.h-display {
  font-size: clamp(30px, 4.5vw, 66px); line-height: 1.05; font-weight: 700;
  letter-spacing: -0.03em; margin: 0 0 24px;
}
.h-large { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 18px; }
.h-mid { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 14px; }
.h-small { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0 0 10px; }

.gradient-text {
  background: linear-gradient(120deg, var(--violet-soft) 0%, var(--cyan-soft) 60%, var(--violet-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lead { font-size: 18px; line-height: 1.55; color: var(--text-2); margin: 0 0 24px; max-width: 600px; }
.copy { color: var(--text-2); line-height: 1.6; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 56px 0; position: relative; }
.section-hero { padding: 136px 0 88px; position: relative; overflow: hidden; }

.hairline { height: 1px; background: linear-gradient(to right, transparent 0%, var(--line-strong) 50%, transparent 100%); }

/* =====================================================================
   CARDS
   ===================================================================== */
.card {
  position: relative;
  background: rgba(10, 11, 26, 0.65);
  border-radius: 18px;
  padding: 28px;
}
.card::before {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: linear-gradient(135deg, var(--violet-300), var(--cyan-300) 50%, transparent 70%, var(--violet-300));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.card-flat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.card-flat:hover { background: rgba(255, 255, 255, 0.035); }

/* =====================================================================
   BADGES / PILLS
   ===================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); color: var(--text-2);
}
.pill-cyan { background: var(--cyan-100); border-color: var(--cyan-300); color: var(--cyan-soft); }
.pill-violet { background: var(--violet-100); border-color: var(--violet-300); color: var(--violet-soft); }
.pill-amber { background: var(--amber-100); border-color: rgba(245,158,11,0.3); color: var(--imm-amber); }
.pill-ok { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.3); color: var(--ok); }

.pill-beta { background: var(--amber-100); border-color: rgba(245,158,11,0.4); color: var(--imm-amber); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; }

/* =====================================================================
   VERTICAL CTA LINKS (audience picker on every page)
   ===================================================================== */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.audience-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.audience-card:hover {
  border-color: var(--violet-300);
  transform: translateY(-2px);
  background: rgba(109, 40, 217, 0.04);
}
.audience-card .who { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-soft); }
.audience-card .what { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 6px 0 8px; }
.audience-card .why { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.audience-card .go { display: inline-block; margin-top: 14px; color: var(--violet-soft); font-size: 13px; font-weight: 600; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer { border-top: 1px solid var(--line); padding: 72px 0 32px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 920px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand .pitch { color: var(--text-3); font-size: 13px; line-height: 1.55; max-width: 320px; margin-top: 18px; }
.foot-col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 14px;
}
.foot-col a { display: block; color: var(--text-2); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; }
.foot-col a:hover { color: var(--text-1); }
.foot-legal {
  border-top: 1px solid var(--line); margin-top: 56px; padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-4);
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes nodepulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes blink {
  50% { opacity: 0; }
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@keyframes flow {
  0% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}
.nodepulse { animation: nodepulse 3s ease-in-out infinite; }
.cursor::after { content: '▍'; color: var(--cyan-soft); margin-left: 2px; animation: blink 1s steps(2) infinite; }
.flow-line { stroke-dasharray: 4 4; animation: flow 1.5s linear infinite; }

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.85, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.85, 0.3, 1); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }

/* =====================================================================
   SCROLLBAR
   ===================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(109, 40, 217, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(109, 40, 217, 0.4); }