:root {
  --ds-bg: #080b12;
  --ds-bg-soft: #101725;
  --ds-surface: rgba(17, 24, 39, 0.78);
  --ds-surface-strong: rgba(19, 28, 46, 0.92);
  --ds-text: #edf2ff;
  --ds-muted: #9aa8c7;
  --ds-border: rgba(255, 255, 255, 0.12);
  --ds-accent: #63a8ff;
  --ds-accent-2: #6af0d2;
  --ds-radius: 18px;
  --ds-shadow: 0 22px 48px rgba(4, 10, 20, 0.42);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(99, 168, 255, 0.22), transparent 38%),
    radial-gradient(circle at 92% 80%, rgba(106, 240, 210, 0.16), transparent 36%),
    linear-gradient(160deg, var(--ds-bg) 0%, #0c1220 40%, #090f19 100%);
  color: var(--ds-text);
  font-family: "DM Sans", "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
}

a {
  color: var(--ds-accent);
}

header,
.topbar {
  backdrop-filter: blur(14px);
  background: rgba(10, 15, 28, 0.72) !important;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}

section,
.card,
.panel,
.scroll-card,
.feature-card,
.vibe,
.stat {
  backdrop-filter: blur(14px);
  background: linear-gradient(165deg, var(--ds-surface) 0%, var(--ds-surface-strong) 100%) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow);
}

button,
.btn,
.btn-header,
.btn-outline,
.btn-line,
.cta-button {
  border-radius: 999px !important;
  border: 1px solid rgba(111, 189, 255, 0.45) !important;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)) !important;
  color: #06101b !important;
  font-weight: 700 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  box-shadow: 0 10px 26px rgba(98, 172, 255, 0.26);
}

button:hover,
.btn:hover,
.btn-header:hover,
.btn-outline:hover,
.btn-line:hover,
.cta-button:hover {
  transform: translateY(-1px);
  opacity: 0.96;
}

input,
textarea,
select {
  background: rgba(7, 13, 23, 0.88) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text) !important;
  border-radius: 12px !important;
}

p,
label,
.sub,
.notice,
.hint,
.meta {
  color: var(--ds-muted) !important;
}

h1,
h2,
h3,
.title {
  color: #f5f8ff !important;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  header,
  .topbar {
    border-radius: 14px;
  }
}