/* ================================================================
   JX UNIVERSE — DESIGN SYSTEM v3.0
   Okezie Ferdinand | jxdesigndev.com
   Afrofuturism × Dark Tech — "The Awakening"
   Nigeria × 2089
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  /* ── Core Fallbacks ── */
  --bg:          #030508;
  --accent:      var(--green);

  /* ── Void (Backgrounds) ── */
  --void:        #000000;
  --deep:        #040406;
  --surface:     #0A0A0F;
  --surface-2:   #0F0F1A;
  --surface-3:   #141428;
  --nav-height:  140px;

  /* ── Brand Green (Electric / Neon) ── */
  --green:       #00FF41;
  --green-2:     #39FF14;
  --green-dim:   #00BB2F;
  --green-faint: #003D0D;
  --green-glow:  rgba(0, 255, 65, 0.08);
  --green-glow-md: rgba(0, 255, 65, 0.18);
  --green-glow-lg: rgba(0, 255, 65, 0.35);

  /* ── Amber (Afrofuturist Warmth) ── */
  --amber:       #FFB800;
  --amber-dim:   rgba(255, 184, 0, 0.10);
  --amber-glow:  rgba(255, 184, 0, 0.25);
  --gold:        #D4A24E;
  --gold-dim:    rgba(212, 162, 78, 0.10);
  --gold-glow:   rgba(212, 162, 78, 0.25);

  /* ── Cyan (Tech Highlight) ── */
  --cyan:        #00FFCC;
  --cyan-dim:    rgba(0, 255, 204, 0.08);

  /* ── Red (Destructive / Error) ── */
  --red:         #FF5F57;
  --red-dim:     rgba(255, 95, 87, 0.10);

  /* ── Purple (Depth Accent) ── */
  --purple:      #8B5CF6;
  --purple-dim:  rgba(139, 92, 246, 0.10);

  /* ── Text ── */
  --white:       #FFFFFF;
  --gray-1:      #E8E8F0;  /* Near white — primary text */
  --gray-2:      #A8A8C0;  /* Muted text */
  --gray-3:      #8A8AB0;  /* Dimmer text, 6:1 contrast */
  --gray-4:      #767696;  /* Barely visible, 4.52:1 minimum contrast */

  /* ── Borders ── */
  --border:      rgba(255, 255, 255, 0.06);
  --border-2:    rgba(255, 255, 255, 0.12);
  --border-green: rgba(0, 255, 65, 0.20);
  --border-green-2: rgba(0, 255, 65, 0.40);

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Playfair Display', serif;

  /* ── Fluid Type Scale ── */
  --text-2xs:  clamp(0.58rem, 1vw,   0.65rem);
  --text-xs:   clamp(0.68rem, 1.2vw, 0.75rem);
  --text-sm:   clamp(0.80rem, 1.5vw, 0.875rem);
  --text-base: clamp(0.92rem, 2vw,   1rem);
  --text-md:   clamp(1rem,    2.2vw, 1.125rem);
  --text-lg:   clamp(1.1rem,  2.5vw, 1.35rem);
  --text-xl:   clamp(1.3rem,  3.5vw, 1.75rem);
  --text-2xl:  clamp(1.6rem,  4.5vw, 2.25rem);
  --text-3xl:  clamp(2rem,    6vw,   3.5rem);
  --text-4xl:  clamp(2.8rem,  8vw,   5.5rem);
  --text-5xl:  clamp(3.5rem,  11vw,  9rem);
  --text-hero: clamp(4rem, 9.5vw, 9rem);

  /* ── Letter Spacing ── */
  --track-tight:  -0.03em;
  --track-normal: 0em;
  --track-wide:   0.08em;
  --track-wider:  0.15em;
  --track-widest: 0.25em;

  /* ── Line Height ── */
  --lead-tight:   1.05;
  --lead-snug:    1.2;
  --lead-normal:  1.5;
  --lead-relaxed: 1.75;

  /* ── Spacing ── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* ── Container Widths ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Z-Index ── */
  --z-base:       1;
  --z-above:      10;
  --z-modal:      100;
  --z-nav:        200;
  --z-loader:     900;
  --z-transition: 950;
  --z-cursor:     999;

  /* ── Easing ── */
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo:    cubic-bezier(0.87, 0, 0.13, 1);
  --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Duration ── */
  --dur-fast:    200ms;
  --dur-normal:  400ms;
  --dur-slow:    700ms;
  --dur-cinema:  1000ms;
}

