/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --purple:       #6C47FF;
  --purple-soft:  #8B6FFF;
  --purple-tint:  #F0ECFF;
  --purple-deep:  #3D1FCC;
  --purple-glow:  rgba(108,71,255,0.18);
  --ink:          #0D0F1A;
  --ink2:         #1A1D2E;
  --ink3:         #2E3450;
  --slate:        #4A5168;
  --muted:        #9AA3B8;
  --border:       #E2E6F0;
  --bg:           #F7F8FC;
  --white:        #FFFFFF;
  --green:        #00C896;
  --amber:        #FFB020;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 24px;
  --nav-h: 68px;
  --max-w: 1100px;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; }

/* ══════════════════════════════════════
   CURSOR
══════════════════════════════════════ */
*, a, button { cursor: none; }
.cursor {
  width: 10px; height: 10px;
  background: var(--purple);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transition: transform 0.15s ease, width 0.2s, height 0.2s, background 0.2s;
  transform: translate(-50%,-50%);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(108,71,255,0.4);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transition: transform 0.35s cubic-bezier(.25,.46,.45,.94), width 0.3s, height 0.3s;
  transform: translate(-50%,-50%);
}
.cursor.hovered      { width: 16px; height: 16px; background: var(--purple-soft); }
.cursor-ring.hovered { width: 52px; height: 52px; border-color: rgba(108,71,255,0.22); }

@media (hover: none) and (pointer: coarse) {
  *, a, button { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes ticker    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }
@keyframes scrollLine {
  0%   { transform:scaleY(0); transform-origin:top }
  50%  { transform:scaleY(1); transform-origin:top }
  51%  { transform:scaleY(1); transform-origin:bottom }
  100% { transform:scaleY(0); transform-origin:bottom }
}
@keyframes orb { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-24px) scale(1.04)} }

/* Stagger delay helpers */
.d1{animation-delay:.1s}
.d2{animation-delay:.22s}
.d3{animation-delay:.34s}
.d4{animation-delay:.46s}
.d5{animation-delay:.58s}

/* Hero entrance */
.anim-up { opacity:0; animation:fadeUp 0.7s ease forwards; }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }