:root{
  --base:#0a0a0a; --surface:#1a1a1a; --edge:#2e2e2e;
  --ink:#ffffff; --muted:#a0a0a0; --steel:#d4d4d4; --cta:#25d366;
  --paper:#f4f4f5; --mist:#e4e4e7; --panel:#ffffff; --charcoal:#18181b; --graphite:#52525b;
}
html,body{ background:#111111; }
body{ font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }

section[id]{ scroll-margin-top: 84px; }

::selection{ background:var(--cta); color:var(--base); }

:focus-visible{ outline:2px solid var(--cta); outline-offset:3px; border-radius:2px; }

.grain{
  position:fixed; inset:0; z-index:30; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-texture{
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

.nav-link{ position:relative; color:var(--muted); transition:color .2s ease; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--cta); transition:width .25s ease;
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ width:100%; }

.corner-frame{ position:relative; --frame-color:var(--edge); }
.corner-frame-light{ --frame-color:var(--mist); }
.corner-frame::before,.corner-frame::after{
  content:""; position:absolute; width:14px; height:14px;
  border-color:var(--frame-color); transition:border-color .3s ease, top .3s ease, left .3s ease, bottom .3s ease, right .3s ease;
}
.corner-frame::before{ top:10px; left:10px; border-top:2px solid; border-left:2px solid; }
.corner-frame::after{ bottom:10px; right:10px; border-bottom:2px solid; border-right:2px solid; }
.corner-frame:hover{ --frame-color:#25d366; }
.corner-frame:hover::before{ top:7px; left:7px; }
.corner-frame:hover::after{ bottom:7px; right:7px; }

.material-overlay{
  position:absolute; inset:0; background-color:rgba(0,0,0,.5);
  transition:background-color .3s ease;
}
.group:hover .material-overlay{ background-color:rgba(0,0,0,.3); }

.material-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#ffffff; color:#000000; font-weight:600;
  padding:8px 20px; border-radius:2px; text-transform:uppercase; font-size:.8rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, background-color .3s ease;
}
.group:hover .material-cta{ opacity:1; transform:translateY(0); }
.material-cta:hover{ background:#e5e5e5; }

@media (hover: none){
  .material-cta{ opacity:1; transform:none; padding:11px 20px; }
}

/* Stats grid: grid-aware dividers (avoids divide-* row-wrap artifact) */
.stats-grid > div:nth-child(odd){ border-right:1px solid var(--edge); }
.stats-grid > div:nth-child(-n+2){ border-bottom:1px solid var(--edge); }
@media (min-width:1024px){
  .stats-grid > div{ border-right:1px solid var(--edge); border-bottom:none; }
  .stats-grid > div:last-child{ border-right:none; }
}

.kicker{ letter-spacing:.28em; }

@keyframes wa-float-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}
.wa-float{ animation:wa-float-pulse 2s ease-in-out infinite; }
.wa-float-tooltip{
  opacity:0; transform:translateX(4px);
  transition:opacity .2s ease, transform .2s ease;
}
.wa-float:hover .wa-float-tooltip,
.wa-float:focus-visible .wa-float-tooltip{
  opacity:1; transform:translateX(0);
}

#mobile-menu{ transition:opacity .3s ease; }

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