/* ============================================================
   EPSOW — IT Infrastructure & Cybersecurity Solutions
   Main Stylesheet  |  Light theme + Dark hero
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Light content backgrounds */
  --bg-primary:     #ffffff;
  --bg-secondary:   #f0f6ff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #eef4ff;
  --bg-section-alt: #f4f8ff;

  /* Dark section backgrounds */
  --dark-bg:        #060b18;
  --dark-bg-2:      #071020;

  /* Accent */
  --accent:         #0066ff;
  --accent-dim:     rgba(0, 102, 255, 0.1);
  --accent-glow:    rgba(0, 102, 255, 0.45);
  --cyan:           #00cfff;
  --cyan-dim:       rgba(0, 207, 255, 0.12);
  --cyan-glow:      rgba(0, 207, 255, 0.35);

  /* Text (dark for light sections) */
  --text-primary:   #0d1b2a;
  --text-secondary: #4a6080;
  --text-muted:     #8ca0b8;

  /* Border (light sections) */
  --border:         rgba(0, 80, 200, 0.12);
  --border-hover:   rgba(0, 102, 255, 0.38);

  --font-head:  'Space Grotesk', 'Inter', sans-serif;
  --font-body:  'Inter', sans-serif;
  --nav-h:      80px;
  --radius:     12px;
  --radius-sm:  6px;
  --container:  1200px;
  --ease:       all 0.3s ease;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; overflow-x: hidden; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Container ────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); }
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { color: var(--text-secondary); font-size: 1rem; }

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

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.02em; transition: var(--ease);
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 24px var(--accent-glow);
}
.btn-primary:hover {
  background: #1a7aff;
  box-shadow: 0 0 40px var(--accent-glow);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-hover);
}
.btn-ghost:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Ghost button on DARK backgrounds */
.dark-btn-ghost {
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
}
.dark-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ── Section Helpers ──────────────────────────────────────── */
.section { padding: 110px 0; background: var(--bg-primary); }
.section-alt { background: var(--bg-section-alt); padding: 110px 0; }

.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.section-tag::before {
  content: ''; display: inline-block;
  width: 18px; height: 2px; background: var(--accent);
}
.section-tag--warning {
  color: #f59e0b;
}
.section-tag--warning::before {
  background: #f59e0b;
}

.section-header { max-width: 680px; margin-bottom: 64px; }
.section-header.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header p { margin-top: 16px; font-size: 1.05rem; }

/* ── Grid Layouts ─────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px; transition: var(--ease);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 50, 150, 0.06);
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);
  opacity: 0; transition: var(--ease);
}
.card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,102,255,0.12); }
.card:hover::before { opacity: 1; }

.card-icon {
  width: 52px; height: 52px; border-radius: 10px;
  background: var(--accent-dim); border: 1px solid var(--border-hover);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 20px; transition: all 0.35s ease;
}
.card h3 { margin-bottom: 12px; color: var(--text-primary); }
.card p  { font-size: 0.95rem; }

/* ── Nav ──────────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(6, 11, 24, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 100, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.45), 0 0 40px 6px rgba(0, 80, 255, 0.30), 0 8px 32px rgba(0, 0, 0, 0.50);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Default text colors for transparent navbar (over dark hero) */
#navbar .nav-logo            { color: #ffffff; }
#navbar .nav-links a         { color: rgba(255,255,255,0.75); }
#navbar .nav-links a:hover,
#navbar .nav-links a.active  { color: #fff; background: rgba(255,255,255,0.08); }
#navbar .nav-toggle span     { background: #e2e8f0; }

/* Dark navy navbar when scrolled into light content sections */
#navbar.scrolled {
  background: rgba(6, 11, 24, 0.96);
  border-bottom: 1px solid rgba(0, 100, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.45), 0 0 40px 6px rgba(0, 80, 255, 0.30), 0 8px 32px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(16px);
}
#navbar.scrolled .nav-logo            { color: #e2e8f0; }
#navbar.scrolled .nav-links a         { color: rgba(226,232,240,0.80); }
#navbar.scrolled .nav-links a:hover,
#navbar.scrolled .nav-links a.active  { color: #fff; background: rgba(255,255,255,0.08); }
#navbar.scrolled .nav-links a.active  { color: var(--cyan); }
#navbar.scrolled .nav-toggle span     { background: #e2e8f0; }

.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 28px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  transform: translateY(5px);
}
.logo-img {
  height: 78px; width: auto; display: block;
  object-fit: contain;
  clip-path: inset(0 0 22% 0);
}
.logo-img--footer {
  height: 70px;
  clip-path: inset(0 0 22% 0);
  display: inline-block;
  vertical-align: middle;
}
/* On dark scrolled navbar, boost logo visibility slightly */
#navbar.scrolled .logo-img {
  filter: brightness(1.08);
}
/* Legacy — keep in case anything still references it */
.logo-mark {
  width: 34px; height: 34px;
  background: var(--accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #fff;
}
.nav-links {
  display: flex; align-items: center; gap: 6px;
}
.nav-links a {
  font-size: 0.88rem; font-weight: 500; color: rgba(226,232,240,0.8);
  padding: 8px 14px; border-radius: 6px;
  transition: var(--ease); position: relative;
}
.nav-links a:hover, .nav-links a.active {
  color: #fff; background: rgba(255,255,255,0.08);
}
.nav-links a.active { color: var(--cyan); }
.nav-cta {
  display: flex; align-items: center; gap: 12px;
}
.nav-cta .btn { padding: 10px 20px; font-size: 0.88rem; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: #e2e8f0; border-radius: 2px; transition: var(--ease);
}

/* ── Footer ───────────────────────────────────────────────── */
#footer {
  background: var(--dark-bg);
  border-top: 1px solid rgba(0,102,255,0.12);
  padding: 48px 0 28px;
  position: relative;
  overflow: hidden;
}
.footer-shield-canvas {
  position: absolute;
  left: -80px; top: 50%;
  transform: translateY(-50%);
  width: 560px; height: 560px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
#footer .container { position: relative; z-index: 1; }
#footer h4     { color: rgba(200,215,235,0.82); }
#footer p      { color: rgba(148,163,184,0.85); }
#footer a      { color: rgba(148,163,184,0.85); }
#footer a:hover { color: #00c2cb; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 36px;
}
.footer-brand p { margin-top: 16px; font-size: 0.9rem; max-width: 360px; color: rgba(148,163,184,0.85); }
.footer-brand-tagline {
  margin-top: 6px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,229,255,0.45) !important;
  font-weight: 500;
}
.footer-brand .footer-contact { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.footer-brand .footer-contact a { font-size: 0.9rem; color: rgba(148,163,184,0.85); transition: var(--ease); }
.footer-brand .footer-contact a:hover { color: #00c2cb; }
.footer-col h4 {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(200,215,235,0.82); margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.9rem; color: rgba(148,163,184,0.85); transition: var(--ease); }
.footer-col ul a:hover { color: #00c2cb; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 0.85rem; color: rgba(148,163,184,0.85); }
#footer .footer-bottom-tagline { font-size: 0.8rem; color: rgba(148,163,184,0.60); }
#footer .logo-img { filter: brightness(1.05); }

/* ── Page Hero (inner pages) ──────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 80px) 0 80px;
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-2) 60%, #0a1830 100%);
  border-bottom: 1px solid rgba(0,102,255,0.15);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(0,102,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}
/* Circuit grid overlay on page-hero */
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,102,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .section-tag { margin-bottom: 20px; color: var(--cyan); }
.page-hero .section-tag::before { background: var(--cyan); }
.page-hero h1 { max-width: 620px; margin-bottom: 20px; color: #e2e8f0; }
.page-hero p  { max-width: 520px; font-size: 1.1rem; color: #94a3b8; }
.page-hero-slim { padding: calc(var(--nav-h) + 36px) 0 36px; }
.page-hero-slim h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 12px; }
.page-hero-slim p  { font-size: 0.97rem; }

/* ── Page Hero Shield Canvas ──────────────────────────────── */
.page-hero-robot {
  position: absolute; right: 4%; top: 50%;
  transform: translateY(-50%);
  width: 320px; height: 380px;
  opacity: 0.42; pointer-events: none;
  z-index: 0;
}

/* ── CTA Banner ───────────────────────────────────────────── */
.cta-banner {
  padding: 90px 0; text-align: center;
  background: linear-gradient(135deg, var(--dark-bg) 0%, #0a1830 100%);
  border-top: 1px solid rgba(0,102,255,0.12);
  border-bottom: 1px solid rgba(0,102,255,0.12);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,102,255,0.1) 0%, transparent 70%);
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { margin-bottom: 16px; color: #e2e8f0; }
.cta-banner p  { margin-bottom: 36px; font-size: 1.05rem; color: #94a3b8; }
.cta-banner .section-tag { color: var(--cyan); justify-content: center; }
.cta-banner .section-tag::before { background: var(--cyan); }
.cta-banner .btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn-ghost { color: rgba(226,232,240,0.85); border-color: rgba(255,255,255,0.25); }
.cta-banner .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ╔══════════════════════════════════════════════════════════╗
   ║   HOME — HERO SECTION                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: var(--nav-h) 0 0;
  background: linear-gradient(135deg, #060b18 0%, #071020 50%, #060e1e 100%);
  position: relative; overflow: hidden;
}

#particles-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,102,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-glow {
  position: absolute; top: 10%; right: 0;
  width: 950px; height: 950px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.12) 0%, rgba(0,207,255,0.04) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.hero .container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
  padding-top: 40px; padding-bottom: 60px;
  flex: 1;
}

/* Hero text — always white (dark background) */
.hero-content .section-tag  { color: var(--cyan); margin-bottom: 24px; font-size: 0.9rem; letter-spacing: 0.09em; white-space: nowrap; }
.hero-content .section-tag::before { background: var(--cyan); }
.hero-content h1            { color: #e2e8f0; margin-bottom: 20px; font-size: clamp(1.5rem, 3.0vw, 2.3rem); line-height: 1.15; }

/* ── Hero promise headline ── */
.hero-promise {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.hero-promise-line {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero-promise-line em {
  font-style: normal;
  background: linear-gradient(135deg, #00e5ff 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stacked word reveal animation (kept for other pages) ── */
@keyframes wordGlowIn {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(10px); }
  55%  { filter: blur(0px); }
  100% { opacity: 1; filter: blur(0px); transform: translateY(0); }
}
.hero-word {
  display: block;
  opacity: 0;
  animation: wordGlowIn 0.80s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-word:nth-child(1) { animation-delay: 0.40s; }
.hero-word:nth-child(2) { animation-delay: 0.90s; }
.hero-word:nth-child(3) { animation-delay: 1.40s; }
.hero-word:nth-child(4) { animation-delay: 1.90s; }
.hero-word:nth-child(5) { animation-delay: 2.40s; }
.hero-content h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #00e5ff 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(0, 160, 255, 0.45));
}
.hero-content .hero-desc    { color: #94a3b8; font-size: 1.1rem; max-width: 520px; margin-bottom: 40px; line-height: 1.8; }
.hero-content .btn-group    { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-content .btn-ghost    { color: rgba(226,232,240,0.85); border-color: rgba(255,255,255,0.25); }
.hero-content .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.5); }

.hero-badges {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 48px;
}
/* Full-width badge strip at bottom of hero section */
.hero-badges-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.15);
  position: relative;
  z-index: 2;
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,102,255,0.12); border: 1px solid rgba(0,102,255,0.3);
  color: #94a3b8; border-radius: 20px;
  padding: 6px 14px; font-size: 0.8rem; font-weight: 500;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.badge--location {
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.25);
  color: #e2e8f0;
  gap: 5px;
}
.badge--location .ph { font-size: 0.85rem; color: var(--cyan); }

/* ── Robot Visual ─────────────────────────────────────────── */
.hero-visual {
  position: relative; height: 580px;
  display: flex; align-items: center; justify-content: center;
}

/* Floating blue rectangles (match template aesthetic) */
.float-rects { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.frect {
  position: absolute; background: var(--accent);
  border-radius: 3px; opacity: 0.75;
  animation: floatRect var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
}
.fr1  { width: 36px; height: 10px; top: 12%;  left: 2%;   --dur: 3.6s; --delay: 0s; }
.fr2  { width: 12px; height: 12px; top: 22%;  left: 8%;   --dur: 4.2s; --delay: 0.7s; box-shadow: 0 0 10px var(--accent-glow); }
.fr3  { width: 48px; height: 8px;  top: 38%;  left: 0%;   --dur: 5s;   --delay: 1.4s; }
.fr4  { width: 10px; height: 28px; bottom: 30%; left: 6%;  --dur: 4.5s; --delay: 2s; }
.fr5  { width: 20px; height: 6px;  bottom: 16%; left: 14%; --dur: 3.8s; --delay: 0.4s; }
.fr6  { width: 8px;  height: 8px;  top: 8%;   right: 4%;  --dur: 4.1s; --delay: 1.8s; box-shadow: 0 0 10px var(--accent-glow); }
.fr7  { width: 42px; height: 8px;  top: 20%;  right: 1%;  --dur: 3.5s; --delay: 0.9s; }
.fr8  { width: 14px; height: 14px; top: 50%;  right: 5%;  --dur: 4.8s; --delay: 1.2s; }
.fr9  { width: 30px; height: 7px;  bottom: 22%; right: 2%; --dur: 4.3s; --delay: 2.5s; }
.fr10 { width: 8px;  height: 22px; bottom: 8%;  right: 12%;--dur: 3.9s; --delay: 0.6s; }
@keyframes floatRect {
  0%,100% { transform: translateY(0)   rotate(0deg);   opacity: 0.6; }
  50%      { transform: translateY(-14px) rotate(2deg); opacity: 1; }
}

/* Particle face canvas */
.robot-face-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* SVG robot hidden — replaced by canvas */
.robot-svg { display: none; }

/* Scan line animation */
.robot-scan {
  animation: svgScan 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes svgScan {
  0%   { transform: translateY(-90px); opacity: 0; }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.5; }
  100% { transform: translateY(160px); opacity: 0; }
}

/* Eye glow pulse */
.robot-eye-l, .robot-eye-r {
  animation: eyePulse 4s ease-in-out infinite;
}
.robot-eye-r { animation-delay: 0.15s; }
@keyframes eyePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* Eye blink */
.eye-blink {
  animation: eyeBlink 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes eyeBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  93%            { transform: scaleY(0.08); }
}


/* ── HOME — Capabilities ──────────────────────────────────── */
.caps-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.cap-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,80,200,0.30);
  border-radius: var(--radius); padding: 28px 20px;
  text-align: center; transition: var(--ease); cursor: default;
  box-shadow: 0 2px 16px rgba(0,50,150,0.09), 0 1px 4px rgba(0,50,150,0.05);
}
.cap-card:hover { border-color: var(--border-hover); transform: translateY(-4px); background: var(--bg-card-hover); box-shadow: 0 8px 28px rgba(0,102,255,0.1); }
.cap-icon {
  width: 54px; height: 54px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,102,255,0.10), rgba(0,207,255,0.05));
  border: 1px solid rgba(0,102,255,0.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; color: var(--accent);
  transition: all 0.35s ease;
}
.cap-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }

/* Cap card with photo header */
.cap-card--photo { padding: 0; overflow: hidden; }
.cap-card-photo {
  height: 155px; overflow: hidden; position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
}
.cap-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
  filter: brightness(0.65) saturate(0.75);
}
.cap-card--photo:hover .cap-card-photo img { transform: scale(1.07); }
.cap-card-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,11,24,0.05) 0%, rgba(6,11,24,0.72) 100%);
}
.cap-card-inner { padding: 22px 20px 28px; }
.cap-card p  { font-size: 0.82rem; color: var(--text-muted); }

