/* VEKTRON Technologies — Brand Standards v1.6.0 LOCKED
   Palette: Obsidian #0F0F12, Vektron Violet #53268E (primary), Plasma Glow accents, Command Amber CTA
   Typography: Nyctos v2.1.0 (Universal V Doctrine — every V is the wing mark) / Chakra Petch fallback
   Density: Spacious — landing experience with dramatic hero moments
   Authority: Markell Winters-Edwards, Founder/CEO */

/* ========================================
   NYCTOS — Universal Typeface
   ======================================== */

@font-face {
  font-family: 'Nyctos';
  src: url('./assets/fonts/Nyctos-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nyctos';
  src: url('./assets/fonts/Nyctos-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nyctos';
  src: url('./assets/fonts/Nyctos-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nyctos';
  src: url('./assets/fonts/Nyctos-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nyctos';
  src: url('./assets/fonts/Nyctos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
  /* Type Scale (fluid) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Fonts — Nyctos universal */
  --font-body: 'Nyctos', system-ui, -apple-system, sans-serif;
  --font-display: 'Nyctos', system-ui, -apple-system, sans-serif;

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== VEKTRON v1.6.0 LOCKED PALETTE ===== */

  /* Surfaces */
  --color-bg:               #0F0F12;  /* Obsidian — canonical background */
  --color-surface:          #14141A;
  --color-surface-2:        #1A1A22;
  --color-surface-offset:   #20202C;
  --color-surface-dynamic:  #26263A;
  --color-gunmetal:         #2D2D32;
  --color-divider:          rgba(83, 38, 142, 0.18);
  --color-border:           rgba(83, 38, 142, 0.28);

  /* Text */
  --color-text:             #FFFFFF;  /* Foreground white */
  --color-text-muted:       #C8C8D2;  /* Dim White — tertiary */
  --color-text-faint:       #6E6E7E;
  --color-text-inverse:     #0F0F12;

  /* Primary: Vektron Violet #53268E (LOCKED — only canonical brand color) */
  --color-primary:          #53268E;
  --color-primary-hover:    #6633A8;
  --color-primary-active:   #401C70;

  /* Atmospheric accents (never the canonical mark fill) */
  --color-primary-glow:     #B388FF;  /* Plasma Glow */
  --color-ultraviolet:      #7B2FBE;
  --color-circuit-violet:   #9B5CE6;

  /* CTA: Command Amber */
  --color-cta:              #FFD54F;
  --color-cta-hover:        #FFE082;
  --color-cta-active:       #FFC107;

  /* Subsidiary Accent Colors (atmospheric only, all violet family) */
  --color-v-tuning:         #B388FF;
  --color-v-power:          #9B5CE6;
  --color-v-performance:    #7B2FBE;
  --color-defense:          #FFD54F;
  --color-labs:             #C8B4FF;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Glows (Vektron Violet) */
  --glow-primary: 0 0 20px rgba(83, 38, 142, 0.45);
  --glow-primary-intense: 0 0 30px rgba(83, 38, 142, 0.55), 0 0 60px rgba(83, 38, 142, 0.25);
}


/* ========================================
   GRID OVERLAY (Background texture)
   ======================================== */

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.grid-overlay::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(rgba(83, 38, 142, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 38, 142, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-drift 30s linear infinite;
}

@keyframes grid-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Scan-line texture */
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  z-index: 2;
}


/* ========================================
   UTILITY CLASSES
   ======================================== */

.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--content-default);
}

.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-glow);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-label::before {
  content: '::';
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-shadow: 0 0 12px rgba(83, 38, 142, 0.6);
  transform: translateY(-1px);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 65ch;
}


/* ========================================
   HEADER / NAV
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-6);
  background: rgba(15, 15, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  isolation: isolate;
}

.header-logo img {
  height: 44px;
  width: auto;
  display: block;
  transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter;
}

/* Smooth chromatic aberration on hover — no jitter, no rotation.
   Two opposite-direction Plasma/Ultraviolet drop-shadows plus a soft
   Plasma halo. Fades in/out via the filter transition. */
.header-logo:hover img,
.header-logo:focus-visible img {
  filter:
    drop-shadow(1.5px 0 0 rgba(179, 136, 255, 0.9))
    drop-shadow(-1.5px 0 0 rgba(123, 47, 190, 0.9))
    drop-shadow(0 0 14px rgba(179, 136, 255, 0.45));
}

/* Holographic sheen — a diagonal iridescent band that sweeps across the
   signature once on hover. color-dodge blends against the dark header
   so the band reads as foil light, not a paint stripe. */
.header-logo::after {
  content: '';
  position: absolute;
  inset: -4px -8px -4px -8px;
  border-radius: 6px;
  background-image: linear-gradient(
    115deg,
    transparent 38%,
    rgba(83, 38, 142, 0.25) 46%,
    rgba(179, 136, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    rgba(123, 47, 190, 0.55) 54%,
    rgba(83, 38, 142, 0.25) 58%,
    transparent 66%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 320ms ease;
}

.header-logo:hover::after,
.header-logo:focus-visible::after {
  opacity: 0.9;
  animation: headerLogoSheen 1300ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes headerLogoSheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .header-logo img,
  .header-logo:hover img,
  .header-logo:focus-visible img { filter: none; transition: none; }
  .header-logo::after { display: none; }
}

.header-logo-text {
  display: none; /* Composite signature already contains the wordmark */
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.header-nav a {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--transition-interactive);
}

.header-nav a:hover {
  color: var(--color-primary-glow);
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary-glow);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav a:hover::after {
  width: 100%;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-interactive), opacity var(--transition-interactive);
}

@media (max-width: 768px) {
  /* Take the <nav> wrapper out of the flex flow so the empty wrapper does
     not consume horizontal space and shove the hamburger to the center. */
  .site-header nav { display: contents; }
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(15, 15, 18, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-6);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
  }
  .header-nav.is-open { display: flex; }
  .header-nav a { font-size: var(--text-sm); }
}


/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-32) var(--space-6) var(--space-16);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: var(--content-default);
}

.hero-logo {
  width: clamp(280px, 50vw, 640px);
  height: auto;
  margin: 0 auto var(--space-8);
  filter: drop-shadow(0 0 48px rgba(83, 38, 142, 0.5));
  transform: translateZ(0);
  will-change: filter, transform;
  cursor: default;
}

/* Hero signature — burst on hover/focus, then recede to resting glow.
   Uses the canonical vMarkBurst vocabulary but tuned for the larger
   composite signature (smaller offsets relative to mark width).
   Slow tail so the lockup feels weighty and "powered on", not jittery. */
.hero-logo:hover,
.hero-logo:focus-visible {
  animation: heroLogoBurst 880ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes heroLogoBurst {
  0%   { filter: drop-shadow(0 0 48px rgba(83, 38, 142, 0.5));
         transform: translate(0, 0) scale(1); }
  14%  { filter: drop-shadow(2px 0 0 #B388FF) drop-shadow(-2px 0 0 #7B2FBE)
                 drop-shadow(0 0 36px rgba(179, 136, 255, 0.55));
         transform: translate(1.5px, -0.5px) scale(1.005); }
  30%  { filter: drop-shadow(-4px 0 0 #B388FF) drop-shadow(4px 0 0 #7B2FBE)
                 drop-shadow(0 0 52px rgba(179, 136, 255, 0.75));
         transform: translate(-2px, 1px) scale(1.012); }
  46%  { filter: drop-shadow(-3px 0 0 #B388FF) drop-shadow(3px 0 0 #7B2FBE)
                 drop-shadow(0 0 44px rgba(179, 136, 255, 0.65));
         transform: translate(-1.5px, 0.5px) scale(1.01); }
  65%  { filter: drop-shadow(1px 0 0 #B388FF) drop-shadow(-1px 0 0 #7B2FBE)
                 drop-shadow(0 0 40px rgba(179, 136, 255, 0.45));
         transform: translate(0.5px, 0) scale(1.005); }
  100% { filter: drop-shadow(0 0 48px rgba(83, 38, 142, 0.5));
         transform: translate(0, 0) scale(1); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-inline: var(--space-4);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive);
}

.hero-cta--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 1px rgba(83, 38, 142, 0.4), var(--glow-primary);
}
.hero-cta--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--glow-primary-intense);
}

.hero-cta--ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.hero-cta--ghost:hover {
  border-color: var(--color-primary-glow);
  color: var(--color-primary-glow);
  background: rgba(83, 38, 142, 0.08);
}

.hero-tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-10);
}

.hero-tagline em {
  color: var(--color-primary-glow);
  font-style: normal;
}

.hero-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.03em;
  max-width: 52ch;
  margin: 0 auto;
}

.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: scroll-pulse 2s ease-in-out infinite;
}

.scroll-indicator svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-faint);
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.8; transform: translateX(-50%) translateY(6px); }
}

/* Keep the trademark glued to the last word so "Level.™" never
   wraps onto its own line on narrow viewports (Galaxy S21 et al). */
.hero-tagline .nowrap-tm {
  white-space: nowrap;
}

/* On phones the hero CTAs end up close to the bottom of the viewport
   and the absolutely-positioned scroll cue starts to fight the buttons
   for tap area. Hide it on small viewports — the cue is desktop-only
   polish, not load-bearing UX. */
@media (max-width: 768px), (max-height: 720px) {
  .scroll-indicator {
    display: none;
  }
}

/* Hero glow orb — subtle background */
.hero::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(83, 38, 142, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


/* ========================================
   ABOUT / VISION SECTION
   ======================================== */

.about {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-6);
  position: relative;
}

.about-content {
  max-width: var(--content-wide);
  margin-inline: auto;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-primary-glow);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}


/* ========================================
   DIVISIONS SECTION
   ======================================== */

.divisions {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-6);
  position: relative;
  background: var(--color-surface);
}

.divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--space-6);
  max-width: var(--content-wide);
  margin-inline: auto;
  margin-top: var(--space-10);
}

.division-card {
  background: var(--color-surface-2);
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.division-card:hover {
  transform: translateY(-3px);
}

.division-card-logo {
  height: 64px;
  width: auto;
  margin-bottom: var(--space-5);
  object-fit: contain;
}

.division-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.division-card-subtitle {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.division-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Division accents — LOCKED to violet family per brand standards v1.6.0 (no teal/green/red) */
.division-card {
  border-color: rgba(83, 38, 142, 0.22);
}
.division-card .division-card-name {
  color: var(--color-text);
}
.division-card .division-card-subtitle {
  color: var(--color-primary-glow);
}
.division-card:hover {
  border-color: rgba(83, 38, 142, 0.55);
  box-shadow: 0 0 32px rgba(83, 38, 142, 0.28), 0 0 60px rgba(123, 47, 190, 0.12), 0 8px 32px rgba(0,0,0,0.35);
}

/* Variant-specific tint of the subtitle for visual variety while staying on-brand */
.division-card--v-tuning .division-card-subtitle    { color: #B388FF; }
.division-card--v-power .division-card-subtitle     { color: #9B5CE6; }
.division-card--v-performance .division-card-subtitle { color: #7B2FBE; }
.division-card--labs .division-card-subtitle        { color: #C8B4FF; }


/* ========================================
   SERVICES SECTION
   ======================================== */

.services {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-6);
  position: relative;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}

.service-card:hover {
  border-color: rgba(83, 38, 142, 0.35);
  box-shadow: 0 0 20px rgba(83, 38, 142, 0.15);
}

.service-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  color: var(--color-primary-glow);
}

.service-icon svg {
  width: 100%;
  height: 100%;
}

.service-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.service-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.service-pricing {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-glow);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.service-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: var(--space-3);
}


/* ========================================
   CONTACT SECTION
   ======================================== */

.contact-section {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-6);
  position: relative;
  background: var(--color-bg);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.contact-card-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--space-4);
  color: var(--color-primary-glow);
}

.contact-card-icon svg {
  width: 100%;
  height: 100%;
}

.contact-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.contact-card-link {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  color: var(--color-primary-glow);
  text-decoration: none;
  transition: color var(--transition-interactive);
  text-align: center;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Cloudflare email obfuscation wraps the link contents in a span — keep it centered */
.contact-card-link .__cf_email__,
.contact-card-link [data-cfemail] {
  display: inline-block;
  text-align: center;
}

.contact-card-link:hover {
  color: var(--color-cta);
}

.contact-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding: var(--space-12) var(--space-6) var(--space-8);
}

.footer-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  isolation: isolate;
  cursor: pointer;
}