/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto; /* Lenis handles smooth scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--void);
  color: var(--gray-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lead-normal);
  overflow-x: hidden;
  scrollbar-gutter: stable; /* reserve scrollbar width so 100vw == usable width */
  cursor: none; /* Custom cursor takes over */
}

/* Remove cursor: none on touch devices */
@media (hover: none) {
  body { cursor: auto; }
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

ul, ol { list-style: none; }

svg { display: block; }

::selection {
  background: var(--green);
  color: var(--void);
}

/* ----------------------------------------------------------------
   3. CUSTOM CURSOR
   ---------------------------------------------------------------- */

/* ── Core dot ── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-999px, -999px); /* JS handles real position */
  transition: width 0.2s var(--ease-snap), height 0.2s var(--ease-snap),
              background 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
  will-change: transform;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.7), 0 0 20px rgba(0, 255, 65, 0.3);
  /* center on coordinate */
  margin-left: -4px;
  margin-top: -4px;
}

/* ── Outer ring ── */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(0, 255, 65, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-999px, -999px);
  transition: border-color 0.3s ease, opacity 0.3s ease;
  will-change: transform;
  margin-left: -19px;
  margin-top: -19px;
}

/* ── Aura glow cloud ── */
.cursor-aura {
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    rgba(0, 255, 65, 0.10) 0%,
    rgba(0, 255, 204, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 2);
  transform: translate(-999px, -999px);
  will-change: transform, opacity;
  margin-left: -110px;
  margin-top: -110px;
  opacity: 0.12;
  transition: opacity 0.4s ease;
}

/* ── Velocity trail ── */
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 3);
  transform: translate(-999px, -999px);
  will-change: transform;
  margin-left: -2.5px;
  margin-top: -2.5px;
  background: var(--green);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.cursor-trail.active {
  opacity: calc(0.55 - var(--trail-i, 0) * 0.06);
}
.cursor-trail.hidden { opacity: 0; }

/* ── Hidden states ── */
.cursor.hidden,
.cursor-ring.hidden,
.cursor-aura.hidden { opacity: 0; }

/* ── Hover mode: expand ring, pulse dot ── */
.cursor.hover {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.9), 0 0 40px rgba(0, 255, 65, 0.4);
}
.cursor-ring.hover {
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-color: var(--green);
  border-width: 1.5px;
}

/* ── Click mode ── */
.cursor[data-mode="click"] {
  transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.55) !important;
  background: var(--amber);
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.8), 0 0 50px rgba(255, 184, 0, 0.4);
}
.cursor-ring[data-mode="click"] {
  border-color: var(--amber);
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
}

/* ── data-cursor-mode: scan (project cards) ── */
.cursor[data-mode="scan"] {
  background: var(--amber);
  box-shadow: 0 0 14px var(--amber-glow), 0 0 30px var(--amber-dim);
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
}
.cursor-ring[data-mode="scan"] {
  border-color: var(--amber);
  border-style: dashed;
  width: 52px; height: 52px;
  margin-left: -26px; margin-top: -26px;
  animation: cursor-spin-slow 4s linear infinite;
}
.cursor-aura[data-mode="scan"] {
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 65%);
  opacity: 0.22;
}

/* ── data-cursor-mode: sculpt (particle canvas) ── */
.cursor[data-mode="sculpt"] {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 255, 204, 0.8), 0 0 40px rgba(0, 255, 204, 0.3);
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
}
.cursor-ring[data-mode="sculpt"] {
  border-color: var(--cyan);
  border-width: 1px;
  width: 64px; height: 64px;
  margin-left: -32px; margin-top: -32px;
}
.cursor-aura[data-mode="sculpt"] {
  background: radial-gradient(circle, var(--cyan-dim) 0%, transparent 65%);
  opacity: 0.3;
  width: 300px; height: 300px;
  margin-left: -150px; margin-top: -150px;
}

/* ── data-cursor-mode: reveal (hidden content) ── */
.cursor[data-mode="reveal"] {
  background: var(--purple);
  box-shadow: 0 0 14px var(--purple-dim), 0 0 35px rgba(139, 92, 246, 0.25);
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
}
.cursor-ring[data-mode="reveal"] {
  border-color: var(--purple);
  border-width: 1px;
  border-style: solid;
  width: 48px; height: 48px;
  margin-left: -24px; margin-top: -24px;
  opacity: 0.7;
}
.cursor-aura[data-mode="reveal"] {
  background: radial-gradient(circle, var(--purple-dim) 0%, transparent 60%);
  opacity: 0.35;
}

