/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --glow-primary: rgba(143, 245, 255, 0.15);
  --glow-secondary: rgba(172, 137, 255, 0.15);
  --glow-tertiary: rgba(255, 107, 151, 0.15);
}

/* ============================================
   RESET & BASE
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background-color:#0e0e0f;color:#fff;overflow-x:hidden;
  background-image:
    radial-gradient(rgba(143,245,255,0.02) 1px,transparent 0),
    linear-gradient(to right, rgba(128,128,128,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128,128,128,0.03) 1px, transparent 1px);
  background-size:40px 40px, 80px 80px, 80px 80px}
.font-headline,.font-label{font-family:'Space Grotesk',sans-serif}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;display:inline-block;vertical-align:middle}
.ndr-accent{color:#fe3d82}.ndr-bg-accent{background-color:#fe3d82}
.glass-panel{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:rgba(26,25,27,0.7);border:1px solid rgba(255,255,255,0.05)}

/* ============================================
   FLOATING GLOW ORBS (ambient background)
   ============================================ */
.glow-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(120px);opacity:.4;will-change:transform}
.glow-orb--primary{width:500px;height:500px;background:rgba(143,245,255,.08);top:10%;left:-5%;animation:float-orb 20s ease-in-out infinite}
.glow-orb--secondary{width:400px;height:400px;background:rgba(172,137,255,.08);bottom:10%;right:-5%;animation:float-orb 25s ease-in-out infinite reverse}
.glow-orb--tertiary{width:300px;height:300px;background:rgba(255,107,151,.06);top:50%;left:40%;animation:float-orb 30s ease-in-out infinite 5s}
@keyframes float-orb{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(60px,-40px) scale(1.1)}
  50%{transform:translate(-30px,60px) scale(.95)}
  75%{transform:translate(-60px,-30px) scale(1.05)}
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:all .8s var(--ease-out-expo)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:all .8s var(--ease-out-expo)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.95);transition:all .8s var(--ease-out-expo)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* Stagger children */
.stagger-children > *:nth-child(1){transition-delay:.05s}
.stagger-children > *:nth-child(2){transition-delay:.12s}
.stagger-children > *:nth-child(3){transition-delay:.19s}
.stagger-children > *:nth-child(4){transition-delay:.26s}
.stagger-children > *:nth-child(5){transition-delay:.33s}
.stagger-children > *:nth-child(6){transition-delay:.4s}

/* ============================================
   PULSE & GLOW EFFECTS
   ============================================ */
.pulse-glow{animation:pulse-glow 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse-glow{0%,100%{opacity:1}50%{opacity:.4}}
.scanning-line{width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(143,245,255,.6),transparent);position:absolute;top:0;left:0;animation:scan 4s linear infinite;z-index:20;pointer-events:none}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.alert-pulse{animation:alert-flash 1.5s ease-in-out infinite}
@keyframes alert-flash{0%,100%{background-color:rgba(255,113,108,.1)}50%{background-color:rgba(255,113,108,.3)}}

/* ============================================
   PRODUCT CARDS (with animated gradient border + 3D tilt + spotlight)
   ============================================ */
.product-card{
  transition:all .5s var(--ease-out-expo);
  position:relative;
  transform-style:preserve-3d;
  perspective:1000px;
}
.product-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(143,245,255,.06),transparent 40%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:1;
}
.product-card:hover::after{opacity:1}
.product-card:hover{transform:translateY(-8px) scale(1.01)}
.product-card-ndr:hover{box-shadow:0 20px 60px -15px rgba(143,245,255,.15),0 0 30px -10px rgba(143,245,255,.1);border-color:rgba(143,245,255,.4)}
.product-card-dns:hover{box-shadow:0 20px 60px -15px rgba(172,137,255,.15),0 0 30px -10px rgba(172,137,255,.1);border-color:rgba(172,137,255,.4)}
.product-card-ueba:hover{box-shadow:0 20px 60px -15px rgba(255,107,151,.15),0 0 30px -10px rgba(255,107,151,.1);border-color:rgba(255,107,151,.4)}

/* ============================================
   NAVIGATION (floating pill with enhanced glassmorphism)
   ============================================ */
nav#mainNav{
  transition:all .4s var(--ease-out-expo);
  border-bottom:1px solid transparent;
}
nav.scrolled{
  padding-top:.5rem;padding-bottom:.5rem;
  background:rgba(14,14,15,.85)!important;
  backdrop-filter:blur(30px)!important;-webkit-backdrop-filter:blur(30px)!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 30px rgba(143,245,255,.03);
}

