/* ================= TOKENS ================= */
:root{
  --void:#050510;
  --panel:#0b1020;
  --panel-2:#080b18;
  --panel-3:#0e1428;
  --blue:#4c7cff;
  --blue-2:#3d6bff;
  --violet:#8b5cf6;
  --purple:#b24bff;
  --text:#edeffb;
  --text-dim:#9099ba;
  --text-faint:#5c6488;
  --line:rgba(140,150,255,0.14);
  --line-strong:rgba(150,160,255,0.28);
  --grad: linear-gradient(120deg, var(--blue-2), var(--violet) 55%, var(--purple));
  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.28,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
::selection{background:var(--violet); color:#fff;}

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--font-display);
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px), (hover:none){
  body{cursor:auto;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--blue),var(--purple)); border-radius:4px;}

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

.mono{font-family:var(--font-mono);}

/* ================= BACKDROP ================= */
.backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(76,124,255,0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 25%, rgba(178,75,255,0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(139,92,246,0.13), transparent 60%),
    var(--void);
}
.grid-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(140,150,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,150,255,0.055) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 100%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift{ from{background-position:0 0;} to{background-position:46px 92px;} }

.noise-layer{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.code-fragments{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.code-fragments span{
  position:absolute; font-family:var(--font-mono); font-size:12px; color:rgba(140,150,255,0.16);
  white-space:nowrap; animation: floatUp linear infinite;
}
@keyframes floatUp{
  from{ transform:translateY(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  to{ transform:translateY(-1200px); opacity:0; }
}

/* ================= CUSTOM CURSOR ================= */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:7px; height:7px; background:var(--blue); box-shadow:0 0 10px 2px rgba(76,124,255,.9); }
.cursor-ring{
  width:36px; height:36px; border:1px solid rgba(140,150,255,.55);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s ease, background .25s ease;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; color:var(--text);
}
.cursor-ring.big{ width:76px; height:76px; background:rgba(76,124,255,.12); border-color:var(--violet); }
@media (max-width:900px), (hover:none){ .cursor-dot,.cursor-ring{display:none;} }