:root {
  --ebl: #5B86FF;
  --evi: #A476FF;
  --accent-from: #5B86FF;
  --accent-to: #A476FF;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: #05060A;
  color: #EAECF3;
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(91,134,255,0.32); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #05060A; }
::-webkit-scrollbar-thumb { background: #1a1e2a; border-radius: 10px; border: 2px solid #05060A; }
::-webkit-scrollbar-thumb:hover { background: #262c3c; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.grad-text {
  background: linear-gradient(110deg, var(--accent-from) 0%, var(--accent-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
}
.grid-fine {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.dot-bg {
  background-image: radial-gradient(rgba(120,140,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
}
.aurora { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; will-change: transform; }
@keyframes drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,24px) scale(1.12); } }
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hairline { border: 1px solid rgba(255,255,255,0.08); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}
.glow-ring { box-shadow: 0 0 0 1px rgba(91,134,255,0.18), 0 18px 60px -22px rgba(91,134,255,0.45); }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-core { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dash { to { stroke-dashoffset: -1000; } }
.btn-primary {
  position: relative; white-space: nowrap; overflow: hidden;
  background: linear-gradient(110deg, var(--accent-from), var(--accent-to));
  color: #060810; font-weight: 600;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  box-shadow: 0 10px 34px -12px rgba(91,134,255,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); transition: left .7s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -12px rgba(124,108,255,0.9), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-primary:hover::after { left: 130%; }
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: rgba(91,134,255,0.5); opacity: 0; transition: opacity .4s;
}
.ticked::before { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.ticked::after { bottom: 12px; right: 12px; border-bottom: 1px solid; border-right: 1px solid; }
.ticked:hover::before, .ticked:hover::after { opacity: 1; }
.accent-top::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-from), var(--accent-to), transparent);
  opacity: 0; transition: opacity .45s; transform: translateY(-0.5px);
}
.accent-top:hover::before { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-mask { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
@keyframes scan-rot { to { transform: rotate(360deg); } }
@keyframes live-dot { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(91,134,255,0.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(91,134,255,0); } }
.live-dot { animation: live-dot 2.4s ease-in-out infinite; }
.btn-ghost {
  white-space: nowrap; border: 1px solid rgba(255,255,255,0.14); color: #EAECF3;
  transition: border-color .25s, background .25s, transform .25s;
}
.btn-ghost:hover { border-color: rgba(91,134,255,0.6); background: rgba(91,134,255,0.07); transform: translateY(-2px); }
.link-arrow svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.link-arrow:hover svg { transform: translateX(5px); }
.card-hover { transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, background .4s; }
.card-hover:hover { transform: translateY(-5px); border-color: rgba(91,134,255,0.35); }
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}