/* SkillsToUSD — Main CSS */
:root {
  --teal: #01696f;
  --teal-dark: #014e52;
  --teal-light: #e6f4f4;
  --gold: #D4A017;
  --gold-light: #f0c93a;
  --navy: #0f1623;
  --navy-light: #1a2535;
  --white: #fff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --danger: #ef4444;
  --success: #22c55e;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.15);
  --transition: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; color: var(--gray-800); background: var(--white); line-height: 1.6; padding-top: 104px; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-label { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); background: var(--teal-light); padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; }
.text-center { text-align: center; }
.text-teal { color: var(--teal); }
.text-gold  { color: var(--gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: .95rem; transition: all var(--transition); cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.35); }
.btn-ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-2px); }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }
.btn-full { width: 100%; }

/* Urgency Bar */
.urgency-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 40px; background: var(--teal); color: var(--gold); font-size: .8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: .02em; }
.urgency-bar a { color: var(--gold); text-decoration: underline; }

/* Nav */
#mainNav { position: fixed; top: 40px; left: 0; right: 0; z-index: 999; height: 64px; background: transparent; transition: background var(--transition), box-shadow var(--transition); }
#mainNav.scrolled { background: var(--white); box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.nav-logo { font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--teal); }
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: .9rem; font-weight: 500; color: var(--gray-700); transition: color var(--transition); }
.nav-links a:hover { color: var(--teal); }
.nav-cta { background: var(--gold) !important; color: var(--navy) !important; padding: 10px 22px; border-radius: var(--radius); font-weight: 700 !important; transition: all var(--transition) !important; }
.nav-cta:hover { background: var(--gold-light) !important; transform: translateY(-1px); }
#navToggle { display: none; background: none; border: none; cursor: pointer; color: var(--gray-800); padding: 4px; }
#mainNav.scrolled #navToggle { color: var(--gray-800); }
#mainNav:not(.scrolled) #navToggle { color: var(--white); }

/* Hero */
.hero { min-height: 92vh; display: flex; align-items: center; background: linear-gradient(135deg, rgba(15,22,35,.85) 0%, rgba(1,78,82,.72) 100%), url('/images/hero-main-scaled.jpg') center/cover no-repeat; position: relative; overflow: hidden; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 700px; }
.hero-tagline { font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.hero h1 { color: var(--white); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,.8); max-width: 560px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.75); }
.hero-trust-item svg { width: 16px; height: 16px; color: var(--gold); }

/* Stats Bar */
.stats-bar { background: var(--white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-item { text-align: center; padding: 0 24px; }
.stat-item + .stat-item { border-left: 1px solid var(--gray-200); }
.stat-number { font-family: 'Poppins', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--teal); line-height: 1; }
.stat-label { font-size: .82rem; color: var(--gray-600); margin-top: 6px; }

/* Pain Section */
.section-pain { background: var(--white); }
.pain-intro { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.pain-intro p { color: var(--gray-600); margin-top: 12px; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pain-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 28px; transition: transform var(--transition), box-shadow var(--transition); }
.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pain-emoji { font-size: 2rem; margin-bottom: 16px; }
.pain-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.pain-card p { font-size: .88rem; color: var(--gray-600); line-height: 1.65; }

/* Solution Bridge */
.solution-bridge { background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%); color: var(--white); text-align: center; }
.solution-bridge h2 { color: var(--white); margin-bottom: 16px; }
.solution-bridge p { color: rgba(255,255,255,.8); font-size: 1.1rem; max-width: 640px; margin: 0 auto 32px; }

/* Pillars */
.pillars-section { background: var(--gray-50); }
.pillars-intro { text-align: center; margin-bottom: 48px; }
.pillars-intro p { color: var(--gray-600); margin-top: 12px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); transition: transform var(--transition); }
.pillar-card:hover { transform: translateY(-4px); }
.pillar-icon-wrap { width: 56px; height: 56px; border-radius: 16px; background: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; }
.pillar-num { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--teal); background: var(--teal-light); padding: 2px 10px; border-radius: 20px; margin-bottom: 10px; }
.pillar-card h3 { margin-bottom: 10px; }
.pillar-card p { font-size: .88rem; color: var(--gray-600); line-height: 1.65; }
.pillar-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pillar-tag { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--teal-light); color: var(--teal); }

/* For/Against */
.for-against { background: var(--white); }
.for-against-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.for-card, .against-card { border-radius: var(--radius-lg); padding: 32px; }
.for-card { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.2); }
.against-card { background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.15); }
.fa-heading { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.fa-item { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--gray-700); padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.fa-item:last-child { border-bottom: none; }
.fa-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.for-card .fa-check { background: var(--success); color: var(--white); }
.against-card .fa-check { background: var(--danger); color: var(--white); }

/* Testimonials */
.testimonials-section { background: var(--gray-50); }
.testimonials-intro { text-align: center; margin-bottom: 48px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.t-stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
.t-body { font-size: .9rem; color: var(--gray-700); line-height: 1.7; font-style: italic; }
.t-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.t-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.t-name { font-weight: 700; font-size: .88rem; }
.t-info { font-size: .78rem; color: var(--gray-600); }
.t-earnings { font-size: .78rem; font-weight: 700; color: var(--teal); }

/* Pricing */
.pricing-section { background: var(--gray-50); padding: 80px 0; }
.pricing-intro { text-align: center; margin-bottom: 40px; }
.pricing-intro p { color: var(--gray-600); margin-top: 12px; }

.urgency-box { background: var(--teal); color: var(--white); border-radius: var(--radius-lg); padding: 24px 32px; margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.urgency-box-text h3 { color: var(--white); margin-bottom: 4px; font-size: 1.1rem; }
.urgency-box-text p { color: rgba(255,255,255,.8); font-size: .85rem; }
.timer-display { display: flex; gap: 12px; align-items: center; }
.timer-block { text-align: center; }
.timer-num { display: block; font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; min-width: 48px; }
.timer-label { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 4px; }
.timer-sep { font-size: 1.5rem; font-weight: 300; color: rgba(255,255,255,.5); margin-bottom: 20px; }

.spots-box { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 24px; margin-bottom: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.spots-text { font-size: .9rem; font-weight: 600; }
.spots-text strong { color: var(--danger); }
.spots-bar-wrap { flex: 1; min-width: 180px; background: var(--gray-200); border-radius: 99px; height: 8px; }
.spots-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 99px; transition: width 1s ease; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.price-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); transition: transform var(--transition); position: relative; border: 2px solid transparent; }
.price-card:hover { transform: translateY(-4px); }
.price-card.featured { border-color: var(--teal); box-shadow: 0 12px 48px rgba(1,105,111,.2); transform: translateY(-8px); }
.price-card.featured:hover { transform: translateY(-12px); }
.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--navy); font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: 5px 18px; border-radius: 20px; white-space: nowrap; }
.price-tier { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.price-card h3 { font-size: 1.2rem; margin-bottom: 16px; }
.price-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.price-current { font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--gray-800); }
.price-was { font-size: .9rem; color: var(--gray-400); text-decoration: line-through; }
.price-save { font-size: .75rem; font-weight: 700; color: var(--success); background: rgba(34,197,94,.1); padding: 3px 10px; border-radius: 20px; }
.price-period { font-size: .8rem; color: var(--gray-600); margin-bottom: 24px; }
.price-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.price-feature { display: flex; align-items: flex-start; gap: 10px; font-size: .87rem; color: var(--gray-700); }
.price-feature::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; }
.price-feature-text::before { display: none; }

/* Guarantee */
.guarantee-section { background: var(--white); text-align: center; }
.guarantee-inner { max-width: 680px; margin: 0 auto; }
.guarantee-badge { font-size: 5rem; margin-bottom: 24px; }
.guarantee-section h2 { margin-bottom: 16px; }
.guarantee-section p { color: var(--gray-600); font-size: 1rem; line-height: 1.8; max-width: 560px; margin: 0 auto 24px; }

/* FAQ */
.faq-section { background: var(--gray-50); }
.faq-intro { text-align: center; margin-bottom: 48px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { background: var(--white); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: .95rem; color: var(--gray-800); text-align: left; background: none; border: none; cursor: pointer; transition: color var(--transition); }
.faq-question:hover { color: var(--teal); }
.faq-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-light); color: var(--teal); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: transform var(--transition), background var(--transition); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--teal); color: var(--white); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-answer-inner { padding: 0 24px 20px; font-size: .9rem; color: var(--gray-600); line-height: 1.75; }

/* Final CTA */
.final-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%); color: var(--white); text-align: center; }
.final-cta h2 { color: var(--white); margin-bottom: 16px; }
.final-cta p { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 560px; margin: 0 auto 36px; }
.final-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); }
.footer-top { padding: 60px 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p { font-size: .85rem; line-height: 1.7; }
.footer-col h4 { color: var(--white); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 8px; transition: color var(--transition); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--gold); }

/* WhatsApp Float */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.whatsapp-btn { width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: transform var(--transition); animation: waPulse 2.5s ease-in-out infinite; }
.whatsapp-btn:hover { transform: scale(1.1); animation: none; }
.whatsapp-btn svg { width: 28px; height: 28px; }
.whatsapp-tooltip { background: var(--white); border-radius: var(--radius); padding: 8px 14px; font-size: .8rem; font-weight: 600; color: var(--gray-800); box-shadow: var(--shadow); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(8px); transition: all var(--transition); }
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)} 50%{box-shadow:0 4px 32px rgba(37,211,102,.7)} }

/* Sticky CTA (mobile) */
#stickyCta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: var(--gold); color: var(--navy); display: none; padding: 14px 24px; text-align: center; font-weight: 700; font-size: .95rem; opacity: 0; transform: translateY(100%); transition: opacity var(--transition), transform var(--transition); }
#stickyCta.visible { opacity: 1; transform: translateY(0); }
#stickyCta a { color: var(--navy); font-weight: 800; }

/* Toast */
#toastContainer { position: fixed; bottom: 24px; left: 24px; z-index: 850; display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.enroll-toast { background: var(--white); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: 12px; transform: translateX(-120%); opacity: 0; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.enroll-toast.show { transform: translateX(0); opacity: 1; }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast-body { display: flex; flex-direction: column; gap: 2px; }
.toast-body strong { font-size: .85rem; color: var(--gray-800); }
.toast-body span { font-size: .78rem; color: var(--gray-600); }

/* ─── CHECKOUT ─────────────────────────────────────────── */
.checkout-page { min-height: 100vh; background: var(--gray-50); padding: 40px 0 80px; }
.checkout-header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 0; margin-bottom: 40px; }
.checkout-header .nav-logo { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--teal); }
.checkout-header .nav-logo span { color: var(--gold); }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 0; }

/* Step indicator */
.step-indicators { display: flex; align-items: center; gap: 0; margin-bottom: 32px; }
.step-ind { display: flex; align-items: center; gap: 0; flex: 1; }
.step-ind:last-child { flex: 0; }
.step-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: var(--gray-400); background: var(--white); transition: all var(--transition); flex-shrink: 0; }
.step-ind.active .step-circle { border-color: var(--teal); background: var(--teal); color: var(--white); }
.step-ind.done .step-circle { border-color: var(--teal); background: var(--teal); color: var(--white); }
.step-label { font-size: .75rem; font-weight: 600; color: var(--gray-400); margin-left: 8px; white-space: nowrap; }
.step-ind.active .step-label, .step-ind.done .step-label { color: var(--teal); }
.step-line { flex: 1; height: 2px; background: var(--gray-200); margin: 0 8px; }
.step-ind.done + .step-ind .step-line { background: var(--teal); }

/* Checkout panels */
.checkout-panel { display: none; }
.checkout-panel.active { display: block; }
.checkout-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); margin-bottom: 24px; }
.checkout-card h2 { font-size: 1.3rem; margin-bottom: 8px; }
.checkout-card .subtitle { font-size: .88rem; color: var(--gray-600); margin-bottom: 28px; }

/* Package options */
.pkg-options { display: flex; flex-direction: column; gap: 12px; }
.pkg-option { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 2px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); position: relative; }
.pkg-option:hover { border-color: var(--teal); background: var(--teal-light); }
.pkg-option.selected { border-color: var(--teal); background: rgba(1,105,111,.05); }
.pkg-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-300); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.pkg-radio.active { border-color: var(--teal); background: var(--teal); }
.pkg-radio.active::after { content: ''; width: 8px; height: 8px; background: var(--white); border-radius: 50%; }
.pkg-info { flex: 1; }
.pkg-name { font-weight: 700; font-size: .95rem; }
.pkg-desc { font-size: .8rem; color: var(--gray-600); margin-top: 2px; }
.pkg-price { text-align: right; }
.pkg-price .price { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--teal); }
.pkg-price .was { font-size: .78rem; color: var(--gray-400); text-decoration: line-through; }
.pkg-popular { position: absolute; top: -10px; right: 16px; background: var(--gold); color: var(--navy); font-size: .65rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: .06em; }

