/* ============================================================================
   UNDERWATER AI — DESIGN SYSTEM
   A cinematic, dark-first, GPU-accelerated web experience.
   Inspired by Active Theory's work page + underwater biome aesthetics.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Bioluminescent palette: deep midnight, electric cyan, coral pink, golden.
---------------------------------------------------------------------------- */
:root {
  /* Color: Surface (darkest to brightest) */
  --bg-abyss:        #020410;   /* Pure deep ocean — almost black with hint of blue */
  --bg-deep:         #050a1f;   /* Twilight zone */
  --bg-mid:          #0a1530;   /* Mid-water */
  --bg-surface:      #0f1f44;   /* Surface level */
  --bg-foam:         #f5f1e8;   /* Light foam (for light mode) */

  /* Color: Accent — bioluminescent palette */
  --c-cyan-300:      #6efaff;   /* Glowing cyan (highlights) */
  --c-cyan-400:      #00f0e0;   /* Primary bioluminescent teal */
  --c-cyan-500:      #00b8d4;   /* Deep teal */
  --c-teal-300:      #5eead4;
  --c-teal-500:      #14b8a6;
  --c-blue-500:      #3b82f6;
  --c-blue-700:      #1d4ed8;

  /* Color: Bioluminescent highlights (the "wow" colors) */
  --c-coral:         #ff3d6e;   /* Coral pink (secondary accent) */
  --c-coral-soft:    #ff6b9d;
  --c-amber:         #ffd60a;   /* Golden yellow (highlight) */
  --c-violet:        #c084fc;   /* Bioluminescent purple (tertiary) */
  --c-cyan-glow:     #00ffd5;   /* Extra-bright glow color */

  /* Color: Text */
  --t-primary:       #f5f1e8;   /* Cream white (warmer than pure white) */
  --t-secondary:     #b8c5d6;   /* Muted blue-gray */
  --t-tertiary:      #6b8a9d;   /* Dimmer */
  --t-quaternary:    #466579;   /* Disabled */

  /* Color: Borders / dividers */
  --b-hairline:      rgba(0, 240, 224, 0.08);
  --b-subtle:        rgba(0, 240, 224, 0.15);
  --b-default:       rgba(0, 240, 224, 0.25);
  --b-strong:        rgba(0, 240, 224, 0.50);

  /* Glass surfaces — more luminous than before */
  --glass-1:         rgba(0, 240, 224, 0.03);
  --glass-2:         rgba(0, 240, 224, 0.06);
  --glass-3:         rgba(0, 240, 224, 0.10);

  /* Type Scale — bumped up for more drama */
  --fs-display:      clamp(3.5rem, 11vw, 11rem);    /* 56-176px — viewport-spanning */
  --fs-h1:           clamp(2.5rem, 6vw, 5.5rem);   /* 40-88px */
  --fs-h2:           clamp(2rem, 4vw, 3.5rem);     /* 32-56px */
  --fs-h3:           clamp(1.4rem, 2.5vw, 2rem);   /* 22-32px */
  --fs-body-lg:      clamp(1rem, 1.2vw, 1.25rem);  /* 16-20px */
  --fs-body:         1rem;
  --fs-body-sm:      0.9375rem;                     /* 15px */
  --fs-label:        0.75rem;                       /* 12px */
  --fs-tag:          0.8125rem;                     /* 13px */

  /* Letter-spacing */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;

  /* Spacing scale (8pt base) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Z-index layers */
  --z-base:      0;
  --z-content:   10;
  --z-cards:     20;
  --z-nav:       50;
  --z-cursor:    80;
  --z-overlay:   100;
  --z-curtain:   200;

  /* Easing curves */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  /* Durations */
  --d-micro:     150ms;
  --d-fast:      300ms;
  --d-base:      500ms;
  --d-slow:      800ms;
  --d-cinematic: 1400ms;

  /* Layout */
  --container:  1440px;
  --gutter:     clamp(1rem, 2vw, 2rem);
  --nav-h:      72px;
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: auto; /* Lenis handles smooth scroll */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smoother scrolling on iOS + remove tap highlight */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--t-primary);
  background: var(--bg-abyss);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  /* Prevent overscroll glow on iOS */
  overscroll-behavior-y: none;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6, .display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h3, h4 { line-height: 1.2; text-wrap: pretty; }

p { text-wrap: pretty; }

::selection {
  background: var(--c-cyan-400);
  color: var(--bg-abyss);
}

/* Scrollbar — minimal */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--s-9);
  scroll-margin-top: var(--nav-h);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--s-10); }
}

/* Decorative top accent bar for each section (unique color per section) */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-cyan-glow) 50%, transparent);
  box-shadow: 0 0 24px var(--c-cyan-glow);
  opacity: 0.7;
}

/* Per-section accent color overrides */
#hero::before { display: none; }                /* hero has its own visual */
#about::before { background: linear-gradient(90deg, transparent, var(--c-cyan-glow) 50%, transparent); box-shadow: 0 0 24px var(--c-cyan-glow); }
#compare::before { background: linear-gradient(90deg, transparent, var(--c-cyan-400) 50%, transparent); box-shadow: 0 0 24px var(--c-cyan-400); }
#models::before { background: linear-gradient(90deg, transparent, var(--c-teal-300) 50%, transparent); box-shadow: 0 0 24px var(--c-teal-300); }
#technology::before { background: linear-gradient(90deg, transparent, var(--c-violet) 50%, transparent); box-shadow: 0 0 24px var(--c-violet); }
#detection::before { background: linear-gradient(90deg, transparent, var(--c-coral) 50%, transparent); box-shadow: 0 0 24px var(--c-coral); }
#tourism::before { background: linear-gradient(90deg, transparent, var(--c-amber) 50%, transparent); box-shadow: 0 0 24px var(--c-amber); }
#team::before { background: linear-gradient(90deg, transparent, var(--c-cyan-300) 50%, transparent); box-shadow: 0 0 24px var(--c-cyan-300); }

