/* ═══════════════════════════════════
   CINEMATIC PRELOADER
═══════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at 50% 60%,#0a0a2e 0%,#04040f 70%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#preCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pre-frost-ring{
  position:absolute;border-radius:50%;border:1.5px solid rgba(34,229,255,.35);
  width:var(--s);height:var(--s);top:50%;left:50%;
  transform:translate(-50%,-60%);
  animation:frostRingExpand 2.5s cubic-bezier(.16,1,.3,1) var(--d) infinite;
  pointer-events:none;
}
@keyframes frostRingExpand{
  0%{opacity:0;transform:translate(-50%,-60%) scale(.2)}
  20%{opacity:.7}100%{opacity:0;transform:translate(-50%,-60%) scale(2.8)}
}
.pre-frost-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(34,229,255,.15) 0%,transparent 70%);
  opacity:0;
}
#preloader.revealing .pre-frost-overlay{animation:frostWipe 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes frostWipe{
  0%{opacity:0;transform:scale(.5)}40%{opacity:.9;transform:scale(1.2)}
  100%{opacity:0;transform:scale(3);filter:blur(30px)}
}
#preloader.hide{animation:preReveal 1s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
@keyframes preReveal{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  50%{opacity:1;transform:scale(1.04);filter:blur(0)}
  100%{opacity:0;transform:scale(1.12);filter:blur(16px)}
}
.pre-center{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;position:relative;z-index:2;
}
.pre-ac-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  animation:preACFloat 3s ease-in-out infinite;
}
@keyframes preACFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pre-ac-svg{
  width:200px;height:auto;
  filter:drop-shadow(0 0 24px rgba(34,229,255,.5)) drop-shadow(0 0 60px rgba(124,111,255,.3));
  animation:preACGlow 2s ease-in-out infinite alternate;
}
@keyframes preACGlow{
  0%{filter:drop-shadow(0 0 16px rgba(34,229,255,.4)) drop-shadow(0 0 40px rgba(124,111,255,.25))}
  100%{filter:drop-shadow(0 0 32px rgba(34,229,255,.8)) drop-shadow(0 0 80px rgba(124,111,255,.5))}
}
#preFan{animation:fanSpin 1.2s linear infinite;transform-origin:48px 28px}
@keyframes fanSpin{to{transform:rotate(360deg)}}
.pre-stream{
  animation:preStreamFlow 1.4s ease-in-out infinite;
  stroke-dasharray:60;stroke-dashoffset:60;
}
@keyframes preStreamFlow{
  0%{stroke-dashoffset:60;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-60;opacity:0}
}
#preLed1{animation:ledBlink1 1.8s ease-in-out infinite}
#preLed2{animation:ledBlink2 1.8s ease-in-out .4s infinite}
@keyframes ledBlink1{0%,100%{opacity:.2}50%{opacity:1;filter:drop-shadow(0 0 4px #22e5ff)}}
@keyframes ledBlink2{0%,100%{opacity:.2}60%{opacity:.9;filter:drop-shadow(0 0 4px #00ffb3)}}
.pre-brand{text-align:center;animation:preBrandFade 1s ease .4s both}
@keyframes preBrandFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pre-logo-text{
  font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:900;color:#fff;
  letter-spacing:-.02em;
  text-shadow:0 0 30px rgba(34,229,255,.7),0 0 60px rgba(124,111,255,.4);
}
.pre-jk{color:#22e5ff}
.pre-cc{background:linear-gradient(90deg,#7c6fff,#22e5ff,#00ffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pre-tagline{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(34,229,255,.55);margin-top:.25rem;
}
.pre-bar-wrap{
  width:200px;height:3px;background:rgba(255,255,255,.07);
  border-radius:10px;overflow:hidden;position:relative;
}
.pre-bar{
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(90deg,#7c6fff,#22e5ff,#00ffb3);background-size:200%;
  animation:preBarFill 2.2s cubic-bezier(.4,0,.2,1) forwards,preBarShimmer 1.5s linear infinite;
}
@keyframes preBarFill{0%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
@keyframes preBarShimmer{0%{background-position:200%}100%{background-position:-200%}}
.pre-text{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(34,229,255,.5);
  transition:opacity .2s;
  animation:preTextPulse 1.2s ease-in-out infinite alternate;
}
@keyframes preTextPulse{0%{opacity:.35}100%{opacity:.85}}

/* ═══════════════════════════════════
   SEASONAL OFFER BANNER
   position:fixed above nav (z-index 1001 > nav 900)
   nav shifts down via JS when banner visible
═══════════════════════════════════ */
#offerBanner{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  background:linear-gradient(90deg,#2a0850,#120630,#06162e,#082040,#2a0850);
  background-size:400% 100%;
  animation:bannerBgShift 8s linear infinite;
  border-bottom:1px solid rgba(124,111,255,.35);
  box-shadow:0 2px 20px rgba(124,111,255,.25);
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
#offerBanner.visible{transform:translateY(0)}
@keyframes bannerBgShift{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
.offer-banner-inner{
  max-width:1100px;margin:0 auto;padding:.6rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
}
.offer-banner-ico{font-size:1.05rem;flex-shrink:0;animation:bannerBounce 1.4s ease-in-out infinite alternate}
@keyframes bannerBounce{0%{transform:scale(1)}100%{transform:scale(1.2)}}
.offer-banner-text{
  font-family:'Outfit',sans-serif;font-size:.84rem;font-weight:700;
  color:#fff;flex:1;min-width:160px;text-align:center;
  text-shadow:0 0 20px rgba(124,111,255,.5);
}
.offer-banner-cta{
  background:linear-gradient(135deg,#7c6fff,#22e5ff);color:#fff;
  font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:800;
  padding:.32rem .85rem;border-radius:50px;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  box-shadow:0 4px 16px rgba(124,111,255,.4);
  transition:transform .2s,box-shadow .2s;
}
.offer-banner-cta:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(124,111,255,.6)}
.offer-banner-close{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.65);width:24px;height:24px;border-radius:50%;
  cursor:pointer;font-size:.68rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.offer-banner-close:hover{background:rgba(255,255,255,.2);color:#fff}

/* ═══════════════════════════════════
   SHIMMER HOVER & SHOOTING STARS
═══════════════════════════════════ */
.shimmer-hover{position:relative;overflow:hidden}
.shimmer-hover::after{
  content:'';position:absolute;top:0;left:-150%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-25deg);transition:left .6s ease-in-out;z-index:5;pointer-events:none;
}
.shimmer-hover:hover::after{left:150%}
.shoot-star{
  position:absolute;width:120px;height:1.5px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  border-radius:2px;opacity:0;z-index:0;pointer-events:none;
}
@keyframes shoot{
  0%{transform:translate(0,0) rotate(-45deg) scaleX(0);opacity:0}
  5%{opacity:1;transform:translate(-20px,20px) rotate(-45deg) scaleX(1)}
  20%{transform:translate(-200px,200px) rotate(-45deg) scaleX(0);opacity:0}
  100%{opacity:0}
}

/* ═══════════════════════════════════
   ANIMATED GRADIENT BORDER GLOW
═══════════════════════════════════ */
.glow-border{
  position:relative;
}
.glow-border::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,#7c6fff,#22e5ff,#00ffb3,#ff6af0,#7c6fff);
  background-size:300% 300%;
  animation:borderGlow 4s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;
  z-index:0;
}
.glow-border:hover::before{opacity:1}
@keyframes borderGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ═══════════════════════════════════
   FLOATING GEOMETRIC SHAPES
═══════════════════════════════════ */
#floatingShapes{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.geo-shape{
  position:absolute;opacity:0;
  animation:geoFloat linear infinite;
}
.geo-hex{width:30px;height:30px;border:1.5px solid rgba(124,111,255,.15);border-radius:6px;transform:rotate(45deg)}
.geo-tri{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid rgba(34,229,255,.1)}
.geo-ring{width:24px;height:24px;border:1.5px solid rgba(0,255,179,.12);border-radius:50%}
.geo-cross{width:18px;height:18px;position:relative}
.geo-cross::before,.geo-cross::after{content:'';position:absolute;background:rgba(255,106,240,.12);border-radius:2px}
.geo-cross::before{width:18px;height:2px;top:8px;left:0}
.geo-cross::after{width:2px;height:18px;left:8px;top:0}
.geo-dot{width:4px;height:4px;border-radius:50%;background:rgba(124,111,255,.2)}
@keyframes geoFloat{
  0%{transform:translateY(100vh) rotate(0deg);opacity:0}
  10%{opacity:var(--geo-op,.12)}
  90%{opacity:var(--geo-op,.12)}
  100%{transform:translateY(-100px) rotate(360deg);opacity:0}
}
[data-theme="light"] .geo-hex{border-color:rgba(90,60,200,.1)}
[data-theme="light"] .geo-tri{border-bottom-color:rgba(0,120,180,.08)}
[data-theme="light"] .geo-ring{border-color:rgba(0,180,120,.1)}
[data-theme="light"] .geo-cross::before,[data-theme="light"] .geo-cross::after{background:rgba(180,60,200,.08)}
[data-theme="light"] .geo-dot{background:rgba(90,60,200,.12)}
[data-theme="neon"] .geo-hex{border-color:rgba(255,0,200,.2)}
[data-theme="neon"] .geo-tri{border-bottom-color:rgba(0,255,200,.15)}
[data-theme="neon"] .geo-ring{border-color:rgba(0,200,255,.2)}
[data-theme="neon"] .geo-cross::before,[data-theme="neon"] .geo-cross::after{background:rgba(255,50,100,.15)}
[data-theme="neon"] .geo-dot{background:rgba(255,0,200,.25)}

/* ═══════════════════════════════════
   ANIMATED SECTION DIVIDER (replaces sec-line)
═══════════════════════════════════ */
.sec-line{
  height:2px !important;
  background:linear-gradient(90deg,transparent 0%,var(--violet) 20%,var(--cyan) 40%,var(--mint) 60%,var(--pink) 80%,transparent 100%) !important;
  background-size:200% 100% !important;
  animation:secLineFlow 3s linear infinite !important;
  opacity:.4 !important;
  position:relative;
}
.sec-line::after{
  content:'';position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan),0 0 24px var(--cyan);
  animation:secDotTravel 3s linear infinite;
}
@keyframes secLineFlow{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes secDotTravel{0%{left:10%}50%{left:90%}100%{left:10%}}

/* ═══════════════════════════════════
   MOUSE TRAIL PARTICLES
═══════════════════════════════════ */
.trail-dot{
  position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,var(--cyan),transparent);
  animation:trailFade .8s ease-out forwards;
}
@keyframes trailFade{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(0)}}

/* ═══════════════════════════════════
   PULSING CTA GLOW
═══════════════════════════════════ */
.btn-primary,.nav-cta,.sbtn{
  animation:ctaPulse 2.5s ease-in-out infinite alternate !important;
}
@keyframes ctaPulse{
  0%{box-shadow:0 4px 20px rgba(124,111,255,.4)}
  100%{box-shadow:0 8px 40px rgba(34,229,255,.6),0 0 60px rgba(124,111,255,.2)}
}
[data-theme="neon"] .btn-primary,[data-theme="neon"] .nav-cta,[data-theme="neon"] .sbtn{
  animation:ctaPulseNeon 2.5s ease-in-out infinite alternate !important;
}
@keyframes ctaPulseNeon{
  0%{box-shadow:0 4px 20px rgba(255,45,120,.5)}
  100%{box-shadow:0 8px 40px rgba(255,45,120,.7),0 0 60px rgba(191,90,242,.3)}
}

/* ═══════════════════════════════════
   ANIMATED GRADIENT TEXT HEADINGS
═══════════════════════════════════ */
.sec-head h2{
  background:var(--grad-hero) !important;background-size:300% !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  animation:headTextFlow 4s ease infinite alternate !important;
}
@keyframes headTextFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* ═══════════════════════════════════
   SERVICE ICON HOVER ANIMATIONS
═══════════════════════════════════ */
.svc-ico-inner{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-ico-inner{transform:rotateY(360deg)}
.svc-ico{transition:all .4s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-ico{transform:scale(1.15);border-color:var(--cyan) !important}

/* ═══════════════════════════════════
   LOGO BREATHING GLOW
═══════════════════════════════════ */
.logo-gem{animation:logoBreathe 3s ease-in-out infinite alternate !important}
@keyframes logoBreathe{
  0%{box-shadow:0 0 12px rgba(34,229,255,.3),0 0 24px rgba(124,111,255,.1)}
  100%{box-shadow:0 0 20px rgba(34,229,255,.6),0 0 48px rgba(124,111,255,.25)}
}

/* ═══════════════════════════════════
   PARALLAX SCROLL DEPTH
═══════════════════════════════════ */
.parallax-slow{transition:transform .1s linear}
.parallax-fast{transition:transform .1s linear}

/* ═══════════════════════════════════
   WAVE SECTION SEPARATOR
═══════════════════════════════════ */
.wave-sep{
  width:100%;height:40px;overflow:hidden;position:relative;z-index:2;
}
.wave-sep svg{
  width:200%;height:100%;animation:waveDrift 6s linear infinite;
}
@keyframes waveDrift{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════
   NAV ACTIVE LINK INDICATOR
═══════════════════════════════════ */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;
  background:var(--grad-main);border-radius:10px;
  transition:width .3s,left .3s;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;left:0}

/* ═══════════════════════════════════
   BRAND CARD WAVE HOVER
═══════════════════════════════════ */
.brand-card{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.brand-card:hover{transform:translateY(-6px) scale(1.04);box-shadow:var(--shadow-card),var(--shadow-glow)}

/* ═══════════════════════════════════
   STAT RING PULSE
═══════════════════════════════════ */
.hstat{transition:all .3s}
.hstat:hover{transform:translateY(-4px) scale(1.05)}
.hstat-n{transition:transform .3s}
.hstat:hover .hstat-n{transform:scale(1.15)}

/* ═══════════════════════════════════
   HERO FLOAT LABELS ENHANCED
═══════════════════════════════════ */
.hero-float-label{animation:heroLabelFloat 4s ease-in-out infinite alternate,fadeUp .8s ease both !important}
@keyframes heroLabelFloat{
  0%{transform:translateY(0) rotate(-1deg)}
  100%{transform:translateY(-12px) rotate(1deg)}
}

/* ═══════════════════════════════════
   TICKER GLOW DOTS
═══════════════════════════════════ */
.tick-d{animation:tickDotPulse 1.5s ease-in-out infinite alternate !important}
@keyframes tickDotPulse{
  0%{box-shadow:0 0 4px var(--cyan)}
  100%{box-shadow:0 0 12px var(--cyan),0 0 20px var(--violet)}
}

/* ═══════════════════════════════════
   CONTACT ICON BOUNCE
═══════════════════════════════════ */
.cico{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cmeth:hover .cico{transform:scale(1.2) rotate(-8deg)}

/* ═══════════════════════════════════
   FOOTER WAVE BG
═══════════════════════════════════ */
footer{position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-hero);background-size:300%;
  animation:headTextFlow 4s ease infinite alternate;
}

/* ═══════════════════════════════════
   3D TILT CARDS
═══════════════════════════════════ */
.tilt-card{
  transform-style:preserve-3d;perspective:800px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;
}
.tilt-card:hover{
  box-shadow:var(--shadow-card),0 20px 60px rgba(0,0,0,.3),var(--shadow-glow) !important;
}

/* ═══════════════════════════════════
   MAGNETIC BUTTON EFFECT
═══════════════════════════════════ */
.mag-btn{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════
   TEXT STAGGER ANIMATIONS
═══════════════════════════════════ */
.char-reveal{
  display:inline-block;
  opacity:0;
  transform:translateY(30px) rotateX(-40deg);
  animation:charPop .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes charPop{
  to{opacity:1;transform:translateY(0) rotateX(0deg)}
}

/* Stagger cascade for section children */
.cascade > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.cascade.on > *:nth-child(1){transition-delay:.05s}
.cascade.on > *:nth-child(2){transition-delay:.12s}
.cascade.on > *:nth-child(3){transition-delay:.19s}
.cascade.on > *:nth-child(4){transition-delay:.26s}
.cascade.on > *:nth-child(5){transition-delay:.33s}
.cascade.on > *:nth-child(6){transition-delay:.4s}
.cascade.on > *{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════
   ENHANCED STAT COUNTER RINGS
═══════════════════════════════════ */
.hstat{position:relative;overflow:hidden}
.hstat::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(124,111,255,.1) 0%,transparent 70%);
  opacity:0;transition:opacity .4s;
}
.hstat:hover::after{opacity:1}

/* ═══════════════════════════════════
   SMOOTH CURSOR GLOW (desktop only)
═══════════════════════════════════ */
#cursorGlow{
  position:fixed;width:280px;height:280px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(124,111,255,.08) 0%,rgba(34,229,255,.04) 30%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s;
  mix-blend-mode:screen;
}
[data-theme="light"] #cursorGlow{
  background:radial-gradient(circle,rgba(100,80,240,.06) 0%,rgba(34,180,220,.03) 30%,transparent 70%);
}
@media(max-width:900px){#cursorGlow{display:none}}

/* ═══════════════════════════════════
   RIPPLE CLICK EFFECT
═══════════════════════════════════ */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(34,229,255,.4),transparent 70%);
  transform:scale(0);
  animation:rippleOut .6s ease-out forwards;
}
@keyframes rippleOut{to{transform:scale(2.5);opacity:0}}

/* ═══════════════════════════════════
   DESIGN SYSTEM
═══════════════════════════════════ */
:root {
  --bg:        #04040f;
  --bg2:       #070714;
  --bg3:       #0b0b1a;
  --card:      rgba(255,255,255,.035);
  --card-b:    rgba(255,255,255,.07);
  --bdr:       rgba(120,100,255,.12);
  --bdr-hi:    rgba(100,200,255,.35);
  --text:      #eeeeff;
  --text2:     rgba(220,215,255,.6);
  --text3:     rgba(200,195,255,.3);

  --violet:    #7c6fff;
  --cyan:      #22e5ff;
  --mint:      #00ffb3;
  --pink:      #ff6af0;
  --amber:     #ffcc44;
  --rose:      #ff5577;
  --sky:       #44ccff;

  --grad-main: linear-gradient(135deg,#7c6fff,#22e5ff);
  --grad-warm: linear-gradient(135deg,#ff6af0,#ff5577);
  --grad-cool: linear-gradient(135deg,#22e5ff,#00ffb3);
  --grad-hero: linear-gradient(135deg,#7c6fff 0%,#22e5ff 50%,#00ffb3 100%);

  --shadow-card: 0 8px 40px rgba(0,0,0,.6);
  --shadow-glow: 0 0 60px rgba(100,150,255,.15);
  --r: 18px;
  --r-sm: 12px;
  --r-pill: 999px;
  --transition: .3s cubic-bezier(.16,1,.3,1);
}

/* ─── LIGHT THEME: LIQUID CRYSTAL ─── */
[data-theme="light"] {
  --bg:        #f8f6ff;
  --bg2:       #f2eeff;
  --bg3:       #e9e3ff;
  --card:      rgba(255,255,255,.82);
  --card-b:    rgba(255,255,255,.97);
  --bdr:       rgba(110,80,240,.12);
  --bdr-hi:    rgba(90,100,255,.4);
  --text:      #0a0618;
  --text2:     rgba(10,6,24,.65);
  --text3:     rgba(10,6,24,.4);
  --shadow-card: 0 8px 36px rgba(90,60,220,.12);
  --shadow-glow: 0 0 50px rgba(120,80,255,.16);
}
[data-theme="light"] .glass{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(160,120,255,.18);
  box-shadow:0 4px 32px rgba(100,60,220,.1),inset 0 1px 0 rgba(255,255,255,.95);
}
/* ── LIGHT MODE: ALL TEXT LOCKED IN ── */
[data-theme="light"] .sec-head h2,
[data-theme="light"] h2,
[data-theme="light"] h3{color:#08051a !important;text-shadow:0 1px 2px rgba(255,255,255,.8)}

/* ── LIGHT MODE: FIX TRANSPARENT GRADIENT HEADINGS ── */
[data-theme="light"] .sec-head h2 {
  background: linear-gradient(135deg,#3b18d8 0%,#0070a8 50%,#005a38 100%) !important;
  background-size: 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) !important;
  text-shadow: none !important;
}
[data-theme="light"] p{color:rgba(8,5,26,.7) !important}
[data-theme="light"] .wi-p{color:rgba(8,5,26,.65) !important}
[data-theme="light"] .sec-head p{color:rgba(8,5,26,.62) !important}
[data-theme="light"] .hero-tagline{color:rgba(8,5,26,.72) !important}
[data-theme="light"] .hero-tagline strong{color:#08051a !important}
[data-theme="light"] .text2,
[data-theme="light"] [style*="color:var(--text2)"]{color:rgba(8,5,26,.65) !important}
[data-theme="light"] .h-badge{
  background:rgba(255,255,255,.9) !important;
  border:1.5px solid rgba(34,180,220,.35) !important;
  color:#0a4a6a !important;
  backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,150,200,.12);
}
[data-theme="light"] .pulsedot{background:#00a86b !important}
[data-theme="light"] .hero-title{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 0 20px rgba(255,255,255,.7));
}
[data-theme="light"] .gt{
  background:linear-gradient(135deg,#4a20e8,#0090c8,#00805a) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
[data-theme="light"] .ticker{background:rgba(255,255,255,.88) !important;border-color:rgba(100,80,200,.12) !important}
[data-theme="light"] .tick-i{color:rgba(8,5,26,.65) !important}
[data-theme="light"] .tick-d{background:#0090c8 !important;box-shadow:0 0 4px rgba(0,144,200,.4) !important}
[data-theme="light"] .lbl{color:#0a5a7a !important}
[data-theme="light"] .lbl::before,[data-theme="light"] .lbl::after{background:#0a5a7a !important}
[data-theme="light"] .nav-links a{color:rgba(8,5,26,.7) !important}
[data-theme="light"] .nav-links a:hover{color:#08051a !important}
[data-theme="light"] .logo-sub{color:rgba(8,5,26,.5) !important}
[data-theme="light"] .logo-cc-char{color:#08051a !important}
#auroraCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

/* ═══════════════════════════════════
   🔥 NEON FROST THEME — SUPER PREMIUM
═══════════════════════════════════ */
[data-theme="neon"] {
  --bg:        #030108;
  --bg2:       #06020f;
  --bg3:       #0a0318;
  --card:      rgba(255,255,255,.03);
  --card-b:    rgba(255,255,255,.06);
  --bdr:       rgba(255,0,200,.15);
  --bdr-hi:    rgba(0,255,200,.4);
  --text:      #f0e8ff;
  --text2:     rgba(230,210,255,.55);
  --text3:     rgba(200,180,255,.28);
  --violet:    #bf5af2;
  --cyan:      #00e5ff;
  --mint:      #00ffa3;
  --pink:      #ff2d78;
  --amber:     #ffbb00;
  --rose:      #ff3366;
  --sky:       #00d4ff;
  --grad-main: linear-gradient(135deg,#ff2d78,#bf5af2);
  --grad-warm: linear-gradient(135deg,#ff2d78,#ff6600);
  --grad-cool: linear-gradient(135deg,#00e5ff,#00ffa3);
  --grad-hero: linear-gradient(135deg,#ff2d78 0%,#bf5af2 35%,#00e5ff 65%,#00ffa3 100%);
  --shadow-card: 0 8px 40px rgba(0,0,0,.8);
  --shadow-glow: 0 0 60px rgba(191,90,242,.2);
}
[data-theme="neon"] body{background:#030108}
[data-theme="neon"] .glass{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,0,200,.12);
  box-shadow:0 4px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="neon"] .glass:hover{
  border-color:rgba(0,255,200,.3);
  box-shadow:0 8px 50px rgba(0,0,0,.8),0 0 40px rgba(191,90,242,.15),0 0 80px rgba(255,45,120,.08);
}
[data-theme="neon"] nav{background:rgba(3,1,8,.92);border-bottom:1px solid rgba(255,0,200,.12)}
[data-theme="neon"] .nav-cta{
  background:linear-gradient(135deg,#ff2d78,#bf5af2);
  box-shadow:0 4px 18px rgba(255,45,120,.5);
}
[data-theme="neon"] .btn-primary{
  background:linear-gradient(135deg,#ff2d78,#bf5af2);
  box-shadow:0 6px 28px rgba(255,45,120,.5),0 2px 8px rgba(191,90,242,.3);
}
[data-theme="neon"] .btn-primary:hover{
  box-shadow:0 16px 48px rgba(255,45,120,.7),0 4px 16px rgba(191,90,242,.5);
}
[data-theme="neon"] .gt{
  background:linear-gradient(135deg,#ff2d78,#bf5af2,#00e5ff,#00ffa3) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;background-size:300% !important;
  animation:gtA 4s ease infinite alternate !important;
  filter:drop-shadow(0 0 20px rgba(255,45,120,.4)) drop-shadow(0 0 40px rgba(191,90,242,.2));
}
[data-theme="neon"] .hero-title{
  filter:drop-shadow(0 0 30px rgba(255,45,120,.3)) drop-shadow(0 0 60px rgba(191,90,242,.15));
}
[data-theme="neon"] .h-badge{
  background:rgba(255,45,120,.08) !important;
  border:1px solid rgba(255,45,120,.25) !important;
  color:#ff2d78 !important;
  box-shadow:0 0 20px rgba(255,45,120,.1);
}
[data-theme="neon"] .pulsedot{background:#00ffa3 !important;box-shadow:0 0 8px rgba(0,255,163,.6)}
[data-theme="neon"] .hstat-n{
  background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}
[data-theme="neon"] .svc-ico{
  background:linear-gradient(135deg,rgba(255,45,120,.2),rgba(191,90,242,.15)) !important;
  border-color:rgba(255,45,120,.3) !important;
}
[data-theme="neon"] .svc-card:hover .svc-ico{
  box-shadow:0 0 28px rgba(255,45,120,.5),0 0 56px rgba(191,90,242,.2) !important;
}
[data-theme="neon"] .svc-price{
  background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}
[data-theme="neon"] .ticker{background:rgba(3,1,8,.9) !important;border-color:rgba(255,0,200,.1) !important}
[data-theme="neon"] .tick-d{background:#ff2d78 !important;box-shadow:0 0 8px rgba(255,45,120,.6) !important}
[data-theme="neon"] .lbl{color:#ff2d78 !important}
[data-theme="neon"] .lbl::before,[data-theme="neon"] .lbl::after{background:#ff2d78 !important}
[data-theme="neon"] .sec-line{background:linear-gradient(90deg,transparent,#ff2d78,#bf5af2,#00e5ff,transparent) !important}
[data-theme="neon"] .sec-line::after{background:#ff2d78;box-shadow:0 0 12px #ff2d78,0 0 24px #ff2d78}
[data-theme="neon"] .wi-icon{
  background:linear-gradient(135deg,rgba(255,45,120,.2),rgba(191,90,242,.15)) !important;
  border-color:rgba(255,45,120,.25) !important;
}
[data-theme="neon"] .why-item:hover .wi-icon{
  box-shadow:0 0 20px rgba(255,45,120,.4) !important;
}
[data-theme="neon"] .wa-float{box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 30px rgba(0,255,163,.15)}
[data-theme="neon"] .call-float{background:linear-gradient(135deg,#ff2d78,#bf5af2);box-shadow:0 6px 22px rgba(255,45,120,.5)}
[data-theme="neon"] .logo-gem{
  background:radial-gradient(circle at 38% 35%,#1a0030,#080010) !important;
  border-color:rgba(255,45,120,.5) !important;
  box-shadow:0 0 16px rgba(255,45,120,.4),0 0 36px rgba(191,90,242,.15) !important;
}
[data-theme="neon"] .logo-gem::before{border-color:rgba(255,45,120,.3) !important}
[data-theme="neon"] .logo-gem::after{background:radial-gradient(circle,rgba(255,45,120,.2) 0%,transparent 70%) !important}
[data-theme="neon"] .logo-jk{
  background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}
[data-theme="neon"] #brands{background:rgba(3,1,8,.6)}
[data-theme="neon"] #payment{background:rgba(3,1,8,.6)}
[data-theme="neon"] .mnav{background:rgba(3,1,8,.97)}
[data-theme="neon"] footer{background:var(--bg3)}
[data-theme="neon"] .ft-jk{
  background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}
[data-theme="neon"] .cform-head{background:linear-gradient(135deg,#ff2d78,#bf5af2,#00e5ff) !important}
[data-theme="neon"] .cico{background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;box-shadow:0 4px 16px rgba(255,45,120,.4) !important}
[data-theme="neon"] .sbtn{background:linear-gradient(135deg,#ff2d78,#bf5af2) !important;box-shadow:0 6px 24px rgba(255,45,120,.5) !important}
/* Neon glow pulse on key elements */
[data-theme="neon"] .hero-stats{border-color:rgba(255,45,120,.15)}
[data-theme="neon"] .hstat:hover{background:rgba(255,45,120,.06)}

/* ═══════════════════════════════════
   HOVER SHIMMER EFFECT (all themes)
═══════════════════════════════════ */
.shimmer-hover{
  position:relative;overflow:hidden;
}
.shimmer-hover::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transition:none;
}
.shimmer-hover:hover::after{
  animation:shimmerSlide .8s ease forwards;
}
@keyframes shimmerSlide{to{left:150%}}

/* ═══════════════════════════════════
   GLOW PULSE ON SECTION HEADINGS
═══════════════════════════════════ */
.sec-head h2{
  position:relative;
}
.sec-head h2::after{
  content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:60px;height:3px;border-radius:10px;
  background:var(--grad-main);
  animation:headingGlow 2s ease-in-out infinite alternate;
}
@keyframes headingGlow{
  0%{width:40px;opacity:.4;box-shadow:0 0 8px rgba(124,111,255,.3)}
  100%{width:80px;opacity:.8;box-shadow:0 0 20px rgba(34,229,255,.5)}
}
[data-theme="neon"] .sec-head h2::after{
  background:linear-gradient(90deg,#ff2d78,#bf5af2);
  box-shadow:0 0 15px rgba(255,45,120,.5);
}







/* ═══════════════════════════════════
   RESET
═══════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth;font-size:15px}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  transition:background .4s,color .4s;
}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;font-weight:800;line-height:1.08;letter-spacing:-0.015em}

/* ═══════════════════════════════════
   DARK BACKGROUND SYSTEM
═══════════════════════════════════ */
#bg-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.bg-mesh{
  position:absolute;inset:-50%;width:200%;height:200%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(124,111,255,.22) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(34,229,255,.16) 0%,transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 80%, rgba(0,255,179,.1) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 70%, rgba(255,106,240,.1) 0%,transparent 50%),
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(68,204,255,.08) 0%,transparent 55%);
  animation:meshDrift 20s ease-in-out infinite alternate;
  filter:blur(2px);
}
@keyframes meshDrift{
  0%{transform:translate(0,0) rotate(0deg);filter:blur(2px) hue-rotate(0deg)}
  33%{transform:translate(2%,3%) rotate(1deg);filter:blur(3px) hue-rotate(15deg)}
  66%{transform:translate(-1%,2%) rotate(-1deg);filter:blur(2px) hue-rotate(-10deg)}
  100%{transform:translate(1%,-2%) rotate(.5deg);filter:blur(2.5px) hue-rotate(25deg)}
}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat linear infinite;}
.orb1{width:600px;height:600px;background:rgba(124,111,255,.12);top:-10%;left:-15%;animation-duration:25s}
.orb2{width:500px;height:500px;background:rgba(34,229,255,.1);top:20%;right:-10%;animation-duration:30s;animation-delay:-8s}
.orb3{width:400px;height:400px;background:rgba(0,255,179,.08);bottom:10%;left:20%;animation-duration:22s;animation-delay:-14s}
.orb4{width:350px;height:350px;background:rgba(255,106,240,.07);bottom:-5%;right:25%;animation-duration:28s;animation-delay:-4s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(4%,6%) scale(1.05)}
  50%{transform:translate(-3%,3%) scale(.95)}
  75%{transform:translate(5%,-4%) scale(1.02)}
}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,111,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,111,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%);
}
.bg-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;}

/* ═══════════════════════════════════
   TYPOGRAPHY & HELPERS
═══════════════════════════════════ */
.gt{
  background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:300%;animation:gtA 5s ease infinite alternate;
}
@keyframes gtA{0%{background-position:0%}100%{background-position:100%}}

.lbl{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);font-family:'JetBrains Mono',monospace;margin-bottom:.7rem;position:relative;
}
.lbl::before,.lbl::after{content:'';width:18px;height:1px;background:var(--cyan);opacity:.5}

/* ═══════════════════════════════════
   GLASS
═══════════════════════════════════ */
.glass{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:var(--shadow-card);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  position:relative;overflow:hidden;
}
.glass::before{content:'';position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;z-index:0;}
.glass:hover{border-color:var(--bdr-hi);box-shadow:var(--shadow-card),var(--shadow-glow),0 0 0 1px rgba(100,200,255,.08)}
.glass > *{position:relative;z-index:1}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.7rem;border-radius:var(--r-pill);
  font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;border:none;cursor:pointer;
  transition:all var(--transition);position:relative;overflow:hidden;letter-spacing:-.01em;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);pointer-events:none;}
.btn-primary{background:var(--grad-main);color:#fff;box-shadow:0 6px 28px rgba(124,111,255,.5),0 2px 8px rgba(34,229,255,.3)}
.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px rgba(124,111,255,.7),0 4px 16px rgba(34,229,255,.5)}
.btn-ghost{background:var(--card);border:1.5px solid var(--bdr);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(34,229,255,.06);transform:translateY(-3px)}
.btn-green{background:linear-gradient(135deg,#00e676,#00b863);color:#000;box-shadow:0 6px 24px rgba(0,230,118,.4)}
.btn-green:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 40px rgba(0,230,118,.6)}

.wrap{max-width:1100px;margin:0 auto}
section{padding:5rem 1.5rem;position:relative;z-index:2}

/* ═══════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rl{opacity:0;transform:translateX(-28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rl.on{opacity:1;transform:none}
.rr{opacity:0;transform:translateX(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rr.on{opacity:1;transform:none}
.rs{opacity:0;transform:scale(.93);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rs.on{opacity:1;transform:none}

/* ═══════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════ */
.theme-btn{
  width:46px;height:26px;background:var(--card);border:1.5px solid var(--bdr);
  border-radius:50px;cursor:pointer;position:relative;transition:all .35s cubic-bezier(.16,1,.3,1);flex-shrink:0;
}
.theme-btn::before{
  content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--grad-main);transition:all .35s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(124,111,255,.7);
}
[data-theme="light"] .theme-btn::before{transform:translateX(20px);background:linear-gradient(135deg,#ff6af0,#ff5577);box-shadow:0 0 10px rgba(255,106,240,.6)}

/* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;padding:.75rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(4,4,15,.8);backdrop-filter:blur(32px) saturate(1.8);
  border-bottom:1px solid var(--bdr);animation:navIn .7s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="light"] nav{background:rgba(255,255,255,.88);border-bottom:1px solid rgba(100,80,200,.15)}
@keyframes navIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

.logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0}

/* ═══════════════════════════════════
   LOGO GEM — MINI AC UNIT (replaces snowflake)
═══════════════════════════════════ */
.logo-gem{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;overflow:visible;
  cursor:pointer;user-select:none;
  background:radial-gradient(135deg at 38% 35%,#0d2a5a,#040f28);
  border:1.5px solid rgba(34,229,255,.45);
  box-shadow:0 0 16px rgba(34,229,255,.35),0 0 36px rgba(34,229,255,.12);
  transition:transform .18s,box-shadow .18s;
}
.logo-gem:active{transform:scale(.88)}
.logo-gem:hover{
  box-shadow:0 0 24px rgba(34,229,255,.6),0 0 55px rgba(34,229,255,.2);
  border-color:rgba(34,229,255,.75);
}
/* Rotating outer dashed ring */
.logo-gem::before{
  content:'';position:absolute;inset:-4px;border-radius:16px;
  border:1.5px dashed rgba(34,229,255,.3);
  animation:frostRingRotate 8s linear infinite;
}
/* Inner glow pulse */
.logo-gem::after{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(circle,rgba(34,229,255,.15) 0%,transparent 70%);
  animation:innerGlowPulse 2.2s ease-in-out infinite alternate;
}
/* Mini AC SVG — glow pulse */
.logo-ac-svg{
  position:relative;z-index:2;display:block;
  animation:acLogoGlow 2.5s ease-in-out infinite alternate;
}
@keyframes acLogoGlow{
  0%{filter:drop-shadow(0 0 2px rgba(34,229,255,.7)) drop-shadow(0 0 6px rgba(124,111,255,.4))}
  100%{filter:drop-shadow(0 0 6px rgba(34,229,255,1)) drop-shadow(0 0 14px rgba(34,229,255,.6))}
}

/* Footer gem — same AC unit style */
.ft-gem{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;overflow:visible;
  background:radial-gradient(135deg at 38% 35%,#0d2a5a,#040f28);
  border:1.5px solid rgba(34,229,255,.4);
  box-shadow:0 0 14px rgba(34,229,255,.3),0 0 28px rgba(34,229,255,.1);
}
.ft-gem::before{
  content:'';position:absolute;inset:-3px;border-radius:13px;
  border:1.5px dashed rgba(34,229,255,.25);
  animation:frostRingRotate 8s linear infinite;
}
.ft-gem::after{
  content:'';position:absolute;inset:0;border-radius:10px;
  background:radial-gradient(circle,rgba(34,229,255,.12) 0%,transparent 70%);
  animation:innerGlowPulse 2.2s ease-in-out infinite alternate;
}
.ft-ac-svg{
  position:relative;z-index:2;display:block;
  animation:acLogoGlow 2.5s ease-in-out infinite alternate;
}

@keyframes frostRingRotate{to{transform:rotate(360deg)}}
@keyframes innerGlowPulse{
  0%{opacity:.6;transform:scale(.85)}
  100%{opacity:1;transform:scale(1.05)}
}

/* Light theme overrides for new gem shape */
[data-theme="light"] .logo-gem{
  background:radial-gradient(135deg at 38% 35%,#1e3a5a,#0a1628);
}
[data-theme="light"] .ft-gem{
  background:radial-gradient(135deg at 38% 35%,#1e3a5a,#0a1628);
}



/* ─── ANIMATED LOGO TEXT ─── */
.logo-text-wrap{display:flex;flex-direction:column;gap:0}
.logo-name{
  font-size:.92rem;font-weight:900;color:var(--text);
  font-family:'Outfit',sans-serif;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.18rem;
  overflow:hidden;
}
.logo-jk{
  background:var(--grad-main);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:200%;
  animation:jkShimmer 3s ease-in-out infinite alternate;
  font-size:1rem;
}
@keyframes jkShimmer{
  0%{background-position:0%}
  100%{background-position:100%}
}
/* Each letter of CoolCraft waves */
.logo-cc-char{
  display:inline-block;
  animation:charWave 2.5s ease-in-out infinite;
  color:var(--text);
}
.logo-cc-char:nth-child(1){animation-delay:0s}
.logo-cc-char:nth-child(2){animation-delay:.08s}
.logo-cc-char:nth-child(3){animation-delay:.16s}
.logo-cc-char:nth-child(4){animation-delay:.24s}
.logo-cc-char:nth-child(5){animation-delay:.32s}
.logo-cc-char:nth-child(6){animation-delay:.40s}
.logo-cc-char:nth-child(7){animation-delay:.48s}
.logo-cc-char:nth-child(8){animation-delay:.56s}
.logo-cc-char:nth-child(9){animation-delay:.64s}
@keyframes charWave{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-3px)}
}
.logo-sub{
  font-size:.5rem;color:var(--text3);letter-spacing:.18em;
  text-transform:uppercase;margin-top:.05rem;
  font-family:'JetBrains Mono',monospace;
  overflow:hidden;white-space:nowrap;
  animation:subReveal 1.2s cubic-bezier(.16,1,.3,1) .8s both;
}
@keyframes subReveal{
  from{max-width:0;opacity:0}
  to{max-width:200px;opacity:1}
}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links a{font-size:.82rem;font-weight:600;color:var(--text2);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--grad-main);transition:width .3s}
.nav-links a:hover{color:var(--text)}.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.nav-cta{background:var(--grad-main);color:#fff;padding:.44rem 1.15rem;border-radius:var(--r-pill);font-weight:700;font-size:.8rem;font-family:'Outfit',sans-serif;box-shadow:0 4px 18px rgba(124,111,255,.4);transition:all .25s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,111,255,.6)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.mnav{display:none;position:fixed;top:61px;left:0;right:0;z-index:899;background:rgba(4,4,15,.97);backdrop-filter:blur(32px);padding:1.2rem 1.5rem;flex-direction:column;gap:.65rem;border-bottom:1px solid var(--bdr)}
[data-theme="light"] .mnav{background:rgba(255,255,255,.97)}
.mnav.open{display:flex}
.mnav a{font-size:.92rem;font-weight:600;color:var(--text2);padding:.48rem 0;border-bottom:1px solid var(--bdr)}
.mnav a:last-child{border:none;color:var(--violet);font-weight:700}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
#hero{min-height:100vh;display:flex;align-items:center;padding:0;overflow:hidden}
.hero-inner{max-width:1100px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:100px 1.5rem 3rem;position:relative;z-index:2}
.h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(34,229,255,.08);border:1px solid rgba(34,229,255,.2);color:var(--cyan);padding:.35rem 1rem;border-radius:var(--r-pill);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:1.4rem;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .1s both}
.pulsedot{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:pd 1.5s ease infinite}
@keyframes pd{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,179,.4)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(0,255,179,0)}}

/* ── Open/Closed status badge variants ── */
.dot-open{
  background:#00e676;
  animation:pd-open 1.4s ease infinite;
}
@keyframes pd-open{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,230,118,.5)}
  50%{opacity:.6;box-shadow:0 0 0 7px rgba(0,230,118,0)}
}
.dot-closed{
  background:#ff3b3b;
  animation:pd-closed 2.5s ease infinite;
}
@keyframes pd-closed{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,59,59,.4)}
  50%{opacity:.4;box-shadow:0 0 0 6px rgba(255,59,59,0)}
}
.badge-open{
  background:rgba(0,230,118,.1);
  border-color:rgba(0,230,118,.3);
  color:#00e676;
  box-shadow:0 0 14px rgba(0,230,118,.15);
}
.badge-closed{
  background:rgba(255,59,59,.1);
  border-color:rgba(255,59,59,.3);
  color:#ff6b6b;
  box-shadow:0 0 14px rgba(255,59,59,.12);
}
[data-theme="light"] .badge-open{background:rgba(0,180,90,.1);border-color:rgba(0,180,90,.3);color:#00963c}
[data-theme="light"] .badge-closed{background:rgba(200,30,30,.08);border-color:rgba(200,30,30,.25);color:#c01c1c}
[data-theme="light"] .dot-open{background:#00963c}
[data-theme="light"] .dot-closed{background:#c01c1c}
.hero-title{font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.02em;line-height:1;margin-bottom:.8rem;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .2s both}
.hero-tagline{font-size:clamp(1rem,2vw,1.3rem);color:var(--text2);line-height:1.7;max-width:560px;margin:0 auto 2rem;font-weight:400;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .32s both}
.hero-tagline strong{color:var(--text);font-weight:600}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .44s both}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bdr);border-radius:var(--r);overflow:hidden;border:1px solid var(--bdr);width:100%;max-width:580px;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .56s both}
.hstat{padding:1rem .8rem;background:var(--card);text-align:center;backdrop-filter:blur(12px);transition:all var(--transition)}
.hstat:hover{background:rgba(124,111,255,.08)}
.hstat-n{font-size:1.4rem;font-weight:900;letter-spacing:-0.015em;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Outfit',sans-serif;display:block;margin-bottom:.15rem}
.hstat-l{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
.hero-tech{display:inline-flex;align-items:center;gap:1rem;padding:.9rem 1.3rem;border-radius:var(--r-pill);margin-top:1.8rem;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .66s both}
.ht-ava{width:44px;height:44px;border-radius:50%;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;position:relative}
.ht-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;background:var(--grad-hero) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ht-name{font-size:.94rem;font-weight:700;color:var(--text);font-family:'Outfit',sans-serif}
.ht-role{font-size:.68rem;color:var(--text3);margin-top:.05rem}
.ht-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(0,255,179,.1);border:1px solid rgba(0,255,179,.25);color:var(--mint);padding:.22rem .65rem;border-radius:50px;font-size:.66rem;font-weight:700;white-space:nowrap;font-family:'JetBrains Mono',monospace}
.hero-float-label{display:inline-flex;align-items:center;gap:.4rem;position:absolute;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-pill);padding:.4rem .9rem;font-size:.72rem;font-weight:600;color:var(--text2);backdrop-filter:blur(16px);animation:floatItem 4s ease-in-out infinite alternate}
.fl1{top:22%;left:2%;animation-delay:0s}
.fl2{top:30%;right:2%;animation-delay:1.5s}
.fl3{bottom:22%;left:4%;animation-delay:.8s}
.fl4{bottom:28%;right:4%;animation-delay:2.2s}
@keyframes floatItem{0%{transform:translateY(0) rotate(-.5deg)}100%{transform:translateY(-10px) rotate(.5deg)}}
@keyframes fadeUp{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══════════════════════════════════
   TICKER
═══════════════════════════════════ */
.ticker{background:var(--bg2);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:.7rem 0;overflow:hidden;position:relative;z-index:2}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.tick-track{display:flex;gap:2.5rem;width:max-content;animation:tLeft 22s linear infinite}
.tick-track:hover{animation-play-state:paused}
@keyframes tLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tick-i{display:flex;align-items:center;gap:.45rem;font-size:.73rem;font-weight:600;color:var(--text2);white-space:nowrap;font-family:'JetBrains Mono',monospace}
.tick-d{width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.7;box-shadow:0 0 6px var(--cyan)}

/* ═══════════════════════════════════
   BOOK SERVICE
═══════════════════════════════════ */
#book{background:transparent}
.cmeths{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.cmeth{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:.85rem 1.1rem;transition:all var(--transition);backdrop-filter:blur(16px)}
.cmeth[href]:hover{border-color:rgba(34,229,255,.3);background:rgba(34,229,255,.05);transform:translateX(6px);box-shadow:0 0 30px rgba(34,229,255,.08)}
.cico{width:38px;height:38px;flex-shrink:0;background:var(--grad-main);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 4px 16px rgba(124,111,255,.3)}
.clbl{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;font-family:'JetBrains Mono',monospace}
.cval{font-size:.88rem;font-weight:700;color:var(--text);margin-top:.06rem;font-family:'Outfit',sans-serif}
.cform-box{overflow:hidden}
.cform-head{height:3px;background:var(--grad-hero)}
.cform-body{padding:1.6rem}
.cform-body h3{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:1.2rem;font-family:'Outfit',sans-serif}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fg{margin-bottom:.8rem}
.fg label{display:block;font-size:.62rem;color:var(--text3);margin-bottom:.35rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--text);padding:.68rem .9rem;border-radius:var(--r-sm);font-size:.84rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .25s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text3)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:rgba(34,229,255,.4);background:rgba(34,229,255,.04);box-shadow:0 0 0 3px rgba(34,229,255,.08)}
.fg select option{background:var(--bg3);color:var(--text)}
.fg textarea{resize:vertical;min-height:70px}
.sbtn{width:100%;background:var(--grad-main);color:#fff;border:none;padding:.9rem;border-radius:var(--r-sm);font-size:.92rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .3s;box-shadow:0 6px 24px rgba(124,111,255,.4);letter-spacing:-.01em;position:relative;overflow:hidden}
.sbtn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent)}
.sbtn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(124,111,255,.6)}

/* ── LOCATION AREA ROW ── */
.area-row{display:flex;gap:.5rem;align-items:stretch}
.area-inp{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--text);padding:.68rem .9rem;border-radius:var(--r-sm);font-size:.84rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .25s}
.area-inp::placeholder{color:var(--text3)}
.area-inp:focus{border-color:rgba(34,229,255,.4);background:rgba(34,229,255,.04);box-shadow:0 0 0 3px rgba(34,229,255,.08)}
.loc-btn{
  display:inline-flex;align-items:center;gap:.38rem;
  background:linear-gradient(135deg,rgba(34,229,255,.12),rgba(124,111,255,.1));
  border:1.5px solid rgba(34,229,255,.35);
  color:var(--cyan);
  padding:.55rem .85rem;
  border-radius:var(--r-sm);
  font-size:.74rem;font-weight:700;
  font-family:'Outfit',sans-serif;
  cursor:pointer;white-space:nowrap;
  transition:all .25s;
  flex-shrink:0;
}
.loc-btn:hover{background:linear-gradient(135deg,rgba(34,229,255,.22),rgba(124,111,255,.18));border-color:rgba(34,229,255,.65);transform:translateY(-1px);box-shadow:0 4px 14px rgba(34,229,255,.2)}
.loc-btn.loading{opacity:.7;pointer-events:none;border-color:rgba(200,200,200,.3);color:var(--text3)}
.loc-btn.success{background:linear-gradient(135deg,rgba(0,255,179,.12),rgba(34,229,255,.1));border-color:rgba(0,255,179,.45);color:var(--mint)}
.loc-btn.error{background:rgba(255,85,119,.06);border-color:rgba(255,85,119,.35);color:#ff5577}
.loc-btn svg{flex-shrink:0;transition:transform .5s}
.loc-btn.loading svg{animation:locSpin .8s linear infinite}
@keyframes locSpin{to{transform:rotate(360deg)}}
.loc-status{
  margin-top:.35rem;font-size:.68rem;line-height:1.5;
  padding:.3rem .5rem;border-radius:8px;
  display:none;
  font-family:'JetBrains Mono',monospace;
}
.loc-status.show{display:block}
.loc-status.ok{color:var(--mint);background:rgba(0,255,179,.07);border:1px solid rgba(0,255,179,.15)}
.loc-status.err{color:#ff7a9a;background:rgba(255,85,119,.06);border:1px solid rgba(255,85,119,.15)}
.loc-status.info{color:var(--cyan);background:rgba(34,229,255,.06);border:1px solid rgba(34,229,255,.15)}

/* ═══════════════════════════════════
   SERVICES — ANIMATED ICONS
═══════════════════════════════════ */
#services{background:transparent}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.5rem}
@media(max-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.svc-grid{grid-template-columns:1fr}}

.svc-card{padding:1.5rem;cursor:default;transition:all var(--transition)}
.svc-card:hover{transform:translateY(-6px)}
.svc-card::after{content:'';position:absolute;inset:0;border-radius:var(--r);background:radial-gradient(circle at 15% 85%,rgba(124,111,255,.12),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc-card:hover::after{opacity:1}
.svc-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}

/* Animated service icons */
.svc-ico{
  width:52px;height:52px;
  background:linear-gradient(135deg,rgba(124,111,255,.2),rgba(34,229,255,.12));
  border:1px solid rgba(124,111,255,.25);border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  transition:all var(--transition);position:relative;overflow:hidden;
}
.svc-ico::before{content:'';position:absolute;inset:0;background:var(--grad-main);opacity:0;transition:opacity .3s;border-radius:15px}
.svc-card:hover .svc-ico{border-color:rgba(124,111,255,.5);box-shadow:0 0 28px rgba(124,111,255,.4);transform:scale(1.1)}
.svc-ico-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}

/* ── SERVICE ICON SVG ANIMATIONS ── */
.svc-svg{display:block;transition:all var(--transition)}
.svc-card:hover .svc-svg{filter:drop-shadow(0 0 8px rgba(124,111,255,.5))}

/* Repair: wrench spins + shakes */
.anim-repair{animation:wrenchSwing 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wrenchSwing{
  0%   {transform:rotate(-25deg) translate(0,0)}
  20%  {transform:rotate(10deg)  translate(-1px,-1px)}
  40%  {transform:rotate(-20deg) translate(0,0)}
  60%  {transform:rotate(8deg)   translate(-1px,-1px)}
  80%  {transform:rotate(-15deg) translate(0,0)}
  100% {transform:rotate(-25deg) translate(0,0)}
}

/* Clean: brush strokes back and forth */
.anim-clean{animation:cleanStroke 2s ease-in-out infinite}
@keyframes cleanStroke{
  0%,100%{transform:translateX(0) scaleX(1)}
  25%{transform:translateX(5px) scaleX(1.1)}
  75%{transform:translateX(-5px) scaleX(0.95)}
}
.anim-clean-drops{animation:dropsAppear 2s ease-in-out infinite}
@keyframes dropsAppear{
  0%,40%,100%{opacity:0;transform:translateY(0)}
  60%,80%{opacity:1;transform:translateY(4px)}
}

/* Install: unit slides down into place */
.anim-install{animation:slideDown 2.2s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes slideDown{
  0%,100%{transform:translateY(-4px);opacity:.7}
  45%,70%{transform:translateY(0);opacity:1}
}
.anim-bolts{animation:boltsFix 2.2s ease-in-out infinite}
@keyframes boltsFix{
  0%,30%{opacity:0;transform:scale(0)}
  50%,90%,100%{opacity:1;transform:scale(1)}
}

/* Gas: molecules float upward */
.anim-gas-tank{animation:tankRock 1.8s ease-in-out infinite}
@keyframes tankRock{
  0%,100%{transform:rotate(0)}
  30%{transform:rotate(-4deg)}
  70%{transform:rotate(4deg)}
}
.anim-mol1{animation:molFloat 1.8s ease-out infinite}
.anim-mol2{animation:molFloat 1.8s ease-out infinite .4s}
.anim-mol3{animation:molFloat 1.8s ease-out infinite .8s}
@keyframes molFloat{
  0%{transform:translate(0,0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--mx,0px),var(--my,-18px));opacity:0}
}

/* Inspect: magnifier zooms + scans */
.anim-mag{animation:magScan 2.4s ease-in-out infinite}
@keyframes magScan{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(4px,-3px) rotate(8deg)}
  50%{transform:translate(-2px,3px) rotate(-5deg)}
  75%{transform:translate(3px,2px) rotate(6deg)}
}
.anim-pulse-ring{animation:scanRing 2.4s ease-in-out infinite}
@keyframes scanRing{
  0%,60%,100%{opacity:0;r:6}
  40%{opacity:.6;r:9}
}

.svc-num{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--text3);font-weight:700}
.svc-card h3{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:.35rem;font-family:'Outfit',sans-serif}
.svc-card p{font-size:.8rem;color:var(--text2);line-height:1.7}
.svc-price{display:inline-flex;align-items:center;gap:.3rem;margin-top:.9rem;font-size:.76rem;font-weight:700;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'JetBrains Mono',monospace}

/* ═══════════════════════════════════
   BRANDS
═══════════════════════════════════ */
#brands{background:var(--bg2);padding:4rem 1.5rem;overflow:hidden}
.brand-wall-h{position:relative;overflow:hidden;margin-top:2.2rem}
.brand-wall-h::before,.brand-wall-h::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.brand-wall-h::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.brand-wall-h::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.brow{display:flex;gap:1.1rem;width:max-content;padding:.4rem 0}
.brow.fwd{animation:bFwd 32s linear infinite}
.brow.rev{animation:bRev 38s linear infinite;margin-top:1rem}
.brand-wall-h:hover .brow{animation-play-state:paused}
@keyframes bFwd{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bRev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.ac-card-h{position:relative;width:190px;height:125px;border-radius:14px;overflow:hidden;flex-shrink:0;cursor:default;border:1px solid var(--bdr);transition:all var(--transition);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ac-card-h:hover{transform:translateY(-6px) scale(1.04);border-color:var(--bdr-hi);box-shadow:0 16px 40px rgba(0,0,0,.55),var(--shadow-glow)}
.ac-card-h::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent);z-index:3}
.ac-bname{position:absolute;top:0;left:0;right:0;padding:.55rem .75rem;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);z-index:4;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:900;color:#fff;letter-spacing:-.01em}
.ac-badge-h{position:absolute;bottom:.5rem;right:.6rem;z-index:4;font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:700;padding:.16rem .52rem;border-radius:50px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55)}

/* ═══════════════════════════════════
   WHY + REVIEWS
═══════════════════════════════════ */
#why{background:transparent}
.why-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1.6rem}
.why-item{display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;transition:all var(--transition)}
.why-item:hover{transform:translateX(5px);border-color:rgba(34,229,255,.25)}
.wi-icon{width:38px;height:38px;flex-shrink:0;background:linear-gradient(135deg,rgba(124,111,255,.2),rgba(34,229,255,.1));border:1px solid rgba(124,111,255,.22);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;transition:all var(--transition)}
.why-item:hover .wi-icon{background:linear-gradient(135deg,rgba(124,111,255,.35),rgba(34,229,255,.2));border-color:rgba(34,229,255,.35);box-shadow:0 0 16px rgba(34,229,255,.2)}
.wi-h{font-size:.9rem;font-weight:700;color:var(--text);font-family:'Outfit',sans-serif}
.wi-p{font-size:.78rem;color:var(--text2);line-height:1.65;margin-top:.12rem}
.rpanel{overflow:hidden}
.rtop{background:linear-gradient(135deg,rgba(124,111,255,.12),rgba(34,229,255,.07));padding:1.4rem;border-bottom:1px solid var(--bdr)}
.rtop-h{font-size:.92rem;font-weight:800;color:var(--text);margin-bottom:.9rem;font-family:'Outfit',sans-serif}
.rgate{display:flex;flex-direction:column;gap:.65rem}
.rgate-info{font-size:.74rem;color:var(--text2);line-height:1.55}
.rinp{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--bdr);color:var(--text);padding:.65rem .9rem;border-radius:var(--r-sm);font-size:.84rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s}
.rinp::placeholder{color:var(--text3)}
.rinp:focus{border-color:rgba(124,111,255,.45);background:rgba(124,111,255,.06);box-shadow:0 0 0 3px rgba(124,111,255,.1)}
.rinp-row{display:grid;grid-template-columns:1fr auto;gap:.6rem}
.gbtn{background:var(--grad-main);color:#fff;border:none;padding:.65rem 1.1rem;border-radius:var(--r-sm);font-size:.8rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .25s;white-space:nowrap}
.gbtn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,111,255,.4)}
.otp-hint{font-size:.7rem;color:rgba(124,111,255,.9);margin-top:.12rem}
.rwrite{display:none;flex-direction:column;gap:.65rem}
.rwrite.show{display:flex}
.starpick{display:flex;gap:.3rem}
.starpick span{font-size:1.4rem;color:var(--text3);cursor:pointer;transition:all .15s;user-select:none}
.starpick span.on{color:var(--amber);transform:scale(1.15)}
.rtxtarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--bdr);color:var(--text);padding:.65rem .9rem;border-radius:var(--r-sm);font-size:.82rem;font-family:'DM Sans',sans-serif;resize:none;height:72px;outline:none;transition:all .2s}
.rtxtarea:focus{border-color:rgba(124,111,255,.45)}
.rpostbtn{background:var(--grad-main);color:#fff;border:none;padding:.68rem;border-radius:var(--r-sm);font-size:.84rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .25s}
.rpostbtn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,111,255,.4)}
.rlist{max-height:250px;overflow-y:auto;padding:.95rem .95rem 0}
.rlist::-webkit-scrollbar{width:3px}
.rlist::-webkit-scrollbar-thumb{background:rgba(124,111,255,.4);border-radius:10px}
.ritem{padding:.9rem;background:rgba(255,255,255,.03);border:1px solid var(--bdr);border-radius:14px;margin-bottom:.7rem;animation:fadeUp .4s ease both}
.ri-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.ri-nm{font-size:.8rem;font-weight:700;color:var(--text);font-family:'Outfit',sans-serif}
.ri-dt{font-size:.64rem;color:var(--text3);font-family:'JetBrains Mono',monospace}
.ri-s{color:var(--amber);font-size:.8rem;margin-bottom:.32rem;letter-spacing:.06em}
.ri-t{font-size:.8rem;color:var(--text2);line-height:1.65;font-style:italic}
.vtag{display:inline-flex;align-items:center;gap:.22rem;font-size:.62rem;font-weight:600;color:var(--mint);background:rgba(0,255,179,.08);border:1px solid rgba(0,255,179,.18);border-radius:50px;padding:.1rem .5rem;margin-top:.35rem;font-family:'JetBrains Mono',monospace}
.ravg{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem;border-top:1px solid var(--bdr)}
.ravn{font-size:2.2rem;font-weight:900;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em;line-height:1;font-family:'Outfit',sans-serif}
.ravs{color:var(--amber);font-size:.85rem}
.ravt{font-size:.68rem;color:var(--text3);margin-top:.15rem;font-family:'JetBrains Mono',monospace}

/* ═══════════════════════════════════
   PAYMENT — NEW ICONS
═══════════════════════════════════ */
#payment{background:var(--bg2)}
.pay-left-card{overflow:hidden}
.pay-card-head{padding:1.3rem 1.5rem;background:linear-gradient(135deg,rgba(124,111,255,.15),rgba(34,229,255,.08));border-bottom:1px solid var(--bdr)}
.pay-card-head h3{font-size:1.05rem;font-weight:800;color:var(--text);font-family:'Outfit',sans-serif;margin-bottom:.25rem}
.pay-card-head p{font-size:.78rem;color:var(--text2);line-height:1.55}
.pay-card-body{padding:1.3rem 1.5rem}
.amt-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:.45rem;font-family:'JetBrains Mono',monospace}
.amt-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem}
.amt-sym{font-size:1.4rem;font-weight:900;color:var(--violet);line-height:1;font-family:'Outfit',sans-serif}
.amt-inp{flex:1;background:rgba(255,255,255,.05);border:1.5px solid var(--bdr);color:var(--text);padding:.68rem .95rem;border-radius:var(--r-sm);font-size:1.25rem;font-weight:800;font-family:'Outfit',sans-serif;outline:none;transition:all .2s;letter-spacing:-.02em}
.amt-inp:focus{border-color:rgba(124,111,255,.5);background:rgba(124,111,255,.06);box-shadow:0 0 0 3px rgba(124,111,255,.1)}
.amt-inp::placeholder{color:var(--text3);font-size:.9rem;font-weight:400}
.quick-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.qa{background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--text2);padding:.32rem .8rem;border-radius:50px;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.qa:hover,.qa.on{background:rgba(124,111,255,.14);border-color:rgba(124,111,255,.4);color:var(--violet)}
.purp-inp{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--text);padding:.65rem .95rem;border-radius:var(--r-sm);font-size:.84rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s;margin-bottom:1.1rem}
.purp-inp:focus{border-color:rgba(124,111,255,.4);background:rgba(124,111,255,.05)}
.purp-inp::placeholder{color:var(--text3)}

.pay-btns{display:flex;flex-direction:column;gap:.65rem}
.pbtn{display:flex;align-items:center;gap:1rem;padding:.9rem 1.15rem;border-radius:var(--r-sm);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .3s;width:100%;position:relative;overflow:hidden}
.pbtn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent)}
.pbtn:hover{transform:translateY(-2px)}

/* GPay */
.pbtn-g{background:#fff;color:#202124;box-shadow:0 4px 16px rgba(255,255,255,.1)}
.pbtn-g:hover{box-shadow:0 10px 28px rgba(255,255,255,.2)}
.pay-logo-g{display:flex;align-items:center;font-weight:900;font-size:1rem;letter-spacing:-.02em;flex-shrink:0}
.pay-logo-g .g{color:#4285f4}.pay-logo-g .o1{color:#ea4335}.pay-logo-g .o2{color:#fbbc04}.pay-logo-g .gl{color:#34a853}.pay-logo-g .pay{color:#202124;font-weight:700;font-size:.85rem;margin-left:.1rem}
/* PhonePe */
.pbtn-p{background:linear-gradient(135deg,#5f259f,#3d1571);color:#fff;box-shadow:0 4px 16px rgba(95,37,159,.35)}
.pbtn-p:hover{box-shadow:0 10px 28px rgba(95,37,159,.55)}
.pay-logo-p{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.pay-logo-p .pp-circle{width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;color:#5f259f;font-family:'Outfit',sans-serif;flex-shrink:0}
.pay-logo-p .pp-text{font-weight:800;font-size:.9rem;color:#fff;font-family:'Outfit',sans-serif;letter-spacing:-.01em}
/* Paytm */
.pbtn-t{background:linear-gradient(135deg,#00bad1,#0099b8);color:#fff;box-shadow:0 4px 16px rgba(0,186,209,.35)}
.pbtn-t:hover{box-shadow:0 10px 28px rgba(0,186,209,.55)}
.pay-logo-t{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.pay-logo-t .pt-box{width:28px;height:28px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:900;color:#00bad1;font-family:'Outfit',sans-serif;letter-spacing:-0.015em;flex-shrink:0}
.pay-logo-t .pt-text{font-weight:800;font-size:.9rem;color:#fff;font-family:'Outfit',sans-serif}
/* UPI */
.pbtn-u{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 4px 16px rgba(249,115,22,.35)}
.pbtn-u:hover{box-shadow:0 10px 28px rgba(249,115,22,.55)}
.pay-logo-u{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.pay-logo-u .upi-box{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:900;color:#fff;font-family:'Outfit',sans-serif;letter-spacing:-0.015em;border:1px solid rgba(255,255,255,.3);flex-shrink:0}
.pay-logo-u .upi-text{font-weight:800;font-size:.9rem;color:#fff;font-family:'Outfit',sans-serif}
.ptxt{flex:1;text-align:left}
.pt1{font-size:.88rem;font-weight:700;line-height:1.1;font-family:'Outfit',sans-serif}
.pt2{font-size:.68rem;opacity:.7;font-weight:400;margin-top:.05rem}
.parr{font-size:.85rem;opacity:.5}

.upi-copy-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;background:rgba(255,255,255,.04);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:.8rem 1.1rem;margin-top:.8rem}
.upi-lbl{font-size:.62rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;font-family:'JetBrains Mono',monospace}
.upi-val{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text)}
.copy-btn{background:rgba(124,111,255,.1);border:1px solid rgba(124,111,255,.25);color:var(--violet);padding:.4rem .9rem;border-radius:9px;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif;white-space:nowrap}
.copy-btn:hover{background:rgba(124,111,255,.22);border-color:rgba(124,111,255,.45)}
.copy-btn.ok{background:rgba(0,255,179,.1);border-color:rgba(0,255,179,.3);color:var(--mint)}

/* ─── PAYMENT INFO — NEW ICON STYLE ─── */
.qr-card{text-align:center;padding:1.8rem}
.qr-title{font-size:.95rem;font-weight:800;color:var(--text);font-family:'Outfit',sans-serif;margin-bottom:.25rem}
.qr-sub{font-size:.77rem;color:var(--text2);line-height:1.55;margin-bottom:1.2rem}
.qr-wrap{background:#fff;border-radius:16px;padding:.95rem;display:inline-block;margin-bottom:1.1rem;box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1)}
#qrCanvas{width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.qr-uid{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--violet);background:rgba(255,255,255,.04);border:1px solid var(--bdr);border-radius:10px;padding:.55rem .95rem}

/* New payment info icons */
.pay-info{padding:1.4rem}
.pay-info h4{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.9rem;font-family:'Outfit',sans-serif}
.pil-list{display:flex;flex-direction:column;gap:.55rem}
.pil{display:flex;gap:.75rem;align-items:flex-start}
.pil-icon-wrap{
  width:32px;height:32px;flex-shrink:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
  position:relative;overflow:hidden;
}
.pil-icon-wrap::before{content:'';position:absolute;inset:0;opacity:.85}
.pil-direct .pil-icon-wrap{background:linear-gradient(135deg,#00c853,#00e676)}
.pil-secure .pil-icon-wrap{background:linear-gradient(135deg,#7c6fff,#22e5ff)}
.pil-receipt .pil-icon-wrap{background:linear-gradient(135deg,#f97316,#fbbf24)}
.pil-help .pil-icon-wrap{background:linear-gradient(135deg,#ff5577,#ff6af0)}
.pil-icon-svg{position:relative;z-index:1;width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pil-t{font-size:.78rem;color:var(--text2);line-height:1.65;padding-top:.35rem}

/* ═══════════════════════════════════
   AREAS
═══════════════════════════════════ */
#areas{background:transparent;padding:4rem 1.5rem}
.area-cloud{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2rem}
.atag{background:var(--card);border:1px solid var(--bdr);color:var(--text2);padding:.4rem 1rem;border-radius:50px;font-size:.78rem;font-weight:500;transition:all .2s;cursor:default;backdrop-filter:blur(12px)}
.atag:hover{background:rgba(124,111,255,.1);border-color:rgba(124,111,255,.32);color:var(--violet);transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,111,255,.15)}
.atag.main{background:rgba(124,111,255,.12);border-color:rgba(124,111,255,.32);color:var(--violet);font-weight:700}
/* Coverage map */
.coverage-map-wrap{text-align:center;margin-top:1.2rem}
#coverageMap{border:1px solid var(--bdr);box-shadow:0 8px 40px rgba(0,0,0,.35)}
.coverage-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin:.9rem 0 .5rem;font-size:.76rem;color:var(--text2)}
.cleg-item{display:flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace}
.cleg-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.coverage-note{font-size:.74rem;color:var(--text3);margin-top:.3rem;font-family:'JetBrains Mono',monospace}
.gmap-outer{position:relative;width:100%;max-width:680px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--bdr);box-shadow:0 8px 40px rgba(0,0,0,.35)}
.gmap-iframe{display:block;width:100%;height:440px;border:none;filter:hue-rotate(200deg) saturate(1.2) brightness(.9)}
[data-theme="light"] .gmap-iframe{filter:none}
.gmap-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
@keyframes mapRingRotate{to{transform:rotate(360deg)}}
/* Google Maps container */
.gmap-container{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--bdr);box-shadow:0 12px 48px rgba(0,0,0,.4);}
.gmap-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;}
/* Pulsing pin at Repalle centre */
.gmap-pin{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}
.gmap-pin-dot{width:14px;height:14px;border-radius:50%;background:#22e5ff;
  box-shadow:0 0 0 3px rgba(34,229,255,.4),0 0 20px rgba(34,229,255,.6);
  animation:pinPulse 2s ease-in-out infinite;z-index:2;position:relative}
@keyframes pinPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(34,229,255,.4),0 0 20px rgba(34,229,255,.6)}
  50%{transform:scale(1.2);box-shadow:0 0 0 6px rgba(34,229,255,.2),0 0 30px rgba(34,229,255,.8)}}
.gmap-pin-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(34,229,255,.4);animation:ringExpand 3s ease-out infinite}
.gmap-pin-ring.r1{width:60px;height:60px;animation-delay:0s}
.gmap-pin-ring.r2{width:110px;height:110px;animation-delay:.8s}
.gmap-pin-ring.r3{width:170px;height:170px;animation-delay:1.6s}
@keyframes ringExpand{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
.gmap-pin-label{
  margin-top:10px;background:rgba(4,4,15,.88);backdrop-filter:blur(12px);
  border:1px solid rgba(34,229,255,.4);border-radius:10px;
  padding:.38rem .75rem;font-size:.72rem;font-weight:700;color:#22e5ff;
  font-family:'Outfit',sans-serif;text-align:center;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:2;position:relative;
}
.gmap-pin-label span{font-size:.62rem;color:rgba(34,229,255,.7);font-weight:400}
.gmap-radius-badge{
  position:absolute;bottom:12px;right:12px;
  background:rgba(124,111,255,.88);backdrop-filter:blur(8px);
  color:#fff;padding:.3rem .75rem;border-radius:50px;
  font-size:.68rem;font-weight:700;font-family:'JetBrains Mono',monospace;
  border:1px solid rgba(124,111,255,.5);
  box-shadow:0 2px 10px rgba(124,111,255,.4);
}

/* ═══════════════════════════════════
   FLOATS
═══════════════════════════════════ */
.wa-float{position:fixed;bottom:1.6rem;right:1.6rem;z-index:800;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 28px rgba(37,211,102,.5);transition:all .3s}
.wa-float:hover{transform:scale(1.12);box-shadow:0 16px 44px rgba(37,211,102,.65)}
.wa-float .ring{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:rp 2.2s ease-out infinite}
@keyframes rp{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.3);opacity:0}}
.call-float{position:fixed;bottom:7.2rem;right:1.6rem;z-index:800;width:48px;height:48px;border-radius:50%;background:var(--grad-main);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 6px 22px rgba(124,111,255,.5);transition:all .3s}
.call-float:hover{transform:scale(1.1)}

/* ═══════════════════════════════════
   SECTION HELPERS
═══════════════════════════════════ */
.sec-head{text-align:center;margin-bottom:2.5rem}
.sec-head h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}
.sec-head p{font-size:.88rem;color:var(--text2);margin-top:.55rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.75}
.sec-line{height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);margin:0 auto;width:60%;opacity:.25;margin-bottom:4rem;animation:lineGlow 3s ease-in-out infinite alternate}
@keyframes lineGlow{0%{opacity:.15;width:40%}100%{opacity:.35;width:70%}}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch}
.two-col > *{min-height:0}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer{background:var(--bg3);border-top:1px solid var(--bdr);padding:2rem 1.5rem;text-align:center;position:relative;z-index:2}
.ft-logo{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:.8rem;justify-content:center}
/* Footer nm text */
.ft-nm{
  font-size:.95rem;font-weight:900;color:var(--text);
  font-family:'Outfit',sans-serif;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.15rem;
}
.ft-jk{
  background:var(--grad-main);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:200%;
  animation:jkShimmer 3s ease-in-out infinite alternate;
}
.ft-cc-char{
  display:inline-block;
  animation:charWave 2.5s ease-in-out infinite;
  color:var(--text);
}
.ft-cc-char:nth-child(1){animation-delay:.05s}
.ft-cc-char:nth-child(2){animation-delay:.13s}
.ft-cc-char:nth-child(3){animation-delay:.21s}
.ft-cc-char:nth-child(4){animation-delay:.29s}
.ft-cc-char:nth-child(5){animation-delay:.37s}
.ft-cc-char:nth-child(6){animation-delay:.45s}
.ft-cc-char:nth-child(7){animation-delay:.53s}
.ft-cc-char:nth-child(8){animation-delay:.61s}
.ft-cc-char:nth-child(9){animation-delay:.69s}
[data-theme="light"] .ft-cc-char{color:#08051a}
footer p{font-size:.75rem;color:var(--text3);line-height:2}
footer a{color:var(--violet)}
.ftkw{margin-top:.8rem;font-size:.6rem;color:var(--text3);opacity:.45;line-height:2.4}

/* ═══════════════════════════════════
   PWA
═══════════════════════════════════ */
#pwa{display:none;position:fixed;bottom:6.5rem;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--bdr-hi);border-radius:16px;padding:.9rem 1.2rem;z-index:800;box-shadow:0 20px 60px rgba(0,0,0,.6);align-items:center;gap:.85rem;max-width:340px;width:calc(100% - 3rem)}
#pwa.show{display:flex;animation:fadeUp .4s ease}
#pwa p{color:var(--text);font-size:.8rem;flex:1;line-height:1.5}
#pwa p strong{color:var(--violet)}
.pwa-y{background:var(--grad-main);color:#fff;border:none;padding:.52rem 1.1rem;border-radius:50px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:'Outfit',sans-serif;white-space:nowrap}
.pwa-n{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.1rem;line-height:1}

/* ═══════════════════════════════════
   ADMIN DASHBOARD
═══════════════════════════════════ */


#adminOverlay{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
}
#adminOverlay.show{display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto}

#adminPanel{
  background:var(--bg3);border:1px solid var(--bdr);border-radius:24px;
  width:100%;max-width:960px;margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  overflow:hidden;position:relative;
}
.adm-header{
  background:linear-gradient(135deg,rgba(255,106,240,.15),rgba(124,111,255,.1));
  padding:1.4rem 1.8rem;
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
}
.adm-title{font-size:1.3rem;font-weight:900;color:var(--text);font-family:'Outfit',sans-serif}
.adm-title span{background:var(--grad-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.adm-close{background:rgba(255,255,255,.08);border:1px solid var(--bdr);color:var(--text);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s;flex-shrink:0}
.adm-close:hover{background:rgba(255,85,119,.2);border-color:rgba(255,85,119,.4)}

/* Admin login */
.adm-login{padding:2.5rem;max-width:380px;margin:0 auto;text-align:center}
.adm-login h3{font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:.5rem;font-family:'Outfit',sans-serif}
.adm-login p{font-size:.8rem;color:var(--text2);margin-bottom:1.5rem;line-height:1.6}
.adm-inp{width:100%;background:rgba(255,255,255,.05);border:1.5px solid var(--bdr);color:var(--text);padding:.75rem 1rem;border-radius:var(--r-sm);font-size:.9rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s;margin-bottom:.8rem}
.adm-inp:focus{border-color:rgba(255,106,240,.5);box-shadow:0 0 0 3px rgba(255,106,240,.12)}
.adm-inp::placeholder{color:var(--text3)}
.adm-submit{width:100%;background:linear-gradient(135deg,#ff6af0,#ff5577);color:#fff;border:none;padding:.85rem;border-radius:var(--r-sm);font-size:.92rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .25s;box-shadow:0 6px 20px rgba(255,106,240,.4)}
.adm-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,106,240,.6)}

/* Dashboard tabs */
.adm-tabs{display:flex;gap:0;border-bottom:1px solid var(--bdr);overflow-x:auto}
.adm-tab{padding:.75rem 1.2rem;font-size:.78rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;border-bottom:2px solid transparent;font-family:'Outfit',sans-serif;background:none;border-top:none;border-left:none;border-right:none}
.adm-tab.active{color:var(--pink);border-bottom-color:var(--pink);background:rgba(255,106,240,.05)}
.adm-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.03)}

/* Stat cards */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;padding:1.2rem 1.5rem;border-bottom:1px solid var(--bdr)}
@media(max-width:600px){.adm-stats{grid-template-columns:repeat(2,1fr)}}
.adm-stat{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:1rem;text-align:center;transition:all .2s}
.adm-stat:hover{transform:translateY(-2px);border-color:var(--bdr-hi)}
.adm-sn{font-size:1.8rem;font-weight:900;font-family:'Outfit',sans-serif;display:block;letter-spacing:-.02em}
.adm-sl{font-size:.62rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:.15rem;font-family:'JetBrains Mono',monospace}
.adm-sn.pink{background:linear-gradient(135deg,#ff6af0,#ff5577);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.adm-sn.violet{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.adm-sn.mint{background:linear-gradient(135deg,#00ffb3,#22e5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.adm-sn.amber{background:linear-gradient(135deg,#ffcc44,#ff9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Table */
.adm-content{padding:1.2rem 1.5rem;min-height:280px;max-height:55vh;overflow-y:auto}
.adm-content::-webkit-scrollbar{width:4px}
.adm-content::-webkit-scrollbar-thumb{background:rgba(255,106,240,.3);border-radius:10px}

.adm-toolbar{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.adm-search{flex:1;min-width:160px;background:rgba(255,255,255,.05);border:1px solid var(--bdr);color:var(--text);padding:.55rem .85rem;border-radius:var(--r-sm);font-size:.8rem;font-family:'DM Sans',sans-serif;outline:none}
.adm-search:focus{border-color:rgba(255,106,240,.4)}
.adm-filter{background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--text2);padding:.5rem .85rem;border-radius:var(--r-sm);font-size:.76rem;font-family:'DM Sans',sans-serif;cursor:pointer;outline:none}

.adm-table{width:100%;border-collapse:collapse;font-size:.78rem}
.adm-table th{padding:.6rem .8rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'JetBrains Mono',monospace;border-bottom:1px solid var(--bdr);text-align:left;white-space:nowrap}
.adm-table td{padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text2);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tr:hover td{background:rgba(255,255,255,.02);color:var(--text)}
.status-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:50px;font-size:.64rem;font-weight:700;font-family:'JetBrains Mono',monospace}
.status-new{background:rgba(34,229,255,.1);color:var(--cyan);border:1px solid rgba(34,229,255,.25)}
.status-done{background:rgba(0,255,179,.1);color:var(--mint);border:1px solid rgba(0,255,179,.25)}
.status-pending{background:rgba(255,204,68,.1);color:var(--amber);border:1px solid rgba(255,204,68,.25)}
.status-repeat{background:rgba(255,106,240,.1);color:var(--pink);border:1px solid rgba(255,106,240,.25)}

.cust-name-cell{font-weight:700;color:var(--text);font-family:'Outfit',sans-serif}
.cust-ph-cell{font-family:'JetBrains Mono',monospace;font-size:.74rem}
.adm-empty{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:.85rem}
.adm-empty .adm-empty-ico{font-size:2.5rem;margin-bottom:.7rem;display:block;opacity:.5}

.adm-del-btn{background:none;border:1px solid rgba(255,85,85,.25);color:rgba(255,85,85,.6);padding:.22rem .6rem;border-radius:7px;font-size:.65rem;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif}
.adm-del-btn:hover{background:rgba(255,85,85,.12);color:#ff5555;border-color:rgba(255,85,85,.5)}

.adm-visitor-list{display:flex;flex-direction:column;gap:.5rem}
.adm-visitor-item{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;background:rgba(255,255,255,.025);border:1px solid var(--bdr);border-radius:11px;font-size:.78rem}
.adm-visitor-time{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text3)}
.adm-visitor-page{color:var(--violet);font-weight:600}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:900px){
  .nav-links{display:none}.burger{display:flex}
  .fr2{grid-template-columns:1fr}
  .fl1,.fl2,.fl3,.fl4{display:none}
  section{padding:3.5rem 1.2rem}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .hero-btns{flex-direction:column}
  .btn{justify-content:center}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .svc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .svc-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════
   CAMPAIGN TAB
═══════════════════════════════════ */
.camp-tpl-btn{
  background:var(--card);border:1.5px solid var(--bdr);color:var(--text2);
  padding:.5rem 1.1rem;border-radius:12px;font-size:.78rem;font-weight:700;
  cursor:pointer;font-family:'Outfit',sans-serif;transition:all .25s;
}
.camp-tpl-btn:hover{border-color:var(--bdr-hi);color:var(--text)}
#campCustList::-webkit-scrollbar{width:3px}
#campCustList::-webkit-scrollbar-thumb{background:rgba(34,229,255,.3);border-radius:10px}
#campaignMsg:focus{border-color:rgba(34,229,255,.4);background:rgba(34,229,255,.04)}

/* ═══════════════════════════════════
   CUSTOMER HISTORY MODAL
═══════════════════════════════════ */
#historyModal .hist-stat-box{
  background:var(--c,rgba(124,111,255,.1));
  border:1px solid var(--bc,rgba(124,111,255,.22));
  border-radius:12px;padding:.8rem;text-align:center;
}
.hist-stat-n{
  font-size:1.5rem;font-weight:900;color:var(--tc,var(--violet));
  font-family:'Outfit',sans-serif;letter-spacing:-.02em;line-height:1;
}
.hist-stat-l{
  font-size:.58rem;color:var(--text3);text-transform:uppercase;
  letter-spacing:.1em;margin-top:.25rem;font-family:'JetBrains Mono',monospace;
}
#historyContent::-webkit-scrollbar{width:3px}
#historyContent::-webkit-scrollbar-thumb{background:rgba(124,111,255,.3);border-radius:10px}

/* ═══════════════════════════════════
   INVOICE MODAL
═══════════════════════════════════ */
#invoiceModal #invPreview{
  box-shadow:0 4px 24px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.15);
}
#invAmtInp:focus,#invNoteInp:focus{
  border-color:rgba(34,229,255,.45);
  background:rgba(34,229,255,.05);
  box-shadow:0 0 0 3px rgba(34,229,255,.1);
  outline:none;
}

/* ═══════════════════════════════════
   3D HERO BANNER STRIP
   Scrolling marquee above hero title — driven by JS RAF loop
═══════════════════════════════════ */
#heroBannerStrip {
  perspective: 600px;
}
.hbs-track {
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(124,111,255,.18) 0%,
    rgba(34,229,255,.14) 40%,
    rgba(0,255,179,.12) 70%,
    rgba(124,111,255,.18) 100%);
  background-size: 300% 100%;
  animation: hbsBgShift 6s linear infinite;
  border: 1px solid rgba(124,111,255,.35);
  border-radius: 10px;
  padding: .42rem 0;
  box-shadow:
    0 0 24px rgba(124,111,255,.25),
    0 2px 12px rgba(34,229,255,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(400px) rotateX(4deg);
  transform-origin: bottom center;
  position: relative;
}
.hbs-track::before,
.hbs-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.hbs-track::before {
  left: 0;
  background: linear-gradient(90deg, rgba(4,4,15,1), transparent);
}
.hbs-track::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(4,4,15,1), transparent);
}
@keyframes hbsBgShift {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
/* The single scrolling span — JS sets transform each frame */
.hbs-clone {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #fff;
  text-shadow:
    0 0 14px rgba(34,229,255,.9),
    0 0 30px rgba(124,111,255,.6);
  padding: 0 0 0 .5rem;
  will-change: transform;
}

[data-theme="light"] .hbs-track {
  background: linear-gradient(90deg,
    rgba(100,80,255,.12),
    rgba(0,180,220,.1),
    rgba(0,200,150,.09),
    rgba(100,80,255,.12));
  border-color: rgba(100,80,255,.3);
  box-shadow: 0 0 18px rgba(100,80,255,.15), 0 2px 10px rgba(0,180,220,.12);
}
[data-theme="light"] .hbs-track::before {
  background: linear-gradient(90deg, rgba(240,248,255,1), transparent);
}
[data-theme="light"] .hbs-track::after {
  background: linear-gradient(-90deg, rgba(240,248,255,1), transparent);
}
[data-theme="light"] .hbs-clone {
  color: #1a0a4a;
  text-shadow: 0 0 10px rgba(100,80,255,.4);
}