/* ── data-cursor-mode: play (playground section) ── */
.cursor[data-mode="play"] {
  background: var(--green-2);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.4);
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  animation: cursor-pulse 0.8s ease-in-out infinite alternate;
}
.cursor-ring[data-mode="play"] {
  border-color: var(--green-2);
  border-width: 2px;
  width: 58px; height: 58px;
  margin-left: -29px; margin-top: -29px;
}
.cursor-aura[data-mode="play"] {
  background: radial-gradient(circle, var(--green-glow-md) 0%, transparent 65%);
  opacity: 0.28;
}

/* ── Mode keyframes ── */
@keyframes cursor-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes cursor-pulse {
  from { box-shadow: 0 0 20px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.4); }
  to   { box-shadow: 0 0 30px rgba(57, 255, 20, 1.0), 0 0 70px rgba(57, 255, 20, 0.6); }
}

/* ── Cursor label ── */
.cursor-ring .ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor-ring.labeled .ring-label { opacity: 1; }

/* ── Reduced motion: disable custom cursor entirely ── */
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-ring, .cursor-aura, .cursor-trail { display: none !important; }
  body { cursor: auto !important; }
}

/* ----------------------------------------------------------------
   4. NAVIGATION
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-6) var(--s-8);
  transition: background 0.4s ease, border-color 0.4s ease,
              padding 0.4s ease;
}

.nav.scrolled {
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid var(--border);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Nav Brand / Logo */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  padding: 12px 0;
}

.nav-logo {
  width: 44px;
  height: 20px;
  flex-shrink: 0;
}

.nav-logo .jx-j,
.nav-logo .jx-x1,
.nav-logo .jx-x2 {
  stroke: var(--green);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--ease-expo);
}

.nav-brand:hover .nav-logo .jx-j,
.nav-brand:hover .nav-logo .jx-x1,
.nav-brand:hover .nav-logo .jx-x2 {
  stroke-dashoffset: 100;
  animation: stroke-redraw 0.8s var(--ease-expo) forwards;
}

@keyframes stroke-redraw {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gray-2);
  position: relative;
  transition: color 0.3s ease;
  padding: 16px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--green);
  transition: width 0.3s var(--ease-snap);
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Nav Right */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Availability Badge */
.nav-availability {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green), 0 0 16px var(--green-glow-md);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

.nav-dot.amber {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber), 0 0 16px var(--amber-glow);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.nav-availability-text {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* Nav CTA */
.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--border-green);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-full);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease;
}

.nav-cta:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--void);
  box-shadow: 0 0 20px var(--green-glow-md);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-2);
  width: 36px;
}

.nav-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--gray-2);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-snap), opacity 0.3s ease, width 0.3s ease;
  transform-origin: left center;
}

.nav-hamburger span:nth-child(2) { width: 70%; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(0px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(0px); }

/* ── Audio toggle ── */
.nav-audio-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease,
              color       var(--dur-fast) ease,
              background  var(--dur-fast) ease,
              box-shadow  var(--dur-fast) ease;
  flex-shrink: 0;
}

.nav-audio-toggle:hover {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-glow);
}

/* Active = audio enabled */
.nav-audio-toggle.active {
  border-color: var(--border-green-2);
  color: var(--green);
  background: var(--green-glow);
  box-shadow: 0 0 10px var(--green-glow-md);
}

/* Wave bars animate when active */
.nav-audio-toggle.active .jx-audio-wave-1 {
  animation: audio-wave-a 0.6s ease-in-out infinite alternate;
}
.nav-audio-toggle.active .jx-audio-wave-2 {
  animation: audio-wave-b 0.6s 0.2s ease-in-out infinite alternate;
}

@keyframes audio-wave-a {
  from { transform: scaleY(1);   transform-origin: center; }
  to   { transform: scaleY(0.4); transform-origin: center; }
}
@keyframes audio-wave-b {
  from { transform: scaleY(0.4); transform-origin: center; }
  to   { transform: scaleY(1);   transform-origin: center; }
}

/* Mute diagonal line: visible when NOT active, hidden when active */
.nav-audio-toggle .jx-audio-mute-line {
  transition: opacity var(--dur-fast) ease;
  opacity: 1;
}
.nav-audio-toggle.active .jx-audio-mute-line {
  opacity: 0;
}

