/* ===================================
   DOMERA SPACE — STYLES
   =================================== */

/* ===================================
   CHAKRA PETCH — LOCAL FONT FACES
   =================================== */

@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #080808;
  --dark: #0e0e0e;
  --dark-2: #141414;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.13);
  --white: #ffffff;
  --off-white: #e8e8e8;
  --muted: rgba(255, 255, 255, 0.45);
  --cyan: #00d4ff;
  --cyan-dim: rgba(0, 212, 255, 0.10);
  --cyan-glow: rgba(0, 212, 255, 0.25);
  --gold: #f5c518;
  --gold-dim: rgba(245, 197, 24, 0.10);
  --gold-glow: rgba(245, 197, 24, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-hi: rgba(255, 255, 255, 0.09);
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;
  --nav-h: 72px;
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ===================================
   STARFIELD CANVAS
   =================================== */

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}

/* Carbon fiber diagonal lines — subtle site-wide texture */
.carbon-lines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0px,
    transparent 5px,
    rgba(255,255,255,0.018) 5px,
    rgba(255,255,255,0.018) 6px
  );
}

.nav, .hero, .hero-rule, .section, .divider, .footer {
  position: relative;
  z-index: 1;
}

/* ===================================
   LIQUID GLASS MIXIN
   Applied to: nav bar, cards, pills,
   badges, tags, email button, CTA block
   =================================== */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ===================================
   NAVIGATION
   Full-width floating bar — left glossy panel + right square buttons
   =================================== */

/* Fixed logo — sits on left, above the nav bar */
.nav__logo-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}

.nav__logo-fixed:hover { opacity: 1; }

.nav__logo-fixed .nav__logo-img {
  height: 36px;
  width: auto;
  display: block;
}

/* Thin full-width top bar — flush to top, like the reference */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 48px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transition: border-color 0.3s ease;
}

/* Translucent strip filling the left half, next to the logo */
.nav::before {
  content: '';
  flex: 1;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-right: 1px solid rgba(255,255,255,0.10);
}

.nav--scrolled {
  border-color: rgba(255,255,255,0.16);
}

/* Left glossy glass panel */
.nav__panel {
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-width: 160px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.07) 40%,
    rgba(255,255,255,0.02) 100%
  );
  backdrop-filter: blur(40px) saturate(2.5);
  -webkit-backdrop-filter: blur(40px) saturate(2.5);
  border-right: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.10);
  flex-shrink: 0;
}

.nav__logo {
  display: flex;
  align-items: center;
  opacity: 0.90;
  transition: opacity 0.2s ease;
}

.nav__logo:hover { opacity: 1; }

.nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* Nav buttons — occupy the right half, transparent with a slight blur.
   The glossy background lives on each button (not the container) so it
   droops together with the button on hover. */
.nav__buttons {
  display: flex;
  align-items: stretch;
  flex: 0 0 50%;
}

/* Each square nav button — label centered, number bottom-left */
.nav__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-display);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  /* Drooping hover: each button sags down by its --lerp share */
  translate: 0 calc(var(--lerp, 0) * 65%);
  transition: background 0.18s ease, color 0.18s ease, translate var(--nav-droop-speed, 0.28s) ease;
}

/* Tall glossy column anchored to the button's bottom — droops WITH the button
   and extends upward so the bar stays filled above it (no notch). */
.nav__btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300%;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

.nav__btn:last-child { border-right: none; }

/* ── Drooping nav hover ──
   The hovered button drops fully; its neighbours sag by a decreasing sine
   amount, forming a smooth droop. Left neighbours are matched with :has(),
   right neighbours with sibling chains. */
.nav__buttons {
  --lerp-0: 1;
  --lerp-1: calc(sin(30deg)); /* ≈ 0.50 */
  --lerp-2: calc(sin(20deg)); /* ≈ 0.34 */
  --lerp-3: calc(sin(10deg)); /* ≈ 0.17 */
}

.nav__btn:is(:hover, :focus-visible) { --lerp: var(--lerp-0); z-index: 5; }

.nav__btn:has(+ .nav__btn:is(:hover, :focus-visible)),
.nav__btn:is(:hover, :focus-visible) + .nav__btn { --lerp: var(--lerp-1); z-index: 4; }

