:root {
  --sw-bg-top: #030817;
  --sw-bg-mid: #081633;
  --sw-bg-bottom: #0b1f4a;
  --sw-hero-top: #0b0f19;
  --sw-hero-mid: #123375;
  --sw-hero-bottom: #081026;
  --sw-glow-cyan: rgba(34, 211, 238, 0.35);
  --sw-glow-indigo: rgba(79, 70, 229, 0.35);

  --sw-page-bg: radial-gradient(circle at top, var(--sw-bg-top) 0%, var(--sw-bg-mid) 55%, var(--sw-bg-bottom) 100%);
  --sw-hero-bg: linear-gradient(180deg, var(--sw-hero-top) 0%, var(--sw-hero-mid) 60%, var(--sw-hero-bottom) 100%);

  --sw-surface: rgba(10, 18, 41, 0.72);
  --sw-surface-strong: rgba(6, 12, 30, 0.86);
  --sw-surface-soft: rgba(255, 255, 255, 0.06);
  --sw-surface-faint: rgba(255, 255, 255, 0.04);
  --sw-border: rgba(255, 255, 255, 0.12);
  --sw-border-strong: rgba(255, 255, 255, 0.18);

  --sw-text: #f8fafc;
  --sw-muted: rgba(226, 232, 240, 0.78);
  --sw-muted-strong: rgba(226, 232, 240, 0.9);
  --sw-subtle: rgba(226, 232, 240, 0.62);

  --sw-accent: #22d3ee;
  --sw-secondary: #1d4ed8;

  --sw-radius-lg: 28px;
  --sw-radius-md: 20px;
  --sw-radius-sm: 16px;
  --sw-radius-pill: 999px;

  --sw-shadow-lg: 0 30px 70px rgba(2, 6, 23, 0.55);
  --sw-shadow-md: 0 24px 55px rgba(2, 6, 23, 0.45);
  --sw-shadow-sm: 0 18px 40px rgba(2, 6, 23, 0.35);

  --sw-blur: 12px;

  --sw-container: 1200px;
  --sw-container-narrow: 980px;
  --sw-container-text: 760px;
  --sw-container-pad: clamp(16px, 6vw, 40px);

  --sw-space-1: 8px;
  --sw-space-2: 12px;
  --sw-space-3: 16px;
  --sw-space-4: 24px;
  --sw-space-5: 32px;
  --sw-space-6: 48px;
  --sw-space-7: 64px;
  --sw-space-8: 96px;
  --sw-space-9: 120px;

  --sw-h1: clamp(38px, 5vw, 56px);
  --sw-h2: clamp(30px, 4vw, 42px);
  --sw-h3: clamp(22px, 3vw, 30px);
  --sw-lead: 18px;
  --sw-body: 16px;
  --sw-small: 13px;

  --sw-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  background: var(--sw-page-bg);
  color: var(--sw-text);
}

.sw-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sw-container {
  width: min(var(--sw-container), calc(100% - (var(--sw-container-pad) * 2)));
  margin: 0 auto;
}

.sw-container-narrow {
  width: min(var(--sw-container-narrow), calc(100% - (var(--sw-container-pad) * 2)));
  margin: 0 auto;
}

.sw-container-text {
  width: min(var(--sw-container-text), calc(100% - (var(--sw-container-pad) * 2)));
  margin: 0 auto;
}

.sw-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow-md);
  backdrop-filter: blur(var(--sw-blur));
}