/* ═══════════════════════════════════════════════
   ✨ ENHANCED EFFECTS
   ═══════════════════════════════════════════════ */

/* Page fade-in on load */
body{animation:pgIn .6s cubic-bezier(.16,1,.3,1);}
@keyframes pgIn{from{opacity:0;}to{opacity:1;}}

/* 1. Scroll progress bar (top of page) */
#scroll-prog{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--g);z-index:1000;box-shadow:0 0 16px rgba(124,92,252,.6),0 0 6px rgba(79,159,255,.4);transition:width .08s linear;border-radius:0 2px 2px 0;}

/* 2. Cursor glow halo (follows mouse with lerp) */
#cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.07) 0%,rgba(79,159,255,.04) 35%,transparent 65%);pointer-events:none;z-index:9;transform:translate3d(-50%,-50%,0);will-change:transform;mix-blend-mode:multiply;opacity:0;transition:opacity .4s;}
.has-cursor #cursor-glow{opacity:1;}
@media(max-width:1024px),(hover:none){#cursor-glow{display:none;}}

/* 3. Magnetic buttons + cards (smooth follow) */
.btn-g,.btn-w,.nc,.pcbtn{will-change:transform;transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .25s,background .25s;}

/* 4. Bento card 3D tilt on hover */
.bc{transform-style:preserve-3d;will-change:transform;}
.bc-d::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(124,92,252,.15) 0%,transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none;border-radius:inherit;}
.bc-d:hover::before{opacity:1;}

/* 5. Mouse-follow spotlight on cards */
.spot{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(620px circle at var(--mx,50%) var(--my,50%),rgba(124,92,252,.08),transparent 40%);opacity:0;transition:opacity .35s;}
.bc:hover .spot,.pc:hover .spot,.cc:hover .spot,.tc:hover .spot,.tmc:hover .spot,.cmpc:hover .spot{opacity:1;}

/* 6. Brand gradient text — flowing animation */
.tg,.iq strong,.cta-h em,.imn,.imn2,.tis,.cin,.cmpsn,.tsn{
  background-size:200% 200%;
  animation:gFlow 7s ease-in-out infinite;
}
@keyframes gFlow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* 7. Button click ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .65s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;mix-blend-mode:overlay;}
@keyframes rip{to{transform:scale(4);opacity:0;}}

/* 8. Floating particles in dark sections */
.parts{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.part{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(124,92,252,.5);box-shadow:0 0 8px rgba(124,92,252,.6);animation:fUp 14s linear infinite;}
.part:nth-child(2n){background:rgba(62,207,207,.5);box-shadow:0 0 8px rgba(62,207,207,.6);}
.part:nth-child(3n){background:rgba(79,159,255,.5);box-shadow:0 0 8px rgba(79,159,255,.6);}
@keyframes fUp{
  0%{transform:translateY(100vh) translateX(0);opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.7;}
  100%{transform:translateY(-50px) translateX(40px);opacity:0;}
}

/* 9. Hero badge floats */
.h-badge{animation:fup .9s .25s ease forwards,bgFloat 4.5s 1.5s ease-in-out infinite;}
@keyframes bgFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* 10. Glow pulse on big numbers (when visible) */
.hsn,.tis,.cin,.imn,.imn2{position:relative;}
.glow-pulse::after{content:'';position:absolute;inset:-20px;background:inherit;-webkit-background-clip:text;background-clip:text;filter:blur(20px);opacity:.4;z-index:-1;animation:gpulse 3s ease-in-out infinite;}
@keyframes gpulse{0%,100%{opacity:.2;}50%{opacity:.5;}}

/* Card content layered above effects */
.bc>*,.pc>*,.cc>*,.tc>*,.tmc>*,.cmpc>*{position:relative;z-index:1;}

/* Marquee pause on hover */
.tk:hover .tkt{animation-play-state:paused;}
.tki{transition:color .25s,transform .25s;}
.tki:hover{color:var(--p);transform:scale(1.05);}

/* Underline animation on nav and footer links */
.nm a,.flk a{position:relative;display:inline-block;}
.nm a::after,.flk a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:0;background:var(--g);transition:width .35s cubic-bezier(.4,0,.2,1);border-radius:2px;}
.nm a:hover::after,.flk a:hover::after{width:100%;}

/* Image-style reveal on enter */
.sr{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}

/* Shimmer skeleton while loading */
.shimmer{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);background-size:200% 100%;animation:sh 1.5s infinite;}
@keyframes sh{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* Stat hover scale */
.hs{transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s;cursor:default;}
.hs:hover{transform:translateY(-3px);}

/* Better focus accessibility */
button:focus-visible,a:focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:6px;}
button,a{outline:none;}

/* Pricing pop card glow */
.pc-pop{position:relative;}
.pc-pop::before{content:'';position:absolute;inset:-2px;background:var(--g);border-radius:var(--r3);z-index:-1;opacity:0;transition:opacity .3s;filter:blur(12px);}
.pc-pop:hover::before{opacity:.4;}

/* Logo glow on hero */
.h-svg{transition:filter .4s,transform .4s;}
.h-brand:hover .h-svg{filter:drop-shadow(0 0 48px rgba(124,92,252,.7));transform:scale(1.05) rotate(-3deg);}

/* Reduced motion accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ═══════════════════════════════════════════════
   🌗 DARK MODE
   ═══════════════════════════════════════════════ */
