/* ─────────────────────────────────────────────────────────────────
   Phase-3 — Pure-white light theme + Crisp-style multi-color palette.
   Layered AFTER styles.css and styles-phase2.css. Targets only the
   light theme via :root (default) so dark mode (theme="colorful" v3)
   is untouched.
   ───────────────────────────────────────────────────────────────── */

/* ---------- Pure white + colorful palette ---------- */
html:not([data-theme="dark"]):not([data-theme="colorful"]) {
  /* Pure white base */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #F7F8FB;
  --border: rgba(15,17,21,0.08);
  --border-strong: rgba(15,17,21,0.14);

  /* Ink */
  --ink: #0F1115;
  --ink2: #4B5563;
  --ink3: #9CA3AF;

  /* Crisp-style accent quartet */
  --accent: #6B5BFF;          /* Primary indigo */
  --accent-on-surface: #5346D9;
  --accent-on-dark: #FFFFFF;
  --accent2: #FF6B9A;         /* Pink — voice / emphasis */
  --accent3: #FFA63F;         /* Orange — vibe coders / CTA */
  --accent4: #00C896;         /* Mint — security / good state */
  --accent5: #2BB7F2;         /* Sky — developers / api */
  --good: #00C896;
  --warn: #FFA63F;
  --chip-bg: rgba(107,91,255,0.08);
  --chip-ink: #5346D9;

  /* Soft pastel section accents */
  --tint-indigo: rgba(107,91,255,0.06);
  --tint-pink:   rgba(255,107,154,0.07);
  --tint-orange: rgba(255,166,63,0.08);
  --tint-mint:   rgba(0,200,150,0.07);
  --tint-sky:    rgba(43,183,242,0.07);

  /* Hero gradient blobs */
  --hero-grad:
    radial-gradient(900px 480px at 85% -8%, rgba(107,91,255,0.16), transparent 65%),
    radial-gradient(700px 400px at -10% 20%, rgba(255,107,154,0.12), transparent 60%),
    radial-gradient(800px 480px at 50% 100%, rgba(0,200,150,0.08), transparent 70%);

  --btn-primary-bg: #0F1115;
  --btn-primary-ink: #FFFFFF;
  --nav-bg: rgba(255,255,255,0.78);
  --shadow-card: 0 1px 2px rgba(15,17,21,0.04), 0 8px 24px rgba(15,17,21,0.06);
  --shadow-card-lg: 0 1px 3px rgba(15,17,21,0.06), 0 24px 60px rgba(15,17,21,0.10);
}

/* Make body genuinely white (the existing styles.css uses --bg) */
body { background: var(--bg); }

/* ---------- Section-tinted backgrounds (rotate accents per section) ---------- */
/* Each .section--alt currently uses --surface2; we rotate per nth-of-type via
   id-based selectors so the page reads as colorful without each section
   needing a manual class name. */
#voice-showcase, .section:has(.voice__grid) { background: var(--tint-pink) !important; }
#customize { background: var(--tint-indigo) !important; }
#developers { background: var(--tint-sky) !important; }
#vibe-coders { background: var(--tint-orange) !important; }
#pricing { background: var(--tint-mint) !important; }
#integrations { background: var(--bg) !important; }
#use-cases { background: var(--tint-indigo) !important; }
/* Restore the section--alt look only where we DIDN'T tint */
.section--alt:not(#voice-showcase):not(#customize):not(#developers):not(#vibe-coders):not(#pricing):not(#use-cases):not([id]) {
  background: var(--surface2);
}

/* ---------- Typography polish ---------- */
.section-head__kicker {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 11px;
}
#voice-showcase .section-head__kicker { color: var(--accent2); }
#customize .section-head__kicker { color: var(--accent); }
#chat-showcase .section-head__kicker, .chat-show__grid .section-head__kicker { color: var(--accent4); }
#developers .section-head__kicker { color: var(--accent5); }
#vibe-coders .section-head__kicker { color: var(--accent3); }
#pricing .section-head__kicker { color: var(--accent4); }

/* ---------- Buttons — colorful primary + gradient option ---------- */
.btn--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Plan cards: bigger highlight + colorful "Most popular" ---------- */
.plans--6 .plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.plans--6 .plan:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
  border-color: var(--border-strong);
}
.plans--6 .plan--hi {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(107,91,255,0.10), 0 24px 60px rgba(107,91,255,0.18);
  background: var(--surface);
}
/* Legacy styles.css forces white text on the highlighted card (assumes a dark
   accent background). With our new white-bg highlight that goes invisible —
   restore dark-on-light for ALL plan-card text in the highlighted state.
   !important is required because the legacy rules use higher specificity
   that's hard to beat with normal selectors without manual <style> override. */
.plans--6 .plan--hi .plan__n,
.plans--6 .plan--hi .plan__price,
.plans--6 .plan--hi .plan__price-wrap,
.plans--6 .plan--hi .plan__f,
.plans--6 .plan--hi .plan__f li { color: var(--ink) !important; opacity: 1 !important; }
.plans--6 .plan--hi .plan__per,
.plans--6 .plan--hi .plan__d,
.plans--6 .plan--hi .plan__meta-k { color: var(--ink2) !important; opacity: 1 !important; }
.plans--6 .plan--hi .plan__meta-v { color: var(--ink) !important; opacity: 1 !important; }