/* ── HOME — How We Help ───────────────────────────────────── */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.help-text h2  { margin-bottom: 20px; }
.help-text p   { margin-bottom: 16px; }
.help-list     { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.help-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; background: var(--bg-card);
  border: 1px solid rgba(0,80,200,0.20);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,50,150,0.07);
  transition: var(--ease);
  position: relative; overflow: hidden;
}
.help-item::before {
  content: attr(data-step);
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head); font-size: 4.8rem; font-weight: 800;
  line-height: 1; letter-spacing: -3px;
  color: rgba(0,80,200,0.07);
  pointer-events: none; user-select: none;
  transition: color 0.35s ease;
}
.help-item:hover {
  border-color: rgba(0,102,255,0.35);
  border-left-color: var(--cyan);
  box-shadow: 0 6px 20px rgba(0,102,255,0.11);
  transform: translateX(3px);
}
.help-item:hover::before { color: rgba(0,120,255,0.12); }
.help-item-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--accent-dim); border: 1px solid var(--border-hover);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
  transition: all 0.35s ease;
}
.help-item h4   { font-size: 0.95rem; margin-bottom: 4px; }
.help-item p    { font-size: 0.85rem; }

.help-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card {
  background: linear-gradient(145deg, rgba(4,12,32,0.97) 0%, rgba(8,20,55,0.94) 100%);
  border: 1px solid rgba(0,100,255,0.22);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius); padding: 30px 22px; text-align: center;
  box-shadow: 0 6px 28px rgba(0,20,80,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: var(--ease); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,102,255,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.stat-card:hover {
  border-color: rgba(0,150,255,0.45);
  box-shadow: 0 12px 40px rgba(0,80,255,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(-3px);
}
.stat-card:nth-child(2) { margin-top: 24px; border-top-color: var(--cyan); }
.stat-card:nth-child(4) { margin-top: 24px; border-top-color: var(--cyan); }
.stat-num {
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 700;
  color: var(--accent); display: block; line-height: 1;
  text-shadow: 0 0 24px rgba(0,102,255,0.55);
}
.stat-card:nth-child(2) .stat-num,
.stat-card:nth-child(4) .stat-num { color: var(--cyan); text-shadow: 0 0 24px rgba(0,207,255,0.55); }
.stat-card p { font-size: 0.82rem; margin-top: 10px; color: rgba(180,200,240,0.75); line-height: 1.5; }

/* ── HOME — Pillars strip ─────────────────────────────────── */
.pillars-strip {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillars-strip .grid-3 { gap: 24px; }

/* ── SOLUTIONS page ───────────────────────────────────────── */

/* Hero pillar strip */

.sol-hero-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,194,255,0.12);
}
.sol-hero-pillars span {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(148,163,184,0.80);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sol-hero-pillars span em {
  font-style: normal;
  color: var(--cyan);
  margin-right: 6px;
  font-weight: 700;
}

/* Pillar grid */
.sol-grid-section { padding-top: 80px; }

/* ── Solutions timeline / flow wrapper ───────────────────── */
.sol-flow-wrap {
  position: relative;
  max-width: 1280px;
  margin: 52px auto 0;
  padding-top: 52px; /* space for marker badges above card tops */
}

/* Spine track — left: 10% ≈ center of col 1 in a 5-col grid */
.sol-flow-track {
  position: absolute;
  top: 51px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(0, 229, 255, 0.12);
  border-radius: 1px;
  overflow: hidden;
}

/* Fills left → right as tiles cascade in */
.sol-flow-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(0,102,255,0.9) 0%, rgba(0,207,255,0.9) 100%);
  border-radius: 1px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(0, 207, 255, 0.55);
}

.sol-pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* ── Solution tile — approach-card style ── */
.sol-tile {
  position: relative;
  display: flex;
  flex-direction: column; /* SVG on top, body grows, panel anchors to bottom */
  background: linear-gradient(160deg, #081020 0%, #0a1a3a 60%, #060e22 100%);
  border: 1px solid rgba(0, 194, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 38px 20px 24px; /* extra top clears the marker badge */
  opacity: 0;
  transform: translateY(36px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.40),
    0 20px 48px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
/* Numbered badge sitting on the solutions spine line */
.sol-marker {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #060e22 0%, #0a1a3a 100%);
  border: 2px solid rgba(0, 102, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.sol-marker span {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4a6080;
  transition: color 0.5s ease;
}
.sol-tile.card-visible .sol-marker {
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 14px rgba(0, 207, 255, 0.35), 0 0 0 4px rgba(0,207,255,0.06);
}
.sol-tile.card-visible .sol-marker span { color: #00cfff; }

.sol-tile.card-visible {
  opacity: 1;
  transform: translateY(0);
  animation: cardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sol-tile.card-visible:hover {
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.30),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 32px 64px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 194, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 194, 255, 0.28);
}

/* Animated SVG illustration zone */
.sol-tile-bg {
  display: block;
  flex-shrink: 0; /* never compressed by flex */
  width: 65%;
  margin: 0 auto 20px;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sol-tile.card-visible:hover .sol-tile-bg { opacity: 0.75; }

/* Card body — grows to fill, pushes panel to bottom */
.sol-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.sol-tile .section-tag { margin-bottom: 8px; color: var(--cyan); font-size: 0.62rem; }
.sol-tile .section-tag::before { background: var(--cyan); }

.sol-tile h3 {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
  margin-bottom: 10px;
}
.sol-tile-desc {
  min-height: 92px; /* locks desc zone height — panel line lands at same Y on all cards */
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 0;
  transition: color 0.28s ease;
}
.sol-tile.card-visible:hover .sol-tile-desc { color: #94a3b8; }

/* Services list — recessed panel, divider line locked to same Y across all cards */
.sol-tile-services {
  list-style: none;
  margin-top: auto; /* pushes to bottom — equal card height = identical divider position */
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -24px;
  padding: 14px 20px 18px;
  display: flex; flex-direction: column; gap: 9px;
  /* Recessed surface */
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(0, 207, 255, 0.14);
  border-radius: 0 0 13px 13px;
}
.sol-tile-services li {
  font-size: 0.82rem;
  color: #4e6a88;
  padding-left: 14px;
  min-height: 66px;        /* matches natural 3-line item height — panel identical across all cards */
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.28s ease;
}
.sol-tile-services li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity 0.28s ease;
}
.sol-tile.card-visible:hover .sol-tile-services li { color: #94a3b8; }
.sol-tile.card-visible:hover .sol-tile-services li::before { opacity: 1; }

/* Framework Stack */
.sol-stack-section { padding-bottom: 80px; }
.sol-stack {
  margin: 52px 0 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,194,255,0.10);
}
.sol-stack-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-left: 4px solid rgba(0,194,255,0.35);
  background: rgba(6,14,30,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.25s ease, border-left-color 0.25s ease;
  cursor: default;
}
.sol-stack-bar:last-child { border-bottom: none; }
.sol-stack-bar:hover {
  border-left-color: var(--cyan);
}

.sol-stack-left {
  display: flex; align-items: center; gap: 20px;
}
.sol-stack-layer-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(0,194,255,0.55);
  min-width: 88px;
  transition: color 0.25s ease;
}
.sol-stack-bar:hover .sol-stack-layer-label { color: var(--cyan); }
.sol-stack-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}
.sol-stack-services {
  font-size: 0.76rem;
  color: #94a3b8;
  text-align: right;
  transition: color 0.25s ease;
}
.sol-stack-bar:hover .sol-stack-services { color: #cbd5e1; }

/* Differentiator cards */
.sol-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sol-diff {
  text-align: center;
  padding: 28px 22px;
  background: linear-gradient(145deg, rgba(6,14,30,0.9) 0%, rgba(10,22,50,0.85) 100%);
  border: 1px solid rgba(0,194,255,0.08);
  border-radius: 14px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.sol-diff:hover {
  border-color: rgba(0,194,255,0.22);
  transform: translateY(-3px);
}
.sol-diff-icon {
  width: 46px; height: 46px;
  background: rgba(0,194,255,0.07);
  border: 1px solid rgba(0,194,255,0.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  margin: 0 auto 16px;
}
.sol-diff h4 {
  font-size: 0.93rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}
.sol-diff p {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.65;
}

/* Shared legacy utility (keep for other pages) */
.section-tag-inline {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan);
  background: rgba(0,102,255,0.15); border: 1px solid rgba(0,207,255,0.25);
  padding: 3px 10px; border-radius: 20px;
}

/* ── INDUSTRIES page ──────────────────────────────────────── */
.ind-section { padding-top: 64px; padding-bottom: 72px; }
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ind-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 430px;
  border: 1px solid rgba(0,194,255,0.08);
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.ind-card.card-visible {
  opacity: 1;
  transform: translateY(0);
  animation: cardIn 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ind-card.card-visible:hover {
  transform: translateY(-6px);
  border-color: rgba(0,194,255,0.28);
  box-shadow: 0 24px 56px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,194,255,0.10);
}
.ind-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(0.75);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.ind-card.card-visible:hover .ind-card-bg {
  transform: scale(1.05);
  filter: brightness(0.68) saturate(0.85);
}
.ind-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(4,10,24,0.97) 0%,
    rgba(4,10,24,0.65) 45%,
    rgba(4,10,24,0.10) 100%
  );
}
.ind-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px;
}
.ind-card-icon {
  width: 38px; height: 38px;
  background: rgba(0,194,255,0.10);
  border: 1px solid rgba(0,194,255,0.22);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  margin-bottom: 13px;
  transition: background 0.3s ease;
}
.ind-card:hover .ind-card-icon { background: rgba(0,194,255,0.18); }
.ind-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 7px;
  line-height: 1.25;
}
.ind-card p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 14px;
  transition: color 0.3s ease;
}
.ind-card:hover p { color: #cbd5e1; }
.ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ind-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(0,194,255,0.08);
  border: 1px solid rgba(0,194,255,0.16);
  color: rgba(0,194,255,0.70);
  letter-spacing: 0.02em;
  transition: background 0.3s ease, color 0.3s ease;
}
.ind-card:hover .ind-tag {
  background: rgba(0,194,255,0.14);
  color: rgba(0,194,255,0.90);
}

/* ── CASE STUDIES — inline close (no border, no section break) */
.cs-inline-cta {
  text-align: center;
  padding: 72px 0 20px;
}

/* ── CASE STUDIES — Work Gallery ────────────────────────────── */
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.cs-gallery-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 102, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.07);
}
.cs-gallery-item img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.cs-gallery-caption {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0 14px 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .cs-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-gallery { grid-template-columns: 1fr; }
}

.cs-close-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 36px;
}

/* ── CASE STUDIES page ───────────────────────────────────── */
.cs-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid var(--ind-color, var(--accent));
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.cs-card-left {
  width: 230px;
  flex-shrink: 0;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: var(--bg-secondary);
}

.cs-card-right {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* Left glow line */
.cs-card::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 4px;
  background: var(--ind-color, var(--accent));
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.28s ease, top 0.28s ease, bottom 0.28s ease;
}
/* Watermark icon — sits in the left panel */
.cs-card::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 180px; height: 180px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 40px color-mix(in srgb, var(--ind-color, var(--accent)) 20%, transparent);
}
.cs-card:hover::before { opacity: 1; top: 0; bottom: 0; }
.cs-card:hover::after  { opacity: 0.09; }

.cs-card[data-ind="manufacturing"] { --ind-color: #0ea5e9; }
.cs-card[data-ind="legal"]         { --ind-color: #6366f1; }
.cs-card[data-ind="healthcare"]    { --ind-color: #10b981; }
.cs-card[data-ind="construction"]  { --ind-color: #f59e0b; }

/* Watermark SVG icons per industry */
.cs-card[data-ind="manufacturing"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.cs-card[data-ind="legal"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M9 21h6'/%3E%3Cpath d='M5 7l7-4 7 4'/%3E%3Cpath d='M3 11l4.5 8H3L3 11zM21 11l-4.5 8H21L21 11z'/%3E%3C/svg%3E");
}
.cs-card[data-ind="healthcare"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}
.cs-card[data-ind="construction"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z'/%3E%3Cpath d='M10 10V5a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3C/svg%3E");
}

.cs-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.cs-ind-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ind-color, var(--accent));
}
.cs-ind-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ind-color, var(--accent));
  flex-shrink: 0;
}

.cs-pull {
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  padding-top: 20px;
  border-top: 2px solid var(--ind-color, var(--accent));
}
.cs-pull-stat {
  display: block;
  font-family: var(--font-head);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--ind-color, var(--accent));
  line-height: 1;
  letter-spacing: -0.03em;
}
.cs-pull-desc {
  display: block;
  font-size: 0.71rem;
  color: var(--text-muted);
  max-width: 160px;
  line-height: 1.4;
  margin-top: 5px;
}

