*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--gblue-dim) var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden}

::selection{background:var(--gblue);color:var(--selection-text)}

/* ── NOISE + SCANLINE OVERLAY ── */
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--overlay-noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:var(--overlay-scan-opacity);
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(66,133,244,0.03) 2px,rgba(66,133,244,0.03) 4px);
  animation:scanDrift 8s linear infinite}
@keyframes scanDrift{from{background-position:0 0}to{background-position:0 100px}}

/* ── SCROLL PROGRESS ── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gblue),var(--gred),var(--gyellow));
  z-index:1000;width:0%;transition:width .05s linear;box-shadow:0 0 10px var(--gblue-glow)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gblue-dim);border-radius:3px}

/* ── GRID BG PATTERN ── */
.grid-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0.03}
.grid-bg::before{content:'';position:absolute;inset:-50%;
  background-image:linear-gradient(var(--text3) 1px,transparent 1px),linear-gradient(90deg,var(--text3) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(500px) rotateX(60deg);transform-origin:center top}

/* ── FLOATING SHAPES ── */
.float-shape{position:absolute;border:1px solid;pointer-events:none;will-change:transform}
.fs-1{width:200px;height:200px;border-color:rgba(66,133,244,0.08);top:15%;right:10%;transform:rotate(45deg);animation:floatSpin 25s linear infinite}
.fs-2{width:140px;height:140px;border-color:rgba(234,67,53,0.08);border-radius:50%;top:60%;left:8%;animation:floatBob 10s ease-in-out infinite;
  box-shadow:0 0 60px rgba(234,67,53,0.05)}
.fs-3{width:80px;height:80px;border-color:rgba(251,188,5,0.1);top:25%;left:15%;animation:floatSpin 18s linear infinite reverse}
.fs-4{width:300px;height:300px;border-color:rgba(66,133,244,0.04);border-radius:50%;top:40%;right:-80px;animation:floatBob 14s ease-in-out infinite 2s;
  filter:blur(1px)}
.fs-5{width:50px;height:50px;border-color:rgba(251,188,5,0.08);top:70%;left:25%;transform:rotate(30deg);animation:floatSpin 12s linear infinite}
@keyframes floatSpin{to{transform:rotate(405deg)}}
@keyframes floatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

/* ── ANIMATIONS ── */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* ── PARALLAX ── */
[data-parallax]{will-change:transform;transition:transform .1s linear}