body{transition:background .4s ease,color .4s ease;}
body.dark{
  --bg:#0a0a14;
  --bg2:#0f0f1c;
  --bg3:#16162a;
  --t:#ededf2;
  --t2:#a0a0b5;
  --t3:#6e6e85;
  --br:rgba(255,255,255,0.08);
  --br2:rgba(255,255,255,0.04);
  --sh:0 4px 16px rgba(0,0,0,.3);
  --sh-lg:0 24px 48px rgba(0,0,0,.5);
}
body.dark #nav{background:rgba(10,10,20,.72);border-bottom-color:var(--br);}
body.dark #nav.scrolled{background:rgba(10,10,20,.92);}
body.dark .ncn{color:var(--t);}
body.dark .nm a{color:var(--t);}
body.dark .lang-trigger{color:var(--t);border-color:var(--br);}
body.dark .lang-menu{background:rgba(20,20,35,.97);border-color:var(--br);}
body.dark .lang-opt{color:var(--t);}
body.dark .lang-opt:hover{background:var(--bg3);}
body.dark .mm{background:rgba(10,10,20,.98);border-bottom-color:var(--br);}
body.dark .mm a{color:var(--t);border-bottom-color:var(--br2);}
body.dark .hb span{background:var(--t);}

body.dark .gy,body.dark .wt{background:var(--bg);}
body.dark .gy{background:var(--bg2);}
body.dark .tk{background:var(--bg2);border-bottom-color:var(--br);}
body.dark .tk::before{background:linear-gradient(to right,var(--bg2) 0%,transparent 100%);}
body.dark .tk::after{background:linear-gradient(to left,var(--bg2) 0%,transparent 100%);}

body.dark .bc,body.dark .cc,body.dark .tc,body.dark .tmc,body.dark .pc,body.dark .cmpc,body.dark .bgh,body.dark .bs,body.dark .culc,body.dark .fq,body.dark .im2,body.dark .tsi{
  background:var(--bg2);border-color:var(--br);
}
body.dark .h2,body.dark .pcn,body.dark .cccl,body.dark .tnm,body.dark .bgt,body.dark .culh,body.dark .ift,body.dark .cmph,body.dark .iq,body.dark .fqq,body.dark .tcn,body.dark .ccmn,body.dark .pcfeat li,body.dark .fbn,body.dark .ccmn,body.dark .cmpr span:last-child{color:var(--t);}
body.dark .iq{color:var(--t);}
body.dark .pc-pop{background:linear-gradient(180deg,var(--bg2) 0%,rgba(124,92,252,.06) 100%);border-color:var(--p);}
body.dark .cmpcg{background:linear-gradient(180deg,var(--bg2) 0%,rgba(124,92,252,.08) 100%);border-color:rgba(124,92,252,.35);}
body.dark .cmpt{color:var(--t);}
body.dark .cmps2{background:rgba(124,92,252,.1);}

body.dark .it{border-bottom-color:var(--br);}
body.dark .itb{color:var(--t2);}
body.dark .itb.active{color:var(--t);}
body.dark .ife,body.dark .im,body.dark .ccm,body.dark .cmpr,body.dark .fq{border-color:var(--br);}
body.dark .iico{background:rgba(124,92,252,.15);}
body.dark .pcfeat li::before{background-color:rgba(124,92,252,.18);}
body.dark .pcfeat .no::before{background-color:rgba(255,255,255,.05);}
body.dark .pcfeat .no{color:var(--t3);}

body.dark footer{background:var(--bg2);border-top-color:var(--br);}
body.dark .fg{border-bottom-color:var(--br);}

body.dark .tct{color:var(--t);}
body.dark .bca{background:rgba(124,92,252,.15);}

/* Theme toggle button */
.theme-toggle{background:none;border:1px solid var(--br);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--t);overflow:hidden;position:relative;}
.theme-toggle:hover{border-color:var(--p);color:var(--p);transform:rotate(15deg);}
.theme-toggle svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s;position:absolute;}
.theme-toggle .moon{opacity:0;transform:rotate(-90deg) scale(.5);}
body.dark .theme-toggle .sun{opacity:0;transform:rotate(90deg) scale(.5);}
body.dark .theme-toggle .moon{opacity:1;transform:rotate(0) scale(1);}

/* Sound toggle button */
.sound-toggle{background:none;border:1px solid var(--br);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;color:var(--t);}
.sound-toggle:hover{border-color:var(--p);color:var(--p);}
.sound-toggle svg{width:16px;height:16px;}
.sound-toggle .muted-icon{display:none;}
.sound-toggle.muted .on-icon{display:none;}
.sound-toggle.muted .muted-icon{display:block;}

@media(max-width:1024px){
  .theme-toggle,.sound-toggle{display:none;}
}

/* ── BACK TO TOP BUTTON ── */
#back-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:var(--g);color:#fff;border:none;cursor:pointer;z-index:9000;opacity:0;pointer-events:none;transform:translateY(20px) scale(.85);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(124,92,252,.35);padding:0;}
#back-top.show{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
#back-top:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px rgba(124,92,252,.5);}
#back-top .bt-ring{position:absolute;top:-5px;left:-5px;width:58px;height:58px;transform:rotate(-90deg);pointer-events:none;overflow:visible;}
#back-top .bt-ring-bg{fill:none;stroke:rgba(124,92,252,.18);stroke-width:2;}
#back-top .bt-ring-fg{fill:none;stroke:url(#bt-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset .15s linear;}
#back-top .bt-arrow{width:18px;height:18px;transition:transform .3s;position:relative;z-index:1;}
#back-top:hover .bt-arrow{transform:translateY(-2px);}
@media(max-width:640px){
  #back-top{right:16px;bottom:16px;width:44px;height:44px;}
  #back-top .bt-ring{top:-5px;left:-5px;width:54px;height:54px;}
}