:root{
  --ink:#06030d;
  --grid:rgba(120,90,255,.08);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(45,212,191,.12), transparent 60%),
    #06030d;
  color:#e6ebf2;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
.grid-bg{
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-strong{
  background: linear-gradient(180deg, rgba(20,12,40,.7), rgba(10,6,22,.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08);
}
.neon-border{position:relative;}
.neon-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(34,211,238,.6), rgba(124,58,237,.4) 50%, rgba(45,212,191,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.text-gradient{
  background:linear-gradient(120deg,#fff 10%,#a78bfa 45%,#22d3ee 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-neon{
  background:linear-gradient(135deg,#2dd4bf,#22d3ee);
  color:#04121a; font-weight:600;
  box-shadow:0 10px 30px -10px rgba(45,212,191,.6), inset 0 0 0 1px rgba(255,255,255,.2);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
.btn-neon:hover{transform:translateY(-2px); box-shadow:0 20px 50px -10px rgba(45,212,191,.8); filter:brightness(1.05)}
.btn-ghost{
  background:rgba(255,255,255,.04); color:#e6ebf2; border:1px solid rgba(255,255,255,.12);
  transition:all .25s;
}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(34,211,238,.5); color:#22d3ee}
.float{animation:float 6s ease-in-out infinite}
.float-slow{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pulse-dot{position:relative}
.pulse-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:9999px;
  box-shadow:0 0 0 0 rgba(45,212,191,.6); animation:pulse 1.8s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
.ticker{display:flex; gap:3rem; animation:scroll 40s linear infinite; white-space:nowrap}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-mask{-webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.glow-cursor{
  position:fixed; pointer-events:none; width:600px; height:600px; border-radius:9999px;
  background:radial-gradient(circle, rgba(34,211,238,.12), transparent 60%);
  transform:translate(-50%,-50%); z-index:1; mix-blend-mode:screen; transition:opacity .3s;
}
.candle-up{background:#2dd4bf}
.candle-dn{background:#f43f5e}
details[open] .acc-icon{transform:rotate(45deg)}
.acc-icon{transition:transform .25s}
@media(max-width:768px){
  .grid-bg{background-size:36px 36px}
}