/* Demolion Studio — base reset + typography */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg-0);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(139,92,246,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(236,72,153,0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(34,211,238,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; font-weight: 600; }
h4 { font-size: 0.92rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0; color: var(--text-muted); }

button { font-family: inherit; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

::selection { background: rgba(139,92,246,0.4); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* Utilities */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.hidden { display: none !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); } 50% { box-shadow: 0 0 0 12px rgba(139,92,246,0); } }

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner.lg { width: 28px; height: 28px; border-width: 3px; }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r);
}