:root{--indigo:#6366f1;--indigo-dark:#4f46e5;--slate:#0f172a;--slate-mid:#1e293b}
*,*::before,*::after{box-sizing:border-box}

/* ── NAV ── */
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 2rem;background:rgba(15,23,42,.97);position:sticky;top:0;z-index:9999;backdrop-filter:blur(8px)}
.lp-nav .brand{font-size:1.25rem;font-weight:800;color:#fff;text-decoration:none}
.lp-nav .links{display:flex;align-items:center;gap:1.25rem}
.lp-nav .links a{color:#94a3b8;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s}
.lp-nav .links a:hover{color:#fff}
.lp-nav .links .cta-nav{background:var(--indigo);color:#fff;padding:.4rem 1.1rem;border-radius:7px;font-weight:700}
.lp-nav .links .cta-nav:hover{background:var(--indigo-dark);color:#fff}
.lp-hamburger{display:none;background:none;border:none;color:#94a3b8;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px}
.lp-nav .links .lp-close{display:none}

/* ── HERO ── */
.lp-hero{background:linear-gradient(135deg,var(--slate) 0%,var(--slate-mid) 55%,#312e81 100%);padding:5rem 1.5rem 5.5rem;text-align:center;color:#fff}
.lp-hero h1{font-size:clamp(2.1rem,5.5vw,3.5rem);line-height:1.12;font-weight:900;margin:0 auto .75rem;max-width:860px;color:#fff}
.lp-hero h1 em{font-style:normal;color:#a5b4fc}
.lp-hero .hero-sub{font-size:clamp(1rem,2.5vw,1.15rem);color:#cbd5e1;max-width:600px;margin:.5rem auto 2rem;line-height:1.65}
.hero-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hero-btns .btn-primary{font-size:1.05rem;padding:.85rem 2.25rem}
.hero-btns .btn-ghost{font-size:.95rem;padding:.75rem 1.5rem;border:2px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;transition:all .15s}
.hero-btns .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Hero live demo */
.hero-demo{max-width:640px;margin:2.5rem auto 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.25rem 1.5rem;text-align:left}
.demo-search-bar{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.3);border-radius:10px;padding:.55rem 1rem;margin-bottom:1rem}
.demo-search-bar span.q{color:#94a3b8;font-size:.88rem;flex:1}
.demo-search-bar .demo-btn{background:var(--indigo);color:#fff;padding:.3rem .75rem;border-radius:6px;font-size:.75rem;font-weight:700}
.demo-results{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.demo-stat{background:rgba(255,255,255,.05);border-radius:8px;padding:.65rem;text-align:center}
.demo-stat .num{font-size:1.4rem;font-weight:800;line-height:1}
.demo-stat .lbl{font-size:.68rem;color:#94a3b8;margin-top:.2rem}

/* ── SOCIAL PROOF BAR ── */
.proof-bar{background:var(--indigo);padding:1.75rem 1.5rem}
.proof-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;max-width:900px;margin:0 auto;text-align:center}
.proof-v{font-size:2.2rem;font-weight:900;color:#fff;line-height:1}
.proof-l{font-size:.78rem;color:#c7d2fe;margin-top:.25rem}

/* ── TRUST / LOGO BAR ── */
.trust-bar{background:#0f172a;border-bottom:1px solid #1e293b;padding:2rem 1.5rem;text-align:center}
.trust-headline{font-size:.82rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1.25rem}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:800px;margin:0 auto}
.trust-pill{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.55rem 1.1rem;font-size:.78rem;font-weight:600;color:#94a3b8;white-space:nowrap;transition:border-color .15s}
.trust-pill:hover{border-color:#475569}

/* ── TESTIMONIALS ── */
.lp-testimonials{padding:5rem 1.5rem;background:#fff}
body.dark .lp-testimonials{background:#0f172a}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:1100px;margin:0 auto}
.testi-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:1.5rem;display:flex;flex-direction:column}
body.dark .testi-card{background:#1e293b;border-color:#334155}
.testi-stars{color:#f59e0b;font-size:.9rem;letter-spacing:1px;margin-bottom:.75rem}
.testi-quote{font-size:.9rem;color:#334155;line-height:1.7;flex:1;margin:0 0 1.25rem;font-style:italic}
body.dark .testi-quote{color:#cbd5e1}
.testi-author{display:flex;align-items:center;gap:.75rem}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--indigo);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.85rem;flex-shrink:0}
.testi-name{font-size:.85rem;font-weight:700;color:var(--slate)}
body.dark .testi-name{color:#f1f5f9}
.testi-role{font-size:.75rem;color:#64748b;margin-top:.1rem}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr;max-width:500px}}
@media(max-width:1024px) and (min-width:769px){.testi-grid{grid-template-columns:repeat(2,1fr)}}

/* ── SECTIONS ── */
.sec-head{text-align:center;margin-bottom:2.5rem}
.sec-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;color:var(--slate);margin:0 0 .5rem}
.sec-head p{color:#64748b;font-size:1rem;max-width:560px;margin:0 auto}
body.dark .sec-head h2{color:#f1f5f9}

/* ── HOW IT WORKS (3 STEPS) ── */
.lp-how{padding:5rem 1.5rem;background:#f1f5f9}
body.dark .lp-how{background:#0f172a}
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:960px;margin:0 auto}
.step-card{background:#fff;border-radius:14px;padding:2rem 1.5rem;border-top:4px solid var(--indigo);box-shadow:0 2px 12px rgba(0,0,0,.06);text-align:center;position:relative}
body.dark .step-card{background:#1e293b}
.step-num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#fff;font-size:1rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-card h3{font-size:1.1rem;font-weight:700;color:var(--slate);margin:1rem 0 .5rem}
body.dark .step-card h3{color:#f1f5f9}
.step-card p{font-size:.88rem;color:#64748b;line-height:1.6;margin:0}
.step-icon{font-size:2rem;margin-bottom:.25rem}

/* ── FEATURE SHOWCASE ── */
.lp-showcase{padding:5rem 1.5rem;background:#fff}
body.dark .lp-showcase{background:#1e293b}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:1000px;margin:0 auto;align-items:center}
.showcase-text h3{font-size:1.4rem;font-weight:800;color:var(--slate);margin:0 0 .75rem}
body.dark .showcase-text h3{color:#f1f5f9}
.showcase-text p{font-size:.95rem;color:#64748b;line-height:1.7;margin:0 0 1rem}
.showcase-list{list-style:none;padding:0;margin:0}
.showcase-list li{padding:.4rem 0;font-size:.9rem;color:#334155;display:flex;align-items:flex-start;gap:.5rem}
body.dark .showcase-list li{color:#cbd5e1}
.showcase-list li::before{content:"\2713";color:var(--indigo);font-weight:700;flex-shrink:0}
.showcase-visual{background:#f1f5f9;border-radius:16px;padding:2rem;border:1px solid #e2e8f0}
body.dark .showcase-visual{background:#0f172a;border-color:#334155}

/* ── TOOLKIT CARDS ── */
.lp-toolkits{padding:5rem 1.5rem;background:#f1f5f9}
body.dark .lp-toolkits{background:#0f172a}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;max-width:1100px;margin:0 auto}
.tk-card{background:#fff;border-radius:14px;padding:1.5rem;border:1px solid #e2e8f0;transition:box-shadow .15s,transform .15s}
.tk-card:hover{box-shadow:0 8px 30px rgba(99,102,241,.1);transform:translateY(-2px)}
body.dark .tk-card{background:#1e293b;border-color:#334155}
.tk-card .tk-icon{font-size:1.75rem;margin-bottom:.6rem}
.tk-card h3{font-size:1rem;font-weight:700;color:var(--slate);margin:0 0 .4rem}
body.dark .tk-card h3{color:#f1f5f9}
.tk-card p{font-size:.84rem;color:#64748b;line-height:1.55;margin:0 0 .75rem}
.tk-card .tk-count{font-size:.72rem;font-weight:700;color:var(--indigo);text-transform:uppercase;letter-spacing:.04em}

/* ── FREE TOOLS ── */
.lp-free{padding:4.5rem 1.5rem;background:#fff}
body.dark .lp-free{background:#1e293b}
.free-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;max-width:900px;margin:0 auto}
.free-pill{display:flex;align-items:center;gap:.65rem;background:#f1f5f9;border:2px solid #e2e8f0;border-radius:10px;padding:.85rem 1rem;text-decoration:none;color:#334155;font-weight:600;font-size:.88rem;transition:border-color .15s,box-shadow .15s}
.free-pill:hover{border-color:var(--indigo);box-shadow:0 4px 15px rgba(99,102,241,.12)}
body.dark .free-pill{background:#0f172a;border-color:#334155;color:#cbd5e1}
.free-pill .fp-icon{font-size:1.2rem;flex-shrink:0}

/* ── PRICING ── */
.lp-pricing{padding:5rem 1.5rem;background:#f1f5f9}
body.dark .lp-pricing{background:#0f172a}
.lp-pricing .pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;max-width:1300px;margin:0 auto}

/* ── CTA ── */
.lp-cta{background:linear-gradient(135deg,#312e81,var(--indigo-dark));padding:5rem 1.5rem;text-align:center;color:#fff}
.lp-cta h2{font-size:clamp(1.75rem,3.5vw,2.4rem);font-weight:900;margin:0 0 .75rem}
.lp-cta p{font-size:1.05rem;color:#c7d2fe;max-width:520px;margin:0 auto 2rem;line-height:1.6}

/* ── FOOTER ── */
footer.lp-foot{background:var(--slate);color:#64748b;text-align:center;padding:2rem 1.5rem;font-size:.82rem}
footer.lp-foot a{color:#94a3b8;text-decoration:none}
footer.lp-foot a:hover{color:#fff}

/* ── NEWSLETTER ── */
.lp-newsletter{padding:4rem 1.5rem;background:#fff;text-align:center}
body.dark .lp-newsletter{background:#1e293b}
.lp-newsletter h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:var(--slate);margin:0 0 .4rem}
body.dark .lp-newsletter h2{color:#f1f5f9}
.lp-newsletter .nl-sub{color:#64748b;font-size:.95rem;max-width:460px;margin:0 auto 1.25rem}

/* ── INTEGRATIONS SECTION ── */
.lp-integrations{padding:4rem 1.5rem;max-width:900px;margin:0 auto}
.lp-int-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.lp-int-card{text-decoration:none;background:#1e293b;border:1px solid #334155;border-radius:14px;padding:1.5rem;text-align:center;transition:transform .15s,box-shadow .15s;display:block}
.lp-int-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.lp-int-card-icon{font-size:2rem;margin-bottom:.75rem}
.lp-int-card-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.35rem}
.lp-int-card-desc{font-size:.82rem;color:#94a3b8;line-height:1.5}

/* ── AI VISIBILITY BANNER ── */
.ai-vis-banner{background:linear-gradient(135deg,#312e81,var(--indigo-dark));border-radius:20px;max-width:960px;margin:0 auto;padding:3rem 2.5rem;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}

/* ── AI CHAT AGENT SECTION ── */
.lp-ai-chat-section{padding:5rem 1.5rem;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%)}
.ai-chat-container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:1100px;margin:0 auto;align-items:center}
.ai-chat-window{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ai-chat-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.ai-chat-messages{padding:1rem;display:grid;gap:.75rem}
.ai-chat-msg{border-radius:10px;padding:.75rem 1rem}
.ai-chat-msg p{margin:0;font-size:.82rem;color:#e0e7ff;line-height:1.6}
.ai-chat-msg p strong{color:#fff}
.ai-chat-user{background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.2)}
.ai-chat-ai{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.ai-chat-issues{display:grid;gap:.35rem;margin:.5rem 0}
.ai-issue{font-size:.78rem;padding:.4rem .6rem;border-radius:6px}
.ai-issue.critical{background:rgba(239,68,68,.12);color:#fca5a5}
.ai-issue.warning{background:rgba(245,158,11,.12);color:#fcd34d}
.ai-chat-input-mock{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
@keyframes ai-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════ */
@media(max-width:768px){
  .lp-hamburger{display:block}
  .lp-nav .links{display:none;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:280px;background:#000;padding:4rem 1.5rem 2rem;gap:1.5rem;z-index:99999;box-shadow:-4px 0 20px rgba(0,0,0,.6)}
  .lp-nav .links.open{display:flex}
  .lp-nav .links .lp-close{display:block;position:absolute;top:1rem;right:1rem;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:8px}
  .lp-nav .links a{font-size:1.1rem;color:#fff;font-weight:600;padding:.5rem 0;display:block}
  .lp-hero{padding:3rem 1rem 3.5rem}
  .hero-btns{flex-direction:column;align-items:center}
  .hero-btns a{width:100%;max-width:320px;text-align:center;display:block}
  .hero-demo{margin:1.5rem auto 0 !important;padding:1rem 1.25rem}
  .demo-results{grid-template-columns:repeat(3,1fr) !important;gap:.4rem}
  .proof-inner{grid-template-columns:repeat(2,1fr);gap:1rem}
  .steps-3{grid-template-columns:1fr;gap:1.5rem}
  .showcase-grid{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:1fr}
  .lp-pricing .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .ai-vis-banner{grid-template-columns:1fr !important;text-align:center}
  .ai-vis-banner>div:first-child{text-align:center}
  .lp-int-grid{grid-template-columns:1fr}
  .ai-chat-container{grid-template-columns:1fr}
  .ai-chat-text{text-align:center}
  .ai-chat-text a{display:inline-block}
}
@media(max-width:480px){
  .lp-hero{padding:2rem .75rem 2.5rem}
  .lp-hero h1{font-size:1.65rem}
  .proof-inner{grid-template-columns:repeat(2,1fr)}
  .proof-v{font-size:1.65rem}
  .lp-pricing .pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .sec-head h2{font-size:1.35rem}
  .sec-head p{font-size:.88rem}
  .lp-how,.lp-showcase,.lp-toolkits,.lp-free,.lp-pricing,.lp-cta,.lp-newsletter{padding:3rem 1rem}
  .free-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .proof-inner{grid-template-columns:1fr}
  .lp-hero h1{font-size:1.4rem}
  .demo-results{grid-template-columns:1fr !important}
}

/* ══════════════════════════════════════════════════
   LIGHT-MODE FIX: Override global style.css rules
   that force dark text on landing page dark sections.
   These must come AFTER style.css loads (landing.css
   is linked second) and use body:not(.dark) + higher
   specificity to beat the global !important rules.
   ══════════════════════════════════════════════════ */

/* --- Nav --- */
body:not(.dark) .lp-nav{background:rgba(15,23,42,.97) !important}
body:not(.dark) .lp-nav .brand{color:#fff !important}
body:not(.dark) .lp-nav .links a{color:#94a3b8 !important}
body:not(.dark) .lp-nav .links a:hover{color:#fff !important}
body:not(.dark) .lp-nav .links .cta-nav{color:#fff !important}
body:not(.dark) .lp-hamburger{color:#94a3b8 !important}

/* --- Hero (dark gradient background) --- */
body:not(.dark) .lp-hero h1{color:#fff !important}
body:not(.dark) .lp-hero h1 em{color:#a5b4fc !important}
body:not(.dark) .lp-hero .hero-sub{color:#cbd5e1 !important}
body:not(.dark) .lp-hero .btn-ghost{color:#fff !important}
body:not(.dark) .lp-hero a.btn-primary{color:#fff !important}
body:not(.dark) .hero-demo{color:#fff !important}
body:not(.dark) .hero-demo .demo-search-bar .q{color:#94a3b8 !important}
body:not(.dark) .hero-demo .demo-btn{color:#fff !important}
body:not(.dark) .hero-demo .demo-stat .lbl{color:#94a3b8 !important}
body:not(.dark) .hero-demo .demo-stat .num{color:#fff !important}
body:not(.dark) .hero-demo p{color:#94a3b8 !important}
body:not(.dark) .hero-demo a{color:#a5b4fc !important}

/* --- Proof bar (indigo background) --- */
body:not(.dark) .proof-bar .proof-v{color:#fff !important}
body:not(.dark) .proof-bar .proof-l{color:#c7d2fe !important}

/* --- AI Chat section (dark gradient) --- */
body:not(.dark) .lp-ai-chat-section h2{color:#fff !important}
body:not(.dark) .lp-ai-chat-section h3{color:#fff !important}
body:not(.dark) .lp-ai-chat-section p{color:#cbd5e1 !important}
body:not(.dark) .lp-ai-chat-section li{color:#cbd5e1 !important}
body:not(.dark) .lp-ai-chat-section a{color:#a5b4fc !important}
body:not(.dark) .lp-ai-chat-section a.btn-primary{color:#fff !important}
body:not(.dark) .lp-ai-chat-section strong{color:#fff !important}
body:not(.dark) .ai-chat-header{color:#94a3b8 !important}
body:not(.dark) .ai-chat-header p{color:#94a3b8 !important}
body:not(.dark) .ai-chat-header span{color:#94a3b8 !important}
body:not(.dark) .ai-chat-msg p{color:#e0e7ff !important}
body:not(.dark) .ai-chat-msg p strong{color:#fff !important}
body:not(.dark) .ai-chat-msg .ai-issue{color:unset !important}
body:not(.dark) .ai-chat-input-mock{color:#64748b !important}
body:not(.dark) .ai-chat-input-mock p{color:#64748b !important}

/* --- Trust bar (dark background) --- */
body:not(.dark) .trust-bar{background:#0f172a !important}
body:not(.dark) .trust-bar .trust-headline{color:#64748b !important}
body:not(.dark) .trust-bar .trust-pill{background:#1e293b !important;color:#94a3b8 !important;border-color:#334155 !important}

/* --- AI Visibility banner (purple gradient) --- */
body:not(.dark) .ai-vis-banner h2{color:#fff !important}
body:not(.dark) .ai-vis-banner p{color:#c7d2fe !important}
body:not(.dark) .ai-vis-banner a{color:#a5b4fc !important}
body:not(.dark) .ai-vis-banner a.btn-primary{color:#fff !important}
body:not(.dark) .ai-vis-banner strong{color:#fff !important}
body:not(.dark) .ai-vis-banner span{color:unset !important}

/* --- CTA section (purple gradient) --- */
body:not(.dark) .lp-cta h2{color:#fff !important}
body:not(.dark) .lp-cta p{color:#c7d2fe !important}
body:not(.dark) .lp-cta a{color:#fff !important}
body:not(.dark) .lp-cta div{color:#a5b4fc !important}

/* --- All btn-primary links on landing page must stay white --- */
body:not(.dark) a.btn-primary{color:#fff !important}
body:not(.dark) .btn-primary{color:#fff !important}

/* --- Footer (dark background) --- */
body:not(.dark) footer.lp-foot{color:#64748b !important}
body:not(.dark) footer.lp-foot a{color:#94a3b8 !important}
body:not(.dark) footer.lp-foot p{color:#64748b !important}

/* --- Mobile hamburger menu (black background) --- */
@media(max-width:768px){
  body:not(.dark) .lp-nav .links{background:#000 !important}
  body:not(.dark) .lp-nav .links a{color:#fff !important;font-weight:600 !important}
  body:not(.dark) .lp-nav .links .lp-close{color:#fff !important}
}