:root {
  --cs-bg: #0a0a0a;
  --cs-fg: #ffffff;
  --cs-muted: rgba(255, 255, 255, 0.65);
  --cs-border: rgba(255, 255, 255, 0.12);
  --cs-accent: #dc2626;
  --cs-accent-hover: #ef4444;
  --cs-accent-glow: rgba(220, 38, 38, 0.18);
  --cs-card: rgba(255, 255, 255, 0.03);
}


[data-theme="light"] {
  --cs-bg: #f7f7f8;
  --cs-fg: #0a0a0a;
  --cs-muted: rgba(10, 10, 10, 0.65);
  --cs-border: rgba(10, 10, 10, 0.12);
  --cs-accent: #dc2626;
  --cs-accent-hover: #ef4444;
  --cs-accent-glow: rgba(220, 38, 38, 0.18);
  --cs-card: rgba(10, 10, 10, 0.02);
}
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cs-bg);
  color: var(--cs-fg);
  -webkit-font-smoothing: antialiased;
}
main.coming-soon {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 85% 75% at 100% 0%,
      rgba(220, 38, 38, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle 420px at 4% 110%,
      rgba(220, 38, 38, 0.08) 0%,
      transparent 70%
    ),
    linear-gradient(135deg, #121212 0%, var(--cs-bg) 65%);
}
[data-theme="light"] main.coming-soon {
  background:
    radial-gradient(
      ellipse 85% 75% at 100% 0%,
      rgba(220, 38, 38, 0.10) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle 420px at 4% 110%,
      rgba(220, 38, 38, 0.05) 0%,
      transparent 70%
    ),
    linear-gradient(135deg, #ffffff 0%, var(--cs-bg) 65%);
}
main.coming-soon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--cs-accent) 0%,
    var(--cs-accent) 30%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
.cs-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-muted);
  background: var(--cs-card);
}
.cs-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-accent);
  box-shadow: 0 0 0 4px var(--cs-accent-glow);
}
.cs-inner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 24px 0 20px;
  letter-spacing: -0.02em;
}
.cs-inner p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--cs-muted);
  margin: 0 auto 40px;
  max-width: 560px;
}
.cs-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}
.cs-btn-primary {
  background: var(--cs-accent);
  color: #ffffff;
}
.cs-btn-primary:hover {
  transform: translateY(-1px);
  background: var(--cs-accent-hover);
}
.cs-btn-secondary {
  background: transparent;
  color: var(--cs-fg);
  border-color: var(--cs-border);
}
.cs-btn-secondary:hover {
  border-color: var(--cs-fg);
}