.grid { display: grid; gap: var(--s-5); }

/* ----------------------------------------------------------------------------
   4. FIXED 3D CANVAS
---------------------------------------------------------------------------- */
#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none; /* Section content gets the events */
}

/* Subtle vignette so content reads against 3D */
.scene-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,4,8,0.45) 100%),
    linear-gradient(180deg, rgba(0,4,8,0.20) 0%, transparent 12%, transparent 85%, rgba(0,4,8,0.45) 100%);
  mix-blend-mode: multiply;
}

/* Film grain — adds cinema feel */
.scene-grain {
  position: fixed;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grain 1.6s steps(8) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -1%); }
  20% { transform: translate(-3%, 2%); }
  30% { transform: translate(1%, -3%); }
  40% { transform: translate(2%, 1%); }
  50% { transform: translate(-1%, 3%); }
  60% { transform: translate(3%, -1%); }
  70% { transform: translate(-2%, 2%); }
  80% { transform: translate(1%, -2%); }
  90% { transform: translate(-3%, 1%); }
}

/* ----------------------------------------------------------------------------
   5. CUSTOM CURSOR
---------------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  transition: width var(--d-micro) var(--ease-out-quart),
              height var(--d-micro) var(--ease-out-quart),
              background var(--d-micro) var(--ease-out-quart);
}

.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  transition: width var(--d-fast) var(--ease-out-expo),
              height var(--d-fast) var(--ease-out-expo),
              border-color var(--d-fast) var(--ease-out-expo),
              background var(--d-fast) var(--ease-out-expo);
}

.cursor-ring.is-hover {
  width: 64px;
  height: 64px;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 180, 216, 0.08);
}

.cursor-ring.is-press {
  width: 22px;
  height: 22px;
}

/* Hide cursor on touch devices */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
  body, a, button { cursor: auto !important; }
}

/* Default cursor replaced on fine pointer */
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
}

/* ----------------------------------------------------------------------------
   6. PAGE TRANSITION CURTAIN
   Default: covers the page (drawn from above — translateY(0)).
   JS adds .is-closing after page load to slide it down off-screen.
   Noscript fallback hides it entirely.
---------------------------------------------------------------------------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  background: var(--bg-abyss);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 700ms var(--ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
}

.curtain.is-closing { transform: translateY(100%); }

.curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 180, 216, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(45, 212, 191, 0.15) 0%, transparent 40%);
  pointer-events: none;
}

.curtain-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-primary);
  opacity: 1;
}

.curtain.is-closing .curtain-logo { opacity: 0; transition: opacity 400ms ease; }

/* ----------------------------------------------------------------------------
   7. NAVIGATION
---------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--d-base) var(--ease-out-quart),
              border-color var(--d-base) var(--ease-out-quart),
              backdrop-filter var(--d-base) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(0, 4, 8, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--b-hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--t-primary);
  text-decoration: none;
}

.nav__brand .logo { width: 40px; height: 40px; }

.nav__brand .accent { color: var(--c-cyan-400); }

.nav__links {
  display: none;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
}

.nav__link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--t-secondary);
  padding: 0.5rem 0;
  transition: color var(--d-fast) var(--ease-out-quart);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-cyan-400);
  transition: width var(--d-fast) var(--ease-out-expo),
              left var(--d-fast) var(--ease-out-expo);
}

.nav__link:hover, .nav__link.is-active { color: var(--t-primary); }
.nav__link:hover::after, .nav__link.is-active::after {
  width: 100%;
  left: 0;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--b-subtle);
  border-radius: 999px;
  color: var(--t-primary);
  transition: border-color var(--d-fast), background var(--d-fast);
}

.nav__menu-btn:hover { border-color: var(--b-strong); background: var(--glass-2); }
@media (min-width: 900px) { .nav__menu-btn { display: none; } }

/* Mobile menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(0, 4, 8, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out-quart);
}

.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.menu-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.menu-overlay__link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  color: var(--t-secondary);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease-out-expo);
  display: inline-block;
}

.menu-overlay__link:hover { color: var(--t-primary); transform: translateX(6px); }

/* ----------------------------------------------------------------------------
   8. SECTION EYEBROW / LABELS
---------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-cyan-300);
  margin-bottom: var(--s-5);
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  background: var(--c-cyan-400);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-cyan-400);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

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

.eyebrow__line {
  width: 32px;
  height: 1px;
  background: var(--c-cyan-400);
  opacity: 0.6;
}

/* ----------------------------------------------------------------------------
   9. HERO SECTION
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s-6));
  padding-bottom: var(--s-9);
  text-align: center;
  z-index: var(--z-content);
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--glass-1);
  border: 1px solid var(--b-subtle);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-cyan-300);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: var(--s-6);
}

.hero__badge .dot {
  width: 6px; height: 6px;
  background: var(--c-cyan-glow);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c-cyan-glow);
  animation: pulse-dot 2s infinite;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-5);
  color: var(--t-primary);
}

.hero__title-line {
  display: block;
  overflow: hidden;
}

.hero__title-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-rise 1.2s var(--ease-out-expo) forwards;
}

.hero__title-line:nth-child(1) > span { animation-delay: 0.05s; }
.hero__title-line:nth-child(2) > span { animation-delay: 0.20s; }
.hero__title-line:nth-child(3) > span { animation-delay: 0.35s; }

@keyframes hero-rise {
  to { transform: translateY(0); }
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg,
    var(--c-cyan-300) 0%,
    var(--c-cyan-glow) 25%,
    var(--c-coral) 55%,
    var(--c-amber) 80%,
    var(--c-cyan-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 8s linear infinite;
  position: relative;
}

@keyframes text-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.hero__subtitle {
  max-width: 640px;
  margin: 0 auto var(--s-7);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--t-secondary);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade 1s var(--ease-out-expo) 0.5s forwards;
}

@keyframes hero-fade { to { opacity: 1; transform: translateY(0); } }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade 1s var(--ease-out-expo) 0.7s forwards;
}

/* Floating data tiles in hero (decorative) */
.hero__floater {
  position: absolute;
  padding: 1rem 1.25rem 1.125rem;
  min-width: 180px;
  background: rgba(0, 12, 24, 0.72);
  border: 1px solid var(--b-subtle);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: floater-in 1s var(--ease-out-expo) 0.9s forwards;
  box-shadow:
    0 0 32px -8px rgba(0, 240, 224, 0.20),
    0 8px 24px -8px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 240, 224, 0.06);
}

