/*
Theme Name: The Obvious Choice Lab
Theme URI: https://favfrica.com
Author: Favour of Africa
Author URI: https://favfrica.com
Description: Custom landing page theme for The Obvious Choice Lab™ — a live training for Nigerian VAs and freelancers.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocl-theme
Tags: landing-page, custom-colors, full-width-template
*/

/* ====================================================================
   RESET & BASE
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #1565C0; --blue-hero: #0D47A1; --blue-mid: #1976D2;
  --blue-lt: #E3F2FD; --blue-dark: #0A1628; --orange: #FF6B00;
  --white: #FFFFFF; --gray-txt: #37474F; --muted: #78909C; --blue-pale: #F0F6FF;
}
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', sans-serif; background: var(--white); color: var(--gray-txt); overflow-x: hidden; }

.bar { background: var(--orange); color: var(--white); text-align: center; padding: 11px 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }

.hero { background: var(--blue-hero); display: block; min-height: auto; overflow: hidden; }
.hero-left { padding: 80px 10vw 90px; max-width: 800px; }
.eyebrow { font-size: 11px; font-weight: 700; color: var(--orange); letter-spacing: 0.25em; text-transform: uppercase; display: block; margin-bottom: 22px; }
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(40px, 5.5vw, 68px); font-weight: 900; color: var(--white); line-height: 1.08; margin-bottom: 28px; }
.hero-title em { color: var(--orange); font-style: italic; display: block; }
.hero-body { font-size: 16px; color: rgba(179,212,255,0.9); line-height: 1.75; margin-bottom: 28px; max-width: 520px; }
.checks { list-style: none; margin-bottom: 40px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(179,212,255,0.85); margin-bottom: 12px; line-height: 1.5; }
.checks li::before { content: ''; width: 10px; height: 10px; background: var(--orange); border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.btn { display: inline-block; background: var(--orange); color: var(--white); font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 13px; padding: 16px 32px; border-radius: 4px; border: none; cursor: pointer; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: filter 0.2s, transform 0.15s; }
.btn:hover { filter: brightness(0.9); transform: translateY(-2px); }
.btn-blue { background: var(--blue-hero); }
.hero-right { position: relative; height: 100%; min-height: 600px; overflow: hidden; }
.hero-right::before { content: ''; position: absolute; top: 0; left: 0; width: 120px; height: 100%; background: linear-gradient(to right, var(--blue-hero), transparent); z-index: 2; pointer-events: none; }
.hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

section { padding: 80px 6vw; }
.label { font-size: 11px; font-weight: 700; color: var(--orange); letter-spacing: 0.25em; text-transform: uppercase; display: block; margin-bottom: 14px; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.15; margin-bottom: 18px; }

.pain-section { background: var(--blue-dark); color: var(--white); }
.pain-section .section-title { color: var(--white); }
.pain-section .section-title em { color: var(--orange); font-style: italic; }
.pain-body { font-size: 16px; color: rgba(143,184,216,0.9); line-height: 1.7; max-width: 820px; margin-bottom: 48px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-card { background: #112840; border: 1.5px solid var(--blue-mid); border-radius: 8px; padding: 32px 24px 28px; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 60px; font-weight: 900; color: var(--orange); line-height: 1; margin-bottom: 24px; display: block; }
.stat-body { font-size: 14px; color: rgba(143,184,216,0.85); line-height: 1.65; }

.quote-section { background: var(--blue-mid); text-align: center; padding: 90px 6vw; }
.quote-mark { font-family: 'Playfair Display', serif; font-size: 100px; color: var(--white); line-height: 0.6; display: block; text-align: left; margin-bottom: 20px; opacity: 0.7; }
.quote-text { font-family: 'Playfair Display', serif; font-size: clamp(26px, 4vw, 42px); font-weight: 900; color: var(--white); line-height: 1.3; max-width: 820px; margin: 0 auto 28px; }
.quote-rule { width: 140px; height: 4px; background: var(--orange); border: none; margin: 0 auto 24px; }
.quote-attr { font-size: 15px; color: rgba(179,212,255,0.8); font-style: italic; max-width: 600px; margin: 0 auto; }

.inside-section { background: var(--white); }
.inside-header { background: var(--blue-hero); margin: -80px -6vw 48px; padding: 28px 6vw; }
.inside-header .label { color: var(--orange); margin-bottom: 6px; }
.inside-header .section-title { color: var(--white); margin-bottom: 0; font-size: clamp(22px, 3vw, 34px); }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--blue-lt); border: 1px solid #90CAF9; border-radius: 8px; padding: 26px 22px; }
.card h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--blue-hero); margin-bottom: 16px; line-height: 1.3; }
.card p { font-size: 13.5px; color: var(--gray-txt); line-height: 1.65; }

.fit-section { background: var(--blue-pale); }
.fit-header { background: var(--blue-hero); margin: -80px -6vw 48px; padding: 28px 6vw; }
.fit-header .label { color: var(--orange); margin-bottom: 6px; }
.fit-header .section-title { color: var(--white); margin-bottom: 0; font-size: clamp(22px, 3vw, 34px); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fit-box { border-radius: 8px; padding: 30px 26px; }
.fit-box.yes { background: #E8F5E9; border: 1.5px solid #66BB6A; }
.fit-box.no  { background: #F5F5F5; border: 1.5px solid #B0BEC5; }
.fit-box h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.fit-box.yes h3 { color: #2E7D32; }
.fit-box.no  h3 { color: var(--gray-txt); }
.fit-list { list-style: none; }
.fit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.fit-list li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.fit-list.yes li { color: #1B5E20; }
.fit-list.yes li::before { background: #43A047; }
.fit-list.no  li { color: var(--gray-txt); }
.fit-list.no  li::before { background: #90A4AE; }

.about-section { background: var(--white); padding: 0; display: grid; grid-template-columns: 1fr 1.4fr; min-height: 600px; }
.about-photo { background: var(--blue-hero); overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.about-text { padding: 60px 6vw 60px 5vw; display: flex; flex-direction: column; justify-content: center; }
.about-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.badge { font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 100px; }
.badge-blue { background: var(--blue-lt); color: var(--blue-hero); }
.badge-orange { background: rgba(255,107,0,0.1); color: var(--orange); }
.about-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: var(--blue-hero); margin-bottom: 24px; line-height: 1.2; }
.about-text p { font-size: 15px; color: var(--gray-txt); line-height: 1.8; margin-bottom: 18px; }

.urgency-section { background: var(--blue-dark); text-align: center; padding: 80px 6vw; }
.urgency-section h2 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 5vw, 54px); font-weight: 900; color: var(--white); margin-bottom: 14px; }
.urgency-section h2 em { color: var(--orange); font-style: italic; display: block; }
.urgency-sub { font-size: 16px; color: rgba(143,184,216,0.85); margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }
.pills { display: flex; justify-content: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.pill { background: #1A2C45; border: 1.5px solid var(--blue-mid); border-radius: 100px; padding: 10px 22px; font-size: 12px; font-weight: 700; color: var(--orange); }

.form-section { background: var(--blue-pale); padding: 0; }
.form-header { background: var(--blue-hero); padding: 28px 6vw; }
.form-header .label { color: var(--orange); margin-bottom: 6px; }
.form-header p { color: var(--white); font-size: 17px; }
.form-wrap { padding: 50px 6vw 70px; display: flex; justify-content: center; }
.form-card { background: var(--white); border: 1.5px solid #90CAF9; border-radius: 10px; padding: 40px 36px; width: 100%; max-width: 620px; box-shadow: 0 8px 32px rgba(13,71,161,0.08); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--blue-hero); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 8px; }
.form-group input, .form-group select { width: 100%; padding: 14px 16px; background: var(--blue-pale); border: 1px solid #90CAF9; border-radius: 4px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: var(--gray-txt); outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus { border-color: var(--blue-mid); }
.form-group input::placeholder { color: #9EBBE8; }
.form-submit { width: 100%; background: var(--orange); color: var(--white); font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 13px; padding: 18px; border: none; border-radius: 4px; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; transition: filter 0.2s; }
.form-submit:hover { filter: brightness(0.9); }
.form-privacy { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.success-msg { display: none; text-align: center; padding: 30px 10px; }
.success-msg .emoji { font-size: 48px; margin-bottom: 14px; }
.success-msg h3 { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--blue-hero); margin-bottom: 10px; }
.success-msg p { font-size: 15px; color: var(--gray-txt); line-height: 1.7; }

footer { background: #0D2137; text-align: center; padding: 28px; font-size: 12px; color: rgba(143,184,216,0.7); border-top: 1px solid rgba(255,255,255,0.06); }
footer strong { color: var(--orange); }

@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 320px; order: -1; }
  .hero-left { padding: 30px 6vw 60px; }
  .stats-grid, .cards-grid, .fit-grid { grid-template-columns: 1fr; }
  .about-section { grid-template-columns: 1fr; }
  .about-photo { min-height: 320px; }
  .pills { flex-direction: column; align-items: center; }
  .form-card { padding: 28px 20px; }
}