/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
  --vh: 1vh; /* updated by JS on resize for mobile toolbar safety */
  --nav-h: clamp(60px, 7vh, 80px);

  /* ----- Surface palette: deep blacks → graphite slates ----- */
  --bg: #050505;          /* page base — true near-black */
  --void: #000a00;        /* deepest backdrop */
  --bg-deep: #03060a;     /* deep slate with cool tint */
  --bg-slate: #08100c;    /* charcoal slate, primary section bg */
  --bg-graphite: #0c1612; /* lighter graphite for raised surfaces */
  --surface: #060e0a;     /* card body */
  --surface-raised: #0a1410; /* raised card */
  --surface-elevated: #0e1a16; /* modals, popovers */
  --hairline: rgba(0, 255, 65, 0.08); /* faint divider */
  --hairline-strong: rgba(0, 255, 65, 0.18);

  /* ----- Electric green stack ----- */
  --cyan: #00ff41;        /* primary neon green */
  --cyan-bright: #5cffa0; /* hover-shift accent */
  --blue: #00ffaa;        /* mint-cyan accent */
  --lime: #aaff00;        /* lime hover apex */
  --orange: #ff6600;
  --purple: #cc00ff;
  --danger: #ff3355;

  --font-head: 'Orbitron', monospace;
  --font-display: 'Orbitron', monospace;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  /* ----- Glass / HUD ----- */
  --glass-bg: rgba(0, 255, 65, 0.04);
  --glass-border: rgba(0, 255, 65, 0.2);
  --glass-blur: blur(10px);
  --hud-border: rgba(0, 255, 65, 0.3);

  /* ----- Text ----- */
  --text-primary: #e0ffe8;
  --text-secondary: #80c890;
  --text-muted: #3a6040;

  /* ----- Geometric radii (sharp, intentional) ----- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
}

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

/* ============================================================
   ROOT SCROLL BEHAVIOR
   ------------------------------------------------------------
   Goals:
     * Native browser scroll with no JS interception
     * Smooth in-page anchor jumps (`scroll-behavior: smooth`)
     * No horizontal scroll (`overflow-x: hidden`) but Y-scroll
       must remain `visible` / `auto` so the page can scroll
     * Stable scrollbar gutter so layout doesn't shift when the
       scrollbar appears (Chrome/Edge support; ignored elsewhere)
     * `touch-action: pan-y pinch-zoom` lets the browser handle
       vertical pans + zoom natively without our JS getting in
       the way; horizontal carousels override this on themselves
============================================================ */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Honor reduced-motion preference. Smooth-scroll on every
     anchor click can trigger vestibular discomfort. */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--cyan);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  /* IMPORTANT: do NOT set `overflow-y: hidden`, `overscroll-behavior`,
     or any wheel/touch interceptor here. The site relies on native
     browser scroll for compatibility with mouse wheel, trackpad, iOS
     momentum, Android fling, screen readers, and keyboard arrows.
     Modals that need to lock the background should toggle a class
     locally, not redefine root scroll. */
  touch-action: pan-y pinch-zoom;
  cursor: none;
}

/* When the JS cursor isn't usable (touch-only devices, reduced
   motion, or the cursor script failed to register a mousemove
   handler), restore the native cursor so the page is still
   interactive. */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

a {
  color: var(--cyan);
  text-decoration: none;
}

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

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--void);
}
::-webkit-scrollbar-thumb {
  background: var(--cyan);
  border-radius: 2px;
}
::selection {
  background: var(--cyan);
  color: var(--void);
}

/* ============================================================
   LOADING SCREEN
============================================================ */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s ease;
}

/* The loading screen is fixed at z-index 9999. As soon as it
   begins to fade out it MUST stop catching pointer/wheel events,
   otherwise the user sees a transparent overlay that blocks all
   interaction (including mouse-wheel scroll) until JS finishes
   the cleanup hand-off — a real bug we hit before. */
#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  /* Belt-and-suspenders: ensure it can't intercept events even
     if some other script adds a ghost class or fights `display`. */
  visibility: hidden;
}

/* Once the body has flipped to `loaded`, the loading screen is
   permanently out of the interaction layer — no matter what its
   inline styles say. */
body.loaded #loading-screen {
  pointer-events: none !important;
}

.loading-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan);
  animation: loading-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes loading-pulse {
  from { text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan); }
  to   { text-shadow: 0 0 30px var(--cyan), 0 0 60px var(--cyan), 0 0 80px rgba(0,255,65,0.4); }
}

.loading-logo {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0,255,65,0.8), 0 0 60px rgba(0,255,65,0.4);
  animation: logo-breathe 2s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% { text-shadow: 0 0 20px rgba(0,255,65,0.6), 0 0 40px rgba(0,255,65,0.3); }
  50%       { text-shadow: 0 0 40px rgba(0,255,65,1), 0 0 80px rgba(0,255,65,0.6), 0 0 120px rgba(0,255,65,0.2); }
}

.loading-tagline {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.25em;
  color: rgba(0, 255, 65, 0.6);
  text-transform: uppercase;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Loading circuit SVGs */
.loading-circuit-svg {
  width: min(280px, 85vw);
  height: 120px;
}

.loading-circuit-svg path,
.loading-circuit-svg line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-trace 1.8s ease forwards;
}

