/* Nurtura — dental marketing, gradient SaaS aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #070912;
  --bg-elev: #0e1122;
  --bg-elev-2: #161a2e;
  --border: #242942;
  --border-soft: #1a1e33;
  --text: #f4f5fb;
  --text-dim: #a5a9c4;
  --text-mute: #6b7098;

  --accent-a: #7c5cff;   /* violet */
  --accent-b: #22d3ee;   /* cyan */
  --accent-c: #ff5dbf;   /* magenta */
  --accent: var(--accent-a);
  --accent-ink: #ffffff;

  --grad-main: linear-gradient(115deg, #7c5cff 0%, #3b7dff 35%, #22d3ee 75%, #6ef7c0 100%);
  --grad-warm: linear-gradient(120deg, #ff5dbf 0%, #ff6a3d 100%);
  --grad-soft: linear-gradient(135deg, rgba(124,92,255,0.16), rgba(34,211,238,0.10));

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --maxw: 1260px;
}

[data-theme="light"] {
  --bg: #f7f7fb;
  --bg-elev: #ffffff;
  --bg-elev-2: #f0f1f7;
  --border: #e3e5ef;
  --border-soft: #ebedf5;
  --text: #0c0f1f;
  --text-dim: #4a4f6a;
  --text-mute: #7a7f9c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Ambient aurora */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(124, 92, 255, 0.25), transparent 60%),
    radial-gradient(700px 500px at 95% 10%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(255, 93, 191, 0.12), transparent 60%);
  pointer-events: none;
}
[data-theme="light"] body::before {
  opacity: 0.45;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* Utility text */
.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.015em; font-size: 18px;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-main);
  position: relative;
  box-shadow: 0 6px 20px -4px rgba(124, 92, 255, 0.6);
}
.brand-mark::after {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--bg);
  opacity: 0.9;
}
.brand-mark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5), transparent 50%);
  border-radius: 9px;
  z-index: 2;
}
.nav-links { display: flex; gap: 28px; font-size: 14.5px; color: var(--text-dim); }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--grad-main);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(124, 92, 255, 0.7), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(124, 92, 255, 0.9), 0 0 0 1px rgba(255,255,255,0.12) inset; }
.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
.btn-outline {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 40%, transparent);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-outline:hover { background: var(--bg-elev); border-color: var(--text-mute); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 15.5px; border-radius: 14px; }

.arr { width: 14px; height: 14px; }

/* Eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--grad-soft);
  backdrop-filter: blur(8px);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-b);
  box-shadow: 0 0 10px var(--accent-b);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* SECTIONS */
