/* SARAH GPU theme overlay — visuals only, no content changes */
:root {
  --gpu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

.gpu-band,
header.hero.gpu-band,
section.gpu-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.gpu-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; transform: translateZ(0);
}
.gpu-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; filter: blur(0.4px) saturate(1.05);
}
.gpu-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  filter: blur(1px) saturate(1.08) brightness(0.86);
  transform: scale(1.06);
  animation: sarah-gpu-drift 28s var(--gpu-ease) infinite alternate;
  transition: opacity 1.2s var(--gpu-ease); opacity: 0;
}
@keyframes sarah-gpu-drift {
  from { transform: scale(1.06) translate3d(-0.5%, -0.35%, 0); }
  to   { transform: scale(1.10) translate3d(0.5%, 0.35%, 0); }
}
.gpu-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4,10,7,0.93) 0%, rgba(4,10,7,0.45) 45%, rgba(4,10,7,0.58) 100%),
    radial-gradient(circle at 18% 12%, rgba(5,150,105,0.14), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(201,169,98,0.10), transparent 40%);
}
.gpu-band > .container,
.gpu-band > .gpu-content {
  position: relative; z-index: 2;
}

header.hero.gpu-band { padding-top: 48px; padding-bottom: 56px; }
section.gpu-band.section-compact .container { position: relative; z-index: 2; }

nav.combined-nav {
  background: rgba(4,10,7,0.58) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.vs-grid, .hero-stats, .hero-stat, .stat-card, .stat-block,
.net-card, .pillar-card, .product-card, .tier-card, .mod-card,
.cta-final, .pull-quote, .compare-wrap {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

section.alt {
  background: rgba(6,22,12,0.72) !important;
}
section.dark, section.darkpanel {
  background: rgba(4,10,7,0.88) !important;
}

.tier-enterprise, .tier-smb {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gpu-fallback { animation: none; }
}