.loading-circuit-svg path:nth-child(2) { animation-delay: 0.15s; }
.loading-circuit-svg path:nth-child(3) { animation-delay: 0.3s; }
.loading-circuit-svg path:nth-child(4) { animation-delay: 0.45s; }
.loading-circuit-svg path:nth-child(5) { animation-delay: 0.6s; }

.loading-circuit-svg circle {
  fill: var(--cyan);
  opacity: 0;
  animation: node-appear 0.3s ease 1.2s forwards;
}

/* Contact-style loading circuit SVG */
.loading-circuit-svg-lg {
  width: min(760px, 88vw);
  height: auto;
}

.lc-trace {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.lc-t1 { animation: draw-trace 1.2s ease forwards 0.1s; }
.lc-t2 { animation: draw-trace 1.2s ease forwards 0.25s; }
.lc-t3 { animation: draw-trace 1.2s ease forwards 0.4s; }
.lc-t4 { animation: draw-trace 1.2s ease forwards 0.55s; }
.lc-t5 { animation: draw-trace 0.8s ease forwards 0.7s; }
.lc-t6 { animation: draw-trace 0.8s ease forwards 0.85s; }
.lc-node {
  opacity: 0;
  animation: node-appear 0.3s ease forwards;
}
.lc-node:nth-child(1)  { animation-delay: 1.3s; }
.lc-node:nth-child(2)  { animation-delay: 1.35s; }
.lc-node:nth-child(3)  { animation-delay: 1.4s; }
.lc-node:nth-child(4)  { animation-delay: 1.45s; }
.lc-node:nth-child(5)  { animation-delay: 1.5s; }
.lc-node:nth-child(6)  { animation-delay: 1.55s; }
.lc-node-center {
  opacity: 0;
  animation: node-appear 0.4s ease forwards 1.6s;
}

/* Gallery loading circuit */
.circuit-path {
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawCircuit 1.2s ease forwards;
}

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

.circuit-dot {
  fill: var(--cyan);
  opacity: 0;
  animation: dotAppear 0.3s ease 1.1s forwards;
}

@keyframes dotAppear {
  to { opacity: 1; }
}

/* Progress bars */
.progress-bar-wrapper {
  width: min(280px, 80vw);
  height: 2px;
  background: rgba(0, 255, 65, 0.15);
  border-radius: 1px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: fill-progress 1.8s ease forwards;
}

@keyframes fill-progress {
  0%   { width: 0%; }
  60%  { width: 70%; }
  85%  { width: 90%; }
  100% { width: 100%; }
}

.loading-progress-wrap {
  width: min(320px, 80vw);
  height: 2px;
  background: rgba(0,255,65,0.12);
  border: 1px solid var(--hud-border);
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 8px var(--cyan);
}

.loading-bar-wrap {
  width: min(260px, 80vw);
  height: 4px;
  background: rgba(0,255,65,0.15);
  border: 1px solid rgba(0,255,65,0.3);
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 10px var(--cyan);
  transition: width 1.5s cubic-bezier(0.1, 0.9, 0.4, 1);
}

.loading-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  color: rgba(0,255,65,0.6);
  letter-spacing: 0.15em;
}

/* ============================================================
   SCROLL PROGRESS BAR
============================================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  z-index: 9998;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.05s linear;
  pointer-events: none;
}

/* ============================================================
   CUSTOM CURSOR
============================================================ */
#cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-9999px, -9999px);
  transition:
    width var(--duration-fast) var(--ease-electric),
    height var(--duration-fast) var(--ease-electric),
    background var(--duration-fast) var(--ease-electric),
    border-color var(--duration-fast) var(--ease-electric);
  mix-blend-mode: screen;
  box-shadow: 0 0 8px var(--cyan);
}

#cursor-ring.hover {
  width: 42px;
  height: 42px;
  background: rgba(0,255,65,0.08);
  border-color: var(--blue);
}

#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-9999px, -9999px);
  transition:
    width var(--duration-fast) var(--ease-electric),
    height var(--duration-fast) var(--ease-electric),
    background var(--duration-fast) var(--ease-electric),
    border-color var(--duration-fast) var(--ease-electric);
  box-shadow: 0 0 10px var(--cyan);
}

#cursor.hover {
  width: 42px;
  height: 42px;
  background: rgba(0,255,65,0.08);
  border-color: var(--blue);
}

#cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-9999px, -9999px);
  box-shadow: 0 0 8px var(--cyan), 0 0 2px #fff;
  transition: width 0.15s, height 0.15s, background 0.15s, box-shadow 0.15s;
}

#cursor-dot.hover {
  width: 10px;
  height: 10px;
  background: var(--blue, #00ffaa);
  box-shadow: 0 0 12px var(--blue, #00ffaa);
}

#cursor-dot.click {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 14px var(--cyan);
}

@media (hover: none) {
  #cursor-ring, #cursor-dot, #cursor { display: none; }
  body { cursor: auto; }
}

/* ============================================================
   CIRCUIT CANVAS BACKGROUND (fixed)
============================================================ */
#circuit-bg-canvas,
#circuit-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ============================================================
   BACKGROUND READABILITY OVERLAY
============================================================ */
#bg-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ============================================================
   CRT SCANLINES
============================================================ */
#crt-overlay,
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#crt-overlay {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
  opacity: 0.55;
}