.nav__btn:has(+ .nav__btn + .nav__btn:is(:hover, :focus-visible)),
.nav__btn:is(:hover, :focus-visible) + .nav__btn + .nav__btn { --lerp: var(--lerp-2); z-index: 3; }

.nav__btn:has(+ .nav__btn + .nav__btn + .nav__btn:is(:hover, :focus-visible)),
.nav__btn:is(:hover, :focus-visible) + .nav__btn + .nav__btn + .nav__btn { --lerp: var(--lerp-3); z-index: 2; }

.nav__btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--white);
}

.nav__btn-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.nav__btn-num {
  position: absolute;
  bottom: 5px;
  left: 8px;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.22);
}

.nav__btn--cta {
  color: rgba(0,212,255,0.70);
  background: rgba(0,212,255,0.04);
  border-right: none;
}

.nav__btn--cta .nav__btn-num { color: rgba(0,212,255,0.35); }

.nav__btn--cta:hover {
  background: rgba(0,212,255,0.09);
  color: var(--cyan);
}

/* Hamburger (mobile only) */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 20px;
  align-self: center;
  margin-left: auto;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.nav__mobile {
  display: none;
  position: fixed;
  top: 60px;
  left: 12px; right: 12px;
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  padding: 20px 32px;
}

.nav__mobile.open { display: block; }
.nav__mobile ul { display: flex; flex-direction: column; gap: 4px; }

.nav__mobile-link {
  display: block;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}

.nav__mobile-link:hover { color: var(--white); }

/* ===================================
   BUTTONS
   =================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: var(--r);
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--cyan);
  color: var(--black);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,212,255,0.25);
}

.btn--primary:hover {
  background: transparent;
  color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 36px var(--cyan-glow);
}

.btn--outline {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  color: var(--white);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

.btn--outline:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--nav-h) 40px 80px;
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0); /* force GPU compositing layer */
}

/* Minimal overlay — just a bottom fade to blend into next section */
.hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)),
    linear-gradient(to bottom, transparent 0%, transparent 70%, var(--black) 100%);
}

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

/* HUD corner markers — hidden for the minimal hero */
.hero__hud {
  display: none;
  position: absolute;
  width: 64px;
  height: 64px;
  z-index: 2;
  pointer-events: none;
}

.hero__hud--tl { top: 96px; left: 40px; }
.hero__hud--tr { top: 96px; right: 40px; }
.hero__hud--bl { bottom: 80px; left: 40px; }
.hero__hud--br { bottom: 80px; right: 40px; }

.hero__hud-line {
  display: block;
  background: rgba(0, 212, 255, 0.40);
  position: absolute;
}

/* TL — lines anchor top-left */
.hero__hud--tl .hero__hud-line--h { width: 32px; height: 1px; top: 0; left: 0; }
.hero__hud--tl .hero__hud-line--v { width: 1px; height: 32px; top: 0; left: 0; }

/* TR — lines anchor top-right */
.hero__hud--tr .hero__hud-line--h { width: 32px; height: 1px; top: 0; right: 0; }
.hero__hud--tr .hero__hud-line--v { width: 1px; height: 32px; top: 0; right: 0; }

/* BL — lines anchor bottom-left */
.hero__hud--bl .hero__hud-line--h { width: 32px; height: 1px; bottom: 0; left: 0; }
.hero__hud--bl .hero__hud-line--v { width: 1px; height: 32px; bottom: 0; left: 0; }

/* BR — lines anchor bottom-right */
.hero__hud--br .hero__hud-line--h { width: 32px; height: 1px; bottom: 0; right: 0; }
.hero__hud--br .hero__hud-line--v { width: 1px; height: 32px; bottom: 0; right: 0; }

.hero__hud-label {
  position: absolute;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: rgba(0, 212, 255, 0.45);
  white-space: nowrap;
}

/* Labels sit just outside the bracket corner */
.hero__hud--tl .hero__hud-label { top: 36px; left: 0; }
.hero__hud--tr .hero__hud-label { top: 36px; right: 0; text-align: right; }
.hero__hud--bl .hero__hud-label { bottom: 36px; left: 0; }
.hero__hud--br .hero__hud-label { bottom: 36px; right: 0; text-align: right; }

.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.hero__bg-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.09) 0%, transparent 70%);
  top: -100px; right: -100px;
}

.hero__bg-orb--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.07) 0%, transparent 70%);
  bottom: 0; left: -50px;
}

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  will-change: transform;
}

/* ===================================
   HERO CINEMATIC REVEAL ANIMATION
   Each element has --ci index, delay
   staggers by 0.18s per index
   =================================== */

.hero__cin {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(18px);
  /* animation fires only once .hero--ready is added by JS */
}

.hero--ready .hero__cin {
  animation: heroCinIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--ci, 0) * 0.18s + 0.15s);
}

@keyframes heroCinIn {
  0% {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(18px);
  }
  60% {
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Glass pill eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
  padding: 9px 22px;
  border-radius: 100px;
  /* liquid glass pill */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0,212,255,0.05);
}

.hero__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  display: inline-block;
  animation: pulse 2s ease infinite;
}

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

/* Minimal wordmark style — light weight, wide tracking, like the reference */
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: 1.45;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* offsets trailing letter-space so lines stay centered */
  text-transform: uppercase;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__title-line {
  display: block;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 55px rgba(255,255,255,0.18), 0 0 110px rgba(255,255,255,0.08);
}

/* SPACE — aurora accent (animated multi-colour gradient clipped to the text) */
.hero__title-accent {
  text-shadow: none;
  filter: drop-shadow(0 0 38px rgba(0, 194, 255, 0.28));
}

.hero__sub {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  margin-bottom: 52px;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Minimal ghost CTAs in the hero — quiet outlines, no glow */
.hero__actions .btn {
  padding: 12px 28px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.75);
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__actions .btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.45);
  color: var(--white);
  transform: none;
  box-shadow: none;
}

.hero__actions .btn--primary {
  border-color: rgba(0,212,255,0.45);
  color: rgba(0,212,255,0.85);
}

.hero__actions .btn--primary:hover {
  background: rgba(0,212,255,0.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

.hero__scroll-hint {
  display: none;
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  z-index: 3;
}

.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ===================================
   HERO → CONTENT BRIDGE LINE
   =================================== */

.hero-rule {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 48px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,8,0.5));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hero-rule__label {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.10), transparent);
}

.hero-rule__ref {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: rgba(0,212,255,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===================================
   SECTION DECORATION (lines + labels)
   =================================== */

.section {
  padding: 120px 0;
  overflow: hidden;
}

/* Each section gets a decorative layer */
.section-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Big ghost watermark number */
.section-deco__ghost {
  position: absolute;
  top: 20px;
  left: 30px;
  font-family: var(--font-display);
  font-size: clamp(140px, 18vw, 240px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255,255,255,0.07);
  text-shadow: 0 0 80px rgba(0,212,255,0.08);
  user-select: none;
}

.section-deco__ghost--right {
  left: auto;
  right: 30px;
}

/* Decorative horizontal rule with label */
.section-deco__rule {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 40px;
}

.section-deco__rule--1 { top: 32px; }
.section-deco__rule--2 { top: 52px; }

.section-deco__rule-label {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.16);
  white-space: nowrap;
  flex-shrink: 0;
}

.section-deco__rule-end {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(0,212,255,0.28);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.section-deco__rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.22), rgba(255,255,255,0.03));
}

.section-deco__rule-line--short {
  max-width: 120px;
  flex: none;
}

/* Vertical side label */
.section-deco__vert-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.18);
  white-space: nowrap;
  transform-origin: center center;
}

/* Scan-line texture on every section */
.section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 79px,
    rgba(255,255,255,0.03) 79px,
    rgba(255,255,255,0.03) 80px
  );
  pointer-events: none;
  z-index: 0;
}

/* Shared section header */
.section__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}

.section__num { display: none; }
.section__line { display: none; }

.section__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.32);
  padding-left: 10px;
  border-left: 1px solid rgba(0,212,255,0.32);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.section__title em { font-style: italic; }

/* ── Aurora accent text ──
   Replaces the flat cyan accent with an animated aurora-palette gradient
   clipped to the glyphs. Applied to header accents and the hero accent. */
.section__title em,
.hero__title-accent {
  background-image: linear-gradient(
    100deg,
    #00c2ff 0%,
    #33ff8c 25%,
    #ffc640 50%,
    #e54cff 75%,
    #00c2ff 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: aurora-text 9s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .section__title em,
  .hero__title-accent { animation: none; }
}
.section__title--center { text-align: center; }

/* Typewriter cursor */
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  background: rgba(255,255,255,0.75);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: twBlink 600ms steps(1) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }

.section__sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
  margin: 0 auto 72px;
  text-align: center;
}

/* ===================================
   DIVIDER
   =================================== */

.divider { width: 100%; height: 2px; overflow: hidden; }
.divider svg { width: 100%; height: 2px; display: block; }

/* ===================================
   ABOUT
   =================================== */

.about {
  background: rgba(12, 12, 12, 0.80);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 32px;
}

.about__left { padding-top: 80px; }
.about__left .section__title { margin-bottom: 0; }

.about__visual {
  position: relative;
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.about__visual img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  filter: saturate(1.1);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.about__visual:hover img { transform: scale(1.04); }

.about__visual-frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 4px;
  pointer-events: none;
}

.about__visual-frame::before,
.about__visual-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--cyan);
  border-style: solid;
}

.about__visual-frame::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}

.about__visual-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}

.about__visual-caption {
  position: absolute;
  bottom: 20px; left: 24px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0,0,0,0.9);
}

.about__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--off-white);
  margin-bottom: 20px;
}

.about__body:last-of-type { margin-bottom: 40px; }

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px;
  border-radius: 10px;
  /* dark flat block — matches the section 2 card base */
  position: relative;
  overflow: hidden;
  background: #03030a;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Top-edge shimmer, same as the service cards */
.about__stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
}

.about__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.about__stat-num em {
  font-style: normal;
  color: var(--gold);
  font-size: 32px;
}

.about__stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Glass badge pills */
.about__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about__badge {
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: all 0.2s ease;
}

.about__badge:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.2);
}

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

.services {
  background: rgba(3, 3, 10, 0.94);
}

/* CSS starfield layer 1 — dims and brightens on a slow cycle */
.services::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    /* tiny dim stars */
    48px 67px 0 0.5px rgba(255,255,255,0.50),
    132px 198px 0 0.5px rgba(255,255,255,0.40),
    267px 43px 0 0.5px rgba(255,255,255,0.55),
    389px 312px 0 0.5px rgba(255,255,255,0.35),
    543px 87px 0 0.5px rgba(255,255,255,0.60),
    712px 234px 0 0.5px rgba(255,255,255,0.45),
    812px 56px 0 0.5px rgba(255,255,255,0.50),
    934px 178px 0 0.5px rgba(255,255,255,0.40),
    1089px 134px 0 0.5px rgba(255,255,255,0.55),
    1167px 398px 0 0.5px rgba(255,255,255,0.30),
    76px 445px 0 0.5px rgba(255,255,255,0.45),
    198px 367px 0 0.5px rgba(255,255,255,0.35),
    345px 589px 0 0.5px rgba(255,255,255,0.50),
    467px 423px 0 0.5px rgba(255,255,255,0.40),
    623px 612px 0 0.5px rgba(255,255,255,0.30),
    780px 520px 0 0.5px rgba(255,255,255,0.45),
    900px 650px 0 0.5px rgba(255,255,255,0.35),
    1050px 560px 0 0.5px rgba(255,255,255,0.50),
    1130px 690px 0 0.5px rgba(255,255,255,0.30),
    30px 290px 0 0.5px rgba(255,255,255,0.45),
    /* soft-glow stars */
    89px 289px 1px 0.5px rgba(255,255,255,0.60),
    312px 156px 1px 0.5px rgba(255,255,255,0.70),
    512px 345px 1px 0.5px rgba(255,255,255,0.60),
    734px 478px 1px 0.5px rgba(255,255,255,0.65),
    923px 267px 1px 0.5px rgba(255,255,255,0.55),
    1045px 534px 1px 0.5px rgba(255,255,255,0.60),
    167px 534px 1px 0.5px rgba(255,255,255,0.50),
    445px 223px 1px 0.5px rgba(255,255,255,0.65),
    678px 567px 1px 0.5px rgba(255,255,255,0.55),
    856px 112px 1px 0.5px rgba(255,255,255,0.70),
    /* bright accent stars */
    234px 78px 2px 1px rgba(255,255,255,0.85),
    1023px 78px 2px 1px rgba(255,255,255,0.80),
    756px 134px 2px 1px rgba(0,212,255,0.70),
    1023px 456px 2px 1px rgba(255,255,255,0.85),
    456px 678px 2px 1px rgba(245,197,24,0.55),
    190px 145px 2px 1px rgba(255,255,255,0.75);
  animation: svcStars1 4.5s ease-in-out infinite alternate;
}

