/* ============================================================
   Rework — PREMIUM DARK conversion (loaded LAST, wins).
   Turns the former cream sections (WHY / STORIES / FAQ) into a
   refined deep-dark world — no white backgrounds anywhere — with
   warm depth glow + crisper typography.
   ============================================================ */

/* deep dark palette for every section that used .light */
.light{
  background:#0b0b10;
  color:#fff;
  --ink:#ffffff;
  --soft:#C9C9D4;
  --muted:#8C8C99;
  --faint:#5A5A66;
  --surface:#16161D;
  --surface-2:#1C1C25;
  --surface-3:#23232D;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --gradient:linear-gradient(100deg,#FFE773 0%,#FED60A 32%,#FFA64D 72%,#FF7A6B 100%);
}
.light h1,.light h2,.light h3,.light h4{color:var(--ink);}

/* subtle seam + warm depth glow instead of the cream wash */
.light::before{background:rgba(255,255,255,.05);}
.light .light-wash{overflow:hidden;}
.light .light-wash::before{
  background:radial-gradient(circle, rgba(254,214,10,.12), transparent 60%);
}
.light .light-wash::after{
  content:""; position:absolute; width:55vw; height:55vw; right:-12%; bottom:-26%;
  border-radius:50%; filter:blur(90px); pointer-events:none;
  background:radial-gradient(circle, rgba(255,122,107,.09), transparent 62%);
}

/* eyebrows / accents readable on dark */
.light .eyebrow{color:var(--muted);}
.light .eyebrow.accent,.light .accent{color:var(--accent);}

/* bento cards → dark glass with glow */
.light .bcard{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.light .bcard:hover{
  background:var(--surface-2); border-color:var(--line-2);
  box-shadow:0 30px 64px -36px rgba(0,0,0,.85);
}
.light .bcard .bglow{background:radial-gradient(circle,rgba(254,214,10,.22),transparent 65%);}
.light .bcard .bi{background:rgba(254,214,10,.15);}

/* stories (testimonials) → dark cards */
.light .story{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.light .story:hover{box-shadow:0 30px 60px -34px rgba(0,0,0,.85); border-color:var(--line-2);}
.light .story blockquote{color:var(--ink);}
.light .story .who b{color:var(--ink);}
.light .story .who span{color:var(--muted);}
.light .story .mark{color:rgba(254,214,10,.20);}
.light .story .ava{background:var(--surface-3); box-shadow:0 0 0 1px var(--line) inset;}

/* FAQ → dark */
.light .faq-item{background:var(--surface); border-color:var(--line); box-shadow:none;}
.light .faq-item.open{background:var(--surface-2); border-color:var(--line-2);}
.light .faq-q{color:var(--ink);}
.light .faq-q .pm::before,.light .faq-q .pm::after{background:var(--accent);}
.light .faq-a .inner p{color:var(--soft);}

/* ghost buttons on the now-dark sections */
.light .btn-ghost{background:rgba(255,255,255,.05);color:#fff;border-color:var(--line-2);}
.light .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);}

/* ---------- premium typographic refinement ---------- */
.sec-head h2{letter-spacing:-.045em;}
.bcard h3,.fcard .fbody h3,.step h3{letter-spacing:-.025em;}
.story blockquote{letter-spacing:-.02em;}
.eyebrow{font-weight:500;}