.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
}

.scanlines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  width: 100%;
  height: 4px;
  background: linear-gradient(transparent, rgba(0,255,65,0.03), transparent);
  animation: scanSweep 7s linear infinite;
}

@keyframes scanSweep {
  0%   { top: -4px; }
  100% { top: 100%; }
}

/* ============================================================
   PAGE TRANSITION OVERLAY
============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-mid) var(--ease-electric);
}

#page-transition.active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   NAVBAR — MOBILE FIRST
   Base: hamburger visible, nav-links hidden
   768px+: nav-links visible, hamburger hidden
============================================================ */
.navbar,
#navbar,
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(5, 5, 5, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 32px);
  border-bottom: 1px solid rgba(0, 255, 65, 0.1);
  transition:
    border-color var(--duration-mid) var(--ease-electric),
    background var(--duration-mid) var(--ease-electric);
}

.navbar.scrolled,
#navbar.scrolled,
#nav.scrolled {
  border-bottom-color: rgba(0, 255, 65, 0.3);
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.05);
  background: rgba(5,5,5,0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 14px);
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 1;
  min-width: 0;
}

.nav-logo img,
.nav-logo-img {
  height: clamp(40px, 5vh, 56px);
  width: clamp(40px, 5vh, 56px);
  object-fit: contain;
  flex-shrink: 0;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.nav-logo-text .line1,
.logo-main {
  font-family: var(--font-head);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.nav-logo-text .line2,
.logo-accent {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.78vw, 12px);
  color: rgba(0, 255, 65, 0.65);
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.logo-sep {
  color: var(--cyan);
  opacity: 0.7;
  margin: 0 3px;
}

.nav-logo-mark {
  width: 38px;
  height: 38px;
  border: 2px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(0,255,65,0.3), inset 0 0 8px rgba(0,255,65,0.05);
  flex-shrink: 0;
}

/* Nav links: hidden on mobile, shown on tablet landscape+ */
.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a,
.nav-link {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.7);
  text-transform: uppercase;
  transition:
    color var(--duration-fast) var(--ease-electric),
    text-shadow var(--duration-fast) var(--ease-electric),
    letter-spacing var(--duration-mid) var(--ease-electric);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-links a::after,
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--cyan);
  transition: width var(--duration-mid) var(--ease-electric);
  box-shadow: 0 0 6px var(--cyan);
}

.nav-links a:hover,
.nav-links a.active,
.nav-link:hover,
.nav-link.active {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

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

/* Focus-visible outlines for accessibility */
.nav-links a:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ============================================================
   HAMBURGER — visible by default on mobile
============================================================ */
.hamburger,
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger:focus-visible,
.nav-hamburger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.hamburger span,
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--cyan);
  transition:
    transform var(--duration-mid) var(--ease-electric),
    opacity var(--duration-fast) var(--ease-electric),
    background var(--duration-fast) var(--ease-electric);
  box-shadow: 0 0 4px var(--cyan);
}

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

/* Tablet landscape+: show nav links, hide hamburger */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .hamburger, .nav-hamburger { display: none; }
}

/* ============================================================
   MOBILE MENU
============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 5, 5, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vh, 48px);
  transform: translateY(-100%);
  transition:
    transform var(--duration-slow) var(--ease-electric),
    opacity var(--duration-mid) var(--ease-electric);
  opacity: 0;
  pointer-events: none;
}

.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
  will-change: transform, opacity;
}

.mobile-menu a,
.mobile-menu ul a {
  font-family: var(--font-head);
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.7);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-electric),
    text-shadow var(--duration-fast) var(--ease-electric);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mobile-menu a:hover,
.mobile-menu a.active,
.mobile-menu ul a:hover,
.mobile-menu ul a.active {
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan);
}

.mobile-menu a:focus-visible,
.mobile-menu ul a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(5, 5, 5, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,255,65,0.2);
  padding: 24px 32px;
  z-index: 999;
}

.nav-mobile-menu.open { display: block; }

.nav-mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-mobile-menu a {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.2em;
  color: rgba(0,255,65,0.6);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color var(--duration-fast) var(--ease-electric),
    text-shadow var(--duration-fast) var(--ease-electric);
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a.active { color: var(--cyan); }

/* ============================================================
   TICKER
============================================================ */
#ticker,
.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(0, 255, 65, 0.2);
  z-index: 900;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-track,
.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  gap: 48px;
}

.ticker-item {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.6);
  padding: 0 32px;
  text-transform: uppercase;
}

.ticker-item::before {
  content: '\25B8 ';
  color: var(--cyan);
}

.ticker-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.6;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   FOOTER — MOBILE FIRST
============================================================ */
#site-footer,
#footer {
  position: relative;
  z-index: 10;
  background: var(--void);
  /* No border-top: .footer-divider owns the top hairline. */
  padding: clamp(32px, 5vh, 56px) clamp(16px, 5vw, 48px) clamp(24px, 3vh, 40px);
}

/* Event modal — hidden on all pages by default; index.css overrides to position:fixed */
#event-modal {
  display: none;
}

.footer-circuit-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 24px;
  overflow: visible;
}

.footer-circuit-top svg {
  width: 100%;
  height: 24px;
}