/* Animated nav links */
.nav-link{position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#8ff5ff,#00deec);transition:width .4s var(--ease-out-expo)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:#8ff5ff}
.nav-link:hover{color:#8ff5ff!important}

/* ============================================
   BLOG CARDS (enhanced)
   ============================================ */
.blog-card{transition:all .5s var(--ease-out-expo);overflow:hidden}
.blog-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#8ff5ff,#ac89ff,#ff6b97);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out-expo);
}
.blog-card:hover::before{transform:scaleX(1)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px -15px rgba(143,245,255,.12);border-color:rgba(143,245,255,.25)}

/* ============================================
   COUNTER & MISC
   ============================================ */
.counter{display:inline-block;font-variant-numeric:tabular-nums}

/* ============================================
   MOBILE MENU (enhanced)
   ============================================ */
.mobile-menu{transform:translateX(100%);transition:transform .5s var(--ease-out-expo)}
.mobile-menu.open{transform:translateX(0)}

/* Hamburger with smoother animation */
.hamburger span{display:block;width:24px;height:2px;background:#8ff5ff;transition:all .4s var(--ease-out-expo);margin:5px 0}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ============================================
   BACK TO TOP (enhanced)
   ============================================ */
#backToTop{opacity:0;pointer-events:none;transition:all .4s var(--ease-out-expo);transform:translateY(16px)}
#backToTop.visible{opacity:1;pointer-events:all;transform:translateY(0)}
#backToTop:hover{transform:translateY(-4px)!important;box-shadow:0 8px 25px rgba(143,245,255,.3)}

/* ============================================
   SCROLL PROGRESS (gradient)
   ============================================ */
#scrollProgress{transform-origin:left;transform:scaleX(0);transition:none}

/* ============================================
   SHINY CTA BUTTON
   ============================================ */
.shiny-btn{
  position:relative;overflow:hidden;
  isolation:isolate;
}
.shiny-btn::before{
  content:'';position:absolute;inset:-2px;
  background:conic-gradient(from var(--gradient-angle),#8ff5ff,#ac89ff,#ff6b97,#8ff5ff);
  border-radius:inherit;z-index:-2;
  animation:rotate-gradient 3s linear infinite;
  opacity:0;transition:opacity .5s ease;
}
.shiny-btn:hover::before{opacity:1}
.shiny-btn::after{
  content:'';position:absolute;inset:2px;
  background:inherit;border-radius:inherit;z-index:-1;
}
@keyframes rotate-gradient{
  to{--gradient-angle:360deg}
}

/* ============================================
   CARD SPOTLIGHT EFFECT (JS-driven)
   ============================================ */
.spotlight-card{
  position:relative;overflow:hidden;
  transition:all .5s var(--ease-out-expo);
}
.spotlight-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(143,245,255,.08),transparent 40%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.spotlight-card:hover::before{opacity:1}
.spotlight-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px -12px rgba(0,0,0,.4);
  border-color:rgba(143,245,255,.15)!important;
}

/* ============================================
   TESTIMONIAL CARDS (glass effect)
   ============================================ */
.testimonial-glass{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all .5s var(--ease-out-expo);
}
.testimonial-glass:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px -15px rgba(0,0,0,.4);
}

/* ============================================
   HERO GRADIENT TEXT SHIMMER
   ============================================ */
.shimmer-text{
  background-size:200% 100%;
  animation:shimmer-text 4s ease-in-out infinite;
}
@keyframes shimmer-text{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ============================================
   STAT CARDS (hover glow)
   ============================================ */
.stat-card{
  transition:all .4s var(--ease-out-expo);
  position:relative;
}
.stat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#8ff5ff,transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out-expo);
}
.stat-card:hover::after{transform:scaleX(1)}
.stat-card:hover{
  background-color:rgba(32,31,33,.8)!important;
  box-shadow:0 0 40px -10px rgba(143,245,255,.1);
}

/* ============================================
   PROCESS STEPS (animated number)
   ============================================ */
.process-step:hover .process-num{
  color:rgba(143,245,255,.4)!important;
  text-shadow:0 0 40px rgba(143,245,255,.2);
}

/* ============================================
   FEATURE GRID ITEMS
   ============================================ */
.feature-item{
  transition:all .4s var(--ease-out-expo);
  position:relative;
}
.feature-item::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:0;
  background:linear-gradient(180deg,#8ff5ff,transparent);
  transition:height .5s var(--ease-out-expo);
}
.feature-item:hover::before{height:100%}
.feature-item:hover{
  transform:translateY(-6px);
  background-color:rgba(26,25,27,.8)!important;
}

/* ============================================
   FORM INPUTS (glow focus)
   ============================================ */
input:focus,select:focus{
  box-shadow:0 4px 20px -5px rgba(143,245,255,.15)!important;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none}
  .scanning-line,.pulse-glow,.alert-pulse{animation:none}
  .product-card:hover{transform:none}
  .glow-orb{display:none}
  .shiny-btn::before{animation:none}
  .shimmer-text{animation:none}
  .stat-card::after,.feature-item::before,.blog-card::before{transition:none}
}

/* ============================================
   BENTO GRID
   ============================================ */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
@media(max-width:768px){.bento-grid{grid-template-columns:1fr}}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0e0e0f}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2c2c2d,#1a191b);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8ff5ff,#00deec)}

/* ============================================
   TIMELINE DOT PULSE
   ============================================ */
.timeline-dot-pulse{box-shadow:0 0 0 0 rgba(255,113,108,.4);animation:dot-pulse 2s infinite}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgba(255,113,108,.7)}70%{box-shadow:0 0 0 10px rgba(255,113,108,0)}100%{box-shadow:0 0 0 0 rgba(255,113,108,0)}}

/* ============================================
   ANIMATED GRADIENT BORDER UTILITY
   ============================================ */
.gradient-border{
  position:relative;
}
.gradient-border::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--gradient-angle),transparent 25%,#8ff5ff 50%,transparent 75%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rotate-gradient 4s linear infinite;
  opacity:0;transition:opacity .5s ease;
}
.gradient-border:hover::before{opacity:1}