/* Variant: Vivid — saturated gradient hero and contact cards, white type, glassy product panel.
   Overrides assets/site.css. Light only. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --muted: #f5f4fb;
  --ink: #120f24;
  --ink-2: #565170;
  --line: #e8e6f2;
  --accent: #6d3df5;
  --accent-ink: #ffffff;
  --accent-soft: #eee8ff;
  --green-soft: #e0f5ec;
  --amber-soft: #ffe6ef;
  --night: #120f24;
  --night-2: #1e1940;
  --night-line: rgba(255, 255, 255, 0.14);
  --night-ink: #ffffff;
  --night-ink-2: rgba(255, 255, 255, 0.78);

  --grad: linear-gradient(125deg, #2f5bff 0%, #7a3cf0 48%, #ff4f8b 100%);
  --card-gap: clamp(8px, 1.4vw, 16px);
  --card-radius: clamp(24px, 3vw, 40px);

  --ui-bg: #ffffff;
  --ui-line: #efedf6;
  --ui-fill: #e5e2f0;
  --ui-fill-2: #f4f2fa;
  --ui-strong: #120f24;
  --ui-accent: #6d3df5;
  --ui-img: #f1ecff;
  --ui-tint-a: #e7deff;
  --ui-tint-b: #d9f3e7;
  --ui-tint-c: #ffdfeb;
  --stage-bg: rgba(18, 15, 36, 0.22);
  --stage-dots: rgba(255, 255, 255, 0.12);
  --stage-ink: #ffffff;

  color-scheme: light;
}

.hero,
.section--contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: var(--card-gap);
  border-radius: var(--card-radius);
  background: var(--grad);
  color: #ffffff;
}
.hero { margin-top: var(--card-gap); padding-bottom: clamp(24px, 4vw, 56px); }
.section--contact { margin-bottom: var(--card-gap); }

.hero::before,
.section--contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}

.hero__lead { color: rgba(255, 255, 255, 0.85); }
.hero .pill--accent { background: #ffffff; color: #3b1fb0; }
.hero .pill--accent:hover { background: #f0ebff; }
.hero .pill--ghost { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }
.hero .pill--ghost:hover { border-color: #ffffff; }
.hero :focus-visible,
.section--contact :focus-visible { outline-color: #ffffff; }

.stage {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.ui { box-shadow: 0 24px 50px -24px rgba(18, 15, 36, 0.5); }

.tile--dark { background: linear-gradient(160deg, #241d55, #120f24 70%); }
.tile--dark .focus strong { color: #cbbcff; }

.steps li::before { background: var(--grad); }
.faq details { border: 1px solid var(--line); }
.faq details[open] summary::after { background: var(--grad); }

.phscale__ticks { color: var(--ink-2); }

.contact__lead { color: rgba(255, 255, 255, 0.85); }
.contact__card {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.contact__label { color: rgba(255, 255, 255, 0.75); }