/* Forms */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--gray-700); }
.form-control { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-size: .95rem; font-family: inherit; color: var(--gray-800); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); }
.form-control:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(1,105,111,.12); }
.form-group.has-error .form-control { border-color: var(--danger); }
.form-group.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.form-error-msg { font-size: .78rem; color: var(--danger); display: none; }
.form-group.has-error .form-error-msg { display: block; }
.form-hint { font-size: .75rem; color: var(--gray-400); }

/* Payment */
.pay-methods { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pay-method-tab { padding: 10px 18px; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-size: .85rem; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all var(--transition); background: var(--white); }
.pay-method-tab:hover { border-color: var(--teal); color: var(--teal); }
.pay-method-tab.active { border-color: var(--teal); background: var(--teal); color: var(--white); }
.card-brands { display: flex; gap: 8px; margin-bottom: 12px; }
.card-brand { padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: .7rem; font-weight: 800; color: var(--gray-400); transition: all var(--transition); }
.card-brand.active { border-color: var(--teal); color: var(--teal); }
#cardInputGroup { display: grid; grid-template-columns: 1fr; border: 1.5px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; }
.card-row { display: grid; grid-template-columns: 1fr 1fr; }
.card-field { padding: 12px 16px; border: none; border-top: 1px solid var(--gray-200); font-size: .95rem; font-family: inherit; color: var(--gray-800); background: var(--white); width: 100%; }
.card-field:first-child { border-top: none; }
.card-field:focus { outline: none; background: var(--gray-50); }
.card-row .card-field + .card-field { border-left: 1px solid var(--gray-200); }
.card-number-field { padding: 14px 16px; border: none; font-size: .95rem; font-family: 'Courier New', monospace; letter-spacing: .08em; width: 100%; color: var(--gray-800); background: var(--white); }
.card-number-field:focus { outline: none; background: var(--gray-50); }
.upi-hint { font-size: .82rem; color: var(--gray-600); margin-bottom: 12px; }
.upi-apps { display: flex; gap: 10px; margin-top: 12px; }
.upi-app { padding: 8px 14px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: .8rem; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all var(--transition); }
.upi-app:hover { border-color: var(--teal); color: var(--teal); }
.netbanking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bank-btn { padding: 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--gray-700); cursor: pointer; text-align: center; transition: all var(--transition); background: var(--white); }
.bank-btn:hover { border-color: var(--teal); background: var(--teal-light); color: var(--teal); }
.card-error { font-size: .82rem; color: var(--danger); margin-top: 8px; display: none; }
.security-note { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--gray-600); margin-top: 12px; background: var(--gray-50); padding: 10px 14px; border-radius: 8px; }

/* Checkout Sidebar */
.checkout-sidebar { position: sticky; top: 128px; }
.sidebar-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.sidebar-card h3 { font-size: 1rem; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.cs-pkg { margin-bottom: 16px; }
.cs-pkg-name { font-weight: 700; font-size: .95rem; }
.cs-pkg-desc { font-size: .8rem; color: var(--gray-600); margin-top: 4px; }
.cs-features { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.cs-feature { font-size: .8rem; color: var(--gray-600); display: flex; gap: 6px; align-items: center; }
.cs-feature::before { content: '✓'; color: var(--teal); font-weight: 800; font-size: .75rem; }
.cs-pricing { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cs-row { display: flex; justify-content: space-between; align-items: center; font-size: .87rem; }
.cs-original { color: var(--gray-400); text-decoration: line-through; }
.cs-discount { color: var(--success); font-weight: 600; }
.cs-total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 2px solid var(--gray-200); }
.cs-total-label { font-weight: 700; }
.cs-total-price { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--teal); }
.sidebar-timer { font-size: .78rem; color: var(--gray-600); text-align: center; padding-top: 12px; }
.sidebar-timer strong { color: var(--danger); }
.sidebar-badges { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.sidebar-badge { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--gray-600); }

/* Processing overlay */
#processingOverlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15,22,35,.85); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
#processingOverlay.show { opacity: 1; pointer-events: all; }
.processing-spinner { width: 64px; height: 64px; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#processingText { color: var(--white); font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 700; text-align: center; }
#processingSub { color: rgba(255,255,255,.6); font-size: .88rem; text-align: center; }

/* Success panel */
.success-panel { text-align: center; padding: 48px 0; }
.success-icon { font-size: 5rem; margin-bottom: 24px; animation: popIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-panel h2 { color: var(--teal); margin-bottom: 12px; }
.success-panel p { color: var(--gray-600); font-size: .95rem; max-width: 480px; margin: 0 auto 8px; }
.success-panel em { color: var(--gray-800); font-style: normal; font-weight: 600; }
.success-steps { background: var(--teal-light); border-radius: var(--radius-lg); padding: 24px 32px; margin: 32px auto; max-width: 480px; text-align: left; }
.success-steps h4 { color: var(--teal); margin-bottom: 16px; font-size: .95rem; }
.success-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: .88rem; color: var(--gray-700); }
.success-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.confetti-canvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-4px); }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-sidebar { position: static; }
}
@media (max-width: 768px) {
  body { padding-top: 104px; }
  #navToggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: stretch; padding: 16px 24px 24px; gap: 0; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { margin-top: 8px; text-align: center; padding: 12px 0 !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item + .stat-item:nth-child(odd) { border-left: none; }
  .pain-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .for-against-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .urgency-box { flex-direction: column; text-align: center; }
  .hero-inner { align-items: center; text-align: center; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; }
  #stickyCta { display: block; }
  .form-row { grid-template-columns: 1fr; }
  .netbanking-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .timer-display { gap: 6px; }
  .timer-num { font-size: 1.6rem; min-width: 38px; }
  .hero-ctas .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .step-label { display: none; }
}

/* ─── SCROLL ANIMATIONS ────────────────────────────────── */
.js-anim .reveal { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .65s ease; }
.js-anim .reveal.visible { opacity: 1; transform: translateY(0); }
.js-anim .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .65s ease, transform .65s ease; }
.js-anim .reveal-left.visible { opacity: 1; transform: translateX(0); }
.js-anim .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .65s ease, transform .65s ease; }
.js-anim .reveal-right.visible { opacity: 1; transform: translateX(0); }
.js-anim .reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .55s ease, transform .55s ease; }
.js-anim .reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger children */
.js-anim .stagger-children > * { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.js-anim .stagger-children.visible > *:nth-child(1) { opacity:1;transform:translateY(0);transition-delay:.05s }
.js-anim .stagger-children.visible > *:nth-child(2) { opacity:1;transform:translateY(0);transition-delay:.15s }
.js-anim .stagger-children.visible > *:nth-child(3) { opacity:1;transform:translateY(0);transition-delay:.25s }
.js-anim .stagger-children.visible > *:nth-child(4) { opacity:1;transform:translateY(0);transition-delay:.35s }
.js-anim .stagger-children.visible > *:nth-child(5) { opacity:1;transform:translateY(0);transition-delay:.45s }
.js-anim .stagger-children.visible > *:nth-child(6) { opacity:1;transform:translateY(0);transition-delay:.55s }

/* ─── PULSING CTA ──────────────────────────────────────── */
.btn-pulse { animation: btnPulse 2.8s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,160,23,.5)} 50%{box-shadow:0 0 0 14px rgba(212,160,23,0)} }

/* ─── ANIMATED COUNTER ─────────────────────────────────── */
.stat-number { transition: color .3s ease; }

/* ─── FLOATING BADGE ───────────────────────────────────── */
.float-badge { animation: floatBadge 3.5s ease-in-out infinite; }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ─── SCROLL PROGRESS BAR ──────────────────────────────── */
#scrollProgress { position: fixed; top: 40px; left: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--gold)); z-index: 1001; width: 0%; transition: width .1s linear; }

/* ─── LIVE ACTIVITY TICKER ─────────────────────────────── */
.activity-ticker { background: var(--navy); color: rgba(255,255,255,.85); padding: 12px 0; overflow: hidden; position: relative; }
.activity-ticker::before,.activity-ticker::after { content:''; position:absolute;top:0;bottom:0;width:80px;z-index:1; }
.activity-ticker::before { left:0; background:linear-gradient(90deg,var(--navy),transparent); }
.activity-ticker::after { right:0; background:linear-gradient(270deg,var(--navy),transparent); }
.ticker-track { display:flex; gap:48px; animation: ticker 30s linear infinite; white-space: nowrap; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display:flex; align-items:center; gap:8px; font-size:.82rem; }
.ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--success); flex-shrink:0; animation: tickerDot 2s ease-in-out infinite; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tickerDot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─── GUARANTEE BADGE FLOAT ────────────────────────────── */
.guarantee-badge { animation: floatBadge 4s ease-in-out infinite; display: inline-block; }

/* ─── HIGHLIGHTED TEXT UNDERLINE ANIM ─────────────────── */
.highlight-ul { transition: background-size 1s ease; }
.js-anim .highlight-ul { background: linear-gradient(120deg, rgba(212,160,23,.3) 0%, rgba(212,160,23,.3) 100%) no-repeat 0 90% / 0% 30%; }
.highlight-ul.visible { background-size: 100% 30%; }

/* ─── SOCIAL PROOF TICKER (pricing section) ───────────── */
.proof-ping { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--gray-600); padding:8px 0; border-bottom:1px solid var(--gray-100); }
.proof-ping:last-child { border-bottom:none; }
.proof-ping-dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }

/* ─── PRICE CARD SHIMMER (featured) ───────────────────── */
.price-card.featured::after { content:''; position:absolute; inset:0; border-radius:var(--radius-lg); background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%); background-size:200% 200%; animation:shimmer 3s ease-in-out infinite; pointer-events:none; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── MOBILE STICKY CTA PULSE ──────────────────────────── */
#stickyCta.visible { animation: stickyPulse 3s ease-in-out infinite; }
@keyframes stickyPulse { 0%,100%{background:var(--gold)} 50%{background:var(--gold-light)} }

/* ─── PHOTO SECTIONS ────────────────────────────────────── */

/* Solution bridge with image */
.solution-bridge { background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%); color: var(--white); }
.solution-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.solution-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.solution-text h2 { color: var(--white); }
.solution-text p { color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.75; }
.solution-photo-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.solution-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.solution-photo-wrap:hover img { transform: scale(1.04); }
.solution-photo-label { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(15,22,35,.85); color: var(--white); border-radius: var(--radius); padding: 10px 16px; font-size: .82rem; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); }
.solution-photo-label strong { color: var(--gold); }

/* Featured testimonial with photo */
.testimonial-featured { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; margin-bottom: 48px; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.testimonial-featured-img { position: relative; height: 320px; overflow: hidden; }
.testimonial-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.testimonial-featured:hover .testimonial-featured-img img { transform: scale(1.04); }
.testimonial-featured-body { padding: 32px 40px 32px 0; display: flex; flex-direction: column; gap: 16px; }
.testimonial-featured-body .t-stars { font-size: 1.1rem; }
.testimonial-featured-body blockquote { font-size: 1rem; color: var(--gray-700); line-height: 1.8; font-style: italic; }
.testimonial-featured-body .t-name { font-weight: 700; font-size: .95rem; color: var(--gray-800); }
.testimonial-featured-body .t-info { font-size: .82rem; color: var(--gray-600); }
.testimonial-featured-body .t-earnings { font-size: .88rem; font-weight: 700; color: var(--teal); }
.testimonial-featured-label { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: var(--teal-light); padding: 4px 12px; border-radius: 20px; }

/* Tools/workspace photo section */
.tools-section { background: var(--gray-50); }
.tools-split { display: grid; grid-template-columns: 1fr 480px; gap: 56px; align-items: center; }
.tools-photo-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.tools-photo-wrap img { width: 100%; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tools-photo-wrap:hover img { transform: scale(1.03); }
.tools-text { display: flex; flex-direction: column; gap: 20px; }
.tools-text h2 { margin-bottom: 0; }
.tools-text p { color: var(--gray-600); line-height: 1.75; }
.tools-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.tools-list-item { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--gray-700); }
.tools-list-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.tools-list-item:hover .tools-list-icon { transform: scale(1.2) rotate(-8deg); }

/* Hover lift utility */
.hover-lift { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ─── LIVE MICRO-INTERACTIONS ────────────────────────────
   Pattern: idle animation always running (element always alive)
   hover / .active (touch): switches to more energetic keyframe
   Negative delays stagger siblings so they never sync
────────────────────────────────────────────────────────── */

/* ── Keyframes ── */
@keyframes emojiFloat  { 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 40%{transform:translateY(-7px) rotate(9deg) scale(1.12)} 70%{transform:translateY(-3px) rotate(-4deg) scale(1.06)} }
@keyframes emojiDance  { 0%,100%{transform:translateY(0) scale(1.4) rotate(-12deg)} 25%{transform:translateY(-10px) scale(1.5) rotate(12deg)} 50%{transform:translateY(2px) scale(1.28) rotate(-6deg)} 75%{transform:translateY(-7px) scale(1.44) rotate(7deg)} }
@keyframes iconFloat   { 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 50%{transform:translateY(-7px) rotate(6deg) scale(1.07)} }
@keyframes iconDance   { 0%,100%{transform:scale(1.25) rotate(-10deg) translateY(0)} 33%{transform:scale(1.35) rotate(10deg) translateY(-6px)} 66%{transform:scale(1.18) rotate(-5deg) translateY(3px)} }
@keyframes toolsWobble { 0%,100%{transform:rotate(0deg) scale(1)} 25%{transform:rotate(-9deg) scale(1.06)} 75%{transform:rotate(9deg) scale(1.06)} }
@keyframes toolsDance  { 0%,100%{transform:rotate(-14deg) scale(1.28)} 50%{transform:rotate(14deg) scale(1.35)} }
@keyframes avatarBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes avatarBounce  { 0%,100%{transform:scale(1.18) translateY(0)} 50%{transform:scale(1.1) translateY(-6px)} }
@keyframes checkPulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes checkBounce { 0%,20%{transform:scale(1.35) rotate(0deg)} 40%{transform:scale(.82) rotate(22deg)} 60%{transform:scale(1.28) rotate(-12deg)} 80%{transform:scale(.96) rotate(6deg)} 100%{transform:scale(1.35) rotate(0deg)} }
@keyframes statBreath  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes statPop     { 0%,100%{transform:scale(1.1);color:var(--gold)} 50%{transform:scale(1.18);color:var(--gold-light)} }
@keyframes labelFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes badgeBounce { 0%,100%{top:-14px} 50%{top:-20px} }
@keyframes pricePulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes priceActive { 0%,100%{transform:scale(1.1);color:var(--teal)} 50%{transform:scale(1.18);color:var(--teal-dark)} }
@keyframes faqIconSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes guaranteePop { 0%,100%{transform:scale(1)} 30%{transform:scale(1.3) rotate(-8deg)} 60%{transform:scale(.9) rotate(4deg)} 80%{transform:scale(1.1)} }
@keyframes waWiggle    { 0%,100%{transform:rotate(0deg) scale(1)} 20%{transform:rotate(-15deg) scale(1.1)} 40%{transform:rotate(10deg) scale(1.15)} 60%{transform:rotate(-8deg) scale(1.1)} 80%{transform:rotate(5deg) scale(1.05)} }

/* ── Pain emojis: always floating, dance on hover/touch ── */
.pain-emoji { display: inline-block; animation: emojiFloat 2.8s ease-in-out infinite; }
.pain-card:nth-child(2) .pain-emoji { animation-delay: -.55s; }
.pain-card:nth-child(3) .pain-emoji { animation-delay: -1.1s; }
.pain-card:nth-child(4) .pain-emoji { animation-delay: -1.65s; }
.pain-card:nth-child(5) .pain-emoji { animation-delay: -2.2s; }
.pain-card:nth-child(6) .pain-emoji { animation-delay: -.35s; }
.pain-card:hover .pain-emoji,
.pain-card.active .pain-emoji { animation: emojiDance .55s ease-in-out infinite; }
.pain-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.pain-card:hover, .pain-card.active { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow); }

/* ── Pillar icons: always floating, spin on hover/touch ── */
.pillar-icon-wrap { animation: iconFloat 3s ease-in-out infinite; }
.pillar-card:nth-child(2) .pillar-icon-wrap { animation-delay: -.6s; }
.pillar-card:nth-child(3) .pillar-icon-wrap { animation-delay: -1.2s; }
.pillar-card:nth-child(4) .pillar-icon-wrap { animation-delay: -1.8s; }
.pillar-card:nth-child(5) .pillar-icon-wrap { animation-delay: -.9s; }
.pillar-card:nth-child(6) .pillar-icon-wrap { animation-delay: -2.4s; }
.pillar-card:hover .pillar-icon-wrap,
.pillar-card.active .pillar-icon-wrap { animation: iconDance .6s ease-in-out infinite; box-shadow: 0 8px 24px rgba(1,105,111,.4); }

/* ── Tools list icons: always wobbling, faster on hover ── */
.tools-list-icon { animation: toolsWobble 2.5s ease-in-out infinite; }
.tools-list-item:nth-child(2) .tools-list-icon { animation-delay: -.65s; }
.tools-list-item:nth-child(3) .tools-list-icon { animation-delay: -1.3s; }
.tools-list-item:nth-child(4) .tools-list-icon { animation-delay: -1.95s; }
.tools-list-item:hover .tools-list-icon,
.tools-list-item.active .tools-list-icon { animation: toolsDance .45s ease-in-out infinite; }

/* ── Stat numbers: breathe continuously, pop on hover ─── */
.stat-number { display: inline-block; animation: statBreath 3s ease-in-out infinite; }
.stat-item:nth-child(2) .stat-number { animation-delay: -.75s; }
.stat-item:nth-child(3) .stat-number { animation-delay: -1.5s; }
.stat-item:nth-child(4) .stat-number { animation-delay: -2.25s; }
.stat-item:hover .stat-number,
.stat-item.active .stat-number { animation: statPop .7s ease-in-out infinite; }
.stat-item { transition: transform .25s ease; }
.stat-item:hover, .stat-item.active { transform: translateY(-4px); }

/* ── Testimonial avatars: breathe, bounce on hover ─────── */
.t-avatar { animation: avatarBreathe 2.5s ease-in-out infinite; }
.testimonial-card:nth-child(2) .t-avatar { animation-delay: -.5s; }
.testimonial-card:nth-child(3) .t-avatar { animation-delay: -1s; }
.testimonial-card:nth-child(4) .t-avatar { animation-delay: -1.5s; }
.testimonial-card:nth-child(5) .t-avatar { animation-delay: -2s; }
.testimonial-card:nth-child(6) .t-avatar { animation-delay: -.75s; }
.testimonial-card:hover .t-avatar,
.testimonial-card.active .t-avatar { animation: avatarBounce .55s ease-in-out infinite; box-shadow: 0 4px 16px rgba(1,105,111,.3); }
.testimonial-card { transition: transform .25s ease, box-shadow .25s ease; }
.testimonial-card:hover, .testimonial-card.active { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(1,105,111,.14); }

/* ── Price current: breathe, pop on hover ───────────────── */
.price-current { display: inline-block; animation: pricePulse 3.5s ease-in-out infinite; }
.price-card:nth-child(2) .price-current { animation-delay: -1.2s; }
.price-card:nth-child(3) .price-current { animation-delay: -2.4s; }
.price-card:hover .price-current,
.price-card.active .price-current { animation: priceActive .7s ease-in-out infinite; }

/* ── Popular badge: continuous bounce ─────────────────── */
.popular-badge { animation: badgeBounce 2s ease-in-out infinite; position: absolute; }

/* ── For/against checks: pulse, elastic on hover ───────── */
.fa-check { animation: checkPulse 2.8s ease-in-out infinite; }
.for-card .fa-item:nth-child(2) .fa-check { animation-delay: -.5s; }
.for-card .fa-item:nth-child(3) .fa-check { animation-delay: -1s; }
.for-card .fa-item:nth-child(4) .fa-check { animation-delay: -1.5s; }
.for-card .fa-item:nth-child(5) .fa-check { animation-delay: -2s; }
.against-card .fa-item:nth-child(2) .fa-check { animation-delay: -.4s; }
.against-card .fa-item:nth-child(3) .fa-check { animation-delay: -.8s; }
.against-card .fa-item:nth-child(4) .fa-check { animation-delay: -1.2s; }
.fa-item:hover .fa-check,
.fa-item.active .fa-check { animation: checkBounce .55s cubic-bezier(.22,1,.36,1) infinite; }

/* ── Section labels: always floating ───────────────────── */
.section-label { display: inline-block; animation: labelFloat 3s ease-in-out infinite; }

/* ── FAQ icon: slow spin at rest, jump to 45° when open ── */
.faq-icon { animation: faqIconSpin 8s linear infinite; }
.faq-item.open .faq-icon { animation: none; transform: rotate(45deg); background: var(--teal); color: var(--white); }
.faq-question:hover .faq-icon { animation-duration: 2s; }

/* ── Guarantee badge: hover kicks off pop ───────────────── */
.guarantee-section:hover .guarantee-badge,
.guarantee-section .guarantee-badge:hover { animation: guaranteePop .5s cubic-bezier(.22,1,.36,1) infinite; }

/* ── WhatsApp: wiggle instead of scale on hover ─────────── */
.whatsapp-btn:hover,
.whatsapp-btn.active { animation: waWiggle .5s ease-in-out infinite !important; }

/* ── Bonus icons: float + dance on touch ─────────────────── */
.bonus-icon { display: inline-block; animation: emojiFloat 3s ease-in-out infinite; }
.bonus-card:nth-child(2) .bonus-icon { animation-delay: -.6s; }
.bonus-card:nth-child(3) .bonus-icon { animation-delay: -1.2s; }
.bonus-card:nth-child(4) .bonus-icon { animation-delay: -1.8s; }
.bonus-card:nth-child(5) .bonus-icon { animation-delay: -.9s; }
.bonus-card:nth-child(6) .bonus-icon { animation-delay: -2.4s; }
.bonus-card:hover .bonus-icon,
.bonus-card.active .bonus-icon { animation: emojiDance .5s ease-in-out infinite; }

/* ── Creator achievements: pulse on hover ──────────────────── */
.creator-achievement { transition: transform .25s ease, box-shadow .25s ease; }
.creator-achievement:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(1,105,111,.1); }
.ca-icon { display: inline-block; animation: emojiFloat 3.2s ease-in-out infinite; }
.creator-achievement:nth-child(2) .ca-icon { animation-delay: -.8s; }
.creator-achievement:nth-child(3) .ca-icon { animation-delay: -1.6s; }
.creator-achievement:hover .ca-icon,
.creator-achievement.active .ca-icon { animation: emojiDance .5s ease-in-out infinite; }

