*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{cursor:default}
:root{
--navy:#0B1120;--navy2:#101828;--navy3:#1B2B44;--blue:#2563EB;--blue-l:#3B82F6;
--orange:#F47920;--orange-g:#FF9A44;--orange-d:#D4650E;
--white:#FFFFFF;--g100:#F1F5F9;--g200:#CBD5E1;--g400:#94A3B8;--g600:#64748B;
--font:'Plus Jakarta Sans',system-ui,sans-serif;
--max:1200px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--navy);color:var(--g200);overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
a:visited{color:inherit}
button{cursor:pointer;border:none;font-family:var(--font)}
.ctn{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ===== SCROLL REVEAL ===== */
.sr{opacity:0;transform:translateY(50px);transition:all 1.2s cubic-bezier(.16,1,.3,1)}
.sr.left{transform:translateX(-60px)}
.sr.right{transform:translateX(60px)}
.sr.scale{transform:scale(.85);opacity:0}
.sr.fade-left{transform:translate(-40px,25px)}
.sr.fade-right{transform:translate(40px,25px)}
.sr.zoom-in{transform:scale(.7);opacity:0}
.sr.vis{opacity:1;transform:translate(0) scale(1)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}
.d6{transition-delay:.6s}.d7{transition-delay:.7s}.d8{transition-delay:.8s}.d9{transition-delay:.9s}.d10{transition-delay:1s}
.sr.fast{transition-duration:.5s}
.sr.slow{transition-duration:1.2s}

/* ===== ANIMATED BACKGROUNDS ===== */

/* Floating color orbs */
.bg-float{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-float::before,.bg-float::after{content:'';position:absolute;border-radius:50%;filter:blur(100px);opacity:.2;animation:bgFloat 12s ease-in-out infinite alternate}
.bg-float::before{width:500px;height:500px;background:var(--orange);top:-10%;right:-5%}
.bg-float::after{width:450px;height:450px;background:var(--blue);bottom:-10%;left:-5%;animation-delay:6s;animation-direction:alternate-reverse}
@keyframes bgFloat{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,15px) scale(.95)}
  100%{transform:translate(10px,-10px) scale(1.02)}
}

/* Animated grid */
.bg-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-grid::before{content:'';position:absolute;inset:-50%;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 25s linear infinite}
@keyframes gridDrift{to{transform:translate(60px,60px)}}

/* Rotated grid — softer lines */
.bg-grid-rotated{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-grid-rotated::before{content:'';position:absolute;inset:-50%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;transform:rotate(45deg);animation:gridDriftRotated 25s linear infinite}
@keyframes gridDriftRotated{to{transform:rotate(45deg) translate(60px,60px)}}

/* Slowly shifting gradient */
.bg-gradient-shift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-gradient-shift::before{content:'';position:absolute;inset:-20%;background:conic-gradient(from 0deg at 50% 50%,rgba(244,121,32,.12),rgba(37,99,235,.1),rgba(244,121,32,.06),rgba(37,99,235,.14),rgba(244,121,32,.12));animation:gradShift 20s linear infinite}
@keyframes gradShift{to{transform:rotate(360deg)}}

/* Floating particles via box-shadow */
.bg-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-particles::before,.bg-particles::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);animation:particleDrift 30s linear infinite}
.bg-particles::before{box-shadow:120px 80px 0 2px rgba(244,121,32,.25),240px 200px 0 1px rgba(255,255,255,.18),400px 120px 0 2px rgba(37,99,235,.22),560px 300px 0 1px rgba(244,121,32,.2),680px 180px 0 2px rgba(255,255,255,.15),800px 350px 0 1px rgba(37,99,235,.18),320px 400px 0 2px rgba(244,121,32,.22),160px 320px 0 1px rgba(255,255,255,.16),520px 50px 0 2px rgba(37,99,235,.15),700px 250px 0 1px rgba(244,121,32,.2)}
.bg-particles::after{box-shadow:100px 150px 0 1px rgba(255,255,255,.15),300px 50px 0 2px rgba(244,121,32,.2),500px 280px 0 1px rgba(37,99,235,.18),200px 380px 0 2px rgba(255,255,255,.2),600px 100px 0 1px rgba(244,121,32,.15),750px 320px 0 2px rgba(37,99,235,.22),450px 180px 0 1px rgba(255,255,255,.12),350px 250px 0 2px rgba(244,121,32,.18);animation-delay:15s;animation-direction:reverse}
@keyframes particleDrift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-15px,-20px)}
  50%{transform:translate(10px,-10px)}
  75%{transform:translate(-5px,15px)}
  100%{transform:translate(0,0)}
}

/* Smooth waves */
.bg-waves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-waves::before,.bg-waves::after{content:'';position:absolute;width:200%;height:200px;bottom:-60px;left:-50%;border-radius:45%;opacity:.04;animation:waveMove 18s linear infinite}
.bg-waves::before{background:var(--orange)}
.bg-waves::after{background:var(--blue);bottom:-40px;animation-duration:22s;animation-direction:reverse;opacity:.03}
@keyframes waveMove{to{transform:rotate(360deg)}}

/* Glow pulse from center */
.bg-glow-pulse{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-glow-pulse::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.15),rgba(244,121,32,.08),transparent 70%);animation:glowPulse2 8s ease-in-out infinite}
@keyframes glowPulse2{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}}

/* Diagonal lines sliding */
.bg-diagonal{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-diagonal::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 80px)}

/* Subtle noise texture drift */
.bg-noise{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-noise::before{content:'';position:absolute;inset:-10%;background-image:radial-gradient(circle 1px,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px;animation:noiseDrift 30s linear infinite}
@keyframes noiseDrift{0%{transform:translate(0,0)}25%{transform:translate(20px,-15px)}50%{transform:translate(-10px,20px)}75%{transform:translate(15px,10px)}100%{transform:translate(0,0)}}

/* Aurora effect */
.bg-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-aurora::before,.bg-aurora::after{content:'';position:absolute;width:120%;height:40%;filter:blur(80px);opacity:.08;animation:auroraMove 15s ease-in-out infinite alternate}
.bg-aurora::before{background:linear-gradient(90deg,var(--blue),var(--orange),var(--blue));top:10%;left:-10%}
.bg-aurora::after{background:linear-gradient(90deg,var(--orange),var(--blue),var(--orange));bottom:10%;right:-10%;animation-delay:7s;animation-direction:alternate-reverse}
@keyframes auroraMove{0%{transform:translateX(0) skewY(0deg)}50%{transform:translateX(5%) skewY(2deg)}100%{transform:translateX(-5%) skewY(-1deg)}}

/* Large soft dots drifting */
.bg-dots-drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-dots-drift::before,.bg-dots-drift::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.06;animation:dotsDrift 25s ease-in-out infinite}
.bg-dots-drift::before{width:300px;height:300px;background:var(--orange);top:20%;left:10%}
.bg-dots-drift::after{width:250px;height:250px;background:var(--blue);bottom:15%;right:15%;animation-delay:12s}
@keyframes dotsDrift{0%{transform:translate(0,0)}25%{transform:translate(40px,-30px)}50%{transform:translate(-20px,40px)}75%{transform:translate(30px,20px)}100%{transform:translate(0,0)}}

/* ===== LIGHT SECTION BACKGROUNDS ===== */

/* Grid for light sections (navy lines on light bg) */
.bg-grid-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-grid-light::before{content:'';position:absolute;inset:-50%;background-image:linear-gradient(rgba(11,17,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,17,32,.04) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 25s linear infinite}

/* Dots orbiting for light sections */
.bg-dots-orbit-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-dots-orbit-light::before,.bg-dots-orbit-light::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;opacity:.12}
.bg-dots-orbit-light::before{box-shadow:120px 80px 0 2px rgba(244,121,32,.3),240px 200px 0 1px rgba(11,17,32,.2),400px 120px 0 2px rgba(37,99,235,.25),560px 300px 0 1px rgba(244,121,32,.2),680px 180px 0 2px rgba(11,17,32,.15),800px 350px 0 1px rgba(37,99,235,.2),320px 400px 0 2px rgba(244,121,32,.25),160px 320px 0 1px rgba(11,17,32,.18);animation:dotsOrbit 20s linear infinite}
.bg-dots-orbit-light::after{box-shadow:100px 150px 0 1px rgba(37,99,235,.2),300px 50px 0 2px rgba(244,121,32,.25),500px 280px 0 1px rgba(11,17,32,.18),200px 380px 0 2px rgba(37,99,235,.22),600px 100px 0 1px rgba(244,121,32,.2),750px 320px 0 2px rgba(11,17,32,.15);animation:dotsOrbit 25s linear infinite reverse}
@keyframes dotsOrbit{0%{transform:rotate(0deg) translate(10px) rotate(0deg)}100%{transform:rotate(360deg) translate(10px) rotate(-360deg)}}

/* Waves for light sections */
.bg-waves-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-waves-light::before,.bg-waves-light::after{content:'';position:absolute;width:200%;height:200px;bottom:-60px;left:-50%;border-radius:45%;opacity:.03;animation:waveMove 18s linear infinite}
.bg-waves-light::before{background:var(--navy)}
.bg-waves-light::after{background:var(--blue);bottom:-40px;animation-duration:22s;animation-direction:reverse;opacity:.025}

/* Aurora for light sections */
.bg-aurora-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-aurora-light::before,.bg-aurora-light::after{content:'';position:absolute;width:120%;height:40%;filter:blur(80px);opacity:.04;animation:auroraMove 15s ease-in-out infinite alternate}
.bg-aurora-light::before{background:linear-gradient(90deg,var(--blue),var(--orange),var(--blue));top:10%;left:-10%}
.bg-aurora-light::after{background:linear-gradient(90deg,var(--orange),var(--blue),var(--orange));bottom:10%;right:-10%;animation-delay:7s;animation-direction:alternate-reverse}

/* Diagonal for light sections */
.bg-diagonal-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-diagonal-light::before{content:'';position:absolute;inset:-100%;background-image:repeating-linear-gradient(45deg,rgba(11,17,32,.025) 0,rgba(11,17,32,.025) 1px,transparent 1px,transparent 80px);animation:diagSlide 20s linear infinite}

/* ===== MICRO-ANIMATIONS ===== */

/* Pulsing glow on icons */
.glow-pulse{animation:microGlow 3s ease-in-out infinite}
@keyframes microGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 12px rgba(244,121,32,.3))}}

/* Shimmer sweep */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}

/* Number glow (added via JS when counter completes) */
.num-glow{text-shadow:0 0 20px rgba(244,121,32,.4),0 0 40px rgba(244,121,32,.15);transition:text-shadow .6s ease}

/* ===== SECTION SYSTEM ===== */
.sec{padding:120px 0;position:relative}
.sec-dark{background:var(--navy2)}
.sec-light{background:var(--g100);color:var(--navy)}
.sec-light h2,.sec-light h3,.sec-light h4{color:var(--navy)}
.sec-light p,.sec-light li{color:var(--g600)}
.sec-grad{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;color:var(--orange);margin-bottom:16px;display:block}
.sec h2{font-size:clamp(32px,4.5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px;color:var(--white)}
.sec-light h2{color:var(--navy)}
.sec .sub{font-size:18px;color:var(--g400);max-width:600px;line-height:1.7}
.sec-light .sub{color:var(--g600)}
.sec-head{margin-bottom:64px}
.sec-head.ctr{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ===== RESPONSIVE ===== */
@media(min-width:768px) and (max-width:1024px){
  .ctn{max-width:90%}
}
@media(max-width:768px){
  .ctn{padding:0 20px}
  .sec{padding:80px 0}
  /* Simpler backgrounds on mobile */
  .bg-float::before,.bg-float::after{filter:blur(80px);width:300px;height:300px}
  .bg-grid::before{background-size:80px 80px}
  .bg-particles::before,.bg-particles::after{animation-duration:40s}
  /* Shorter reveal distances */
  .sr{transform:translateY(30px)}
  .sr.left{transform:translateX(-35px)}
  .sr.right{transform:translateX(35px)}
  .sr.fade-left{transform:translate(-25px,18px)}
  .sr.fade-right{transform:translate(25px,18px)}
  .sr.zoom-in{transform:scale(.85)}
  /* Slightly faster on mobile */
  .sr{transition-duration:.9s}
}
@media(prefers-reduced-motion:reduce){
  .sr{opacity:1;transform:none;transition:none}
  .hero h1 .word{opacity:1;transform:none;animation:none}
  .hero p,.hero-tag,.hero-btns,.hero-stats{opacity:1;transform:none;animation:none}
  /* Disable background animations */
  .bg-float::before,.bg-float::after,
  .bg-grid::before,.bg-grid::after,
  .bg-gradient-shift::before,
  .bg-particles::before,.bg-particles::after{animation:none}
  /* Disable micro-animations */
  .glow-pulse{animation:none}
  .shimmer::after{animation:none}
  .trust-track{animation:none!important}
  .cta-orb,.cta-bg::before,.cta-bg::after{animation:none}
}