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

:root {
  --charcoal: #0a0a0c;
  --neon-cyan: #00f2ff;
  --neon-cyan-dim: rgba(0, 242, 255, 0.5);
  --neon-cyan-glow: rgba(0, 242, 255, 0.2);
  --neon-cyan-subtle: rgba(0, 242, 255, 0.08);
  /* Color Discipline: magenta eliminated — remapped to cyan for backward compat */
  --neon-magenta: #00f2ff;
  --neon-magenta-dim: rgba(0, 242, 255, 0.5);
  --neon-magenta-glow: rgba(0, 242, 255, 0.15);
  --neon-amber: #ffaa00;
  --neon-amber-dim: rgba(255, 170, 0, 0.5);
  --neon-amber-glow: rgba(255, 170, 0, 0.15);
  --green: #00ff9d;
  --green-dim: rgba(0, 255, 157, 0.5);
  --text-primary: #e8f0f8;
  --text-secondary: #94a3b8;
  --text-dim: #64748b;
  --text-muted: #475569;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
}

::selection {
  background: var(--neon-cyan);
  color: var(--charcoal);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  font-family: var(--font-sans);
  background: var(--charcoal);
  color: #cbd5e1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Film Grain — cinematic depth overlay (SVG feTurbulence, no tiling artifacts) */
body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  mix-blend-mode: overlay;
  filter: url(#grain-filter);
  background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1
}

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

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

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px
}

::-webkit-scrollbar-track {
  background: var(--charcoal)
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2)
}

/* ===== UTILITIES ===== */
.bg-text-heavy {
  position: relative;
  z-index: 1;
  background-color: rgba(10, 10, 12, 0.82) !important;
}

@supports (backdrop-filter: blur(8px)) {
  .bg-text-heavy {
    background-color: rgba(10, 10, 12, 0.75) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem
}

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

/* Skip Navigation — visible only on keyboard focus */
.skip-nav {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--charcoal);
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 242, 255, 0.3);
}

.skip-nav:focus {
  top: 1rem;
  outline: none;
}

.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.glass-panel:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover)
}

.text-cyan {
  color: var(--neon-cyan)
}

.text-magenta {
  color: var(--neon-cyan)
}

.text-amber {
  color: var(--neon-amber)
}

.text-green {
  color: var(--green)
}

/* ===== AI POP HIGHLIGHT ===== */
/* The "AI" in AscertAIn always pops -- bright, unmissable */
.ai-pop {
  color: var(--neon-cyan);
  font-weight: inherit;
  display: inline;
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  text-shadow:
    0 0 8px rgba(0, 200, 255, 0.6),
    0 0 20px rgba(0, 140, 255, 0.3),
    0 0 40px rgba(0, 100, 255, 0.15);
  animation: aiPopPulse 3s ease-in-out infinite;
}

/* In dark/mono contexts where surrounding text is dim, make AI even brighter */
.footer-brand .ai-pop,
.terminal-line .ai-pop {
  text-shadow:
    0 0 6px rgba(0, 220, 255, 0.7),
    0 0 16px rgba(0, 160, 255, 0.35);
}

@keyframes aiPopPulse {

  0%,
  100% {
    text-shadow: 0 0 8px rgba(0, 200, 255, 0.6), 0 0 20px rgba(0, 140, 255, 0.3), 0 0 40px rgba(0, 100, 255, 0.15)
  }

  50% {
    text-shadow: 0 0 12px rgba(0, 220, 255, 0.8), 0 0 28px rgba(0, 160, 255, 0.4), 0 0 55px rgba(0, 120, 255, 0.2)
  }
}

/* Logo specific: the span in .logo-text already wraps AIn */
.logo-text span {
  color: var(--neon-cyan) !important;
  text-shadow:
    0 0 8px rgba(0, 200, 255, 0.5),
    0 0 20px rgba(0, 140, 255, 0.25),
    0 0 40px rgba(0, 100, 255, 0.1);
}

/* Styling for ai-it superscript brackets in body text */
sup.ai-it {
  font-size: 0.65em;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  margin-left: 1px;
}

sup.ai-it::before {
  content: '[';
  color: rgba(100, 160, 180, 0.7);
  font-weight: 300;
  margin-right: 0.5px;
}

sup.ai-it::after {
  content: ']';
  color: rgba(100, 160, 180, 0.7);
  font-weight: 300;
  margin-left: 0.5px;
}

.logo img {
  filter:
    drop-shadow(0 0 3px rgba(0, 242, 255, 0.3)) drop-shadow(0 0 10px rgba(0, 220, 255, 0.5)) drop-shadow(0 0 25px rgba(0, 180, 255, 0.2));
  transition: filter 0.3s ease;
}

.logo:hover img {
  filter:
    drop-shadow(0 0 4px rgba(0, 242, 255, 0.5)) drop-shadow(0 0 14px rgba(0, 220, 255, 0.7)) drop-shadow(0 0 30px rgba(0, 180, 255, 0.3));
}

/* ===== CHERENKOV RADIATION GLOW SYSTEM ===== */
/* Deep blue-cyan glow that mimics Cherenkov radiation in water --
   the characteristic blue luminescence of nuclear reactors */

/* Cherenkov glow on cyan text */
.text-cyan,
.hero h1 .text-cyan,
.section-label,
.terminal-line .prompt,
.hero-badge {
  text-shadow:
    0 0 7px rgba(0, 180, 255, 0.4),
    0 0 20px rgba(0, 140, 255, 0.2),
    0 0 40px rgba(0, 100, 255, 0.1);
}

/* Cherenkov glow on interactive cyan elements */
.nav-cta,
.btn-primary,
.logo-icon,
.contact-form .btn-submit {
  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.3),
    0 0 30px rgba(0, 140, 255, 0.15),
    0 0 60px rgba(0, 100, 255, 0.08);
}

.nav-cta:hover,
.btn-primary:hover,
.contact-form .btn-submit:hover {
  box-shadow:
    0 0 15px rgba(0, 220, 255, 0.5),
    0 0 40px rgba(0, 160, 255, 0.25),
    0 0 80px rgba(0, 100, 255, 0.12);
}

/* Cherenkov border glow on cards with cyan accents */
.solution-card:hover .solution-card-icon,
.pipeline-step:hover .pipeline-step-icon,
.adoption-step:hover .adoption-num,
.security-card:hover .security-card-icon,
.feature-card:hover {
  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.2),
    0 0 25px rgba(0, 140, 255, 0.1),
    0 0 50px rgba(0, 80, 255, 0.05);
}

/* Cherenkov glow on scrollbar */
::-webkit-scrollbar-thumb {
  box-shadow: 0 0 6px rgba(0, 180, 255, 0.15);
}

/* Cherenkov pulse animation for key elements */
@keyframes cherenkovPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.3), 0 0 30px rgba(0, 140, 255, 0.15), 0 0 60px rgba(0, 80, 255, 0.06);
  }

  50% {
    box-shadow: 0 0 15px rgba(0, 220, 255, 0.5), 0 0 45px rgba(0, 160, 255, 0.25), 0 0 90px rgba(0, 100, 255, 0.1);
  }
}

@keyframes cherenkovTextPulse {

  0%,
  100% {
    text-shadow: 0 0 7px rgba(0, 180, 255, 0.4), 0 0 20px rgba(0, 140, 255, 0.2), 0 0 40px rgba(0, 100, 255, 0.1);
  }

  50% {
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.6), 0 0 30px rgba(0, 160, 255, 0.3), 0 0 60px rgba(0, 120, 255, 0.15);
  }
}

.hero h1 .text-cyan {
  animation: cherenkovTextPulse 4s ease-in-out infinite
}

.logo-icon {
  animation: cherenkovPulse 5s ease-in-out infinite
}

/* Cherenkov glow on the hero badge ping dot */
.hero-badge .ping-dot {
  box-shadow: 0 0 6px rgba(0, 242, 255, 0.6), 0 0 15px rgba(0, 140, 255, 0.3);
}

/* Cherenkov glow on the progress bar */
#scroll-progress {
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.4), 0 0 20px rgba(0, 120, 255, 0.15);
}

/* Cherenkov effect on the floating CTA */
.floating-cta {
  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.3),
    0 0 30px rgba(0, 140, 255, 0.15),
    0 0 60px rgba(0, 80, 255, 0.06) !important;
}

.floating-cta .cta-dot {
  box-shadow: 0 0 6px rgba(0, 242, 255, 0.8), 0 0 15px rgba(0, 140, 255, 0.4);
}

@keyframes ctaPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.3), 0 0 30px rgba(0, 140, 255, 0.15), 0 0 60px rgba(0, 80, 255, 0.06)
  }

  50% {
    box-shadow: 0 0 15px rgba(0, 220, 255, 0.5), 0 0 45px rgba(0, 160, 255, 0.25), 0 0 90px rgba(0, 100, 255, 0.1)
  }
}

/* Cherenkov glow on the terminal */
.terminal {
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 140, 255, 0.06),
    0 0 60px rgba(0, 80, 255, 0.03);
}

.terminal-cursor {
  box-shadow: 0 0 6px rgba(0, 242, 255, 0.6), 0 0 12px rgba(0, 140, 255, 0.3);
}

/* Cherenkov glow on module status dots */
.module-status.live::before {
  box-shadow: 0 0 6px var(--green), 0 0 12px rgba(0, 255, 157, 0.3);
}

/* Principle border Cherenkov glow */
.principle:first-child {
  box-shadow: inset 3px 0 15px rgba(0, 200, 255, 0.06);
}

/* Cherenkov on hero visual diamonds */
.hero-diamond-1 {
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.08), inset 0 0 20px rgba(0, 180, 255, 0.04);
}

.hero-diamond-2 {
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.06), inset 0 0 15px rgba(255, 0, 255, 0.03);
}

/* Cherenkov on the scanline */
.scanline {
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.5), transparent);
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.3);
}

/* ===== SCROLL PROGRESS BAR ===== */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
  width: 0%;
  z-index: 200;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--neon-cyan-glow);
}

/* ===== BACKGROUND EFFECTS ===== */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  /* Considerably reduced matrix opacity to remove distraction */
}

.gradient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}

.orb-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--neon-cyan), transparent 70%);
  top: -250px;
  left: -200px;
  opacity: 0.07;
  animation: orbFloat1 25s ease-in-out infinite
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--neon-magenta), transparent 70%);
  bottom: -150px;
  right: -150px;
  opacity: 0.05;
  animation: orbFloat2 30s ease-in-out infinite
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--neon-amber), transparent 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.04;
  animation: orbFloat3 35s ease-in-out infinite
}

@keyframes orbFloat1 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(80px, 60px)
  }
}

@keyframes orbFloat2 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-60px, -50px)
  }
}

@keyframes orbFloat3 {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  50% {
    transform: translate(-40%, -55%) scale(1.15)
  }
}

.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent);
}

.scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan-dim), transparent);
  z-index: 9997;
  pointer-events: none;
  animation: scanline 10s linear infinite;
  opacity: 0.15;
}

@keyframes scanline {
  0% {
    top: -2px
  }

  100% {
    top: 100%
  }
}

/* ===== NAV ===== */
nav {
  position: fixed;
  top: 3px;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1rem 0;
  background: transparent;
  transition: all 0.4s var(--ease-out-expo);
}

nav.scrolled {
  padding: 0.75rem 0;
  background: rgba(10, 10, 12, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.logo-icon {
  width: 50px;
  /* Increased 25% */
  height: 50px;
  background: rgba(0, 240, 255, 0.05);
  border-radius: 50%;
  border: 1.5px solid var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px var(--neon-cyan-dim), inset 0 0 12px var(--neon-cyan-dim);
  transition: all 0.3s ease;
  position: relative;
}

.logo-icon svg.check-a {
  width: 25px;
  /* Increased 25% */
  height: 25px;
}

.check-a-leg {
  stroke: var(--text-primary);
  stroke-width: 2.5;
}

.check-a-mark {
  stroke: var(--neon-cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--neon-cyan));
  transition: stroke 0.3s ease;
}

.logo:hover .logo-icon {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--neon-cyan-dim), inset 0 0 20px var(--neon-cyan-dim);
}

.logo:hover .check-a-mark {
  stroke: #ffffff;
}

.logo-text {
  font-size: 1.875rem;
  /* Increased 25% */
  font-weight: 800;
  letter-spacing: -0.04em;
  color: white
}

.logo-text span {
  color: var(--neon-cyan)
}

.nav-status {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  background: rgba(0, 255, 157, 0.05);
  border: 1px solid rgba(0, 255, 157, 0.15);
  padding: 0.35rem 0.6rem;
  border-radius: 50px;
  margin-left: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media(min-width:1024px) {
  .nav-status {
    display: flex;
  }
}

.status-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05)
}

.nav-links a.active {
  color: white;
}

.nav-cta {
  padding: 0.6rem 1.25rem !important;
  background: var(--neon-cyan) !important;
  color: var(--charcoal) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  box-shadow: 0 0 20px var(--neon-cyan-glow);
  transition: all 0.3s var(--ease-spring) !important;
  white-space: nowrap;
}

.nav-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px var(--neon-cyan-dim)
}

.nav-cta::after {
  display: none !important
}

/* ===== REVIEW ENGINES DROPDOWN ===== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown>.nav-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-dropdown>.nav-dropdown-trigger .dd-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.nav-dropdown:hover>.nav-dropdown-trigger .dd-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  margin-top: 0.5rem;
  min-width: 320px;
  background: rgba(10, 10, 12, 0.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 242, 255, 0.1);
  border-radius: 12px;
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 140, 255, 0.06);
}

/* Invisible bridge to prevent hover loss between nav item and dropdown */
.nav-dropdown-panel::after {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 1.5rem;
}

.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: rgba(0, 242, 255, 0.15);
}

.nav-dropdown:hover .nav-dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s ease;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.nav-dropdown-item.nav-dropdown-item--coming {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
}

.nav-dropdown-name {
  display: block;
  font-weight: 600;
  color: inherit;
}

.nav-dropdown-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-badge.live {
  color: var(--charcoal);
  background: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.3);
}

.nav-dropdown-badge.live .status-dot-pulse {
  background: var(--charcoal);
  box-shadow: none;
}

.nav-dropdown-badge.soon {
  color: var(--neon-amber);
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.25);
}

.nav-dropdown-badge.roadmap {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0.5rem;
}

/* Mobile: engines accordion */
.mobile-engines-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-engines-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-sm);
}

.mobile-engines-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.mobile-engines-trigger .dd-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.mobile-engines-list {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0.5rem 0.5rem 1rem;
}

.mobile-engines-list.open {
  display: flex;
}

.mobile-engines-list a,
.mobile-engines-list span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-radius: 6px;
  text-decoration: none;
}

.mobile-engines-list a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.mobile-engines-list span.dd-item--disabled {
  opacity: 0.45;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .mobile-toggle {
    display: block;
  }
}

@media (min-width: 901px) {

  .mobile-toggle,
  .mobile-menu,
  .mobile-menu.open {
    display: none !important;
  }
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(10, 10, 12, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 1.5rem;
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.3s var(--ease-out-expo);
  pointer-events: none;
}

.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.mobile-menu>a,
.mobile-menu .nav-dropdown>a.nav-dropdown-trigger {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.mobile-menu>a:hover,
.mobile-menu .nav-dropdown>a.nav-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white
}

.mobile-menu .nav-dropdown-panel {
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  margin-top: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  /* Collapsed by default — toggled open via JS */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 0 0 0 !important;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.mobile-menu .nav-dropdown.mobile-dropdown-open .nav-dropdown-panel {
  max-height: 500px;
  opacity: 1;
  padding: 0.5rem 0 0.5rem 0 !important;
}

/* Rotate chevron when open */
.mobile-menu .nav-dropdown.mobile-dropdown-open > .nav-dropdown-trigger svg {
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.mobile-menu .nav-dropdown > .nav-dropdown-trigger svg {
  transition: transform 0.25s ease;
}

.mobile-menu .nav-dropdown-panel::before {
  display: none !important;
}

.mobile-menu .nav-dropdown-panel a.nav-dropdown-item {
  padding: 0.6rem 0.75rem;
}

.mobile-menu .nav-cta {
  text-align: center;
  margin-top: 0.5rem
}



@media (max-width: 900px) {

  .hero-content {
    z-index: 20;
    margin-bottom: 0;
    position: relative;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    /* properly sized for mobile */
    line-height: 1;
    /* breathing room */
    letter-spacing: -0.02em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 21;
  }

  .hero-desc {
    background: rgba(10, 10, 12, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--neon-cyan);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 21;
  }
}


.hero-visual {
  position: absolute;
  right: -15%;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  min-height: 700px;
  z-index: 1;
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--neon-cyan);
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
  white-space: nowrap;
}

.hero-badge .ping {
  position: relative;
  display: flex;
  width: 8px;
  height: 8px
}

.hero-badge .ping-ring {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--neon-cyan);
  opacity: 0.75;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hero-badge .ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-cyan)
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0
  }
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-wrap: balance;
}

.hero h1 .text-cyan {
  -webkit-text-fill-color: var(--neon-cyan)
}

.hero-desc {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.3s var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--neon-cyan);
  color: var(--charcoal);
  box-shadow: 4px 4px 0px var(--neon-cyan-dim);
  transition: all 0.35s var(--ease-spring);
}

.btn-primary:hover {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow:
    6px 6px 0px var(--neon-cyan),
    0 0 25px rgba(0, 242, 255, 0.25),
    0 0 50px rgba(0, 242, 255, 0.1);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(255, 255, 255, 0.1);
}

.btn-icon {
  transition: transform 0.3s ease
}

.btn:hover .btn-icon {
  transform: translateX(3px)
}

.hero-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .hero-badges {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
}

.hero-badges span {
  display: flex;
  align-items: center;
  gap: 0.35rem
}

.hero-badges svg {
  width: 14px;
  height: 14px;
  opacity: 0.7
}

/* ===== HERO ===== */
.hero {
  min-height: auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 9rem 0 3rem;
  overflow-x: clip;
  overflow-y: visible;
}

/* Cherenkov Light Bloom — localized glow behind hero product panel */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 5%;
  width: 55%;
  height: 70%;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(0, 242, 255, 0.08) 0%,
    rgba(0, 180, 255, 0.04) 30%,
    rgba(0, 100, 200, 0.02) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

@media (max-width: 900px) {
  .hero {
    padding: 15rem 0 2rem;
  }
}

/* Smooth hero container scaling — no jumps between breakpoints */
.hero .container {
  max-width: clamp(1200px, 90vw, 1800px);
}

.hero-container-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* Reduced gap slightly to buy more horizontal space */
  row-gap: 4rem;
  position: relative;
  width: 100%;
}

@media (max-width: 900px) {
  .hero-container-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

.hero-content {
  flex: 1 1 520px;
  /* Exact width needed to guarantee side-by-side buttons */
  min-width: 320px;
  max-width: 750px;
  /* Prevent it from stealing gallery right-side space */
  width: 100%;
  position: relative;
  z-index: 10;
  padding-right: 0;
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: nowrap;
  /* strictly prevent requested buttons from stacking */
}

@media (max-width: 768px) {
  .hero-actions {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
  }
}

.hero h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-wrap: balance;
}

.text-nowrap {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .text-nowrap {
    white-space: normal;
  }
}

.hero h1 .text-cyan {
  -webkit-text-fill-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.hero-badges-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

/* Unified badging row */
.hero-badges-container {
  width: 100%;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* very subtle seperation */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badges-fullrow {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* safety wrap for extreme mobile */
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .hero-badges-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .hero-badges-fullrow {
    justify-content: center;
    gap: 1rem;
  }
}

/* Backward compatibility for any remaining standard lists */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* reduced from 1rem so they fit beautifully */
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Story Flow - Domino Cascade */
.domino-caption {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.domino-caption::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--text-dim);
}

.domino-cascade {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.domino-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.6rem 1.25rem 0.6rem 3rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
  border-left-width: 3px;
  margin-bottom: 0;
}

.domino-step p {
  margin: 0;
}

.domino-num {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.domino-connector {
  position: absolute;
  left: calc(5% + 0.75rem);
  bottom: -1.2rem;
  width: 2px;
  height: 1.2rem;
  z-index: 1;
}

/* Step 1: Slate — leftmost */
.domino-step--1 {
  border-left-color: #4a5568;
  margin-left: 0;
}

.domino-step--1 .domino-num {
  color: #718096;
}

.domino-step--1 .domino-connector {
  background: #4a5568;
}

/* Step 2: Amber — slight indent */
.domino-step--2 {
  border-left-color: #d97706;
  margin-left: 5%;
  margin-top: 1.2rem;
}

.domino-step--2 .domino-num {
  color: #d97706;
}

.domino-step--2 .domino-connector {
  background: #d97706;
}

/* Step 3: Orange — more indent */
.domino-step--3 {
  border-left-color: #ea580c;
  margin-left: 10%;
  margin-top: 1.2rem;
}

.domino-step--3 .domino-num {
  color: #ea580c;
}

.domino-step--3 .domino-connector {
  background: #ea580c;
}

/* Step 4: Red — most indent */
.domino-step--4 {
  border-left-color: #dc2626;
  margin-left: 15%;
  margin-top: 1.2rem;
  min-width: 85%;
  background: rgba(220, 38, 38, 0.04);
}

.domino-step--4 .domino-num {
  color: #dc2626;
}

/* Every Time label */
.domino-every-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.domino-every-time-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #dc2626);
}

.domino-every-time span {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #dc2626;
}

.hero-desc {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 1.25rem;
}

.hero-desc-secondary {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 520px;
  margin-bottom: 2rem;
}



/* ===== HERO CROSSFADE GALLERY ===== */
/* 3 images, 15s total cycle (5s per slide: 1s fade-in, 3s hold, 1s fade-out) */
.hero-gallery-wrap {
  flex: 1.2 1 500px;
  /* Reduced base width so it sits securely on the right */
  min-width: 320px;
  max-width: 1100px;
  width: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-top: 3.5rem;
  /* Shift platform preview down as requested */
}

@media (max-width: 900px) {
  .hero-gallery-wrap {
    order: 2;
    margin: 2rem auto 0;
    transform: none;
    align-items: flex-start;
  }
}

.hero-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 834;
  border: 1px solid rgba(0, 242, 255, 0.15);
  background: rgba(0, 10, 20, 0.6);
  overflow: hidden;
  box-shadow:
    0 0 30px rgba(0, 140, 255, 0.08),
    0 0 60px rgba(0, 80, 255, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

@media (max-width: 900px) {
  .hero-gallery {
    width: 100%;
    margin-left: 0;
  }
}

.hero-gallery:hover {
  border-color: rgba(0, 242, 255, 0.3);
  box-shadow:
    0 0 40px rgba(0, 180, 255, 0.15),
    0 0 80px rgba(0, 100, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 15s ease-in-out infinite;
}

.hero-slide-1 {
  animation-delay: 0s;
}

.hero-slide-2 {
  animation-delay: 5s;
}

.hero-slide-3 {
  animation-delay: 10s;
}

/* Crossfade keyframes: fade in 0-6%, hold 6-27%, fade out 27-33%, hidden 33-100% */
@keyframes heroFade {
  0% {
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* First slide starts visible (no initial flash of empty) */
.hero-slide-1 {
  opacity: 1;
  animation: heroFadeFirst 15s ease-in-out infinite;
}

@keyframes heroFadeFirst {
  0% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  93% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hero-gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-gallery-label .ping {
  position: relative;
  width: 8px;
  height: 8px;
}

.hero-gallery-label .ping-ring {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.85;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hero-gallery-label .ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}

@keyframes reactorPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 25px rgba(0, 242, 255, 0.9));
    transform: scale(1.01);
  }

  100% {
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
    transform: scale(1);
  }
}

#robot-canvas {
  width: 100%;
  height: auto;
  max-width: 380px;
  aspect-ratio: 500 / 460;
  border-radius: var(--radius-xl);
  position: relative;
  z-index: 0;
  opacity: 0.85;
  transform: translate(-10%, 55%);
  transition: opacity 0.3s ease;
  animation: reactorPulse 3s ease-in-out infinite;
}

#robot-canvas:hover {
  opacity: 1;
  animation: reactorPulse 1.5s ease-in-out infinite;
}

.hero-visual-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan-glow), transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.5;
  }
}

.hero-diamond {
  position: absolute;
  border: 2px solid;
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 2;
}

.hero-diamond-1 {
  width: 280px;
  height: 280px;
  border-color: rgba(0, 242, 255, 0.15);
  animation: diamondSpin1 25s linear infinite, diamondPulse 6s ease-in-out infinite;
}

.hero-diamond-2 {
  width: 210px;
  height: 210px;
  border-color: rgba(255, 0, 255, 0.12);
  animation: diamondSpin2 35s linear infinite;
}

@keyframes diamondSpin1 {
  0% {
    transform: rotate(45deg) scale(1);
  }

  50% {
    transform: rotate(225deg) scale(1.08);
  }

  100% {
    transform: rotate(405deg) scale(1);
  }
}

@keyframes diamondSpin2 {
  0% {
    transform: rotate(-12deg);
  }

  100% {
    transform: rotate(-372deg);
  }
}

@keyframes diamondPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.hero-float-node {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-float-node svg {
  width: 22px;
  height: 22px;
}

.hero-float-node-1 {
  top: 5%;
  left: 15%;
  animation: nodeFloat1 4s ease-in-out infinite, nodeFade 5s ease-in-out infinite;
}

.hero-float-node-2 {
  top: 18%;
  right: 5%;
  animation: nodeFloat2 5s ease-in-out infinite, nodeFade 6s ease-in-out infinite 0.5s;
}

.hero-float-node-3 {
  bottom: 22%;
  left: 3%;
  animation: nodeFloat3 4.5s ease-in-out infinite, nodeFade 5.5s ease-in-out infinite 1s;
}

@keyframes nodeFloat1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(8px, -18px);
  }
}

@keyframes nodeFloat2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-12px, -15px);
  }
}

@keyframes nodeFloat3 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(10px, 12px);
  }
}

@keyframes nodeFade {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.7;
  }
}

.hero-center-blur {
  position: absolute;
  width: 140px;
  height: 140px;
  background: var(--neon-cyan);
  filter: blur(60px);
  opacity: 0.08;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

/* ===== HERO PROOF STRIP (above the fold) ===== */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero-proof-label {
  color: var(--text-dim);
  font-weight: 600;
}

.hero-proof-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

@media (max-width: 768px) {
  .hero-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .hero-proof-sep {
    display: none;
  }
}



.hero-gallery:hover {
  border-color: rgba(0, 242, 255, 0.3);
  box-shadow:
    0 0 40px rgba(0, 180, 255, 0.15),
    0 0 80px rgba(0, 100, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 15s ease-in-out infinite;
}

.hero-slide-1 {
  animation-delay: 0s;
}

.hero-slide-2 {
  animation-delay: 5s;
}

.hero-slide-3 {
  animation-delay: 10s;
}

/* Crossfade keyframes: fade in 0-6%, hold 6-27%, fade out 27-33%, hidden 33-100% */
@keyframes heroFade {
  0% {
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* First slide starts visible (no initial flash of empty) */
.hero-slide-1 {
  opacity: 1;
  animation: heroFadeFirst 15s ease-in-out infinite;
}

@keyframes heroFadeFirst {
  0% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  93% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hero-gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-gallery-label .ping {
  position: relative;
  width: 8px;
  height: 8px;
}

.hero-gallery-label .ping-ring {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.85;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hero-gallery-label .ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}

@keyframes reactorPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 25px rgba(0, 242, 255, 0.9));
    transform: scale(1.01);
  }

  100% {
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
    transform: scale(1);
  }
}

#robot-canvas {
  width: 100%;
  height: auto;
  max-width: 380px;
  aspect-ratio: 500 / 460;
  border-radius: var(--radius-xl);
  position: relative;
  z-index: 0;
  /* Pushed behind text so they don't overlap illegibly */
  opacity: 0.85;
  transform: translate(-10%, 55%);
  /* Moved significantly further down */
  transition: opacity 0.3s ease;
  animation: reactorPulse 3s ease-in-out infinite;
}

/* Make it a little more solid when hovered/interacted with */
#robot-canvas:hover {
  opacity: 1;
  animation: reactorPulse 1.5s ease-in-out infinite;
  /* Pulse faster on hover */
}

.hero-visual-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan-glow), transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3
  }

  50% {
    transform: scale(1.15);
    opacity: 0.5
  }
}

/* Floating wireframe diamonds */
.hero-diamond {
  position: absolute;
  border: 2px solid;
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 2;
}

.hero-diamond-1 {
  width: 280px;
  height: 280px;
  border-color: rgba(0, 242, 255, 0.15);
  animation: diamondSpin1 25s linear infinite, diamondPulse 6s ease-in-out infinite;
}

.hero-diamond-2 {
  width: 210px;
  height: 210px;
  border-color: rgba(255, 0, 255, 0.12);
  animation: diamondSpin2 35s linear infinite;
}

.hero-diamond-3 {
  width: 320px;
  height: 320px;
  border-color: rgba(255, 170, 0, 0.06);
  border-radius: 50%;
  animation: diamondSpin3 50s linear infinite;
}

@keyframes diamondSpin1 {
  0% {
    transform: rotate(45deg) scale(1)
  }

  50% {
    transform: rotate(225deg) scale(1.08)
  }

  100% {
    transform: rotate(405deg) scale(1)
  }
}

@keyframes diamondSpin2 {
  0% {
    transform: rotate(-12deg)
  }

  100% {
    transform: rotate(-372deg)
  }
}

@keyframes diamondSpin3 {
  0% {
    transform: rotate(0deg) scale(1)
  }

  50% {
    transform: rotate(180deg) scale(1.05)
  }

  100% {
    transform: rotate(360deg) scale(1)
  }
}

@keyframes diamondPulse {

  0%,
  100% {
    opacity: 0.6
  }

  50% {
    opacity: 1
  }
}

/* Floating icon nodes */
.hero-float-node {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-float-node svg {
  width: 22px;
  height: 22px
}

.hero-float-node-1 {
  top: 5%;
  left: 15%;
  animation: nodeFloat1 4s ease-in-out infinite, nodeFade 5s ease-in-out infinite;
}

.hero-float-node-2 {
  top: 18%;
  right: 5%;
  animation: nodeFloat2 5s ease-in-out infinite, nodeFade 6s ease-in-out infinite 0.5s;
}

.hero-float-node-3 {
  bottom: 22%;
  left: 3%;
  animation: nodeFloat3 4.5s ease-in-out infinite, nodeFade 5.5s ease-in-out infinite 1s;
}

.hero-float-node-4 {
  bottom: 8%;
  right: 12%;
  animation: nodeFloat4 5.5s ease-in-out infinite, nodeFade 4.5s ease-in-out infinite 1.5s;
}

.hero-float-node-5 {
  top: 45%;
  right: -5%;
  animation: nodeFloat5 6s ease-in-out infinite, nodeFade 5s ease-in-out infinite 2s;
}

@keyframes nodeFloat1 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(8px, -18px)
  }
}

@keyframes nodeFloat2 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-12px, -15px)
  }
}

@keyframes nodeFloat3 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(10px, 12px)
  }
}

@keyframes nodeFloat4 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-8px, -20px)
  }
}

@keyframes nodeFloat5 {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-15px, 10px)
  }
}

@keyframes nodeFade {

  0%,
  100% {
    opacity: 0.35
  }

  50% {
    opacity: 0.7
  }
}

/* Blur glow behind center */
.hero-center-blur {
  position: absolute;
  width: 140px;
  height: 140px;
  background: var(--neon-cyan);
  filter: blur(60px);
  opacity: 0.08;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

/* ===== PM TRIPLE CONSTRAINT CANVAS ===== */
.pm-constraint-wrap {
  position: relative;
  margin: 3rem auto 0;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.pm-constraint-wrap canvas {
  display: block;
  flex: 0 0 45%;
  max-width: 45%;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 242, 255, 0.1);
  background: rgba(0, 0, 6, 0.3);
}

.pm-tagline {
  flex: 1;
  text-align: left;
  padding: 0;
}

.pm-tagline-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 242, 255, 0.55);
  margin-bottom: 0.75rem;
  white-space: nowrap;
}

.pm-tagline-main {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  background: linear-gradient(90deg, #ffaa00 0%, #00f2ff 35%, #ff00ff 65%, #ffaa00 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pmGradShift 6s linear infinite;
}

@keyframes pmGradShift {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 250% 50%
  }
}

/* ===== SECTIONS COMMON ===== */
.section {
  position: relative;
  z-index: 2;
  padding: 7rem 0
}

@media (max-width: 768px) {
  .section {
    padding: 4.5rem 0;
    /* Reduced by ~35% on mobile */
  }
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 1rem
}

.section-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 3rem
}

.section-center {
  text-align: center
}

.section-center .section-desc {
  margin-left: auto;
  margin-right: auto
}

/* ===== SOLUTIONS SECTION ===== */
.solutions-grid {
  display: flex;
  flex-direction: column;
  gap: 5rem
}

.solutions-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  position: relative
}

.solutions-text {
  width: 45%;
  position: sticky;
  top: 8rem
}

.solutions-cards {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.solution-card {
  padding: 2.5rem;
  border-radius: 0;
  background: linear-gradient(90deg, var(--glass-bg), transparent);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--neon-cyan);
  box-shadow: 6px 6px 0px rgba(0, 242, 255, 0.1);
  transition: all 0.35s var(--ease-out-expo);
  cursor: default;
}

.solution-card:hover {
  background: linear-gradient(90deg, var(--glass-bg-hover), transparent);
  border-color: var(--neon-cyan);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px rgba(0, 242, 255, 0.2);
  padding-left: 3rem
}

.solution-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--neon-cyan-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.solution-card:hover .solution-card-icon {
  background: var(--neon-cyan-glow);
  box-shadow: 0 0 15px var(--neon-cyan-glow)
}

.solution-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem
}

.solution-card p {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6
}

/* Mock Dashboard */
.mock-dashboard {
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.mock-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
}

.mock-dots {
  display: flex;
  gap: 6px
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.mock-dot.r {
  background: rgba(255, 95, 87, 0.5)
}

.mock-dot.y {
  background: rgba(254, 188, 46, 0.5)
}

.mock-dot.g {
  background: rgba(40, 200, 64, 0.5)
}

.mock-dash-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.05em
}

.mock-dash-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.mock-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04)
}

.mock-bar.w75 {
  width: 75%
}

.mock-bar.w60 {
  width: 60%
}

.mock-bar.w90 {
  width: 90%
}

.mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem
}

.mock-card {
  height: 70px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border)
}

.mock-card.highlight {
  background: var(--neon-cyan-subtle);
  border-color: rgba(0, 242, 255, 0.15)
}

.mock-chart {
  height: 100px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03)
}

/* ===== PIPELINE SECTION ===== */
.pipeline-section {
  background: rgba(255, 255, 255, 0.015);
  padding: 7rem 0
}

.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: center;
  margin-bottom: 4rem;
  position: relative;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
  z-index: 2;
}

.pipeline-step-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.4s var(--ease-out-expo);
}

.pipeline-step:hover .pipeline-step-icon {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 25px var(--neon-cyan-glow);
  transform: translateY(-4px);
}

.pipeline-step-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
  letter-spacing: 0.1em;
}

.pipeline-step h3 {
  font-size: 0.95rem;
  font-weight: 700
}

.pipeline-connector {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--glass-border), var(--neon-cyan-subtle), var(--glass-border));
  z-index: 1;
  transform: translateY(-1rem);
}

.pipeline-connector-pulse {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  animation: pulseLine 4s linear infinite;
  opacity: 0.4;
}

@keyframes pulseLine {
  0% {
    left: -60px
  }

  100% {
    left: 100%
  }
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.principle {
  padding: 2rem;
  position: relative;
  border-left: 2px solid var(--neon-cyan);
  background: var(--neon-cyan-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.principle:nth-child(2) {
  border-left-color: var(--neon-magenta);
  background: var(--neon-magenta-glow)
}

.principle:nth-child(3) {
  border-left-color: var(--neon-amber);
  background: var(--neon-amber-glow)
}

.principle h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem
}

.principle p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6
}

/* ===== ADOPTION SECTION ===== */
.adoption-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.adoption-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.adoption-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start
}

.adoption-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  font-weight: 600;
  transition: all 0.3s ease;
}

.adoption-step:hover .adoption-num {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan-glow)
}

.adoption-step-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em
}

.adoption-step h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.25rem 0 0.4rem
}

.adoption-step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6
}

/* ===== SECURITY SECTION ===== */
.security-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: flex-start;
}

.security-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.security-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.35s var(--ease-out-expo);
}

.security-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px)
}

.security-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--neon-cyan-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  font-size: 1.1rem;
}

.security-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem
}

.security-card p {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6
}

/* ===== FEATURES SECTION ===== */
.features-layout {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: 0;
  margin-top: 2rem
}

.feature-card {
  padding: 3.5rem 2.5rem;
  border-radius: 0;
  background: var(--charcoal);
  border: 1px solid var(--glass-border);
  box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  cursor: default;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}

.feature-card.featured {
  padding: 4.5rem 3.5rem;
}

.feature-card:hover {
  background: rgba(0, 242, 255, 0.02);
  border-color: var(--neon-cyan-glow);
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px rgba(0, 242, 255, 0.1);
}

.feature-body {
  margin-top: 0.5rem;
}

.feature-header {
  margin-bottom: 0;
  flex-shrink: 0
}

.feature-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.feature-card:hover::after {
  opacity: 1
}

.feature-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: linear-gradient(135deg, var(--neon-cyan-subtle), rgba(255, 0, 255, 0.04));
  border: 1px solid rgba(0, 242, 255, 0.1);
}

.feature-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 50px;
}

.feature-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1
}

.feature-card p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  max-width: 480px
}

.feature-visual {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  position: relative;
  z-index: 1;
}

.feature-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--text-secondary)
}

.feature-code .kw {
  color: var(--neon-magenta)
}

.feature-code .fn {
  color: var(--neon-cyan)
}

.feature-code .str {
  color: var(--green)
}

.feature-code .cm {
  color: var(--text-dim)
}

/* ===== MODULES ===== */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.module-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.35s var(--ease-out-expo);
  cursor: default;
}

@media (max-width: 768px) {
  .module-card {
    padding: 1.15rem;
  }
}

.module-card:hover {
  background: rgba(0, 242, 255, 0.02);
  border-color: rgba(0, 242, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 242, 255, 0.08), inset 0 0 20px rgba(0, 242, 255, 0.03);
}

.module-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
  letter-spacing: 0.1em
}

.module-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem
}

.module-card p {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.5
}

.module-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.6rem;
  font-family: var(--font-mono);
}

.module-status.live {
  color: var(--green)
}

.module-status.live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulseGreen 2.5s infinite ease-in-out;
}

/* ===== GALLERY ===== */
.gallery {
  overflow: hidden;
  padding: 2rem 0 0
}

.gallery-track {
  display: flex;
  gap: 1.5rem;
  animation: galleryScroll 45s linear infinite;
  width: max-content
}

.gallery-track:hover {
  animation-play-state: paused
}

@keyframes galleryScroll {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.gallery-item {
  width: 380px;
  height: 260px;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.4s ease;
}

.gallery-item:hover {
  border-color: var(--glass-border-hover);
  transform: scale(1.02)
}

.gallery-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 10, 12, 0.95));
  position: relative;
}

.gallery-item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3
}

.gallery-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  position: relative;
  z-index: 1
}

.gallery-item p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 1
}

/* ===== TERMINAL ===== */
.terminal-section {
  padding: 7rem 0
}

.terminal {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(5, 5, 8, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 12px 12px 0px var(--neon-cyan-subtle);
  transition: all 0.4s var(--ease-out-expo);
}

.terminal:hover {
  box-shadow: 16px 16px 0px rgba(0, 242, 255, 0.15);
  animation: terminalGlitch 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes terminalGlitch {
  0% {
    transform: translate(0, 0) skew(0deg);
  }

  15% {
    transform: translate(-3px, 2px) skew(-1deg);
  }

  30% {
    transform: translate(3px, -2px) skew(1deg);
    opacity: 0.9;
  }

  45% {
    transform: translate(-1px, 1px) skew(0deg);
  }

  60% {
    transform: translate(2px, -1px) skew(0deg);
    opacity: 1;
  }

  75% {
    transform: translate(-2px, 1px) skew(-0.5deg);
  }

  100% {
    transform: translate(-4px, -4px) skew(0deg);
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 240, 255, 0.05);
  border-bottom: 1px solid var(--glass-border);
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%
}

.terminal-dot.r {
  background: #ff5f57
}

.terminal-dot.y {
  background: #febc2e
}

.terminal-dot.g {
  background: #28c840
}

.terminal-title {
  margin-left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim)
}

.terminal-body {
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 2;
  min-height: 300px;
}

.terminal-line {
  opacity: 0;
  animation: typeIn 0.5s var(--ease-out-expo) forwards
}

.terminal-line .prompt {
  color: var(--neon-cyan)
}

.terminal-line .cmd {
  color: var(--text-primary)
}

.terminal-line .output {
  color: var(--text-secondary)
}

.terminal-line .success {
  color: var(--green)
}

.terminal-line .warning {
  color: var(--neon-amber)
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--neon-cyan);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

@keyframes typeIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ===== CONTACT FORM ===== */
.contact-section {
  padding: 7rem 0;
  position: relative;
  overflow: hidden
}

.contact-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: var(--neon-cyan);
  filter: blur(150px);
  opacity: 0.04;
  border-radius: 50%;
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 2
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem
}

.contact-info-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.contact-info-item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.15rem
}

.contact-info-item p {
  font-size: 0.8rem;
  color: var(--text-dim)
}

.contact-form {
  padding: 2.5rem
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem
}

.contact-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  color: white;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: all 0.25s ease;
}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted)
}

.contact-form textarea {
  resize: none;
  min-height: 100px
}

.contact-form .form-group {
  margin-bottom: 1rem
}

.contact-form .btn-submit {
  width: 100%;
  padding: 1rem;
  background: var(--neon-cyan);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form .btn-submit:hover {
  box-shadow: 0 0 30px var(--neon-cyan-dim);
  transform: translateY(-1px)
}

@media (max-width: 768px) {
  .contact-form {
    padding: 1.5rem;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-grid {
    gap: 3rem;
  }
}

.contact-form .form-note {
  text-align: center;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.form-success {
  text-align: center;
  padding: 3rem 0
}

.form-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 255, 157, 0.15);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

.form-success h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem
}

.form-success p {
  color: var(--text-secondary)
}

/* ===== FOOTER ===== */
footer {
  padding: 5rem 0 2rem;
  border-top: 1px solid var(--glass-border);
  position: relative;
  z-index: 2
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem
}

.footer-brand p {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 320px
}

.footer-col h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem
}

.footer-col a {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 0.25rem 0;
  transition: color 0.2s ease
}

.footer-col a:hover {
  color: var(--neon-cyan)
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.footer-badges {
  display: flex;
  gap: 1.5rem
}

/* ===== FLOATING CTA ===== */
.floating-cta {
  position: fixed;
  bottom: 2.5rem;
  right: 3rem;
  max-width: calc(100vw - 4rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.25rem;
  background: rgba(10, 10, 12, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--neon-cyan);
  border-radius: 50px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transform-origin: center right;
  transition: all 0.3s var(--ease-spring);
  box-shadow: 0 0 20px var(--neon-cyan-glow);
  animation: ctaPulse 3s ease-in-out infinite;
}

.floating-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px var(--neon-cyan-dim);
  background: rgba(0, 242, 255, 0.1);
}

.floating-cta .cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

@media (max-width: 900px) {
  .floating-cta {
    display: none !important;
  }
}

@keyframes ctaPulse {

  0%,
  100% {
    box-shadow: 0 0 20px var(--neon-cyan-glow)
  }

  50% {
    box-shadow: 0 0 30px var(--neon-cyan-dim)
  }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s var(--ease-out-expo)
}

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

.reveal-d1 {
  transition-delay: 0.1s
}

.reveal-d2 {
  transition-delay: 0.2s
}

.reveal-d3 {
  transition-delay: 0.3s
}

.reveal-d4 {
  transition-delay: 0.4s
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fade-in-up {
  animation: fadeInUp 0.7s var(--ease-out-expo) both
}

.fade-in-up-d1 {
  animation-delay: 0.1s
}

.fade-in-up-d2 {
  animation-delay: 0.2s
}

.fade-in-up-d3 {
  animation-delay: 0.3s
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto
  }

  .hero-actions {
    justify-content: center
  }

  .hero-badges {
    justify-content: center
  }

  .nav-links {
    gap: 0.25rem
  }

  .nav-links a {
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem
  }

  .suite-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .packages-grid {
    grid-template-columns: 1fr
  }

  .pkg-license {
    transform: none;
  }

  .pkg-license:hover {
    transform: translateY(-4px);
  }

  .hero-visual {
    min-height: 320px;
    overflow: hidden
  }

  .logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan-glow);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-icon svg.check-a {
    width: 16px;
    height: 16px;
    fill: var(--neon-cyan);
  }

  .hero-diamond-1 {
    width: 200px;
    height: 200px
  }

  .hero-diamond-2 {
    width: 150px;
    height: 150px
  }

  .hero-diamond-3 {
    width: 230px;
    height: 230px
  }

  .hero-float-node {
    width: 40px;
    height: 40px
  }

  .hero-float-node svg {
    width: 18px;
    height: 18px
  }

  .hero-float-node-5 {
    display: none
  }

  .solutions-grid {
    grid-template-columns: 1fr
  }

  .pipeline-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 0
  }

  .pipeline-step {
    padding: 1.5rem 0.5rem
  }

  .principles {
    grid-template-columns: 1fr
  }

  .adoption-grid {
    grid-template-columns: 1fr
  }

  .security-grid {
    grid-template-columns: 1fr
  }

  .security-cards {
    grid-template-columns: 1fr 1fr
  }

  .features-layout {
    display: flex;
    flex-direction: column
  }

  .feature-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.5rem
  }

  .feature-card.featured {
    padding: 3rem 1.5rem
  }

  .solutions-wrap {
    flex-direction: column
  }

  .solutions-text,
  .solutions-cards {
    width: 100%;
    position: relative;
    top: 0
  }

  .modules-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact-grid {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:768px) {
  .nav-links {
    display: none
  }

  .mobile-toggle {
    display: block
  }

  .pipeline-steps {
    grid-template-columns: 1fr;
    gap: 0
  }

  .pipeline-connector {
    display: none
  }

  .solutions-cards {
    grid-template-columns: 1fr
  }

  .solution-card:nth-child(even) {
    transform: none;
  }

  .solution-card:nth-child(odd) {
    transform: none;
  }

  .security-cards {
    grid-template-columns: 1fr
  }

  .modules-grid {
    grid-template-columns: 1fr
  }

  .gallery-item {
    width: 300px;
    height: 220px
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center
  }

  .suite-grid {
    grid-template-columns: 1fr
  }

  .packages-grid {
    grid-template-columns: 1fr
  }

  .pkg-license {
    transform: none;
  }

  /* Performance Optimizations for Mobile */
  .hero-visual-glow,
  .hero-diamond,
  .hero-float-node,
  .solution-card,
  .gradient-orb {
    will-change: transform, opacity;
  }

  .gradient-orb {
    animation: none !important;
    /* Stop massive radial gradients from animating on phone */
    opacity: 0.05 !important;
  }

  .hero-visual-glow {
    opacity: 0.15 !important;
    animation: pulseGlow 8s ease-in-out infinite;
    /* Slower pulse */
  }

  .hero-diamond {
    border-width: 1px !important;
    /* Lighter composite load */
  }

  .solution-card {
    box-shadow: 2px 2px 0px rgba(0, 242, 255, 0.05);
    /* Lighter shadow to improve scroll FPS */
  }
}

/* ===== LOGO MARQUEE & METRICS ===== */
.logo-marquee {
  padding: 1.5rem 0;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 3;
}

.marquee-content {
  display: inline-block;
  animation: marquee 40s linear infinite;
}

.logo-marquee:hover .marquee-content {
  animation-play-state: paused;
}

.standard-logo {
  display: inline-block;
  padding: 0 3rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.counter-value {
  font-family: var(--font-mono);
}

/* ===== INTELLIGENCE STACK ===== */
.intel-stack {
  position: relative;
  z-index: 2;
  padding: 8rem 0 5rem;
  border-top: 1px solid rgba(0, 242, 255, 0.05);
}

/* -- Elevated Provocation Block -- */
.intel-provocation {
  max-width: 900px;
  margin: 0 auto 5rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(15, 20, 30, 0.8), rgba(0, 5, 10, 0.95));
  border: 1px solid rgba(0, 242, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.intel-prov-old {
  padding: 3rem 4rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

.intel-prov-new {
  padding: 2.5rem 4rem;
  background: rgba(0, 242, 255, 0.03);
  text-align: center;
  box-shadow: inset 0 20px 30px rgba(0, 242, 255, 0.02);
}

.intel-provocation-title {
  color: var(--text-dim);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
}

.intel-provocation-text {
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 700px;
}

.intel-provocation-contrast {
  margin: 0;
}

.intel-contrast-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 242, 255, 0.6);
  letter-spacing: -0.01em;
}

.intel-contrast-label .ai-pop {
  color: var(--neon-cyan);
  text-shadow: 0 0 15px rgba(0, 242, 255, 0.8);
}

/* -- Architecture Reveal Line -- */
.intel-reveal-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0 2rem;
}

.intel-reveal-line::before,
.intel-reveal-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan-dim), transparent);
}

.intel-reveal-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}

/* -- Engine Columns -- */
.intel-engines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 0;
}

.intel-engine {
  text-align: left;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.2);
}

.intel-engine:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.intel-engine-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.intel-engine-icon {
  font-size: 1.6rem;
  margin-bottom: 0;
}

.intel-engine h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.intel-engine p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.intel-engine-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.intel-engine-status {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
}

.intel-engine-status.live {
  color: var(--neon-cyan);
  border-color: rgba(0, 242, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
}

.intel-engine-status.soon {
  color: var(--text-dim);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Engine accent colors & Hover effects */
.intel-engine--design {
  border-top: 1px solid rgba(0, 242, 255, 0.5);
}

.intel-engine--design .intel-engine-icon-wrap {
  color: var(--neon-cyan);
  border-color: rgba(0, 242, 255, 0.2);
  background: rgba(0, 242, 255, 0.05);
}

.intel-engine--design:hover {
  border-color: rgba(0, 242, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(0, 242, 255, 0.3), 0 15px 40px rgba(0, 242, 255, 0.1);
}

.intel-engine--schedule {
  border-top: 1px solid rgba(255, 170, 0, 0.5);
}

.intel-engine--schedule .intel-engine-icon-wrap {
  color: var(--neon-amber);
  border-color: rgba(255, 170, 0, 0.2);
  background: rgba(255, 170, 0, 0.05);
}

.intel-engine--schedule:hover {
  border-color: rgba(255, 170, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 170, 0, 0.3), 0 15px 40px rgba(255, 170, 0, 0.1);
}

.intel-engine--cost {
  border-top: 1px solid rgba(0, 255, 157, 0.5);
}

.intel-engine--cost .intel-engine-icon-wrap {
  color: var(--green);
  border-color: rgba(0, 255, 157, 0.2);
  background: rgba(0, 255, 157, 0.05);
}

.intel-engine--cost:hover {
  border-color: rgba(0, 255, 157, 0.3);
  box-shadow: inset 0 1px 0 rgba(0, 255, 157, 0.3), 0 15px 40px rgba(0, 255, 157, 0.1);
}

/* -- Connector Lines -- */
.intel-connector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  height: 28px;
}

.intel-connector-line {
  position: relative;
}

.intel-connector-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 242, 255, 0.3), rgba(0, 242, 255, 0.08));
  transform: translateX(-50%);
}

/* -- Intelligence Layers -- */
.intel-layers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intel-layer {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  transition: all 0.3s ease;
}

.intel-layer:hover {
  border-color: rgba(0, 242, 255, 0.12);
  background: rgba(0, 242, 255, 0.025);
}

/* Progressive depth coloring */
.intel-layer--1 {
  background: rgba(0, 242, 255, 0.02);
  border-left: 3px solid rgba(0, 242, 255, 0.15);
}

.intel-layer--2 {
  background: rgba(0, 220, 255, 0.025);
  border-left: 3px solid rgba(0, 220, 255, 0.2);
}

.intel-layer--3 {
  background: rgba(0, 200, 255, 0.03);
  border-left: 3px solid rgba(0, 200, 255, 0.25);
}

.intel-layer--4 {
  background: rgba(0, 180, 255, 0.035);
  border-left: 3px solid rgba(0, 180, 255, 0.3);
}

.intel-layer--5 {
  background: rgba(0, 160, 255, 0.04);
  border-left: 3px solid rgba(0, 160, 255, 0.35);
}

.intel-layer--6 {
  background: rgba(180, 0, 255, 0.03);
  border-left: 3px solid rgba(255, 0, 255, 0.25);
}

.intel-layer--7 {
  background: rgba(0, 255, 157, 0.025);
  border-left: 3px solid rgba(0, 255, 157, 0.25);
}

.intel-layer-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  padding-top: 0.15rem;
}

.intel-layer-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.intel-layer-content p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.intel-layer-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  height: fit-content;
  margin-top: 0.15rem;
}

.intel-layer-depth {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--neon-cyan);
  opacity: 0.6;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* Layer-specific hover glow */
.intel-layer--6:hover {
  border-color: rgba(255, 0, 255, 0.2);
  background: rgba(255, 0, 255, 0.025);
}

.intel-layer--7:hover {
  border-color: rgba(0, 255, 157, 0.2);
  background: rgba(0, 255, 157, 0.025);
}

/* -- Punchline -- */
.intel-punchline {
  margin-top: 2.5rem;
  text-align: center;
}

.intel-punchline-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.intel-punch-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.intel-punch-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--neon-cyan);
  line-height: 1;
  text-shadow:
    0 0 10px rgba(0, 242, 255, 0.5),
    0 0 30px rgba(0, 180, 255, 0.2);
}

.intel-punch-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.intel-punch-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
}

.intel-outcome {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.intel-punchline-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.intel-punchline-text .text-cyan {
  font-weight: 700;
}

/* -- Intelligence Stack Mobile -- */
@media (max-width: 768px) {
  .intel-stack {
    padding: 3rem 0 2rem;
  }

  .intel-provocation {
    padding: 0;
    margin-bottom: 3rem;
  }

  .intel-prov-old,
  .intel-prov-new {
    padding: 2rem 1.5rem;
  }

  .intel-provocation-title {
    font-size: 0.95rem;
  }

  .intel-provocation-text {
    font-size: 1.1rem;
  }

  .intel-contrast-label {
    font-size: 1.4rem;
  }

  .intel-naive-flow {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .intel-engines {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .intel-engine {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 1.5rem;
    gap: 0;
  }

  .intel-engine-icon-wrap {
    margin-bottom: 1rem;
    width: 48px;
    height: 48px;
  }

  .intel-engine-icon {
    font-size: 1.4rem;
  }

  .intel-engine h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .intel-engine h4 br {
    display: none;
  }

  .intel-engine-status {
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.6rem;
  }

  .intel-stat-num {
    font-size: 1.1rem;
  }

  .intel-engine-sub {
    display: block;
    margin-top: 1rem;
  }

  .intel-connector {
    grid-template-columns: 1fr;
    height: 16px;
  }

  .intel-connector-line:nth-child(2),
  .intel-connector-line:nth-child(3) {
    display: none;
  }

  .intel-layer {
    grid-template-columns: 36px 1fr;
    padding: 0.9rem 1rem;
  }

  .intel-layer-tag {
    display: none;
  }

  .intel-layer-content h4 {
    font-size: 0.85rem;
  }

  .intel-layer-content p {
    font-size: 0.75rem;
  }

  .intel-punchline-stats {
    gap: 1rem;
  }

  .intel-punch-num {
    font-size: 1.4rem;
  }

  .intel-punchline-text {
    font-size: 0.95rem;
  }
}

/* ===== AUDIENCE STRIP ===== */
.audience-strip {
  background: rgba(0, 242, 255, 0.04);
  border-top: 1px solid rgba(0, 242, 255, 0.1);
  border-bottom: 1px solid rgba(0, 242, 255, 0.1);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.audience-strip .aud-label {
  color: var(--text-dim)
}

.audience-strip .aud-tag {
  color: var(--text-secondary);
  font-weight: 600
}

.audience-strip .aud-sep {
  color: var(--text-dim);
  opacity: 0.4
}

.audience-strip .aud-not {
  color: var(--text-dim);
  opacity: 0.55;
  font-style: italic
}

/* ===== FINDING CARD (replaces code snippet) ===== */
.finding-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 242, 255, 0.15);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.finding-id {
  color: var(--neon-amber);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em
}

.finding-severity {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.6rem
}

.finding-severity.crit {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.12);
  border: 1px solid rgba(255, 68, 68, 0.3)
}

.finding-severity.high {
  color: var(--neon-amber);
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.25)
}

.finding-row {
  display: flex;
  gap: 0.5rem;
  color: var(--text-dim)
}

.finding-row .fk {
  color: var(--text-secondary);
  min-width: 4.5rem
}

.finding-row .fv {
  color: var(--neon-cyan)
}

.finding-row .fv.std {
  color: var(--neon-amber)
}

.finding-body {
  color: var(--text-secondary);
  margin: 0.5rem 0;
  line-height: 1.6;
  font-size: 0.7rem;
  border-left: 2px solid rgba(0, 242, 255, 0.2);
  padding-left: 0.75rem
}

.finding-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.finding-disp-label {
  color: var(--text-dim);
  font-size: 0.65rem
}

.finding-disp-opt {
  color: var(--text-dim);
  font-size: 0.65rem;
  opacity: 0.5
}

.finding-disp-opt.open-opt {
  color: var(--neon-cyan);
  opacity: 1;
  font-weight: 700
}

/* ===== SUITE SECTION ===== */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.suite-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

.suite-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.suite-card:hover {
  border-color: rgba(0, 242, 255, 0.25);
  transform: translateY(-3px)
}

.suite-card:hover::before {
  opacity: 1
}

.suite-card.live {
  border-color: rgba(0, 242, 255, 0.2)
}

.suite-card.coming {
  border-color: rgba(255, 170, 0, 0.15)
}

.suite-card.roadmap {
  border-color: rgba(255, 255, 255, 0.07)
}

.suite-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.suite-card-icon {
  font-size: 1.75rem;
  line-height: 1
}

.suite-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  text-transform: uppercase;
}