.cs-headline {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-primary);
  margin: 0;
}

.cs-section { display: flex; flex-direction: column; gap: 9px; }

.cs-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ind-color, var(--accent));
}

.cs-problem {
  font-size: 0.90rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}

.cs-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cs-bullets li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.cs-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--ind-color, var(--accent));
  font-size: 0.78rem;
  top: 1px;
}

.cs-outcome {
  margin-top: auto;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cs-outcome-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ind-color, var(--accent));
}
.cs-outcome-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.62;
}

/* ── Case Study Before/After Photos ──────────────────────── */
.cs-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.cs-photo-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-photo-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.cs-photo-item.after .cs-photo-label {
  color: var(--ind-color, var(--accent));
}
.cs-photo-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

/* ── ABOUT HERO ──────────────────────────────────────────── */

.about-hero {
  background: linear-gradient(135deg, #040c1e 0%, #071428 50%, #040e22 100%);
  padding: 90px 0 80px;
  overflow: hidden;
  position: relative;
}
.about-hero-layout {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.about-hex-cluster { position: relative; }
.ahc-svg { width: 100%; height: auto; display: block; }
.ahc-connectors line {
  stroke: #00e5ff;
  stroke-width: 0.8;
  stroke-dasharray: 5 7;
  opacity: 0.18;
}
.ahc-bg   { /* fill comes from inline SVG gradient */ }
.ahc-ring {
  fill: none;
  stroke: #00c8ff;
  stroke-width: 1.8;
  opacity: 0.85;
}
.ahc-stat-num { fill: #ffffff; }

/* Orbit ring + hub */
.ahc-orbit-ring {
  fill: none;
  stroke: #00c8ff;
  stroke-width: 0.6;
  stroke-dasharray: 5 9;
  opacity: 0.18;
}
/* Light-background variant */
.ahc--light .ahc-stat-lbl { fill: rgba(0,200,255,0.9); }
.ahc-stat-num {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  fill: #ffffff;
}
.ahc-stat-lbl {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 600;
  fill: rgba(0,229,255,0.8);
  letter-spacing: 0.14em;
}
.about-hero-text .section-tag { margin-bottom: 20px; }
.about-hero-text h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.18;
  color: #ffffff;
  margin-bottom: 24px;
}
.about-hero-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(180,210,255,0.72);
  max-width: 460px;
}
@media (max-width: 900px) {
  .about-hero-layout { grid-template-columns: 1fr; }
  .about-hex-cluster { max-width: 460px; margin: 0 auto; }
  .about-hero-text { text-align: center; }
  .about-hero-text p { max-width: 100%; }
}

/* ── ABOUT page ──────────────────────────────────────────── */

.about-founder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-founder .founder-text {
  max-width: 760px;
  width: 100%;
}
.founder-nameplate {
  position: relative;
  margin: 28px 0 24px;
  padding: 20px 24px 20px 28px;
  background: linear-gradient(135deg, #081020 0%, #0a1a3a 60%, #060e22 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.founder-nameplate-text { flex: 1; }
.founder-nameplate-logo {
  width: 118px;
  height: auto;
  object-fit: contain;
  opacity: 0.88;
  filter: drop-shadow(0 0 12px rgba(0,229,255,0.18));
  flex-shrink: 0;
}
.founder-nameplate::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #00e5ff, rgba(0, 229, 255, 0));
}
.founder-name {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #e2e8f0 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.founder-title {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.30);
}
.founder-text p {
  font-size: 0.96rem;
  line-height: 1.85;
  margin-bottom: 18px;
  color: var(--text-secondary);
}
.founder-text p:last-child { margin-bottom: 0; }

.founder-credentials {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(145deg, #060e22 0%, #0b1733 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 36px;
  align-self: start;
}
.founder-cred-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.founder-cred-item:first-child { padding-top: 0; }
.founder-cred-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  opacity: 0.75;
}
.founder-cred-value {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 4px;
}
.founder-cred-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.founder-cred-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  opacity: 0.3;
  margin: 24px 0;
}
.founder-quote {
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(180,210,255,0.65);
  border: none;
}
.about-mission-statement {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.75;
  color: var(--text-primary);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
}

.about-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
}
.about-divider::before,
.about-divider::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: rgba(0,102,255,0.14);
}
.about-divider svg {
  width: 22px;
  height: 22px;
  color: rgba(0,102,255,0.35);
  flex-shrink: 0;
}
.about-close {
  padding: 80px 0 120px;
  text-align: center;
}
.about-close h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 36px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .about-founder { align-items: center; }
  .founder-credentials { padding: 24px 28px; }
}
@media (max-width: 600px) {
  .founder-credentials { padding: 20px 22px; }
  .founder-cred-value { font-size: 1.15rem; }
  .about-mission-statement { font-size: 1.05rem; }
}

/* ── EPSOW Acronym Animation Band (about page) ──────────── */
.epsow-acronym-band {
  background: #ffffff;
  padding: 36px 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.eab-words {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.eab-word {
  display: inline-flex;
  align-items: baseline;
  opacity: 0;
}
.eab-letter {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color 0.6s ease, text-shadow 0.6s ease, font-size 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.eab-tail {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 300;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0s, color 0.6s ease, opacity 0.8s ease;
}
.eab-word.eab-typing { opacity: 1; }
.eab-word.eab-lit .eab-letter {
  color: #0066ff;
  text-shadow: 0 0 20px rgba(0,102,255,0.25);
}
.eab-word.eab-lit .eab-tail { color: rgba(15,23,42,0.28); }
.eab-word.eab-collapse .eab-tail {
  opacity: 0;
  max-width: 0 !important;
  transition: max-width 1.1s cubic-bezier(0.4,0,0.2,1), opacity 0.65s ease;
}
.eab-words.eab-converge {
  gap: 8px;
  transition: gap 1.1s cubic-bezier(0.4,0,0.2,1);
}
.eab-word.eab-settled .eab-letter {
  color: #0066ff;
  text-shadow: 0 0 28px rgba(0,102,255,0.28), 0 0 8px rgba(0,102,255,0.10);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
}
.eab-sep {
  font-size: 0.45rem;
  color: rgba(0,0,0,0.15);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  align-self: center;
}
.eab-words.eab-seps-on .eab-sep { opacity: 1; }
.eab-words.eab-converge .eab-sep { opacity: 0; transition: opacity 0.3s ease; }

/* ── EPSOW band: mobile stacked column ── */
@media (max-width: 768px) {
  .epsow-acronym-band { padding: 24px 24px 20px; }
  .eab-words {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .eab-sep { display: none; }
  /* Converge animation is horizontal — disable it on mobile */
  .eab-words.eab-converge { gap: 10px; transition: none; }
  .eab-word.eab-collapse .eab-tail { opacity: 1 !important; max-width: 500px !important; transition: none !important; }
  .eab-word.eab-settled .eab-letter { font-size: clamp(1.3rem, 2.2vw, 2rem); }
}

/* ── EPSOW words inside dark hero (about page) ── */
.eab-words--hero {
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.eab-words--hero .eab-letter,
.eab-words--hero .eab-tail {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  color: rgba(255,255,255,0.93);
}
.eab-words--hero .eab-word.eab-lit .eab-letter {
  color: #00e5ff;
  text-shadow: 0 0 24px rgba(0,229,255,0.55);
}
.eab-words--hero .eab-word.eab-lit .eab-tail {
  color: rgba(255,255,255,0.22);
}
.eab-words--hero .eab-word.eab-settled .eab-letter {
  color: #00e5ff;
  text-shadow: 0 0 40px rgba(0,229,255,0.75), 0 0 12px rgba(0,229,255,0.4);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
}
.eab-words--hero .eab-sep {
  color: rgba(255,255,255,0.25);
}


/* ── APPROACH page — outer/inner sticky scroll ───────────── */

/* Section wrapper — NO overflow, clean */
/* ── APPROACH — Phase Grid ── */
/* ── APPROACH — Phase Grid ── */

/* Animatable custom property for the border-trace sweep */
.phase-section { background: var(--bg-secondary); }

/* ── Timeline / flow wrapper ─────────────────────────────── */
.phase-flow-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 52px; /* room for marker dots above card top edges */
}

/* Spine track — runs card-center to card-center.
   Geometry: wrap padding-top=52px, markers are 44px tall at top:-22px,
   so marker centers land at 52-22+22=52px from wrap top. */
.phase-flow-track {
  position: absolute;
  top: 51px; /* aligns to center of the 44px marker badges */
  left: 12.5%; /* ~center of first column in a 4-col equal grid */
  right: 12.5%;
  height: 2px;
  background: rgba(0, 229, 255, 0.12);
  border-radius: 1px;
  overflow: hidden;
}

/* Fills left → right as phases cascade in */
.phase-flow-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(0,102,255,0.9) 0%, rgba(0,207,255,0.9) 100%);
  border-radius: 1px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(0, 207, 255, 0.55);
}

.phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Cards start invisible — JS adds .card-visible to animate in */
.phase-card {
  position: relative;
  background: linear-gradient(145deg, #060e22 0%, #0b1733 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 38px 24px 28px; /* extra top padding clears the marker badge */
  opacity: 0;
  transform: translateY(36px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.28),
    0 8px 24px rgba(0,0,0,0.38),
    0 20px 48px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Numbered badge sitting on the spine line */
.phase-marker {
  position: absolute;
  top: -22px; /* centers the 44px badge on the spine */
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #060e22 0%, #0b1733 100%);
  border: 2px solid rgba(0, 102, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.phase-marker span {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4a6080;
  transition: color 0.5s ease;
}

/* Marker activates alongside the card */
.phase-card.card-visible .phase-marker {
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 14px rgba(0, 207, 255, 0.35), 0 0 0 4px rgba(0,207,255,0.06);
}
.phase-card.card-visible .phase-marker span {
  color: #00cfff;
}

/* SVG illustration — own zone at the top of the card */
.phase-card-bg {
  display: block;
  width: 65%;
  margin: 0 auto 24px;
  opacity: 0.55;
  pointer-events: none;
  flex-shrink: 0;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.phase-card.card-visible {
  opacity: 1;
  transform: translateY(0);
  animation: cardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.phase-card.card-visible:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  border-color: rgba(0, 229, 255, 0.2);
}
.phase-card.card-visible:hover .phase-card-bg { opacity: 0.72; }

/* Card content */
.phase-card-body { position: relative; z-index: 1; }

.phase-card .section-tag { margin-bottom: 10px; color: var(--cyan); }
.phase-card .section-tag::before { background: var(--cyan); }
.phase-card h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  margin-bottom: 10px;
  line-height: 1.25;
  color: #e2e8f0;
}
.phase-card p {
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 18px;
  color: #94a3b8;
}
.step-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.step-tag {
  font-size: 0.68rem; padding: 3px 10px; border-radius: 20px;
  background: rgba(0, 102, 255, 0.15); border: 1px solid rgba(0, 102, 255, 0.3);
  color: #94a3b8; font-weight: 500;
}

/* ── APPROACH Command Board — HUD ────────────────────────── */
.cmd-section {
  background: transparent;
  padding: 56px 0 80px;
  overflow: visible;
  position: relative;
}

/* ── Two-column split ── */
.approach-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 720px;
  max-width: 1320px;
  margin: 0 auto;
}

.approach-board-col {
  position: relative;
  min-height: 720px;
  overflow: visible;
}

.approach-board-col .cmd-board {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 720px;
  margin: 0;
}

.approach-board-col .cmd-screen {
  width: calc(100% - 20px);
  height: calc(100% - 36px);
}

/* Inset cards so the screen frame visibly wraps around them */
.approach-board-col #cmdNode1,
.approach-board-col #cmdNode2 { left: 14px; }
.approach-board-col #cmdNode3,
.approach-board-col #cmdNode4 { right: 14px; }

/* ── Right text column ── */
.approach-text-col {
  padding: 64px 56px 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(0, 210, 255, 0.12);
}
.approach-text-col .section-tag         { color: var(--cyan); margin-bottom: 18px; }
.approach-text-col .section-tag::before { background: var(--cyan); }
.approach-text-col h2 {
  color: var(--text-primary);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: 20px;
}
.approach-text-col > p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

/* ── Outcome pillars (left column) ── */
.apv-outcomes {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apv-outcome-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.apv-outcome-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.85;
  margin-top: 1px;
}
.apv-outcome-icon svg { width: 18px; height: 18px; }
.apv-outcome-body  { flex: 1; min-width: 0; }
.apv-outcome-label {
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.apv-outcome-body p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.58;
  margin: 0;
}

/* ── Legacy phase list (kept for fallback) ── */
.approach-phases { margin-top: 28px; display: flex; flex-direction: column; }
.approach-phase  { padding: 13px 0 13px 18px; border-left: 2px solid var(--pc, rgba(0,210,255,0.3)); border-bottom: 1px solid rgba(255,255,255,0.05); }
.approach-phase:last-child { border-bottom: none; }
.phase-name { font-family: var(--font-head); font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.phase-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Holographic Screen — large enough to contain all 4 tiles ── */
.cmd-screen {
  position: absolute;
  top: 50%; left: 50%;
  /* Wide enough that the corner tiles sit ON the screen */
  width: 1100px;
  height: 640px;
  transform: translate(-50%, -50%) perspective(2000px) rotateX(4deg);
  background:
    radial-gradient(ellipse 55% 40% at 50% 50%, rgba(0, 140, 255, 0.07) 0%, transparent 68%),
    linear-gradient(160deg, rgba(0, 8, 22, 0.97) 0%, rgba(0, 18, 44, 0.94) 45%, rgba(0, 6, 20, 0.97) 100%);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(0, 210, 255, 0.80);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(0,180,255,0.15),
    0 0 40px rgba(0, 210, 255, 0.65),
    0 0 100px rgba(0, 170, 255, 0.30),
    0 0 260px rgba(0, 120, 230, 0.14),
    0 60px 160px rgba(0, 0, 0, 0.55),
    inset 0 0 120px rgba(0, 140, 255, 0.04);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Corner bracket accents */
.scr-c {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid rgba(0, 230, 255, 0.95);
}
.scr-tl { top: -1px;    left: -1px;  border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.scr-tr { top: -1px;    right: -1px; border-left: none;  border-bottom: none; border-radius: 0 6px 0 0; }
.scr-bl { bottom: -1px; left: -1px;  border-right: none; border-top: none;    border-radius: 0 0 0 6px; }
.scr-br { bottom: -1px; right: -1px; border-left: none;  border-top: none;    border-radius: 0 0 6px 0; }

/* Grid texture overlay on screen */
.cmd-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 200, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 255, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* Screen label */
.scr-label {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(0, 210, 255, 0.55);
  text-transform: uppercase;
  z-index: 1;
}

/* Ambient HUD data readouts */
.scr-data {
  position: absolute;
  font-family: var(--font-head);
  font-size: 0.38rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(0, 210, 255, 0.32);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}
.scr-data--tl { top: 18px;   left: 20px;  }
.scr-data--tr { top: 18px;   right: 20px; }
.scr-data--bl { bottom: 28px; left: 20px;  }
.scr-data--br { bottom: 28px; right: 20px; }

.scr-blink {
  margin-left: 3px;
  color: rgba(0, 229, 255, 0.75);
  animation: scrBlink 1.6s ease-in-out infinite;
}
@keyframes scrBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.08; }
}

/* Horizontal scan sweep */
.scr-scanbar {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 210, 255, 0.25) 15%,
    rgba(0, 229, 255, 0.55) 50%,
    rgba(0, 210, 255, 0.25) 85%,
    transparent 100%
  );
  animation: scrScan 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scrScan {
  0%   { top: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.cmd-board {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  height: 700px;
}

/* SVG overlay — sits behind node cards */
.cmd-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* ── Hub ── */
.cmd-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 172px; height: 172px;
  z-index: 3;
}

/* Expanding pulse rings */
.cmd-hub-pulse {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.2);
  animation: cmdPulse 3.6s ease-out infinite;
  pointer-events: none;
}
.cmd-hub-p2 { animation-delay: 1.8s; }

@keyframes cmdPulse {
  0%   { transform: scale(0.86); opacity: 0.6; }
  100% { transform: scale(2.05); opacity: 0; }
}

/* Rotating hex + dashed ring SVG overlay */
.cmd-hub-deco {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.hub-hex-spin {
  transform-origin: 100px 100px;
  animation: hubHexSpin 22s linear infinite;
}

.hub-ring-contra {
  transform-origin: 100px 100px;
  animation: hubHexSpin 14s linear infinite reverse;
}

@keyframes hubHexSpin {
  to { transform: rotate(360deg); }
}

.cmd-hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,229,255,0.55);
  box-shadow:
    0 0 40px rgba(0,229,255,0.45),
    0 0 100px rgba(0,229,255,0.14),
    inset 0 0 40px rgba(0,229,255,0.08);
}

.cmd-hub-inner {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #0e2244 0%, #060e22 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
.cmd-hub-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 229, 255, 0.13) 28deg,
    transparent 52deg,
    transparent 360deg
  );
  animation: radarSweep 3.8s linear infinite;
  pointer-events: none;
}
@keyframes radarSweep {
  to { transform: rotate(360deg); }
}

.cmd-hub-icon {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 800;
  color: #00e5ff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 32px rgba(0,229,255,0.85), 0 0 8px rgba(0,229,255,0.5);
}

.cmd-hub-name {
  font-family: var(--font-head);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #94a3b8;
  text-transform: uppercase;
}

.cmd-hub-sub {
  font-size: 0.42rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #64748b;
  text-transform: uppercase;
}

/* ── HUD Corner Brackets ── */
.hud-c {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
  z-index: 5;
  border-color: var(--nc);
  border-style: solid;
  opacity: 0.7;
}
.hud-tl { top: 7px;    left: 7px;    border-width: 1.5px 0 0 1.5px; }
.hud-tr { top: 7px;    right: 7px;   border-width: 1.5px 1.5px 0 0; }
.hud-bl { bottom: 7px; left: 7px;    border-width: 0 0 1.5px 1.5px; }
.hud-br { bottom: 7px; right: 7px;   border-width: 0 1.5px 1.5px 0; }

/* ── HUD Scanline Overlay ── */
.hud-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 220, 255, 0.048) 2px,
    rgba(0, 220, 255, 0.048) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Phase Nodes — glass panels ── */
.cmd-node {
  position: absolute;
  width: 280px;
  /* Glass: nearly transparent, node color barely tints it */
  background: color-mix(in srgb, var(--nc) 10%, rgba(3, 10, 24, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Border IS the card — bright neon in node color */
  border: 1.5px solid color-mix(in srgb, var(--nc) 88%, white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.4),
    0 16px 48px rgba(0,0,0,0.4);
  transition:
    transform 0.32s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.32s ease;
  z-index: 2;
  cursor: default;
}

/* Left panels — subtle tilt toward hub */
.cmd-node--left {
  transform: perspective(1200px) rotateY(4deg);
}

/* Right panels — mirror tilt */
.cmd-node--right {
  transform: perspective(1200px) rotateY(-4deg);
}

/* Corner positions */
#cmdNode1 { top: 28px;    left: 0; }
#cmdNode2 { bottom: 28px; left: 0; }
#cmdNode3 { top: 28px;    right: 0; }
#cmdNode4 { bottom: 28px; right: 0; }

/* Colored accent bar */
.cmd-node-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--nc) 0%, color-mix(in srgb, var(--nc) 40%, transparent) 75%, transparent 100%);
  box-shadow: 0 0 20px var(--nc), 0 0 6px var(--nc);
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* Colored top-glow zone just under the bar */
.cmd-node-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nc) 12%, transparent) 0%, transparent 100%);
  pointer-events: none;
}