.hero__floater::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0, 240, 224, 0.10) 0%,
    transparent 40%,
    rgba(192, 132, 252, 0.06) 100%);
  pointer-events: none;
}

.hero__floater--1 { top: 28%; left: 5%; }
.hero__floater--2 { top: 20%; right: 6%; }
.hero__floater--3 { bottom: 20%; right: 10%; }

@keyframes floater-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero__floater-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-cyan-300);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__floater-label::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--c-cyan-glow);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--c-cyan-glow);
  flex-shrink: 0;
}

.hero__floater-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--t-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.hero__floater-unit {
  font-size: 0.65em;
  color: var(--c-cyan-300);
  margin-left: 0.05em;
  font-weight: 400;
}

.hero__floater-desc {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--t-secondary);
  line-height: 1.3;
  border-top: 1px solid var(--b-hairline);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

@media (max-width: 1100px) {
  .hero__floater { display: none; }
}

/* Decorative wave at the bottom of the hero */
.hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  color: var(--bg-deep);
  z-index: 1;
  pointer-events: none;
}

/* Buttons */
.btn {
  --btn-h: 56px;
  --btn-px: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--d-fast) var(--ease-out-expo),
              background var(--d-fast) var(--ease-out-quart),
              border-color var(--d-fast) var(--ease-out-quart),
              color var(--d-fast) var(--ease-out-quart),
              box-shadow var(--d-fast) var(--ease-out-quart);
  isolation: isolate;
  overflow: hidden;
}

.btn--primary {
  background: linear-gradient(135deg, var(--c-cyan-glow) 0%, var(--c-cyan-400) 100%);
  color: var(--bg-abyss);
  font-weight: 600;
  box-shadow:
    0 0 30px rgba(0, 240, 224, 0.35),
    0 12px 40px -8px rgba(0, 240, 224, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 50px rgba(0, 240, 224, 0.50),
    0 20px 60px -8px rgba(0, 240, 224, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.btn--ghost {
  background: var(--glass-1);
  color: var(--t-primary);
  border: 1px solid var(--b-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: var(--glass-2);
  border-color: var(--b-strong);
  transform: translateY(-2px);
}

.btn .arrow { transition: transform var(--d-fast) var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(4px); }

.btn .pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
}

.btn .pulse-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: currentColor;
}

.btn .pulse-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: ping 2s var(--ease-out-quart) infinite;
}

@keyframes ping {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Hero scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-cyan-300);
  opacity: 0;
  animation: hero-fade 1s var(--ease-out-expo) 1s forwards;
  z-index: 3;
}

.scroll-cue__line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--c-cyan-glow), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--t-primary), transparent);
  animation: scroll-line 2.2s var(--ease-in-out) infinite;
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Hero stats */
.hero__stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid var(--b-hairline);
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(2, 4, 16, 0.5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero__stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--t-primary);
  font-variant-numeric: tabular-nums;
}

.hero__stat-num .unit { color: var(--c-cyan-300); font-size: 0.7em; }

.hero__stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
}

/* ----------------------------------------------------------------------------
   9.5 ABOUT SECTION
---------------------------------------------------------------------------- */
.about__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 800px)  { .about__pillars { grid-template-columns: repeat(3, 1fr); } }

.about__pillar {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--d-base) var(--ease-out-expo),
              border-color var(--d-base),
              background var(--d-base);
  overflow: hidden;
}

.about__pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--c-cyan-400), transparent);
}

.about__pillar:hover { transform: translateY(-4px); border-color: var(--b-strong); background: var(--glass-2); }

.about__pillar-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  color: var(--c-cyan-300);
  margin-bottom: var(--s-3);
  opacity: 0.7;
}

.about__pillar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--t-primary);
  margin-bottom: var(--s-3);
  letter-spacing: var(--tracking-snug);
}

.about__pillar-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: var(--t-secondary);
  margin-bottom: var(--s-4);
}

.about__pillar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.about__pillar-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--t-tertiary);
}

.about__pillar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--c-cyan-400);
  opacity: 0.6;
}

/* About by-the-numbers band */
.about__band {
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--b-hairline);
  border: 1px solid var(--b-hairline);
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 700px)  { .about__band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .about__band { grid-template-columns: repeat(5, 1fr); } }

.about__band-item {
  padding: var(--s-5) var(--s-4);
  background: var(--glass-1);
  text-align: center;
  transition: background var(--d-fast);
}

.about__band-item:hover { background: var(--glass-2); }

.about__band-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500;
  color: var(--c-cyan-300);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 0.375rem;
}

.about__band-num .unit { color: var(--c-cyan-400); font-size: 0.7em; margin-left: 0.1em; }

.about__band-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
}

/* About meta row (founded, HQ, etc.) */
.about__meta {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 700px)  { .about__meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .about__meta { grid-template-columns: repeat(5, 1fr); } }

.about__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  padding: 0.5rem 0;
}

.about__meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
}

.about__meta-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--t-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ----------------------------------------------------------------------------
   10. COMPARISON (BEFORE/AFTER) SECTION
---------------------------------------------------------------------------- */
.compare {
  position: relative;
  z-index: var(--z-content);
}

.compare__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-7);
}

.compare__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  margin-bottom: var(--s-4);
  line-height: 1.05;
}

.compare__sub {
  color: var(--t-secondary);
  font-size: var(--fs-body-lg);
}

.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--glass-1);
  border: 1px solid var(--b-subtle);
  border-radius: 999px;
  margin-bottom: var(--s-5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tabs__btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--t-tertiary);
  border-radius: 999px;
  transition: color var(--d-fast), background var(--d-fast);
}

.tabs__btn.is-active {
  background: var(--c-cyan-400);
  color: var(--bg-abyss);
}

.tabs__btn:not(.is-active):hover { color: var(--t-primary); }

.model-info {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--t-tertiary);
  margin-bottom: var(--s-6);
  min-height: 1.5em;
}

.model-info strong { color: var(--c-cyan-300); font-weight: 500; }

.compare__stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  border: 1px solid var(--b-subtle);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6),
              0 0 0 1px var(--b-hairline) inset;
  background: var(--bg-deep);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.compare__img--before { filter: saturate(0.65) brightness(0.85) contrast(0.95); }
.compare__img--after  { clip-path: inset(0 50% 0 0); }

.compare__label {
  position: absolute;
  top: 1.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}

.compare__label--left {
  left: 1.25rem;
  background: rgba(0, 180, 216, 0.85);
  color: var(--bg-abyss);
}

.compare__label--right {
  right: 1.25rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--t-primary);
  border: 1px solid var(--b-subtle);
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--c-cyan-300), transparent);
  box-shadow: 0 0 16px var(--c-cyan-400);
  z-index: 4;
  transform: translateX(-50%);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: var(--t-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-abyss);
  z-index: 5;
  box-shadow: 0 0 0 4px var(--bg-abyss), 0 0 0 5px var(--b-strong),
              0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform var(--d-fast) var(--ease-out-expo);
}

.compare__handle:hover { transform: translate(-50%, -50%) scale(1.08); }

.compare__handle svg { width: 18px; height: 18px; }

.compare__handle:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 6px;
}

.compare__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  max-width: 900px;
  margin: var(--s-7) auto 0;
}

.metric {
  text-align: center;
  padding: var(--s-5);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--d-fast), background var(--d-fast);
}

.metric:hover { border-color: var(--b-strong); background: var(--glass-2); }

.metric__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--c-cyan-300);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}

.metric__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
}

/* ----------------------------------------------------------------------------
   11. MODEL SHOWCASE CARDS
---------------------------------------------------------------------------- */
.models-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 900px) {
  .models-grid { grid-template-columns: repeat(2, 1fr); }
}

.model-card {
  position: relative;
  padding: var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out-expo),
              border-color var(--d-base),
              background var(--d-base);
  transform-style: preserve-3d;
  will-change: transform;
}

.model-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                              rgba(0, 180, 216, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--d-base);
  pointer-events: none;
}

.model-card:hover { transform: translateY(-4px); border-color: var(--b-strong); }
.model-card:hover::before { opacity: 1; }

.model-card__tag {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--glass-2);
  border: 1px solid var(--b-subtle);
  border-radius: 999px;
  color: var(--c-cyan-300);
}

.model-card__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.model-card__media {
  position: relative;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5);
  height: 280px;
  overflow: hidden;
}

.model-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease-out-expo);
}

.model-card:hover .model-card__media img { transform: scale(1.12); }

.model-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-deep) 100%);
  pointer-events: none;
}

.model-card__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-bottom: var(--s-3);
  position: relative;
}

.model-card__desc {
  color: var(--t-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  margin-bottom: var(--s-5);
  position: relative;
}

.model-card__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: var(--s-5);
  position: relative;
}

.model-card__spec {
  padding: 0.75rem 1rem;
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 10px;
}

.model-card__spec-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
  margin-bottom: 0.25rem;
}

.model-card__spec-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t-primary);
}

.model-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-cyan-300);
  background: rgba(0, 180, 216, 0.10);
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: 999px;
  transition: background var(--d-fast), border-color var(--d-fast);
}

.tag:hover { background: rgba(0, 180, 216, 0.20); border-color: var(--b-strong); }

.tag--emerald { color: var(--c-teal-300); background: rgba(45, 212, 191, 0.10); border-color: rgba(45, 212, 191, 0.25); }
.tag--purple  { color: #c4b5fd; background: rgba(196, 181, 253, 0.10); border-color: rgba(196, 181, 253, 0.25); }

/* Side-by-side compare strip */
.compare-strip {
  margin-top: var(--s-9);
}

.compare-strip__title {
  text-align: center;
  font-size: var(--fs-h3);
  margin-bottom: var(--s-6);
}

.compare-strip__title em {
  font-style: normal;
  color: var(--c-cyan-300);
}

.compare-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 700px)  { .compare-strip__grid { grid-template-columns: repeat(3, 1fr); } }

.strip-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  transition: transform var(--d-base) var(--ease-out-expo), border-color var(--d-base);
}

.strip-card:hover { transform: translateY(-4px); border-color: var(--b-strong); }

.strip-card img { width: 100%; height: 220px; object-fit: cover; }

