:root {
  --font-display: 'Cabinet Grotesk', sans-serif;
  --font-body: 'Satoshi', sans-serif;

  --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-hero: clamp(3.5rem, 1rem + 8vw, 7rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-xl:1rem; --radius-full:9999px;
  --transition:220ms cubic-bezier(.16,1,.3,1);

  --bg:#08050f;
  --bg-2:#12091d;
  --text:#f3eeff;
  --text-muted:#a899c7;
  --text-faint:#6d618c;
  --purple:#b450ff;
  --pink:#ff6adf;
  --cyan:#74d8ff;
  --border:rgba(180,80,255,.15);
  --border-strong:rgba(180,80,255,.34);
  --shadow-card:0 12px 40px rgba(0,0,0,.28);
  --shadow-purple:0 10px 34px rgba(180,80,255,.16);
}

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

html {
  background-color: var(--bg);
  overscroll-behavior: none;
  cursor: none !important;
}
a, button { cursor: none !important; }

body{
  min-height:100vh;
  overflow:hidden;
  font-family:var(--font-body);
  color:var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 18%, rgba(180,80,255,.09), transparent 26%),
    radial-gradient(circle at 20% 80%, rgba(255,106,223,.07), transparent 22%),
    radial-gradient(circle at 80% 22%, rgba(116,216,255,.06), transparent 20%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  overscroll-behavior: none;
}

a, a:hover, a:focus, a:active {
  text-decoration: none !important;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:100px 100px;
  opacity:.42;
  mask-image:radial-gradient(circle at center, black 38%, transparent 88%);
}

.noise{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle at 25% 25%, white .7px, transparent .8px),
    radial-gradient(circle at 75% 75%, white .6px, transparent .7px),
    radial-gradient(circle at 50% 40%, white .5px, transparent .6px);
  background-size:170px 170px, 230px 230px, 130px 130px;
}

#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  will-change: transform;
  transform: translateZ(0);
}

.cursor{
  position:fixed;
  width:16px;height:16px;
  border:2px solid #ff00c1;
  border-radius:50%;
  background:transparent;
  mix-blend-mode:screen;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
  transition:transform .1s ease-out, border-color .2s ease-out, background-color .2s ease-out;
  animation:cursorPulse 1.5s ease-out infinite;
}
.cursor-trail{
  position:fixed;
  width:56px;height:56px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,0,255,.36) 0%, rgba(180,80,255,.12) 36%, rgba(255,0,255,0) 74%);
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9998;
  filter:blur(10px);
  transition:width .3s ease-out, height .3s ease-out, opacity .2s ease-out;
  opacity:.95;
}
@keyframes cursorPulse{
  0%{transform:translate(-50%, -50%) scale(1);opacity:1}
  50%{transform:translate(-50%, -50%) scale(1.4);opacity:.65}
  100%{transform:translate(-50%, -50%) scale(1);opacity:1}
}

@media (max-width:640px){
  html, a, button { cursor: auto !important; }
  .cursor, .cursor-trail { display: none !important; }
}