.cmd-node-body {
  padding: 14px 18px 18px;
  position: relative;
  z-index: 1;
}

/* Large icon block at top of each card */
.cmd-node-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--nc) 14%, rgba(0,0,0,0.4));
  border: 1px solid color-mix(in srgb, var(--nc) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--nc);
  box-shadow: 0 0 18px color-mix(in srgb, var(--nc) 28%, transparent);
  flex-shrink: 0;
}
.cmd-node-icon-wrap svg {
  width: 30px;
  height: 30px;
}

/* Phase label — pill badge */
.cmd-node-phase {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  color: var(--nc);
  background: color-mix(in srgb, var(--nc) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--nc) 35%, transparent);
}

.cmd-node-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 9px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

.cmd-node-desc {
  font-size: 0.74rem;
  color: rgba(200, 230, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 13px;
}

.cmd-node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cmd-node-tags span {
  font-size: 0.58rem;
  padding: 2px 9px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--nc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nc) 22%, transparent);
  color: color-mix(in srgb, var(--nc) 70%, #ffffff);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ── Hover lift ── */
.cmd-node--left:hover {
  transform: perspective(1200px) rotateY(4deg) translateX(8px);
}
.cmd-node--right:hover {
  transform: perspective(1200px) rotateY(-4deg) translateX(-8px);
}

/* ── Responsive: collapse to vertical stack ── */
@media (max-width: 960px) {
  .approach-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .approach-board-col,
  .approach-board-col .cmd-board {
    min-height: auto;
    height: auto;
  }
  .approach-text-col {
    padding: 48px 24px 56px;
    border-left: none;
    border-top: 1px solid rgba(0,210,255,0.10);
  }
  .cmd-board {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
  }
  .cmd-svg { display: none; }
  .cmd-hub {
    position: relative;
    top: auto; left: auto;
    transform: none;
    margin-bottom: 8px;
  }
  .cmd-node,
  .cmd-node--left,
  .cmd-node--right {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: 100%;
    max-width: 480px;
    transform: none;
  }
  .cmd-node--left:hover,
  .cmd-node--right:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════
   APV — Approach Visual (hub centered + spider-leg rows)
══════════════════════════════════════════════════════════ */

.apv-section {
  padding: 56px 0 80px;
  overflow-x: hidden; /* prevent SVG filter region from expanding page width and triggering browser zoom-out */
}

/* ── Approach CTA Strip ──────────────────────────────────── */
.apv-cta {
  background: #ffffff;
  padding: 72px 0;
  text-align: center;
}
.apv-cta h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--text-primary);
  margin-bottom: 12px;
}
.apv-cta p {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 32px;
  line-height: 1.65;
}
.apv-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 18px rgba(0,102,255,0.28);
}
.apv-cta .btn-primary:hover {
  background: #0052cc;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,102,255,0.38);
}

/* Two-column split: text left, visual right */
.apv-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 660px;
}

/* ── Text column (LEFT) ── */
.apv-text-col {
  padding: 64px 56px 64px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(0, 102, 255, 0.14);
}
.apv-text-col .section-tag         { color: var(--cyan); margin-bottom: 18px; }
.apv-text-col .section-tag::before { background: var(--cyan); }
.apv-text-col h2 {
  color: var(--text-primary);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: 20px;
}
.apv-text-col > p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 10px;
  line-height: 1.68;
}

/* ── Visual column (RIGHT) ── */
.apv-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

/* ── Panel: hub absolutely centered + rows column ── */
.apv-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 560px;
}

/* SVG overlay for spider-leg lines — drawn by JS */
.apv-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden; /* was visible — clips filter region so it can't expand page width */
}

/* Hub node — circular globe container */
.apv-hub {
  position: absolute;
  left: 0;
  top: 50%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  /* No overflow:hidden — pulse rings need to extend outside the circle */
  background: #02040e; /* deep space fallback before canvas renders */
  border: 2px solid rgba(0, 102, 255, 0.70);
  box-shadow:
    0 0 0 1px rgba(0,102,255,0.10),
    0 0 20px rgba(0,102,255,0.28),
    0 0 50px rgba(0,102,255,0.09),
    inset 0 0 16px rgba(0,102,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* entrance animation — starts hidden, centered via JS transform */
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.apv-hub.apv-in {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Hex overlay */
.apv-hub-hex {
  position: absolute;
  inset: -10px;
  animation: apvHexSpin 12s linear infinite;
  pointer-events: none;
}
@keyframes apvHexSpin { to { transform: rotate(360deg); } }

/* Mini-globe canvas — fills the hub circle; JS draws the rotating sphere */
.apv-hub-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* Pulse rings */
.apv-hub-pulse {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 102, 255, 0.38);
  animation: apvPulseRing 3.2s ease-out infinite;
  inset: -10px;
}
.apv-hub-p2 { inset: -24px; animation-delay: 1.6s; border-color: rgba(0,102,255,0.18); }
@keyframes apvPulseRing {
  0%   { opacity: 0.65; transform: scale(0.88); }
  70%  { opacity: 0;    transform: scale(1.06); }
  100% { opacity: 0; }
}

/* Hub text */
.apv-hub-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  position: relative;
  z-index: 1;
}
.apv-hub-letter {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 800;
  color: #00cfff;
  line-height: 1;
  text-shadow: 0 0 14px rgba(0, 207, 255, 0.50);
}
.apv-hub-word {
  font-family: var(--font-head);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(0, 207, 255, 0.70);
}
.apv-hub-sub {
  font-size: 0.38rem;
  letter-spacing: 0.14em;
  color: rgba(0, 207, 255, 0.34);
}

/* ── Rows column — pushed right of hub, with room for curved lines ── */
.apv-rows-col {
  position: absolute;
  left: 158px;   /* hub (92px) + 66px curve runway */
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 28px 0;
}

/* Single phase row — JS controls all timing, no CSS delay here */
.apv-row {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.apv-row.apv-in {
  opacity: 1;
  transform: translateX(0);
}

/* ── Phase card ── */
.apv-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px 16px 16px;
  /* Subtle gradient interior — white top, faint blue tint at bottom */
  background: linear-gradient(160deg, #ffffff 0%, #edf3ff 100%);
  /* Blue on top + left (accent + connection point), dark on right + bottom (shadow depth) */
  border-width: 6px;
  border-style: solid;
  border-color: #0066ff #071020 #071020 #0066ff;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14),
    0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Hover — all four sides flip to primary blue, card lifts */
.apv-card:hover {
  border-color: #0066ff;
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 102, 255, 0.12);
}

/* Subtle inner-top highlight — glass edge feel */
.apv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.90);
  pointer-events: none;
  z-index: 0;
}

/* ── Icon box ── */
.apv-card-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 10px;
  /* Radial gradient — lit from top-left like a soft light source */
  background: radial-gradient(circle at 32% 32%, rgba(0,102,255,0.18) 0%, rgba(0,102,255,0.05) 75%);
  border: 1px solid rgba(0, 102, 255, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0055dd;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 18px rgba(0, 102, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  transition: color 0.90s ease, border-color 0.90s ease, background 0.90s ease, box-shadow 0.90s ease;
}
.apv-card-icon svg { width: 24px; height: 24px; display: block; }

/* ── Card text ── */
.apv-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.apv-card-name {
  font-family: var(--font-head);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.90s ease;
}
.apv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.apv-card-tags span {
  font-size: 0.60rem;
  color: rgba(0, 80, 200, 0.75);
  background: rgba(0, 102, 255, 0.07);
  border: 1px solid rgba(0, 102, 255, 0.20);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  transition: color 0.90s ease, background 0.90s ease, border-color 0.90s ease;
}
/* First tag is the primary keyword — slightly more weight */
.apv-card-tags span:first-child {
  color: rgba(0, 80, 220, 0.92);
  background: rgba(0, 102, 255, 0.11);
  border-color: rgba(0, 102, 255, 0.32);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   APV — Per-card activation glows (blue → dimmer blue)
══════════════════════════════════════════════════════════ */

/* Card 1 — bright blue */
#apvRow1.apv-in .apv-card {
  border-color: rgba(0, 102, 255, 0.55);
  box-shadow:
    0 0 22px rgba(0, 102, 255, 0.28),
    0 0 48px rgba(0, 102, 255, 0.08),
    0 2px 14px rgba(0, 60, 180, 0.10);
}

/* Card 2 — medium blue */
#apvRow2.apv-in .apv-card {
  border-color: rgba(0, 82, 210, 0.50);
  box-shadow:
    0 0 20px rgba(0, 82, 210, 0.24),
    0 0 42px rgba(0, 82, 210, 0.07),
    0 2px 14px rgba(0, 50, 160, 0.10);
}

/* Card 3 — deeper blue */
#apvRow3.apv-in .apv-card {
  border-color: rgba(0, 60, 175, 0.44);
  box-shadow:
    0 0 18px rgba(0, 60, 175, 0.20),
    0 0 38px rgba(0, 60, 175, 0.06),
    0 2px 14px rgba(0, 38, 130, 0.10);
}

/* Card 4 — darkest blue (just before system flip) */
#apvRow4.apv-in .apv-card {
  border-color: rgba(0, 42, 140, 0.40);
  box-shadow:
    0 0 16px rgba(0, 42, 140, 0.18),
    0 0 34px rgba(0, 42, 140, 0.06),
    0 2px 14px rgba(0, 24, 100, 0.10);
}

/* ══════════════════════════════════════════════════════════
   APV — System fully operational
══════════════════════════════════════════════════════════ */

/* All four cards go live — all four sides snap to electric blue */
.apv-panel.apv-system-on #apvRow1 .apv-card,
.apv-panel.apv-system-on #apvRow2 .apv-card,
.apv-panel.apv-system-on #apvRow3 .apv-card,
.apv-panel.apv-system-on #apvRow4 .apv-card {
  border-color: #0066ff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14),
    0 0 22px rgba(0, 102, 255, 0.20);
  transition: border-color 0.9s ease, box-shadow 0.9s ease;
}

/* ── Icon box brightens blue ── */
.apv-panel.apv-system-on .apv-card-icon {
  color: #3d8fff;
  border-color: rgba(40, 130, 255, 0.70);
  background: rgba(0, 102, 255, 0.10);
  box-shadow: 0 0 18px rgba(0, 102, 255, 0.28);
}

/* ── Phase label + tag chips brighten blue ── */
.apv-panel.apv-system-on .apv-card-phase {
  color: rgba(60, 150, 255, 0.90);
}
.apv-panel.apv-system-on .apv-card-tags span {
  color: rgba(60, 150, 255, 0.92);
  background: rgba(0, 102, 255, 0.10);
  border-color: rgba(0, 110, 255, 0.38);
}

/* ::before is disabled on base card; nothing to override on system-on */

/* Hub intensifies blue on system-on */
.apv-panel.apv-system-on .apv-hub {
  border-color: rgba(40, 130, 255, 0.95);
  color: #3d8fff;
  box-shadow:
    0 0 0 2px rgba(0,102,255,0.22),
    0 0 22px rgba(0,102,255,0.70),
    0 0 55px rgba(0,102,255,0.38),
    0 0 100px rgba(0,102,255,0.18);
  animation: apvHubAlive 3.0s ease-in-out infinite;
  animation-delay: 0.9s;
  transition:
    border-color 0.9s ease,
    box-shadow   0.9s ease,
    color        0.9s ease;
}

/* Hub glow breathes after system activates */
@keyframes apvHubAlive {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(0,102,255,0.22),
      0 0 22px rgba(0,102,255,0.70),
      0 0 55px rgba(0,102,255,0.38),
      0 0 100px rgba(0,102,255,0.18);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(0,102,255,0.34),
      0 0 34px rgba(0,102,255,0.90),
      0 0 80px rgba(0,102,255,0.52),
      0 0 140px rgba(0,102,255,0.26);
  }
}

.apv-panel.apv-system-on .apv-hub-pulse {
  border-color: rgba(0, 102, 255, 0.50);
  transition: border-color 0.9s ease;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .apv-split {
    grid-template-columns: 1fr;
  }
  .apv-text-col {
    padding: 48px 24px 40px;
    border-right: none;
    border-bottom: 1px solid rgba(0,102,255,0.10);
  }
  .apv-visual-col {
    padding: 40px 24px 56px;
  }
  .apv-panel {
    max-width: 440px;
    min-height: 500px;
  }
}

/* ── Mobile: stacked layout — globe centered on top, cards single column below ── */
@media (max-width: 768px) {
  /* Tighten section padding */
  .apv-section { padding: 24px 0 40px; overflow-x: hidden; }

  /* Visual goes above text */
  .apv-visual-col { order: -1; padding: 24px 20px 20px; }
  .apv-text-col   { border-bottom: none; border-top: 1px solid rgba(0,102,255,0.10); }

  /* Panel becomes a flex column */
  .apv-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: unset;
    max-width: 100%;
    width: 100%;
  }

  /* Hub: pull out of absolute, center it */
  .apv-hub,
  .apv-hub.apv-in {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  /* Hide dynamic SVG lines — hub is no longer at left: 0 */
  .apv-svg { display: none; }

  /* Rows col: single column — cards are too wide for 2-col at 375px */
  .apv-rows-col {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Force all rows visible — bypass JS stagger animation */
  .apv-row,
  .apv-row.apv-in {
    opacity: 1 !important;
    transform: translateX(0) !important;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .apv-hub { width: 72px; height: 72px; }
  .apv-hub-letter { font-size: 1.15rem; }
  .apv-rows-col { left: 110px; }
  .apv-card-name { font-size: 0.78rem; }
  .pain-cards { grid-template-columns: 1fr; }
  /* Outcomes: 1 column on small phones */
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  /* Nav brand text: slightly smaller on very small phones */
  .nav-brand-text { font-size: 0.95rem; }
  .logo-img { height: 44px; }
  /* Contact: commitment strip — tighter gap on small phones */
  .contact-commitment { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .apv-hub                                    { transition: opacity 0.2s ease, transform 0.2s ease; }
  .apv-hub-hex                                { animation: none; }
  .apv-hub-radar                              { animation: none; }
  .apv-hub-pulse                              { animation: none; }
  .apv-row                                    { transition: opacity 0.2s ease, transform 0.2s ease; }
  .apv-panel.apv-system-on .apv-hub           { animation: none; }
}

/* ── CASE STUDIES page ────────────────────────────────────── */
.case-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: var(--ease);
  box-shadow: 0 2px 12px rgba(0,50,150,0.06);
}
.case-card:hover { border-color: var(--border-hover); box-shadow: 0 8px 28px rgba(0,102,255,0.1); }
.case-header {
  padding: 28px 32px; background: var(--bg-section-alt);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
}
.case-industry-tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--border-hover);
  padding: 4px 10px; border-radius: 4px;
}
.case-header h3 { font-size: 1.1rem; }
.case-body { padding: 32px; }
.case-sections { display: flex; flex-direction: column; gap: 20px; }
.case-section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.case-section-content { font-size: 0.9rem; color: var(--text-secondary); }
.case-outcome {
  margin-top: 24px; padding: 16px; border-radius: 8px;
  background: rgba(0,207,255,0.05); border: 1px solid rgba(0,207,255,0.2);
}
.case-outcome .case-section-label { color: var(--cyan); }
.case-outcome .case-section-content { color: #0d7a94; font-weight: 500; }

/* ── ABOUT page ───────────────────────────────────────────── */
.about-mission {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.mission-text h2 { margin-bottom: 20px; }
.mission-text p  { margin-bottom: 16px; }
.mission-visual {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 4px 20px rgba(0,50,150,0.08);
}
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(0,102,255,0.08); border: 1px solid rgba(0,102,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.value-item h4 { margin-bottom: 4px; }
.value-item p  { font-size: 0.85rem; }
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }

/* ── INSIGHTS page ────────────────────────────────────────── */
.insight-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: var(--ease);
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,50,150,0.06);
}
.insight-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,102,255,0.1); }
.insight-thumb {
  height: 160px;
  background: linear-gradient(135deg, #060b18 0%, #0a1830 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  border-bottom: 1px solid rgba(0,102,255,0.15);
  position: relative; overflow: hidden;
}
.insight-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,102,255,0.06), rgba(0,207,255,0.06));
}
.insight-thumb span { position: relative; z-index: 1; }
.insight-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.insight-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px;
}
.insight-cat {
  color: var(--accent); font-weight: 600;
  background: var(--accent-dim); padding: 3px 8px; border-radius: 4px;
}
.insight-body h3 { font-size: 1.05rem; margin-bottom: 10px; }
.insight-body p  { font-size: 0.88rem; flex: 1; }
.insight-read {
  margin-top: 20px; color: var(--accent); font-size: 0.88rem;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
  transition: var(--ease);
}
.insight-read:hover { gap: 10px; }

/* ── CONTACT — Response commitment strip ─────────────────── */
.contact-commitment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.commitment-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.commitment-num {
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}
.commitment-item h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.commitment-item p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── CONTACT — What to Expect dark cards ─────────────────── */
.contact-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-steps .help-item {
  background: var(--bg-secondary);
  border: 1px solid rgba(0,80,200,0.15);
  border-left: 4px solid #003580;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0,50,150,0.07);
  transform: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-steps .help-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,50,200,0.11);
  border-color: var(--border-hover);
  border-left-color: #003580;
}
.contact-steps .help-item::before { display: none; }
.contact-steps .help-item h4 { color: var(--text-primary); font-size: 0.92rem; }
.contact-steps .help-item p  { color: var(--text-secondary); }
.contact-steps .help-item-icon {
  background: #ffffff;
  border: 1px solid rgba(0,80,200,0.18);
  color: var(--accent);
}
.contact-steps .help-item:hover .help-item-icon {
  background: #ffffff;
  border-color: var(--border-hover);
  color: var(--accent);
}

/* ── CONTACT page ─────────────────────────────────────────── */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: stretch;
}
.contact-info {
  display: flex; flex-direction: column;
}
.contact-info h2 { margin-bottom: 16px; }
.contact-info p  { margin-bottom: 36px; }
.contact-items { display: flex; flex-direction: column; gap: 20px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item-icon {
  width: 44px; height: 44px; background: #003580;
  border: 1px solid #003580; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #7ab8f5; flex-shrink: 0;
}
.contact-item-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.contact-item-val   { font-size: 0.95rem; color: var(--text-primary); }
.contact-item-val a { color: var(--accent); transition: var(--ease); }
.contact-item-val a:hover { text-decoration: underline; }
.contact-form-wrapper {
  background: var(--bg-card);
  border: 1px solid rgba(0,102,255,0.22);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 48px;
  box-shadow: 0 4px 24px rgba(0,50,150,0.08), 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.contact-form-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,102,255,0.12), 0 4px 12px rgba(0,0,0,0.07);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.95rem; transition: var(--ease);
  outline: none; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group select option { background: var(--bg-card); }
.form-submit { margin-top: 8px; }
.form-submit .btn { width: 100%; justify-content: center; padding: 16px; font-size: 1rem; }

/* ╔══════════════════════════════════════════════════════════╗
   ║   PREMIUM VISUAL ENHANCEMENTS                           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* SVG icon sizing — universal */
.cap-icon svg, .card-icon svg, .industry-icon svg,
.help-item-icon svg, .value-icon svg, .contact-item-icon svg { width: 22px; height: 22px; }
.insight-thumb svg { width: 44px; height: 44px; opacity: 0.7; transition: opacity 0.35s ease; }
.insight-card:hover .insight-thumb svg { opacity: 1; color: var(--cyan); }
.footer-contact a { display: flex; align-items: flex-start; gap: 9px; }
.footer-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* Cap card — animated gradient bottom line on hover */
.cap-card { position: relative; overflow: hidden; }
.cap-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--cyan) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.cap-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,102,255,0.25);
  box-shadow: 0 20px 50px rgba(0,102,255,0.15), 0 4px 16px rgba(0,102,255,0.08);
}
.cap-card:hover .cap-icon {
  background: linear-gradient(135deg, rgba(0,102,255,0.22), rgba(0,207,255,0.10));
  border-color: rgba(0,207,255,0.38); box-shadow: 0 0 18px rgba(0,102,255,0.22);
  color: var(--cyan);
}
.cap-card:hover::after { transform: scaleX(1); }

/* Card — stronger glow on hover */
.card:hover {
  box-shadow: 0 16px 48px rgba(0,102,255,0.15), 0 4px 16px rgba(0,102,255,0.07);
}
.card:hover .card-icon {
  background: linear-gradient(135deg, rgba(0,102,255,0.18), rgba(0,207,255,0.08));
  border-color: rgba(0,207,255,0.32); box-shadow: 0 0 14px rgba(0,102,255,0.18);
  color: var(--cyan);
}

/* Industry card — icon color on hover */
.industry-card:hover .industry-icon { border-color: rgba(0,207,255,0.3); color: var(--cyan); }

