@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* WORDPRESS THEME OVERRIDES — universal */
body.ob-sales-page{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}

/* Hide page title across themes */
body.ob-sales-page .wp-block-post-title,
body.ob-sales-page .entry-title,
body.ob-sales-page .page-title,
body.ob-sales-page .lqd-page-header{display:none!important}

/* Remove theme layout constraints — scoped to content area only */
body.ob-sales-page .wp-site-blocks{padding:0!important}
body.ob-sales-page .wp-site-blocks > main.wp-block-group{max-width:100%!important;padding:0!important;margin:0!important}
body.ob-sales-page .wp-block-post-content{max-width:100%!important;padding:0!important}
body.ob-sales-page #lqd-site-content,
body.ob-sales-page #lqd-site-content > #lqd-contents-wrap,
body.ob-sales-page main.content,
body.ob-sales-page main > .container,
body.ob-sales-page .site-content,
body.ob-sales-page .entry-content{max-width:100%!important;width:100%!important;padding:0!important;margin:0 auto!important}
body.ob-sales-page #wrap{overflow:hidden}

/* Fix Elementor footer icon sizing (Hub theme bug — SVGs missing width/height) */
body.ob-sales-page .elementor-icon-list-icon svg{width:var(--e-icon-list-icon-size,1em);height:auto}

/* ROOT - break out of WP constrained layout + dark background */
.ob{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;overflow-x:hidden;background:#0a0a1a;color:#e5e7eb;line-height:1.6}
.ob,.ob *{box-sizing:border-box}

/* PLUGIN BRANDING */
.ob-plugin-branding{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:32px}
.ob-plugin-icon img{display:block;width:64px;height:64px;border-radius:16px}
.ob-plugin-name{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-0.02em}
.ob-plugin-by{font-size:0.85rem;color:#6b7280;font-weight:400}
.ob-plugin-by strong{color:#818cf8;font-weight:600}

/* HERO */
.ob-hero{background:linear-gradient(180deg,#0a0a1a 0%,#1a1a2e 100%);padding:160px 40px 100px;text-align:center;position:relative}
.ob-hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;margin-bottom:24px;line-height:1.1;color:#fff}
.ob-hero .gradient-text{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ob-hero p{font-size:1.25rem;color:#9ca3af;max-width:700px;margin:0 auto 48px}
.ob-hero-sub{font-size:1.125rem!important}
.ob-hero-small{font-size:0.875rem!important;color:#6b7280!important;margin-top:16px!important}
.ob-badge-pill{display:inline-block;background:rgba(99,102,241,0.15);color:#818cf8;border:1px solid rgba(99,102,241,0.3);padding:8px 24px;border-radius:100px;font-size:0.875rem;font-weight:500;margin-bottom:32px}
.ob-hero .ob-browser-frame{max-width:900px;margin:64px auto 0}
.ob-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ob-btn{display:inline-block;padding:16px 40px;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;transition:all 0.3s ease;cursor:pointer}
.ob-btn-primary{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff}
.ob-btn-primary:hover{transform:scale(1.05);box-shadow:0 20px 40px rgba(99,102,241,0.3)}
.ob-btn-secondary{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.15)}
.ob-btn-secondary:hover{background:rgba(255,255,255,0.12);transform:scale(1.05)}
.ob-stat-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:80px auto 0}
.ob-stat{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:32px 20px 28px;text-align:center;transition:transform 0.3s,border-color 0.3s,background 0.3s}
.ob-stat:hover{transform:translateY(-4px);border-color:rgba(99,102,241,0.3);background:rgba(99,102,241,0.06)}
.ob-stat-icon{font-size:1.5rem;margin-bottom:12px}
.ob-stat-value{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;background:linear-gradient(135deg,#818cf8,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1.1}
.ob-stat-label{font-size:0.75rem;color:#9ca3af;text-transform:uppercase;letter-spacing:0.1em;margin-top:8px;font-weight:600}

/* TRUST BAR */
.ob-trust{background:linear-gradient(180deg,rgba(16,185,129,0.04) 0%,rgba(99,102,241,0.04) 100%);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);padding:20px 40px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ob-trust-item{font-size:0.8125rem;color:#d1d5db;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:100px;padding:8px 18px;transition:border-color 0.3s,background 0.3s}
.ob-trust-item:hover{border-color:rgba(16,185,129,0.3);background:rgba(16,185,129,0.06)}
.ob-trust-icon{font-size:0.875rem;line-height:1}

/* PROBLEM */
.ob-problem{padding:120px 40px;max-width:1200px;margin:0 auto;text-align:center}
.ob-problem h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:16px}
.ob-section-label{display:inline-block;background:rgba(239,68,68,0.15);color:#f87171;padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px}
.ob-problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin-top:60px}
.ob-problem-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:40px;text-align:left;transition:all 0.3s ease}
.ob-problem-card:hover{transform:translateY(-4px);border-color:rgba(239,68,68,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-problem-card h3{font-size:1.25rem;font-weight:700;margin:16px 0 12px;color:#fff}
.ob-problem-card p{color:#9ca3af;font-size:0.9375rem;margin:0;line-height:1.6}
.ob-problem-icon{font-size:2rem}

/* SHOWCASE */
.ob-showcase{padding:140px 40px;position:relative;border-bottom:1px solid rgba(255,255,255,0.06)}
.ob-showcase:nth-child(even){background:rgba(255,255,255,0.015)}
.ob-showcase-inner{max-width:1200px;margin:0 auto;display:flex;gap:80px;align-items:center}
.ob-showcase-reverse .ob-showcase-inner{flex-direction:row-reverse}
.ob-showcase-text{flex:1;min-width:0}
.ob-showcase-media{flex:1;min-width:0}
.ob-section-num{position:absolute;top:40px;left:20px;font-size:8rem;font-weight:800;color:rgba(255,255,255,0.03);line-height:1;pointer-events:none}
.ob-showcase h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;margin:12px 0 20px;color:#fff}
.ob-showcase-desc{font-size:1.0625rem;color:#9ca3af;margin-bottom:40px;line-height:1.8}
.ob-feature-list{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:1fr;gap:16px}
.ob-feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:#d1d5db;line-height:1.5}
.ob-feature-list li::before{content:'\2713';color:#10b981;font-weight:700;flex-shrink:0;margin-top:2px}

/* BADGES */
.ob-badge-free,.ob-badge-pro,.ob-badge-beta{display:inline-block;padding:5px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.ob-badge-free{background:rgba(16,185,129,0.15);color:#10b981;border:1px solid rgba(16,185,129,0.3)}
.ob-badge-pro{background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.3)}
.ob-badge-beta{background:rgba(168,85,247,0.15);color:#a855f7;border:1px solid rgba(168,85,247,0.3)}

/* BROWSER FRAME */
.ob-browser-frame{background:#1a1a2e;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);transition:transform 0.3s ease,box-shadow 0.3s ease}
.ob-browser-frame:hover{transform:scale(1.02);box-shadow:0 30px 80px rgba(99,102,241,0.15)}
.ob-browser-bar{background:#1a1a2e;padding:12px 16px;display:flex;gap:8px;border-bottom:1px solid rgba(255,255,255,0.08)}
.ob-browser-bar span{width:12px;height:12px;border-radius:50%;display:inline-block}
.ob-browser-bar span:nth-child(1){background:#ff5f56}
.ob-browser-bar span:nth-child(2){background:#ffbd2e}
.ob-browser-bar span:nth-child(3){background:#27c93f}
.ob-browser-frame img{width:100%;display:block}

/* THUMB GRID */
.ob-thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-top:32px}
.ob-thumb-grid img{width:100%;display:block;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:transform 0.3s ease;cursor:pointer}
.ob-thumb-grid img:hover{transform:scale(1.05)}

/* ROADMAP (AI + Coming Soon) */
.ob-roadmap{padding:120px 40px;max-width:1200px;margin:0 auto}
.ob-roadmap-header{text-align:center;margin-bottom:64px}
.ob-roadmap-header h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:16px}
.ob-roadmap-sub{font-size:1.0625rem;color:#9ca3af;max-width:650px;margin:0 auto;line-height:1.7}
.ob-section-label-purple{background:rgba(168,85,247,0.15)!important;color:#c084fc!important}
.ob-roadmap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.ob-roadmap-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:40px;transition:all 0.3s ease;position:relative;overflow:hidden}
.ob-roadmap-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-roadmap-card-live{border-color:rgba(16,185,129,0.3)}
.ob-roadmap-card-live:hover{border-color:rgba(16,185,129,0.5);box-shadow:0 20px 40px rgba(16,185,129,0.1)}
.ob-roadmap-card-soon{border-color:rgba(99,102,241,0.15)}
.ob-roadmap-card-soon:hover{border-color:rgba(99,102,241,0.4);box-shadow:0 20px 40px rgba(99,102,241,0.1)}
.ob-roadmap-card-soon::before{content:'';position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle at top right,rgba(99,102,241,0.08),transparent 70%);pointer-events:none}
.ob-roadmap-status{margin-bottom:16px}
.ob-roadmap-icon{font-size:2.5rem;margin-bottom:16px}
.ob-roadmap-card h3{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:12px}
.ob-roadmap-card p{color:#9ca3af;line-height:1.7;font-size:0.9375rem;margin-bottom:20px}
.ob-roadmap-features{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.ob-roadmap-features li{font-size:0.875rem;color:#d1d5db;padding-left:20px;position:relative;line-height:1.5}
.ob-roadmap-features li::before{content:'\2713';position:absolute;left:0;color:#6366f1;font-weight:700;font-size:0.75rem}
.ob-roadmap-card-soon .ob-roadmap-features li::before{content:'\25CB';color:#6366f1}
.ob-badge-soon{display:inline-block;padding:5px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;background:rgba(99,102,241,0.15);color:#818cf8;border:1px solid rgba(99,102,241,0.3)}

/* COMPARISON TABLE */
.ob-compare{padding:120px 40px;max-width:1200px;margin:0 auto;text-align:center}
.ob-compare h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:48px}
.ob-table-wrapper{overflow-x:auto;border-radius:16px;border:1px solid rgba(255,255,255,0.08)}
.ob-compare table{width:100%;border-collapse:collapse;background:rgba(255,255,255,0.02);min-width:700px}
.ob-compare thead{background:#1a1a2e!important}
.ob-compare th{padding:16px 20px!important;text-align:left!important;font-weight:600!important;font-size:0.875rem!important;color:#9ca3af!important;border-bottom:1px solid rgba(255,255,255,0.08)!important;text-transform:uppercase!important;letter-spacing:0.05em!important}
.ob-compare td{padding:14px 20px!important;border-bottom:1px solid rgba(255,255,255,0.05)!important;font-size:0.875rem!important;color:#d1d5db!important}
.ob-compare tbody tr{background:#0f0f23!important}
.ob-compare tbody tr:nth-child(even){background:#141428!important}
.ob-compare tr:hover{background:rgba(255,255,255,0.05)!important}
.ob-col-highlight{background:rgba(16,185,129,0.08)!important;color:#10b981!important;font-weight:600}
.ob-compare td.ob-col-highlight{color:#10b981!important;font-weight:600}
.ob-compare th.ob-col-highlight{color:#10b981!important;font-weight:700;font-size:0.9375rem}
.ob-row-bold td{font-weight:700}
.ob-price-zero{font-size:1.25rem!important;color:#10b981!important}
/* Competitor cell colors: paid = orange, missing = red, available = muted green */
.ob-compare .ob-val-yes{color:#6b7280!important}
.ob-compare .ob-val-paid{color:#f59e0b!important;font-weight:600}
.ob-compare .ob-val-no{color:#ef4444!important;font-weight:600}
.ob-compare .ob-val-costly{color:#ef4444!important;font-weight:700}
.ob-footnote{font-size:0.8125rem;color:#6b7280;margin-top:20px;font-style:italic}

/* SAVINGS */
.ob-savings{padding:120px 40px;max-width:1200px;margin:0 auto;text-align:center}
.ob-savings h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:48px}
.ob-savings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.ob-savings-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:40px;transition:all 0.3s ease}
.ob-savings-card:hover{transform:translateY(-4px);border-color:rgba(16,185,129,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-savings-card h3{font-size:1.125rem;font-weight:600;color:#9ca3af;margin-bottom:16px}
.ob-price-old{font-size:1.5rem;color:#ef4444;text-decoration:line-through;font-weight:700}
.ob-arrow{font-size:1.5rem;color:#6b7280;margin:8px 0}
.ob-price-new{font-size:3rem;font-weight:800;color:#10b981}
.ob-savings-amount{font-size:0.875rem;font-weight:600;color:#10b981;margin-top:12px;background:rgba(16,185,129,0.1);display:inline-block;padding:4px 16px;border-radius:100px}

/* PRICING */
.ob-pricing{padding:120px 40px;max-width:1300px;margin:0 auto}
.ob-pricing-header{text-align:center;margin-bottom:64px}
.ob-pricing-header h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:16px}
.ob-pricing-sub{font-size:1.0625rem;color:#9ca3af;max-width:650px;margin:0 auto;line-height:1.7}
.ob-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.ob-pricing-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:0;overflow:hidden;transition:all 0.3s ease}
.ob-pricing-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-pricing-card-popular{border-color:rgba(99,102,241,0.5);position:relative;box-shadow:0 0 40px rgba(99,102,241,0.15)}
.ob-pricing-card-popular:hover{border-color:rgba(99,102,241,0.7);box-shadow:0 20px 60px rgba(99,102,241,0.25)}
.ob-pricing-popular-badge{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;text-align:center;padding:8px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em}
.ob-pricing-card-header{padding:32px 24px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.06)}
.ob-pricing-card-header h3{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:4px}
.ob-pricing-tagline{font-size:0.8125rem;color:#6b7280;margin-bottom:20px}
.ob-pricing-price{margin-bottom:8px}
.ob-pricing-amount{font-size:3rem;font-weight:800;color:#fff}
.ob-pricing-card-popular .ob-pricing-amount{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ob-pricing-period{font-size:0.9375rem;color:#6b7280;margin-left:4px}
.ob-pricing-perday{font-size:0.8125rem;color:#10b981;font-weight:600;margin-bottom:16px}
.ob-btn-block{display:block;width:100%;text-align:center;padding:14px 20px;margin-top:8px}
.ob-pricing-features{list-style:none;padding:20px 24px 28px;margin:0}
.ob-pricing-features li{padding:8px 0 8px 24px;position:relative;font-size:0.8125rem;color:#d1d5db;border-bottom:1px solid rgba(255,255,255,0.04);line-height:1.5}
.ob-pricing-features li:last-child{border-bottom:none}
.ob-pricing-feat-yes::before{content:'\2713';position:absolute;left:0;color:#10b981;font-weight:700}
.ob-pricing-feat-no::before{content:'\2717';position:absolute;left:0;color:#4b5563;font-weight:700}
.ob-pricing-feat-no{color:#4b5563}
.ob-pricing-guarantee{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:48px;padding:24px 32px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:12px;max-width:600px;margin-left:auto;margin-right:auto}
.ob-guarantee-icon{font-size:2rem}
.ob-guarantee-text strong{color:#10b981;font-size:0.9375rem;display:block;margin-bottom:4px}
.ob-guarantee-text p{color:#9ca3af;font-size:0.8125rem;margin:0;line-height:1.5}
.ob-pricing-compare-row{text-align:center;margin-top:32px}
.ob-pricing-compare-row p{color:#9ca3af;font-size:0.9375rem}
.ob-pricing-compare-row strong{color:#fff}

/* TESTIMONIALS */
.ob-testimonials{padding:120px 40px;max-width:1200px;margin:0 auto;text-align:center}
.ob-testimonials h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:48px}
.ob-testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ob-testimonial-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:32px;text-align:left;transition:all 0.3s ease}
.ob-testimonial-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-testimonial-stars{color:#f59e0b;font-size:1.125rem;margin-bottom:16px;letter-spacing:2px}
.ob-testimonial-quote{color:#d1d5db;font-size:0.9375rem;line-height:1.7;font-style:italic;margin-bottom:24px}
.ob-testimonial-author{display:flex;align-items:center;gap:12px}
.ob-testimonial-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}
.ob-testimonial-author strong{color:#fff;font-size:0.875rem;display:block}
.ob-testimonial-author span{color:#6b7280;font-size:0.75rem}

/* FAQ */
.ob-faq{padding:120px 40px;max-width:800px;margin:0 auto}
.ob-faq h2{font-size:clamp(2rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:48px;text-align:center}
.ob-faq-list{display:flex;flex-direction:column;gap:16px}
.ob-faq-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;transition:all 0.3s ease}
.ob-faq-q{padding:20px 24px!important;font-weight:600!important;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#fff!important;font-size:0.9375rem!important;list-style:none}
.ob-faq-q::-webkit-details-marker{display:none}
.ob-faq-q::marker{display:none;content:''}
.ob-faq-q::after{content:'+';font-size:1.5rem;color:#6b7280;transition:transform 0.3s ease}
.ob-faq-item[open] .ob-faq-q::after{transform:rotate(45deg);color:#6366f1}
.ob-faq-q:hover{background:rgba(255,255,255,0.02)}
.ob-faq-a{padding:0 24px 20px!important;color:#9ca3af!important;line-height:1.7;font-size:0.9375rem!important}

/* CTA */
.ob-cta{background:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);padding:140px 40px;text-align:center;position:relative}
.ob-cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:24px}
.ob-cta p{font-size:1.125rem;color:rgba(255,255,255,0.9);max-width:600px;margin:0 auto 40px}
.ob-cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ob-cta .ob-btn-primary{background:#fff;color:#6366f1}
.ob-cta .ob-btn-primary:hover{box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-cta .ob-btn-secondary{border-color:rgba(255,255,255,0.3);color:#fff}
.ob-cta-small{font-size:0.8125rem;color:rgba(255,255,255,0.7);margin-top:24px}

/* LIGHTBOX (JS-powered gallery) */
#ob-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:999999;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}
#ob-lightbox.ob-lb-active{display:flex}
/* Wrapper: vertical flex – image on top, controls below */
#ob-lightbox .ob-lightbox-wrapper{display:flex;flex-direction:column;align-items:center;max-width:90%;max-height:95vh}
#ob-lightbox .ob-lightbox-img{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,0.5);opacity:0;transition:opacity 0.25s ease;display:block}
#ob-lightbox .ob-lightbox-img.ob-lb-visible{opacity:1}
/* Controls bar below image */
#ob-lightbox .ob-lightbox-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;flex-shrink:0}
/* Prev / Next arrows */
#ob-lightbox .ob-lightbox-prev,
#ob-lightbox .ob-lightbox-next{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:1.75rem;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,border-color 0.2s;padding:0;line-height:1}
#ob-lightbox .ob-lightbox-prev:hover,
#ob-lightbox .ob-lightbox-next:hover{background:rgba(99,102,241,0.35);border-color:rgba(99,102,241,0.6)}
/* Image counter */
#ob-lightbox .ob-lightbox-counter{color:rgba(255,255,255,0.7);font-size:0.875rem;font-weight:500;letter-spacing:0.05em;background:rgba(0,0,0,0.4);padding:6px 16px;border-radius:100px}
/* Close button */
#ob-lightbox .ob-lightbox-close{font-size:1.75rem;color:#fff;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.8;transition:opacity 0.2s,background 0.2s,border-color 0.2s;padding:0;line-height:1;margin-left:8px}
#ob-lightbox .ob-lightbox-close:hover{opacity:1;background:rgba(239,68,68,0.35);border-color:rgba(239,68,68,0.6)}
/* Trigger elements */
.ob-lb-trigger{cursor:zoom-in;display:block}
.ob-lb-trigger img{transition:transform 0.2s,box-shadow 0.2s}
.ob-lb-trigger:hover img{transform:scale(1.02);box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.ob-thumb-grid .ob-lb-trigger{display:inline-block}

/* SUB-FEATURE (Post/Page Analytics inside Heatmaps) */
.ob-sub-feature{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1)}
.ob-sub-feature h4{font-size:1rem;color:#94a3b8;margin-bottom:0.75rem;font-weight:600}
.ob-sub-thumb-grid{display:flex;gap:0.75rem}
.ob-sub-thumb-grid .ob-lb-trigger{flex:1}
.ob-sub-thumb-grid img{width:100%;border-radius:6px;border:1px solid rgba(255,255,255,0.1)}

/* ============================================
   FEATURE PAGE COMPONENTS
   ============================================ */

/* Feature Hero (smaller than main hero) */
.ob-feature-hero{background:linear-gradient(180deg,#0a0a1a 0%,#1a1a2e 100%);padding:120px 40px 80px;text-align:center;position:relative}
.ob-feature-hero h1{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;margin-bottom:20px;line-height:1.15;color:#fff}
.ob-feature-hero .ob-hero-sub{font-size:1.0625rem!important;max-width:700px;margin:0 auto 40px;color:#9ca3af;line-height:1.7}
.ob-feature-hero .ob-browser-frame{max-width:960px;margin:48px auto 0}

/* Feature Navigation Bar */
.ob-feature-nav{background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);padding:16px 40px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ob-feature-nav a{font-size:0.8125rem;color:#9ca3af;text-decoration:none;padding:8px 20px;border-radius:100px;border:1px solid rgba(255,255,255,0.06);transition:all 0.3s ease;white-space:nowrap}
.ob-feature-nav a:hover{color:#fff;border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.1)}
.ob-feature-nav a.ob-nav-active{color:#818cf8;border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.15)}

/* Deep Dive Section */
.ob-deep-dive{padding:100px 40px;max-width:1200px;margin:0 auto}
.ob-deep-dive-header{text-align:center;margin-bottom:64px}
.ob-deep-dive-header h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;color:#fff;margin-bottom:16px}
.ob-deep-dive-header p{font-size:1.0625rem;color:#9ca3af;max-width:650px;margin:0 auto;line-height:1.7}

/* Sub-Feature Detail Cards */
.ob-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:32px;margin-bottom:80px}
.ob-detail-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;transition:all 0.3s ease}
.ob-detail-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-detail-card-img{position:relative;overflow:hidden}
.ob-detail-card-img img{width:100%;display:block;transition:transform 0.3s ease}
.ob-detail-card:hover .ob-detail-card-img img{transform:scale(1.03)}
.ob-detail-card-body{padding:28px}
.ob-detail-card-body h3{font-size:1.125rem;font-weight:700;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ob-detail-card-body .ob-detail-icon{font-size:1.25rem}
.ob-detail-card-body p{color:#9ca3af;font-size:0.9375rem;line-height:1.7;margin:0}

/* How It Works */
.ob-how-it-works{padding:100px 40px;max-width:1000px;margin:0 auto}
.ob-how-it-works h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;color:#fff;margin-bottom:60px;text-align:center}
.ob-steps{display:grid;gap:0;position:relative}
.ob-step{display:flex;gap:32px;align-items:flex-start;padding:32px 0;position:relative}
.ob-step-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;flex-shrink:0;position:relative;z-index:2}
.ob-step:not(:last-child)::after{content:'';position:absolute;left:28px;top:88px;bottom:0;width:2px;background:linear-gradient(180deg,rgba(99,102,241,0.4),rgba(99,102,241,0.1))}
.ob-step-content h3{font-size:1.125rem;font-weight:700;color:#fff;margin-bottom:8px}
.ob-step-content p{color:#9ca3af;font-size:0.9375rem;line-height:1.7;margin:0}

/* Use Cases */
.ob-use-cases{padding:100px 40px;max-width:1200px;margin:0 auto}
.ob-use-cases h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;color:#fff;margin-bottom:48px;text-align:center}
.ob-use-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ob-use-case{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:36px;transition:all 0.3s ease}
.ob-use-case:hover{transform:translateY(-4px);border-color:rgba(99,102,241,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-use-case-icon{font-size:2.5rem;margin-bottom:16px}
.ob-use-case h3{font-size:1.125rem;font-weight:700;color:#fff;margin-bottom:12px}
.ob-use-case p{color:#9ca3af;font-size:0.9375rem;line-height:1.7;margin:0}

/* Mini Comparison Table (for feature pages) */
.ob-mini-compare{padding:100px 40px;max-width:900px;margin:0 auto;text-align:center}
.ob-mini-compare h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;color:#fff;margin-bottom:48px}
.ob-mini-compare table{width:100%;border-collapse:collapse;background:rgba(255,255,255,0.02)!important;min-width:700px}
.ob-mini-compare thead{background:#1a1a2e!important}
.ob-mini-compare th{padding:16px 20px!important;text-align:left!important;font-weight:600!important;font-size:0.875rem!important;color:#9ca3af!important;border-bottom:1px solid rgba(255,255,255,0.08)!important;text-transform:uppercase!important;letter-spacing:0.05em!important}
.ob-mini-compare th.ob-col-highlight{color:#10b981!important;font-weight:700!important;font-size:0.9375rem!important}
.ob-mini-compare td{padding:14px 20px!important;border-bottom:1px solid rgba(255,255,255,0.05)!important;font-size:0.875rem!important;color:#d1d5db!important}
.ob-mini-compare tbody tr{background:#0f0f23!important}
.ob-mini-compare tbody tr:nth-child(even){background:#141428!important}
.ob-mini-compare tr:hover{background:rgba(255,255,255,0.05)!important}

/* Feature CTA (smaller version) */
.ob-feature-cta{background:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);padding:100px 40px;text-align:center}
.ob-feature-cta h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;color:#fff;margin-bottom:20px}
.ob-feature-cta p{font-size:1.0625rem;color:rgba(255,255,255,0.9);max-width:550px;margin:0 auto 36px}
.ob-feature-cta .ob-btn-primary{background:#fff;color:#6366f1}
.ob-feature-cta .ob-btn-primary:hover{box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.ob-feature-cta .ob-btn-secondary{border-color:rgba(255,255,255,0.3);color:#fff}

/* Learn More Link (on main sales page) */
.ob-learn-more{display:inline-flex;align-items:center;gap:6px;color:#818cf8;font-size:0.9375rem;font-weight:600;text-decoration:none;transition:all 0.3s ease;margin-top:8px}
.ob-learn-more:hover{color:#a78bfa;gap:10px}

/* Back to Overview */
.ob-back-link{display:inline-flex;align-items:center;gap:8px;color:#818cf8;font-size:0.875rem;font-weight:500;text-decoration:none;padding:8px 0;transition:all 0.3s ease}
.ob-back-link:hover{color:#a78bfa;gap:12px}

/* Key Metrics Bar (for feature pages) */
.ob-metrics-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;max-width:900px;margin:60px auto 0}
.ob-metric{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px 16px;text-align:center;transition:all 0.3s ease}
.ob-metric:hover{border-color:rgba(99,102,241,0.3);background:rgba(99,102,241,0.06)}
.ob-metric-value{font-size:1.75rem;font-weight:800;color:#fff;margin-bottom:4px}
.ob-metric-label{font-size:0.75rem;color:#9ca3af;text-transform:uppercase;letter-spacing:0.08em;font-weight:600}

/* RESPONSIVE */
@media(max-width:768px){
.ob-hero{padding:100px 20px 80px}
.ob-stat-bar{grid-template-columns:repeat(2,1fr);gap:20px}
.ob-showcase-inner{flex-direction:column!important;gap:48px}
.ob-showcase-reverse .ob-showcase-inner{flex-direction:column!important}
.ob-showcase h2{font-size:1.75rem}
.ob-section-num{font-size:4rem}
.ob-problem-grid{grid-template-columns:1fr}
.ob-trust{gap:20px;padding:16px 20px}
.ob-roadmap-grid{grid-template-columns:1fr}
.ob-cta h2{font-size:2rem}
.ob-savings-grid{grid-template-columns:repeat(2,1fr)}
.ob-compare{padding:40px 10px}
.ob-pricing-grid{grid-template-columns:1fr!important}
.ob-pricing-card-popular{order:-1}
.ob-testimonials-grid{grid-template-columns:1fr}
.ob-feature-hero{padding:80px 20px 60px}
.ob-feature-nav{padding:12px 16px;gap:6px}
.ob-feature-nav a{padding:6px 14px;font-size:0.75rem}
.ob-detail-grid{grid-template-columns:1fr}
.ob-step{gap:20px}
.ob-step-num{width:44px;height:44px;font-size:1rem}
.ob-step:not(:last-child)::after{left:22px;top:76px}
.ob-use-cases-grid{grid-template-columns:1fr}
.ob-metrics-bar{grid-template-columns:repeat(2,1fr)}
#ob-lightbox .ob-lightbox-wrapper{max-width:95%}
#ob-lightbox .ob-lightbox-img{max-height:70vh}
#ob-lightbox .ob-lightbox-controls{gap:10px;margin-top:12px}
#ob-lightbox .ob-lightbox-prev,#ob-lightbox .ob-lightbox-next,#ob-lightbox .ob-lightbox-close{width:38px;height:38px;font-size:1.35rem}
#ob-lightbox .ob-lightbox-counter{font-size:0.8rem;padding:5px 12px}
}