/* ============================================
   OhChat AI Review — Homepage Dark Theme
   (loaded ONLY on index.html, after style.css)
   Look & feel modeled on the Our Dream AI reference:
   deep violet-black bg, hot pink accents, pill buttons,
   card grids with name overlays, centered pink headings.
   ============================================ */

:root {
  /* Re-map shared variables for the dark canvas.
     Inline styles that use var(...) pick these up automatically. */
  --brand-pink: #ff4081;
  --brand-pink-light: #ff6b9d;
  --brand-pink-dark: #e02c6a;
  --brand-rose-bg: #14101d;          /* was light rose — now panel dark */
  --brand-blush: rgba(255, 64, 129, 0.14);
  --border: rgba(255, 255, 255, 0.10);
  --text-dark: #f2eafc;
  --text-mid: #b3a5c9;
  --text-light: #8d7fa8;
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35);

  /* Inline-style hooks (index.html uses var(--panel,#fff) / var(--ink,#2d1b35)) */
  --panel: #1c1626;
  --ink: #ffffff;

  /* Dark palette */
  --dark-bg: #0d0b14;
  --dark-bg-2: #15111e;
  --card-dark: #1c1626;
  --card-border: rgba(255, 255, 255, 0.08);
}

/* ---- BASE ---- */
body { background: var(--dark-bg); color: #cfc4de; }
h1, h2, h3, h4, h5 { color: #fff; }
p { color: var(--text-mid); }

/* Pink accent word inside headings (reference style) */
.accent { color: var(--brand-pink); }

/* ---- 18+ STRIP ---- */
.age-strip { background: #0a0810; color: #8d7fa8; border-bottom: 1px solid var(--card-border); }
.age-strip a { color: var(--brand-pink-light); }

/* ---- NAV ---- */
.site-header {
  background: rgba(13, 11, 20, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: 1px solid var(--card-border);
}
.site-logo { color: #fff; }
.nav-links a { color: #cfc4de; }
.nav-links a:hover { color: var(--brand-pink); }
.nav-hamburger { color: #fff; }
.nav-links.open { background: var(--dark-bg-2); box-shadow: 0 12px 32px rgba(0,0,0,0.6); }

/* ---- PILL BUTTONS (reference uses fully rounded CTAs) ---- */
.btn-primary, .btn-secondary, .btn-white, .nav-cta { border-radius: 50px; }
.btn-primary { box-shadow: 0 4px 22px rgba(255, 64, 129, 0.45); }

/* ---- HERO (boxed floating panel, per reference) ---- */
.hero {
  background:
    radial-gradient(ellipse 60% 55% at 78% 10%, rgba(255, 64, 129, 0.10), transparent 65%),
    radial-gradient(ellipse 45% 45% at 15% 90%, rgba(120, 60, 200, 0.10), transparent 60%),
    var(--dark-bg);
  padding: 3rem 1.25rem 3.5rem;
}
.hero::before { display: none; }
.hero-panel {
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(145deg, #1a1424 0%, #15111e 60%, #191026 100%);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 3rem 3rem 2.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
}
.hero-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 70% at 85% 20%, rgba(255, 64, 129, 0.13), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  padding: 0;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2.5rem;
  position: relative;
}
.hero-badge { background: rgba(255, 64, 129, 0.13); border-color: rgba(255, 64, 129, 0.35); color: var(--brand-pink-light); }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.hero-lead { color: var(--text-mid); }
.hero-verdict { background: rgba(0, 0, 0, 0.25); border-left-color: var(--brand-pink); color: #cfc4de; }
.hero-disc { color: var(--text-light); text-align: left; }

/* Tilted glowing media card, like the reference hero image */
.hero-video-card {
  transform: rotate(2.5deg);
  border: 1px solid rgba(255, 64, 129, 0.30);
  box-shadow: 0 18px 60px rgba(255, 64, 129, 0.22), 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: transform .3s ease;
  max-width: 340px;
  margin-left: auto;
}
.hero-video-card:hover { transform: rotate(0deg); }
.hero-video-card video { aspect-ratio: 4/5; }

/* Stats row along the bottom of the hero panel */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--card-border);
  position: relative;
}
.hero-stat { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--card-border); border-radius: 12px; padding: 0.9rem; text-align: center; }
.hero-stat .num { color: var(--brand-pink); font-size: 1.4rem; font-weight: 800; }
.hero-stat .lbl { color: var(--text-light); font-size: 0.74rem; margin: 0; }

/* Centered pill CTA under grids (reference pattern) */
.grid-cta { text-align: center; margin: 1.75rem 0 2.5rem; }

@media (max-width: 900px) {
  .hero-panel { padding: 2rem 1.4rem 1.75rem; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stats-row { grid-template-columns: 1fr 1fr; }
  .hero-stat-wide { grid-column: 1 / -1; }
}

/* ---- SECTIONS ---- */
.section-alt { background: var(--dark-bg-2); }
.section-title { color: #fff; }
.section-sub { color: var(--text-light); }
.badge-pink { background: rgba(255, 64, 129, 0.14); color: var(--brand-pink); }
.badge-plum { background: rgba(255, 255, 255, 0.07); color: #d5c8e8; }

/* ---- EVIDENCE TABLE ---- */
.evidence-table { background: var(--card-dark); box-shadow: var(--shadow-card); }
.evidence-table th { background: #241a30; color: #fff; }
.evidence-table td { color: var(--text-mid); border-bottom-color: var(--card-border); }
.evidence-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }

/* ---- CARDS ---- */
.card, .article-card {
  background: var(--card-dark);
  border-color: var(--card-border);
}
.card:hover, .article-card:hover {
  border-color: rgba(255, 64, 129, 0.35);
  box-shadow: 0 10px 34px rgba(255, 64, 129, 0.13);
}
.card-icon { background: rgba(255, 64, 129, 0.13); }
.card p, .article-card p { color: var(--text-light); }
.article-card .tag { background: rgba(255, 64, 129, 0.14); color: var(--brand-pink); }
.read-link { color: var(--brand-pink); }

/* ---- PRICING ---- */
.pricing-card { background: var(--card-dark); border-color: var(--card-border); }
.pricing-card.featured { border-color: var(--brand-pink); box-shadow: 0 0 0 4px rgba(255, 64, 129, 0.12), 0 10px 36px rgba(255, 64, 129, 0.14); }
.pricing-card .plan-name { color: var(--text-light); }
.pricing-card .promo-price { color: var(--brand-pink); }
.pricing-card .list-price { color: var(--text-light); }
.pricing-card .renewal { background: rgba(245, 166, 35, 0.10); color: #e8c987; }
.pricing-note { color: var(--text-light); }

/* ---- SCORECARD ---- */
.score-label { color: var(--text-mid); }
.score-bar-wrap { background: rgba(255, 64, 129, 0.12); }
.score-num { color: var(--brand-pink); }

/* ---- CALCULATOR ---- */
#cost-calculator input {
  background: var(--dark-bg);
  color: #fff;
  outline: none;
}
#cost-calculator input:focus { border-color: var(--brand-pink) !important; }

/* ---- WARNING BOX ---- */
.warning-box {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.30);
  border-left-color: var(--brand-gold);
  color: #e8c987;
}
.warning-box strong { color: #f5d9a0; }

/* ---- FAQ ---- */
.faq-item { background: var(--card-dark); border-color: var(--card-border); }
.faq-item:hover { border-color: rgba(255, 64, 129, 0.45); }
.faq-item.faq-open { border-color: rgba(255, 64, 129, 0.55); box-shadow: 0 6px 24px rgba(255, 64, 129, 0.14); }
.faq-q { color: #fff; }
.faq-q:hover { background: rgba(255, 64, 129, 0.07); }
.faq-q::before { background: rgba(255, 64, 129, 0.16); color: var(--brand-pink); }
.faq-q .faq-arrow { color: var(--brand-pink); background: rgba(255, 64, 129, 0.16); }
.faq-a { color: var(--text-mid); }
.faq-a-inner::before { background: rgba(255, 255, 255, 0.08); color: #d5c8e8; }

/* ---- AUTHOR BOX ---- */
.author-box { background: var(--card-dark); border-color: var(--card-border); }
.author-avatar { border-color: rgba(255, 64, 129, 0.35); }
.author-name { color: #fff; }
.author-bio { color: var(--text-mid); }
.author-role, .author-meta { color: var(--text-light); }

/* ---- MEDIA COMPONENTS ---- */
.media-figure { background: var(--card-dark); border-color: var(--card-border); }
.media-figure figcaption { background: var(--card-dark); border-top-color: var(--card-border); color: var(--text-light); }
.media-note { color: var(--text-light); }
.media-gallery figure { background: var(--card-dark); }
.char-video-card { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5); }

/* ---- FINAL CTA (dark, tall portrait + pink pill, per reference) ---- */
.cta-section {
  background:
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 64, 129, 0.14), transparent 70%),
    var(--dark-bg-2);
  color: #fff;
}
.cta-section h2 { color: #fff; }
.cta-section p { color: var(--text-mid); }
.cta-portrait {
  margin: 0 auto 1.75rem;
  max-width: 300px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 64, 129, 0.30);
  box-shadow: 0 16px 56px rgba(255, 64, 129, 0.20), 0 10px 36px rgba(0, 0, 0, 0.5);
}
.cta-portrait img { display: block; width: 100%; height: auto; }
.cta-section .btn-white {
  background: var(--brand-pink);
  color: #fff;
  box-shadow: 0 4px 24px rgba(255, 64, 129, 0.5);
}
.cta-section .btn-white:hover { background: var(--brand-pink-dark); color: #fff; }

/* ---- FOOTER ---- */
.site-footer { background: #0a0810; border-top: 1px solid var(--card-border); color: #8d7fa8; }
.footer-col ul a { color: #8d7fa8; }
.footer-col ul a:hover { color: var(--brand-pink-light); }
.footer-col p { color: #6e6284; }
.footer-bottom { color: #574d68; }