/* CTA Banner — circuit grid overlay */
.cta-banner::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,102,255,0.13) 0%, transparent 65%),
    linear-gradient(rgba(0,102,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

/* Help item — icon shifts on hover */
.help-item:hover .help-item-icon {
  background: linear-gradient(135deg, rgba(0,102,255,0.18), rgba(0,207,255,0.08));
  border-color: rgba(0,207,255,0.3); color: var(--cyan);
}

/* Insight thumb — circuit mini grid */
.insight-thumb::before {
  background:
    linear-gradient(rgba(0,102,255,0.07), rgba(0,207,255,0.04)),
    linear-gradient(rgba(0,102,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.04) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}

/* Navbar — EPSOW wordmark */
.nav-brand-text {
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0.1em; color: #ffffff;
  margin-left: 4px; margin-top: 0;
  line-height: 1;
  transition: color 0.3s ease;
}
#navbar.scrolled .nav-brand-text { color: #ffffff; }
.nav-brand-text--footer {
  display: inline-block;
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0.1em; color: #ffffff;
  margin-left: 4px; vertical-align: middle;
}

/* Footer — social links */
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; transition: var(--ease);
}
.footer-social a:hover {
  background: rgba(0,102,255,0.2); border-color: rgba(0,102,255,0.4);
  color: var(--accent); transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-platforms { margin-top: 20px; }
.footer-platforms-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(200,215,235,0.45); margin-bottom: 12px;
}
.footer-platforms-list { display: flex; flex-wrap: wrap; gap: 7px; }
.footer-platform-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(148,163,184,0.60);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 4px; padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  transition: background 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
.footer-platform-badge:hover {
  background: rgba(0,194,203,0.08);
  border-color: rgba(0,194,203,0.35);
  color: rgba(200,230,232,0.90);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,194,203,0.12);
}
.footer-platform-badge svg {
  width: 13px; height: 13px; flex-shrink: 0;
  color: #00c2cb;
  transition: filter 0.22s ease;
}
.footer-platform-badge:hover svg {
  filter: drop-shadow(0 0 5px rgba(0,194,203,0.85));
}

/* Step number — enhanced glow */
.step-number { box-shadow: 0 0 32px rgba(0,102,255,0.3), 0 0 64px rgba(0,102,255,0.08); }
.pillar-num  { box-shadow: 0 0 24px rgba(0,102,255,0.2); }

/* Case outcome — cyan text */
.case-outcome .case-section-content { color: var(--cyan); font-weight: 600; }

/* Page hero — deeper dark */
.page-hero { background: linear-gradient(135deg, #020508 0%, #060b18 50%, #0a1830 100%); }

/* ── Custom Cursor (desktop only) ────────────────────────── */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, .btn, label, select, input, textarea { cursor: none; }

  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: left, top;
    transition: width 0.15s ease, height 0.15s ease, background 0.15s ease;
  }
  .cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(0, 102, 255, 0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    will-change: left, top;
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
  }
  .cursor-dot.is-hovering { width: 12px; height: 12px; background: var(--cyan); }
  .cursor-ring.is-hovering { width: 50px; height: 50px; border-color: rgba(0, 207, 255, 0.7); }
}

/* ── Hero Stats Bar ───────────────────────────────────────── */
.hero-stats {
  display: flex; align-items: center;
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-stat { flex: 1; text-align: center; }
.hero-stat-divider {
  width: 1px; height: 40px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.stat-num {
  font-family: var(--font-head);
  font-size: 1.75rem; font-weight: 700;
  color: #e2e8f0; line-height: 1;
  margin-bottom: 6px; letter-spacing: -0.02em;
}
.stat-unit { font-size: 0.7em; font-weight: 500; }
.stat-label {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #4a6080;
}

/* ── Glitch effect on hero headline ──────────────────────── */
@keyframes glitchFlicker {
  0%,  100% { filter: drop-shadow(0 0 22px rgba(0,160,255,0.45)); transform: translate(0); }
  15%        { filter: drop-shadow(0 0 14px rgba(0,160,255,0.6)) drop-shadow(4px 0 rgba(255,0,80,0.5));  transform: translate(-4px, 1px); }
  30%        { filter: drop-shadow(0 0 14px rgba(0,160,255,0.6)) drop-shadow(-3px 0 rgba(0,255,180,0.5)); transform: translate(3px, -1px); }
  50%        { filter: drop-shadow(0 0 22px rgba(0,160,255,0.45)); transform: translate(-2px, 2px); }
  70%        { filter: drop-shadow(0 0 14px rgba(0,160,255,0.6)) drop-shadow(3px 0 rgba(255,0,80,0.4));  transform: translate(2px, -1px); }
  85%        { filter: drop-shadow(0 0 22px rgba(0,160,255,0.45)); transform: translate(0); }
}
.hero-content h1 em.is-glitching { animation: glitchFlicker 0.5s steps(2) forwards; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .caps-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-mission { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  /* Solutions grid: 2 columns on tablet — hide timeline spine */
  .sol-flow-track { display: none; }
  .sol-flow-wrap  { padding-top: 0; }
  .sol-marker     { display: none; }
  .sol-tile       { padding-top: 26px; }
  .sol-pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-stack-services { display: none; }
  .sol-diff-grid { grid-template-columns: 1fr; }
  /* Industries grid: 2 columns on tablet */
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  /* Case studies: stack panels on tablet */
  .cs-card { flex-direction: column; }
  .cs-card-left { width: 100%; flex-direction: row; justify-content: space-between; align-items: flex-start; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 24px 28px; text-align: left; }
  .cs-card-right { padding: 24px 28px; }
  /* Fix: cs-pull overflows in flex-row — let it size to content */
  .cs-card-left .cs-pull { width: auto; flex-shrink: 1; padding-top: 0; border-top: none; border-left: 2px solid var(--ind-color, var(--accent)); padding-left: 16px; text-align: right; }
  /* Approach: 2 columns on tablet — hide timeline spine */
  .phase-flow-track { display: none; }
  .phase-flow-wrap  { padding-top: 0; }
  .phase-marker     { display: none; }
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
  .phase-card { padding: 28px 20px; }
}

@media (max-width: 900px) {
  /* Capabilities: intermediate 3-column step before tablet */
  .caps-grid { grid-template-columns: repeat(3, 1fr); }
  /* Solutions pillars: 2 columns before mobile collapse */
  .sol-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Solutions tile expand/collapse (mobile only) ── */
@media (max-width: 768px) {
  .sol-tile--collapsed .sol-tile-desc,
  .sol-tile--collapsed .sol-tile-services { display: none; }

  /* Tile icon: shrink SVG so text isn't dwarfed */
  .sol-tile-bg { width: 120px; height: 120px; align-self: center; }
  /* Tile text: make title and tag readable */
  .sol-tile h3 { font-size: 1.4rem; }
  .sol-tile .section-tag { font-size: 0.78rem; }

  .sol-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    background: none;
    border: 1px solid rgba(0,102,255,0.3);
    border-radius: 6px;
    padding: 7px 14px;
    color: #3d8fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: var(--font-head, 'Inter', sans-serif);
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .sol-expand-btn svg {
    width: 13px; height: 13px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .sol-tile:not(.sol-tile--collapsed) .sol-expand-btn svg {
    transform: rotate(180deg);
  }
}
@media (min-width: 769px) {
  .sol-expand-btn { display: none; }
}

/* ── Case study expand/collapse (mobile only) ── */
@media (max-width: 768px) {
  .cs-card--collapsed .cs-section,
  .cs-card--collapsed .cs-outcome { display: none; }

  .cs-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    background: none;
    border: 1px solid rgba(0,102,255,0.3);
    border-radius: 6px;
    padding: 7px 14px;
    color: #3d8fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: var(--font-head, 'Inter', sans-serif);
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .cs-expand-btn svg {
    width: 13px; height: 13px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .cs-card:not(.cs-card--collapsed) .cs-expand-btn svg {
    transform: rotate(180deg);
  }
}
@media (min-width: 769px) {
  .cs-expand-btn { display: none; }
}

@media (max-width: 768px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual {
    display: flex;
    height: 220px;
    width: 100%;
    margin-top: 8px;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  /* Solutions: 1 column on mobile */
  .sol-flow-track { display: none; }
  .sol-flow-wrap  { padding-top: 0; }
  .sol-marker     { display: none; }
  .sol-tile       { padding-top: 26px; }
  .sol-pillar-grid { grid-template-columns: 1fr; }
  .sol-stack-left { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sol-stack-layer-label { min-width: unset; }
  .sol-hero-pillars { gap: 8px; }
  /* Industries: 1 column on mobile */
  .ind-grid { grid-template-columns: 1fr; }
  .ind-card { height: auto; min-height: 0; }
  /* Let content drive card height; padding-top creates the photo-above-text visual */
  .ind-card-content { position: relative; bottom: auto; padding: 160px 22px 24px; }
  /* Approach: mobile */
  .phase-grid { grid-template-columns: 1fr; gap: 14px; }
  .phase-card { padding: 22px 20px; }
  .phase-flow-track { display: none; }
  .phase-flow-wrap  { padding-top: 0; }
  .phase-marker     { display: none; }
  .help-grid { grid-template-columns: 1fr; }
  .help-visual { display: none; }
  .principles { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  /* Contact: commitment strip — stack vertically on mobile */
  .contact-commitment { grid-template-columns: 1fr; gap: 32px; }
  /* Why Epsow: stack to single column on mobile */
  .why-grid { grid-template-columns: 1fr; }
  /* Incident log: reduce height on mobile (override both min and max) */
  .incident-log { min-height: 0; max-height: 220px; }
  /* Incident terminal: hide timestamp + status on mobile for readability */
  .log-time { display: none; }
  .terminal-status { display: none; }
  .terminal-title { text-align: left; }
  .form-group.full { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom p { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .footer-sep { display: none; }

  /* Footer accordion */
  .footer-col h4 {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px; margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    user-select: none;
  }
  .footer-col-chevron { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.25s ease; }
  .footer-col.is-open .footer-col-chevron { transform: rotate(180deg); }
  .footer-col ul { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease; }
  .footer-col.is-open ul { max-height: 400px; opacity: 1; margin-top: 14px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile-open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(6,11,24,0.97);
    border-bottom: 1px solid rgba(0,102,255,0.15);
    padding: 20px 28px;
  }
  .nav-mobile-open .nav-links a { color: #94a3b8; }
  .app-ph-num { font-size: 3.5rem; }
  /* Homepage: pain cards 2 columns on tablet */
  .pain-cards { grid-template-columns: repeat(2, 1fr); }
  /* Homepage: outcomes 2 columns on mobile */
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .outcome-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .outcome-stat:last-child { border-bottom: none; }
  /* Commitment strip: stack vertically */
  .home-commit-strip { flex-direction: column; gap: 32px; }
  .home-commit-divider { display: none; }
  .home-commit-item { padding: 0; }

  /* Fix nowrap headings that overflow on mobile */
  .pain-type-headline { white-space: normal; }
  .pain-section-headline { white-space: normal; }
  .hero-content .section-tag { white-space: normal; font-size: 0.90rem; letter-spacing: 0.13em; margin-bottom: 18px; }
  .hero-content .section-tag::before { display: none; }

  /* ═══ APPROACH PAGE — MOBILE TIMELINE ═══════════════════════ */
  /* Dark background to match site theme */
  .apv-section { background: #060b18; padding: 48px 0; }

  /* Stack text col above, visual col below */
  .apv-split { grid-template-columns: 1fr; gap: 36px; }

  /* Text col: no right border, clean */
  .apv-text-col { border-right: none; padding-right: 0; }
  .apv-text-col h2 { color: #e2e8f0; }
  .apv-text-col p  { color: #94a3b8; }
  /* Hide the outcome items — they're verbose on mobile */
  .apv-outcomes { display: none; }

  /* Visual col: full width */
  .apv-visual-col { width: 100%; }

  /* Panel: strip all positioning */
  .apv-panel {
    position: static;
    min-height: unset;
    height: auto;
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Hide all the spider-web machinery */
  .apv-hub, .apv-svg,
  .apv-hub-pulse, .apv-hub-hex,
  .apv-hub-globe { display: none !important; }

  /* Rows col: vertical timeline, static */
  .apv-rows-col {
    position: static;
    left: unset;
    width: 100%;
    display: flex;
    flex-direction: column;
    counter-reset: apv-phase;
  }

  /* Each row: force visible (JS animation won't fire) */
  .apv-row {
    opacity: 1 !important;
    transform: none !important;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 102, 255, 0.30);
    border-radius: 10px;
    background: rgba(0, 20, 60, 0.50);
    box-shadow: 0 0 18px rgba(0, 102, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .apv-row:last-child { margin-bottom: 0; }

  /* Number circle */
  .apv-row::before {
    counter-increment: apv-phase;
    content: "0" counter(apv-phase);
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 102, 255, 0.40);
    color: #3d8fff;
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Card: strip desktop styling */
  .apv-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 1;
  }
  .apv-card::before { display: none; }
  .apv-card:hover { transform: none !important; }

  /* Hide original icon box — number circle replaces it */
  .apv-card-icon { display: none; }

  /* Phase name: large and white */
  .apv-card-name { font-size: 1.1rem !important; color: #e2e8f0; margin-bottom: 8px; }

  /* Tags: dark-theme pill style */
  .apv-card-tags span {
    color: rgba(100, 181, 246, 0.9) !important;
    background: rgba(0, 102, 255, 0.10) !important;
    border-color: rgba(0, 102, 255, 0.25) !important;
    font-size: 0.70rem;
  }
  /* ═══════════════════════════════════════════════════════════ */
  /* H1: big, punchy, double the original */
  .hero-content h1 { font-size: 3.9rem; line-height: 1.08; margin-bottom: 36px; }
  /* Hide paragraph — H1 says it all on mobile */
  .hero-content .hero-desc { display: none; }
  /* Single CTA: Explore Solutions only */
  .hero-content .btn-group { gap: 12px; justify-content: center; margin-bottom: 0; }
  .hero-content .btn-group .btn-primary { padding: 10px 22px; font-size: 0.82rem; }
  .hero-content .btn-group .btn-ghost   { display: none; }

  /* Hero stats: stack vertically, hide dividers */
  .hero-stats { flex-direction: column; gap: 20px; padding-top: 24px; margin-top: 28px; }
  .hero-stat-divider { display: none; }
  .hero-stat-num { font-size: 1.5rem; }

  /* Pain stats strip: stack on mobile */
  .pain-stats-strip { padding: 48px 0; }
  .pain-stats-grid { flex-direction: column; align-items: center; gap: 32px; }
  .pain-stat-item { padding: 0 20px; width: 100%; max-width: 280px; }
  .pain-stat-divider { display: none; }

  /* Logo: shrink on mobile */
  .logo-img { height: 52px; }

  /* Lottie icons: scale down on mobile */
  .deliver-lottie { width: 100px; height: 100px; }
  #lottie-target  { width: 70px; height: 70px; }
  #lottie-security { width: 85px; height: 85px; }
  #lottie-globe   { width: 100px; height: 100px; }
  .deliver-icon   { height: 100px; }

  /* Deliver grid: hide side dividers when stacked */
  .deliver-item:not(:last-child)::after { display: none; }

  /* ── Disable hover lift on touch — prevents tap-jump-snap bug ── */
  .cs-card,
  .sol-tile,
  .ind-card,
  .card,
  .cap-card,
  .insight-card,
  .why-card {
    transition: none !important;
    touch-action: pan-y;
  }
  .cs-card:hover,
  .sol-tile:hover,
  .sol-tile.card-visible:hover,
  .ind-card:hover,
  .ind-card.card-visible:hover,
  .card:hover,
  .cap-card:hover,
  .insight-card:hover,
  .why-card:hover { transform: none !important; box-shadow: none !important; }
  .why-card:hover .why-card-bg { transform: none !important; }
  .cap-card--photo:hover .cap-card-photo img { transform: none !important; }
}

/* ══════════════════════════════════════
   WHY EPSOW SECTION
══════════════════════════════════════ */
.why-epsow { background: var(--dark-bg) !important; }
.why-epsow .section-header h2 { color: #e2e8f0; }
.why-epsow .section-header p  { color: rgba(148,163,184,0.80); }
.why-epsow .section-tag       { color: var(--cyan); }
.why-epsow .section-tag::before { background: var(--cyan); }

/* ── Built to Deliver ───────────────────────────────────── */
.built-deliver {
  background:
    radial-gradient(ellipse 80% 55% at 50% 60%, rgba(0,60,140,0.22) 0%, transparent 65%),
    linear-gradient(160deg, #06101f 0%, #050c1a 55%, #071120 100%);
  padding: 96px 0;
  position: relative;
}
.built-deliver .section-tag       { color: var(--cyan, #00e5ff); }
.built-deliver .section-tag::before { background: var(--cyan, #00e5ff); }
.built-deliver .section-header    { margin-bottom: 40px; max-width: 100%; }
.built-deliver .section-header h2 { color: #e2e8f0; }
.built-deliver .section-header p  { color: rgba(148,163,184,0.80); max-width: 680px; margin-left: auto; margin-right: auto; }
.deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.deliver-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.deliver-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 8%;
  height: 84%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,229,255,0.18) 25%,
    rgba(0,229,255,0.18) 75%,
    transparent 100%
  );
}
.deliver-icon {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}
.deliver-item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.deliver-item p {
  font-size: 0.88rem;
  color: rgba(148,163,184,0.80);
  line-height: 1.7;
  margin-bottom: 16px;
}
.deliver-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deliver-bullets li {
  font-size: 0.9rem;
  color: rgba(226,232,240,0.85);
  line-height: 1.4;
  position: relative;
  padding-left: 18px;
  text-align: left;
}
.deliver-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--cyan, #00e5ff);
  font-size: 0.75rem;
  line-height: 1.6;
  opacity: 0.6;
}
.deliver-proof {
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0,229,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.deliver-proof-label {
  font-size: 0.63rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #f59e0b;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.deliver-proof-stat {
  font-size: 0.83rem;
  color: rgba(226,232,240,0.80);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
}
.deliver-cta {
  text-align: center;
  margin-top: 52px;
}
.btn-outline-cyan {
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.45);
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
}
.btn-outline-cyan:hover {
  background: rgba(245,158,11,0.08);
  border-color: #f59e0b;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .deliver-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Deliver icons */
.deliver-ph-icon {
  font-size: 52px;
  color: var(--cyan, #00e5ff);
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: drop-shadow(0 0 10px rgba(0,229,255,0.30));
  display: block;
}
.deliver-item:hover .deliver-ph-icon {
  transform: scale(1.12) translateY(-3px);
  filter: drop-shadow(0 0 18px rgba(0,229,255,0.60));
}
.deliver-lottie {
  width: 150px;
  height: 150px;
}
#lottie-target {
  width: 96px;
  height: 96px;
}
#lottie-security {
  width: 120px;
  height: 120px;
}
#lottie-globe {
  width: 150px;
  height: 150px;
  filter: brightness(1.4) drop-shadow(0 0 6px rgba(0,229,255,0.6));
}
/* Shield: check draws in, then pulses */
.shield-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: shield-draw 0.7s ease 1.2s forwards, shield-pulse 3s ease 2s infinite;
}
@keyframes shield-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes shield-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
/* Globe: ellipse spins */
.globe-ellipse {
  transform-origin: 32px 32px;
  animation: globe-spin 6s linear infinite;
}
@keyframes globe-spin {
  from { transform: scaleX(1); }
  50%  { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Target: rings pulse outward */
.target-ring-outer {
  animation: target-pulse 2.5s ease-in-out infinite;
}
.target-ring-mid {
  animation: target-pulse 2.5s ease-in-out 0.4s infinite;
}
@keyframes target-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
/* ── Incident Feed Section ──────────────────────────────── */
.incident-section {
  background: #ffffff;
  padding: 96px 0;
}
.pain-section-headline {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  white-space: nowrap;
  color: var(--text-dark, #0f172a);
}
.pain-section-sub {
  font-size: 1rem;
  color: #64748b;
  margin-top: 12px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.incident-terminal {
  max-width: 820px;
  margin: 52px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(239,68,68,0.22);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.06),
              0 24px 48px rgba(0,0,0,0.38),
              0 0 80px rgba(239,68,68,0.07);
}
.incident-terminal-header {
  background: #0d1525;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(239,68,68,0.14);
}
.terminal-dots { display: flex; gap: 7px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red    { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green  { background: #22c55e; }
.terminal-title {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: rgba(148,163,184,0.50);
  letter-spacing: 0.12em;
  flex: 1;
  text-align: center;
}
.terminal-status {
  font-family: 'Courier New', monospace;
  font-size: 0.70rem;
  color: #ef4444;
  letter-spacing: 0.10em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.terminal-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}
.incident-log {
  background: #060d1c;
  padding: 28px 28px 24px;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  line-height: 2;
  position: relative;
}
.log-entry {
  display: flex;
  gap: 16px;
  opacity: 0;
  overflow: hidden;
  animation: log-appear 0.25s ease forwards;
}
@keyframes log-appear {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.log-time  { color: rgba(148,163,184,0.40); white-space: nowrap; flex-shrink: 0; }
.log-level { white-space: nowrap; flex-shrink: 0; font-weight: 700; min-width: 76px; }
.log-level--info     { color: #64748b; }
.log-level--warning  { color: #f59e0b; }
.log-level--alert    { color: #f97316; }
.log-level--critical { color: #ef4444; }
.log-msg             { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.log-msg--critical   { color: #fca5a5; }
.log-hi              { color: #f1f5f9; font-weight: 700; }
.log-hi--critical    { color: #ffffff; font-weight: 700; text-shadow: 0 0 10px rgba(239,68,68,0.6); }
.log-cursor {
  display: inline-block;
  width: 9px; height: 1.1em;
  background: #ef4444;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.75s step-end infinite;
}
.incident-closer {
  text-align: center;
  margin-top: 44px;
  font-size: 1.05rem;
  color: #f0960a;
  font-style: normal;
  letter-spacing: 0.01em;
}
.incident-cta {
  text-align: center;
  margin-top: 32px;
  padding-bottom: 8px;
}
.pain-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.pain-card:hover .pain-card-img { opacity: 0.35; }

/* ── Pain Stats Strip ───────────────────────────────────── */
.pain-stats-strip {
  background: #ffffff;
  padding: 72px 0;
  border-top: none;
}
.pain-stats-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}
.pain-stat-item {
  flex: 1;
  text-align: center;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pain-stat-num {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  color: #ef4444;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  height: clamp(2.8rem, 5vw, 4rem);
  display: flex;
  align-items: baseline;
}
.pain-stat-num.stat-landed {
  animation: stat-glow 0.6s ease forwards;
}
@keyframes stat-glow {
  0%   { text-shadow: 0 0 0 rgba(239,68,68,0); }
  40%  { text-shadow: 0 0 24px rgba(239,68,68,0.6), 0 0 48px rgba(239,68,68,0.3); }
  100% { text-shadow: 0 0 8px rgba(239,68,68,0.15); }
}
.pain-stat-unit {
  font-size: 0.6em;
  font-weight: 700;
}
.pain-stat-label {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 180px;
  margin: 0 auto;
}
.pain-stat-divider {
  width: 1px;
  height: 80px;
  background: rgba(0,0,0,0.10);
  flex-shrink: 0;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
}

/* ── Pain → Protection Divider ───────────────────────────── */
.pain-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 40px 0;
  background: #ffffff;
}
.pain-divider::before,
.pain-divider::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: rgba(0,0,0,0.10);
}
.pain-divider svg {
  width: 22px;
  height: 22px;
  color: rgba(0,0,0,0.25);
  flex-shrink: 0;
}

/* ── Pain Mirror ─────────────────────────────────────────── */
.pain-mirror {
  background: var(--bg-section-alt);
  padding: 88px 0;
}

/* ── Pain Mirror: Centered window layout ─────────────────── */
.pain-mirror--centered {
  background: #ffffff;
  padding: 96px 0;
}
.pain-centered-header {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 48px;
  overflow: visible;
}
.pain-mirror-desc {
  font-size: 1rem;
  color: #64748b;
  margin-top: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.pain-type-headline {
  font-size: clamp(1.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 16px;
  white-space: nowrap;
}
.type-rotating {
  color: var(--accent);
  font-weight: 700;
  transition: color 0.3s ease;
}
.type-rotating.type-static {
  color: var(--text-primary);
}
.type-cursor {
  display: inline-block;
  color: var(--accent);
  font-weight: 300;
  margin-left: 1px;
  animation: cursor-blink 0.75s step-end infinite;
}
.type-cursor.type-cursor-hidden {
  opacity: 0;
  animation: none;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.pain-video-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #060b18;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.18),
    0 8px 24px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,102,255,0.06);
}
.pain-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pain-video-frame--wide {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Pain Mirror: Video version ──────────────────────────── */
.pain-mirror--video {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  overflow: hidden;
  background: var(--dark-bg);
}
.pain-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pain-video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  pointer-events: none;
}
.pain-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,11,24,0.55) 0%,
    rgba(6,11,24,0.45) 50%,
    rgba(6,11,24,0.75) 100%
  );
  z-index: 1;
}
.pain-video-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.pain-mirror--video .section-tag { justify-content: center; }
.pain-mirror--video h2 {
  color: #e2e8f0;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.pain-mirror--video .pain-mirror-sub {
  color: rgba(148,163,184,0.80);
  font-size: 1.05rem;
  margin-top: 12px;
}
.pain-mirror-header {
  text-align: center;
  margin-bottom: 52px;
}
.pain-mirror-header .section-tag { justify-content: center; }
.pain-mirror-header h2 {
  color: var(--text-primary);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  margin-top: 14px;
}
.pain-mirror-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 10px;
}

/* ── Pain card ambient animations (A + C + D) ────────────── */

/* Option D: Per-card unique fx layer */
.pain-card-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Vendors: fragmentation lines flash */
.pain-card--vendors .pain-card-fx {
  background:
    linear-gradient(90deg, transparent 33.1%, rgba(245,158,11,0.08) 33.1%, rgba(245,158,11,0.08) 33.7%, transparent 33.7%),
    linear-gradient(90deg, transparent 66.1%, rgba(245,158,11,0.05) 66.1%, rgba(245,158,11,0.05) 66.7%, transparent 66.7%);
  animation: vendors-frag 8s ease-in-out infinite;
}
@keyframes vendors-frag {
  0%, 44%, 62%, 100% { opacity: 0; }
  48%, 58%           { opacity: 1; }
}

/* Backups: flickering data bars */
.pain-card--backups .pain-card-fx {
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 15px,
    rgba(245,158,11,0.055) 15px, rgba(245,158,11,0.055) 16px
  );
  animation: backup-flicker 3.5s steps(3) infinite;
}
@keyframes backup-flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.08; }
  40%  { opacity: 0.85; }
  65%  { opacity: 0.12; }
  85%  { opacity: 0.75; }
  100% { opacity: 1; }
}

/* Phishing: red danger pulse */
.pain-card--phishing .pain-card-fx {
  background: radial-gradient(ellipse at 50% 38%, rgba(239,68,68,0.20) 0%, transparent 65%);
  animation: phishing-warn 2.6s ease-in-out infinite;
}
@keyframes phishing-warn {
  0%, 100% { opacity: 0.18; transform: scale(0.90); }
  50%       { opacity: 1;    transform: scale(1.10); }
}

/* Passwords: amber glow from icon */
.pain-card--passwords .pain-card-fx {
  background: radial-gradient(ellipse at 28% 16%, rgba(245,158,11,0.16) 0%, transparent 55%);
  animation: password-glow 3.5s ease-in-out infinite;
}
@keyframes password-glow {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

/* Network: radar sweep from corner */
.pain-card--network .pain-card-fx {
  width: 260%; height: 260%;
  top: -80%; left: -80%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(245,158,11,0.07) 22deg, transparent 44deg);
  animation: radar-rotate 5s linear infinite;
}
@keyframes radar-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* IT company left: slow dissolve drift */
.pain-card--exit .pain-card-fx {
  background: linear-gradient(90deg, rgba(245,158,11,0.09) 0%, transparent 65%);
  animation: exit-dissolve 5s ease-in-out infinite;
}
@keyframes exit-dissolve {
  0%   { opacity: 0; transform: translateX(-10px); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}

/* Keep content above fx layers */
.pain-card-icon,
.pain-card h3,
.pain-card p { position: relative; z-index: 2; }

/* ── Pain card icon hover animations ────────────────────── */

/* Phishing: hook drops into envelope, envelope shakes red */
.phish-hook {
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.pain-card--phishing:hover .phish-hook {
  transform: translateY(6px);
}
.phish-envelope {
  transition: stroke 0.3s ease 0.25s;
}
.pain-card--phishing:hover .phish-envelope {
  stroke: #ef4444;
  animation: envelope-shake 0.45s ease 0.3s both;
}
@keyframes envelope-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%       { transform: translateX(-2px) rotate(-0.8deg); }
  50%       { transform: translateX(2px)  rotate(0.8deg); }
  80%       { transform: translateX(-1px) rotate(-0.4deg); }
}

/* Backups: database fades out, red X scales in */
.db-all {
  transition: opacity 0.4s ease;
}
.pain-card--backups:hover .db-all {
  opacity: 0.25;
}
.db-x {
  opacity: 0;
  stroke: #ef4444;
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.35s ease 0.2s,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.pain-card--backups:hover .db-x {
  opacity: 1;
  transform: scale(1);
}

/* Exit: shackle swings open, lock turns red */
.lock-shackle {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              stroke 0.3s ease 0.1s;
}
.pain-card--exit:hover .lock-shackle {
  transform: rotate(-50deg);
  stroke: #ef4444;
}
.lock-body {
  transition: stroke 0.3s ease 0.2s;
}
.lock-dot {
  transition: fill 0.3s ease 0.2s;
}
.pain-card--exit:hover .lock-body { stroke: #ef4444; }
.pain-card--exit:hover .lock-dot  { fill: #ef4444; }

/* Pain card entrance — more dramatic than default reveal */
.pain-card.reveal {
  transform: translateY(52px) scale(0.95);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.pain-card.reveal.visible {
  transform: translateY(0) scale(1);
}
.pain-card.reveal-delay-1 { transition-delay: 0.08s; }
.pain-card.reveal-delay-2 { transition-delay: 0.20s; }
.pain-card.reveal-delay-3 { transition-delay: 0.32s; }
.pain-card.reveal-delay-4 { transition-delay: 0.44s; }
.pain-card.reveal-delay-5 { transition-delay: 0.56s; }
.pain-card.reveal-delay-6 { transition-delay: 0.68s; }

/* Pain cards — dark treatment */
.pain-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.pain-card {
  background: #071020;
  border: 1px solid rgba(0,102,255,0.14);
  border-top: 2px solid #f59e0b;
  border-radius: var(--radius);
  padding: 40px 28px 36px;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,0.55);
  border-top-color: #f59e0b;
  box-shadow: 0 20px 48px rgba(0,0,0,0.50),
              0 0 0 1px rgba(245,158,11,0.30),
              0 0 40px rgba(245,158,11,0.18),
              inset 0 0 20px rgba(245,158,11,0.04);
}
.pain-card-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.pain-card-icon svg {
  width: 40px;
  height: 40px;
  stroke: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245,158,11,0.70));
}
/* Per-card icon pulse animations */
.pain-card--phishing .pain-card-icon {
  animation: phishing-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes phishing-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0),  0 0 12px rgba(245,158,11,0.10); }
  50%       { box-shadow: 0 0 0 12px rgba(239,68,68,0.0), 0 0 32px rgba(239,68,68,0.45); }
}
.pain-card--phishing .pain-card-icon svg { stroke: #ef4444; filter: drop-shadow(0 0 8px rgba(239,68,68,0.80)); }
.pain-card--backups .pain-card-icon {
  animation: backups-icon-flicker 3s steps(2) infinite;
}
@keyframes backups-icon-flicker {
  0%   { opacity: 1;    box-shadow: 0 0 20px rgba(245,158,11,0.30); }
  25%  { opacity: 0.35; box-shadow: none; }
  50%  { opacity: 1;    box-shadow: 0 0 20px rgba(245,158,11,0.30); }
  75%  { opacity: 0.55; box-shadow: none; }
  100% { opacity: 1;    box-shadow: 0 0 20px rgba(245,158,11,0.30); }
}
.pain-card--exit .pain-card-icon {
  animation: exit-icon-pulse 4s ease-in-out infinite;
}
@keyframes exit-icon-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.15); }
  50%       { box-shadow: 0 0 30px rgba(245,158,11,0.50); }
}
.pain-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pain-card p {
  font-size: 0.875rem;
  color: rgba(148,163,184,0.80);
  line-height: 1.65;
  margin: 0;
}

/* ── Pain card icon animations ───────────────────────────── */
@keyframes icon-shake {
  0%, 100% { transform: rotate(0) translateX(0); }
  20%       { transform: rotate(-8deg) translateX(-2px); }
  40%       { transform: rotate(8deg)  translateX(2px); }
  65%       { transform: rotate(-4deg); }
  80%       { transform: rotate(3deg); }
}
@keyframes icon-flicker {
  0%, 100% { opacity: 1; }
  15%       { opacity: 0.15; }
  30%       { opacity: 0.90; }
  50%       { opacity: 0.10; }
  70%       { opacity: 0.85; }
  88%       { opacity: 0.25; }
}
@keyframes icon-flash-danger {
  0%        { stroke: #f59e0b; filter: drop-shadow(0 0 5px rgba(245,158,11,0.55)); }
  30%       { stroke: #ef4444; filter: drop-shadow(0 0 12px rgba(239,68,68,1)); }
  60%       { stroke: #ef4444; filter: drop-shadow(0 0 8px  rgba(239,68,68,0.75)); }
  100%      { stroke: #f59e0b; filter: drop-shadow(0 0 5px rgba(245,158,11,0.55)); }
}
@keyframes icon-box-flash-red {
  0%        { background: rgba(245,158,11,0.08); }
  30%       { background: rgba(239,68,68,0.20); }
  100%      { background: rgba(245,158,11,0.08); }
}
@keyframes icon-pulse-slow {
  0%, 100%  { transform: scale(1);    filter: drop-shadow(0 0 5px  rgba(245,158,11,0.55)); }
  50%       { transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(245,158,11,1)); }
}
@keyframes icon-blink {
  0%, 100%  { opacity: 1; }
  35%       { opacity: 0; }
  65%       { opacity: 0; }
}
@keyframes icon-exit {
  0%        { transform: translateX(0);   opacity: 1; }
  45%       { transform: translateX(10px); opacity: 0; }
  46%       { transform: translateX(-8px); opacity: 0; }
  100%      { transform: translateX(0);   opacity: 1; }
}

/* Per-card hover effects */
.pain-card--vendors:hover   .pain-card-icon svg { animation: icon-shake        0.45s ease; }
.pain-card--backups:hover   .pain-card-icon svg { animation: icon-flicker      0.70s ease; }
.pain-card--phishing:hover  .pain-card-icon svg { animation: icon-flash-danger 0.65s ease forwards; }
.pain-card--phishing:hover  .pain-card-icon     { animation: icon-box-flash-red 0.65s ease forwards; }
.pain-card--phishing:hover {
  border-color: rgba(239,68,68,0.55);
  border-top-color: #ef4444;
  box-shadow: 0 20px 48px rgba(0,0,0,0.50),
              0 0 0 1px rgba(239,68,68,0.30),
              0 0 40px rgba(239,68,68,0.18),
              inset 0 0 20px rgba(239,68,68,0.04);
}
.pain-card--passwords:hover .pain-card-icon svg { animation: icon-pulse-slow   1.2s ease infinite; }
.pain-card--network:hover   .pain-card-icon svg { animation: icon-blink        0.9s ease 2; }
.pain-card--exit:hover      .pain-card-icon svg { animation: icon-exit         0.7s ease; }

/* ── Outcomes Strip ──────────────────────────────────────── */
.outcomes-strip {
  background: var(--dark-bg-2);
  border-top: 1px solid rgba(0,102,255,0.10);
  border-bottom: 1px solid rgba(0,102,255,0.10);
  padding: 80px 0 64px;
}
.outcomes-header {
  text-align: center;
  margin-bottom: 52px;
}
.outcomes-header .section-tag { justify-content: center; }
.outcomes-header h2 {
  color: #e2e8f0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin-top: 14px;
}
.outcomes-proof {
  font-size: 0.875rem;
  color: rgba(148,163,184,0.50);
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 0.01em;
}
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  overflow: hidden;
}
.outcome-stat {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid #f59e0b;
  transition: background 0.25s ease;
  cursor: default;
}
.outcome-stat:last-child { border-right: none; }
.outcome-stat:hover { background: rgba(245,158,11,0.04); }
.outcome-result {
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
  transition: text-shadow 0.25s ease;
}
.outcome-stat:hover .outcome-result {
  text-shadow: 0 0 28px rgba(0,102,255,0.55);
}
.outcome-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
  margin-bottom: 10px;
}
.outcome-context {
  font-size: 0.775rem;
  color: rgba(148,163,184,0.50);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.outcomes-link {
  text-align: center;
  margin-top: 48px;
}
.outcomes-link a {
  font-size: 0.925rem;
  font-weight: 600;
  color: #f59e0b;
  text-decoration: none;
  border-bottom: 1px solid rgba(245,158,11,0.35);
  padding-bottom: 3px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}
.outcomes-link a:hover {
  color: #fbbf24;
  border-color: rgba(245,158,11,0.70);
  text-shadow: 0 0 18px rgba(245,158,11,0.45);
}

/* ── Home Commitment + CTA ───────────────────────────────── */
.home-commit {
  background: #ffffff;
  padding: 80px 0;
  text-align: center;
}
.home-commit-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 0 auto 48px;
}
.home-commit-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 32px;
}
.home-commit-divider {
  width: 1px;
  background: rgba(0,102,255,0.12);
  align-self: stretch;
  flex-shrink: 0;
}
.home-commit-num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.home-commit-body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.home-commit-body p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.home-commit-cta { margin-top: 0; }

/* ── Why Epsow cards ─────────────────────────────────────── */
.why-card {
  position: relative;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
}
.why-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.why-card:hover .why-card-bg { transform: scale(1.06); }
.why-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,12,32,0.92) 0%, rgba(4,12,32,0.40) 50%, rgba(4,12,32,0.10) 100%);
  transition: var(--ease);
}
.why-card:hover .why-card-overlay {
  background: linear-gradient(to top, rgba(4,12,32,0.95) 0%, rgba(4,12,32,0.55) 60%, rgba(4,12,32,0.15) 100%);
}
.why-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
}
.why-card-icon {
  width: 48px; height: 48px;
  background: rgba(0,102,255,0.30);
  border: 1px solid rgba(0,170,255,0.60);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--cyan);
}
.why-card-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(0,207,255,0.60)); }
.why-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.why-card p  { font-size: 0.88rem; color: rgba(255,255,255,0.72); line-height: 1.6; margin: 0; }
.why-card-proof {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.why-proof-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 5px;
}
.why-proof-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.trust-strip {
  display: flex;
  border: 1px solid rgba(0,100,255,0.14);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.trust-item {
  flex: 1;
  padding: 28px 16px;
  text-align: center;
  border-right: 1px solid rgba(0,100,255,0.10);
}
.trust-item:last-child { border-right: none; }
.trust-num {
  font-family: var(--font-head);
  font-size: 1.75rem; font-weight: 800;
  color: var(--accent); line-height: 1;
  margin-bottom: 6px;
}
.trust-label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { height: 380px; }
}

/* ══════════════════════════════════════
   PROCESS STEPS
══════════════════════════════════════ */
.process-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 48px;
}
.process-step {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(0,102,255,0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--ease);
  box-shadow: 0 4px 32px rgba(0,102,255,0.18), 0 1px 4px rgba(0,0,0,0.08);
}
.process-step:hover {
  border-color: rgba(0,102,255,0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,102,255,0.28), 0 2px 8px rgba(0,0,0,0.10);
}
.process-photo {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-section-alt);
}
.process-body {
  padding: 28px 24px;
  text-align: center;
}
.process-icon {
  width: 56px; height: 56px;
  background: var(--accent-dim);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}
.process-icon svg { width: 28px; height: 28px; }
.process-step h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.process-step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
.process-arrow {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 60px;
}
.process-arrow svg { width: 28px; height: 28px; }
.process-cta {
  padding: 36px 48px;
  background: linear-gradient(135deg, var(--dark-bg) 0%, #0a1830 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.process-cta p {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
@media (max-width: 900px) {
  .process-steps { flex-direction: column; gap: 16px; }
  .process-arrow { transform: rotate(90deg); width: 100%; margin-bottom: 0; }
  .process-cta { flex-direction: column; text-align: center; }
  .process-cta p { text-align: center; }
}
@media (max-width: 600px) {
  .trust-strip { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(0,100,255,0.13); }
  .trust-item:last-child { border-bottom: none; }
}

/* ── Late-cascade mobile overrides (must come after all component styles) ── */
@media (max-width: 768px) {
  /* Nowrap headings — override original rules that come earlier in cascade */
  .pain-section-headline { white-space: normal !important; overflow-wrap: break-word; }
  .pain-type-headline { white-space: normal !important; overflow-wrap: break-word; }
  .hero-promise-line { white-space: normal !important; font-size: clamp(1.4rem, 5vw, 1.8rem); }

  /* Prevent any element from causing horizontal scroll */
  body { overflow-x: hidden; }
  section, .container { max-width: 100%; overflow-x: hidden; }

  /* Pain stats strip: stack on mobile */
  .pain-stats-strip { padding: 40px 0; }
  .pain-stats-grid { flex-direction: column; align-items: center; gap: 28px; }
  .pain-stat-item { padding: 0 16px; width: 100%; max-width: 260px; }
  .pain-stat-divider { display: none; }

  /* Pain divider bar */
  .pain-divider { padding: 8px 16px 0; }

  /* Custom select dropdown (replaces native picker on mobile) */
  .custom-select-wrap { position: relative; }
  .custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-primary);
    font-size: 0.95rem; font-family: var(--font-body);
    cursor: pointer; text-align: left; transition: border-color 0.2s;
  }
  .custom-select-trigger.is-placeholder { color: #94a3b8; }
  .custom-select-trigger svg { flex-shrink: 0; transition: transform 0.2s; }
  .custom-select-wrap.is-open .custom-select-trigger { border-color: var(--accent); }
  .custom-select-wrap.is-open .custom-select-trigger svg { transform: rotate(180deg); }
  .custom-select-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13); z-index: 200; overflow: hidden;
  }
  .custom-select-wrap.is-open .custom-select-menu { display: block; }
  .custom-select-item {
    padding: 13px 16px; font-size: 0.9rem; color: var(--text-primary);
    cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .custom-select-item:last-child { border-bottom: none; }
  .custom-select-item:active, .custom-select-item.is-selected {
    background: var(--bg-secondary); color: var(--accent); font-weight: 600;
  }

  /* About close CTA: tighten font + padding on mobile */
  .about-close { padding: 52px 0 64px; }
  .about-close h2 { font-size: 1.2rem; margin-bottom: 28px; }

  /* Contact page layout — gap causes 1fr to overflow on mobile */
  .contact-layout { gap: 40px; }
  .contact-info, .contact-form-wrapper { width: 100%; max-width: 100%; min-width: 0; }
  .contact-form-wrapper { padding: 28px 20px; }
}