/* ===== RESET & VARS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue: #1962f7;
  --blue-l: #2b76ff;
  --blue-xl: #9cbcfb;
  --blue-dim: #1050d0;
  --blue-glow: rgba(25,98,247, 0.4);
  --bg:#04070e;
  --bg2:#070b17;
  --bg3:#0a0e1f;
  --card: #070b17;
  --border:rgba(25,98,247, .2);
  --border2:rgba(25,98,247, .2);
  --text:#dde8ff;
  --text2:#7a90c2;
  --text3:#3a4d7a;
  --r:14px;
  --transition:.22s cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:'Jost',sans-serif;overflow-x:hidden;min-height:100vh;max-width:100%}

/* ===== BACKGROUND ===== */
body{background:#04060e}
#bg-canvas, #rainCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;background:#04060e;transition:background .05s}
#rainCanvas{z-index:1; opacity:0.6;}

/* ===== NAV WRAP ===== */
.nav-wrap{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;
  width:94%;max-width:1100px;
  background:rgba(4,8,20,.18);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:20px;
  border:1px solid rgba(25,98,247,.18);
  box-shadow:0 12px 50px rgba(0,0,0,.6);
  overflow:hidden;
}
@media(max-width:768px){
  .nav-wrap{top:12px;width:95%;border-radius:18px}
  .ticker-wrap{height:30px}
  .ticker-msg{font-size:.72rem;letter-spacing:.3px}
  nav{height:62px;padding:0 14px}
  .nav-logo-img{height:30px}
  .nav-logo-text{font-size:1rem}
  .nav-hamburger{width:36px;height:36px;border-radius:10px}
  .nav-hamburger span{width:16px}
  .nav-logo-linex { text-shadow: 0 0 10px rgba(255,255,255, 0.35); }
  .nav-logo-stocks { animation: stocksGlow 2.8s ease-in-out infinite; }
}
/* ===== NAV ===== */
nav{
  padding:0 clamp(20px,4vw,30px);height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:transparent;
}
/* Push page content below fixed nav */
body{padding-top:130px}

/* Logo */
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo-img{height:38px;width:auto;display:block;object-fit:contain}
.nav-logo-icon{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--blue-l));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;flex-shrink:0;
  box-shadow:inset 0 0 10px rgba(255,255,255,.2), 0 0 20px var(--blue-glow2);
}
.nav-logo-text{font-size:1.2rem;font-weight:800;letter-spacing:.3px;color:#fff;font-family:'Jost',sans-serif;}
.nav-logo-linex{color:#fff;text-shadow:0 0 12px rgba(255,255,255, 0.35);}
.nav-logo-stocks{
  color:var(--blue);
  text-shadow:0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5);
  animation:stocksGlow 2.8s ease-in-out infinite;
}

/* Center links */
.nav-links-center{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:16px;list-style:none;
}
.nav-links-center a{
  color:rgba(255,255,255,.7);text-decoration:none;
  font-size:.95rem;font-weight:600;
  padding:8px 16px;border-radius:12px;
  transition:all .25s ease;white-space:nowrap;
}
.nav-links-center a:hover{color:#fff;text-shadow:0 0 16px rgba(255,255,255,.7);background:rgba(255,255,255,.05);transform:translateY(-1px);}
.nav-links-center a.active-link{color:#fff;background:var(--blue);box-shadow:0 0 16px rgba(25,98,247,.4);text-shadow:0 0 12px rgba(255,255,255,.5);}
.nav-links-center a.active-link:hover{background:var(--blue-dim)}

/* Right buttons */
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-btn-filled{
  background:linear-gradient(135deg, var(--blue), var(--blue-dim));
  color:#fff;
  padding:10px 24px;border-radius:14px;
  font-size:.9rem;font-weight:800;
  text-decoration:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;
  box-shadow:0 8px 20px -5px rgba(25,98,247,.5);
  position:relative;overflow:hidden;
}
.nav-btn-filled:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 28px -5px rgba(25,98,247,0.6);
  filter:brightness(1.1);
}
.nav-btn-filled::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:none;
}
.nav-btn-filled:hover::after{
  animation:shine-sweep 1.5s infinite;
}
@keyframes shine-sweep{
  0%{left:-100%} 100%{left:200%}
}
.nav-btn-outline{
  background:transparent;color:#fff;
  padding:9px 20px;border-radius:12px;
  font-size:.9rem;font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:7px;
  transition:all .2s ease;white-space:nowrap;
}
.nav-btn-outline:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.nav-btn-telegram{
  background:rgba(43,118,255,.1);color:var(--blue-l);
  padding:9px 20px;border-radius:12px;
  font-size:.9rem;font-weight:700;
  text-decoration:none;
  border:1px solid rgba(43,118,255,.3);
  display:flex;align-items:center;gap:7px;
  transition:all .2s ease;white-space:nowrap;
}
.nav-btn-telegram:hover{background:rgba(43,118,255,.2);border-color:rgba(43,118,255,.6);transform:translateY(-1px);color:#fff;}

/* Hamburger */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
  width:38px;height:38px;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid rgba(25,98,247,.25);
  background:rgba(25,98,247,.06);transition:all .2s ease;
}
.nav-hamburger:hover{background:rgba(25,98,247,.18);border-color:rgba(25,98,247,.5)}
.nav-hamburger span{width:18px;height:2px;background:#fff;border-radius:2px;transition:all .28s cubic-bezier(.4,0,.2,1);display:block}
.nav-hamburger.open{background:rgba(25,98,247,.15);border-color:rgba(25,98,247,.5)}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== BOTTOM NAV BAR (mobile only) ===== */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:rgba(6,9,22,.85);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(25,98,247,.18);
  padding:8px 0 env(safe-area-inset-bottom,8px);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
.bottom-nav-inner{display:flex;align-items:stretch}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 4px;text-decoration:none;
  color:rgba(255,255,255,.38);font-size:.65rem;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
  transition:color .2s ease;position:relative;cursor:pointer;
  background:none;border:none;font-family:'Jost',sans-serif;
}
.bn-item i{font-size:1.15rem;transition:all .2s ease}
.bn-item.active,
.bn-item:hover{color:var(--blue-l)}
.bn-item.active i{color:var(--blue);filter:drop-shadow(0 0 6px rgba(25,98,247,.7))}
/* active indicator dot */
.bn-item.active::after{
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:3px 3px 0 0;
  background:var(--blue);box-shadow:0 0 8px var(--blue);
}
/* center menu item — raised pill */
.bn-item.bn-center{
  flex:0 0 64px;margin:-14px 8px 0;
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));
  border-radius:18px;
  color:#fff;box-shadow:0 0 28px rgba(25,98,247,.6),0 4px 16px rgba(0,0,0,.4);
  padding:10px 4px 6px;border:1px solid rgba(25,98,247,.4);
}
.bn-item.bn-center i{font-size:1.25rem;color:#fff;filter:none}
.bn-item.bn-center:hover{background:var(--blue-dim);box-shadow:0 0 36px rgba(25,98,247,.8)}
.bn-item.bn-center::after{display:none}
/* bottom nav hidden — using top nav instead */

/* Mobile menu backdrop */
.mobile-menu-backdrop{
  display:none;position:fixed;inset:0;z-index:398;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
.mobile-menu-backdrop.open{display:block;opacity:1}

/* Mobile menu — bottom sheet */
.mobile-menu{
  display:block;
  position:fixed;bottom:0;left:0;right:0;
  z-index:399;
  background:#080d1c;
  border-radius:24px 24px 0 0;
  border:1px solid rgba(25,98,247,.2);
  border-bottom:none;
  box-shadow:0 -12px 60px rgba(0,0,0,.7),0 0 0 1px rgba(25,98,247,.08) inset;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom,16px);
  max-height:82vh;overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0)}

/* Drag handle */
.mobile-menu-handle{
  width:40px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.15);
  margin:14px auto 0;
}

/* Sheet top bar */
.mobile-menu-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 10px;
}
.mobile-menu-logo{
  font-size:1rem;font-weight:900;
  display:flex;align-items:center;gap:9px;color:#fff;
}
.mobile-menu-logo img{height:26px;width:auto}
.mobile-menu-logo span{color:#fff;}
.mobile-menu-close{
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.8rem;transition:all .2s;
}
.mobile-menu-close:hover{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.3)}

/* Link list */
.mobile-menu-links{padding:6px 16px 16px}
.mobile-menu-grid{display:flex;flex-direction:column;gap:4px}
.mobile-menu a{
  color:rgba(255,255,255,.75);text-decoration:none;
  font-size:1rem;font-weight:600;
  padding:14px 16px;border-radius:14px;
  background:transparent;border:1px solid transparent;
  transition:all .18s ease;
  display:flex;align-items:center;gap:14px;
}
.mobile-menu a i{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  -moz-appearance: none;
  appearance: none;
  background: rgba(25, 98, 247, 0.12);border:1px solid rgba(25,98,247,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;color:var(--blue-l);transition:all .18s ease;
  text-shadow: 0 0 15px rgba(25,98,247, .85);
  animation: iconGlowPulse 2.8s ease-in-out infinite;
}
.mobile-menu a .mm-chev{margin-left:auto;color:rgba(255,255,255,.2);font-size:.7rem}
.mobile-menu a:active{background:rgba(25,98,247,.08);border-color:rgba(25,98,247,.18);transform:scale(.98)}
.mobile-menu a:hover{color:#fff;background:rgba(25,98,247,.06)}
.mobile-menu a:hover i{background:rgba(25,98,247,.25);color:#fff}

/* Divider between items */
.mm-divider{height:1px;background:rgba(255,255,255,.05);margin:4px 0}

/* CTA footer */
.mobile-menu-footer{
  padding:8px 16px 8px;display:flex;gap:10px;
}
.mobile-menu-footer a{
  flex:1;padding:14px;border-radius:14px;font-size:.9rem;font-weight:700;
  text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;border:none;
}
.mobile-menu-footer a.mm-discord{
  background:linear-gradient(135deg, #5865F2, #4752C4);
  color:#fff;box-shadow:0 10px 25px -4px rgba(88,101,242,.4);
}
.mobile-menu-footer a.mm-telegram{
  background:linear-gradient(135deg, #24A1DE, #1C82B6);
  color:#fff;box-shadow:0 10px 25px -4px rgba(36,161,222,.4);
}
.mobile-menu-footer a:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.1);
}

@media(max-width:900px){
  nav{height:68px;padding:0 18px}
  .nav-links-center{display:none}
  .nav-hamburger{display:flex;width:42px;height:42px;border-radius:12px;border:1px solid rgba(25,98,247,.3)}
  .nav-right > *:not(.nav-hamburger){display:none}
  .nav-logo-img{height:34px}
  .nav-logo-text{font-size:1.1rem}
}

/* ===== TICKER ===== */
.ticker-wrap{
  position:relative;overflow:hidden;
  background:rgba(25,98,247,.04);
  border-bottom:1px solid rgba(25,98,247,.12);
  height:36px;display:flex;align-items:center;justify-content:center;
}
.ticker-wrap::before, .ticker-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,rgba(8,13,28,.1),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,rgba(8,13,28,.1),transparent)}
.ticker-scan{
  position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(25,98,247,.6),transparent);
  animation:tscan 3s linear infinite;pointer-events:none;z-index:3;
}
@keyframes tscan{0%{left:-2px;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.ticker-inner{
  flex:1;height:100%;overflow:hidden;position:relative;
}
.ticker-msg{
  position:absolute;inset:0;width:100%;
  font-size:.82rem;font-weight:700;letter-spacing:.8px;color:var(--blue-l);
  display:flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;white-space:nowrap;
  text-shadow:0 0 12px rgba(43,118,255,.4);
}
.ticker-msg .t-icon{color:#2b76ff;font-size:.75rem;flex-shrink:0}
.ticker-msg .t-emoji{font-size:.85rem;flex-shrink:0;line-height:1}
.ticker-msg .t-dot{width:5px;height:5px;border-radius:50%;background:#2b76ff;flex-shrink:0;animation:tdot 1s ease-in-out infinite}
@keyframes tdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── ticker transitions — all use CSS vars for configurable duration ── */
/* in animations */
.t-slide-l-in   {animation:slide-l-in   var(--t-dur-in,.52s) cubic-bezier(.22,1,.36,1) forwards}
.t-slide-r-in   {animation:slide-r-in   var(--t-dur-in,.52s) cubic-bezier(.22,1,.36,1) forwards}
.t-slide-up-in  {animation:slide-up-in  var(--t-dur-in,.52s) cubic-bezier(.22,1,.36,1) forwards}
.t-slide-dn-in  {animation:slide-dn-in  var(--t-dur-in,.52s) cubic-bezier(.22,1,.36,1) forwards}
.t-fade-in      {animation:fade-in      var(--t-dur-in,.45s) ease forwards}
.t-blur-in      {animation:blur-in      var(--t-dur-in,.5s)  ease forwards}
.t-flip-in      {animation:flip-in      var(--t-dur-in,.5s)  cubic-bezier(.22,1,.36,1) forwards}
.t-flip-v-in    {animation:flip-v-in    var(--t-dur-in,.5s)  cubic-bezier(.22,1,.36,1) forwards}
.t-zoom-in      {animation:zoom-in      var(--t-dur-in,.42s) cubic-bezier(.22,1,.36,1) forwards}
.t-zoom-sm-in   {animation:zoom-sm-in   var(--t-dur-in,.4s)  ease forwards}
.t-glitch-in    {animation:glitch-in    var(--t-dur-in,.55s) steps(1) forwards}
.t-bounce-in    {animation:bounce-in    var(--t-dur-in,.65s) cubic-bezier(.34,1.56,.64,1) forwards}
.t-elastic-in   {animation:elastic-in   var(--t-dur-in,.7s)  cubic-bezier(.34,1.8,.64,1) forwards}
.t-swing-in     {animation:swing-in     var(--t-dur-in,.6s)  cubic-bezier(.22,1,.36,1) forwards}
.t-spin-in      {animation:spin-in      var(--t-dur-in,.48s) cubic-bezier(.22,1,.36,1) forwards}
.t-spin-cc-in   {animation:spin-cc-in   var(--t-dur-in,.48s) cubic-bezier(.22,1,.36,1) forwards}
.t-roll-in      {animation:roll-in      var(--t-dur-in,.55s) cubic-bezier(.22,1,.36,1) forwards}
.t-drop-in      {animation:drop-in      var(--t-dur-in,.6s)  cubic-bezier(.34,1.56,.64,1) forwards}
.t-rise-in      {animation:rise-in      var(--t-dur-in,.55s) cubic-bezier(.22,1,.36,1) forwards}
.t-warp-in      {animation:warp-in      var(--t-dur-in,.5s)  cubic-bezier(.22,1,.36,1) forwards}
.t-shatter-in   {animation:shatter-in   var(--t-dur-in,.55s) cubic-bezier(.22,1,.36,1) forwards}
.t-neon-in      {animation:neon-in      var(--t-dur-in,.55s) ease forwards}
.t-rubber-in    {animation:rubber-in    var(--t-dur-in,.6s)  cubic-bezier(.34,1.8,.64,1) forwards}
.t-fold-in      {animation:fold-in      var(--t-dur-in,.5s)  cubic-bezier(.22,1,.36,1) forwards}
.t-spiral-in    {animation:spiral-in    var(--t-dur-in,.6s)  cubic-bezier(.22,1,.36,1) forwards}
.t-shake-in     {animation:shake-in     var(--t-dur-in,.55s) ease forwards}
.t-morph-in     {animation:morph-in     var(--t-dur-in,.5s)  cubic-bezier(.22,1,.36,1) forwards}
.t-typewriter-in{animation:typewriter-in var(--t-dur-in,.6s)  steps(20) forwards}
/* out animations */
.t-slide-l-out  {animation:slide-l-out  var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-slide-r-out  {animation:slide-r-out  var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-slide-up-out {animation:slide-up-out var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-slide-dn-out {animation:slide-dn-out var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-fade-out     {animation:fade-out     var(--t-dur-out,.35s) ease forwards}
.t-blur-out     {animation:blur-out     var(--t-dur-out,.4s)  ease forwards}
.t-flip-out     {animation:flip-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-flip-v-out   {animation:flip-v-out   var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-zoom-out     {animation:zoom-out     var(--t-dur-out,.33s) cubic-bezier(.55,0,1,.45) forwards}
.t-zoom-sm-out  {animation:zoom-sm-out  var(--t-dur-out,.33s) ease forwards}
.t-glitch-out   {animation:glitch-out   var(--t-dur-out,.38s) steps(1) forwards}
.t-bounce-out   {animation:bounce-out   var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-elastic-out  {animation:elastic-out  var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-swing-out    {animation:swing-out    var(--t-dur-out,.4s)  cubic-bezier(.55,0,1,.45) forwards}
.t-spin-out     {animation:spin-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-spin-cc-out  {animation:spin-cc-out  var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-roll-out     {animation:roll-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-drop-out     {animation:drop-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-rise-out     {animation:rise-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-warp-out     {animation:warp-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-shatter-out  {animation:shatter-out  var(--t-dur-out,.38s) steps(1) forwards}
.t-neon-out     {animation:neon-out     var(--t-dur-out,.38s) ease forwards}
.t-rubber-out   {animation:rubber-out   var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-fold-out     {animation:fold-out     var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-spiral-out   {animation:spiral-out   var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-shake-out    {animation:shake-out    var(--t-dur-out,.35s) ease forwards}
.t-morph-out    {animation:morph-out    var(--t-dur-out,.38s) cubic-bezier(.55,0,1,.45) forwards}
.t-typewriter-out{animation:typewriter-out var(--t-dur-out,.35s) steps(20) forwards}

/* ── keyframes ── */
@keyframes slide-l-in   {from{transform:translateX(90px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slide-r-in   {from{transform:translateX(-90px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slide-up-in  {from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slide-dn-in  {from{transform:translateY(-28px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slide-l-out  {from{transform:translateX(0);opacity:1}to{transform:translateX(-90px);opacity:0}}
@keyframes slide-r-out  {from{transform:translateX(0);opacity:1}to{transform:translateX(90px);opacity:0}}
@keyframes slide-up-out {from{transform:translateY(0);opacity:1}to{transform:translateY(-28px);opacity:0}}
@keyframes slide-dn-out {from{transform:translateY(0);opacity:1}to{transform:translateY(28px);opacity:0}}

@keyframes fade-in      {from{opacity:0}to{opacity:1}}
@keyframes fade-out     {from{opacity:1}to{opacity:0}}

@keyframes blur-in      {from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes blur-out     {from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(12px)}}

@keyframes flip-in      {from{transform:rotateX(90deg) scaleY(.3);opacity:0}to{transform:rotateX(0) scaleY(1);opacity:1}}
@keyframes flip-out     {from{transform:rotateX(0) scaleY(1);opacity:1}to{transform:rotateX(-90deg) scaleY(.3);opacity:0}}
@keyframes flip-v-in    {from{transform:rotateY(90deg) scaleX(.3);opacity:0}to{transform:rotateY(0) scaleX(1);opacity:1}}
@keyframes flip-v-out   {from{transform:rotateY(0) scaleX(1);opacity:1}to{transform:rotateY(-90deg) scaleX(.3);opacity:0}}

@keyframes zoom-in      {from{transform:scale(.15);opacity:0;letter-spacing:10px}to{transform:scale(1);opacity:1;letter-spacing:.6px}}
@keyframes zoom-out     {from{transform:scale(1);opacity:1;letter-spacing:.6px}to{transform:scale(2.2);opacity:0;letter-spacing:10px}}
@keyframes zoom-sm-in   {from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes zoom-sm-out  {from{transform:scale(1);opacity:1}to{transform:scale(.75);opacity:0}}

@keyframes bounce-in    {from{transform:translateY(-28px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes bounce-out   {from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(28px) scale(.7);opacity:0}}

@keyframes elastic-in   {
  0%{transform:scaleX(0);opacity:0}20%{transform:scaleX(1.3);opacity:.8}
  50%{transform:scaleX(.9);opacity:1}75%{transform:scaleX(1.05)}100%{transform:scaleX(1);opacity:1}
}
@keyframes elastic-out  {
  0%{transform:scaleX(1);opacity:1}30%{transform:scaleX(1.1);opacity:.8}
  100%{transform:scaleX(0);opacity:0}
}

@keyframes swing-in     {
  0%{transform:rotate(-20deg) translateX(-30px);opacity:0;transform-origin:top center}
  60%{transform:rotate(8deg);opacity:.9}80%{transform:rotate(-4deg)}100%{transform:rotate(0);opacity:1}
}
@keyframes swing-out    {
  0%{transform:rotate(0);opacity:1;transform-origin:top center}
  100%{transform:rotate(20deg) translateX(30px);opacity:0}
}

@keyframes spin-in      {from{transform:rotateZ(-180deg) scale(.2);opacity:0}to{transform:rotateZ(0) scale(1);opacity:1}}
@keyframes spin-out     {from{transform:rotateZ(0) scale(1);opacity:1}to{transform:rotateZ(180deg) scale(.2);opacity:0}}
@keyframes spin-cc-in   {from{transform:rotateZ(180deg) scale(.2);opacity:0}to{transform:rotateZ(0) scale(1);opacity:1}}
@keyframes spin-cc-out  {from{transform:rotateZ(0) scale(1);opacity:1}to{transform:rotateZ(-180deg) scale(.2);opacity:0}}

@keyframes roll-in      {from{transform:translateX(-80px) rotateZ(-90deg);opacity:0}to{transform:translateX(0) rotateZ(0);opacity:1}}
@keyframes roll-out     {from{transform:translateX(0) rotateZ(0);opacity:1}to{transform:translateX(80px) rotateZ(90deg);opacity:0}}

@keyframes drop-in      {
  0%{transform:translateY(-60px) scaleY(1.4);opacity:0}
  60%{transform:translateY(6px) scaleY(.9);opacity:1}80%{transform:translateY(-3px) scaleY(1.04)}
  100%{transform:translateY(0) scaleY(1);opacity:1}
}
@keyframes drop-out     {from{transform:translateY(0) scaleY(1);opacity:1}to{transform:translateY(60px) scaleY(1.3);opacity:0}}

@keyframes rise-in      {from{transform:translateY(60px) scaleY(1.3);opacity:0}to{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes rise-out     {from{transform:translateY(0) scaleY(1);opacity:1}to{transform:translateY(-60px) scaleY(1.3);opacity:0}}

@keyframes warp-in      {from{transform:scaleX(0) skewX(-20deg);opacity:0;filter:blur(4px)}to{transform:scaleX(1) skewX(0);opacity:1;filter:blur(0)}}
@keyframes warp-out     {from{transform:scaleX(1) skewX(0);opacity:1;filter:blur(0)}to{transform:scaleX(0) skewX(20deg);opacity:0;filter:blur(4px)}}

@keyframes shatter-in   {
  0%{transform:scale(1.4) rotate(-3deg);opacity:0;filter:blur(6px) brightness(2)}
  40%{transform:scale(.96) rotate(.8deg);opacity:.9;filter:blur(1px) brightness(1.2)}
  70%{transform:scale(1.02) rotate(-.3deg);opacity:1;filter:none}
  100%{transform:scale(1) rotate(0);opacity:1;filter:none}
}
@keyframes shatter-out  {
  0%{transform:scale(1);opacity:1;filter:none}
  30%{transform:scale(1.1) rotate(1deg);opacity:.8;filter:blur(1px) brightness(1.3)}
  100%{transform:scale(.5) rotate(-5deg);opacity:0;filter:blur(8px) brightness(2)}
}

@keyframes glitch-in    {
  0%{transform:translate(-6px,3px) skewX(-8deg);opacity:0;filter:hue-rotate(120deg) saturate(3)}
  20%{transform:translate(6px,-4px) skewX(6deg);opacity:.5;filter:hue-rotate(-60deg) saturate(2)}
  40%{transform:translate(-4px,2px) skewX(-4deg);opacity:.7;filter:hue-rotate(40deg)}
  60%{transform:translate(2px,-1px) skewX(2deg);opacity:.9;filter:hue-rotate(-20deg)}
  80%{transform:translate(-1px,1px) skewX(-1deg);opacity:.95;filter:none}
  100%{transform:translate(0,0) skewX(0);opacity:1;filter:none}
}
@keyframes glitch-out   {
  0%{transform:translate(0,0);opacity:1;filter:none}
  20%{transform:translate(8px,-4px) skewX(10deg);opacity:.8;filter:hue-rotate(80deg) saturate(3)}
  40%{transform:translate(-6px,4px) skewX(-6deg);opacity:.5;filter:hue-rotate(-40deg)}
  60%{transform:translate(4px,2px) skewX(4deg);opacity:.3;filter:blur(2px)}
  100%{transform:translate(0,0);opacity:0;filter:blur(4px)}
}

@keyframes neon-in      {
  0%{opacity:0;filter:brightness(3) blur(8px);text-shadow:0 0 30px currentColor,0 0 60px currentColor}
  40%{opacity:.8;filter:brightness(1.8) blur(2px);text-shadow:0 0 15px currentColor}
  70%{opacity:1;filter:brightness(1.3) blur(.5px)}
  100%{opacity:1;filter:none;text-shadow:none}
}
@keyframes neon-out     {
  0%{opacity:1;filter:none}
  60%{opacity:.8;filter:brightness(1.5) blur(2px);text-shadow:0 0 20px currentColor}
  100%{opacity:0;filter:brightness(3) blur(10px);text-shadow:0 0 40px currentColor}
}

@keyframes rubber-in    {
  0%{transform:scaleX(1.4) scaleY(.6);opacity:0}
  30%{transform:scaleX(.85) scaleY(1.15);opacity:.8}
  55%{transform:scaleX(1.05) scaleY(.97)}
  75%{transform:scaleX(.98) scaleY(1.02)}
  100%{transform:scale(1);opacity:1}
}
@keyframes rubber-out   {
  0%{transform:scale(1);opacity:1}
  40%{transform:scaleX(1.15) scaleY(.85);opacity:.8}
  100%{transform:scaleX(1.4) scaleY(.5);opacity:0}
}

@keyframes fold-in      {
  0%{transform:scaleY(0) translateY(-50%);opacity:0;transform-origin:top}
  100%{transform:scaleY(1) translateY(0);opacity:1;transform-origin:top}
}
@keyframes fold-out     {
  0%{transform:scaleY(1) translateY(0);opacity:1;transform-origin:top}
  100%{transform:scaleY(0) translateY(-50%);opacity:0;transform-origin:top}
}

@keyframes spiral-in    {
  0%{transform:rotateZ(-270deg) scale(0);opacity:0}
  70%{transform:rotateZ(10deg) scale(1.05);opacity:1}
  100%{transform:rotateZ(0) scale(1);opacity:1}
}
@keyframes spiral-out   {
  0%{transform:rotateZ(0) scale(1);opacity:1}
  100%{transform:rotateZ(270deg) scale(0);opacity:0}
}

@keyframes shake-in     {
  0%{transform:translateX(-40px);opacity:0}
  20%{transform:translateX(16px);opacity:.7}
  40%{transform:translateX(-10px);opacity:.9}
  60%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
  100%{transform:translateX(0);opacity:1}
}
@keyframes shake-out    {
  0%{transform:translateX(0);opacity:1}
  20%{transform:translateX(-10px);opacity:.8}
  40%{transform:translateX(8px);opacity:.5}
  100%{transform:translateX(40px);opacity:0}
}

@keyframes morph-in     {
  0%{transform:scale(.4) rotate(-15deg);opacity:0;border-radius:50%;filter:blur(8px)}
  60%{transform:scale(1.06) rotate(2deg);opacity:.9;border-radius:4px;filter:blur(1px)}
  100%{transform:scale(1) rotate(0);opacity:1;border-radius:0;filter:none}
}
@keyframes morph-out    {
  0%{transform:scale(1) rotate(0);opacity:1;border-radius:0}
  100%{transform:scale(.4) rotate(15deg);opacity:0;border-radius:50%}
}

@keyframes typewriter-in   {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes typewriter-out  {from{clip-path:inset(0 0% 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* ===== HERO ===== */
.hero{
  position:relative;z-index:10;
  width:100%;overflow:hidden;
  padding:clamp(70px,11vh,130px) clamp(16px,4vw,60px) clamp(50px,9vh,100px);
  text-align:center;
}
.hero-inner{
  max-width:1200px;margin:0 auto;position:relative;z-index:1;
}
.hero-inner--split{
  display:flex;align-items:center;justify-content:space-between;gap:40px;text-align:left;
}
.hero-content{
  flex:1 1 0;min-width:0;
}
.hero-content .hero-btns{justify-content:flex-start}
.hero-content .hero-stats{justify-content:flex-start}
.hero-mockup{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
}
.hero-mockup-img{
  width:clamp(260px,30vw,420px);
  filter:drop-shadow(0 0 40px rgba(25,98,247,.35));
  animation:heroFadeUp .9s ease forwards;animation-delay:.3s;opacity:0;
}
.hero::after{
  content:'';position:absolute;bottom:0;left:4%;right:4%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(25,98,247, .7),rgba(25,98,247, 1),rgba(25,98,247, .7),transparent);
  box-shadow:0 0 18px rgba(25,98,247, .5);
}

.hero-scan-wrap{position:relative;display:inline-block;margin-bottom:18px}
.hero-scan-line{display:none}

.hero-title{
  font-size:clamp(2.8rem,8vw,5.8rem);font-weight:900;
  letter-spacing:clamp(3px,1vw,8px);color:#fff;text-transform:uppercase;
  line-height:1;margin:0;position:relative;z-index:1;
  text-shadow: 0 0 18px rgba(255,255,255,.9), 0 0 40px rgba(255,255,255,.4), 0 0 70px rgba(255,255,255,.15);
}
.title-grad{
  color:var(--blue);
  display:inline-block;
  text-shadow: 0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5);
  animation:stocksGlow 2.8s ease-in-out infinite, heroFloat 4s ease-in-out infinite;
}
@keyframes stocksGlow{
  0%,100%{text-shadow:0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5)}
  50%{text-shadow:0 0 35px rgba(25,98,247, .95), 0 0 65px rgba(25,98,247, .6), 0 0 12px rgba(255,255,255, .25)}
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes btnStocksGlow{
  0%,100%{box-shadow:0 0 18px rgba(25,98,247, .7), 0 0 35px rgba(25,98,247, .4)}
  50%{box-shadow:0 0 30px rgba(25,98,247, .95), 0 0 55px rgba(25,98,247, .6), 0 0 12px rgba(255,255,255, .25)}
}

/* Sub-title / Secondary Glow Utilities */
.littleglow { text-shadow: 0 0 15px rgba(25,98,247, .4); }
.littleglow-white { text-shadow: 0 0 15px rgba(255,255,255, .3); }

.hero-subtitle{
  font-size:clamp(.9rem,2.2vw,1.2rem);font-weight:400;
  color:rgba(255,255,255,.45);letter-spacing:clamp(1.5px,.5vw,3px);
  text-transform:uppercase;margin:0 auto 32px;
  animation:subReveal .9s cubic-bezier(.22,1,.36,1) forwards;
  opacity:0;position:relative;z-index:1;
}
.hero-subtitle .hs-grad{
  background:linear-gradient(135deg,var(--blue-xl),var(--blue-l));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:600;
}
@keyframes subReveal{
  from{opacity:0;transform:translateY(8px);letter-spacing:clamp(4px,1vw,8px)}
  to{opacity:1;transform:translateY(0);letter-spacing:clamp(1.5px,.5vw,3px)}
}

.hero-desc{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:#c8deff;
  text-shadow:0 0 20px rgba(180,210,255,.35);
  max-width:560px;margin:0 auto 36px;line-height:1.75;
  animation:heroFadeUp .8s ease forwards;animation-delay:.25s;opacity:0;
  position:relative;z-index:1;
}
.hero-btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:52px;
  animation:heroFadeUp .8s ease forwards;animation-delay:.45s;opacity:0;position:relative;z-index:1}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;
  animation:heroFadeUp .8s ease forwards;animation-delay:.65s;opacity:0;position:relative;z-index:1}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.hero-stat{text-align:center;padding:0 4px}
.hero-stat-icon{
  font-size:1.1rem;display:block;margin-bottom:6px;
  color:var(--blue);
  filter:drop-shadow(0 0 10px rgba(25,98,247, .7));
  animation:iconGlowPulse 2.8s ease-in-out infinite;
}
.hero-stat .num{
  font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;display:block;
  color:#fff;-webkit-text-fill-color:#fff;
  line-height:1.1;
}
.hero-stat .lbl{font-size:.72rem;color:var(--text2);font-weight:500;letter-spacing:.8px;text-transform:uppercase;margin-top:4px;display:block}
.hero-stat-divider{width:1px;height:42px;background:linear-gradient(180deg,transparent,rgba(25,98,247, .4),transparent);flex-shrink:0}

.btn-primary{
  background:var(--blue);
  background-size:200% auto;
  color:#fff;padding:16px 40px;border-radius:14px;
  text-decoration:none;font-size:1.05rem;font-weight:900;
  transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 0 18px rgba(25,98,247, .7), 0 0 35px rgba(25,98,247, .4);
  animation:btnStocksGlow 2.8s ease-in-out infinite;
  position:relative;overflow:hidden;
  letter-spacing:0.5px;
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 18px 40px -10px rgba(25,98,247, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  filter:brightness(1.05);
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  pointer-events:none;
}
.btn-primary:hover::after{
  animation:shine-sweep 2s ease-in-out infinite;
}
.btn-ghost{background:transparent;color:var(--text);padding:13px 32px;border-radius:10px;text-decoration:none;font-size:1rem;font-weight:600;transition:all var(--transition);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--blue-l);color:var(--blue-xl);background:rgba(25,98,247,.07)}

/* ===== HERO STAT PILLS ===== */
.hero-pills{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:1}
.hero-pill{
  display:flex;align-items:center;gap:7px;
  background:rgba(25,98,247,.1);
  border:1px solid rgba(25,98,247,.25);
  border-radius:50px;padding:7px 16px;
  font-size:.78rem;font-weight:700;color:var(--blue-xl);
  backdrop-filter:blur(8px);
  animation:heroFadeUp .8s ease forwards;opacity:0;
}
.hero-pill:nth-child(1){animation-delay:.6s}
.hero-pill:nth-child(2){animation-delay:.75s}
.hero-pill:nth-child(3){animation-delay:.9s}
.hero-pill i{font-size:.8rem;color:var(--blue);filter:drop-shadow(0 0 8px rgba(25,98,247,.55));animation:iconGlowPulse 2.8s ease-in-out infinite;}
@keyframes iconGlowPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(25,98,247, .5))}
  50%{filter:drop-shadow(0 0 12px rgba(25,98,247, .85))}
}
@keyframes iconBoxGlowPulse{
  0%,100%{box-shadow:0 0 12px rgba(25,98,247, .35)}
  50%{box-shadow:0 0 24px rgba(25,98,247, .7), 0 0 8px rgba(25,98,247, .3)}
}

/* Premium Shortcode Icons */
.ce-icon {
    color: #1962f7 !important;
    font-size: 1.1em;
    vertical-align: middle;
    margin: 0 4px;
    filter: drop-shadow(0 0 10px rgba(25, 98, 247, 0.7));
    animation: iconGlowPulse 3s ease-in-out infinite;
    display: inline-block;
}

/* Scroll indicator — mobile only */
.hero-scroll{display:none}
@media(max-width:768px){
.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:48px;position:relative;z-index:1;
  animation:heroFadeUp .8s ease forwards;animation-delay:1.1s;opacity:0;
}
.hero-scroll span{font-size:.72rem;font-weight:600;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.hero-scroll-dot{
  width:2px;height:32px;border-radius:2px;
  background:linear-gradient(180deg,rgba(25,98,247,.6),transparent);
  position:relative;overflow:hidden;
}
.hero-scroll-dot::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--blue-l);border-radius:2px;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{0%{top:-100%}60%,100%{top:100%}}
}

/* Hero rain canvas — full width but clipped to hero height */
.hero-rain{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;
  pointer-events:none;z-index:1;opacity:.6;
}

/* Hero ambient orbs */
.hero-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(80px);opacity:.25;
}
.hero-orb-1{width:400px;height:400px;background:var(--blue);top:-100px;left:-80px;animation:orbFloat 8s ease-in-out infinite}
.hero-orb-2{width:300px;height:300px;background:var(--blue-l);bottom:-80px;right:-60px;animation:orbFloat 10s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}

/* ===== TRUST BADGES ===== */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;padding:clamp(20px,4vh,40px) clamp(16px,4vw,60px);position:relative;z-index:10;border-bottom:1px solid var(--border)}
.trust-badge{display:flex;align-items:center;gap:10px;color:var(--text2);font-size:.88rem;font-weight:500}
.trust-badge i{color:var(--blue);font-size:1.1rem;filter:drop-shadow(0 0 8px rgba(25,98,247,.55));animation:iconGlowPulse 2.8s ease-in-out infinite;}

/* ===== SECTION HEADER ===== */
.section-header{text-align:center;margin-bottom:48px;position:relative;z-index:10}
.section-tag{display:inline-block;background:rgba(25,98,247, .1);border:1px solid var(--border2);border-radius:50px;padding:5px 16px;font-size:.78rem;font-weight:700;color:var(--blue);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;text-shadow:0 0 28px rgba(25,98,247, .55);animation:stocksGlow 2.8s ease-in-out infinite;}
.section-header h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.5px;text-shadow: 0 0 18px rgba(255,255,255,.4), 0 0 40px rgba(255,255,255,.1);}
.section-header h2 span{color:var(--blue);-webkit-text-fill-color:var(--blue);text-shadow:0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5);animation:stocksGlow 2.8s ease-in-out infinite;}
.section-header p{color:var(--text2);margin-top:12px;font-size:.95rem;max-width:520px;margin-inline:auto}

/* ===== PRODUCTS ===== */
.products-section{padding:clamp(48px,8vw,100px) clamp(16px,4vw,60px);position:relative;z-index:10;max-width:1280px;margin:0 auto}
.cat-tabs-wrap{
  display:flex;justify-content:center;margin-bottom:40px;
}
.cat-tabs{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:8px;
  backdrop-filter:blur(12px);
}
.cat-tab{
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 18px;
  font-size:.84rem;font-weight:600;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  display:flex;align-items:center;gap:7px;
  transition:all .2s ease;
  white-space:nowrap;
  font-family:'Jost',sans-serif;
}
.cat-tab i{font-size:.75rem;opacity:.7}
.cat-tab:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.1)}
.cat-tab.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 18px rgba(25,98,247,.35)}
.cat-tab.active i{opacity:1}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}

/* ── Product Card ── */
.product-card{
  background:#08101f;
  border:1px solid rgba(25,98,247,.22);
  border-radius:18px;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;
}
.product-card:hover{
  border-color:rgba(25,98,247,.6);
  transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(25,98,247,.25),0 24px 56px rgba(25,98,247,.28);
}

/* Out of Stock State */

/* On Hold State */
.product-card.is-hold { border-color: rgba(255,204,0,0.4); }
.product-card.is-hold:hover { border-color: rgba(255,204,0,0.8); box-shadow: 0 0 0 1px rgba(255,204,0,0.25), 0 24px 56px rgba(255,204,0,0.3); }
.is-hold .product-img { background-image: radial-gradient(rgba(255,204,0,0.2) 1px, transparent 1px); }
.is-hold .product-img::after { background: linear-gradient(90deg, #ffcc00, #ffe066, #ffcc00); }

/* image area — dotted blue pattern */
.product-img{
  background-color:#070e1c;
  background-image:radial-gradient(rgba(25,98,247,.2) 1px,transparent 1px);
  background-size:22px 22px;
  position:relative;overflow:hidden;flex-shrink:0;
}
.product-img img{width:100%;height:auto;display:block;transition:transform .5s ease}
.product-card:hover .product-img img{transform:scale(1.04)}
/* blue bottom line on image */
.product-img::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-xl),var(--blue));
  pointer-events:none;z-index:3;
}
.product-img .placeholder-icon{
  height:220px;display:flex;align-items:center;justify-content:center;
  font-size:4rem;color:rgba(25,98,247,.3);
}

/* discount badge */
.product-badge.discount{
  position:absolute;top:14px;left:14px;
  background:rgba(25,98,247,.85);color:#fff;
  font-size:.68rem;font-weight:800;padding:4px 10px;
  border-radius:20px;letter-spacing:.5px;z-index:2;
  border:1px solid rgba(25,98,247,.5);
  box-shadow:0 0 12px rgba(25,98,247,.4);
}
/* stock pill — top right of image */
.product-stock-pill{
  position:absolute;top:14px;right:14px;z-index:4;
  font-size:.72rem;font-weight:700;padding:5px 13px;border-radius:20px;
  backdrop-filter:blur(6px);letter-spacing:.2px;
}
.product-stock-pill.in-pill{background:rgba(25,98,247,.2);color:var(--blue-xl);border:1px solid rgba(25,98,247,.45);box-shadow:0 0 10px rgba(25,98,247,.2)}
.product-stock-pill.low-pill{background:rgba(25,98,247,.15);color:var(--blue-xl);border:1px solid rgba(25,98,247,.4);box-shadow:0 0 10px rgba(25,98,247,.15)}
.product-stock-pill.oos-pill{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.35)}
/* category label in body */
.prod-cat-label{font-size:.7rem;color:var(--blue-l);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-top:5px}

/* card body */
.product-body{padding:24px 24px 24px;display:flex;flex-direction:column;flex:1}
.product-body h3{
  font-size:1.25rem;font-weight:800;color:#fff;line-height:1.3;
  margin-bottom:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 0 20px rgba(255,255,255,.35), 0 0 50px rgba(255,255,255,.1);
}
.product-desc{
  font-size:.8rem;color:var(--text3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:14px;flex:1;
}

/* divider */
.product-divider{height:1px;background:rgba(25,98,247,.12);margin:12px 0}

.product-body-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:18px}
.product-stock-col{flex-shrink:0;display:flex;align-items:center;gap:10px}
.psc-divider{width:1px;height:28px;background:rgba(255,255,255,.1);flex-shrink:0}
.psc-num{font-size:1.1rem;font-weight:800;color:rgba(255,255,255,.45);letter-spacing:-.5px;line-height:1}
.product-price{display:flex;align-items:baseline;gap:4px;margin-bottom:0}
.product-price .from{font-size:.78rem;color:rgba(255,255,255,.45);font-weight:500;margin-right:2px}
.product-price .currency{font-size:1rem;font-weight:700;color:var(--blue-xl);align-self:flex-start;margin-top:3px;text-shadow:0 0 10px rgba(25,98,247,.7)}
.product-price .price{font-size:1.9rem;font-weight:900;color:var(--blue-l);letter-spacing:-.5px;line-height:1;text-shadow:0 0 20px rgba(25,98,247,.6),0 0 40px rgba(25,98,247,.3)}
.product-price .slash{font-size:.82rem;color:rgba(255,255,255,.5);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.6);text-decoration-thickness:1.5px;margin-right:6px;align-self:center}

/* button */
.product-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:14px 0;border-radius:14px;
  font-size:.95rem;font-weight:800;letter-spacing:.5px;
  border:1px solid rgba(25,98,247,.3);
  background:rgba(25,98,247,.05);color:#fff;
  transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;overflow:hidden;position:relative;
}
/* Quantity Input Styles */
.bp-qty-num, .qty-val {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(25,98,247, 0.4) !important;
  border-radius: 8px !important;
  color: #fff !important;
  text-align: center !important;
  width: 50px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}
.bp-qty-num:focus, .qty-val:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 12px rgba(25,98,247, 0.4) !important;
}
/* Remove number input spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.product-btn .btn-text{
  transition:all 0.3s ease;
  position:absolute;
}
.product-btn .btn-arrow{
  opacity:0;transform:translateX(-15px);
  transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
  font-size:1.1rem;
}
.product-card:hover .product-btn{
  background:linear-gradient(135deg, var(--blue), #458fff);
  border-color:transparent;
  box-shadow:0 12px 28px -5px rgba(25,98,247,.6);
  transform:scale(1.02);
}
.product-card:hover .product-btn .btn-text{opacity:0;transform:translateY(15px)}
.product-card:hover .product-btn .btn-arrow{opacity:1;transform:translateX(0); animation: arrow-bounce 1s infinite;}
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
.product-btn.oos{color:#f87171;border-color:rgba(239,68,68,.35);cursor:default}
.product-btn.hold{color:#ffcc00;border-color:rgba(255,204,0,.35);cursor:default}
.product-card:hover .product-btn.oos{background:rgba(239,68,68,.1);box-shadow:none;border-color:rgba(239,68,68,.5)}
.product-card:hover .product-btn.hold{background:rgba(255,204,0,.1);box-shadow:none;border-color:rgba(255,204,0,.5)}

/* Mobile Persistent Status Glows */
@media (max-width: 768px) {
  .product-card.is-hold { 
    border-color: rgba(255,204,0,0.5); 
    box-shadow: 0 0 20px rgba(255,204,0,0.1);
  }
  .product-btn.oos {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.4);
  }
  .product-btn.hold {
    background: rgba(255,204,0,0.08);
    border-color: rgba(255,204,0,0.4);
  }
}

.no-products{text-align:center;padding:80px 20px;color:var(--text2);grid-column:1/-1}
.no-products i{font-size:3.5rem;margin-bottom:20px;display:block;color:var(--text3)}

/* ===== STATS ===== */
.stats-section{padding:clamp(48px,8vw,90px) clamp(16px,4vw,60px);position:relative;z-index:10;background:linear-gradient(180deg,transparent,rgba(25,98,247,.04),transparent)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:1000px;margin:0 auto}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:30px 24px;text-align:center;transition:all var(--transition)}
.stat-card:hover{border-color:var(--border2);box-shadow:0 0 30px rgba(25,98,247,.08)}
.stat-card i{font-size:1.8rem;color:var(--blue);margin-bottom:14px;display:block}
.stat-card .val{font-size:2rem;font-weight:900;color:#fff;display:block;margin-bottom:6px}
.stat-card .lbl{font-size:.85rem;color:var(--text2);font-weight:500}

/* ===== HOW IT WORKS ===== */
/* ===== TRUST / HOW WE DO IT ===== */
.trust-section{
  padding:clamp(60px,10vw,120px) clamp(16px,4vw,60px);
  position:relative;z-index:10;
  max-width:1300px;margin:0 auto;overflow:visible;
}
.trust-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);align-items:center;
  overflow:visible;
}
.trust-tag{margin-bottom:20px}
.trust-heading{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:900;line-height:1.15;
  margin-bottom:20px;color:#fff;
}
.trust-heading span{
  color:var(--blue);
  -webkit-text-fill-color:var(--blue);
  text-shadow:0 0 28px rgba(25,98,247,.55);
  animation:stocksGlow 2.8s ease-in-out infinite;
}
.trust-desc{color:var(--text2);font-size:.95rem;line-height:1.8;margin-bottom:36px}

@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 10px; }
  .trust-right { 
    width: 100%; display: flex; justify-content: center; overflow: visible; 
    order: 2; margin-top: 10px;
  }
  .trust-orb-wrap { 
    width: 100%; max-width: 340px; height: 460px; 
    margin: 0 auto; flex-shrink: 0; transform: scale(0.95);
  }
  .trust-mockup-img { width: 85%; }
  .trust-feats { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
  .trust-feat { display: flex !important; opacity: 1 !important; transform: none !important; }
  
  .orb-badge { 
    display: flex !important; opacity: 1 !important;
    padding: 8px 12px; gap: 8px; font-size: .7rem;
    transform: scale(0.85);
  }
  
  /* Badge positions for mobile */
  .orb-badge-tl { top: 5%; left: -2%; }
  .orb-badge-tr { top: 15%; right: -2%; }
  .orb-badge-bl { bottom: 15%; left: -2%; }
  .orb-badge-br { bottom: 5%; right: -2%; }

  .hero-stat-divider { display: none; }
}



.trust-feats{display:flex;flex-direction:column;gap:14px}
.trust-feat{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;padding:18px 20px;
  width:100%;box-sizing:border-box;
  transition:all .25s ease;
}
.trust-feat:hover{transform:translateX(4px);border-color:var(--border2);background:rgba(25,98,247,.07)}
.trust-icon{
  width:48px;height:48px;flex-shrink:0;border-radius:12px;
  background:rgba(25,98,247,.12);border:1px solid rgba(25,98,247,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:1.05rem;
  transition:all .25s ease;
  box-shadow:0 0 14px rgba(25,98,247,.35);
  animation:iconBoxGlowPulse 2.8s ease-in-out infinite;
}
.trust-feat:hover .trust-icon{
  background:rgba(25,98,247,.22);border-color:rgba(25,98,247,.5);
  box-shadow:0 0 20px rgba(25,98,247,.22);
}
.trust-feat-body h4{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:6px}
.trust-feat-body p{font-size:.83rem;color:var(--text2);line-height:1.65}

/* ── Mockup visual ── */
.trust-right{display:flex;align-items:center;justify-content:center}
.trust-orb-wrap{
  position:relative;
  width:clamp(400px,48vw,600px);
  height:clamp(520px,60vw,740px);
  flex-shrink:0;
}
.trust-mockup-img{
  position:absolute;top:50%;left:52%;
  transform:translate(-50%,-50%) perspective(1000px) rotateY(-8deg) rotateX(2deg);
  width:76%;
  filter:drop-shadow(-12px 20px 60px rgba(25,98,247,.55)) drop-shadow(12px 0 40px rgba(0,30,120,.4));
  z-index:2;
}
/* spinning rings */
.trust-orb-ring{
  position:absolute;border-radius:50%;border-style:solid;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.trust-orb-ring-1{
  width:90%;height:90%;
  border-width:1px;
  border-color:rgba(25,98,247,.18) rgba(25,98,247,.4) rgba(25,98,247,.1) rgba(25,98,247,.4);
  animation:orbSpin 8s linear infinite;
}
.trust-orb-ring-2{
  width:73%;height:73%;
  border-width:1px;
  border-color:rgba(25,98,247,.3) transparent rgba(25,98,247,.1) transparent;
  animation:orbSpin 5s linear infinite reverse;
}
.trust-orb-ring-3{
  width:55%;height:55%;
  border-width:1px;
  border-color:transparent rgba(25,98,247,.35) transparent rgba(25,98,247,.1);
  animation:orbSpin 3.5s linear infinite;
}
@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* glowing core */
.trust-orb-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44%;height:44%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(100,160,255,.45), rgba(0,60,200,.85) 60%, rgba(0,20,80,1));
  box-shadow:
    0 0 60px rgba(25,98,247,.55),
    0 0 120px rgba(25,98,247,.25),
    inset 0 0 40px rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  animation:coreGlow 3s ease-in-out infinite;
}
@keyframes coreGlow{
  0%,100%{box-shadow:0 0 60px rgba(25,98,247,.5),0 0 120px rgba(25,98,247,.2),inset 0 0 40px rgba(255,255,255,.06)}
  50%{box-shadow:0 0 90px rgba(25,98,247,.75),0 0 160px rgba(25,98,247,.35),inset 0 0 60px rgba(255,255,255,.12)}
}
.trust-orb-inner{
  font-size:clamp(1.8rem,3vw,2.8rem);
  color:rgba(255,255,255,.9);
  filter:drop-shadow(0 0 12px rgba(25,98,247,.8));
}

/* floating orb badges */
.orb-badge{
  position:absolute;
  z-index:3;
  display:flex;align-items:center;gap:10px;
  background:rgba(10,14,31,.88);
  border:1px solid rgba(25,98,247,.28);
  border-radius:12px;padding:10px 14px;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  white-space:nowrap;
}
.orb-badge-tl{top:8%;left:2%;animation:badgeFloat 4s ease-in-out infinite}
.orb-badge-tr{top:18%;right:2%;animation:badgeFloat 4s ease-in-out infinite 1s}
.orb-badge-bl{bottom:18%;left:2%;animation:badgeFloat 4s ease-in-out infinite 2s}
.orb-badge-br{bottom:5%;right:2%;animation:badgeFloat 4s ease-in-out infinite .5s}
@media(max-width:900px){
  .orb-badge{padding:8px 12px;gap:8px;font-size:.75rem}
  .tb-icon{width:28px;height:28px;font-size:.75rem}
  .tb-label{font-size:.75rem}
  .tb-sub{font-size:.65rem}
  .orb-badge-tl{top:5%;left:-5%;transform:scale(.9)}
  .orb-badge-tr{top:15%;right:-5%;transform:scale(.9)}
  .orb-badge-bl{bottom:15%;left:-5%;transform:scale(.9)}
  .orb-badge-br{bottom:5%;right:-5%;transform:scale(.9)}
}
@media(max-width:480px){
  .orb-badge{padding:6px 10px;transform:scale(.8) !important}
  .orb-badge-tl{top:2%;left:-10%}
  .orb-badge-tr{top:12%;right:-10%}
  .orb-badge-bl{bottom:12%;left:-10%}
  .orb-badge-br{bottom:2%;right:-10%}
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.tb-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:8px;
  background:rgba(25,98,247,.18);border:1px solid rgba(25,98,247,.35);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:.85rem;
  box-shadow:0 0 10px rgba(25,98,247,.4);
  animation:iconBoxGlowPulse 2.8s ease-in-out infinite;
}
.tb-body{display:flex;flex-direction:column;gap:1px}
.tb-label{font-size:.8rem;font-weight:700;color:#fff}
.tb-sub{font-size:.7rem;color:var(--text2)}

/* ===== TESTIMONIALS ===== */
.reviews-section{padding:clamp(48px,8vw,100px) clamp(16px,4vw,60px);position:relative;z-index:10;overflow:hidden}
.reviews-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.reviews-track{display:flex;gap:20px;width:max-content;animation:reviewsScroll 30s linear infinite}
.reviews-track:hover{animation-play-state:paused}
@keyframes reviewsScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;width:300px;flex-shrink:0}
.review-stars{color:var(--blue);margin-bottom:12px;font-size:.9rem;letter-spacing:2px}
.review-card p{font-size:.88rem;color:var(--text2);line-height:1.6;margin-bottom:16px}
.review-author{display:flex;align-items:center;gap:10px}
.review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue-dim),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0}
.review-name{font-size:.85rem;font-weight:700}
.review-date{font-size:.75rem;color:var(--text2)}

/* ===== FAQ ===== */
.faq-section{padding:clamp(48px,8vw,100px) clamp(16px,4vw,60px);position:relative;z-index:10;max-width:900px;margin:0 auto}
.faq-grid{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.faq-item:hover{
  border-color:rgba(25,98,247,.3);
  box-shadow:0 0 24px rgba(25,98,247,.08);
  transform:translateY(-2px);
}
.faq-item.open{
  border-color:rgba(25,98,247,.4);
  box-shadow:0 0 32px rgba(25,98,247,.12);
}
.faq-q{
  width:100%;background:transparent;border:none;color:var(--text);
  text-align:left;padding:20px 22px;
  font-size:.95rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:'Jost',sans-serif;transition:color .25s;
}
.faq-q:hover{color:#fff}
.faq-q-left{display:flex;align-items:center;gap:14px}
.faq-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;
  background:rgba(25,98,247,.14);border:1px solid rgba(25,98,247,.28);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:.8rem;
  transition:background .3s, border-color .3s, transform .3s;
  box-shadow:0 0 12px rgba(25,98,247,.35);
  animation:iconBoxGlowPulse 2.8s ease-in-out infinite;
}
.faq-item.open .faq-icon{
  background:rgba(25,98,247,.28);border-color:rgba(25,98,247,.5);
  transform:scale(1.08);
}
.faq-chevron{
  color:rgba(255,255,255,.35);font-size:.75rem;flex-shrink:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), color .25s;
}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--blue-l)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .35s ease, padding .35s;
  opacity:0;
}
.faq-item.open .faq-a{max-height:300px;opacity:1;padding-bottom:20px}
.faq-a p{
  color:var(--text2);font-size:.88rem;line-height:1.75;
  padding:0 22px 0 72px;
  animation:faqReveal .35s ease forwards;
}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ===== FOOTER ===== */
@import url('/static/css/footer.css');

  .product-body{padding:14px}
  .product-body h3{font-size:.95rem}

/* === MOBILE: ≤ 480px (phones) === */
@media(max-width:480px){
  /* Nav */
  .nav-logo-text{font-size:1.45rem}
  .nav-logo-img{height:42px}

  /* Products grid: single column */
  .products-grid{grid-template-columns:1fr;gap:14px}

  /* Product card */
  .product-img .placeholder-icon{height:160px}

  /* Hero */
  .hero-title{letter-spacing:2px;font-size:clamp(2.4rem,12vw,3.6rem);line-height:1.05;text-shadow: 0 0 18px rgba(255,255,255,.9), 0 0 40px rgba(255,255,255,.4), 0 0 70px rgba(255,255,255,.15) !important;}
  .title-grad{display:block;margin-top:2px;text-shadow: 0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5) !important;}
  .nav-logo-linex { text-shadow: 0 0 10px rgba(255,255,255, 0.35) !important; }
  /* Restore and BOOST icon glows on touch devices - Force high-visibility */
  .hero-stat i, .trust-badge i, .trust-icon i, .tb-icon i, .feat-icon i, .how-step i { 
    animation: iconGlowPulse 2.8s ease-in-out infinite !important; 
    text-shadow: 0 0 15px rgba(25,98,247, 0.95), 0 0 30px rgba(25,98,247, 0.7), 0 0 45px rgba(25,98,247, 0.4) !important; 
    filter: none !important; /* Remove conflicting drop-shadows that cause unbalance */
    opacity: 1 !important; 
  }
  .trust-badge i { font-size: 1.2rem !important; } /* Slightly larger for better impact */

  /* Trust section small phones */
  .trust-heading{font-size:1.65rem}
  .trust-desc{font-size:.88rem}

  /* Section header */
  .section-header{margin-bottom:28px}
  .section-header h2{font-size:1.6rem}

  /* Trust bar stays flex centered on small phones */
  .trust-bar{gap:12px 22px}

  /* FAQ */
  .faq-q-left{gap:10px}
  .faq-icon{width:30px;height:30px;font-size:.75rem}
}

/* ===== GLOW DIVIDER ===== */
.glow-divider{height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);margin:0;border:none;opacity:.4}


/* ===== EXTRACTED FROM index.html ===== */
/* ===== SITE LOADER ===== */
    #site-loader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #04060e;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transition: background .35s ease .15s;
    }

    #site-loader.sl-bursting {
      background: transparent;
    }

    .sl-ring-wrap {
      position: relative;
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sl-ring-wrap.sl-zoom-burst {
      animation: slZoomBurst .5s cubic-bezier(.4, 0, .6, 1) forwards;
    }

    @keyframes slZoomBurst {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      65% {
        transform: scale(18);
        opacity: 1;
      }

      100% {
        transform: scale(30);
        opacity: 0;
      }
    }

    .sl-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2.5px solid rgba(0, 81, 255, .12);
      border-top-color: #2b76ff;
      border-right-color: rgba(0, 81, 255, .5);
      animation: slSpin 1.1s linear infinite;
    }

    .sl-ring-inner {
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(25,98,247, .08);
      border-bottom-color: rgba(25,98,247, .4);
      animation: slSpin 1.8s linear infinite reverse;
    }

    @keyframes slSpin {
      to {
        transform: rotate(360deg)
      }
    }

    .sl-logo-img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      border-radius: 50%;
    }

/* ===== HOME REVIEWS SECTION ===== */
.home-reviews-section{
  position:relative;z-index:10;
  scroll-margin-top:80px;
  padding:clamp(60px,9vw,110px) clamp(16px,4vw,60px);
  background:linear-gradient(180deg,transparent 0%,rgba(0,51,204,.04) 40%,rgba(0,51,204,.07) 60%,transparent 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.home-reviews-inner{
  max-width:1280px;margin:0 auto;
}

/* subtitle rating line */
.home-reviews-subtitle{
  color:var(--text2);margin-top:10px;font-size:.95rem;
}
.hrs-rating{
  color:#fbbf24;font-weight:700;letter-spacing:.5px;
  text-shadow:0 0 12px rgba(251,191,36,.4);
}

/* ── grid ── */
.home-reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
}
@media(max-width:1024px){
  .home-reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .home-reviews-grid{grid-template-columns:1fr}
}

/* ── card ── */
.hrv-card{
  background:rgba(8,14,30,.7);
  border:1px solid var(--border);
  border-left:3px solid var(--blue);
  border-radius:var(--r);
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.hrv-card:hover{
  transform:translateY(-5px);
  border-color:var(--border2);
  border-left-color:var(--blue-l);
  box-shadow:0 16px 48px rgba(25,98,247,.18),0 0 0 1px rgba(25,98,247,.12);
}

/* top row: stars + product tag */
.hrv-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.hrv-stars{display:flex;align-items:center;gap:2px}
.hrv-star{font-size:1.05rem;line-height:1}
.hrv-star.filled{color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.5)}
.hrv-star.empty{color:rgba(255,255,255,.15)}
.hrv-product-tag{
  display:flex;align-items:center;gap:5px;
  background:rgba(25,98,247,.1);
  border:1px solid var(--border2);
  border-radius:20px;
  padding:3px 10px;
  font-size:.72rem;font-weight:700;
  color:var(--blue-xl);letter-spacing:.3px;
  white-space:nowrap;
}
.hrv-product-tag i{font-size:.6rem;opacity:.7}

/* review text */
.hrv-text{
  font-size:.9rem;line-height:1.65;
  color:var(--text2);
  flex:1;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* footer row */
.hrv-footer{
  display:flex;align-items:center;gap:12px;margin-top:auto;
  border-top:1px solid var(--border);padding-top:14px;
}
.hrv-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;
  box-shadow:0 0 14px rgba(25,98,247,.35);
}
.hrv-meta{flex:1;min-width:0}
.hrv-name{font-size:.85rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrv-email{font-size:.72rem;color:var(--text3);margin-top:1px}
.hrv-date{font-size:.72rem;color:var(--text3);margin-top:1px}
.hrv-verified{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:.7rem;font-weight:700;color:#4ade80;
  background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);
  border-radius:20px;padding:3px 9px;white-space:nowrap;
}
.hrv-verified i{font-size:.65rem}

/* CTA button */
.home-reviews-cta{
  display:flex;justify-content:center;margin-top:48px;
}
.hrv-view-all-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 32px;border-radius:14px;
  border:1px solid var(--border2);
  color:var(--blue-xl);
  background:transparent;
  font-size:.95rem;font-weight:700;
  text-decoration:none;letter-spacing:.3px;
  transition:all var(--transition);
}
.hrv-view-all-btn:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 8px 28px rgba(25,98,247,.4);
  transform:translateY(-2px);
}
.hrv-view-all-btn i{transition:transform var(--transition)}
.hrv-view-all-btn:hover i{transform:translateX(4px)}

/* ── REVIEWS CAROUSEL ── */
.hrv-carousel {
  overflow: hidden;
  padding: 4px 0 24px;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hrv-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: hrv-scroll 35s linear infinite;
  will-change: transform;
}
@keyframes hrv-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.hrv-track .hrv-card {
  flex: 0 0 320px;
}
@media(max-width:640px) {
  .home-reviews-section {
    padding: 0 0 40px;
    -webkit-mask: none !important;
    mask: none !important;
  }
  .hrv-track {
    animation-duration: 25s; /* Slightly faster for mobile */
  }
  .hrv-track .hrv-card { 
    flex: 0 0 280px;
    margin: 0 10px;
  }
}

/* Remove old grid */
.home-reviews-grid { display: none; }

/* ── ICON GLOWS ── */
.trust-icon i { text-shadow: 0 0 6px rgba(25,98,247,.5), 0 0 12px rgba(25,98,247,.25); }
.stat-card i, .stat-icon i { text-shadow: 0 0 6px rgba(25,98,247,.5); }
.faq-icon i { text-shadow: 0 0 5px rgba(25,98,247,.4); }
.step-icon i, .how-icon i { text-shadow: 0 0 6px rgba(25,98,247,.5); }
.product-card .card-icon i { text-shadow: 0 0 5px rgba(25,98,247,.4); }

/* ── BLUE ICON GLOWS ── */
.product-card .card-badge i { text-shadow:0 0 5px rgba(25,98,247,.45); }
.product-btn i { text-shadow:0 0 6px rgba(255,255,255,.45); }
.product-price .currency { text-shadow:0 0 6px rgba(25,98,247,.4); }
/* .hero-stat i { color:var(--blue-l);text-shadow:0 0 7px rgba(25,98,247,.45); } */
.nav-links-center a i { color:var(--blue-l);text-shadow:0 0 5px rgba(25,98,247,.4); }
.how-step-icon i,.feat-icon i { text-shadow:0 0 7px rgba(25,98,247,.5); }
.faq-q i { color:var(--blue-l);text-shadow:0 0 5px rgba(25,98,247,.4); }

/* ===== MOBILE PERFORMANCE ===== */
@media(pointer: coarse){
  /* Reduce backdrop-filter cost */
  .nav-wrap{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .mobile-menu{backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobile-menu-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Kill excessive background animations only - Brand Colors Stay Intense */
  .section-header h2 span { animation: none; }
  .nav-logo-linex { text-shadow: 0 0 10px rgba(255,255,255, 0.35); }
  .hero-title { text-shadow: 0 0 18px rgba(255,255,255,.9), 0 0 40px rgba(255,255,255,.4), 0 0 70px rgba(255,255,255,.15); }
  .nav-logo-stocks { animation: stocksGlow 2.8s ease-in-out infinite; }
  .btn-primary { animation: btnStocksGlow 2.8s ease-in-out infinite; box-shadow: 0 0 20px rgba(25,98,247, .9), 0 0 50px rgba(25,98,247, .6); }
  .hero-stat i, .trust-badge i, .trust-icon i, .tb-icon i, .feat-icon i, .how-step i { 
    animation: iconGlowPulse 2.8s ease-in-out infinite !important; 
    text-shadow: 0 0 18px rgba(25,98,247, 0.98), 0 0 35px rgba(25,98,247, 0.75), 0 0 50px rgba(25,98,247, 0.5) !important; 
    filter: none !important;
    opacity: 1 !important; 
  }
  .title-grad { text-shadow: 0 0 18px rgba(25,98,247, .9), 0 0 40px rgba(25,98,247, .5); }
  
  /* Sync Section Headers & Utilities for Mobile */
  .section-header h2 { text-shadow: 0 0 8px rgba(255,255,255,.3); }
  .section-header h2 span { text-shadow: 0 0 18px rgba(25,98,247, .8); }
  .littleglow { text-shadow: 0 0 20px rgba(25,98,247, .9) !important; }
  .littleglow-white { text-shadow: 0 0 10px rgba(255,255,255, .4); }

  /* Disable shine-sweep on buttons */
  .nav-btn-filled::after{display:none}
  /* Use GPU-composited transform only on interactive tap */
  .product-card{will-change:auto}
  .product-card:active{transform:translateY(-2px)}
  /* Smoother scroll */
  html{-webkit-overflow-scrolling:touch}
}