:root {
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --foreground-300: oklch(0.75 0.015 80);
  --foreground-400: oklch(0.62 0.02 80);
  --foreground-500: oklch(0.50 0.025 80);
  --foreground-600: oklch(0.40 0.02 80);
  --foreground-700: oklch(0.30 0.015 80);
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(190,150,60,0.3); border-radius: 8px; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeSlide { 0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes slideFromRight { 0%{transform:translateX(100%); opacity:0} 100%{transform:translateX(0); opacity:1} }

@keyframes float-delayed-1 { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-10px) translateX(4px)} 66%{transform:translateY(-4px) translateX(-2px)} }
@keyframes float-delayed-2 { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-8px) translateX(-3px)} 66%{transform:translateY(-2px) translateX(5px)} }
@keyframes float-delayed-3 { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-12px) translateX(-4px)} 66%{transform:translateY(-6px) translateX(3px)} }
@keyframes float-delayed-4 { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-7px) translateX(5px)} 66%{transform:translateY(-3px) translateX(-4px)} }
.animate-float-1 { animation: float-delayed-1 7s ease-in-out infinite; }
.animate-float-2 { animation: float-delayed-2 6.5s ease-in-out infinite; }
.animate-float-3 { animation: float-delayed-3 7.5s ease-in-out infinite; }
.animate-float-4 { animation: float-delayed-4 6s ease-in-out infinite; }

@keyframes pulseGlow { 0%,100%{opacity:0.6; transform:scale(1)} 50%{opacity:1; transform:scale(1.05)} }
@keyframes particleFlow { 0%{transform:translate(0,0) scale(1); opacity:0.8} 100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(0); opacity:0} }
@keyframes slideUp { 0%{opacity:0; transform:translateY(16px)} 100%{opacity:1; transform:translateY(0)} }
.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }

@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes impactParticle { 0%,100%{transform:translateY(0) scale(1); opacity:0} 20%{opacity:0.6} 80%{opacity:0.3} 100%{transform:translateY(-30px) scale(0.6); opacity:0} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.animate-marquee { animation: marquee 30s linear infinite; }

@keyframes pricingStarPulse { 0%,100%{opacity:0.3; transform:scale(1)} 50%{opacity:1; transform:scale(1.8)} }
@keyframes rocketFlame { 0%,100%{transform:translateY(0) scale(1); opacity:0.7} 50%{transform:translateY(6px) scale(0.6); opacity:0.3} }
@keyframes enterpriseDotPulse { 0%,100%{opacity:0.3; transform:scale(0.8)} 50%{opacity:1; transform:scale(1.4)} }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Range slider (ROI) */
input[type=range] { -webkit-appearance: none; appearance: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 9999px; background: oklch(0.75 0.17 85); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 9999px; background: oklch(0.75 0.17 85); border: 3px solid #fff; cursor: pointer; }

/* Nav mega-menu helpers */
.nav-hidden { transform: translateY(-100%); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }