/* ============================================================
   LYNX IQ — Landing Page Styles
   Design Concept: cinematic walk-in intro → conventional 2D scroll page
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --navy:        #0B1E3D;
  --navy-mid:    #162A4A;
  --navy-light:  #1E3A5F;
  --royal:       #1A4A8A;
  --teal-dark:   #0A7A7A;
  --teal:        #0FA8A8;
  --teal-light:  #5DD6D6;
  --white:       #FFFFFF;
  --gray-lt:     #C8D6E5;
  --gray-md:     #7A92B4;
  --orange:      #E8703A;
  --orange-lt:   #F4A26A;

  --font:        'Inter', system-ui, sans-serif;
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ───────────────────────────────────────────────── */
.landing-page *, .landing-page *::before, .landing-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.landing-page {
  font-family: var(--font);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
.landing-page a { text-decoration: none; color: inherit; }
.landing-page img { display: block; max-width: 100%; }

/* ── HERO ────────────────────────────────────────────────── */
.s-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ambient depth backdrop — sits behind the intro sprite and content */
#hero-depth-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Auto-hiding site header ─────────────────────────────────
   Fixed, translucent bar that stays off-screen while the hero is
   in view, then becomes eligible to show once the user scrolls
   past it — hiding again on further scroll-down, reappearing on
   scroll-up. Keeps Sign In / Schedule a Call reachable at all times. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-smooth);
  background: rgba(11, 30, 61, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header.is-shown { transform: translateY(0); }

.site-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.85rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.site-header-brand img { display: block; border-radius: 6px; }

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-header-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.site-header-btn-ghost {
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.25);
  background: transparent;
}
.site-header-btn-ghost:hover {
  border-color: var(--teal-light);
  background: rgba(255,255,255,0.06);
}
.site-header-btn-solid {
  background: var(--orange);
  color: var(--white);
  border: 1.5px solid transparent;
}
.site-header-btn-solid:hover {
  background: var(--orange-lt);
  box-shadow: 0 0 24px rgba(232,112,58,0.4);
}

@media (max-width: 560px) {
  .site-header-inner { padding: 0.65rem 1.1rem; }
  .site-header-brand span { display: none; }
  .site-header-btn { padding: 0.5rem 0.85rem; font-size: 0.78rem; }
}

/* NOTE ON A FIXED COMPOSITOR BUG (kept for history — no CTA buttons live
   in the hero anymore, but the same trap applies to any future element
   added here): animating opacity on a flex container that is a direct
   child of .hero-content, sibling to mask-image'd layers, inside a GSAP
   ScrollTrigger pinned section, can make its children permanently
   unpaintable even after reaching opacity:1. Animate such children
   individually instead of via their wrapper. */

/* Scroll-scrubbed intro sequence — absolutely contained within the hero
   section only. It can never leak into other sections because it has no
   fixed positioning and no viewport-spanning geometry. */
.hero-intro-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 42%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 68% at 50% 42%, #000 50%, transparent 100%);
}

#hero-intro-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Static poster fallback for mobile / reduced-motion — same containment
   and edge-blend as the canvas sequence, shown instead of it. */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 42%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 68% at 50% 42%, #000 50%, transparent 100%);
}
.hero-poster.is-visible { opacity: 1; }

/* Hero content */
.hero-content {
  position: relative;
  z-index: 20;
  text-align: center;
  max-width: 820px;
  padding: 2rem 1.5rem;
}

.hero-logo-static {
  opacity: 0;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.hero-logo-static img {
  width: 88px;
  height: auto;
  margin: 0 auto;
  mix-blend-mode: screen;
}
.hero-wordmark {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--white);
  text-transform: uppercase;
}

.hero-eyebrow {
  opacity: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
}

.hero-headline {
  opacity: 0;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.hero-headline .word { display: inline-block; }
.hero-headline .accent { color: var(--teal-light); }

.hero-subline {
  opacity: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--gray-lt);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
}

/* Hero scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-md);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-chevron {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
}

/* ── Section: TRUST / CREDIBILITY STRIP ──────────────────── */
.s-trust {
  position: relative;
  background: var(--navy-mid);
  padding: 3rem 2rem;
  border-top: 1px solid rgba(15, 168, 168, 0.12);
  border-bottom: 1px solid rgba(15, 168, 168, 0.12);
}
.trust-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.trust-stats {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--teal-light);
  letter-spacing: -0.02em;
  line-height: 1;
}
.trust-stat-label {
  font-size: 0.75rem;
  color: var(--gray-md);
  margin-top: 0.5rem;
  text-align: center;
  max-width: 140px;
  line-height: 1.4;
}
.trust-badges-line {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-md);
  letter-spacing: 0.03em;
}

/* ── Section 2: SPLIT REVEAL ─────────────────────────────── */
.s-split {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.split-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 3rem;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.split-chaos {
  background: #14171C;
}

.split-lynx {
  background: var(--navy-mid);
}

.split-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: var(--teal);
  z-index: 10;
  transform-origin: top;
  box-shadow: 0 0 16px var(--teal);
}

.split-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-md);
  margin-bottom: 1.5rem;
}
.split-chaos .split-label { color: #8A93A3; }

/* Chaos side elements */
.chaos-grid {
  display: grid;
  gap: 0.6rem;
}
.chaos-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 0.8rem;
  color: #A6ADB9;
  animation: shake 2.5s ease-in-out infinite;
}
.chaos-file:nth-child(2n) { animation-delay: 0.4s; }
.chaos-file:nth-child(3n) { animation-delay: 0.8s; }
.chaos-file .file-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #7A8699;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chaos-file .file-status { margin-left: auto; color: #d9704f; font-size: 0.85rem; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-0.2deg); }
  40% { transform: translateX(2px) rotate(0.2deg); }
  60% { transform: translateX(-1px); }
}

/* Lynx side elements */
.lynx-grid {
  display: grid;
  gap: 0.6rem;
}
.lynx-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: rgba(15,168,168,0.08);
  border: 1px solid rgba(15,168,168,0.2);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--gray-lt);
}
.lynx-file .file-icon { color: var(--teal); font-size: 1rem; }
.lynx-file .file-badge {
  margin-left: auto;
  background: rgba(16,185,129,0.15);
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  border: 1px solid rgba(52,211,153,0.25);
}
.compliance-score {
  margin-top: 1.5rem;
  background: rgba(15,168,168,0.1);
  border: 1px solid rgba(15,168,168,0.25);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.score-label { font-size: 0.72rem; color: var(--gray-md); letter-spacing: 0.05em; }
.score-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin: 0.4rem 0; }
.score-bar { height: 100%; width: 94%; background: linear-gradient(90deg, var(--teal-dark), var(--teal-light)); border-radius: 3px; }
.score-val { font-size: 1.3rem; font-weight: 800; color: var(--teal-light); }

.split-headline {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
}
.split-headline h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(11,30,61,0.8);
}
.split-headline h2 em { font-style: normal; color: var(--teal-light); }

/* ── Section 3: 57 FRAMEWORK ─────────────────────────────── */
.s-framework {
  padding: 7rem 2rem;
  background: var(--navy);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.s-framework::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,168,168,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.framework-number {
  font-size: clamp(7rem, 18vw, 14rem);
  font-weight: 900;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.framework-subtitle {
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  color: var(--gray-lt);
  max-width: 600px;
  margin: 1.5rem auto 3.5rem;
  line-height: 1.65;
}
.framework-subtitle strong { color: var(--white); }

/* Category chips — the real audit-framework categories, not a fabricated
   per-category count. Reads as "comprehensive and organized" without
   claiming a breakdown the underlying data can't back up. */
.framework-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  max-width: 880px;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}
.framework-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  background: rgba(15,168,168,0.05);
  border: 1px solid rgba(15,168,168,0.16);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-md);
  opacity: 1;
  transform: translateY(0);
  transition: background 0.35s, border-color 0.35s, color 0.35s, opacity 0.4s, transform 0.4s;
}
.framework-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(15,168,168,0.35);
  transition: background 0.35s, box-shadow 0.35s;
}
.framework-chip.lit {
  opacity: 1;
  transform: translateY(0);
  background: rgba(15,168,168,0.1);
  border-color: rgba(15,168,168,0.32);
  color: var(--gray-lt);
}
.framework-chip.lit::before {
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
}

.framework-tag {
  display: inline-block;
  background: rgba(15,168,168,0.1);
  border: 1px solid rgba(15,168,168,0.25);
  color: var(--teal-light);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

/* ── Section 4: BENEFITS ─────────────────────────────────── */
.s-benefits {
  position: relative;
  background: var(--navy-mid);
  padding: 6rem 0;
}
.benefits-inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Right column gets the same top offset as the scorecard's own padding,
   so "WHY LYNX IQ" lines up with "LIVE AUDIT SCORECARD" instead of
   sitting flush against the grid top while the card floats lower. */
.benefits-copy {
  padding-top: 2rem;
}

.scorecard {
  position: sticky;
  top: 6rem;
  background: rgba(11,30,61,0.8);
  border: 1px solid rgba(15,168,168,0.2);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(8px);
}
.scorecard-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scorecard-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--teal);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.scorecard-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  margin: 0 -0.5rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.scorecard-row:last-child { border-bottom: none; }
.scorecard-row:hover { background: rgba(15,168,168,0.08); }
.scorecard-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.scorecard-row.is-current {
  background: rgba(15,168,168,0.12);
  box-shadow: inset 3px 0 0 var(--teal);
}

.sc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(15,168,168,0.3);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.3s;
}
.sc-dot.is-done {
  background: var(--teal);
  border-color: var(--teal);
}
.sc-dot.is-current {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  transform: scale(1.3);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.sc-label {
  font-size: 0.85rem;
  color: var(--gray-lt);
  transition: color 0.3s;
}
.scorecard-row.is-done .sc-label { color: rgba(255,255,255,0.75); }
.scorecard-row.is-current .sc-label { color: var(--white); font-weight: 600; }

/* Benefit cards — normal vertical stack, each fades/slides in once as it
   enters the viewport. No absolute positioning, no cross-fade swapping. */
.benefits-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.benefit-card {
  opacity: 0;
  transform: translateY(30px);
}
.benefit-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.benefit-icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
}
.benefit-icon-wrap svg {
  width: 64px;
  height: 64px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-card h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.benefit-card p {
  font-size: 1.05rem;
  color: var(--gray-lt);
  line-height: 1.7;
  max-width: 480px;
}

.benefit-number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

/* ── Section 5: IN ACTION (vertical panels) ──────────────── */
.s-inaction {
  position: relative;
  background: var(--navy);
}
.inaction-header {
  text-align: center;
  padding: 6rem 2rem 1rem;
  position: relative;
  z-index: 2;
}
.inaction-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.inaction-header p { color: var(--gray-lt); font-size: 1.05rem; }

.inaction-panels {
  display: flex;
  flex-direction: column;
}
.inaction-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem;
  opacity: 0;
  transform: translateY(40px);
}
.inaction-panel.in-view {
  opacity: 1;
  transform: translateY(0);
}
.inaction-panel:nth-child(2) { background: var(--navy-mid); }
.inaction-panel:nth-child(3) { background: var(--navy); }

.panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.5rem;
}
.panel-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  max-width: 600px;
}
.panel-body {
  font-size: 1rem;
  color: var(--gray-lt);
  text-align: center;
  max-width: 520px;
  line-height: 1.65;
  margin-bottom: 2.5rem;
}

/* KPI dials */
.kpi-grid {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.kpi-item {
  text-align: center;
}
.kpi-canvas { display: block; margin: 0 auto 0.5rem; }
.kpi-label { font-size: 0.78rem; color: var(--gray-md); letter-spacing: 0.05em; }
.kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--teal-light);
  display: block;
  margin: 0.25rem 0 0;
}

/* Client cards panel */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 680px;
  width: 100%;
}
.client-card {
  background: rgba(15,168,168,0.07);
  border: 1px solid rgba(15,168,168,0.15);
  border-radius: 10px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.client-card.visible { opacity: 1; transform: translateY(0); }
.client-ring-canvas { display: block; }
.client-name { font-size: 0.7rem; color: var(--gray-md); text-align: center; }
.client-score { font-size: 1rem; font-weight: 700; color: var(--teal-light); }

/* Gauge panel */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#gauge-canvas { display: block; }
.gauge-score-label {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--teal-light);
  margin-top: 1rem;
}
.gauge-desc { font-size: 0.85rem; color: var(--gray-md); margin-top: 0.25rem; }

/* ── Section 6: CAPABILITIES ──────────────────────────────── */
.s-capabilities {
  padding: 7rem 2rem;
  background: var(--navy-mid);
}
.cap-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.cap-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.cap-header p { color: var(--gray-lt); font-size: 1rem; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .cap-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

.cap-card {
  background: rgba(11,30,61,0.6);
  border: 1px solid rgba(15,168,168,0.15);
  border-radius: 16px;
  padding: 2rem;
  cursor: default;
  transition: border-color 0.3s, box-shadow 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.cap-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(15,168,168,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.cap-card:hover::before { opacity: 1; }
.cap-card:hover {
  border-color: rgba(15,168,168,0.35);
  box-shadow: 0 8px 40px rgba(15,168,168,0.1);
}

.cap-mini-canvas {
  display: block;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  background: rgba(15,168,168,0.04);
}
.cap-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.cap-card p {
  font-size: 0.88rem;
  color: var(--gray-lt);
  line-height: 1.6;
}
.cap-card p.cap-hook {
  margin-bottom: 1rem;
}
.cap-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cap-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--gray-md);
  line-height: 1.5;
}
.cap-bullets li::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05em;
}

/* ── Section: AGENTIC AI SPOTLIGHT ────────────────────────── */
.s-ai {
  position: relative;
  padding: 7rem 2rem;
  background: var(--navy);
  overflow: hidden;
}
.s-ai::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 85% 30%, rgba(15,168,168,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.ai-inner {
  position: relative;
  z-index: 1;
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}
.ai-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.5rem 0 1.25rem;
}
.ai-lede {
  font-size: 1rem;
  color: var(--gray-lt);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 520px;
}
.ai-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ai-points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ai-point-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(15,168,168,0.12);
  border: 1px solid rgba(15,168,168,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-point-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--teal-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai-points strong {
  display: block;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.ai-points span {
  display: block;
  color: var(--gray-md);
  font-size: 0.85rem;
  line-height: 1.55;
}

.ai-visual { display: flex; justify-content: center; }
.ai-panel {
  width: 100%;
  max-width: 380px;
  background: rgba(11,30,61,0.85);
  border: 1px solid rgba(15,168,168,0.25);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.ai-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal-light);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.ai-msg {
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  max-width: 92%;
}
.ai-msg-user {
  background: rgba(255,255,255,0.06);
  color: var(--gray-lt);
  margin-left: auto;
  border-bottom-right-radius: 3px;
}
.ai-msg-bot {
  background: rgba(15,168,168,0.1);
  border: 1px solid rgba(15,168,168,0.2);
  color: var(--white);
  border-bottom-left-radius: 3px;
}
.ai-typing-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.ai-msg-status {
  font-size: 0.72rem;
  color: var(--gray-md);
  font-style: italic;
  opacity: 0;
  transition: opacity 0.4s;
}
.ai-msg-status.visible { opacity: 1; }

/* ── Section 7: CTA ─────────────────────────────────────── */
.s-cta {
  position: relative;
  padding: 8rem 2rem;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 40%, #061226 100%);
}
#cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.cta-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.5rem;
}
.cta-inner h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.cta-inner h2 .glow-text {
  color: var(--teal-light);
  text-shadow: 0 0 40px rgba(93,214,214,0.4);
}
.cta-inner p {
  font-size: 1.05rem;
  color: var(--gray-lt);
  max-width: 500px;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.5rem;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn-cta:hover {
  background: var(--orange-lt);
  box-shadow: 0 0 40px rgba(232,112,58,0.5), 0 4px 20px rgba(232,112,58,0.3);
  transform: translateY(-3px);
  color: var(--white);
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
  text-decoration: none;
}
.btn-cta-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--teal-light);
  color: var(--white);
  transform: translateY(-3px);
}

@media (max-width: 480px) {
  .cta-buttons { flex-direction: column; width: 100%; }
  .btn-cta, .btn-cta-secondary { width: 100%; justify-content: center; }
}

/* Footer bar */
.landing-footer {
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 4rem 2rem 2rem;
  font-size: 0.78rem;
  color: var(--gray-md);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-brand-mark img { width: 26px; height: 26px; mix-blend-mode: screen; }
.footer-brand-mark span {
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.02em;
}
.footer-brand p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gray-md);
  max-width: 280px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-lt);
  margin-bottom: 0.35rem;
}
.footer-col a {
  font-size: 0.85rem;
  color: var(--gray-md);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.78rem;
}

/* ── Shared section helpers ───────────────────────────────── */
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.75rem;
  display: block;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .s-split { flex-direction: column; }
  .split-side { min-height: 50vh; padding: 3rem 1.5rem; }
  .split-divider { display: none; }
  .split-headline { position: relative; bottom: auto; left: auto; transform: none; padding: 2rem 1.5rem; opacity: 1; }

  .benefits-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.5rem; }
  /* Scorecard stays visible on mobile, just stacked above the cards
     instead of sticking beside them — no more empty left column. */
  .scorecard { position: static; }
  .benefits-copy { padding-top: 0; }
  .benefits-cards { gap: 2.5rem; }

  .inaction-panel { padding: 3.5rem 1.5rem; }

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

  .cap-grid { grid-template-columns: 1fr; }

  /* Capability cards: always visible on mobile (JS reveal skipped) */
  .cap-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .trust-stats { gap: 1.75rem 2.5rem; }
  .trust-badges-line { font-size: 0.72rem; line-height: 1.6; }

  .ai-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ai-lede { max-width: none; }
  .ai-panel { max-width: 100%; }

  .footer-inner { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
  .footer-brand p { max-width: none; }

  /* Hero intro sequence is skipped on mobile — poster + content show immediately */
  .hero-intro-stage { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chaos-file { animation: none; }
  .scorecard-title::before { animation: none; }
  .sc-dot.is-current { animation: none; }
  .hero-intro-stage { display: none; }
  .hero-logo-static,
  .hero-eyebrow,
  .hero-headline,
  .hero-subline {
    opacity: 1 !important;
    transform: none !important;
  }
  .split-headline { opacity: 1 !important; }
  .benefit-card { opacity: 1 !important; transform: none !important; }
  .inaction-panel { opacity: 1 !important; transform: none !important; }

  /* Capability cards: skip entry animation entirely */
  .cap-card {
    opacity: 1 !important;
    transform: none !important;
  }
}