section { padding: 110px 0; position: relative; }
.sec-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.sec-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--accent-b); text-transform: uppercase;
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-b) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-b) 10%, transparent);
}
.sec-title {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 18px;
}
.sec-sub {
  font-size: 18px;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* HERO */
.hero { padding: 70px 0 90px; position: relative; }
.hero-inner {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero-stage {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 32px;
}
.hero-top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 4px 0 36px;
  min-height: 56px;
  flex-wrap: nowrap;
}
.hero-top .bubble {
  position: static;
  animation: float 7s ease-in-out infinite;
  flex: 0 0 auto;
  max-width: 220px;
  opacity: 0.92;
}
.hero-top .bubble.b1 { transform: translateY(-6px); }
.hero-top .bubble.b2 { transform: translateY(4px);  animation-delay: -1.5s; }
.hero-top .bubble.b3 { transform: translateY(-4px); animation-delay: -3s; }
.hero-top .bubble.b4 { transform: translateY(6px);  animation-delay: -4.5s; }
@media (max-width: 1100px) {
  .hero-top { display: none; }
}
.hero h1 {
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 26px 0 22px;
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  padding: 0 2px;
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--text-dim);
  max-width: 660px;
  margin: 0 auto 36px;
  line-height: 1.5;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: 28px; margin-top: 40px; justify-content: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .check { color: var(--accent-b); }

/* Floating testimonial bubbles (around the hero) */
.bubble {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  animation: float 6s ease-in-out infinite;
  z-index: 3;
  white-space: nowrap;
  max-width: 260px;
}
.bubble span { overflow: hidden; text-overflow: ellipsis; }
.bubble .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-main);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.bubble .av.b { background: var(--grad-warm); }
.bubble .av.c { background: linear-gradient(135deg, #22d3ee, #6ef7c0); color: #0c2a2a; }
.bubble em { font-family: var(--font-serif); font-style: italic; }

.bubble.b1 { top: 40px;  left: 0; animation-delay: 0s; }
.bubble.b2 { top: 110px; right: 0; animation-delay: -1.5s; }
.bubble.b3 { bottom: 80px; left: 2%; animation-delay: -3s; }
.bubble.b4 { bottom: 130px; right: 2%; animation-delay: -4.5s; }
@media (max-width: 1080px) { .bubble { display: none; } }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Hero demo panel (below headline) */
.hero-demo {
  margin-top: 72px;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: 0 40px 120px -20px rgba(124, 92, 255, 0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.hero-demo::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--grad-main);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
.chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev-2);
}
.chrome-dots { display: flex; gap: 6px; }
.chrome-dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--border);
}
.chrome-dots i:first-child { background: #ff6a5b; }
.chrome-dots i:nth-child(2) { background: #ffc141; }
.chrome-dots i:nth-child(3) { background: #34d399; }
.chrome-addr {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
  margin-left: 12px;
}

/* LOGO STRIP */
.logos { padding: 60px 0 80px; }
.logos-inner { text-align: center; }
.logos .label {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 28px;
}
.logo-row {
  display: flex; gap: 56px; flex-wrap: wrap; align-items: center; justify-content: center;
  opacity: 0.7;
}
.logo-row span {
  font-weight: 600; letter-spacing: -0.015em; font-size: 20px;
  color: var(--text-dim);
  font-variant: small-caps;
}

/* STEPS */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  position: relative;
}
.step {
  padding: 32px 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
  min-height: 290px;
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease;
}
.step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-a) 50%, var(--border)); }
.step-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.12em;
  margin-bottom: 76px;
}
.step-icon {
  position: absolute; top: 26px; right: 26px;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid color-mix(in srgb, var(--accent-a) 30%, var(--border));
  display: grid; place-items: center;
  color: var(--accent-b);
}
.step h3 {
  font-size: 22px; margin: 0 0 10px;
  font-weight: 600; letter-spacing: -0.02em;
}
.step p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* FEATURES */
.features {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.feat {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  /* Clip the decorative widget mockups (#w-ads, #w-recept, etc.) so they
     can't push the page wider than the viewport on small screens. */
  overflow: hidden;
  padding: 32px;
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, border-color .25s ease;
}
.feat:hover { transform: translateY(-3px); }
.feat-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--accent-b);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-b) 30%, transparent);
}
.feat-wide { grid-column: span 4; min-height: 380px; }
.feat-std { grid-column: span 2; min-height: 380px; }
.feat-half { grid-column: span 3; min-height: 340px; }

.feat h3 {
  font-size: 26px; margin: 0 0 12px;
  font-weight: 600; letter-spacing: -0.025em;
}
.feat p {
  color: var(--text-dim); font-size: 15px; margin: 0 0 22px; line-height: 1.55;
  max-width: 420px;
}

