/* styles-dark.css  —  MeetZair V2 DARK overlay
 * Loads AFTER styles.css. Re-skins the white V1 to the dark MZ-blog palette
 * (bg #07091A, violet #5B5BFF, teal #00D4B8). Layout/structure untouched.
 * Goal: zero white form/read boxes; consistent dark theme.
 */

/* ---- Token remap (cascades to every var() in styles.css) ---- */
:root{
  --navy:#7C7CFF;            /* light-violet accent: links, brand, price-name, outline btn */
  --navy-deep:#3D3DCC;
  --teal:#00D4B8;
  --teal-light:#2FE6CC;
  --gold:#F5C84B;
  --ink:#FFFFFF;             /* headings -> white */
  --ink-soft:#C9CEE5;
  --ink-mute:#8C92B0;
  --text:#C9CEE5;
  --muted:#8C92B0;
  --line:rgba(255,255,255,0.10);
  --bg:#07091A;
  --bg-alt:#0E1230;
  --shadow:0 8px 32px rgba(0,0,0,.45);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
}

body{background:var(--bg);color:var(--text)}

/* Hero headline accent "actually runs" -> violet→teal gradient (matches V2 reference) */
h1 em{background:linear-gradient(135deg,#5B5BFF 0%,#2FE6CC 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-style:normal}
/* Ribbon -> violet gradient like the reference top bar */
.ribbon{background:linear-gradient(90deg,#4b4bf5 0%,#3d3dcc 100%)}
.ribbon a{color:#2FE6CC}
/* Primary buttons -> the violet→teal gradient seen on "Get early access"/"Join the waitlist" */
.btn-primary{background:linear-gradient(135deg,#5B5BFF 0%,#00D4B8 100%);color:#fff}
.btn-primary:hover{background:linear-gradient(135deg,#7C7CFF 0%,#2FE6CC 100%);box-shadow:0 10px 30px rgba(91,91,255,.45)}
.btn-outline{color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-outline:hover{background:rgba(255,255,255,.06);color:#fff}

/* ---- Nav ---- */
.nav{background:rgba(7,9,26,.85);border-bottom:1px solid var(--line)}
.brand-text{color:#fff}
.nav-toggle span{background:#fff}
@media(max-width:880px){
  .nav-links.open{background:rgba(7,9,26,.97);border-bottom:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
}

/* ---- Hero: dark gradient + glow orbs ---- */
.hero{background:linear-gradient(180deg,#0E1230 0%,#07091A 72%)}
.hero::before{background:radial-gradient(circle,rgba(0,212,184,.16) 0%,transparent 70%)}
.hero::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(91,91,255,.22) 0%,transparent 70%);bottom:-200px;left:-180px;pointer-events:none}
.eyebrow{background:rgba(124,124,255,.14);color:#fff}

/* ---- Countdown ---- */
.countdown-card{background:rgba(255,255,255,.04);border:1px solid var(--line);box-shadow:var(--shadow)}
.countdown > div{background:linear-gradient(135deg,#5B5BFF 0%,#3D3DCC 100%)}
.countdown-target strong{color:#fff}

/* ---- Hero EA card ---- */
.hero-card{background:rgba(255,255,255,.04);border:1px solid var(--line);box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.hero-card-title{color:#fff}
.hero-card .row{border-bottom:1px solid var(--line)}
.pill-urgent{background:rgba(255,107,107,.16);color:#ff9d9d}
.pill-sched{background:rgba(124,124,255,.18);color:#b9b9ff}
.pill-done{background:rgba(0,212,184,.16);color:#2FE6CC}

/* ---- Proofbar ---- */
.proofbar{background:var(--bg-alt)}

/* ---- Cards / sections ---- */
.card{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.card:hover{box-shadow:var(--shadow)}
.steps li{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.price-card{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.price-card-featured{border:2px solid var(--teal);box-shadow:var(--shadow-lg)}
.faq details{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.about-meta{background:rgba(255,255,255,.04);border:1px solid var(--line)}

/* ---- Forms: eliminate white inputs (the core fix) ---- */
.waitlist-form input{background:rgba(255,255,255,.05);color:#fff;border:1.5px solid var(--line)}
.waitlist-form input::placeholder{color:#8C92B0}
.waitlist-form .wf-select{background-color:rgba(255,255,255,.05);color:#fff;border:1.5px solid var(--line)}
.waitlist-form-chat input,.waitlist-form-chat textarea{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--line)}
.waitlist-form-chat input::placeholder,.waitlist-form-chat textarea::placeholder{color:#8C92B0}
/* Native option list popup renders light in most browsers; keep its text dark for legibility */
.waitlist-form .wf-select option{color:#1B2647;background:#fff}

/* ---- Waitlist CTA section: deep dark instead of navy gradient ---- */
.section-cta{background:linear-gradient(135deg,#0E1230 0%,#141A45 100%)}

/* ---- Form success panel ---- */
.form-success{background:rgba(0,212,184,.10);border:1px solid rgba(0,212,184,.35);border-left:4px solid var(--teal);box-shadow:none}
.form-success-title{color:#fff}

/* ---- Chat panel -> dark ---- */
.chat-panel{background:#0E1230;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.chat-panel-head{background:linear-gradient(135deg,#5B5BFF 0%,#00D4B8 100%)}

/* ---- Footer: --ink became white, so re-pin footer dark ---- */
.footer{background:#05060f}

/* ---- Wordmark on dark ("Meet" light, "Zair" teal via .bz) ---- */
.mzword{color:#C9CEE5}
.footer-brand-text{color:#fff}

/* ---- Contact + office (if served dark) ---- */
.contact-card{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.office-block{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.office-addr{color:#fff}

/* ---- Legal pages ---- */
.legal-page a{color:#7C7CFF}