.strip-card__cap {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.strip-card__name { font-size: 0.875rem; font-weight: 500; color: var(--t-primary); }
.strip-card__name em { font-style: normal; color: var(--c-cyan-300); }
.strip-card__sub  { font-size: 0.75rem; color: var(--t-tertiary); }

/* ----------------------------------------------------------------------------
   12. TECHNOLOGY — animated pipeline
---------------------------------------------------------------------------- */
.tech-pipeline {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 700px)  { .tech-pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tech-pipeline { grid-template-columns: repeat(3, 1fr); } }

.tech-card {
  position: relative;
  padding: var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--d-base) var(--ease-out-expo),
              border-color var(--d-base), background var(--d-base);
  overflow: hidden;
}

.tech-card:hover {
  transform: translateY(-4px);
  border-color: var(--b-strong);
  background: var(--glass-2);
}

.tech-card__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-5);
  isolation: isolate;
  overflow: hidden;
}

.tech-card__icon::before {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(12px);
  opacity: 0.4;
  z-index: -1;
}

.tech-card__icon svg { width: 28px; height: 28px; color: var(--t-primary); }

.tech-card__icon--purple { background: linear-gradient(135deg, #a855f7, #ec4899); }
.tech-card__icon--cyan   { background: linear-gradient(135deg, var(--c-cyan-400), var(--c-blue-500)); }
.tech-card__icon--teal   { background: linear-gradient(135deg, var(--c-teal-300), #0d9488); }
.tech-card__icon--orange { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.tech-card__icon--indigo { background: linear-gradient(135deg, #6366f1, #a855f7); }
.tech-card__icon--pink   { background: linear-gradient(135deg, #ec4899, #f43f5e); }

.tech-card__title { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 0.75rem; }
.tech-card__desc  { color: var(--t-secondary); font-size: var(--fs-body-sm); line-height: 1.7; margin-bottom: var(--s-4); }
.tech-card__tags  { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Pipeline connector (decorative) */
.tech-flow {
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tech-flow__title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
  margin-bottom: var(--s-5);
}

.tech-flow__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tech-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--glass-2);
  border: 1px solid var(--b-subtle);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--t-primary);
  position: relative;
}

.tech-flow__step .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-cyan-400);
  box-shadow: 0 0 8px var(--c-cyan-400);
  animation: pulse-dot 1.6s infinite;
}

.tech-flow__arrow {
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--b-strong), transparent);
  position: relative;
}

/* ----------------------------------------------------------------------------
   13. DETECTION SECTION
---------------------------------------------------------------------------- */
.detection {
  position: relative;
  z-index: var(--z-content);
}

.detection__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .detection__grid { grid-template-columns: 1.1fr 1fr; }
}

.detection__visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--b-subtle);
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
}

.detection__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detection__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 180, 216, 0.08) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: scan 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scan {
  0%, 100% { background-position: 0% -100%; }
  50%      { background-position: 0% 100%; }
}

.detection__overlay {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 4, 8, 0.7);
  border: 1px solid var(--b-strong);
  border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--t-primary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.detection__overlay-title {
  color: var(--c-cyan-300);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.detection__overlay-num { font-size: 0.875rem; font-weight: 500; }

.detection__overlay-meta { color: var(--t-tertiary); font-size: 0.6875rem; margin-top: 0.25rem; }

.hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-cyan-400);
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.25);
  cursor: pointer;
  animation: hotspot-pulse 2.4s ease-in-out infinite;
}

.hotspot::after {
  content: '';
  position: absolute; inset: -6px;
  border: 1px solid var(--c-cyan-400);
  border-radius: 50%;
  opacity: 0;
  animation: hotspot-ring 2.4s ease-out infinite;
}

.hotspot-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  background: var(--bg-abyss);
  color: var(--t-primary);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--b-strong);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast), transform var(--d-fast);
}

.hotspot:hover .hotspot-label { opacity: 1; transform: translateX(-50%) translateY(-2px); }

@keyframes hotspot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@keyframes hotspot-ring {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

.detection__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.detection__feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.detection__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 180, 216, 0.10);
  border: 1px solid rgba(0, 180, 216, 0.20);
  color: var(--c-cyan-300);
}

.detection__feature-icon svg { width: 22px; height: 22px; }

.detection__feature-title { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.25rem; }
.detection__feature-desc  { font-size: var(--fs-body-sm); color: var(--t-secondary); line-height: 1.6; }

.detection__stats {
  display: flex;
  gap: 1rem;
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

.detection__stat {
  padding: 0.75rem 1rem;
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 10px;
  min-width: 100px;
}

.detection__stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-cyan-300);
  font-variant-numeric: tabular-nums;
}

.detection__stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-tertiary);
  margin-top: 0.25rem;
}

/* ----------------------------------------------------------------------------
   14. TOURISM (Solutions)
---------------------------------------------------------------------------- */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 700px)  { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); } }

.solution {
  position: relative;
  padding: var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--d-base) var(--ease-out-expo),
              border-color var(--d-base), background var(--d-base);
  overflow: hidden;
}

.solution::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 180, 216, 0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--d-base);
}

.solution:hover { transform: translateY(-4px); border-color: var(--b-strong); }
.solution:hover::before { opacity: 1; }

.solution__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-5);
  background: linear-gradient(135deg, var(--c-teal-300), var(--c-cyan-500));
  color: white;
}

.solution__icon svg { width: 28px; height: 28px; }

.solution__title { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 0.75rem; position: relative; }
.solution__desc  { color: var(--t-secondary); font-size: var(--fs-body-sm); line-height: 1.7; position: relative; }
.solution__tags  { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-4); position: relative; }

