/* ==========================================================================
   iSada COMPONENTS — nav, footer, mega-menu, drawer, reveal animations
   ========================================================================== */

/* ========== NAVIGATION ========== */
.nav-root {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: rgba(248, 250, 252, 0.80);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: all 240ms var(--ease-default);
}
.nav-root.scrolled {
  background: rgba(248, 250, 252, 0.92);
  border-bottom-color: var(--neutral-200);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .nav-root,
.hero ~ .nav-root,
body:has(.hero:first-of-type) .nav-root:not(.scrolled) {
  background: transparent;
  border-bottom: none;
}
.nav-root.on-dark:not(.scrolled) { background: transparent; }
.nav-root.on-dark:not(.scrolled) .nav-link,
.nav-root.on-dark:not(.scrolled) .nav-trigger,
.nav-root.on-dark:not(.scrolled) .nav-demo,
.nav-root.on-dark:not(.scrolled) .nav-login {
  color: rgba(255,255,255,0.9);
}
.nav-root.on-dark:not(.scrolled) .nav-link:hover { color: var(--accent-ai); }
.nav-root.on-dark:not(.scrolled) .nav-hamburger span { background: white; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.nav-logo img { height: 36px; width: auto; }
/* Logo visibility:
   - logo-bright.png (.logo-dark class) = white version for DARK backgrounds
   - logo.png (.logo-light class) = navy version for LIGHT backgrounds
   Default: show navy. On dark hero: show bright. After scroll: always navy.
*/
.nav-logo .logo-dark { display: none; }
.nav-logo .logo-light { display: block; }
.nav-root.on-dark:not(.scrolled) .nav-logo .logo-dark { display: block; }
.nav-root.on-dark:not(.scrolled) .nav-logo .logo-light { display: none; }
.nav-root.scrolled .nav-logo .logo-dark { display: none; }
.nav-root.scrolled .nav-logo .logo-light { display: block; }
[data-theme="dark"] .nav-root.scrolled { background: rgba(10, 31, 68, 0.95); }
[data-theme="dark"] .nav-root.scrolled .nav-logo .logo-light { display: none; }
[data-theme="dark"] .nav-root.scrolled .nav-logo .logo-dark { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.nav-item { position: relative; }
.nav-link, .nav-trigger {
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-700);
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 180ms;
  border-radius: 8px;
}
.nav-link:hover, .nav-trigger:hover { color: var(--accent-ai-dk); }
.nav-trigger svg { transition: transform 200ms; }
.has-dropdown:hover .nav-trigger svg { transform: rotate(180deg); }

/* Mega menu */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--neutral-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  padding: 28px;
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-default), transform 220ms var(--ease-default);
}
.nav-mega.industries-mega {
  grid-template-columns: repeat(3, 1fr);
  min-width: 540px;
}
.has-dropdown:hover .nav-mega,
.has-dropdown:focus-within .nav-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 100ms;
}
.nav-mega-col h5 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-ai-dk);
  margin-bottom: 12px;
  font-weight: 700;
}
.nav-mega-col a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 500;
  transition: color 180ms, padding 180ms;
}
.nav-mega-col a:hover {
  color: var(--accent-ai-dk);
  padding-left: 4px;
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-700);
  border: 1.5px solid var(--neutral-200);
  transition: all 200ms var(--ease-default);
}
.nav-demo:hover {
  border-color: var(--accent-ai);
  color: var(--accent-ai-dk);
  background: rgba(0,212,255,0.04);
}
.nav-demo svg { width: 14px; height: 14px; }
.nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-700);
  padding: 8px 12px;
  transition: color 180ms;
}
.nav-login:hover { color: var(--neutral-900); }

/* Hamburger (mobile only) */
.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--neutral-200);
}
.nav-hamburger span {
  width: 18px;
  height: 1.5px;
  background: var(--neutral-900);
  border-radius: 2px;
  transition: all 280ms var(--ease-default);
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(3px, -5px); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0; right: -100%;
  width: 90%;
  max-width: 380px;
  height: 100vh;
  background: var(--neutral-card);
  z-index: calc(var(--z-nav) + 1);
  padding: 80px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: right 320ms var(--ease-default);
  overflow-y: auto;
}
.nav-drawer.open { right: 0; }
.nav-drawer-logo { margin-bottom: 16px; }
.nav-drawer-logo img { height: 36px; }
.nav-drawer a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-100);
}
.nav-drawer a:last-of-type { border-bottom: none; }
.nav-drawer-login {
  margin-top: 16px;
  text-align: center;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-pill);
  padding: 12px !important;
}
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-nav);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
}
.nav-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ========== FOOTER ========== */
.footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 16px 0 24px;
  max-width: 320px;
}
.footer-logo img { height: 32px; }
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all 240ms var(--ease-default);
}
.footer-social a:hover {
  color: var(--accent-ai);
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.08);
  transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: white;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  padding: 6px 0;
  transition: color 180ms;
}
.footer-col a:hover { color: var(--accent-ai); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-badges .badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* ========== REVEAL ANIMATIONS ========== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 480ms var(--ease-default), transform 480ms var(--ease-default);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }

.section-head { margin-bottom: 32px; }
.section-head h2 { color: var(--neutral-900); }

/* ========== SCROLL PROGRESS BAR ========== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-ai), var(--accent-ai-dk));
  z-index: calc(var(--z-nav) + 10);
  width: 0%;
  transition: width 50ms linear;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* ========== MOBILE STICKY CTA BAR (per brief) ========== */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, var(--accent-ai), var(--accent-warm));
  padding: 12px 16px;
  z-index: var(--z-sticky);
  display: none;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-default);
  box-shadow: 0 -4px 20px rgba(10, 31, 68, 0.2);
}
.mobile-sticky-cta.visible {
  transform: translateY(0);
}
.mobile-sticky-cta .btn {
  width: 100%;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1.5px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ========== RESPONSIVE NAV ========== */
@media (max-width: 1024px) {
  .nav-links, .nav-demo, .nav-login { display: none; }
  .nav-actions .btn-primary { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .mobile-sticky-cta { display: block; }
}


/* ==========================================================================
   REUSABLE COMPONENT STYLES (extracted from homepage for subpage use)
   ========================================================================== */

/* Container utility */
.container-x { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .container-x { padding: 0 20px; } }

/* Background mesh (subtle gradient blobs) */
.bg-mesh-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(77, 124, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 30%, rgba(0, 212, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 60% at 60% 80%, rgba(34, 211, 238, 0.06), transparent 60%);
  pointer-events: none;
}
.bg-mesh-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,0.18), transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(77,124,255,0.10), transparent 60%);
  pointer-events: none;
}
.bg-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Section padding helper */
.sec-pad { padding: 96px 0; }
@media (max-width: 1024px) { .sec-pad { padding: 64px 0; } }
@media (max-width: 768px) { .sec-pad { padding: 48px 0; } }

/* ============================================================
   AUTO / FLUID SCALING — continuous, no breakpoint "jumps".
   The container width scales smoothly WITH the viewport via clamp():
   it stays 1200px up to ~1690px (laptops/tablets/phones unchanged),
   then grows fluidly with the screen, capped at 2280px on 4K/8K.
   Body/heading/caption text already scale via clamp() (brand.css), so
   the whole page auto-adapts to ANY resolution instead of snapping at
   fixed breakpoints. Section-scoped narrow blocks (.final-cta-dark 840,
   .legal-hero/.section-head 720) keep their width via higher specificity.
   ============================================================ */
html .container, html .container-x { max-width: clamp(1200px, 71vw, 2280px); }
@media (min-width: 1600px) {
  /* vertical rhythm grows fluidly too; seamless at 1600 (6vw = 96px there) */
  html .sec-pad { padding: clamp(96px, 6vw, 200px) 0; }
}

/* Section eyebrow + heading rhythm */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head.start { text-align: left; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 18px; color: var(--neutral-700); line-height: 1.5; }

/* Gradient italic accent on em (the signature) */
/* BASE = readable on LIGHT surfaces. Every stop clears WCAG AA-large (>=3.0) on
   the white/#F8FAFC content sections so heading accents never wash out.
   Dark surfaces (heroes, dark CTA, whole page in dark mode) re-brighten below. */