/* Clean futuristic divider — thin segmented hairline + tiny terminal nodes.
   Replaces the previous animated SVG glow so the transition into the footer
   reads as a quiet edge instead of a colored stripe. */
.footer-divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  /* Dashed segmentation: tiny dashes with transparent gaps. The dash colour
     fades in at the centre and out at the edges so the line never feels
     like a solid bar across the screen. */
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 255, 65, 0.22) 18%,
      rgba(0, 255, 65, 0.32) 50%,
      rgba(0, 255, 65, 0.22) 82%,
      transparent 100%),
    linear-gradient(90deg,
      rgba(0, 255, 65, 0.55) 0,
      rgba(0, 255, 65, 0.55) 6px,
      transparent 6px,
      transparent 14px);
  background-size: 100% 1px, 14px 1px;
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  background-blend-mode: multiply;
}

/* Tiny terminal node accents — replaces the SVG circles with two small
   sharp markers so the divider still has structure without glow. */
.footer-divider::before,
.footer-divider::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 3px;
  height: 3px;
  background: rgba(0, 255, 65, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.footer-divider::before { left: clamp(20px, 8vw, 80px); }
.footer-divider::after  { right: clamp(20px, 8vw, 80px); }

/* Legacy aliases retained in case other templates still reference the
   original class names — they collapse to the same simple style. */
.footer-circuit-border,
.footer-circuit-border-line,
.footer-circuit-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,65,0.28) 50%, transparent 100%);
  pointer-events: none;
  overflow: hidden;
}

.footer-circuit-border svg,
.footer-circuit-top svg {
  display: none;
}

/* Base: stacked column for mobile */
.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vh, 40px);
  flex-wrap: wrap;
}

.footer-left,
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 16px);
}

.footer-logo img {
  height: clamp(52px, 5.5vw, 64px);
  width: clamp(52px, 5.5vw, 64px);
  object-fit: contain;
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: var(--font-head);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.footer-logo-text .l1 {
  font-family: var(--font-head);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.footer-logo-text .l2 {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.8vw, 13px);
  color: rgba(0, 255, 65, 0.55);
  letter-spacing: 0.22em;
}

.footer-logo-text span {
  display: block;
  font-size: clamp(11px, 0.78vw, 12px);
  color: rgba(0,255,65,0.55);
  letter-spacing: 0.22em;
}

.footer-logo-mark {
  width: 42px;
  height: 42px;
  border: 2px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 700;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,255,65,0.2);
  flex-shrink: 0;
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.16em;
  color: rgba(0, 255, 65, 0.45);
}

/* Base: centered horizontal layout on mobile */
.footer-right {
  /* Mobile: nav buttons on the left half, social icons hugging the right edge — same row. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Base: horizontal nav on mobile */
.footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.5);
  text-transform: uppercase;
  transition:
    color var(--duration-fast) var(--ease-electric),
    text-shadow var(--duration-fast) var(--ease-electric);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.6);
}

.footer-social,
.footer-socials {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.footer-social a,
.social-link,
.footer-social-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--duration-mid) var(--ease-electric),
    color var(--duration-fast) var(--ease-electric);
  text-decoration: none;
  color: rgba(0, 255, 65, 0.6);
  font-size: clamp(13px, 0.9vw, 16px);
}

.footer-social a:hover,
.social-link:hover,
.footer-social-btn:hover {
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--cyan);
  transform: translateY(-1px);
}

.footer-social a:focus-visible,
.footer-social-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: rgba(0, 255, 65, 0.6);
  transition: fill var(--duration-fast) var(--ease-electric);
}

.footer-social a:hover svg {
  fill: var(--cyan);
}

.footer-copyright,
.footer-copy {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.65vw, 10px);
  letter-spacing: 0.15em;
  color: rgba(0, 255, 65, 0.3);
  text-align: center;
  margin-top: 14px;
}

.footer-copy {
  max-width: 960px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 255, 65, 0.06);
}

/* Tablet landscape+: side-by-side footer; restore vertical stack inside footer-right */
@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-right {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
    gap: 16px;
  }
  .footer-nav {
    flex-direction: row;
    flex: 0 0 auto;
    justify-content: center;
    gap: 24px;
  }
  .footer-copyright,
  .footer-copy { margin-top: 0; }
}

/* ============================================================
   GLASS CARD BASE
============================================================ */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 4px;
}

/* ============================================================
   BUTTON BASE
============================================================ */
.btn-primary {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--cyan);
  padding: clamp(12px, 1.2vh, 20px) clamp(24px, 3vw, 56px);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--lime);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
  transform: translateY(-2px);
  color: var(--bg);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ============================================================
   PAGE CONTENT WRAPPER
============================================================ */
.page-content {
  position: relative;
  z-index: 2;
}

body:not(.loaded) .page-content { opacity: 0; }
body.loaded .page-content { opacity: 1; transition: opacity 0.4s 0.1s; }

/* ============================================================
   KEYFRAME ANIMATIONS
============================================================ */
@keyframes draw-trace {
  to { stroke-dashoffset: 0; }
}