.suite-status.live {
  color: var(--neon-cyan);
  background: rgba(0, 242, 255, 0.1);
  border: 1px solid rgba(0, 242, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.15);
}

.suite-status.soon {
  color: var(--neon-amber);
  background: rgba(255, 170, 0, 0.08);
  border: 1px solid rgba(255, 170, 0, 0.25)
}

.suite-status.roadmap {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1)
}

.suite-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem
}

.suite-card .suite-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em
}

.suite-modules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem
}

.suite-modules li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
}

.suite-modules li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--text-dim)
}

/* ===== PACKAGES SECTION ===== */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: stretch;
}

/* --- Base card --- */
.pkg-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.pkg-card:hover {
  transform: translateY(-4px);
}

/* --- Pilot: inviting, low-friction --- */
.pkg-pilot {
  border-left: 3px dashed rgba(0, 242, 255, 0.4);
}

.pkg-pilot:hover {
  border-color: rgba(0, 242, 255, 0.25);
  border-left-color: rgba(0, 242, 255, 0.6);
}

/* --- Program License: primary offering, elevated --- */
.pkg-license {
  border-color: rgba(0, 242, 255, 0.3);
  background: linear-gradient(165deg, rgba(0, 242, 255, 0.04), rgba(0, 100, 255, 0.02), transparent);
  transform: translateY(-8px);
  box-shadow:
    0 0 20px rgba(0, 200, 255, 0.06),
    0 0 60px rgba(0, 120, 255, 0.03);
  padding: 2.25rem 1.75rem;
}

.pkg-license:hover {
  border-color: rgba(0, 242, 255, 0.5);
  box-shadow:
    0 0 25px rgba(0, 200, 255, 0.1),
    0 0 70px rgba(0, 120, 255, 0.05);
  transform: translateY(-12px);
}

/* --- Independent Assessment: service, not software --- */
.pkg-assessment {
  border-color: rgba(255, 180, 50, 0.15);
  border-left: 3px solid rgba(255, 180, 50, 0.3);
}

.pkg-assessment:hover {
  border-color: rgba(255, 180, 50, 0.3);
  border-left-color: rgba(255, 180, 50, 0.5);
}

/* --- Indicator badge (Full Platform on License card) --- */
.pkg-indicator {
  position: absolute;
  top: -10px;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  background: rgba(10, 10, 12, 0.9);
  border: 1px solid rgba(0, 242, 255, 0.3);
  border-radius: 4px;
  padding: 3px 10px;
  line-height: 1;
}

/* --- Card label (START HERE, SCALE, ADVISORY) --- */
.pkg-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: -0.5rem;
}

.pkg-assessment .pkg-label {
  color: var(--neon-amber);
}

/* --- Card title --- */
.pkg-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

/* --- Card description --- */
.pkg-card>p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
}

/* --- Differentiators list --- */
.pkg-differentiators {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pkg-differentiators li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.pkg-differentiators li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--neon-cyan);
  font-size: 0.7rem;
  opacity: 0.7;
}

.pkg-assessment .pkg-differentiators li::before {
  color: var(--neon-amber);
}

/* --- Pricing language --- */
.pkg-pricing {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
}

/* --- CTA button --- */
.pkg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 242, 255, 0.35);
  color: var(--neon-cyan);
  font-size: 0.82rem;
  font-weight: 600;
  background: transparent;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.pkg-cta:hover {
  background: rgba(0, 242, 255, 0.08);
  border-color: var(--neon-cyan);
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.12);
}

.pkg-assessment .pkg-cta {
  border-color: rgba(255, 180, 50, 0.35);
  color: var(--neon-amber);
}

.pkg-assessment .pkg-cta:hover {
  background: rgba(255, 180, 50, 0.08);
  border-color: var(--neon-amber);
  box-shadow: 0 0 15px rgba(255, 180, 50, 0.12);
}

/* --- Footer note below cards --- */
.pkg-footer-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 2.5rem;
  opacity: 0.7;
}

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

  .packages-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ===== TESTIMONIAL SECTION ===== */
.testimonial-section {
  padding: 7rem 0;
  border-top: 1px solid var(--glass-border)
}

.testimonial-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  position: relative;
}

.testimonial-quote {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 2rem;
  position: relative;
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  top: -1.25rem;
  left: -0.25rem;
  font-size: 5rem;
  color: var(--neon-cyan);
  opacity: 0.15;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center
}

.testimonial-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem
}

.testimonial-role {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-top: 0.2rem
}

/* ===== COMPARISON TABLE ===== */
.comparison-section {
  padding: 7rem 0;
  background: rgba(255, 255, 255, 0.01)
}

/* --- Comparison Card Grid --- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.compare-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.compare-card:hover {
  border-color: rgba(0, 242, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.compare-card--wide {
  grid-column: 1 / -1;
}

.compare-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.compare-old {
  font-size: 0.85rem;
  color: rgba(255, 100, 100, 0.6);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 100, 100, 0.15);
}

.compare-old::before {
  content: 'Traditional';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 100, 100, 0.35);
  margin-bottom: 0.15rem;
}

.compare-new {
  font-size: 0.9rem;
  color: var(--neon-cyan);
  line-height: 1.5;
  font-weight: 500;
  padding-left: 1rem;
  border-left: 2px solid rgba(0, 242, 255, 0.3);
}

.compare-new::before {
  content: 'AscertAIn';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 242, 255, 0.35);
  margin-bottom: 0.15rem;
}

@media (max-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compare-card--wide {
    grid-column: auto;
  }
}

/* ===== FAQ ===== */
.faq-section {
  padding: 7rem 0
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 3rem
}

.faq-item {
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color 0.3s, transform 0.3s;
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px)
}

.faq-q {
  width: 100%;
  text-align: left;
  padding: 1.5rem;
  background: transparent;
  border: none;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.faq-q:hover {
  background: rgba(255, 255, 255, 0.02);
}

.faq-icon {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--neon-cyan);
  transition: transform 0.4s var(--ease-out-expo);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo);
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.75;
  padding: 0 1.5rem;
}

.faq-item.active .faq-a {
  padding: 0 1.5rem 1.5rem;
  max-height: 400px;
}

@media(max-width:768px) {
  .faq-grid {
    grid-template-columns: 1fr
  }
}

/* ===== WAITLIST LINKS ON SUITE CARDS ===== */
.suite-waitlist {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--neon-amber);
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}

.suite-waitlist:hover {
  opacity: 1;
  color: #ffd055
}

/* ===== DEMO BOOKING LINK ===== */
.demo-booking-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 242, 255, 0.4);
  color: var(--neon-cyan);
  font-size: 0.85rem;
  font-weight: 700;
  background: transparent;
  transition: all 0.3s ease;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.demo-booking-link:hover {
  background: rgba(0, 242, 255, 0.08);
  transform: translateY(-2px);
  border-color: var(--neon-cyan)
}

/* ===== LEAD MAGNET MICRO CTA ===== */
.lead-magnet-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s;
  font-family: var(--font-mono);
}

.lead-magnet-cta:hover {
  color: var(--neon-cyan)
}

.lead-magnet-cta svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  flex-shrink: 0
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  bottom: 6.5rem;
  right: 2rem;
  z-index: 89;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto
}

.back-to-top:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  transform: translateY(-2px)
}

/* ===== NAV SCROLL SPY ===== */
.nav-links a.active {
  color: white !important
}

.nav-links a.active:not(.nav-cta)::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--neon-cyan);
  border-radius: 2px;
}

.nav-links a:not(.nav-cta) {
  position: relative
}

/* ===== PREFERS REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .scanline,
  .gallery-track,
  .hero-diamond,
  .hero-float-node,
  .gradient-orb {
    animation: none !important
  }

  .gallery-track {
    animation: none !important;
    overflow-x: auto;
    flex-wrap: wrap
  }

  .hero-visual-glow {
    animation: none !important;
    opacity: 0.3
  }

  #bg-canvas,
  #robot-canvas {
    display: none
  }

  .ai-pop {
    animation: none !important
  }

  .logo-icon {
    animation: none !important
  }

  .floating-cta {
    animation: none !important
  }

  .terminal-cursor {
    animation: none !important;
    opacity: 1
  }

  #scroll-progress {
    transition: none !important
  }
}

/* ===== PACKAGES AVAILABILITY NOTE ===== */
.packages-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--neon-amber);
  letter-spacing: 0.05em;
  margin-bottom: 2.5rem;
  margin-top: -1rem;
  opacity: 0.8;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.section,
footer,
.pipeline-section,
.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

.hero-float-node,
.marquee-content,
.hero-diamond,
.gradient-orb,
.scanline {
  will-change: transform;
}

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

@media (forced-colors: active) {
  .btn {
    border: 2px solid CanvasText;
  }

  .nav-links a.active,
  .nav-cta,
  .suite-status {
    border: 1px solid CanvasText;
  }
}



/* ===== JARGON TOOLTIPS ===== */
.jargon {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--neon-cyan);
  text-underline-offset: 4px;
  cursor: help;
  position: relative;
}

.jargon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--charcoal);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--neon-cyan);
  border-radius: 2px;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s var(--ease-out-expo);
  pointer-events: none;
  z-index: 100;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
}

.jargon:hover::after,
.jargon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ===== NOTIFY MODAL ===== */
.notify-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notify-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.notify-modal {
  position: relative;
  width: 90%;
  max-width: 420px;
  background: rgba(12, 14, 18, 0.95);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border-hover);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s var(--ease-spring);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(0, 200, 255, 0.06);
}

.notify-modal-backdrop.active .notify-modal {
  transform: translateY(0) scale(1);
}

.notify-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.notify-close:hover {
  color: var(--text-primary);
}

.notify-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.notify-body h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.notify-bundle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--neon-cyan);
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}

#notifyForm {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#notifyEmail {
  flex: 1;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#notifyEmail:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.15);
}

#notifyEmail::placeholder {
  color: var(--text-dim);
}

.notify-submit {
  padding: 0.7rem 1.2rem;
  background: var(--neon-cyan);
  color: var(--charcoal);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.25);
}

.notify-submit:hover {
  box-shadow: 0 0 20px rgba(0, 220, 255, 0.45);
  transform: translateY(-1px);
}

.notify-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
}

/* Notify Success */
.notify-success {
  display: none;
}

.notify-success.active {
  display: block;
}

.notify-success-icon {
  width: 52px;
  height: 52px;
  background: rgba(0, 255, 157, 0.1);
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 1.5rem;
  color: var(--green);
  box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
  animation: notifySuccessPop 0.4s var(--ease-spring);
}

.notify-success h3 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.notify-success p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@keyframes notifySuccessPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .notify-modal {
    padding: 2rem 1.25rem 1.5rem;
  }

  #notifyForm {
    flex-direction: column;
  }

  .notify-submit {
    width: 100%;
    padding: 0.75rem;
  }
}

/* ===== PHONE LAYOUT POLISH ===== */
@media(max-width:768px) {

  /* Logo — smaller on mobile nav */
  .logo-text {
    font-size: 1.25rem;
  }

  /* Hero tightening */
  .hero {
    padding: 12rem 0 1.5rem;
  }

  .hero-container-inner {
    gap: 0.5rem;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.3rem);
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }

  .hero-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }

  /* Force hide secondary desc despite fade-in-up classes */
  .hero-desc-secondary {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-badges {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0;
  }

  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }

  /* Black hole section -- shorter on mobile */
  .standards-blackhole {
    height: 250px !important;
    padding-top: 20px !important;
  }

  .standards-blackhole div[style*="font-size: 1.4rem"] {
    font-size: 1rem !important;
  }

  /* Section spacing */
  .section {
    padding: 3.5rem 0;
  }

  .section-title {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }

  .section-desc {
    font-size: 0.88rem;
  }

  /* PM canvas container -- stack on mobile */
  .pm-constraint-wrap {
    flex-direction: column;
    gap: 1.5rem;
    min-height: auto;
  }

  .pm-constraint-wrap canvas {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .pm-tagline {
    text-align: center;
  }

  .pm-tagline-main {
    font-size: 1.4rem !important;
  }

  .pm-tagline-eyebrow {
    font-size: 1rem !important;
  }

  /* Suite cards -- tighter */
  .suite-card {
    padding: 1.2rem;
  }

  .suite-card h3 {
    font-size: 1.1rem;
  }

  /* Hide Iron Triangle / PM canvas on mobile — graphic doesn't render well at narrow widths */
  .pm-constraint-wrap {
    display: none !important;
  }

  .pm-constraint-wrap.reveal {
    display: none !important;
  }

  section:has(.pm-constraint-wrap) {
    padding: 0;
    margin: 0;
    min-height: 0;
    border: none;
  }

  /* Package cards -- horizontal swipe carousel on mobile */
  .packages-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }

  .packages-grid::-webkit-scrollbar {
    display: none;
  }

  .pkg-card {
    flex: 0 0 85vw;
    scroll-snap-align: center;
    padding: 1.5rem;
    overflow: visible;
  }

  .pkg-license {
    transform: none;
  }

  .pkg-license:hover {
    transform: none;
  }

  .pkg-card:hover {
    transform: none;
  }

  .pkg-card h3 {
    font-size: 1.15rem;
  }

  /* Comparison table scroll */
  .comparison-section .container {
    overflow-x: auto;
  }

  /* Domino cascade — reduce indents on phone to prevent overflow */
  .domino-step--2 {
    margin-left: 2%;
  }

  .domino-step--3 {
    margin-left: 4%;
  }

  .domino-step--4 {
    margin-left: 6%;
    min-width: auto;
  }

  /* Hero gallery — prevent horizontal overflow */
  .hero-gallery-wrap {
    width: 100% !important;
    transform: none !important;
    order: 2 !important;
    /* Push gallery BELOW badges on mobile */
  }


  /* Robot canvas — center on mobile instead of off-screen push */
  #robot-canvas {
    transform: none;
    max-width: 280px;
    margin: 0 auto;
  }



  /* Floating CTA -- smaller on phone */
  .floating-cta {
    right: 1rem;
    bottom: 1.5rem;
    font-size: 0.72rem;
    padding: 0.6rem 1rem;
  }

  /* Contact section */
  .contact-section {
    padding: 4rem 0;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer */
  footer {
    padding: 3rem 0 1.5rem;
  }

  /* Lead magnet CTA */
  .lead-magnet-cta {
    font-size: 0.8rem;
  }

  /* Audience strip wrap */
  .audience-strip {
    font-size: 0.6rem;
    padding: 0.6rem 1rem;
  }
}

@media(max-width:420px) {
  .hero h1 {
    font-size: 1.5rem;
  }

  .container {
    padding: 0 1rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .pm-tagline-main {
    font-size: 1.4rem !important;
  }

  .gallery-item {
    width: 260px;
    height: 190px;
  }

  .floating-cta {
    font-size: 0.65rem;
    padding: 0.5rem 0.8rem;
  }

  /* Domino cascade — fully flatten on tiny screens */
  .domino-step--2,
  .domino-step--3,
  .domino-step--4 {
    margin-left: 0;
  }

  .domino-step {
    width: 100%;
  }
}

/* ===== PRINT STYLESHEET ===== */
@media print {

  /* Light background, dark text */
  body {
    background: #fff !important;
    color: #1a1a1a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body::before {
    display: none !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }

  .text-cyan,
  .hero h1 .text-cyan {
    color: #0077aa !important;
    -webkit-text-fill-color: #0077aa !important;
  }

  .text-magenta {
    color: #990066 !important;
  }

  .text-amber {
    color: #cc7700 !important;
  }

  /* Force all content visible */
  .reveal,
  .fade-in-up,
  .fade-in-up-d1,
  .fade-in-up-d2,
  .fade-in-up-d3 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Hide decorative / interactive elements */
  #bg-canvas,
  #blackhole-canvas,
  #robot-canvas,
  #pm-canvas,
  .gradient-orb,
  .grid-overlay,
  .scanline,
  .hero-visual-glow,
  .hero-diamond,
  .hero-center-blur,
  .hero-float-node,
  .pipeline-connector-pulse,
  #scroll-progress,
  .floating-cta,
  .back-to-top,
  .mobile-toggle,
  .mobile-menu {
    display: none !important;
  }

  /* Hide standards blackhole canvas but keep the text */
  .standards-blackhole canvas {
    display: none !important;
  }

  .standards-blackhole {
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
  }

  /* Constrain SVGs */
  .hero-badges svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Cards and sections */
  .suite-card,
  .solution-card,
  .security-card,
  .pkg-card,
  .module-card,
  .adoption-step,
  .faq-item,
  .pipeline-step {
    background: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    break-inside: avoid;
  }

  /* Navigation */
  nav {
    position: relative !important;
    background: #fff !important;
    border-bottom: 2px solid #0077aa !important;
  }

  .nav-links a,
  .nav-cta {
    color: #333 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Links */
  a {
    color: #0077aa !important;
    text-decoration: underline !important;
  }

  /* Page breaks */
  section {
    break-before: auto;
  }

  .hero {
    min-height: auto !important;
    padding: 2rem 0 !important;
  }

  /* Remove text-shadow on all elements */
  * {
    text-shadow: none !important;
  }

  /* Gallery items */
  .gallery {
    overflow: visible !important;
  }

  .gallery-track {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    animation: none !important;
  }

  .gallery-item {
    width: 200px !important;
    height: auto !important;
    min-height: 150px;
    break-inside: avoid;
  }



  /* Section descriptions */
  .section-desc,
  .hero-desc,
  p {
    color: #444 !important;
  }

  .section-label {
    color: #0077aa !important;
  }
}

/* ===== VISUAL MOAT: PHASE 2-3 TREATMENTS ===== */

/* Light Seam Section Dividers — glowing cyan line between sections */
.light-seam {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(0, 242, 255, 0.15) 20%,
    rgba(0, 242, 255, 0.4) 50%,
    rgba(0, 242, 255, 0.15) 80%,
    transparent 95%
  );
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.1), 0 0 20px rgba(0, 242, 255, 0.05);
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-width: 1200px;
}

/* Blueprint Coordinate Annotations — engineering authenticity */
[data-blueprint]::before {
  content: attr(data-blueprint);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  opacity: 0.05;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}

/* Card Gradient Border Animation (hover-only activation) */
@keyframes borderGlow {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.card-glow-border {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-glow-border:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) padding-box,
    conic-gradient(
      from var(--border-angle),
      rgba(0, 50, 80, 0.6),
      rgba(0, 242, 255, 0.8),
      rgba(200, 240, 255, 0.9),
      rgba(0, 242, 255, 0.8),
      rgba(0, 50, 80, 0.6)
    ) border-box;
  border: 1px solid transparent;
  animation: borderGlow 3s linear infinite;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.08);
}

/* 3D Card Tilt (CSS custom properties driven by JS) */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

.card-tilt:hover {
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 242, 255, 0.05);
}

/* Spring-Physics Scroll Reveal — overshoot settle on cards */
@keyframes springReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.005);
  }
  80% {
    transform: translateY(2px) scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reveal-spring {
  opacity: 0;
}

.reveal-spring.visible {
  animation: springReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Disable tilt on touch/mobile devices */
@media (pointer: coarse) {
  .card-tilt:hover {
    transform: none;
  }
  .card-glow-border:hover {
    animation: none;
  }
}