:root { --electric-blue: #318dff; --electric-aqua: #32e2cf; --electric-violet: #814dff; }

body { overflow-x: hidden; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image: linear-gradient(rgba(91, 143, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 143, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.site-header { backdrop-filter: blur(16px); background: rgba(5, 11, 25, .58); }
.brand img { filter: drop-shadow(0 0 14px rgba(49, 141, 255, .3)); }

.hero::after {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  right: -18vw;
  bottom: -30vw;
  border-radius: 50%;
  background: conic-gradient(from 120deg, transparent, rgba(49, 141, 255, .16), rgba(50, 226, 207, .13), transparent 62%);
  filter: blur(12px);
  animation: spinHalo 22s linear infinite;
}

.hero-copy { animation: heroEnter .85s cubic-bezier(.2,.8,.2,1) both; }
.hero-campaign { animation: heroEnter 1s .12s cubic-bezier(.2,.8,.2,1) both, floatCreative 6s 1.2s ease-in-out infinite; transform-origin: center; }
h1 em, h2 em { background-size: 200% auto; animation: gradientShift 6s linear infinite; }

.primary-cta, .small-cta { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.primary-cta:hover, .small-cta:hover { transform: translateY(-3px); filter: saturate(1.18); box-shadow: 0 18px 42px rgba(40, 160, 255, .42); }

.benefit-grid article { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; }
.benefit-grid article:hover { transform: translateY(-8px); border-color: rgba(75, 184, 255, .72); background: rgba(17, 47, 86, .72); box-shadow: 0 20px 48px rgba(0, 0, 0, .28); }
.benefit-grid article b { transition: transform .3s ease, box-shadow .3s ease; }
.benefit-grid article:hover b { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 24px rgba(50, 226, 207, .36); }

.steps li { transition: background .3s ease, transform .3s ease; }
.steps li:hover { background: rgba(49, 141, 255, .07); transform: translateX(5px); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--reveal-index) * 80ms); }

.scroll-progress { position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; z-index: 20; background: linear-gradient(90deg, var(--electric-blue), var(--electric-aqua), var(--electric-violet)); box-shadow: 0 0 14px rgba(50, 226, 207, .8); }

@keyframes heroEnter { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floatCreative { 0%, 100% { transform: translateY(0) rotate(.35deg); } 50% { transform: translateY(-12px) rotate(-.4deg); } }
@keyframes gradientShift { to { background-position: 200% center; } }
@keyframes spinHalo { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}