@keyframes node-appear {
  to { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   UTILITIES
============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--bg);
  color: var(--cyan);
  border: 1px solid var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 8px;
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ============================================================
   VISUALEYEZ-STYLE ENTRY ANIMATION SYSTEM
   Initial states are set in CSS so JS has nothing to do before
   the hce:loaded event fires (no FOUC).
============================================================ */

/* Navbar: hidden above viewport, slides down on page load */
#navbar.entry-hidden,
.navbar.entry-hidden {
  opacity: 0;
  transform: translateY(-100px);
}

/* Nav link items: slightly above, invisible */
.nav-links li.entry-hidden,
.nav-links .entry-hidden {
  opacity: 0;
  transform: translateY(-10px);
}

/* Circuit canvas: scaled up, transparent */
#circuit-bg-canvas.entry-hidden {
  opacity: 0;
  transform: scale(1.15);
}

/* Hero hub: below, invisible */
.hero-hub.entry-hidden,
.hero-brand.entry-hidden {
  opacity: 0;
  transform: translateY(40px);
}

/* Hero eyebrow/tagline sub-elements */
.hero-eyebrow.entry-hidden,
.hero-tagline.entry-hidden {
  opacity: 0;
  transform: translateY(12px);
}

/* Hero events panel */
.hero-events-panel.entry-hidden {
  opacity: 0;
  transform: translateY(20px);
}

/* Letter spans for blur reveal (applied by JS to #hero-title chars).
   will-change is intentionally NOT set here — GSAP handles the
   animation once at page load and the spans then sit at their final
   state. A permanent will-change on every letter would blow Firefox's
   GPU memory budget. */
.letter-span {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(11px);
  transition: none; /* controlled by GSAP, not CSS transition */
}

/* Word wrapper: keeps each word together as a single unbreakable unit
   while still allowing line breaks between words on narrow viewports. */
.letter-word {
  display: inline-block;
  white-space: nowrap;
}

/* When not using GSAP (reduced motion fallback): instant reveal */
@media (prefers-reduced-motion: reduce) {
  .letter-span {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ============================================================
   SCROLL-TRIGGERED REVEAL SYSTEM
   Elements with [data-animate] start invisible and slide up.
   JS adds .animated when they enter viewport (80% threshold).
============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays for sibling groups */
[data-animate][data-delay="1"] { transition-delay: 0.08s; }
[data-animate][data-delay="2"] { transition-delay: 0.16s; }
[data-animate][data-delay="3"] { transition-delay: 0.24s; }
[data-animate][data-delay="4"] { transition-delay: 0.32s; }
[data-animate][data-delay="5"] { transition-delay: 0.40s; }
[data-animate][data-delay="6"] { transition-delay: 0.48s; }

/* Slide-from-left variant */
[data-animate="left"] {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="left"].animated {
  opacity: 1;
  transform: none;
}

/* Scale-up variant (for event cards) */
[data-animate="scale"] {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="scale"].animated {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MARQUEE STRIP (scrolling brand text between sections)
============================================================ */
.marquee-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  background:
    linear-gradient(90deg, rgba(0,255,65,0.04) 0%, rgba(0,110,255,0.03) 50%, rgba(0,255,170,0.04) 100%);
  border-top: 1px solid rgba(0, 255, 65, 0.15);
  border-bottom: 1px solid rgba(0, 255, 65, 0.15);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,65,0.55) 50%, transparent 100%);
}

.marquee-strip::before { top: 0; }
.marquee-strip::after  { bottom: 0; }

.marquee-strip + .marquee-strip {
  border-top: none;
  margin-top: -1px;
}

/* Endless seamless marquee loop.
   The track holds two IDENTICAL copies of the text. The keyframe
   translates the track from 0 to -50% of its own width, which is
   exactly one copy's width (because both copies are the same).
   At -50%, copy 2 occupies the on-screen position copy 1 had at
   0%, so when the animation iterates from -50% back to 0% the
   user sees identical content at every pixel — invisible wrap.
   Spacing is per-span padding so the box width includes its own
   trailing space; this keeps the seam (where copy 2 ends and
   copy 1 begins on the next loop) visually equivalent to the
   spacing between copy 1 and copy 2 inside the track. */
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  white-space: nowrap;
  /* Promote to its own compositor layer so the linear translate
     animation runs purely on the GPU. Eliminates the sub-pixel
     flicker some browsers can show at the iteration boundary. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.marquee-track.left {
  animation: marquee-loop 28s linear infinite;
}

.marquee-track.right {
  /* Reuse one keyframe (no separate "marquee-right") and play it
     in reverse. Two separate keyframes were the prior cause of the
     two tracks drifting out of phase. */
  animation: marquee-loop 36s linear infinite reverse;
  margin-top: 4px;
}

.marquee-track .marquee-text {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.4em;
  color: rgba(0, 255, 65, 0.4);
  text-transform: uppercase;
  flex-shrink: 0;
  /* Padding lives on each span so its box width INCLUDES its
     trailing space. With two such boxes back-to-back, the seam
     spacing = the in-track spacing = 80px. Symmetric. */
  padding: 0 40px;
}

.marquee-track.right .marquee-text {
  color: rgba(0, 255, 170, 0.25);
  font-size: clamp(8px, 0.6vw, 10px);
  letter-spacing: 0.5em;
}