/* ── Nav logo ────────────────────────────────────────────── */
.nav-logo span { transition: color .2s ease; }
.nav-logo:hover span { color: var(--teal-dark); }

/* ── Footer links ────────────────────────────────────────── */
.footer-col a { transition: color .2s ease, padding-left .2s ease; }
.footer-col a:hover { color: var(--gold); padding-left: 6px; }

/* ── Ticker item ─────────────────────────────────────────── */
.ticker-item { transition: color .2s ease; }
.ticker-item:hover { color: var(--gold); }

/* ── Photo hover zoom ────────────────────────────────────── */
.photo-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.photo-zoom img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.photo-zoom:hover img { transform: scale(1.05); }
.solution-photo-wrap:hover img,
.tools-photo-wrap:hover img,
.testimonial-featured:hover .testimonial-featured-img img { transform: scale(1.04); }

/* ── Accessibility: respect reduced-motion preference ────── */
/* Suppress idle background animations, but PRESERVE .active tap feedback
   so interactive elements still respond on devices with Reduce Motion on. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Restore tap/touch interaction feedback — overrides the blanket above */
  .active, .active * {
    animation-duration: .45s !important;
    animation-iteration-count: 3 !important;
    transition-duration: .2s !important;
  }
}

/* ─── RESPONSIVE UPDATES FOR NEW SECTIONS ─────────────── */
@media (max-width: 1024px) {
  .solution-split { grid-template-columns: 1fr; gap: 36px; }
  .testimonial-featured { grid-template-columns: 1fr; }
  .testimonial-featured-img { height: 280px; }
  .testimonial-featured-body { padding: 28px; }
  .tools-split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .testimonial-featured-body { padding: 20px; }
  .solution-photo-wrap { max-height: 240px; }
  .solution-photo-wrap img { object-position: center 20%; }
}

/* ═══════════════════════════════════════════════════════════
   CRO EXPANSION — NEW SECTIONS
═══════════════════════════════════════════════════════════ */

