/* ============================================================
   VidFortune AI Review — design tokens
   Palette, type scale, and the CPM-meter signature element
   ============================================================ */

:root{
  --bg-void: #06070D;
  --bg-panel: #0D1224;
  --bg-panel-raised: #131A33;
  --bg-panel-soft: #10152A;
  --edge: #232B4D;
  --edge-soft: #1A2140;

  --text-primary: #EDEFF7;
  --text-muted: #9099BE;
  --text-faint: #626C93;

  --accent-pink: #FF3D8F;
  --accent-purple: #8B5CF6;
  --accent-blue: #2E8FFF;
  --accent-gold: #FFB020;
  --accent-red: #FF3B30;

  --grad-brand: linear-gradient(115deg, var(--accent-pink) 0%, var(--accent-purple) 45%, var(--accent-blue) 100%);
  --grad-brand-soft: linear-gradient(115deg, rgba(255,61,143,.14) 0%, rgba(139,92,246,.14) 45%, rgba(46,143,255,.14) 100%);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --shadow-panel: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-glow-pink: 0 0 60px -10px rgba(255,61,143,.35);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.03rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.display-face{
  font-family: 'Sora', 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.mono, .stat-num, .price-num, .cpm-val{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

a{ color: var(--accent-blue); text-decoration: none; }
a:hover{ color: var(--accent-pink); }

::selection{ background: var(--accent-purple); color: #fff; }

/* ---------- Layout scaffolding ---------- */
.section{ padding: 5.5rem 0; position: relative; }
.section-tight{ padding: 3.5rem 0; }
.section-alt{ background: var(--bg-panel); border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent-gold);
  background: rgba(255,176,32,.08);
  border: 1px solid rgba(255,176,32,.25);
  padding: .35rem .8rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--accent-gold); box-shadow: 0 0 8px var(--accent-gold); }
.text-muted.mb-0.content_white{color:white !important;}
.section-title{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; margin-bottom: .9rem; }
.section-lede{ color: var(--text-muted); font-size: 1.08rem; max-width: 680px; }

.text-gradient{
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Nav ---------- */
.navbar-vf{
  background: rgba(6,7,13,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-soft);
}
.navbar-vf .brand-mark{ width: 34px; height: 34px; }
.navbar-vf .navbar-brand{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; color:#fff; }
.navbar-vf .nav-link{ color: var(--text-muted); font-size:.94rem; font-weight:500; }
.navbar-vf .nav-link:hover{ color: #fff; }

.btn-cta{
  background: var(--grad-brand);
  border: none; color:#fff; font-weight:700;
  padding: .75rem 1.6rem; border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(139,92,246,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -6px rgba(255,61,143,.55); color:#fff; }
.btn-cta-sm{ padding:.55rem 1.15rem; font-size:.88rem; border-radius:999px; }

.btn-ghost-vf{
  border: 1px solid var(--edge); color: var(--text-primary);
  padding: .75rem 1.5rem; border-radius: 999px; font-weight:600;
  background: transparent;
}
.btn-ghost-vf:hover{ border-color: var(--accent-purple); color:#fff; }

/* ---------- Hero ---------- */
.hero{
  padding: 7rem 0 4.5rem;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(45% 40% at 8% 90%, rgba(255,61,143,.14), transparent 60%),
    var(--bg-void);
  overflow: hidden;
}
.hero-badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.4rem 0 1.6rem; }
.pill{
  font-size:.78rem; font-weight:600; color: var(--text-muted);
  border:1px solid var(--edge); background: var(--bg-panel-soft);
  padding:.35rem .75rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem;
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-blue); }

.hero h1{ font-size: clamp(2.3rem, 4.4vw, 3.55rem); font-weight: 800; line-height:1.08; }
.hero .lede{ color: var(--text-muted); font-size: 1.16rem; max-width: 560px; margin: 1.3rem 0 1.9rem; }

.hero-stats{ display:flex; gap:2.2rem; margin-top: 2.6rem; flex-wrap: wrap; }
.hero-stats .stat-num{ font-size: 1.6rem; font-weight:700; color:#fff; }
.hero-stats .stat-label{ font-size:.78rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }

.hero-art{ position:relative; }
.hero-art img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), var(--shadow-glow-pink);
  border: 1px solid var(--edge-soft);
}

/* ---------- CPM Meter — signature element ---------- */
.cpm-meter{
  background: var(--bg-panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: 2.2rem clamp(1.2rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-panel);
}
.cpm-row{ display:grid; grid-template-columns: 168px 1fr 92px; align-items:center; gap: 1rem; padding: .62rem 0; border-bottom: 1px dashed var(--edge-soft); }
.cpm-row:last-child{ border-bottom:none; }
.cpm-niche{ font-size:.92rem; font-weight:600; color: var(--text-muted); }
.cpm-niche small{ display:block; font-weight:400; color: var(--text-faint); font-size:.72rem; }
.cpm-track{ background: var(--bg-void); border:1px solid var(--edge-soft); border-radius: 999px; height: 14px; overflow:hidden; position:relative; }
.cpm-fill{ height:100%; border-radius:999px; }
.cpm-fill.low{ background: linear-gradient(90deg, #3A4166, #4C5488); }
.cpm-fill.mid{ background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); }
.cpm-fill.high{ background: linear-gradient(90deg, var(--accent-gold), var(--accent-red)); box-shadow: 0 0 14px rgba(255,176,32,.5); }
.cpm-val{ text-align:right; font-weight:700; font-size:.92rem; }
.cpm-val.high{ color: var(--accent-gold); }

/* ---------- Steps (real 3-step sequence — numbering earned) ---------- */
.step-card{
  background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-lg);
  padding: 2rem; height:100%; position:relative;
}
.step-num{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.85rem;
  color: var(--accent-gold); border:1px solid rgba(255,176,32,.35); background: rgba(255,176,32,.08);
  width:auto; padding: .25rem .65rem; border-radius:999px; display:inline-block; margin-bottom:1.1rem;
}
.step-arrow{ color: var(--edge); font-size:1.8rem; display:flex; align-items:center; justify-content:center; }

/* ---------- Feature / benefit blocks ---------- */
.feature-block{
  display:grid; grid-template-columns: 56px 1fr; gap:1.1rem;
  padding: 1.8rem 0; border-bottom: 1px solid var(--edge-soft);
}
.feature-block:last-child{ border-bottom:none; }
.feature-icon{
  width:52px; height:52px; border-radius: 14px;
  background: var(--grad-brand-soft); border:1px solid var(--edge-soft);
  display:flex; align-items:center; justify-content:center; color: var(--accent-gold); font-size:1.35rem;
}
.feature-block h3{ font-size:1.18rem; margin-bottom:.4rem; }
.feature-block p{ color: var(--text-muted); margin-bottom:0; }

.benefit-card{
  background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-md);
  padding: 1.7rem; height:100%;
}
.benefit-card .b-icon{ color: var(--accent-pink); font-size:1.3rem; margin-bottom:.9rem; }
.benefit-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.benefit-card p{ color: var(--text-muted); font-size:.94rem; margin-bottom:0; }

/* ---------- Who-for chips ---------- */
.who-card{
  display:flex; gap:.9rem; align-items:flex-start; background: var(--bg-panel);
  border:1px solid var(--edge-soft); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; height:100%;
}
.who-card .w-mark{ color: var(--accent-blue); font-size:1.1rem; margin-top:.15rem; }
.who-card p{ margin-bottom:0; color: var(--text-muted); font-size:.94rem; }
.who-card strong{ color: var(--text-primary); }

/* ---------- Pros / cons ---------- */
.proscons-card{ background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-lg); padding: 2rem; height:100%; }
.proscons-card.pros{ border-top: 3px solid var(--accent-blue); }
.proscons-card.cons{ border-top: 3px solid var(--accent-red); }
.proscons-card ul{ list-style:none; padding-left:0; margin-bottom:0; }
.proscons-card li{ display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px dashed var(--edge-soft); color: var(--text-muted); }
.proscons-card li:last-child{ border-bottom:none; }
.proscons-card.pros li::before{ content:'+'; color: var(--accent-blue); font-weight:700; }
.proscons-card.cons li::before{ content:'−'; color: var(--accent-red); font-weight:700; }

/* ---------- Bonuses ---------- */
.bonus-card{
  background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-md);
  padding: 1.5rem; height:100%; position:relative; overflow:hidden;
}
.bonus-tag{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-gold); margin-bottom:.5rem; display:block;
}
.bonus-card h3{ font-size:1rem; margin-bottom:.5rem; }
.bonus-card p{ color: var(--text-muted); font-size:.88rem; margin-bottom:.8rem; }
.bonus-value{ font-family:'JetBrains Mono',monospace; font-size:.82rem; color: var(--text-faint); }
.bonus-value span{ color: var(--accent-blue); font-weight:700; }

/* ---------- Pricing ---------- */
.price-card{
  background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));
  border: 1px solid var(--edge-soft); border-radius: var(--radius-lg);
  padding: 2.6rem; box-shadow: var(--shadow-panel);
}
.price-strike{ color: var(--text-faint); text-decoration: line-through; font-size:1.2rem; }
.price-num{ font-size: 3.4rem; font-weight:800; color:#fff; }
.price-num sup{ font-size:1.3rem; top:-1.3rem; }
.price-note{ color: var(--text-faint); font-size:.85rem; }
.price-list li{ padding:.4rem 0; color: var(--text-muted); font-size:.94rem; }

/* ---------- Testimonials ---------- */
.testi-card{
  background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-lg);
  padding: 1.9rem; height:100%;
}
.testi-stars{ color: var(--accent-gold); letter-spacing:.15em; margin-bottom:.9rem; }
.testi-card p{ color: var(--text-muted); font-style: italic; }
.testi-who{ display:flex; align-items:center; gap:.75rem; margin-top:1.2rem; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; background: var(--grad-brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.9rem;
}
.testi-name{ font-weight:600; font-size:.92rem; color:#fff; }
.testi-loc{ font-size:.78rem; color: var(--text-faint); }
.testi-note{ font-size:.76rem; color: var(--text-faint); border-top:1px dashed var(--edge-soft); margin-top:1.1rem; padding-top:.8rem; }

/* ---------- FAQ ---------- */
.accordion-vf .accordion-item{ background: var(--bg-panel); border:1px solid var(--edge-soft); border-radius: var(--radius-md) !important; margin-bottom: .8rem; overflow:hidden; }
.accordion-vf .accordion-button{
  background: var(--bg-panel); color: var(--text-primary); font-weight:600; font-size:1rem;
  box-shadow:none; padding: 1.15rem 1.3rem;
}
.accordion-vf .accordion-button:not(.collapsed){ color:#fff; background: var(--bg-panel-raised); box-shadow:none; }
.accordion-vf .accordion-button:focus{ box-shadow:none; }
.accordion-vf .accordion-button::after{ filter: invert(1) brightness(1.6); }
.accordion-vf .accordion-body{ color: var(--text-muted); padding: 0 1.3rem 1.3rem; }

/* ---------- Verdict / final CTA ---------- */
.verdict-panel{
  background: var(--grad-brand-soft); border:1px solid var(--edge-soft); border-radius: var(--radius-lg);
  padding: 2.6rem;
}
.score-badge{
  width:120px; height:120px; border-radius:50%; background: var(--bg-void);
  border: 3px solid var(--accent-gold); display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow: 0 0 40px -6px rgba(255,176,32,.4);
}
.score-badge .n{ font-family:'JetBrains Mono',monospace; font-size:1.7rem; font-weight:800; color:#fff; }
.score-badge .d{ font-size:.62rem; color: var(--text-faint); letter-spacing:.08em; }

.final-cta{
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,61,143,.18), transparent 65%), var(--bg-panel);
  border-top:1px solid var(--edge-soft); text-align:center; padding: 5rem 0;
}

/* ---------- Footer ---------- */
.footer-vf{ background: var(--bg-void); border-top:1px solid var(--edge-soft); padding: 3.5rem 0 2rem; }
.footer-vf a{ color: var(--text-muted); font-size:.9rem; }
.footer-vf a:hover{ color:#fff; }
.footer-disclaimer{ color: var(--text-faint); font-size:.8rem; max-width: 820px; line-height:1.7; }
.footer-brand{ font-family:'Sora',sans-serif; font-weight:700; color:#fff; }

/* ---------- Legal pages ---------- */
.legal-hero{ padding: 6rem 0 2.5rem; background: var(--bg-void); border-bottom:1px solid var(--edge-soft); }
.legal-body{ padding: 3rem 0 5rem; }
.legal-body h2{ font-size:1.4rem; margin-top:2.2rem; margin-bottom:.8rem; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color: var(--text-muted); }
.legal-body ul{ padding-left: 1.2rem; }
.legal-updated{ color: var(--text-faint); font-size:.85rem; }

/* ---------- Utilities ---------- */
.divider-fade{ height:1px; background: linear-gradient(90deg, transparent, var(--edge-soft), transparent); border:none; margin: 4rem 0 0; }
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:.6rem 1rem; z-index:2000; }
.skip-link:focus{ left: 1rem; top: 1rem; }

@media (max-width: 767px){
  .cpm-row{ grid-template-columns: 108px 1fr 64px; }
  .hero{ padding: 6rem 0 3rem; }
  .section{ padding: 3.6rem 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn-cta{ transition:none; }
}