:root {
  --coral: #eb4a4c;
  --ink: #05060a;
  --neon: #22d3ee;
  --violet: #7c5cff;
}
* { -webkit-font-smoothing: antialiased; }
html, body { background: var(--ink); color: #e8eaf0; font-family: 'Sora', sans-serif; }
.grad-text {
  background: linear-gradient(110deg, #ff5e60, #ff9a6e 40%, #8b6cff 75%, #3ee0f2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 48%, rgba(124,92,255,.035));
  border: 1px solid rgba(255,255,255,.09);
  border-top-color: rgba(255,255,255,.13);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 36px -14px rgba(0,0,0,.55);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(168deg, rgba(255,255,255,.1), transparent 54%); opacity: .9;
}
.demo-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: rgba(255,255,255,.6); transition: color .2s;
}
.demo-back:hover { color: #fff; }
.demo-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px; font-size: .7rem; font-family: 'JetBrains Mono', monospace;
  background: rgba(235,74,76,.12); border: 1px solid rgba(235,74,76,.25); color: #ff8a8c;
}
.glow { box-shadow: 0 0 0 1px rgba(235,74,76,.3), 0 16px 50px -14px rgba(235,74,76,.6); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.aurora { position: fixed; z-index: 0; filter: blur(90px); opacity: .4; pointer-events: none; border-radius: 50%; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #05060a; }
::-webkit-scrollbar-thumb { background: linear-gradient(#eb4a4c, #7c5cff); border-radius: 8px; }
::selection { background: rgba(235,74,76,.35); color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }