/* Cuper landing — calm premium presentation (clarity over decoration) */

:root {
  --bg: #0b0c0f;
  --bg-elev: #111318;
  --surface: #111318;
  --surface-2: #171a20;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --text-sec: #c8cdd6;
  --muted: #a1a7b3;
  --silver: rgba(255, 255, 255, 0.04);
  --cuper-blue: #0a84ff;
  --cu-blue: var(--cuper-blue);
  --cu-blue-soft: #409cff;
  --cu-glow: transparent;
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 2px rgba(10, 132, 255, 0.35);
  --radius: 16px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-elev: #f7f8fa;
    --surface: #f7f8fa;
    --surface-2: #eef1f5;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
    --text: #111318;
    --text-sec: #3d4654;
    --muted: #667085;
    --silver: rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.08);
  }
}

html {
  background: var(--bg);
}

.bg-fixed {
  background: var(--bg) !important;
}

nav,
.site-nav {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

.site-nav-panel {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.logo span {
  color: var(--cuper-blue);
}

.btn-primary {
  background: var(--cuper-blue) !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: #0077ed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-ghost {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  color: var(--text-sec) !important;
}

.btn-ghost:hover {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  transform: none !important;
}

section {
  padding: clamp(72px, 12vw, 120px) 0 !important;
}

.sec-label {
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 16px !important;
}

.sec-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  max-width: 24ch !important;
  margin-bottom: 20px !important;
}

.sec-sub {
  font-size: 1.05rem !important;
  margin-bottom: 48px !important;
  color: var(--muted) !important;
}

.pcard,
.aud-card,
.step,
.brain,
.conv-card,
.xp-panel,
.proof-approval,
.ft-card {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}

.pcard:hover,
.brain:hover {
  transform: none !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

.pcard-icon {
  background: var(--silver) !important;
  border-color: var(--border) !important;
  color: var(--text-sec) !important;
}

.step::before {
  background: var(--silver) !important;
  border-color: var(--border) !important;
  color: var(--text-sec) !important;
}

.xp-stage {
  min-height: auto !important;
  padding: clamp(48px, 8vw, 80px) 0 clamp(64px, 10vw, 96px) !important;
  gap: 32px !important;
}

.xp-discover-chips {
  display: none !important;
}

.xp-progress-track {
  height: 2px;
  background: var(--silver);
}

.xp-progress-fill {
  background: var(--cuper-blue) !important;
}

.xp-hero-copy h1 {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

.xp-hero-copy p {
  font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  color: var(--muted) !important;
  margin-top: 12px;
}

.xp-proj-item.is-active {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.xp-pill.is-provider.is-live {
  color: var(--cuper-blue) !important;
}

.xp-pipe-step.is-active .xp-pipe-dot {
  background: var(--cuper-blue) !important;
}

.xp-wall-node.is-hub {
  box-shadow: none !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.xp-ticker {
  display: none !important;
}

.sticky-cta {
  background: var(--bg) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--border) !important;
}

.fin {
  background: var(--bg-elev) !important;
}