/* ── First-interaction audio toast ── */
.jx-audio-toast {
  position: fixed;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-xl);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-2);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-snap);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.jx-audio-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.jx-audio-toast-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-full);
  padding: var(--s-1) var(--s-4);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.jx-audio-toast-btn:hover {
  background: var(--green);
  color: var(--void);
}
.jx-audio-toast-dismiss {
  background: none;
  border: none;
  color: var(--gray-2);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0 var(--s-1);
  transition: color var(--dur-fast) ease;
}
.jx-audio-toast-dismiss:hover { color: var(--white); }

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(0, 0, 0, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-snap);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--gray-3);
  letter-spacing: var(--track-tight);
  transition: color 0.3s ease, transform 0.3s var(--ease-snap);
  transform: translateY(20px);
  opacity: 0;
}

.mobile-menu.open .mobile-nav-link {
  color: var(--white);
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav-link:hover { color: var(--green); }

.mobile-menu-footer {
  position: absolute;
  bottom: var(--s-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.mobile-menu-socials {
  display: flex;
  gap: var(--s-6);
}

.mobile-menu-social {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gray-2);
  transition: color 0.3s;
}

.mobile-menu-social:hover { color: var(--green); }

.mobile-menu-location {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-4);
  letter-spacing: var(--track-wide);
}

/* ----------------------------------------------------------------
   5. CONSCIOUSNESS SHIFT — Page Transitions
   ---------------------------------------------------------------- */
#ct-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  pointer-events: none;
}

.ct-panel {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.ct-panel-1 { background: var(--surface);   z-index: 3; }
.ct-panel-2 { background: var(--surface); z-index: 2; }
.ct-panel-3 {
  background: var(--void);
  z-index: 1;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,255,65,0.015) 3px, rgba(0,255,65,0.015) 4px
  );
}

.ct-grid {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,255,65,0.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(0,255,65,0.04) 0 1px, transparent 1px 80px);
  will-change: opacity;
}

.ct-sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 5;
  opacity: 0;
  will-change: transform, opacity;
}

.ct-sigil svg {
  width: clamp(60px, 10vw, 120px);
  height: auto;
  filter: drop-shadow(0 0 20px var(--green)) drop-shadow(0 0 50px var(--green-glow-lg));
}

.ct-sigil .jx-stroke {
  stroke: var(--green);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

/* ----------------------------------------------------------------
   6. LOADER
   ---------------------------------------------------------------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

.loader-logo {
  opacity: 0;
  animation: loader-logo-in 0.8s var(--ease-snap) 0.3s forwards;
}

.loader-logo svg {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 16px var(--green-glow-md));
}

.loader-logo .jx-j,
.loader-logo .jx-x1,
.loader-logo .jx-x2 {
  stroke: var(--green);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}

.loader-logo .jx-j  { animation: draw-stroke 0.8s var(--ease-expo) 0.5s forwards; }
.loader-logo .jx-x1 { animation: draw-stroke 0.6s var(--ease-expo) 0.9s forwards; }
.loader-logo .jx-x2 { animation: draw-stroke 0.6s var(--ease-expo) 1.1s forwards; }

@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}

@keyframes loader-logo-in {
  to { opacity: 1; }
}

.loader-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: min(320px, 90vw);
}

.loader-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  animation: fade-in 0.5s ease 0.8s forwards;
  transition: opacity 0.3s ease;
  min-height: 1.2em;
  text-align: center;
}

.loader-track {
  width: 100%;
  height: 1px;
  background: var(--gray-4);
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 0.5s ease 1s forwards;
}

.loader-bar {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: 1px;
  box-shadow: 0 0 12px var(--green-glow-md);
  transition: width 0.1s linear;
}

.loader-pct {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-2);
  letter-spacing: var(--track-wide);
  opacity: 0;
  animation: fade-in 0.5s ease 1s forwards;
}

.loader-noise {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: noise-flicker 0.1s steps(1) infinite;
}

.loader-noise.active { opacity: 1; }

@keyframes noise-flicker {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1%, 1%); }
  50%  { transform: translate(1%, -1%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(1%, 1%); }
}

.loader-skip {
  position: absolute;
  bottom: var(--s-6);
  right: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-3);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: var(--track-wider);
  opacity: 0;
  animation: fade-in 0.5s ease 1s forwards;
  transition: color 0.2s, opacity 0.3s;
}

.loader-skip:hover {
  color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  .loader-skip {
    animation-duration: 0.1s;
    transition: none;
  }
}

/* Loader exit */
#loader.hidden {
  pointer-events: none;
  animation: loader-exit 0.8s var(--ease-expo) forwards;
}

