:root {
  --bg-900: #060509;
  --bg-850: #0b0912;
  --bg-800: #12101d;
  --bg-700: #19162a;
  --surface: rgba(19, 17, 31, 0.8);
  --surface-strong: rgba(24, 21, 38, 0.92);
  --border: rgba(201, 192, 214, 0.22);
  --text-strong: #f2f0f7;
  --text-muted: #c0bbcc;
  --silver: #cfd2dc;
  --purple: #b257ff;
  --purple-bright: #d18dff;
  --purple-deep: #6f2ca3;
  --success: #85f1c6;
  --danger: #ff8ea5;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 35px rgba(178, 87, 255, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--text-strong);
  background:
    radial-gradient(circle at 10% -10%, rgba(178, 87, 255, 0.28), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(178, 87, 255, 0.18), transparent 35%),
    linear-gradient(160deg, var(--bg-900), var(--bg-850) 55%, #05040a);
}

h1,
h2,
h3,
strong {
  font-family: "Sora", "Space Grotesk", sans-serif;
  letter-spacing: 0.01em;
}

p {
  color: var(--text-muted);
  line-height: 1.6;
}

a {
  color: inherit;
}

.eyebrow {
  margin: 0;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 700;
}

.primary-btn,
.ghost-btn,
.secondary-btn,
button {
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  padding: 0.72rem 1.2rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.primary-btn {
  color: #14091f;
  background: linear-gradient(120deg, var(--purple-bright), var(--purple));
  box-shadow: 0 10px 26px rgba(178, 87, 255, 0.35);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(178, 87, 255, 0.45);
}

.ghost-btn,
.secondary-btn {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.ghost-btn:hover,
.secondary-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.09);
}

.is-hidden {
  display: none !important;
}

.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.35px, transparent 0.35px);
  background-size: 3px 3px;
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 10% -10%, rgba(178, 87, 255, 0.22), transparent 40%),
      linear-gradient(160deg, var(--bg-900), var(--bg-850) 55%, #05040a);
  }
}