/* ─── Creator / Authority Section ─────────────────────── */
.creator-section { background: var(--white); }
.creator-grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.creator-img-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.18); position: relative; }
.creator-img-wrap img { width: 100%; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.creator-img-wrap:hover img { transform: scale(1.04); }
.creator-social-proof { display: flex; gap: 0; margin-top: 20px; background: var(--navy); border-radius: var(--radius); overflow: hidden; }
.csp-item { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid rgba(255,255,255,.08); }
.csp-item:last-child { border-right: none; }
.csp-num { display: block; font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--gold); line-height: 1; }
.csp-label { display: block; font-size: .68rem; color: rgba(255,255,255,.6); margin-top: 4px; }
.creator-content { display: flex; flex-direction: column; gap: 20px; }
.creator-content h2 em { font-style: normal; color: var(--teal); }
.creator-content h2 { margin-bottom: 0; }
.creator-story p { font-size: .95rem; color: var(--gray-600); line-height: 1.8; }
.creator-story p + p { margin-top: 14px; }
.creator-story strong { color: var(--gray-800); }
.creator-achievements { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.creator-achievement { display: flex; align-items: flex-start; gap: 12px; background: var(--gray-50); border-radius: var(--radius); padding: 14px 18px; border-left: 3px solid var(--teal); }
.ca-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; }
.creator-achievement strong { color: var(--teal); font-size: .9rem; display: block; }
.creator-achievement div { font-size: .85rem; color: var(--gray-600); line-height: 1.5; }

/* ─── Curriculum Section ───────────────────────────────── */
.curriculum-section { background: var(--gray-50); }
.curriculum-header { text-align: center; margin-bottom: 48px; }
.curriculum-header p { color: var(--gray-600); margin-top: 12px; }
.curriculum-modules { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.curr-module { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--gray-200); transition: box-shadow var(--transition); }
.curr-module:hover { box-shadow: 0 6px 32px rgba(1,105,111,.12); }
.curr-module-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; user-select: none; }
.curr-num { flex-shrink: 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--teal); background: var(--teal-light); padding: 3px 12px; border-radius: 20px; white-space: nowrap; }
.curr-title { flex: 1; font-weight: 700; font-size: .98rem; color: var(--gray-800); }
.curr-toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-light); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; transition: transform var(--transition), background var(--transition); }
.curr-module.open .curr-toggle { transform: rotate(45deg); background: var(--teal); color: var(--white); }
.curr-module-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.curr-module-body ul { padding: 0 24px 20px 24px; display: flex; flex-direction: column; gap: 0; }
.curr-module-body li { font-size: .87rem; color: var(--gray-600); padding: 8px 0; border-bottom: 1px solid var(--gray-100); display: flex; align-items: flex-start; gap: 10px; }
.curr-module-body li:last-child { border-bottom: none; }
.curr-module-body li::before { content: '→'; color: var(--teal); font-weight: 700; flex-shrink: 0; }
.curriculum-cta { text-align: center; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.curriculum-cta-sub { font-size: .8rem; color: var(--gray-500); }

/* ─── Bonus Stack Section ──────────────────────────────── */
.bonus-section { background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%); color: var(--white); }
.bonus-header { text-align: center; margin-bottom: 48px; }
.bonus-header h2 { color: var(--white); }
.bonus-header h2 em { font-style: normal; color: var(--gold); }
.bonus-header p { color: rgba(255,255,255,.75); margin-top: 12px; }
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bonus-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 28px; transition: background var(--transition), transform var(--transition); }
.bonus-card:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.bonus-icon { font-size: 2rem; margin-bottom: 12px; }
.bonus-value { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; }
.bonus-value-total { background: var(--gold-light); font-size: .8rem; }
.bonus-card h3 { color: var(--white); font-size: 1rem; margin-bottom: 8px; }
.bonus-card p { color: rgba(255,255,255,.7); font-size: .85rem; line-height: 1.65; }
.featured-bonus { background: rgba(212,160,23,.12); border-color: rgba(212,160,23,.35); }

/* ─── Comparison Table ─────────────────────────────────── */
.comparison-section { background: var(--white); }
.comparison-header { text-align: center; margin-bottom: 48px; }
.comparison-header h2 em { font-style: normal; color: var(--teal); }
.comparison-header p { color: var(--gray-600); margin-top: 12px; }
.comparison-table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.comparison-table thead th { padding: 14px 16px; font-size: .8rem; font-weight: 700; text-align: center; background: var(--gray-50); border-bottom: 2px solid var(--gray-200); }
.comparison-table thead th:first-child { text-align: left; }
.comparison-table thead th.col-stu { background: var(--teal); color: var(--white); border-radius: 0; }
.comparison-table tbody td { padding: 13px 16px; font-size: .85rem; border-bottom: 1px solid var(--gray-100); text-align: center; vertical-align: middle; }
.comparison-table tbody td:first-child { text-align: left; font-weight: 500; color: var(--gray-700); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--gray-50); }
.comparison-table .col-stu { background: rgba(1,105,111,.04); }
.ct-yes { color: var(--teal); font-weight: 700; }
.ct-no { color: var(--danger); }
.ct-partial { color: var(--gold); font-weight: 600; }

/* ─── ROI Section ──────────────────────────────────────── */
.roi-section { background: var(--gray-50); }
.roi-inner { max-width: 900px; margin: 0 auto; }
.roi-header { text-align: center; margin-bottom: 48px; }
.roi-header h2 em { font-style: normal; color: var(--teal); }
.roi-header p { color: var(--gray-600); margin-top: 12px; }
.roi-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-bottom: 36px; }
.roi-arrow { font-size: 2.5rem; color: var(--teal); font-weight: 700; text-align: center; }
.roi-col { border-radius: var(--radius-lg); padding: 28px; }
.roi-before { background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.15); }
.roi-after { background: rgba(34,197,94,.05); border: 1px solid rgba(34,197,94,.2); }
.roi-col-label { font-weight: 700; font-size: .9rem; margin-bottom: 18px; }
.roi-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: .83rem; }
.roi-item:last-child { border-bottom: none; }
.roi-label { color: var(--gray-600); }
.roi-val { font-weight: 700; text-align: right; font-size: .82rem; }
.roi-val-bad { color: var(--danger); }
.roi-val-good { color: var(--success); }
.roi-bottom { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.roi-callout { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 24px; max-width: 600px; font-size: .9rem; color: var(--gray-700); line-height: 1.7; border-left: 4px solid var(--teal); }
.roi-callout strong { color: var(--teal); }

/* ─── Viewer Count Bar ─────────────────────────────────── */
.viewer-count { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--gray-600); font-weight: 500; margin-bottom: 20px; }
.viewer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; animation: viewerPulse 1.5s ease-in-out infinite; }
@keyframes viewerPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