em.accent-coral, .accent-coral em {
  font-style: normal;
  background: linear-gradient(135deg, #0369A1 0%, #0E7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
em.accent-cyan, .accent-cyan em {
  font-style: normal;
  background: linear-gradient(135deg, #0E7490 0%, #0369A1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
em.accent-mix, .accent-mix em {
  font-style: normal;
  background: linear-gradient(135deg, #0369A1 0%, #3B6FE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* DARK MODE: the whole page is dark, so every accent goes bright aurora.
   (Hero overrides below use !important and also win in light mode.) */
[data-theme="dark"] em.accent-coral, [data-theme="dark"] .accent-coral em,
[data-theme="dark"] em.accent-cyan,  [data-theme="dark"] .accent-cyan em,
[data-theme="dark"] em.accent-mix,   [data-theme="dark"] .accent-mix em {
  background: linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: auroraText 7s ease-in-out infinite;
}
/* LIGHT MODE dark CTA band (final-cta-dark) — keep accents bright on the dark panel. */
.final-cta-dark em.accent-coral, .final-cta-dark .accent-coral em,
.final-cta-dark em.accent-cyan,  .final-cta-dark .accent-cyan em,
.final-cta-dark em.accent-mix,   .final-cta-dark .accent-mix em {
  background: linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: auroraText 7s ease-in-out infinite;
}

/* Bento card system (reusable) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 18px;
}
.bento-card {
  background: var(--neutral-card);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 280ms var(--ease-default);
  display: flex;
  flex-direction: column;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,212,255,0.06), transparent 50%);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.bento-card:hover { border-color: rgba(0,212,255,0.30); transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(10,31,68,0.12); }
.bento-card:hover::before { opacity: 1; }
.bento-card > * { position: relative; z-index: 1; }
.bento-large  { grid-column: span 4; grid-row: span 2; }
.bento-tall   { grid-column: span 2; grid-row: span 2; }
.bento-medium { grid-column: span 3; grid-row: span 1; }
.bento-small  { grid-column: span 3; grid-row: span 1; }
.bento-third  { grid-column: span 2; grid-row: span 1; }
.bento-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ai-dk);
  font-weight: 600;
  margin-bottom: 12px;
}
.bento-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--neutral-900);
  margin-bottom: 10px;
  line-height: 1.15;
}
.bento-card p { font-size: 15px; color: var(--neutral-700); line-height: 1.5; }
.bento-visual { margin-top: auto; padding-top: 20px; }
@media (max-width: 1100px) {
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
  .bento-large, .bento-tall { grid-column: span 4; grid-row: auto; }
  .bento-medium, .bento-small, .bento-third { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; gap: 14px; grid-auto-rows: auto; }
  .bento-large, .bento-tall, .bento-medium, .bento-small, .bento-third { grid-column: span 1; }
}

/* Voice waveform (animated bars, reusable) */
.voice-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 80px;
}
.voice-wave span {
  width: 3px;
  background: linear-gradient(to top, var(--accent-ai-dk), var(--accent-ai));
  border-radius: 2px;
  animation: vWave 1.4s ease-in-out infinite;
}
@keyframes vWave { 0%,100% { height: 8px; opacity: 0.5; } 50% { height: 60px; opacity: 1; } }
.voice-wave span:nth-child(1) { animation-delay: 0ms; }
.voice-wave span:nth-child(2) { animation-delay: 100ms; }
.voice-wave span:nth-child(3) { animation-delay: 200ms; }
.voice-wave span:nth-child(4) { animation-delay: 300ms; }
.voice-wave span:nth-child(5) { animation-delay: 200ms; }
.voice-wave span:nth-child(6) { animation-delay: 100ms; }
.voice-wave span:nth-child(7) { animation-delay: 50ms; }
.voice-wave span:nth-child(8) { animation-delay: 150ms; }
.voice-wave span:nth-child(9) { animation-delay: 250ms; }
.voice-wave span:nth-child(10) { animation-delay: 100ms; }

/* Mock product window (reusable) */
.mock-window {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(10,31,68,0.06), 0 12px 40px -8px rgba(10,31,68,0.18), 0 30px 80px -20px rgba(10,31,68,0.20);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(10,31,68,0.04);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #F7F7F4;
  border-bottom: 1px solid rgba(10,31,68,0.05);
}
.mock-dot { width: 11px; height: 11px; border-radius: 50%; }
.mock-dot.r { background: #FF6B5B; }
.mock-dot.y { background: #FFC15B; }
.mock-dot.g { background: #4FCC61; }
.mock-url {
  flex: 1;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-400);
  margin: 0 8px;
}
.mock-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.mock-body { padding: 24px; background: linear-gradient(180deg, #FAFAF7 0%, #FFFFFF 100%); }

/* Compare cards (reusable) */
.compare-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .compare-grid-2 { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; } }
.compare-card {
  background: var(--neutral-card);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
  padding: 36px;
}
.compare-card.bad { border-color: rgba(194,69,58,0.20); }
.compare-card.good { border-color: var(--accent-ai); box-shadow: 0 0 0 1px var(--accent-ai), 0 12px 40px -12px rgba(0,212,255,0.25); }
.compare-card-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 20px;
}
.compare-card.bad .compare-card-tag { background: rgba(194,69,58,0.10); color: var(--error); }
.compare-card.good .compare-card-tag { background: rgba(0,212,255,0.12); color: var(--accent-ai-dk); }
.compare-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -0.025em; color: var(--neutral-900); margin-bottom: 24px; line-height: 1.15; }
.compare-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--neutral-200); }
.compare-stat-row:last-child { border-bottom: 1px solid var(--neutral-200); }
.compare-stat-label { font-size: 14px; color: var(--neutral-700); }
.compare-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-card.bad .compare-stat-val { color: var(--error); }
.compare-card.good .compare-stat-val { color: var(--success); }

/* Stat block (reusable) */
.stat-block { padding: 24px 0; border-top: 1px solid var(--neutral-200); }
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-900);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-num.coral { color: var(--accent-warm); }
.stat-num.cyan  { color: var(--accent-ai-dk); }
.stat-num.gold  { color: var(--accent-gold); }
.stat-label { font-size: 14px; color: var(--neutral-700); line-height: 1.4; }

/* Final dark CTA section */
.final-cta-dark {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 72% 60% at 50% -5%, rgba(77,124,255,0.32), transparent 64%),
    radial-gradient(ellipse 55% 55% at 82% 105%, rgba(0,212,255,0.18), transparent 60%),
    linear-gradient(160deg, #0F172A 0%, #020617 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 30%, transparent 70%);
  opacity: 0.10;
  pointer-events: none;
}
.final-cta-dark > .container-x { position: relative; z-index: 1; max-width: 840px; }
.final-cta-dark h2 { color: white; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(40px, 5vw, 76px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 20px; }
.final-cta-dark p { color: rgba(255,255,255,0.78); font-size: 19px; margin-bottom: 36px; }
.final-cta-dark .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta-dark .btn-ghost { color: rgba(255,255,255,0.85); }

/* Page hero (light bg) */
.page-hero-light {
  padding: 140px 0 64px;
  background:
    radial-gradient(ellipse 48% 55% at 12% -12%, rgba(77,124,255,0.12), transparent 60%),
    radial-gradient(ellipse 42% 50% at 92% 8%, rgba(0,212,255,0.09), transparent 60%),
    linear-gradient(180deg, var(--neutral-bg) 0%, var(--neutral-card) 100%);
  position: relative;
  overflow: hidden;
}
.page-hero-light > .container-x { position: relative; z-index: 1; }
.page-hero-light h1 { max-width: 780px; margin-bottom: 24px; }
.page-hero-light p { max-width: 600px; color: var(--neutral-700); margin-bottom: 28px; }
.page-hero-light .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Page hero (dark bg) */
.page-hero-dark {
  padding: 140px 0 80px;
  background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.page-hero-dark > .container-x { position: relative; z-index: 1; }
.page-hero-dark h1 { color: white; max-width: 780px; margin-bottom: 24px; }
.page-hero-dark p { color: rgba(255,255,255,0.78); max-width: 600px; margin-bottom: 28px; }
.page-hero-dark .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Pricing card (reusable) */
.price-card {
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: all 240ms var(--ease-default);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(0,212,255,0.20); }
.price-card.featured {
  background: linear-gradient(180deg, var(--neutral-card) 0%, #EFF5FF 100%);
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1.5px var(--accent-blue), 0 18px 50px rgba(77,124,255,0.22);
  position: relative;
}
.price-card.featured::before {
  content: 'AVAILABLE NOW';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-cta-blue);
  color: white;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.price-card-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--neutral-400); font-weight: 600; margin-bottom: 14px; }
.price-card-amt { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; font-weight: 500; color: var(--neutral-900); line-height: 1; letter-spacing: -0.04em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.price-card-amt .currency { font-size: 24px; vertical-align: super; color: var(--neutral-400); margin-right: 2px; font-weight: 400; }
.price-card-amt .period { font-size: 16px; color: var(--neutral-400); font-weight: 400; margin-left: 4px; }
.price-card-tag { font-size: 14px; color: var(--neutral-700); margin-bottom: 24px; }
.price-card-feats { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.price-card-feats li { padding: 7px 0; font-size: 14px; color: var(--neutral-700); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.price-card-feats li svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* Workflow steps */
.workflow-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.workflow-stage .workflow-step {
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  z-index: 1;
  transition: all 280ms var(--ease-default);
}
.workflow-stage .workflow-step:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.3); box-shadow: var(--shadow-lg); }
.workflow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--accent-ai);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ai-dk);
  margin-bottom: 16px;
}
.workflow-step h4 { font-size: 17px; font-weight: 600; color: var(--neutral-900); margin-bottom: 8px; letter-spacing: -0.01em; }
.workflow-step p { font-size: 14px; color: var(--neutral-700); line-height: 1.5; }
@media (max-width: 900px) { .workflow-stage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .workflow-stage { grid-template-columns: 1fr; } }

.plan-soon{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--neutral-100);color:var(--neutral-400);margin-left:8px;vertical-align:middle;border:1px solid var(--neutral-200);}

/* ===== Premium inner-page polish (redesign v2.2, site-wide) ===== */
.final-cta-dark::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(99,134,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(99,134,255,0.08) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 18%,transparent 78%);mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 18%,transparent 78%);}
.final-cta-dark > *{position:relative;z-index:1;}
.final-cta-dark h2 em{background:linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:auroraText 7s ease-in-out infinite;}
@keyframes auroraText{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.final-cta-dark .btn-primary{position:relative;overflow:hidden;box-shadow:0 10px 36px rgba(77,124,255,0.5);}
.final-cta-dark .btn-primary::after{content:'';position:absolute;top:0;left:-65%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);transform:skewX(-22deg);animation:ctaShimmer 3.4s ease-in-out infinite;}
@keyframes ctaShimmer{0%{left:-65%;}55%,100%{left:135%;}}
.v-card,.stat-card,.case-card{transition:transform 280ms var(--ease-default),box-shadow 280ms var(--ease-default);}
.v-card:hover,.stat-card:hover,.case-card:hover{transform:translateY(-4px);box-shadow:0 22px 55px -22px rgba(15,23,42,0.22),0 0 42px -14px rgba(77,124,255,0.24);}