.solution--cyan   .solution__icon { background: linear-gradient(135deg, var(--c-cyan-400), var(--c-blue-500)); }
.solution--teal   .solution__icon { background: linear-gradient(135deg, var(--c-teal-300), #0d9488); }
.solution--blue   .solution__icon { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.solution--purple .solution__icon { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.solution--pink   .solution__icon { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.solution--emerald .solution__icon { background: linear-gradient(135deg, #10b981, #047857); }

/* Tourism CTA banner */
.cta-banner {
  margin-top: var(--s-9);
  padding: clamp(2rem, 5vw, 3.5rem) var(--s-6);
  background: linear-gradient(120deg, rgba(13, 148, 136, 0.15), rgba(0, 180, 216, 0.10), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0, 180, 216, 0.2), transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(45, 212, 191, 0.2), transparent 50%);
  pointer-events: none;
}

.cta-banner__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  margin-bottom: var(--s-4);
  position: relative;
}

.cta-banner__sub {
  color: var(--t-secondary);
  max-width: 600px;
  margin: 0 auto var(--s-6);
  position: relative;
}

.cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ----------------------------------------------------------------------------
   15. TEAM SECTION
---------------------------------------------------------------------------- */
.team {
  position: relative;
  z-index: var(--z-content);
}

.team__head {
  text-align: center;
  margin-bottom: var(--s-9);
}

.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 700px)  { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }

.member {
  position: relative;
  padding: var(--s-6);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--d-base) var(--ease-out-expo),
              border-color var(--d-base);
}

.member:hover { transform: translateY(-6px); border-color: var(--b-strong); }

.member__avatar {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}

.member__avatar::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: inherit;
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

.member__avatar-bg {
  position: absolute; inset: 0;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.member--cyan   .member__avatar-bg { color: var(--c-cyan-300); }
.member--teal   .member__avatar-bg { color: var(--c-teal-300); }
.member--purple .member__avatar-bg { color: #c4b5fd; }
.member--orange .member__avatar-bg { color: #fb923c; }

.member__name {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.member__role {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid currentColor;
  margin-bottom: var(--s-4);
}

.member--cyan   .member__role { color: var(--c-cyan-300); }
.member--teal   .member__role { color: var(--c-teal-300); }
.member--purple .member__role { color: #c4b5fd; }
.member--orange .member__role { color: #fb923c; }

.member__bio {
  font-size: var(--fs-body-sm);
  color: var(--t-tertiary);
  line-height: 1.6;
  margin-bottom: var(--s-4);
}

.member__links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.member__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-2);
  color: var(--t-tertiary);
  border: 1px solid var(--b-hairline);
  transition: color var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}

.member__link:hover { color: var(--t-primary); background: var(--glass-3); border-color: var(--b-strong); }

.member__link svg { width: 16px; height: 16px; }

.funding-strip {
  margin-top: var(--s-9);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: center;
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.funding-strip__label {
  font-size: var(--fs-body-sm);
  color: var(--t-tertiary);
}

.funding-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--bg-foam);
  border-radius: 8px;
  color: var(--bg-abyss);
  font-weight: 600;
  font-size: 0.875rem;
}

.funding-strip__meity { width: 32px; height: 32px; border-radius: 4px; background: linear-gradient(135deg, #ff9933, #138808); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.625rem; font-weight: 700; }

/* ----------------------------------------------------------------------------
   16. CUSTOMERS / TRUST
---------------------------------------------------------------------------- */
.trust {
  position: relative;
  z-index: var(--z-content);
}

.trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 700px)  { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }

.trust-card {
  padding: var(--s-5);
  background: var(--glass-1);
  border: 1px solid var(--b-hairline);
  border-radius: 16px;
  transition: transform var(--d-base), border-color var(--d-base);
}

.trust-card:hover { transform: translateY(-3px); border-color: var(--b-strong); }

.trust-card__icon {
  width: 48px; height: 48px;
  color: var(--c-cyan-300);
  margin-bottom: var(--s-4);
}

.trust-card__icon svg { width: 100%; height: 100%; }

.trust-card__title { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.5rem; }
.trust-card__desc  { color: var(--t-secondary); font-size: var(--fs-body-sm); line-height: 1.6; }

/* ----------------------------------------------------------------------------
   17. FOOTER
---------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: var(--z-content);
  padding: var(--s-9) var(--gutter) var(--s-5);
  border-top: 1px solid var(--b-hairline);
  background: linear-gradient(180deg, transparent, rgba(0, 4, 8, 0.6));
  margin-top: var(--s-10);
}

.footer__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}

@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer__brand-block { max-width: 360px; }

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.footer__desc {
  color: var(--t-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
}

.footer__col-title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--t-primary);
  margin-bottom: var(--s-4);
}

.footer__list { display: flex; flex-direction: column; gap: 0.625rem; }

.footer__list a {
  font-size: var(--fs-body-sm);
  color: var(--t-tertiary);
  transition: color var(--d-fast);
}

.footer__list a:hover { color: var(--c-cyan-300); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: var(--s-5);
  border-top: 1px solid var(--b-hairline);
  font-size: 0.75rem;
  color: var(--t-tertiary);
  align-items: center;
  text-align: center;
}

@media (min-width: 700px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ----------------------------------------------------------------------------
   18. SCROLL REVEAL ANIMATIONS
---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.20s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.40s; }

/* Section title block */
.section-title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
}

.section-title__head {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-4);
}

.section-title__main {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--s-4);
}

.section-title__main em {
  font-style: normal;
  background: linear-gradient(120deg, var(--c-cyan-300), var(--c-teal-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Split-letter character reveal — wraps letters in .char spans on first reveal */
.section-title__main .char,
.hero__title-line > span .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotateX(-40deg);
  transform-origin: 50% 100%;
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 30ms);
}

.reveal.is-visible .section-title__main .char,
.reveal.is-visible .hero__title-line > span .char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.section-title__sub {
  color: var(--t-secondary);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   19. UTILITIES
---------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.625rem 1.25rem;
  background: var(--c-cyan-400);
  color: var(--bg-abyss);
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  transition: top var(--d-fast);
}

.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 4px;
  border-radius: 4px;
}

button, [role="button"] { touch-action: manipulation; }

.text-gradient {
  background: linear-gradient(120deg, var(--c-cyan-300), var(--c-teal-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.no-scroll { overflow: hidden; }

/* ----------------------------------------------------------------------------
   20. LIGHT MODE
---------------------------------------------------------------------------- */
html.light-mode {
  --bg-abyss:    #e0f7ff;
  --bg-deep:     #b3ecff;
  --bg-mid:      #a8e0f5;
  --bg-surface:  #d0f4de;

  --t-primary:    #0d2137;
  --t-secondary:  #2a5472;
  --t-tertiary:   #3a6a8a;
  --t-quaternary: #5a8aaa;

  --b-hairline:   rgba(0, 100, 150, 0.10);
  --b-subtle:     rgba(0, 100, 150, 0.18);
  --b-default:    rgba(0, 100, 150, 0.30);
  --b-strong:     rgba(0, 180, 216, 0.55);

  --glass-1: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.70);
  --glass-3: rgba(255, 255, 255, 0.85);
}

html.light-mode body {
  background: linear-gradient(180deg, #e0f7ff 0%, #b3ecff 40%, #d0f4de 100%);
  color: var(--t-primary);
}

html.light-mode .nav.is-scrolled {
  background: rgba(224, 247, 255, 0.85);
  border-bottom-color: var(--b-hairline);
}

html.light-mode .nav__brand { color: var(--t-primary); }

html.light-mode .nav__link { color: var(--t-secondary); }
html.light-mode .nav__link:hover,
html.light-mode .nav__link.is-active { color: var(--t-primary); }

html.light-mode .nav__menu-btn { color: var(--t-primary); border-color: var(--b-subtle); }

html.light-mode .menu-overlay { background: rgba(224, 247, 255, 0.97); }
html.light-mode .menu-overlay__link { color: var(--t-secondary); }
html.light-mode .menu-overlay__link:hover { color: var(--t-primary); }

html.light-mode .curtain { background: #b3ecff; }
html.light-mode .scene-vignette { background:
  radial-gradient(ellipse at center, transparent 30%, rgba(179, 236, 255, 0.4) 100%),
  linear-gradient(180deg, rgba(224, 247, 255, 0.2) 0%, transparent 12%, transparent 85%, rgba(179, 236, 255, 0.4) 100%);
}

html.light-mode .hero__title { color: var(--t-primary); }
html.light-mode .hero__title em {
  background: linear-gradient(120deg, #0077b6, #00b4d8, #ff3d6e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.light-mode .hero__subtitle { color: var(--t-secondary); }
html.light-mode .hero__badge {
  background: rgba(255, 255, 255, 0.7);
  color: var(--t-secondary);
  border-color: var(--b-subtle);
}
html.light-mode .hero__stat-num { color: var(--t-primary); }
html.light-mode .hero__stat-label { color: var(--t-tertiary); }
html.light-mode .hero__stats { border-top-color: var(--b-hairline); }
html.light-mode .scroll-cue { color: var(--t-tertiary); }
html.light-mode .hero__wave { color: #b3ecff; }
html.light-mode .hero__floater {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--b-subtle);
  color: var(--t-primary);
  box-shadow:
    0 8px 24px -8px rgba(0, 100, 150, 0.18),
    0 0 0 1px rgba(0, 100, 150, 0.04);
}
html.light-mode .hero__floater-label { color: #0077b6; }
html.light-mode .hero__floater-value { color: var(--t-primary); }
html.light-mode .hero__floater-unit { color: #0077b6; }
html.light-mode .hero__floater-desc { color: var(--t-secondary); border-top-color: var(--b-hairline); }

html.light-mode .about__pillar {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--b-hairline);
}
html.light-mode .about__pillar:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--b-strong);
}
html.light-mode .about__pillar-num { color: #0077b6; }
html.light-mode .about__pillar-title { color: var(--t-primary); }
html.light-mode .about__pillar-desc { color: var(--t-secondary); }
html.light-mode .about__pillar-list li { color: var(--t-tertiary); }
html.light-mode .about__pillar-list li::before { background: #0077b6; }

html.light-mode .about__band { background: var(--b-hairline); border-color: var(--b-hairline); }
html.light-mode .about__band-item { background: rgba(255, 255, 255, 0.65); }
html.light-mode .about__band-item:hover { background: rgba(255, 255, 255, 0.85); }
html.light-mode .about__band-num { color: #0077b6; }
html.light-mode .about__band-num .unit { color: #00b4d8; }
html.light-mode .about__band-label { color: var(--t-tertiary); }

html.light-mode .about__meta {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--b-hairline);
}
html.light-mode .about__meta-label { color: var(--t-tertiary); }
html.light-mode .about__meta-value { color: var(--t-primary); }

html.light-mode .eyebrow { color: #0077b6; }
html.light-mode .eyebrow__line { background: #0077b6; }

html.light-mode .btn--primary {
  background: var(--t-primary);
  color: var(--bg-abyss);
  box-shadow: 0 12px 40px -8px rgba(0, 119, 182, 0.4),
              0 0 0 1px rgba(13, 33, 55, 0.1) inset;
}
html.light-mode .btn--primary:hover {
  box-shadow: 0 20px 60px -8px rgba(0, 119, 182, 0.5);
}
html.light-mode .btn--ghost {
  background: rgba(255, 255, 255, 0.5);
  color: var(--t-primary);
  border-color: var(--b-subtle);
}
html.light-mode .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--b-strong);
}

html.light-mode .glass-card,
html.light-mode .model-card,
html.light-mode .tech-card,
html.light-mode .solution,
html.light-mode .trust-card,
html.light-mode .member,
html.light-mode .strip-card,
html.light-mode .metric,
html.light-mode .detection__stat,
html.light-mode .funding-strip,
html.light-mode .tabs,
html.light-mode .model-card__spec,
html.light-mode .compare__stage,
html.light-mode .detection__visual {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--b-hairline);
}
html.light-mode .model-card:hover,
html.light-mode .tech-card:hover,
html.light-mode .solution:hover,
html.light-mode .trust-card:hover,
html.light-mode .member:hover,
html.light-mode .strip-card:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--b-strong);
}

html.light-mode .model-card__media::after {
  background: linear-gradient(180deg, transparent 0%, rgba(179, 236, 255, 0.8) 100%);
}
html.light-mode .model-card__title { color: var(--t-primary); }
html.light-mode .model-card__desc,
html.light-mode .tech-card__desc,
html.light-mode .solution__desc,
html.light-mode .trust-card__desc { color: var(--t-secondary); }
html.light-mode .model-card__spec-value,
html.light-mode .tech-card__title { color: var(--t-primary); }
html.light-mode .model-card__spec-label,
html.light-mode .detection__stat-label,
html.light-mode .metric__label { color: var(--t-tertiary); }

html.light-mode .tag { color: #0077b6; background: rgba(0, 180, 216, 0.10); border-color: rgba(0, 119, 182, 0.25); }
html.light-mode .tag--emerald { color: #0d9488; background: rgba(13, 148, 136, 0.10); border-color: rgba(13, 148, 136, 0.25); }
html.light-mode .tag--purple  { color: #6d28d9; background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.20); }

html.light-mode .section-title__main { color: var(--t-primary); }
html.light-mode .section-title__sub { color: var(--t-secondary); }
html.light-mode .section-title__main em,
html.light-mode .text-gradient {
  background: linear-gradient(120deg, #0077b6, #00b4d8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.light-mode .compare__title { color: var(--t-primary); }
html.light-mode .compare__sub  { color: var(--t-secondary); }
html.light-mode .compare__label--right {
  background: rgba(255, 255, 255, 0.7);
  color: var(--t-primary);
  border-color: var(--b-subtle);
}
html.light-mode .model-info { color: var(--t-tertiary); }
html.light-mode .model-info strong { color: #0077b6; }
html.light-mode .tabs__btn { color: var(--t-tertiary); }
html.light-mode .tabs__btn:not(.is-active):hover { color: var(--t-primary); }
html.light-mode .tabs__btn.is-active { background: var(--t-primary); color: var(--bg-abyss); }
html.light-mode .metric__num { color: #0077b6; }

html.light-mode .compare-strip__title { color: var(--t-primary); }
html.light-mode .compare-strip__title em { color: #0077b6; }
html.light-mode .strip-card__name { color: var(--t-primary); }
html.light-mode .strip-card__name em { color: #0077b6; }
html.light-mode .strip-card__sub { color: var(--t-tertiary); }

html.light-mode .tech-flow {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--b-hairline);
}
html.light-mode .tech-flow__title { color: var(--t-tertiary); }
html.light-mode .tech-flow__step {
  background: rgba(255, 255, 255, 0.7);
  color: var(--t-primary);
  border-color: var(--b-subtle);
}

html.light-mode .detection__feature-title { color: var(--t-primary); }
html.light-mode .detection__feature-desc  { color: var(--t-secondary); }
html.light-mode .detection__stat-num { color: #0077b6; }
html.light-mode .detection__overlay {
  background: rgba(255, 255, 255, 0.85);
  color: var(--t-primary);
  border-color: var(--b-strong);
}
html.light-mode .detection__overlay-title { color: #0077b6; }
html.light-mode .detection__overlay-meta  { color: var(--t-tertiary); }
html.light-mode .hotspot { background: rgba(0, 180, 216, 0.18); }
html.light-mode .hotspot-label {
  background: var(--bg-abyss);
  color: var(--t-primary);
  border-color: var(--b-strong);
}

html.light-mode .cta-banner {
  background: linear-gradient(120deg, rgba(13, 148, 136, 0.18), rgba(0, 180, 216, 0.12), rgba(59, 130, 246, 0.18));
  border-color: rgba(0, 119, 182, 0.30);
}
html.light-mode .cta-banner__title { color: var(--t-primary); }
html.light-mode .cta-banner__sub  { color: var(--t-secondary); }

html.light-mode .member__name { color: var(--t-primary); }
html.light-mode .member__bio  { color: var(--t-tertiary); }
html.light-mode .member__link { background: rgba(255, 255, 255, 0.7); color: var(--t-tertiary); border-color: var(--b-hairline); }
html.light-mode .member__link:hover { color: var(--t-primary); background: rgba(255, 255, 255, 0.9); }

html.light-mode .funding-strip { background: rgba(255, 255, 255, 0.55); }
html.light-mode .funding-strip__label { color: var(--t-tertiary); }
html.light-mode .funding-strip__badge {
  background: white;
  color: var(--t-primary);
  border: 1px solid var(--b-hairline);
}

html.light-mode .footer { background: rgba(179, 236, 255, 0.5); border-top-color: var(--b-hairline); }
html.light-mode .footer__brand { color: var(--t-primary); }
html.light-mode .footer__desc { color: var(--t-secondary); }
html.light-mode .footer__col-title { color: var(--t-primary); }
html.light-mode .footer__list a { color: var(--t-tertiary); }
html.light-mode .footer__list a:hover { color: #0077b6; }
html.light-mode .footer__bottom {
  border-top-color: var(--b-hairline);
  color: var(--t-tertiary);
}

html.light-mode .skip-link { background: var(--t-primary); color: white; }

/* ----------------------------------------------------------------------------
   21. 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;
  }

  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }

  .hero__title-line > span { transform: none; animation: none; }
  .hero__subtitle, .hero__cta, .scroll-cue { opacity: 1; transform: none; animation: none; }

  #scene-canvas, .scene-grain { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
}