@keyframes marquee-loop {
  from { transform: translate3d(0, 0, 0); }
  /* Three identical copies in the track means one copy = 1/3
     (33.333%) of the track. Translating exactly that distance
     advances the loop by one copy, putting copies 2 and 3 in the
     positions copies 1 and 2 just held. The wrap from -33.333%
     back to 0 is visually identical to staying still — invisible. */
  to   { transform: translate3d(-33.333%, 0, 0); }
}

/* Section divider lines retired — kept the rule so existing markup
   collapses without leaving a 1px row on the page. */
.section-divider-line {
  display: none;
}

/* ============================================================
   ACCESSIBILITY: prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Preserve key opacity transitions */
  .hero-video,
  #loading-screen,
  #page-transition {
    transition-duration: 0.3s !important;
  }

  /* Kill the ticker / marquee */
  .ticker-track,
  .ticker-inner,
  .marquee-track {
    animation: none !important;
  }

  /* Skip entry animations — show everything immediately */
  #navbar.entry-hidden,
  .navbar.entry-hidden,
  .nav-links li.entry-hidden,
  .hero-hub.entry-hidden,
  .hero-brand.entry-hidden,
  .hero-eyebrow.entry-hidden,
  .hero-tagline.entry-hidden,
  .hero-events-panel.entry-hidden,
  #circuit-bg-canvas.entry-hidden {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Kill scan sweep */
  .scanlines::after {
    animation: none !important;
  }

  /* Kill loading pulse */
  .loading-title,
  .loading-logo {
    animation: none !important;
    text-shadow: 0 0 20px var(--cyan);
  }

  /* Kill mobile-menu slide transition */
  .mobile-menu {
    transition: none !important;
  }

  /* Keep scroll progress but disable its transition */
  #scroll-progress {
    transition: none !important;
  }
}

/* ============================================================
   NEWSLETTER SIGNUP MODAL (global — present on all pages)
============================================================ */
#newsletter-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 5200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#newsletter-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.newsletter-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.newsletter-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #0a0a0a;
  border: 1px solid rgba(0, 255, 65, 0.22);
  border-radius: 6px;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 36px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(0, 255, 65, 0.08);
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition:
    transform var(--duration-slow) var(--ease-electric),
    opacity var(--duration-slow) var(--ease-electric);
}

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

.newsletter-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 2px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-electric),
    border-color var(--duration-fast) var(--ease-electric),
    color var(--duration-fast) var(--ease-electric),
    box-shadow var(--duration-fast) var(--ease-electric);
}

.newsletter-close:hover {
  background: rgba(0, 255, 65, 0.12);
  border-color: rgba(0, 255, 65, 0.55);
}

.newsletter-close:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.newsletter-header {
  margin-bottom: 22px;
}

.newsletter-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(0, 255, 65, 0.6);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.newsletter-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
  line-height: 1.1;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.newsletter-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.newsletter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(0, 255, 65, 0.55);
  text-transform: uppercase;
}

.newsletter-input-wrap {
  position: relative;
}

.newsletter-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 65, 0.25);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.02em;
  transition:
    border-color var(--duration-mid) var(--ease-electric),
    background var(--duration-mid) var(--ease-electric),
    box-shadow var(--duration-mid) var(--ease-electric);
  -webkit-appearance: none;
  appearance: none;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.newsletter-input:hover {
  border-color: rgba(0, 255, 65, 0.45);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.18);
}

.newsletter-submit {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  transition:
    gap var(--duration-mid) var(--ease-electric),
    background var(--duration-mid) var(--ease-electric),
    color var(--duration-mid) var(--ease-electric),
    transform var(--duration-mid) var(--ease-electric),
    box-shadow var(--duration-mid) var(--ease-electric);
}

.newsletter-submit .ecc-arrow {
  display: inline-block;
  transition: transform var(--duration-mid) var(--ease-electric);
}

.newsletter-submit:hover {
  gap: 14px;
}

.newsletter-submit:hover .ecc-arrow {
  transform: translateX(4px);
}

.newsletter-submit[disabled] {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.newsletter-status {
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
}

.newsletter-status.is-error {
  color: #ff5a5a;
}

.newsletter-status.is-success {
  color: var(--cyan);
}

@media (max-width: 480px) {
  .newsletter-box {
    padding: 34px 20px 26px;
  }
  .newsletter-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ============================================================
   ELECTRIC FUTURISTIC DESIGN SYSTEM
   Overlay layer — augments existing styles with a sleek,
   high-voltage aesthetic: animated current flow, holo hovers,
   scanline sweeps, glass inputs, and modern typography.
   ============================================================
============================================================ */

/* Extended tokens */
:root {
  --ease-electric: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-mid:    320ms;
  --duration-slow:   620ms;

  --grad-electric: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 48%, var(--lime) 100%);
  --grad-voltage:  linear-gradient(180deg, rgba(0,255,65,0) 0%, rgba(0,255,65,0.12) 50%, rgba(0,255,65,0) 100%);
  /* Clean green-on-green sweep: bright base cyan, deeper green shoulders, lime shine peak */
  --grad-text-sweep: linear-gradient(100deg,
    var(--cyan) 0%,
    #00b832 32%,
    #00e860 46%,
    var(--lime) 50%,
    #00e860 54%,
    #00b832 68%,
    var(--cyan) 100%);

  --glow-s: 0 0 8px rgba(0, 255, 65, 0.35);
  --glow-m: 0 0 18px rgba(0, 255, 65, 0.45), 0 0 40px rgba(0, 255, 170, 0.15);
  --glow-l: 0 0 26px rgba(0, 255, 65, 0.55), 0 0 60px rgba(0, 255, 170, 0.25);

  --font-body-modern:   'Space Grotesk', sans-serif;
  --font-code:          'JetBrains Mono', 'Share Tech Mono', monospace;
}

/* Smoother modern body typography while keeping theme */
body {
  font-family: var(--font-body-modern);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Electric keyframes ---------- */
@keyframes electric-pulse {
  0%, 100% { box-shadow: var(--glow-s); }
  50%      { box-shadow: var(--glow-m); }
}

@keyframes current-flow {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}

@keyframes holo-shimmer {
  0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: translateX(210%)  skewX(-18deg); opacity: 0; }
}

@keyframes scan-sweep {
  0%, 100% { transform: translateY(-120%); opacity: 0; }
  50%      { opacity: 0.4; }
  100%     { transform: translateY(120%);  opacity: 0; }
}

@keyframes voltage-flicker {
  0%, 100%            { opacity: 1; }
  42%, 44%            { opacity: 0.82; }
  43%                 { opacity: 0.6; }
  92%, 94%            { opacity: 0.9; }
}

@keyframes corner-blink {
  0%, 60%, 100% { opacity: 1; }
  70%, 90%      { opacity: 0.3; }
}

/* ---------- New thematic keyframes ---------- */
@keyframes data-flow-x {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; }
}

@keyframes data-flow-y {
  0%   { transform: translate3d(0, -100%, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}

@keyframes cta-breathe {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(0, 255, 65, 0.18),
      inset 0 0 18px rgba(0, 255, 65, 0.08);
  }
  50% {
    box-shadow:
      0 0 28px rgba(0, 255, 65, 0.34),
      inset 0 0 22px rgba(0, 255, 65, 0.12);
  }
}

@keyframes fade-rise {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Utility: animated circuit trace top border ----------
   Adds a thin neon line that "flows" across the top edge of any
   element. Hardware-accelerated (transform/opacity only).
*/
.circuit-trace-border {
  position: relative;
  isolation: isolate;
}
.circuit-trace-border::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan) 35%,
    var(--cyan-bright) 50%,
    var(--cyan) 65%,
    transparent 100%);
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  transition: opacity var(--duration-fast) var(--ease-electric);
  pointer-events: none;
  z-index: 1;
}
.circuit-trace-border:hover::before,
.circuit-trace-border:focus-within::before {
  animation: data-flow-x 1.6s var(--ease-electric) both;
  opacity: 1;
  will-change: transform, opacity;
}

/* ---------- Utility: electric border ---------- */
.electric-surface {
  position: relative;
  background: linear-gradient(180deg, rgba(0,20,10,0.65) 0%, rgba(0,10,5,0.85) 100%);
  border: 1px solid rgba(0, 255, 65, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

/* ============================================================
   PRIMARY BUTTON — REDESIGNED
   Dark voltage core, electric gradient border, animated scan,
   crisp corner cut, lift + glow on hover.
============================================================ */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-family: var(--font-code);
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;

  padding: clamp(12px, 1.2vh, 18px) clamp(26px, 3vw, 46px);
  min-height: 46px;

  color: var(--cyan);
  background:
    linear-gradient(180deg, rgba(0, 255, 65, 0.10) 0%, rgba(0, 0, 0, 0.55) 100%),
    rgba(0, 12, 6, 0.85);
  border: 1px solid rgba(0, 255, 65, 0.45);
  border-radius: 3px;

  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.45);
  box-shadow: var(--glow-s), inset 0 0 18px rgba(0, 255, 65, 0.08);

  transition:
    color var(--duration-mid) var(--ease-electric),
    background var(--duration-mid) var(--ease-electric),
    box-shadow var(--duration-mid) var(--ease-electric),
    transform var(--duration-mid) var(--ease-electric);

  animation: cta-breathe 3.6s ease-in-out infinite;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  animation: none;
}

/* Gradient current layer */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grad-electric);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-electric);
  animation: current-flow 3.6s linear infinite;
}

/* Scanline sheen */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: -1;
}

.btn-primary:hover {
  color: #031a0a;
  /* No letter-spacing change on hover — combined with overflow:hidden
     and nowrap, it pushes characters past the edge and clips them. */
  background: transparent;
  border-color: var(--lime);
  box-shadow: var(--glow-l), inset 0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after  { animation: holo-shimmer 0.9s var(--ease-electric) both; }

.btn-primary:active { transform: translateY(0); box-shadow: var(--glow-m); }

.btn-primary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.btn-primary .ecc-arrow,
.btn-primary [aria-hidden="true"]:last-child {
  display: inline-block;
  transition: transform var(--duration-mid) var(--ease-electric);
}
.btn-primary:hover .ecc-arrow,
.btn-primary:hover [aria-hidden="true"]:last-child {
  transform: translateX(6px);
}

/* Disabled / loading */
.btn-primary[disabled],
.btn-primary[aria-disabled="true"] {
  opacity: 0.5;
  filter: grayscale(0.3);
  cursor: wait;
  pointer-events: none;
}

/* ============================================================
   NAVBAR POLISH — holo backdrop + scan line beneath
============================================================ */
.navbar,
#navbar {
  background: linear-gradient(180deg, rgba(5,8,6,0.92) 0%, rgba(5,8,6,0.72) 100%);
  border-bottom: 1px solid rgba(0, 255, 65, 0.14);
}

.navbar::after,
#navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,65,0.65) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: current-flow 6s linear infinite;
  pointer-events: none;
  opacity: 0.55;
}

.nav-links a,
.nav-link {
  font-family: var(--font-code);
  letter-spacing: 0.28em;
  transition: color var(--duration-mid) var(--ease-electric),
              text-shadow var(--duration-mid) var(--ease-electric);
}

.nav-link.active {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0,255,65,0.9);
}

/* Logo emphasis */
.nav-logo-text .line1 {
  font-family: var(--font-head);
  background: var(--grad-text-sweep);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: current-flow 9s linear infinite;
}

.nav-logo-text .line2 {
  font-family: var(--font-code);
}

/* ============================================================
   GLASS / FORM INPUTS — electric styling
============================================================ */
.newsletter-input,
.form-input,
.form-textarea,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="tel"].form-input,
input[type="url"].form-input {
  font-family: var(--font-body-modern);
  background:
    linear-gradient(180deg, rgba(0,255,65,0.04) 0%, rgba(0,0,0,0.5) 100%);
  border: 1px solid rgba(0, 255, 65, 0.25);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color var(--duration-mid) var(--ease-electric),
              box-shadow  var(--duration-mid) var(--ease-electric),
              background  var(--duration-mid) var(--ease-electric);
}

.newsletter-input:hover,
.form-input:hover,
.form-textarea:hover {
  border-color: rgba(0, 255, 65, 0.55);
  box-shadow: inset 0 0 18px rgba(0,255,65,0.05);
}

.newsletter-input:focus,
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow:
    0 0 0 3px rgba(0, 255, 65, 0.18),
    0 0 22px rgba(0, 255, 65, 0.22),
    inset 0 0 14px rgba(0, 255, 65, 0.07);
  background:
    linear-gradient(180deg, rgba(0,255,65,0.08) 0%, rgba(0,0,0,0.7) 100%);
}

.form-label,
.newsletter-label {
  font-family: var(--font-code);
}

/* ============================================================
   CONTACT CARDS / GENERIC CARDS — electric hover
============================================================ */
.contact-card,
.card,
[class*="event-card"] {
  transition:
    transform var(--duration-mid) var(--ease-electric),
    border-color var(--duration-mid) var(--ease-electric),
    box-shadow var(--duration-mid) var(--ease-electric);
}

.contact-card:hover {
  border-color: rgba(0, 255, 65, 0.55);
  box-shadow: var(--glow-m);
  transform: translateY(-4px);
}

/* Corner markers for HUD feel — purely decorative */
.contact-card::before,
.contact-card::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--duration-mid), border-color var(--duration-mid);
}
.contact-card::before {
  top: 6px; left: 6px;
  border-right: none; border-bottom: none;
}
.contact-card::after {
  bottom: 6px; right: 6px;
  border-left: none; border-top: none;
}
.contact-card:hover::before,
.contact-card:hover::after {
  border-color: var(--lime);
  opacity: 1;
  animation: corner-blink 1.6s ease-in-out infinite;
}

/* ============================================================
   FOOTER — quiet hairline divider + sleek socials
============================================================ */

.footer-copyright,
.footer-copy {
  font-family: var(--font-code);
  letter-spacing: 0.22em;
}

.footer-tagline {
  font-family: var(--font-code);
  animation: voltage-flicker 7s ease-in-out infinite;
}

.footer-social a,
.footer-social-btn {
  position: relative;
  transition: color var(--duration-mid) var(--ease-electric),
              transform var(--duration-mid) var(--ease-electric);
}

.footer-social a:hover,
.footer-social-btn:hover {
  color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: none;
  border: none;
}

/* ============================================================
   GLOBAL HEADINGS + ACCENTS — modern, sharp
============================================================ */
h1, h2, h3,
.hero-title,
.section-title,
.form-title,
.card-title,
.newsletter-title {
  font-family: var(--font-head);
  letter-spacing: 0.02em;
}

.hero-eyebrow,
.newsletter-eyebrow,
.section-eyebrow {
  font-family: var(--font-code);
  letter-spacing: 0.42em;
}

/* Selection + link accent polish */
a:not(.btn-primary):not(.nav-link):not(.footer-social-btn):hover {
  text-shadow: 0 0 10px rgba(0,255,65,0.6);
}

/* Flash messages — match electric theme */
.flash {
  font-family: var(--font-code);
  border: 1px solid rgba(0,255,65,0.3);
  background: linear-gradient(180deg, rgba(0,255,65,0.06) 0%, rgba(0,0,0,0.7) 100%);
  color: var(--text-primary);
  box-shadow: var(--glow-s);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ============================================================
   REDUCED MOTION — disable continuous animations
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary::before,
  .navbar::after,
  #navbar::after,
  #site-footer .footer-circuit-border::after,
  .nav-logo-text .line1,
  .footer-tagline,
  .contact-card:hover::before,
  .contact-card:hover::after,
  .circuit-trace-border:hover::before,
  .circuit-trace-border:focus-within::before {
    animation: none !important;
  }
}