@keyframes loader-exit {
  0%   { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
}

/* ----------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: var(--s-3) var(--s-8);
  transition: all 0.3s var(--ease-snap);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Primary — filled green */
.btn-primary {
  background: var(--green);
  color: var(--void);
  border: 1px solid var(--green);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--green-2);
  box-shadow: 0 0 30px var(--green-glow-md), 0 0 60px var(--green-glow);
  transform: translateY(-2px);
}

/* Ghost — outlined */
.btn-ghost {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--border-green);
}

.btn-ghost:hover {
  background: var(--green-glow);
  border-color: var(--green);
  box-shadow: 0 0 20px var(--green-glow);
}

/* Mono — subtle */
.btn-mono {
  background: var(--surface-2);
  color: var(--gray-2);
  border: 1px solid var(--border);
  font-weight: 400;
}

.btn-mono:hover {
  background: var(--surface-3);
  color: var(--white);
  border-color: var(--border-2);
}

/* Sizes */
.btn-sm { padding: var(--s-2) var(--s-5); font-size: var(--text-2xs); }
.btn-lg { padding: var(--s-4) var(--s-10); font-size: var(--text-sm); }

/* ----------------------------------------------------------------
   8. TAGS / BADGES
   ---------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  background: rgba(0, 255, 65, 0.07);
  border: 1px solid var(--border-green);
  color: var(--green-dim);
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gray-2);
  padding: var(--s-1) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.badge-green {
  color: var(--green);
  border-color: var(--border-green);
  background: var(--green-glow);
}

/* ----------------------------------------------------------------
   9. SECTION LAYOUT UTILITIES
   ---------------------------------------------------------------- */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--s-6);
}

.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--green);
  flex-shrink: 0;
}

.section-number {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-4);
  letter-spacing: var(--track-widest);
}

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--s-8);
}

.container-wide {
  width: 100%;
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--s-8);
}

/* ----------------------------------------------------------------
   10. TYPOGRAPHY COMPONENTS
   ---------------------------------------------------------------- */
.headline-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
}

.headline-xl {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
}

.headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-tight);
  overflow-wrap: break-word;
  word-break: break-word;
}

.headline-md {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--lead-snug);
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
}

.text-green { color: var(--green); }
.text-amber { color: var(--amber); }
.text-gray  { color: var(--gray-2); }
.text-dim   { color: var(--gray-3); }
.text-mono  { font-family: var(--font-mono); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----------------------------------------------------------------
   11. PROJECT CARD
   ---------------------------------------------------------------- */
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.4s ease, transform 0.4s var(--ease-snap),
              box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.project-card:hover {
  border-color: var(--border-green);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px var(--green-glow);
}

.project-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(20%) brightness(0.9);
  transition: filter 0.4s ease, transform 0.6s var(--ease-snap);
  will-change: transform;
}

.project-card:hover .project-card-image {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.04);
}

.project-card-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--green);
  background: var(--surface-2);
  letter-spacing: var(--track-tight);
}

.project-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-card-category {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--green);
}

.project-card-year {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-2);
}

.project-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  line-height: var(--lead-snug);
}

.project-card-desc {
  font-size: var(--text-sm);
  color: var(--gray-2);
  line-height: var(--lead-relaxed);
}

.project-card-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.project-card-arrow {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gray-3);
  transition: all 0.3s var(--ease-snap);
  opacity: 0;
  transform: translate(8px, -8px) rotate(-45deg);
}

.project-card:hover .project-card-arrow {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  background: var(--green);
  border-color: var(--green);
  color: var(--void);
}