/* CSS starfield layer 2 — offset timing for independent shimmer */
.services::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    /* tiny dim stars */
    98px 123px 0 0.5px rgba(255,255,255,0.45),
    223px 78px 0 0.5px rgba(255,255,255,0.55),
    378px 245px 0 0.5px rgba(255,255,255,0.35),
    489px 178px 0 0.5px rgba(255,255,255,0.50),
    601px 490px 0 0.5px rgba(255,255,255,0.40),
    744px 312px 0 0.5px rgba(255,255,255,0.55),
    867px 389px 0 0.5px rgba(255,255,255,0.35),
    989px 145px 0 0.5px rgba(255,255,255,0.60),
    1112px 289px 0 0.5px rgba(255,255,255,0.40),
    56px 567px 0 0.5px rgba(255,255,255,0.50),
    290px 634px 0 0.5px rgba(255,255,255,0.35),
    534px 712px 0 0.5px rgba(255,255,255,0.45),
    712px 623px 0 0.5px rgba(255,255,255,0.30),
    890px 734px 0 0.5px rgba(255,255,255,0.50),
    1045px 678px 0 0.5px rgba(255,255,255,0.35),
    145px 412px 0 0.5px rgba(255,255,255,0.45),
    /* soft-glow stars */
    178px 245px 1px 0.5px rgba(255,255,255,0.65),
    423px 512px 1px 0.5px rgba(255,255,255,0.55),
    645px 167px 1px 0.5px rgba(255,255,255,0.70),
    834px 589px 1px 0.5px rgba(255,255,255,0.60),
    1078px 378px 1px 0.5px rgba(255,255,255,0.55),
    267px 700px 1px 0.5px rgba(255,255,255,0.50),
    556px 389px 1px 0.5px rgba(255,255,255,0.65),
    756px 56px 1px 0.5px rgba(255,255,255,0.60),
    /* bright accent stars */
    589px 234px 2px 1px rgba(255,255,255,0.80),
    1145px 167px 2px 1px rgba(0,212,255,0.65),
    334px 456px 2px 1px rgba(255,255,255,0.85),
    978px 612px 2px 1px rgba(245,197,24,0.50),
    112px 712px 2px 1px rgba(255,255,255,0.75);
  animation: svcStars2 3.8s ease-in-out 1.2s infinite alternate;
}

@keyframes svcStars1 {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}
@keyframes svcStars2 {
  from { opacity: 0.35; }
  to   { opacity: 0.9; }
}

/* Services split layout — text left, grid right (wider) */
.services__split {
  display: grid;
  grid-template-columns: 3fr 2fr; /* cards (wide) on the left, header on the right */
  gap: 56px;
  align-items: start;
}

.services__split-left {
  padding-top: 0;
  position: relative;
  z-index: 1;
  grid-column: 2; /* header in the right column */
  grid-row: 1;
  align-self: end; /* anchored to the bottom of the row */
}

.services__split-right {
  grid-column: 1; /* cards in the left column */
  grid-row: 1;
}

.services__split .section__header { margin-bottom: 28px; }
.services__split .section__title { text-align: left; margin-bottom: 20px; }
.services__sub {
  text-align: left;
  margin: 0;
  max-width: none;
}

.services__split-right {
  position: relative;
  z-index: 1;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}

/* Service cards — dark glass default, space image reveals on hover */
.service-card {
  position: relative;
  background-color: #03030a;
  padding: 40px 36px;
  overflow: hidden;
}

/* Image + overlay layer — always showing, fades out on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.55s ease;
  z-index: 0;
}

.service-card:hover::before { opacity: 0; }

/* Top-edge shimmer */
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
  z-index: 2;
}

/* All inner content sits above the image layer */
.service-card > * { position: relative; z-index: 1; }

/* Per-card space images — gradient overlay + image in ::before */
.service-card[data-index="01"]::before {
  background-image:
    linear-gradient(to bottom, rgba(3,3,12,0.42) 0%, rgba(3,3,12,0.70) 55%, rgba(3,3,12,0.88) 100%),
    url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=700&q=75');
}
.service-card[data-index="02"]::before {
  background-image:
    linear-gradient(to bottom, rgba(3,3,12,0.42) 0%, rgba(3,3,12,0.70) 55%, rgba(3,3,12,0.88) 100%),
    url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=700&q=75');
}
.service-card[data-index="03"]::before {
  background-image:
    linear-gradient(to bottom, rgba(3,3,12,0.42) 0%, rgba(3,3,12,0.70) 55%, rgba(3,3,12,0.88) 100%),
    url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=700&q=75');
}
.service-card[data-index="04"]::before {
  background-image:
    linear-gradient(to bottom, rgba(3,3,12,0.42) 0%, rgba(3,3,12,0.70) 55%, rgba(3,3,12,0.88) 100%),
    url('https://images.unsplash.com/photo-1502134249126-9f3755a50d78?w=700&q=75');
}
.service-card[data-index="05"]::before {
  background-image:
    linear-gradient(to bottom, rgba(3,3,12,0.42) 0%, rgba(3,3,12,0.70) 55%, rgba(3,3,12,0.88) 100%),
    url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?w=700&q=75');
}
.service-card[data-index="06"]::before,
.service-card--accent::before {
  background-image:
    linear-gradient(to bottom, rgba(14,10,3,0.40) 0%, rgba(20,14,4,0.70) 55%, rgba(20,14,4,0.88) 100%),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=700&q=75');
}

.service-card__icon {
  width: 40px; height: 40px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
  transition: color 0.3s ease;
}

.service-card:hover .service-card__icon { color: var(--cyan); }
.service-card--accent:hover .service-card__icon { color: var(--gold); }

.service-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.service-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

.service-card:hover .service-card__desc { color: var(--off-white); }

/* ===================================
   NICHES
   =================================== */

.niches {
  background-color: #03030a;
  overflow: visible; /* must stay visible — overflow:hidden kills position:sticky */
  position: relative;
  z-index: 1;
  padding-top: 0;    /* let the static bg fill from the very top (no dead band) */
  padding-bottom: 0; /* drop the section's bottom padding so the cover math is exact */
}

/* Give the NICHES header its own top spacing now that the section padding is 0 */
.niches .section__header {
  padding-top: 96px;
}

/* Sticky background so the image stays fixed to the viewport (static) while
   scrolling through the section — background-attachment:fixed is unreliable
   here because the body has overflow-x:hidden. The negative margin removes it
   from layout flow so it doesn't affect the scroll geometry, and it's bounded
   by .niches so it never bleeds into adjacent sections. */
.niches__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  z-index: 0;
  background-image:
    linear-gradient(to bottom,
      rgba(3,3,10,0.72) 0%,
      rgba(3,3,10,0.55) 45%,
      rgba(3,3,10,0.55) 70%,
      rgba(3,3,10,0.78) 100%),
    url('https://images.unsplash.com/photo-1464802686167-b939a6910659?w=1600&q=75');
  background-size: cover;
  background-position: center;
}

/* Starfield — same pattern as services section */
.niches::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    112px 180px 0 0.5px rgba(255,255,255,0.40),
    290px 80px  0 0.5px rgba(255,255,255,0.55),
    430px 340px 0 0.5px rgba(255,255,255,0.35),
    670px 120px 0 0.5px rgba(255,255,255,0.50),
    810px 290px 0 0.5px rgba(255,255,255,0.40),
    960px 55px  0 0.5px rgba(255,255,255,0.60),
    55px  490px 0 0.5px rgba(255,255,255,0.35),
    340px 620px 0 0.5px rgba(255,255,255,0.45),
    590px 510px 0 0.5px rgba(255,255,255,0.30),
    740px 680px 0 0.5px rgba(255,255,255,0.50),
    1100px 200px 0 0.5px rgba(255,255,255,0.45),
    1240px 480px 0 0.5px rgba(255,255,255,0.35),
    185px 730px 1px 0.5px rgba(255,255,255,0.60),
    480px 210px 1px 0.5px rgba(255,255,255,0.65),
    820px 440px 1px 0.5px rgba(255,255,255,0.55),
    1060px 610px 1px 0.5px rgba(255,255,255,0.60),
    320px 420px 2px 1px rgba(0,212,255,0.50),
    900px 160px 2px 1px rgba(255,255,255,0.80),
    650px 760px 2px 1px rgba(245,197,24,0.45),
    1180px 340px 2px 1px rgba(255,255,255,0.75);
  animation: svcStars1 6s ease-in-out infinite alternate;
}

/* Ambient cyan glow behind the spotlight zone */
.niches::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  height: 40%;
  background: radial-gradient(ellipse 60% 50% at 55% 50%,
    rgba(0,212,255,0.055) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}



/* ── Scroll-pinned niche list ──
   niches__scroll-outer is tall (set by JS via --niche-travel) and provides
   the scroll travel. niches__scroll-pin is sticky at top:0 and fills the
   viewport — it never moves. JS translates the list upward through the pin
   as the user scrolls, and marks the item nearest the label as niche-active. */

.niches__scroll-outer {
  /* Original animation geometry (60vh) + a 110vh trailing cover window.
     The extra height only extends how long the pin stays frozen AFTER the
     animation finishes — it does not change where the animation starts or
     its timing (both governed by the pin's top:50vh and the JS lockY). The
     trailing room lets the contact section slide up and fully cover the
     frozen list before the pin unsticks. */
  height: calc(210vh + var(--niche-travel, 500px));
  position: relative;
  margin-bottom: 0;
}

.niches__scroll-pin {
  position: sticky;
  top: 50vh; /* original lock position — do not change (sets start location) */
  height: 50vh; /* occupies the lower half of the viewport when locked */
  overflow: hidden;
}

/* Inner wrapper holds the label + list as one unit so JS can translate the
   whole "WE OPERATE IN <word>" phrase horizontally to centre it at the end. */
.niches__scroll-inner {
  display: flex;
  align-items: flex-start;
  gap: 2ch;
  will-change: transform;
  /* Time-based centring glide, triggered the moment INNOVATION meets the
     label — smooth and unhurried, no extra scrolling required. */
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Split overlay of the WE OPERATE IN INNOVATION phrase ──
   In the tail of section 3 the real phrase is hidden and this identical
   overlay is positioned exactly on top of it (via JS). Scroll drives
   --split (0→1): the top/bottom halves separate to reveal the INTERESTED?
   band in the phrase's own middle. */
.niches__split {
  position: fixed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* Both halves hold the word INNOVATION; each is clipped to one half. Aurora
   colour comes from the shared aurora rule below. */
.niches__split-half { white-space: nowrap; }

.niches__split-top {
  position: relative;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transform: translateY(calc(var(--split, 0) * -0.18em));
}

.niches__split-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(calc(var(--split, 0) * 0.18em));
}

/* INTERESTED? band — revealed with clip-path (no scaling, so the text stays
   crisp while scrolling) between the two INNOVATION halves. */
.niches__split-band {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  background: var(--gold);
  color: #08080a;
  font-size: 0.24em;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* balance the trailing letter-spacing */
  text-align: center;
  padding: 0.5em 0.9em;
  line-height: 1;
  clip-path: inset(calc((1 - var(--split, 0)) * 50%) 0);
}

.niches__scroll-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--off-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.niches__scroll-list {
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
}

.niches__scroll-list li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.15);
  transition: color 0.3s ease;
}

.niches__scroll-list li.niche-active {
  color: var(--cyan);
}

/* INNOVATION (final item) + the split overlay's word — aurora gradient */
.niches__scroll-list li:last-child.niche-active,
.niches__split-half {
  background-image: linear-gradient(
    100deg,
    #00c2ff 0%,
    #33ff8c 25%,
    #ffc640 50%,
    #e54cff 75%,
    #00c2ff 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: aurora-text 9s ease-in-out infinite;
}

/* Full-width CTA section closing section 3 */
.niches__cta-section {
  width: 100%;
}

.niches__cta-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 80px 8vw;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  background-color: #03030a;
  background-image:
    linear-gradient(to right, rgba(3,3,10,0.88) 0%, rgba(3,3,10,0.62) 55%, rgba(3,3,10,0.45) 100%),
    url('https://images.unsplash.com/photo-1464802686167-b939a6910659?w=1600&q=75');
  background-size: cover;
  background-position: center;
  min-height: 260px;
}

/* Top-edge shimmer, same as the service cards */
.niches__cta-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
}

.niches__cta-text {
  font-size: 20px;
  font-weight: 500;
  max-width: 480px;
  line-height: 1.5;
}

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

