/* =====================================================================
   SocialBoostPlus - global.css
   Shared styles across all frontend pages.
   Page-specific styles live in each page's own <style> block.
   ===================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { background: #f8f9ff; color: #0b1c30; overflow-x: hidden; }
::-webkit-scrollbar { width: 0; }

/* ---- Professional text wrapping: no orphaned single words, balanced headline breaks ---- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote, dd, figcaption { text-wrap: pretty; }

/* ---- Custom line spacing (own rules, applies to all front-end pages, mobile + desktop) ---- */
h1, h2, h3, h4 { line-height: 1.6 !important; }
p, li, blockquote { line-height: 1.9 !important; }

/* ---- Accessibility: skip link ---- */
.skip-link { position:absolute;top:-100px;left:16px;z-index:10000;padding:10px 22px;background:#e11d48;color:#fff;font-weight:700;font-size:14px;border-radius:0 0 14px 14px;text-decoration:none;transition:top .2s ease;white-space:nowrap; }
.skip-link:focus { top:0; }

/* ---- Accessibility: visible focus ring ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid #e11d48;outline-offset:3px;border-radius:4px; }

/* ---- Scroll progress ---- */
#progress-bar { position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#e11d48,#b80035);z-index:9999;width:0%;transition:width .1s linear; }

/* ---- Scroll to top ---- */
#scroll-top { position:fixed;bottom:28px;right:24px;z-index:99;width:44px;height:44px;border-radius:50%;background:#e11d48;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(225,29,72,.45);opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;pointer-events:none; }
#scroll-top:hover { background:#b80035;transform:translateY(-2px); }

/* ---- Nav ---- */
.nav-link { position:relative;color:#3d5166;font-weight:600;font-size:14px;transition:color .2s;text-decoration:none; }
.nav-link::after { content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#e11d48;border-radius:2px;transition:width .25s ease; }
.nav-link:hover { color:#0b1c30; }
.nav-link:hover::after { width:100%; }

/* ---- Mobile nav drawer (shared across all pages) ---- */
#mobile-nav { transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1); }
#mobile-nav.open { transform:translateX(0); }
#nav-overlay { opacity:0;pointer-events:none;transition:opacity .3s; }
#nav-overlay.open { opacity:1;pointer-events:all; }

/* ---- Theme toggle ---- */
#theme-toggle:hover { background:rgba(14,29,48,.07) !important; }

/* ---- Scroll animations ---- */
.reveal { opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1;transform:none; }
.reveal-left { opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible { opacity:1;transform:none; }
.reveal-right { opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right.visible { opacity:1;transform:none; }
.reveal-scale { opacity:0;transform:scale(.92);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1); }
.reveal-scale.visible { opacity:1;transform:none; }
/* Safety net: if JS reveal never fires (in-viewport on load, error, etc.) show after 1.8s */
@keyframes sbp-reveal-fallback { to { opacity:1; transform:none; } }
.reveal:not(.visible) { animation:sbp-reveal-fallback .6s ease 1.8s forwards; }
.reveal-left:not(.visible),.reveal-right:not(.visible),.reveal-scale:not(.visible) { animation:sbp-reveal-fallback .6s ease 1.8s forwards; }
.delay-100 { transition-delay:.1s !important; }
.delay-150 { transition-delay:.15s !important; }
.delay-200 { transition-delay:.2s !important; }
.delay-300 { transition-delay:.3s !important; }
.delay-400 { transition-delay:.4s !important; }
.delay-500 { transition-delay:.5s !important; }
.delay-600 { transition-delay:.6s !important; }

/* ---- Card lift ---- */
.card-lift { transition:box-shadow .3s ease,transform .3s ease; }
.card-lift:hover { box-shadow:0 20px 60px rgba(14,29,48,.10);transform:translateY(-3px); }

/* ---- Pill ---- */
.pill { display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:99px;background:rgba(225,29,72,.08);border:1px solid rgba(225,29,72,.18);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#e11d48; }

/* ---- Section label ---- */
.section-label { font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#e11d48; }

/* ---- Step number ---- */
.step-num { width:40px;height:40px;border-radius:50%;background:#e11d48;color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px rgba(225,29,72,.35); }

/* ---- FAQ ---- */
.faq-item { border-bottom:1px solid var(--faq-border,rgba(14,29,48,.09));overflow:hidden; }
html.dark .faq-item { --faq-border:rgba(255,255,255,.10); }
.faq-q { width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:inherit; }
.faq-a { max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .25s ease; }
.faq-a.open { max-height:300px;padding-bottom:20px; }
.faq-icon { transition:transform .3s ease;flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ---- Hero slider ---- */
.hero-slide { position:absolute;inset:0;opacity:0;transition:opacity 2s cubic-bezier(.4,0,.2,1); }
.hero-slide.active { opacity:1; }
.hero-dot { width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;transition:all .35s ease;border:none;padding:0;flex-shrink:0; }
.hero-dot.active { width:24px;background:#e11d48; }
@keyframes hero-zoom { 0%{transform:scale(1)} 100%{transform:scale(1.07)} }
.hero-slide.active img { animation:hero-zoom 10s ease-in-out forwards; }

/* ---- Ticker ---- */
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-track { display:flex;gap:40px;align-items:center;width:max-content;animation:ticker-scroll 36s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
.platform-strip-track { display:flex;gap:14px;align-items:center;width:max-content;padding:0 20px;animation:ticker-scroll 30s linear infinite; }
.platform-strip-track:hover { animation-play-state:paused; }

/* ---- CTA gradient ---- */
.cta-section { background:linear-gradient(135deg,#0f1923 0%,#162030 60%,#1a0a12 100%); }

/* ---- AI badge ---- */
.ai-badge { display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:linear-gradient(90deg,rgba(99,102,241,.14),rgba(225,29,72,.10));border:1px solid rgba(99,102,241,.28);color:#818cf8; }
.ai-badge-dark { display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:linear-gradient(90deg,rgba(99,102,241,.22),rgba(225,29,72,.15));border:1px solid rgba(99,102,241,.35);color:#a5b4fc; }

/* ---- Contact page styles ---- */
.contact-category-pill { padding:10px 20px;border-radius:99px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .2s; }
.contact-category-pill.active { background:#e11d48;color:#fff;box-shadow:0 4px 16px rgba(225,29,72,.30); }
.contact-category-pill:not(.active) { background:#eff4ff;color:#3d5166; }
.contact-category-pill:not(.active):hover { background:#e5eeff;color:#0b1c30; }

.contact-input { width:100%;height:48px;padding:0 16px;border-radius:12px;border:1.5px solid rgba(14,29,48,.12);background:#f8f9ff;font-family:inherit;font-size:14px;color:#0b1c30;outline:none;transition:border-color .2s,box-shadow .2s; }
.contact-input:focus { border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10); }
.contact-textarea { width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(14,29,48,.12);background:#f8f9ff;font-family:inherit;font-size:14px;color:#0b1c30;outline:none;transition:border-color .2s,box-shadow .2s;resize:none;min-height:130px; }
.contact-textarea:focus { border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10); }
.contact-select { width:100%;height:48px;padding:0 16px;border-radius:12px;border:1.5px solid rgba(14,29,48,.12);background:#f8f9ff;font-family:inherit;font-size:14px;color:#0b1c30;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;cursor:pointer; }
.contact-select:focus { border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10); }

/* ---- Dark mode ---- */
html.dark body { background:#0d1b2a;color:rgba(255,255,255,.90); }
html.dark #site-header { background:rgba(9,18,30,.92) !important;border-color:rgba(255,255,255,.07) !important; }
html.dark #mobile-nav { background:#0f2030 !important;border-color:rgba(255,255,255,.07) !important; }
html.dark .nav-link { color:rgba(255,255,255,.65) !important; }
html.dark .nav-link:hover { color:#fff !important; }
html.dark #theme-toggle:hover { background:rgba(255,255,255,.08) !important; }
html.dark #hb1, html.dark #hb2, html.dark #hb3 { background-color:rgba(255,255,255,.85) !important; }
html.dark footer { background:#0a1628 !important;border-color:rgba(255,255,255,.07) !important; }
html.dark .contact-input, html.dark .contact-textarea, html.dark .contact-select { background:#0f2030;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.9); }

/* ---- Animated pulse keyframe (used in footer status dot) ---- */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ---- Float animations (hero orbs) ---- */
@keyframes float-a { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.04)} }
@keyframes float-b { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(18px) scale(.97)} }
.float-a { animation:float-a 7s ease-in-out infinite; }
.float-b { animation:float-b 9s ease-in-out infinite; }

/* ---- Comparison table ---- */
.cmp-th { font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:14px 18px;text-align:center;white-space:nowrap; }
.cmp-td { padding:14px 18px;text-align:center;font-size:13px;border-top:1px solid rgba(14,29,48,.07); }
html.dark .cmp-td { border-color:rgba(255,255,255,.07); }
.cmp-yes { color:#16a34a;font-size:18px; }
.cmp-no  { color:#d1d5db;font-size:18px; }
.cmp-sbp { background:rgba(225,29,72,.05);border-left:2px solid #e11d48;border-right:2px solid #e11d48; }
html.dark .cmp-sbp { background:rgba(225,29,72,.08); }

/* ---- Toggle ---- */
.toggle-btn { padding:9px 22px;border-radius:99px;font-size:13px;font-weight:600;transition:all .25s;cursor:pointer;border:none; }
.toggle-btn.active { background:#e11d48;color:#fff;box-shadow:0 4px 16px rgba(225,29,72,.30); }
.toggle-btn.inactive { background:transparent;color:#6b7f93; }
.toggle-btn.inactive:hover { color:#0b1c30; }

/* ---- Range ---- */
input[type=range] { accent-color:#e11d48; }

/* ---- Sparkline ---- */
.sparkline-path { stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1); }
.sparkline-path.drawn { stroke-dashoffset:0; }

/* ---- Stars ---- */
.stars { color:#e11d48;font-size:13px;letter-spacing:1px; }

/* ---- Bento dark ---- */
.bento-dark { background:#162030;color:#e2eaf4; }
.bento-dark p { color:#6b8ba8; }

/* ---- Plan featured ---- */
.plan-featured { background:#162030;color:#e2eaf4; }
.plan-featured .plan-name { color:#6b8ba8; }
.plan-featured .check-icon { color:#e11d48; }
.plan-featured li { color:#c5d4e3; }

/* ---- Tailwind dark overrides ---- */
html.dark .bg-surface     { background-color:#0d1b2a !important; }
html.dark .bg-surface-low { background-color:#0f2030 !important; }
html.dark .bg-surface-mid { background-color:#1a2f42 !important; }
html.dark .bg-white       { background-color:#0f2030 !important; }
html.dark .text-ink       { color:rgba(255,255,255,.92) !important; }
html.dark .text-ink-2     { color:rgba(255,255,255,.65) !important; }
html.dark .text-ink-3     { color:rgba(255,255,255,.42) !important; }
html.dark .border-surface-mid  { border-color:rgba(255,255,255,.10) !important; }
html.dark .border-surface-high { border-color:rgba(255,255,255,.14) !important; }
html.dark section:not(.cta-section):not([style*="050d1a"]) { background-color:#0d1b2a; }