.plan__pop {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}
.plans--6 .plan--hi .plan__cta {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

/* ---------- Pricing toggle — bigger, colorful ---------- */
.price-toggle {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.price-toggle__btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

/* ---------- Customizer panel — softer, taller preview ---------- */
.customizer__preview {
  height: 380px;
  background: linear-gradient(180deg, #fff, var(--surface2));
}
.customizer__feat li::before { background: var(--accent); }

/* ---------- Voice section bullets pink ---------- */
.voice__features li svg path { stroke: var(--accent2); }

/* ---------- Use-cases cards — colorful per slot ---------- */
.case {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); }
.cases > .case:nth-child(6n+1) .case__k { color: var(--accent); }
.cases > .case:nth-child(6n+2) .case__k { color: var(--accent2); }
.cases > .case:nth-child(6n+3) .case__k { color: var(--accent4); }
.cases > .case:nth-child(6n+4) .case__k { color: var(--accent3); }
.cases > .case:nth-child(6n+5) .case__k { color: var(--accent5); }
.cases > .case:nth-child(6n+6) .case__k { color: var(--accent); }

/* ---------- Integration tiles — colorful initials ---------- */
.integration {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.integration:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.integrations > .integration:nth-child(8n+1) .integration__mark { background: var(--accent); color:#fff }
.integrations > .integration:nth-child(8n+2) .integration__mark { background: var(--accent2); color:#fff }
.integrations > .integration:nth-child(8n+3) .integration__mark { background: var(--accent4); color:#fff }
.integrations > .integration:nth-child(8n+4) .integration__mark { background: var(--accent3); color:#fff }
.integrations > .integration:nth-child(8n+5) .integration__mark { background: var(--accent5); color:#fff }
.integrations > .integration:nth-child(8n+6) .integration__mark { background: var(--accent); color:#fff }
.integrations > .integration:nth-child(8n+7) .integration__mark { background: var(--accent2); color:#fff }
.integrations > .integration:nth-child(8n+8) .integration__mark { background: var(--accent4); color:#fff }

/* ---------- Stats — colorful giant numerals ---------- */
.stats__v {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* ---------- How-it-works — colored numerals ---------- */
.how__card { border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; }
.how__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-lg); }
.how__grid > .how__card:nth-child(1) .how__n { background: var(--accent); color: #fff; }
.how__grid > .how__card:nth-child(2) .how__n { background: var(--accent2); color: #fff; }
.how__grid > .how__card:nth-child(3) .how__n { background: var(--accent4); color: #fff; }
.how__n { padding: 2px 10px; border-radius: 999px; font-weight: 700; }

/* ---------- Quotes — colorful avatars ---------- */
.quote { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.quotes > .quote:nth-child(1) .quote__avatar { background: var(--accent); color: #fff; }
.quotes > .quote:nth-child(2) .quote__avatar { background: var(--accent2); color: #fff; }
.quotes > .quote:nth-child(3) .quote__avatar { background: var(--accent4); color: #fff; }

/* ---------- Vibe-coder chips — multi-color rainbow ---------- */
.vibe__supports > .vibe__chip:nth-child(8n+1) { background: rgba(107,91,255,0.12); color: var(--accent); }
.vibe__supports > .vibe__chip:nth-child(8n+2) { background: rgba(255,107,154,0.14); color: var(--accent2); }
.vibe__supports > .vibe__chip:nth-child(8n+3) { background: rgba(255,166,63,0.16); color: var(--accent3); }
.vibe__supports > .vibe__chip:nth-child(8n+4) { background: rgba(0,200,150,0.14); color: var(--accent4); }
.vibe__supports > .vibe__chip:nth-child(8n+5) { background: rgba(43,183,242,0.14); color: var(--accent5); }
.vibe__supports > .vibe__chip:nth-child(8n+6) { background: rgba(107,91,255,0.12); color: var(--accent); }
.vibe__supports > .vibe__chip:nth-child(8n+7) { background: rgba(255,107,154,0.14); color: var(--accent2); }

/* ---------- Real product screenshot card ---------- */
.shot {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card-lg);
}
.shot__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.shot__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink3); opacity: .55 }
.shot__bar span:nth-child(1) { background: #FF6B5C }
.shot__bar span:nth-child(2) { background: #FFC23B }
.shot__bar span:nth-child(3) { background: #4CD27C }
.shot__bar-url { margin-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink3) }
.shot img { display: block; width: 100%; height: auto; }

/* ---------- Hide the original fake "inbox" mockup; we replace with a real screenshot ---------- */
.chat-show__grid .inbox { display: none; }
.chat-show__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 980px) { .chat-show__grid { grid-template-columns: 1fr; } }

/* ---------- Section headings get a touch bolder ---------- */
.section-head__title { font-weight: 800; letter-spacing: -0.02em; }
.hero__title { font-weight: 800; letter-spacing: -0.025em; }

/* ---------- Footer slimmer ---------- */
.site-footer { background: var(--surface2); }