/**
 * Landing Page Styles
 * Cacheroo — Dark-first theme, buggazi.com pattern
 * No Bootstrap — pure custom CSS
 */

/* ── CSS Variables ── */
:root {
  --bg: #0c0a08;
  --bg2: #131110;
  --bg3: #1e1c1a;
  --text: #faf9f7;
  --muted: #6b6660;
  --accent: #d4a574;
  --accent-hover: #c4956a;
  --border: #2d2a26;
  --success: #3d9970;
  --danger: #c0392b;
  --warning: #c9943e;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Light mode overrides ── */
body.landing-light { --bg:#faf9f7; --bg2:#f3f1f6; --bg3:#e8e5ec; --text:#0c0a08; --muted:#6b6660; --accent:#b8865a; --border:#e0dde4; }
body.landing-light .nav-logo-img { filter: none !important; }
body.landing-light .nav { background: rgba(250,249,247,0.92); }
body.landing-light .hero { background: var(--bg2); }
body.landing-light .hero-bg-overlay { background:linear-gradient(180deg, rgba(250,249,247,0.5) 0%, rgba(250,249,247,0.65) 50%, rgba(250,249,247,0.9) 100%); }
body.landing-light .compare-highlight { background: var(--bg3); }
body.landing-light .step-code pre, body.landing-light .step-code .code-header { background:#1e1c1a; color:#faf9f7; }
body.landing-light .step-code .code-header code { color:#d4a574; }

/* ── Reset & Base ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
img { max-width:100%; height:auto; }
code { font-family:var(--font-mono); font-size:0.8125em; }
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.25rem; font-size:0.875rem; font-weight:500; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:all 0.2s ease; text-decoration:none; font-family:var(--font-sans); line-height:1.4; }
.btn-primary { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); color:var(--bg); border-color:var(--accent-hover); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); }
.btn-lg { padding:0.75rem 1.75rem; font-size:1rem; }
.btn-block { display:flex; width:100%; text-align:center; justify-content:center; align-items:center; }

/* ── Navigation ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(12,10,8,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:box-shadow 0.3s ease; }
.nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.3); }
.nav-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo-img { height:28px; filter:brightness(0) invert(1); }
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-links > a:not(.btn) { color:var(--muted); font-size:0.875rem; font-weight:500; padding:0.5rem 0.75rem; transition:color 0.15s; text-decoration:none; }
.nav-links > a:not(.btn):hover { color:var(--text); }
/* ── Nav Dropdown ── */
.nav-dropdown { position:relative; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:4px; }
.nav-dropdown-menu { display:none; position:absolute; top:100%; right:0; margin-top:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); min-width:180px; padding:6px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.nav-dropdown.open .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a { display:block; padding:8px 12px; border-radius:6px; font-size:0.8125rem; color:var(--muted) !important; text-decoration:none; transition:background 0.15s,color 0.15s; }
.nav-dropdown-menu a:hover { background:var(--bg3); color:var(--text) !important; }

.nav-mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-mobile-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:1px; }
.nav-mobile { display:none; flex-direction:column; padding:1rem 1.5rem 1.5rem; background:var(--bg2); border-bottom:1px solid var(--border); }
.nav-mobile.open { display:flex; }
.nav-mobile a { padding:0.75rem 0; color:var(--muted); font-size:0.9375rem; border-bottom:1px solid var(--border); }
.nav-mobile a:last-child { border-bottom:none; }
.nav-mobile .btn { margin-top:0.75rem; text-align:center; justify-content:center; }

/* ── Hero ── */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--bg); padding:6rem 0; position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-poster, .hero-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-bg-poster { z-index:1; transition:opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.hero-bg-video { z-index:2; opacity:0; transition:opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.hero-bg-video--active { opacity:1; }
.hero-bg-overlay { position:absolute; inset:0; z-index:3; background:linear-gradient(180deg, rgba(12,10,8,0.5) 0%, rgba(12,10,8,0.65) 50%, rgba(12,10,8,0.9) 100%); }
.hero .container { position:relative; z-index:4; }
.hero-content { max-width:800px; margin:0 auto; }
.hero-badge { display:inline-block; padding:0.375rem 1rem; background:rgba(212,165,116,0.12); color:var(--accent); font-size:0.8125rem; font-weight:600; border-radius:9999px; margin-bottom:1.5rem; letter-spacing:0.02em; }
.hero h1 { font-size:clamp(2rem,4vw + 0.5rem,3.25rem); font-weight:700; line-height:1.15; letter-spacing:-0.03em; margin-bottom:1.25rem; }
.hero-subtitle { font-size:clamp(1rem,1.5vw + 0.5rem,1.1875rem); color:var(--muted); line-height:1.7; max-width:640px; margin:0 auto 2rem; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.hero-ghost { color:#faf9f7; border-color:rgba(255,255,255,0.3); }
body.landing-light .hero-ghost { color:#0c0a08; border-color:rgba(0,0,0,0.2); }
.hero-stats { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.hero-stats .stat { text-align:center; }
.hero-stats .stat-value { display:block; font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
.hero-stats .stat-label { display:block; font-size:0.6875rem; color:var(--muted); margin-top:0.25rem; text-transform:uppercase; letter-spacing:0.08em; }

/* ── Section Utilities ── */
.section-header { text-align:center; max-width:700px; margin:0 auto 3rem; }
.section-label { display:inline-block; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:1rem; }
.section-header h2 { font-size:clamp(1.5rem,3vw + 0.25rem,2.25rem); font-weight:700; line-height:1.2; letter-spacing:-0.02em; margin-bottom:1rem; }
.section-header p { font-size:0.9375rem; color:var(--muted); line-height:1.7; }

/* ── Why Section ── */
.why-not { padding:5rem 0; background:var(--bg2); }
.why-not-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.why-not-card { padding:1.75rem; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg); }
.why-not-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); margin-bottom:1rem; font-size:1.125rem; }
.why-not-old .why-not-icon { color:var(--danger); background:rgba(192,57,43,0.12); }
.why-not-new .why-not-icon { color:var(--success); background:rgba(61,153,112,0.12); }
.why-not-card h3 { font-size:1rem; font-weight:600; margin-bottom:1rem; }
.why-not-card ul { list-style:none; padding:0; margin:0 0 1rem; }
.why-not-card li { display:flex; align-items:flex-start; gap:0.625rem; padding:0.375rem 0; font-size:0.8125rem; color:var(--muted); line-height:1.5; }
.why-not-card li i { margin-top:2px; flex-shrink:0; }
.why-not-old li i { color:var(--danger); }
.why-not-new li i { color:var(--success); }
.why-not-card code { background:var(--bg3); padding:0.125rem 0.375rem; border-radius:3px; font-size:0.75rem; color:var(--accent); }
.why-not-verdict { font-size:0.8125rem; font-weight:600; color:var(--text); padding-top:0.75rem; border-top:1px solid var(--border); margin:0; }

/* ── Features ── */
.features { padding:5rem 0; background:var(--bg); }
.mode-label { color:var(--accent); font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1rem; font-weight:600; }
.features-grid { display:grid; gap:1.25rem; margin-bottom:2.5rem; }
.features-grid-4 { grid-template-columns:repeat(4,1fr); }
.features-grid-3 { grid-template-columns:repeat(3,1fr); }
.feature-card { padding:1.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); transition:border-color 0.2s; }
.feature-card:hover { border-color:var(--muted); }
.feature-card-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
.feature-card-header h3 { font-size:0.9375rem; font-weight:600; margin:0; }
.feature-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--bg3); border-radius:var(--radius-sm); color:var(--muted); font-size:0.875rem; flex-shrink:0; }
.feature-card p { font-size:0.8125rem; color:var(--muted); line-height:1.6; margin:0; }

/* ── How It Works ── */
.how-it-works { padding:5rem 0; background:var(--bg2); }
.steps { max-width:800px; margin:0 auto; }
.step { display:flex; gap:1.5rem; margin-bottom:3rem; }
.step:last-child { margin-bottom:0; }
.step-number { width:40px; height:40px; background:var(--accent); color:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.step-content { flex:1; }
.step-content h3 { font-size:1rem; font-weight:600; margin-bottom:0.5rem; line-height:1.4; }
.step-content > p { font-size:0.875rem; color:var(--muted); line-height:1.7; margin-bottom:1rem; }
.step-code { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.step-code .code-header { display:flex; align-items:center; justify-content:space-between; padding:0.625rem 1rem; background:#1a1816; border-bottom:1px solid var(--border); }
.step-code .code-header code { color:var(--accent); font-size:0.75rem; }
.copy-btn { background:none; border:none; color:var(--muted); cursor:pointer; padding:0.25rem; font-size:0.8125rem; transition:color 0.15s; }
.copy-btn:hover { color:var(--text); }
.step-code pre { background:#141210; color:#c8c4be; padding:1rem; margin:0; font-family:var(--font-mono); font-size:0.75rem; line-height:1.7; overflow-x:auto; white-space:pre; }

/* ── Comparison ── */
.compare { padding:5rem 0; background:var(--bg); }
.compare-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.compare-card { padding:1.75rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg); }
.compare-card h3 { font-size:1.125rem; font-weight:600; margin-bottom:0.25rem; }
.compare-label { font-size:0.75rem; color:var(--muted); margin-bottom:1.25rem; }
.compare-card ul { list-style:none; padding:0; margin:0; }
.compare-card li { padding:0.375rem 0; font-size:0.8125rem; display:flex; align-items:flex-start; gap:0.5rem; line-height:1.5; }
.compare-yes::before { content:'\2713'; color:var(--success); font-weight:700; flex-shrink:0; }
.compare-no::before { content:'\2717'; color:var(--danger); font-weight:700; flex-shrink:0; }
.compare-highlight { border-color:var(--accent); background:var(--bg2); }

/* ── Founder ── */
.founder { background:var(--bg2); }

/* ── Pricing ── */
.pricing { padding:5rem 0; background:var(--bg2); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:900px; margin:0 auto; }
.pricing-card { padding:1.75rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg); display:flex; flex-direction:column; position:relative; }
.pricing-card.featured { border-color:var(--accent); }
.pricing-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--bg); padding:0.25rem 1rem; font-size:0.6875rem; font-weight:600; border-radius:0 0 var(--radius-sm) var(--radius-sm); letter-spacing:0.03em; }
.pricing-header { text-align:center; margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.pricing-header h3 { font-size:1rem; font-weight:600; margin-bottom:0.75rem; }
.price { margin-bottom:0.5rem; }
.price-amount { font-size:2rem; font-weight:700; letter-spacing:-0.02em; }
.price-period { font-size:0.875rem; color:var(--muted); }
.pricing-header p { font-size:0.8125rem; color:var(--muted); margin:0; }
.pricing-features { list-style:none; padding:0; margin:0 0 1.5rem; flex:1; }
.pricing-features li { display:flex; align-items:center; gap:0.5rem; padding:0.375rem 0; font-size:0.8125rem; color:var(--muted); }
.pricing-features li svg { width:16px; height:16px; color:var(--success); flex-shrink:0; }

/* ── CTA ── */
.cta { padding:5rem 0; background:var(--bg); }
.cta-content { text-align:center; max-width:640px; margin:0 auto; }
.cta-content h2 { font-size:clamp(1.5rem,2.5vw + 0.25rem,2rem); font-weight:700; margin-bottom:1rem; letter-spacing:-0.02em; }
.cta-content p { font-size:0.9375rem; color:var(--muted); line-height:1.7; margin-bottom:2rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── Footer ── */
.footer { padding:4rem 0 2rem; background:var(--bg2); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
.footer-brand p { font-size:0.8125rem; color:var(--muted); margin-top:0.75rem; line-height:1.6; }
.footer-links h4 { font-size:0.8125rem; font-weight:600; margin-bottom:0.75rem; }
.footer-links a { display:block; font-size:0.8125rem; color:var(--muted); padding:0.25rem 0; transition:color 0.15s; }
.footer-links a:hover { color:var(--text); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:2rem; border-top:1px solid var(--border); }
.footer-bottom p { font-size:0.75rem; color:var(--muted); margin:0; }
.footer-social { display:flex; gap:0.75rem; }
.footer-social a { color:var(--muted); transition:color 0.15s; }
.footer-social a:hover { color:var(--text); }
.footer-social svg { width:20px; height:20px; }

/* ── Scroll Reveal ── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ── */
@media (max-width:1024px) { .features-grid-4{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:1fr 1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:768px) { .nav-links{display:none} .nav-mobile-toggle{display:flex} .hero{min-height:100vh;padding:5rem 0 3rem} .hero h1{font-size:clamp(1.5rem,5vw,2.25rem)} .why-not-grid,.features-grid-4,.features-grid-3,.compare-grid,.pricing-grid{grid-template-columns:1fr} .step{flex-direction:column;gap:1rem} .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;gap:1rem;text-align:center} }
@media (max-width:480px) { .hero-cta,.cta-actions{flex-direction:column;align-items:center} .hero-cta .btn,.cta-actions .btn{width:100%;justify-content:center} .hero-cta{flex-direction:column;align-items:center} .hero-cta .btn{width:100%;justify-content:center} }
@media print { .nav,.hero,.cta,.footer,.sc-bubble,.sc-panel,#modeToggle{display:none!important} body{background:#fff;color:#000} }