.contact {
  position: relative;
  overflow: hidden;
  z-index: 2;
  min-height: 100vh; /* fills the screen as it slides up over the pinned niche list */
  display: flex;
  align-items: center; /* vertically centre the content within the section */
  justify-content: center;
  /* Pulled up past a full viewport so it rises over the frozen niche pin and
     fully covers it before the pin unsticks, ending with the niche section
     fully hidden. */
  margin-top: -80vh;
  background-color: #03030a; /* solid bg so section 3 image doesn't bleed through */
}

.contact__bg-image {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1800&q=75');
  background-size: cover;
  background-position: center 58%; /* shifted up so the frame isn't cut off at the top */
  opacity: 0.3;
}

.contact__bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 50% 50%, transparent 0%, rgba(8,8,8,0.75) 65%, var(--black) 100%),
    linear-gradient(to bottom, var(--black) 0%, transparent 22%, transparent 78%, var(--black) 100%);
}

.contact__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.contact__orb {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(40px);
}

.contact__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.9vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  width: 100%;
  text-align: center;
}

.contact__title em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

/* Line-by-line reveal */
.ct-line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(16px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s ease;
}

.ct-line:nth-child(2) {
  transition-delay: 0.2s;
}

.contact__title.animate-in .ct-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.contact__sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Glass email CTA */
.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  padding: 22px 44px;
  border-radius: var(--r);
  margin-bottom: 48px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(5px) saturate(1.2);
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 32px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

.contact__email svg {
  width: 20px; height: 20px;
  transition: transform 0.3s ease;
}

/* Aurora hover: animated gradient outline + aurora email text */
.contact__email:hover {
  border: 1px solid transparent;
  background:
    linear-gradient(#060610, #060610) padding-box,
    linear-gradient(100deg, #00c2ff, #33ff8c, #ffc640, #e54cff, #00c2ff) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: aurora-text 9s ease-in-out infinite;
  color: #eaf6ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 40px rgba(0,194,255,0.18);
}

.contact__email:hover .contact__email-text {
  background-image: linear-gradient(
    100deg, #00c2ff 0%, #33ff8c 25%, #ffc640 50%, #e54cff 75%, #00c2ff 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: aurora-text 9s ease-in-out infinite;
}

.contact__email:hover svg { transform: translate(3px, -3px); }

.contact__divider {
  width: 60px; height: 1px;
  background: var(--glass-border);
  margin: 0 auto 28px;
}

.contact__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.contact__meta-sep { color: var(--glass-border); }

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

.footer {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  padding: 60px 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__logo-img {
  height: 44px;
  width: auto;
  opacity: 0.85;
}

.footer__tagline {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__nav a {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  transition: color 0.2s;
}

.footer__nav a:hover { color: var(--white); }

.footer__copy {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.2);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  width: 100%;
}

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 1024px) {
  .services__split { grid-template-columns: 1fr; gap: 40px; }
  .services__split-left { padding-top: 0; grid-column: auto; grid-row: auto; align-self: auto; }
  .services__split-right { grid-column: auto; grid-row: auto; }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .section { padding: 80px 0; }
  .nav__buttons { display: none; }
  .nav__hamburger { display: flex; }
  .hero { padding: var(--nav-h) 24px 60px; }
  .hero__hud--tr, .hero__hud--br { display: none; }
  .hero__hud--tl, .hero__hud--bl { left: 20px; }
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__left { padding-top: 0; }
  .about__stats { grid-template-columns: 1fr 1fr; }
  .services__split { grid-template-columns: 1fr; gap: 32px; }
  .services__split-left { padding-top: 0; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .niches__cta-block { flex-direction: column; text-align: center; padding: 48px 24px; }
  .contact__email { font-size: 16px; padding: 16px 24px; word-break: break-all; }
  .hero__scroll-hint { display: none; }
  .section-deco__vert-label { display: none; }

  .hero__title {
    text-indent: 0;
    letter-spacing: 0.22em;
    text-align: center;
    align-items: center;
  }
  .hero__sub {
    text-indent: 0;
    letter-spacing: 0.18em;
    text-align: center;
  }
  .hero__actions {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Slightly more tint on mobile for text legibility */
  .hero__video-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
      linear-gradient(to bottom, transparent 0%, transparent 70%, var(--black) 100%);
  }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .about__stats { grid-template-columns: 1fr 1fr; }
  .hero__hud { display: none; }
}