/* base.css — Variables, reset, typography, animations */
:root {
  --bg:#07090f; --surface:#0e1420; --surface2:#141d2e; --surface3:#1a2438;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12); --border3:rgba(255,255,255,0.20);
  --accent:#00e5ff; --accent2:#7c3aed;
  --red:#ff4757; --amber:#ffb020; --green:#00e676; --blue:#3b82f6;
  --text:#e8edf5; --muted:#5a6a85; --muted2:#8899b4;
  --font-display:'Syne',sans-serif; --font-body:'DM Sans',sans-serif;
  --r:14px; --r2:20px; --r3:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-text-size-adjust:100%}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,229,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.025) 1px,transparent 1px);background-size:52px 52px;pointer-events:none;z-index:0}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,5vw,58px);line-height:1.08;letter-spacing:clamp(-1px,-0.03em,-2px);margin-bottom:14px;max-width:680px}
h1 .hl{background:linear-gradient(90deg,var(--accent),#60c8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page{display:none;min-height:100vh;position:relative;z-index:1;flex-direction:column}
.page.active{display:flex}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0.5)}50%{box-shadow:0 0 0 12px rgba(0,229,255,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp 0.45s ease both}
.fu1{animation-delay:.05s}.fu2{animation-delay:.10s}.fu3{animation-delay:.15s}
.fu4{animation-delay:.20s}.fu5{animation-delay:.25s}.fu6{animation-delay:.30s}