/* Testimonial cards */
.tgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tcard {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 32px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.tcard::before {
  content: '"';
  position: absolute; top: -20px; right: 20px;
  font-family: var(--font-serif); font-size: 160px;
  color: var(--accent-a); opacity: 0.15;
  line-height: 1;
}
.tcard .q {
  font-size: 18px; line-height: 1.5; letter-spacing: -0.015em;
  margin: 0 0 28px; position: relative;
}
.tcard .q em {
  font-family: var(--font-serif); font-style: italic;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tcard .who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.tcard .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-main);
  display: grid; place-items: center;
  font-size: 13px; color: #fff; font-weight: 600;
}
.tcard:nth-child(2) .av { background: var(--grad-warm); }
.tcard:nth-child(3) .av { background: linear-gradient(135deg, #22d3ee, #6ef7c0); color: #0c2a2a; }
.tcard .name { font-size: 14.5px; font-weight: 600; }
.tcard .role { font-size: 12.5px; color: var(--text-mute); font-family: var(--font-mono); }

/* PRICING */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 36px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.pcard.featured {
  border-color: transparent;
  background: var(--bg-elev);
  box-shadow: 0 30px 80px -30px rgba(124, 92, 255, 0.5);
}
.pcard.featured::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1.5px;
  border-radius: var(--radius);
  background: var(--grad-main);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pcard .plan {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 12px;
}
.pcard.featured .plan {
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pcard .price {
  font-size: 60px; letter-spacing: -0.035em; font-weight: 600;
  line-height: 1; margin: 10px 0 4px;
}
.pcard .price sup { font-size: 24px; vertical-align: top; margin-right: 2px; color: var(--text-dim); }
.pcard .per { font-size: 13px; color: var(--text-mute); font-family: var(--font-mono); }
.pcard .desc { color: var(--text-dim); font-size: 14.5px; margin: 16px 0 22px; }
.pcard ul { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 12px; }
.pcard li { font-size: 14.5px; color: var(--text-dim); display: flex; align-items: start; gap: 10px; }
.pcard li svg { flex-shrink: 0; color: var(--accent-b); margin-top: 3px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  padding: 22px 26px; margin-bottom: 12px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--accent-a) 50%, var(--border)); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; letter-spacing: -0.015em; font-weight: 500;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .plus {
  width: 24px; height: 24px; position: relative;
  color: var(--text-dim); flex-shrink: 0;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: ''; position: absolute; inset: 0;
  background: currentColor; border-radius: 1px;
}
.faq-q .plus::before { top: 11px; height: 2px; }
.faq-q .plus::after { left: 11px; width: 2px; transition: transform .2s ease; }
.faq-item[open] .plus::after { transform: scaleY(0); }
.faq-a { color: var(--text-dim); font-size: 15px; line-height: 1.65; padding-top: 14px; }

/* CTA BAND */
.cta-band {
  border-radius: var(--radius-lg);
  padding: 90px 64px;
  text-align: center;
  background:
    radial-gradient(900px 400px at 30% 20%, rgba(124, 92, 255, 0.35), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(34, 211, 238, 0.25), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.cta-band h2 {
  font-size: clamp(38px, 5vw, 64px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 18px;
}
.cta-band h2 em { font-family: var(--font-serif); font-style: italic; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 400; }
.cta-band p { color: var(--text-dim); font-size: 18px; margin: 0 auto 32px; max-width: 560px; }

/* FOOTER */
footer { padding: 90px 0 40px; border-top: 1px solid var(--border-soft); position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 48px; margin-bottom: 72px; }
.foot-grid h5 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 18px; font-weight: 500;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-grid a { color: var(--text-dim); font-size: 14.5px; }
.foot-grid a:hover { color: var(--text); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
}

.bigmark {
  font-size: clamp(120px, 26vw, 340px);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.1;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 960px) {
  .steps, .features, .tgrid, .price-grid, .foot-grid { grid-template-columns: 1fr !important; }
  .feat-wide, .feat-std, .feat-half { grid-column: span 1; min-height: auto; }
  .cta-band { padding: 56px 28px; }
  section { padding: 72px 0; }
  .bubble { display: none; }
  .nav-links { display: none; }
  .hero-demo { margin-top: 48px; }
}

/* Hide the hero dashboard mockup on phones — its inner SVG/grid widgets
   render at fixed pixel widths that don't shrink, causing horizontal
   scroll on viewports below ~480px. The hero CTA above it is still
   visible and is the part that drives conversion. */
@media (max-width: 640px) {
  .hero-demo { display: none; }
  /* Belt-and-braces: any decorative widget content (in .feat cards or
     anywhere else) still overflowing on phones gets clipped at the
     viewport boundary so it can't trigger horizontal scroll. Both html
     and body need this — html is the actual scroll container so setting
     it on body alone leaves html scrollable. */
  html, body { overflow-x: hidden; }
}

/* Respect users with motion-sensitivity (WCAG 2.3.3). Kills the parallax
   reveal animation, hover transitions, and smooth-scroll behavior. Users
   who haven't set the preference still see the full animated experience. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Light-mode fallback. The site's design is intentionally dark — this
   provides a basic readable override for users who explicitly prefer
   light at the OS level. Gradients and accent colors stay; only the
   page surfaces + body text invert. A full light-mode design is a
   separate effort. */
@media (prefers-color-scheme: light) {
  :root[data-theme="dark"] {
    --bg: #fafafd;
    --bg-elev: #f4f4f8;
    --bg-elev-2: #ededf2;
    --text: #1a1b2e;
    --text-dim: #4a4d6e;
    --text-mute: #7a7d96;
    --border: #d8d8e0;
    --border-soft: #e8e8ec;
  }
}

/* Print stylesheet. Removes decorative elements (nav, hero mockup,
   floating bubbles, footer giant-mark) so legal pages and the wizard
   confirmation print as plain readable documents. Inverts colors for
   ink savings. */
@media print {
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .nav,
  .hero-demo,
  .bubble,
  .bigmark,
  .ob-actions { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
  section { padding: 20px 0 !important; }
  *,
  *::before,
  *::after { background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
}