:root{
  --navy:#0B1F3F;
  --navy-deep:#070F22;
  --bg-dark:#0A0E1A;
  --accent:#22E6A8;
  --accent-2:#22D3EE;
  --text-light:#EAF1F8;
  --text-muted-light:#475569;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter', sans-serif;
  background:#F8FAFC;
  color:#0B1220;
}

h1,h2,h3,h4,.font-display{
  font-family:'Sora', sans-serif;
}

.bg-grid{
  background-image:
    linear-gradient(rgba(34,230,168,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,230,168,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.text-balance{text-wrap:balance;}

.gradient-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.glow{
  box-shadow: 0 0 0 1px rgba(34,230,168,0.25), 0 8px 30px rgba(34,230,168,0.15);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.fade-up{
  opacity:0;
  transform:translateY(16px);
  animation:fadeUp .6s ease-out forwards;
}
@keyframes fadeUp{to{opacity:1; transform:translateY(0);}}

::selection{background:var(--accent); color:#06140F;}

.counter-num{
  font-family:'Sora', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

/* ===== NETWORK CANVAS HERO ===== */
.network-canvas-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.network-canvas-wrap canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.network-canvas-wrap::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,15,34,0) 0%, rgba(7,15,34,0.55) 75%, rgba(7,15,34,0.95) 100%);
  pointer-events:none;
}

/* ===== GLASS CARDS ===== */
.glass-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.glass-card-light{
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(11,31,63,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ===== GRADIENT TEXT ===== */
.text-gradient{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ===== CURSOR GLOW (decorative, non-blocking) ===== */
#cursorGlow{
  position:fixed;
  top:0; left:0;
  width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,230,168,0.10) 0%, transparent 70%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  opacity:0;
  will-change:transform;
}

/* ===== ANIMATED BORDER ON HOVER (cards) ===== */
.edge-glow{
  position:relative;
  isolation:isolate;
}
.edge-glow::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(34,230,168,0) 0%, rgba(34,230,168,0) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transition:background .35s ease;
  z-index:-1;
  pointer-events:none;
}
.edge-glow:hover::before{
  background:linear-gradient(135deg, rgba(34,230,168,0.7) 0%, rgba(34,211,238,0.7) 100%);
}

/* ===== MARQUEE ===== */
.marquee-track{
  display:flex;
  gap:3rem;
  animation:marquee 28s linear infinite;
  width:max-content;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ===== NUMBER TICKER ===== */
.ticker-num{
  font-family:'Sora', sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}

/* hide default scrollbar look slightly for dark sections (non-destructive) */
@media (hover:hover){
  #cursorGlow{display:block;}
}
@media (hover:none){
  #cursorGlow{display:none;}
}

/* ===== MAGNETIC BUTTONS ===== */
.magnetic{
  will-change:transform;
  transition:transform .25s cubic-bezier(.16,.84,.44,1);
}

/* ===== GLASS SHINE (specular highlight following cursor) ===== */
.shine{
  position:relative;
  overflow:hidden;
}
.shine::before{
  content:'';
  position:absolute;
  top:var(--my, 50%);
  left:var(--mx, 50%);
  width:280px; height:280px;
  background:radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(34,230,168,0.08) 40%, transparent 70%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  z-index:0;
}
.shine:hover::before{ opacity:1; }
.shine > *{ position:relative; z-index:1; }

/* ===== HERO DECODE-IN (blur to sharp on load) ===== */
.hero-intro > *{
  opacity:0;
  filter:blur(10px);
  transform:translateY(18px);
  animation:heroDecode .9s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-intro > *:nth-child(1){ animation-delay:.05s; }
.hero-intro > *:nth-child(2){ animation-delay:.20s; }
.hero-intro > *:nth-child(3){ animation-delay:.38s; }
.hero-intro > *:nth-child(4){ animation-delay:.56s; }
@keyframes heroDecode{
  to{ opacity:1; filter:blur(0); transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-intro > *{ opacity:1; filter:none; transform:none; animation:none; }
}

/* ===== PARALLAX HERO LAYERS ===== */
[data-parallax-bg]{
  will-change:transform;
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:60;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:waPulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover{
  transform:scale(1.08);
}
.whatsapp-float svg{
  width:30px;
  height:30px;
}
@keyframes waPulse{
  0%, 100%{ box-shadow:0 8px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.45); }
  50%{ box-shadow:0 8px 24px rgba(0,0,0,0.25), 0 0 0 10px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation:none; }
}
@media (max-width: 480px){
  .whatsapp-float{
    bottom:16px;
    right:16px;
    width:52px;
    height:52px;
  }
  .whatsapp-float svg{ width:26px; height:26px; }
}