/* ===== THEME TOGGLE (dark / light) — redesign v3 ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--neutral-700);background:transparent;border:1px solid var(--neutral-200);transition:color .2s,border-color .2s,background .2s;flex-shrink:0;}
.theme-toggle:hover{color:var(--accent-blue);border-color:var(--accent-blue);background:rgba(77,124,255,0.08);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ic-sun{display:none;}
.theme-toggle .ic-moon{display:block;}
[data-theme="dark"] .theme-toggle .ic-sun{display:block;}
[data-theme="dark"] .theme-toggle .ic-moon{display:none;}
/* on a dark hero in LIGHT mode, the nav is over dark -> make the toggle light */
.nav-root.on-dark:not(.scrolled) .theme-toggle{color:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.26);}
.nav-root.on-dark:not(.scrolled) .theme-toggle:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,0.14);}
/* drawer (mobile) variant: full-width labeled row */
.theme-toggle-drawer{width:100%;height:auto;justify-content:flex-start;gap:12px;padding:13px 14px;margin-top:10px;border-radius:12px;color:var(--neutral-900);}
.theme-toggle-drawer .tt-label{font-size:15px;font-weight:500;}

/* ===== Dramatic dark animated hero — hub pages (.page-hero-light) — redesign v3.1 ===== */
@keyframes auroraDrift{0%{transform:translate3d(-2%,-1%,0) scale(1.05);}100%{transform:translate3d(3%,2%,0) scale(1.13);}}
.page-hero-light{
  background:
    radial-gradient(ellipse 68% 60% at 26% 18%, rgba(77,124,255,0.30), transparent 60%),
    radial-gradient(ellipse 58% 55% at 84% 82%, rgba(0,212,255,0.18), transparent 60%),
    linear-gradient(160deg, #0F172A 0%, #020617 100%) !important;
}
.page-hero-light::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(99,134,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(99,134,255,0.08) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 28%,#000 14%,transparent 76%);
          mask-image:radial-gradient(ellipse 72% 80% at 50% 28%,#000 14%,transparent 76%);
}
.page-hero-light .bg-mesh-light{
  inset:-25% -12% !important;z-index:0;
  background:
    radial-gradient(circle at 30% 38%, rgba(77,124,255,0.22), transparent 45%),
    radial-gradient(circle at 72% 62%, rgba(0,212,255,0.16), transparent 45%) !important;
  filter:blur(22px);animation:auroraDrift 16s ease-in-out infinite alternate;
}
.page-hero-light .container-x{position:relative;z-index:1;}
.page-hero-light .t-eyebrow{color:#7DA2FF;}
.page-hero-light h1,.page-hero-light .t-h1{color:#fff;}
.page-hero-light .accent-mix,.page-hero-light .accent-mix em{
  background:linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:auroraText 7s ease-in-out infinite;
}
.page-hero-light p,.page-hero-light .t-body-lg{color:rgba(255,255,255,0.76) !important;}
.page-hero-light .btn-secondary{color:#fff;border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05);}
.page-hero-light .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,0.12);}
.page-hero-light .bill-toggle{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.page-hero-light .bill-toggle button{color:rgba(255,255,255,0.72);}
.page-hero-light .bill-toggle button.active{background:var(--accent-blue);color:#fff;}
.page-hero-light .save-pill{background:rgba(34,211,238,0.18);color:#67E8F9;}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.page-hero-light .bg-mesh-light{animation:none;}}

/* ===== Detail-page heroes (industries / compare / alternatives) — premium dark upgrade v3.2 ===== */
.detail-hero{background:linear-gradient(160deg,#0F172A 0%,#020617 100%) !important;}
.detail-hero::before{content:'';position:absolute;inset:-22% -10%;z-index:0;pointer-events:none;background:radial-gradient(circle at 30% 38%, rgba(77,124,255,0.22), transparent 45%),radial-gradient(circle at 72% 64%, rgba(0,212,255,0.15), transparent 45%);filter:blur(24px);animation:auroraDrift 16s ease-in-out infinite alternate;}
.detail-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(99,134,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(99,134,255,0.08) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 35%,#000 16%,transparent 78%);mask-image:radial-gradient(ellipse 78% 82% at 50% 35%,#000 16%,transparent 78%);}
.detail-hero > .container-x{position:relative;z-index:1;}
.detail-hero .accent-mix,.detail-hero .accent-mix em{background:linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF) !important;background-size:220% 100% !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;animation:auroraText 7s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.detail-hero::before{animation:none;}}

/* ===== Breadcrumb — shared (5 detail pages lacked it -> giant chevron + no nav clearance) ===== */
.breadcrumb{padding:100px 0 0;background:#0F172A;}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(255,255,255,0.55);}
.breadcrumb-inner a{color:rgba(255,255,255,0.55);transition:color 180ms;}
.breadcrumb-inner a:hover{color:var(--accent-ai);}
.breadcrumb-inner .crumb-current{color:rgba(255,255,255,0.82);}
.breadcrumb-inner svg{width:13px;height:13px;flex-shrink:0;opacity:.5;}

/* ===== Unify remaining heroes to premium dark — v3.3 (page-hero-dark, post-hero, legal-hero, hipaa-hero) ===== */
.page-hero-dark,.post-hero,.legal-hero,.hipaa-hero{background:linear-gradient(160deg,#0F172A 0%,#020617 100%) !important;position:relative;overflow:hidden;}
.page-hero-dark::after,.post-hero::after,.legal-hero::after,.hipaa-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(99,134,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(99,134,255,0.08) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 32%,#000 14%,transparent 78%);mask-image:radial-gradient(ellipse 78% 82% at 50% 32%,#000 14%,transparent 78%);}
.page-hero-dark .bg-mesh-dark,.post-hero .bg-mesh-light{inset:-25% -12% !important;z-index:0;background:radial-gradient(circle at 30% 38%,rgba(77,124,255,0.22),transparent 45%),radial-gradient(circle at 72% 62%,rgba(0,212,255,0.15),transparent 45%) !important;filter:blur(24px) !important;animation:auroraDrift 16s ease-in-out infinite alternate;}
.legal-hero::before,.hipaa-hero::before{content:'';position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;background:radial-gradient(circle at 30% 38%,rgba(77,124,255,0.22),transparent 45%),radial-gradient(circle at 72% 62%,rgba(0,212,255,0.15),transparent 45%);filter:blur(24px);animation:auroraDrift 16s ease-in-out infinite alternate;}
.page-hero-dark > .container-x,.post-hero > .container-x,.legal-hero > .container-x,.hipaa-hero > .container-x{position:relative;z-index:1;}
.page-hero-dark h1,.post-hero h1,.legal-hero h1,.hipaa-hero h1,.page-hero-dark .t-h1,.legal-hero .t-h1,.hipaa-hero .t-h1{color:#fff !important;}
.page-hero-dark .t-eyebrow,.legal-hero .t-eyebrow,.hipaa-hero .t-eyebrow{color:#7DA2FF !important;}
.page-hero-dark .accent-mix,.page-hero-dark .accent-mix em,.post-hero .accent-coral,.post-hero .accent-coral em,.post-hero .accent-mix,.legal-hero .accent-mix,.legal-hero .accent-mix em,.hipaa-hero .accent-mix,.hipaa-hero .accent-mix em{background:linear-gradient(110deg,#5B8DEF,#22D3EE,#818CF8,#5B8DEF) !important;background-size:220% 100% !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;animation:auroraText 7s ease-in-out infinite;}
.page-hero-dark p,.post-hero p,.legal-hero p,.hipaa-hero p,.page-hero-dark .t-body-lg,.legal-hero .subhead,.hipaa-hero .subhead{color:rgba(255,255,255,0.76) !important;}
.post-hero .post-meta-row,.post-hero .post-meta-stats,.post-hero .post-meta-stats *,.post-hero .sep,.post-hero .dot,.legal-hero .updated,.hipaa-hero .updated{color:rgba(255,255,255,0.68) !important;}
.post-hero .post-cat-badge{background:rgba(77,124,255,0.20) !important;color:#A8C3FF !important;border-color:rgba(77,124,255,0.4) !important;}

/* ===== HERO FX — particle constellation + waving light beams + morphing aurora (v3.4) ===== */
.fx-beams{position:absolute;inset:-40% -25%;z-index:0;pointer-events:none;background:linear-gradient(72deg,transparent 32%,rgba(77,124,255,0.13) 46%,transparent 56%),linear-gradient(110deg,transparent 42%,rgba(0,212,255,0.10) 50%,transparent 60%);filter:blur(34px);animation:beamSweep 13s ease-in-out infinite alternate;will-change:transform,opacity;}
@keyframes beamSweep{0%{transform:translateX(-7%) rotate(0deg);opacity:.62;}50%{opacity:1;}100%{transform:translateX(7%) rotate(2.5deg);opacity:.82;}}
.fx-particles{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.72;}
.hero-dark > .container-x,.detail-hero > .container-x,.page-hero-dark > .container-x,.page-hero-light > .container-x,.post-hero > .container-x,.legal-hero > .container-x,.hipaa-hero > .container-x{position:relative;z-index:2;}
.hero-dark .bg-mesh,.detail-hero .bg-mesh-dark,.post-hero .bg-mesh-light,.page-hero-dark .bg-mesh-dark,.page-hero-light .bg-mesh-light{animation:auroraMorph 18s ease-in-out infinite alternate !important;}
@keyframes auroraMorph{0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg);}50%{transform:translate3d(4%,1%,0) scale(1.18) rotate(4deg);}100%{transform:translate3d(-2%,3%,0) scale(1.10) rotate(-3deg);}}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.fx-beams{animation:none;}}

/* ===== HERO FX amp + ripple sound-rings (v3.4b) ===== */
.fx-particles{opacity:.92;}
.fx-beams{background:linear-gradient(72deg,transparent 30%,rgba(77,124,255,0.18) 46%,transparent 58%),linear-gradient(110deg,transparent 40%,rgba(0,212,255,0.14) 50%,transparent 62%) !important;}
.fx-rings{position:absolute;z-index:1;right:24%;top:44%;width:540px;height:540px;transform:translate(50%,-50%);pointer-events:none;}
.fx-rings span{position:absolute;inset:0;border:1.5px solid rgba(77,124,255,0.32);border-radius:50%;animation:fxRing 6s ease-out infinite;}
.fx-rings span:nth-child(2){animation-delay:2s;}
.fx-rings span:nth-child(3){animation-delay:4s;}
@keyframes fxRing{0%{transform:scale(0.14);opacity:0;}16%{opacity:.5;}100%{transform:scale(1);opacity:0;}}
@media (max-width:980px){.fx-rings{display:none;}}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.fx-rings span{animation:none;opacity:0;}}

/* ===== Magic UI ports: Ripple (sound-rings) + Meteors (shooting lights) — v3.5 ===== */
.fx-ripple{position:absolute;z-index:0;right:20%;top:43%;width:0;height:0;pointer-events:none;}
.fx-ripple span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(1);border:1px solid rgba(77,124,255,0.5);border-radius:50%;animation:fxRipple 3.8s ease-in-out infinite;}
@keyframes fxRipple{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(0.9);}}
.fx-meteor{position:absolute;top:-12%;z-index:1;width:2px;height:2px;border-radius:50%;background:#A8C3FF;box-shadow:0 0 7px 1px rgba(125,162,255,0.55);transform:rotate(215deg);animation-name:fxMeteor;animation-timing-function:linear;animation-iteration-count:infinite;pointer-events:none;}
.fx-meteor::before{content:'';position:absolute;top:50%;left:0;width:72px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,#7DA2FF,transparent);}
@keyframes fxMeteor{0%{transform:rotate(215deg) translateX(0);opacity:0;}6%{opacity:1;}78%{opacity:1;}100%{transform:rotate(215deg) translateX(-780px);opacity:0;}}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.fx-meteor,.fx-ripple span{animation:none;}.fx-meteor{opacity:0;}}
@media (max-width:768px){.fx-ripple,.fx-meteor{display:none;}}

/* ===== Magic UI ports: Border Beam (cards) + Flickering Grid (dark sections) — v3.6 ===== */
.border-beam{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:4;}
.border-beam::after{content:'';position:absolute;aspect-ratio:1;width:64px;offset-path:rect(0 auto auto 0 round 64px);offset-distance:0%;background:linear-gradient(to left,#4D7CFF,#22D3EE,transparent);filter:blur(0.5px);animation:bbMove var(--bb-dur,7s) linear infinite;}
@keyframes bbMove{to{offset-distance:100%;}}
@supports not (offset-path: rect(0 auto auto 0 round 10px)){.border-beam{display:none;}}
.fx-grid{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 25%,transparent 82%);mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 25%,transparent 82%);}
.stats-panel.flickered::after,.final-cta.flickered::after,.final-cta-dark.flickered::after{opacity:0 !important;}
.llm-section.flickered::before{opacity:0 !important;}
.stats-panel.flickered > .container-x,.llm-section.flickered > .container-x,.final-cta-dark.flickered > .container-x{position:relative;z-index:1;}

/* ===== Magic UI port: Animated Shiny Text — glare panning across hero eyebrows (v3.7) ===== */
.hero-dark .t-eyebrow,.detail-hero .t-eyebrow,.page-hero-light .t-eyebrow,.page-hero-dark .t-eyebrow,.legal-hero .t-eyebrow,.hipaa-hero .t-eyebrow{
  background-image:linear-gradient(110deg, currentColor 40%, #FFFFFF 50%, currentColor 60%);
  background-size:230% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shinyText 5.5s ease-in-out infinite;
}
@keyframes shinyText{0%{background-position:135% 0;}100%{background-position:-135% 0;}}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){
  .hero-dark .t-eyebrow,.detail-hero .t-eyebrow,.page-hero-light .t-eyebrow,.page-hero-dark .t-eyebrow,.legal-hero .t-eyebrow,.hipaa-hero .t-eyebrow{animation:none;-webkit-text-fill-color:currentColor;background-image:none;}
}

/* shiny-text cascade fix — force the gradient + transparent fill (eyebrows are light-blue on dark) */
.hero-dark .t-eyebrow,.detail-hero .t-eyebrow,.page-hero-light .t-eyebrow,.page-hero-dark .t-eyebrow,.legal-hero .t-eyebrow,.hipaa-hero .t-eyebrow{
  background-image:linear-gradient(110deg, currentColor 38%, #FFFFFF 50%, currentColor 62%) !important;
  background-size:230% 100% !important;background-repeat:no-repeat !important;
  -webkit-text-fill-color:transparent !important;
}
@media (prefers-reduced-motion:reduce) and (min-width:99999px){.hero-dark .t-eyebrow,.detail-hero .t-eyebrow,.page-hero-light .t-eyebrow,.page-hero-dark .t-eyebrow,.legal-hero .t-eyebrow,.hipaa-hero .t-eyebrow{-webkit-text-fill-color:currentColor !important;background-image:none !important;}}

/* ===== Dark-mode QA fix: app-screenshot mockups + auth pages render as LIGHT ISLANDS ===== */
/* (their backgrounds are intentionally light; without this the token-text flips light -> invisible) */
[data-theme="dark"] .hero-window-stack,
[data-theme="dark"] body:has(.mini-nav-inner){
  --neutral-bg:#F8FAFC;--neutral-card:#FFFFFF;--neutral-100:#F1F5F9;--neutral-200:#E2E8F0;--neutral-400:#94A3B8;--neutral-700:#475569;--neutral-900:#0F172A;
}
[data-theme="dark"] body:has(.mini-nav-inner){background:#F8FAFC;}

/* industry conversation mockup (phone screen in the detail-hero): light island + override inherited white */
[data-theme="dark"] .detail-hero .reveal:has(.bubble-stack),
[data-theme="dark"] .mini-cal,
[data-theme="dark"] .case-stat{
  --neutral-bg:#F8FAFC;--neutral-card:#FFFFFF;--neutral-100:#F1F5F9;--neutral-200:#E2E8F0;--neutral-400:#94A3B8;--neutral-700:#475569;--neutral-900:#0F172A;
  color:#1E293B;
}
/* case-study cards: kill the light-cream gradient end so they're fully dark */
[data-theme="dark"] .case-card{background:linear-gradient(180deg,#141E33 0%,#1B2742 100%) !important;}

/* inline white-bg mockup elements (carrier chips, mini cards) -> light islands in dark mode */
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#F7F7F4"],
[data-theme="dark"] [style*="background: #F7F7F4"],
[data-theme="dark"] [style*="background:#FAFAF7"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] .flow-step-bar,
[data-theme="dark"] .mock-screen{
  --neutral-bg:#F8FAFC;--neutral-card:#FFFFFF;--neutral-100:#F1F5F9;--neutral-200:#E2E8F0;--neutral-400:#94A3B8;--neutral-700:#475569;--neutral-900:#0F172A;
  color:#1E293B;
}
/* terminal/spec blocks use --neutral-900 as a DARK background -> keep them dark (token flips light otherwise) */
[data-theme="dark"] .enc-list-mono{background:#0F172A !important;}

/* .bubble.caller is a light-grey chat bubble (bg #F1F1ED) -> needs dark text in dark mode */
[data-theme="dark"] .bubble.caller{--neutral-bg:#F8FAFC;--neutral-card:#FFFFFF;--neutral-100:#F1F5F9;--neutral-200:#E2E8F0;--neutral-400:#94A3B8;--neutral-700:#475569;--neutral-900:#0F172A;color:#1E293B;}

/* dark-mode fix: features sticky sub-nav strip (was hardcoded light -> tabs invisible) */
[data-theme="dark"] .subnav-strip{background:rgba(15,23,42,0.92) !important;border-top-color:rgba(255,255,255,0.08);border-bottom-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .subnav-tab{color:var(--neutral-700);}
[data-theme="dark"] .subnav-tab.active{color:var(--accent-ai);}
[data-theme="dark"] .subnav-tab:hover{color:#fff;}