/* ----------------------------------------------------------------
   12. CINEMATIC MODAL
   ---------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  transform: scale(0.94) translateY(20px);
  opacity: 0;
  transition: transform 0.5s var(--ease-snap), opacity 0.5s ease;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-image-pane {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  min-height: 400px;
}

.modal-image-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(10,10,15,0.9));
}

.modal-content {
  padding: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gray-2);
  z-index: 1;
  transition: background 0.3s, color 0.3s;
}

.modal-close:hover {
  background: var(--green);
  color: var(--void);
  border-color: var(--green);
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lead-tight);
}

/* ----------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-20) 0 var(--s-8);
}

.footer-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--s-8);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-16);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-8);
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.footer-logo { width: 44px; height: 20px; }
.footer-logo .jx-stroke {
  stroke: var(--green);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gray-2);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--gray-2);
  line-height: var(--lead-relaxed);
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: var(--s-5);
}

.footer-nav-list { display: flex; flex-direction: column; gap: var(--s-3); }

.footer-nav-link {
  font-size: var(--text-sm);
  color: var(--gray-2);
  transition: color 0.3s;
}

.footer-nav-link:hover { color: var(--green); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-4);
  letter-spacing: var(--track-wide);
}

.footer-made {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-4);
  letter-spacing: var(--track-wide);
}

.footer-made .green { color: var(--green); }

/* ----------------------------------------------------------------
   14. SCROLL-TO-TOP
   ---------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  bottom: var(--s-8);
  right: var(--s-8);
  z-index: var(--z-above);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-green);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-snap),
              background 0.3s, box-shadow 0.3s;
  pointer-events: none;
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.scroll-top:hover {
  background: var(--green);
  color: var(--void);
  box-shadow: 0 0 20px var(--green-glow-md);
}

/* ----------------------------------------------------------------
   15. SCROLL REVEAL UTILITIES (controlled by GSAP)
   ---------------------------------------------------------------- */
.reveal         { opacity: 0; transform: translateY(40px); }
.reveal-left    { opacity: 0; transform: translateX(-40px); }
.reveal-right   { opacity: 0; transform: translateX(40px); }
.reveal-scale   { opacity: 0; transform: scale(0.92); }
.reveal-blur    { opacity: 0; filter: blur(12px); }

/* ----------------------------------------------------------------
   16. FORM COMPONENTS
   ---------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gray-2);
}

.form-input,
.form-textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--gray-3); }

.form-input:focus,
.form-textarea:focus {
  border-color: var(--border-green-2);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-body);
}

.form-status {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  display: none;
}

.form-status.success {
  display: block;
  color: var(--green);
  background: var(--green-glow-md);
  border: 1px solid rgba(0, 255, 65, 0.2);
}

.form-status.error {
  display: block;
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(255, 95, 87, 0.2);
}

/* ----------------------------------------------------------------
   17. HORIZONTAL DIVIDER
   ---------------------------------------------------------------- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* ----------------------------------------------------------------
   18. SKELETON LOADING
   ---------------------------------------------------------------- */
.skeleton {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ----------------------------------------------------------------
   19. GLOBAL ANIMATIONS
   ---------------------------------------------------------------- */
@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Green scanline flicker */
@keyframes scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* ----------------------------------------------------------------
   20. RESPONSIVE — TABLET
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-links { gap: var(--s-6); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .modal { grid-template-columns: 1fr; }
  .modal-image-pane { border-radius: var(--radius-xl) var(--radius-xl) 0 0; min-height: 240px; }
}

/* ----------------------------------------------------------------
   21. RESPONSIVE — MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --s-8:  24px;
    --s-10: 32px;
    --s-12: 40px;
    --s-16: 48px;
    --s-20: 56px;
  }

  .nav-links,
  .nav-availability,
  .nav-audio-toggle,
  .nav-cta { display: none; }

  .nav-hamburger { display: flex; }

  .footer-top { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
  .modal { grid-template-columns: 1fr; max-height: 95vh; }
  .modal-content { padding: var(--s-6); }
  .scroll-top { bottom: var(--s-5); right: var(--s-5); }
}

/* ── Accessibility ── */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--green);
  color: var(--void);
  padding: 8px 16px;
  z-index: 9999;
  font-family: var(--font-mono);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
}

.nav-logo-img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}

/* Screen-reader only utility — visually hidden but accessible to crawlers/screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── TOOLS / STACK SECTION ── */
.tools-section {
  padding: var(--s-24) 0;
  border-top: 1px solid var(--border);
}
.tools-section-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--s-8);
}
.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-12);
  align-items: center;
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  opacity: 0;
  transform: scale(0.92);
}
.tool-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-md);
  filter: grayscale(30%) brightness(0.9);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.tool-item:hover img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}
.tool-item-name {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.tool-item:hover .tool-item-name { color: var(--green); }