/* ─── UPI Payment Badges ───────────────────────────────── */
.upi-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.upi-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--gray-200); color: var(--gray-600); background: var(--white); }
.upi-badge-upi  { border-color: rgba(1,105,111,.25); color: var(--teal); }
.upi-badge-gpay { border-color: rgba(66,133,244,.3); color: #4285f4; }
.upi-badge-pp   { border-color: rgba(80,0,130,.2); color: #500082; }
.upi-badge-net  { border-color: var(--gray-300); color: var(--gray-600); }
.emi-note { font-size: .75rem; color: var(--gray-500); margin-top: 8px; }
.emi-note strong { color: var(--teal); }

/* ─── Objection Handler ────────────────────────────────── */
.objection-section { background: var(--gray-50); }
.objection-header { text-align: center; margin-bottom: 48px; }
.objection-header p { color: var(--gray-600); margin-top: 12px; }
.objection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
.objection-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); border-top: 3px solid var(--teal); }
.obj-q { font-weight: 700; font-size: .95rem; color: var(--gray-800); margin-bottom: 14px; line-height: 1.45; }
.obj-a p { font-size: .87rem; color: var(--gray-600); line-height: 1.75; }
.obj-proof { margin-top: 14px; padding: 10px 14px; background: var(--teal-light); border-radius: 8px; font-size: .78rem; color: var(--teal); font-weight: 600; }

/* ─── What Happens Next / Timeline ────────────────────── */
.next-section { background: var(--white); }
.next-header { text-align: center; margin-bottom: 48px; }
.next-header p { color: var(--gray-600); margin-top: 12px; }
.next-timeline { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; position: relative; }
.next-timeline::before { content: ''; position: absolute; left: 60px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--teal), var(--gold)); opacity: .3; }
.next-step { display: flex; gap: 24px; align-items: flex-start; padding: 24px 0; }
.next-step-num { flex-shrink: 0; width: 80px; text-align: center; font-family: 'Poppins', sans-serif; font-size: .75rem; font-weight: 800; color: var(--teal); background: var(--teal-light); padding: 6px 10px; border-radius: var(--radius); position: relative; z-index: 1; }
.next-step-gold .next-step-num { color: var(--navy); background: var(--gold); }
.next-step-content { flex: 1; background: var(--gray-50); border-radius: var(--radius); padding: 20px 24px; border: 1px solid var(--gray-200); }
.next-step-content h3 { font-size: 1rem; margin-bottom: 8px; color: var(--gray-800); }
.next-step-content p { font-size: .87rem; color: var(--gray-600); line-height: 1.7; }
.next-step-gold .next-step-content { background: rgba(212,160,23,.06); border-color: rgba(212,160,23,.25); }
.next-step-gold .next-step-content h3 { color: var(--teal); }

/* ─── Exit Intent Popup ────────────────────────────────── */
.exit-popup-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15,22,35,.75); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; }
.exit-popup-overlay.visible { opacity: 1; }
.exit-popup { background: var(--white); border-radius: var(--radius-lg); padding: 40px 36px; max-width: 440px; width: 100%; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,.3); transform: scale(.92); transition: transform .3s cubic-bezier(.22,1,.36,1); text-align: center; }
.exit-popup-overlay.visible .exit-popup { transform: scale(1); }
.exit-popup-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--gray-100); color: var(--gray-600); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background var(--transition); }
.exit-popup-close:hover { background: var(--gray-200); }
.exit-popup-emoji { font-size: 3rem; margin-bottom: 16px; }
.exit-popup h3 { font-size: 1.4rem; color: var(--gray-800); margin-bottom: 14px; }
.exit-popup p { font-size: .9rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 10px; }
.exit-popup p strong { color: var(--teal); }
.exit-popup-sub { font-size: .78rem !important; color: var(--gray-400) !important; }
.exit-popup-form { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 16px; }
.exit-email-input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-size: .95rem; font-family: inherit; color: var(--gray-800); transition: border-color var(--transition); }
.exit-email-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(1,105,111,.1); }
.exit-popup-cta-alt { font-size: .82rem; color: var(--gray-500); }
.exit-popup-cta-alt a { color: var(--teal); font-weight: 600; text-decoration: underline; }

/* ─── Social Proof Thumbnails (Screenshot Wall) ────────── */
.proof-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.proof-thumb { border-radius: var(--radius); overflow: hidden; background: var(--gray-100); aspect-ratio: 4/3; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); }
.proof-thumb-inner { text-align: center; padding: 16px; }
.proof-thumb-amount { font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--teal); }
.proof-thumb-label { font-size: .72rem; color: var(--gray-500); margin-top: 4px; }
.proof-thumb-platform { font-size: .65rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }

/* ─── WhatsApp inline CTA ──────────────────────────────── */
.wa-inline { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: var(--white); padding: 14px 24px; border-radius: var(--radius); font-weight: 700; font-size: .95rem; transition: background var(--transition), transform var(--transition); }
.wa-inline:hover { background: #20bf5a; transform: translateY(-2px); }
.wa-inline svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ─── Section CTA row (reusable) ───────────────────────── */
.section-cta-row { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* ═══════════════════════════════════════════════════════════
   CRO RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .creator-grid { grid-template-columns: 1fr; gap: 40px; }
  .creator-img-wrap { max-width: 420px; margin: 0 auto; }
  .bonus-grid { grid-template-columns: 1fr 1fr; }
  .roi-grid { grid-template-columns: 1fr; gap: 16px; }
  .roi-arrow { transform: rotate(90deg); font-size: 2rem; }
}
@media (max-width: 768px) {
  .objection-grid { grid-template-columns: 1fr; }
  .comparison-table { font-size: .8rem; }
  .proof-wall { grid-template-columns: repeat(2, 1fr); }
  .bonus-grid { grid-template-columns: 1fr; }
  .creator-social-proof { flex-wrap: wrap; }
  .csp-item { min-width: 30%; }
  .next-timeline::before { display: none; }
  .next-step { flex-direction: column; gap: 10px; }
  .next-step-num { width: auto; display: inline-block; }
  .exit-popup { padding: 32px 24px; }
}