.footer-brand img {
  height: 40px;
  width: auto;
  display: block;
  transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter;
}

/* Same holographic vocabulary as the header signature — smooth chromatic
   aberration + Plasma halo on the img, foil sheen sweep via ::after. */
.footer-brand:hover img,
.footer-brand:focus-visible img {
  filter:
    drop-shadow(1.5px 0 0 rgba(179, 136, 255, 0.9))
    drop-shadow(-1.5px 0 0 rgba(123, 47, 190, 0.9))
    drop-shadow(0 0 14px rgba(179, 136, 255, 0.45));
}

.footer-brand::after {
  content: '';
  position: absolute;
  inset: -4px -8px -4px -8px;
  border-radius: 6px;
  background-image: linear-gradient(
    115deg,
    transparent 38%,
    rgba(83, 38, 142, 0.25) 46%,
    rgba(179, 136, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    rgba(123, 47, 190, 0.55) 54%,
    rgba(83, 38, 142, 0.25) 58%,
    transparent 66%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 320ms ease;
}

.footer-brand:hover::after,
.footer-brand:focus-visible::after {
  opacity: 0.9;
  animation: headerLogoSheen 1300ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand img,
  .footer-brand:hover img,
  .footer-brand:focus-visible img { filter: none; transition: none; }
  .footer-brand::after { display: none; }
}

.footer-brand-text {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
}

.footer-contact {
  text-align: right;
}

.footer-contact p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.footer-contact a {
  color: var(--color-primary-glow);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

.footer-contact a:hover {
  color: var(--color-cta);
}

.footer-divider {
  height: 1px;
  background: var(--color-divider);
  margin-bottom: var(--space-6);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Legal links — left-to-right Plasma scan-line underline plus a whisper
   of chromatic split on the text. HUD spec-sheet vibe, not marketing
   button. The scan animates from the left so it reads as a system
   acknowledging the cursor. */
.footer-links a {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color 280ms ease, text-shadow 280ms ease;
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: linear-gradient(90deg,
    rgba(179, 136, 255, 0.95) 0%,
    rgba(83, 38, 142, 0.6) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-primary-glow);
  text-shadow:
    0.75px 0 rgba(179, 136, 255, 0.7),
    -0.75px 0 rgba(123, 47, 190, 0.7);
  outline: none;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a,
  .footer-links a::after { transition: none; }
  .footer-links a:hover::after,
  .footer-links a:focus-visible::after { transform: scaleX(1); }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.footer-legal {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
}

/* Footer brand tagline — Plasma Glow #B388FF (atmospheric accent, on-brand).
   Was Command Amber, which is locked as CTA-only per brand standards. */
.footer-classified {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary-glow);
  opacity: 0.85;
  transition: opacity 240ms ease, text-shadow 320ms ease;
  cursor: default;
}
.footer-classified:hover {
  opacity: 1;
  animation: chromaticBurstText 780ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

.footer-attribution {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.footer-attribution a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

.footer-attribution a:hover {
  color: var(--color-primary-glow);
}

@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-contact { text-align: left; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .footer-classified {
    font-size: clamp(0.6rem, 2.5vw, var(--text-xs));
    word-break: break-word;
  }
}


/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

.reveal {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

.reveal-clip {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .reveal-clip {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    animation: reveal-clip-anim linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@keyframes reveal-clip-anim {
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}


/* ========================================
   HERO PARTICLES / AMBIENT EFFECTS
   ======================================== */

.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Horizontal scan lines at very low opacity */
.hero-ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(83, 38, 142, 0.015) 3px,
    rgba(83, 38, 142, 0.015) 6px
  );
}

/* Subtle radial vignette */
.hero-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(15, 15, 18, 0.6) 100%);
}


/* ========================================
   PLATFORM SECTION (V-Tuning showcase)
   ======================================== */

.platform {
  position: relative;
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(83, 38, 142, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(123, 47, 190, 0.06) 0%, transparent 50%),
    var(--color-bg);
  overflow: hidden;
}

.platform::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(83, 38, 142, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 38, 142, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

.platform-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .platform-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

.platform-features {
  list-style: none;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-left: var(--space-2);
}

.platform-features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.feature-bullet {
  width: 10px;
  height: 10px;
  margin: 6px 0 0 4px;
  background: var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(83, 38, 142, 0.7);
  transform: rotate(45deg);
}

.platform-features strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
}

.platform-features span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* feature-bullet defined above with .platform-features */

.platform-meta {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(83, 38, 142, 0.18);
  color: var(--color-primary-glow);
  border: 1px solid rgba(83, 38, 142, 0.5);
  border-radius: var(--radius-full);
  box-shadow: 0 0 18px rgba(83, 38, 142, 0.25);
}

.platform-badge--soft {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.platform-card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(180deg, rgba(83, 38, 142, 0.18) 0%, rgba(20, 20, 26, 0.95) 100%);
  border: 1px solid rgba(83, 38, 142, 0.4);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.platform-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary-glow), transparent);
}

.platform-card-mark {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
  filter: drop-shadow(0 0 24px rgba(83, 38, 142, 0.6));
}

.platform-card-mark img {
  width: 120px;
  height: auto;
  position: relative;
  z-index: 2;
}

/* =====================================================================
   CHROMATIC BURST — the canonical VEKTRON hover language.

   Doctrine: the mid-burst chromatic-aberration state of the V mark is the
   brand's signature "interactive" beat. We extend it to any element a user
   might hover or focus — CTAs, section labels, stat values, nav links —
   so the whole site "reacts" with the same vocabulary. Hit it, it ignites,
   it relaxes. No scan-sweeps, no parked glare, no ambient flicker.

   Two animation flavors:
   - vMarkBurst : drop-shadow chromatic offsets, for the V mark IMAGE
   - chromaticBurst : text-shadow chromatic offsets, for TEXT elements
   ===================================================================== */

/* --- V-Tuning V mark --- */
.platform-card-mark--glitch {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-6);
  cursor: pointer;
}

.platform-card-mark--glitch img {
  width: 120px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 24px rgba(83, 38, 142, 0.55));
  transform: translateZ(0);
  will-change: filter, transform;
}

.platform-card-mark--glitch:hover img,
.platform-card-mark--glitch:focus-visible img {
  animation: vMarkBurst 760ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes vMarkBurst {
  /* Ignite → hold the chromatic peak → recede to clean resting state. */
  0%   { filter: drop-shadow(0 0 24px rgba(83, 38, 142, 0.55));
         transform: translate(0, 0) scale(1); }
  12%  { filter: drop-shadow(2px 0 0 #B388FF) drop-shadow(-2px 0 0 #7B2FBE)
                 drop-shadow(0 0 18px rgba(179, 136, 255, 0.6));
         transform: translate(2px, -1px) scale(1.02); }
  28%  { filter: drop-shadow(-3.5px 0 0 #B388FF) drop-shadow(3.5px 0 0 #7B2FBE)
                 drop-shadow(0 0 26px rgba(179, 136, 255, 0.85));
         transform: translate(-2.5px, 1.5px) scale(1.04); }
  42%  { filter: drop-shadow(-3px 0 0 #B388FF) drop-shadow(3px 0 0 #7B2FBE)
                 drop-shadow(0 0 24px rgba(179, 136, 255, 0.78));
         transform: translate(-2px, 1px) scale(1.035); }
  60%  { filter: drop-shadow(1.5px 0 0 #B388FF) drop-shadow(-1.5px 0 0 #7B2FBE)
                 drop-shadow(0 0 20px rgba(179, 136, 255, 0.5));
         transform: translate(0.5px, 0) scale(1.015); }
  80%  { filter: drop-shadow(0 0 26px rgba(83, 38, 142, 0.65));
         transform: translate(0, 0) scale(1.005); }
  100% { filter: drop-shadow(0 0 24px rgba(83, 38, 142, 0.55));
         transform: translate(0, 0) scale(1); }
}

/* --- Text chromatic burst (reusable across the site) ---
   v3 doctrine: bring back the JUMP. A small, fast translate gives the
   power-up energy the V mark burst has; without it the text-shadow
   alone reads as slide/blur. Offsets are wider (up to 3.5px) and crisp
   — NO heavy glow halo — so chromatic aberration registers as a sharp
   color split, not a haze. Short total duration keeps it punchy. */
@keyframes chromaticBurstText {
  0%   { transform: translate(0, 0);
         text-shadow: none; }
  10%  { transform: translate(-1px, -1px);
         text-shadow: 2px 0 #B388FF, -2px 0 #7B2FBE; }
  24%  { transform: translate(2px, 1px);
         text-shadow: 3.5px 0 #B388FF, -3.5px 0 #7B2FBE,
                       0 0 5px rgba(179, 136, 255, 0.40); }
  40%  { transform: translate(-1.5px, 0);
         text-shadow: 3px 0 #B388FF, -3px 0 #7B2FBE,
                       0 0 4px rgba(179, 136, 255, 0.32); }
  58%  { transform: translate(1px, 0);
         text-shadow: 2px 0 #B388FF, -2px 0 #7B2FBE; }
  78%  { transform: translate(0, 0);
         text-shadow: 1px 0 #B388FF, -1px 0 #7B2FBE; }
  100% { transform: translate(0, 0);
         text-shadow: none; }
}

/* Subtle variant — nav chrome only. Same chromatic vocabulary, but
   movement is near-imperceptible (≤0.5px) so it reads as premium
   polish rather than a button doing aerobics. Future-facing, not jittery. */
@keyframes chromaticBurstTextSubtle {
  0%   { transform: translate(0, 0);
         text-shadow: none; }
  20%  { transform: translate(-0.5px, 0);
         text-shadow: 1.25px 0 #B388FF, -1.25px 0 #7B2FBE; }
  45%  { transform: translate(0.5px, 0);
         text-shadow: 2px 0 #B388FF, -2px 0 #7B2FBE; }
  70%  { transform: translate(0, 0);
         text-shadow: 1px 0 #B388FF, -1px 0 #7B2FBE; }
  100% { transform: translate(0, 0);
         text-shadow: none; }
}

/* Hero CTA buttons — chromatic on the label when hovered/focused. */
.hero-cta {
  position: relative;
  isolation: isolate;
  will-change: text-shadow;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  animation: chromaticBurstText 560ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Section labels (:: ABOUT US, :: FLAGSHIP PLATFORM, etc.) */
.section-label {
  display: inline-block;
  cursor: default;
  will-change: text-shadow;
}
.section-label:hover {
  animation: chromaticBurstText 520ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Stat values — hover the number, it ignites. */
.stat-value {
  display: inline-block;
  cursor: default;
  will-change: text-shadow;
}
.stat-item:hover .stat-value,
.stat-value:hover {
  animation: chromaticBurstText 560ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Header nav links */
.header-nav a {
  display: inline-block;
  will-change: text-shadow;
}
.header-nav a:hover,
.header-nav a:focus-visible {
  animation: chromaticBurstTextSubtle 540ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Platform badge (Patent Pending :: USPTO) */
.platform-badge {
  display: inline-flex;
  will-change: text-shadow;
}
.platform-badge:hover {
  animation: chromaticBurstText 540ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Founder pull-quote: hover affordance is now the opacity ramp on the
   giant decorative quote glyphs (see .founder-quote::before/::after).
   The old chromatic burst targeted the small ":: FOUNDER" label, which
   no longer exists — leaving this stub for documentation only. */

/* Hero tagline em ("Precision at the Binary Level.") — ignite on hover */
.hero-tagline em {
  display: inline-block;
  cursor: default;
  will-change: text-shadow;
}
.hero-tagline em:hover {
  animation: chromaticBurstText 580ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Honor reduced-motion across all burst variants. */
@media (prefers-reduced-motion: reduce) {
  .platform-card-mark--glitch:hover img,
  .platform-card-mark--glitch:focus-visible img,
  .hero-logo:hover, .hero-logo:focus-visible,
  .hero-cta:hover, .hero-cta:focus-visible,
  .hero-tagline em:hover,
  .section-label:hover,
  .stat-item:hover .stat-value, .stat-value:hover,
  .header-nav a:hover, .header-nav a:focus-visible,
  .platform-badge:hover,
  .footer-classified:hover {
    animation: none;
  }
  .founder-quote:hover::before,
  .founder-quote:hover::after {
    width: 22px;
    height: 22px;
    transition: none;
  }
}

/* :: separator chip used throughout the platform card and meta */
.cyber-sep {
  color: var(--color-primary-glow);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 var(--space-2);
  opacity: 0.9;
}

.platform-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.platform-card-name .cyber-sep {
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.platform-card-tagline {
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: italic;
  color: var(--color-primary-glow);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-8);
}

.platform-card-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  text-align: left;
  border-top: 1px solid rgba(83, 38, 142, 0.25);
  padding-top: var(--space-6);
}

.platform-card-stack > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.platform-card-stack span {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.platform-card-stack strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}


/* ========================================
   DIVISIONS — mark + badge additions
   ======================================== */

.division-card-mark {
  display: flex;
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 0 18px rgba(83, 38, 142, 0.5));
}

.division-card-mark img {
  height: 36px;
  width: auto;
}

.division-card-badge {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255, 213, 79, 0.1);
  color: var(--color-cta);
  border: 1px solid rgba(255, 213, 79, 0.35);
  border-radius: var(--radius-full);
}


/* ========================================
   FOUNDER SECTION
   ======================================== */

.founder {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(83, 38, 142, 0.08) 0%, transparent 55%),
    var(--color-bg);
}

.founder-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* ============================================================
   FOUNDER PHOTO — Holographic-card easter egg
   ------------------------------------------------------------
   Mousemove tilts the portrait on a perspective stage, while three
   overlay layers (iridescent diagonal sheen, cursor-following radial
   glare, chromatic violet edge) light up to evoke a holographic
   trading card. Palette is locked to VEKTRON Violet / Plasma /
   Ultraviolet — no rainbow, no off-brand spectra. Reduced-motion
   users get a static, calm portrait.
   ============================================================ */
.founder-photo {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  perspective: 1200px;
  transform-style: preserve-3d;
  /* Browser hands off ALL touch gestures over the card so the holo
     tilt isn't fighting the page scroll. Users scroll past the card
     by starting their swipe above or below it. */
  touch-action: none;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 50%;
  --shine-pos: 50%;
  --holo-intensity: 0;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(83, 38, 142, 0.18);
  transition: box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.founder-photo[data-holo].is-active {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(83, 38, 142, 0.35),
    0 0 110px rgba(179, 136, 255, 0.22);
}

.founder-photo img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotateY(var(--tilt-x)) rotateX(var(--tilt-y));
  transform-origin: center center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  position: relative;
  z-index: 1;
}

.founder-photo[data-holo].is-active img {
  transition: transform 80ms linear;
}

/* Existing bottom darkening — keep above the photo for readability
   but below the holo layers so it doesn't fight the sheen. */
.founder-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 15, 18, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Iridescent diagonal sheen — VEKTRON-themed (violet → plasma → ultraviolet).
   Position scans with the cursor. color-dodge over the portrait gives the
   metallic "foil" pop without recoloring skin tones. */
.founder-photo-shine {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent calc(var(--shine-pos) - 32%),
    rgba(83, 38, 142, 0.22) calc(var(--shine-pos) - 16%),
    rgba(179, 136, 255, 0.55) calc(var(--shine-pos) - 4%),
    rgba(255, 255, 255, 0.38) var(--shine-pos),
    rgba(123, 47, 190, 0.55) calc(var(--shine-pos) + 4%),
    rgba(83, 38, 142, 0.22) calc(var(--shine-pos) + 16%),
    transparent calc(var(--shine-pos) + 32%),
    transparent 100%
  );
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.founder-photo[data-holo].is-active .founder-photo-shine {
  opacity: var(--holo-intensity, 0.85);
  transition: opacity 120ms linear;
}

/* Cursor-following radial glare — screen blend so it brightens highlights
   without staining shadows. The radius (240px) is sized for the 520-wide
   portrait — large enough to feel like a real specular hot spot. */
.founder-photo-glare {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 240px at var(--glare-x) var(--glare-y),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(179, 136, 255, 0.30) 28%,
    transparent 62%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 4;
}

.founder-photo[data-holo].is-active .founder-photo-glare {
  opacity: var(--holo-intensity, 0.75);
  transition: opacity 100ms linear;
}

/* Chromatic Plasma edge — inset 1px line + soft inner glow that ignites
   on hover. Lives above everything so it reads as the card's metallic rim. */
.founder-photo-edge {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(179, 136, 255, 0),
    inset 0 0 40px rgba(83, 38, 142, 0);
  transition: box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.founder-photo[data-holo].is-active .founder-photo-edge {
  box-shadow:
    inset 0 0 0 1px rgba(179, 136, 255, 0.5),
    inset 0 0 70px rgba(83, 38, 142, 0.4);
}

/* Reduced motion — calm portrait, no tilt, no sheen. Keep the soft
   violet shadow that the card always had. */
@media (prefers-reduced-motion: reduce) {
  .founder-photo[data-holo] img { transform: none !important; transition: none; }
  .founder-photo-shine,
  .founder-photo-glare { display: none; }
  .founder-photo[data-holo].is-active { box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(83, 38, 142, 0.18); }
  .founder-photo[data-holo].is-active .founder-photo-edge { box-shadow:
    inset 0 0 0 1px rgba(179, 136, 255, 0.25),
    inset 0 0 30px rgba(83, 38, 142, 0.18); }
}

.founder-meta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-sm);
}

.founder-link {
  color: var(--color-primary-glow);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 136, 255, 0.4);
  padding-bottom: 2px;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}

.founder-link:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.founder-divider {
  width: 24px;
  height: 1px;
  background: var(--color-border);
}

.founder-location {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ========================================
   FOOTER — trademark micro-text
   ======================================== */

.footer-tm {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  color: var(--color-text-faint);
  max-width: 64ch;
  line-height: 1.6;
}


/* ========================================
   FOUNDER PULL QUOTE
   ======================================== */

.founder-quote {
  position: relative;
  margin: var(--space-6) 0 var(--space-8) 0;
  padding: var(--space-10) var(--space-9) var(--space-9) var(--space-9);
  background: linear-gradient(180deg, rgba(83, 38, 142, 0.10) 0%, rgba(83, 38, 142, 0.02) 100%);
  border: 1px solid rgba(83, 38, 142, 0.35);
  border-radius: 6px;
  overflow: visible;
}

/* HUD corner brackets — top-left and bottom-right. Drawn from CSS borders
   (no glyphs), so they're sharp at every DPI, scale perfectly, and can't
   overlap the body text. Reads as a defense/spec callout, not a yearbook
   pullquote. Plasma color matches the rest of the HUD chrome. */
.founder-quote::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--color-primary-glow);
  border-left: 2px solid var(--color-primary-glow);
  border-top-left-radius: 4px;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 320ms ease, width 320ms cubic-bezier(0.22, 1, 0.36, 1), height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.founder-quote::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-bottom: 2px solid var(--color-primary-glow);
  border-right: 2px solid var(--color-primary-glow);
  border-bottom-right-radius: 4px;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 320ms ease, width 320ms cubic-bezier(0.22, 1, 0.36, 1), height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brackets extend on hover — a HUD targeting motion. */
.founder-quote:hover::before,
.founder-quote:hover::after {
  width: 34px;
  height: 34px;
  opacity: 1;
}

.founder-quote p {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  font-style: italic;
  font-weight: 400;
  margin: 0 auto var(--space-5) auto;
  max-width: 58ch;
  letter-spacing: 0.005em;
}

.founder-quote cite {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-glow);
}

/* Mobile: tighter padding, smaller quote glyphs, slightly smaller body
   so the 300-word quote doesn't feel like a wall of text on an S21. */
@media (max-width: 640px) {
  /* iPhone-16-Plus feedback: the quote panel felt cramped against the
     section heading and the body paragraph below. Open up vertical air,
     bump internal padding, and make the panel itself feel like a real
     callout (stronger border + soft outer Plasma glow) instead of a
     thin purple line. */
  .founder-quote {
    padding: var(--space-9) var(--space-6) var(--space-8) var(--space-6);
    margin: var(--space-9) 0 var(--space-10) 0;
    border-color: rgba(83, 38, 142, 0.5);
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.35),
      0 0 50px rgba(83, 38, 142, 0.18);
  }
  .founder-quote::before,
  .founder-quote::after {
    width: 20px;
    height: 20px;
  }
  .founder-quote:hover::before,
  .founder-quote:hover::after {
    width: 26px;
    height: 26px;
  }
  .founder-quote p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-5);
  }
}