/* =========================================================================
   WebTechMitra — "Midnight SaaS" dark theme for Google Ads landing pages.
   Loaded only when a landing page sets $lp['ads'] (body.lp-dark).
   Scoped to .lp-dark so the light landing pages are unaffected.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --d-bg:#0a0e1a; --d-bg2:#0c1222; --d-panel:#111826; --d-panel2:#0e1524;
  --d-line:rgba(255,255,255,.08); --d-line2:rgba(255,255,255,.14);
  --d-ink:#e8eef8; --d-mut:#94a2ba; --d-mut2:#6f7d95;
  --em:#34d399; --em2:#22d3ee;
  --font-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-ui:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- base ---------- */
body.lp-dark{
  background:var(--d-bg);color:var(--d-mut);font-family:var(--font-ui);
  background-image:
    radial-gradient(1100px 600px at 88% -8%,rgba(52,211,153,.12),transparent 60%),
    radial-gradient(900px 560px at 6% -4%,rgba(56,120,255,.10),transparent 55%);
  background-attachment:fixed;
}
.lp-dark h1,.lp-dark h2,.lp-dark h3,.lp-dark h4{color:var(--d-ink);font-family:var(--font-display);letter-spacing:-.03em}
.lp-dark p{color:var(--d-mut)}
.lp-dark a{color:#bfe9db}
.lp-dark strong{color:var(--d-ink)}
.lp-dark .section{background:transparent;position:relative}
.lp-dark .section--soft{background:var(--d-bg2)}
.lp-dark .eyebrow{color:#8fe3c4}
.lp-dark .eyebrow .ico{fill:var(--em)}
.lp-dark .section-head p{color:var(--d-mut)}

/* ---------- buttons on dark ---------- */
.lp-dark .btn{box-shadow:none}
.lp-dark .btn--primary{--btn-bg:var(--em);--btn-fg:#04120c}
.lp-dark .btn--primary:hover{--btn-bg:#2bd39a}
.lp-dark .btn--ghost{--btn-bg:transparent;--btn-fg:#e8eef8;--btn-bd:var(--d-line2);box-shadow:none}
.lp-dark .btn--ghost:hover{--btn-bd:var(--em);--btn-fg:#fff}
.lp-dark .btn--brand{--btn-bg:#1e56d6;--btn-fg:#fff}
.lp-dark .btn--wa{--btn-bg:#1faf52;--btn-fg:#fff}

/* ---------- minimal ads header (rendered by landing.php) ---------- */
.lp-dark .lp-adbar{position:sticky;top:0;z-index:60;background:rgba(10,14,26,.82);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--d-line)}
.lp-dark .lp-adbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.lp-dark .lp-adbar .brand{display:inline-flex;align-items:center;color:#fff}
.lp-dark .lp-adbar .brand svg{height:34px;width:auto}
.lp-dark .lp-adbar .lp-adbar-actions{display:flex;align-items:center;gap:.7rem}
.lp-dark .lp-adbar .lp-phone{display:inline-flex;align-items:center;gap:.45rem;color:#e8eef8;font-weight:600;font-size:.95rem}
.lp-dark .lp-adbar .lp-phone .ico{width:1.05em;height:1.05em;fill:var(--em)}
.lp-dark .lp-adbar .btn{padding:.6rem 1.05rem;font-size:.92rem}
@media(max-width:600px){ .lp-dark .lp-adbar .lp-phone span{display:none} }

/* ================= HERO ================= */
.lp-dark .hero{border-bottom:1px solid var(--d-line);overflow:hidden;background:
  radial-gradient(900px 480px at 85% -10%,rgba(52,211,153,.14),transparent 60%),
  radial-gradient(700px 440px at 6% 0,rgba(56,120,255,.12),transparent 55%)}
.lp-dark .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--d-line) 1px,transparent 1px),linear-gradient(90deg,var(--d-line) 1px,transparent 1px);
  background-size:46px 46px;mask:radial-gradient(900px 520px at 28% 18%,#000,transparent 75%);
  -webkit-mask:radial-gradient(900px 520px at 28% 18%,#000,transparent 75%);opacity:.5}
.lp-dark .hero-grid{position:relative;grid-template-columns:1fr}
.lp-dark .hero .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.73rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#9fe9cf;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.28);
  padding:.5rem .9rem;border-radius:999px;margin-bottom:1.2rem}
.lp-dark .hero .eyebrow .ico{fill:var(--em)}
.lp-dark .hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4.8vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
.lp-dark .hero-title .hl{background:linear-gradient(100deg,var(--em),var(--em2));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:normal}
.lp-dark .hero-lead{color:var(--d-mut);max-width:560px}
.lp-dark .hero-assure{color:#aebbcf;font-weight:500}
.lp-dark .hero-assure .ico{fill:var(--em)}

/* ---------- form card (hero + wherever reused) ---------- */
.lp-dark .form-card{background:var(--d-panel);border:1px solid var(--d-line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.lp-dark .form-card h2,.lp-dark .form-card h3{color:var(--d-ink);font-family:var(--font-ui);font-weight:700}
.lp-dark .form-card > p{color:var(--d-mut)}
.lp-dark .form-next{color:#c8d2e0}
.lp-dark .form-next .ico{fill:var(--em)}
.lp-dark .field label{color:#dfe6f1}
.lp-dark .field input,.lp-dark .field select,.lp-dark .field textarea{background:#0b1220;border-color:var(--d-line2);color:#eef2f9}
.lp-dark .field input::placeholder,.lp-dark .field textarea::placeholder{color:var(--d-mut2)}
.lp-dark .field select,.lp-dark .field select option{background:#0b1220;color:#eef2f9}
.lp-dark .form-consent{color:var(--d-mut2)}
.lp-dark .form-note{color:var(--d-mut)}
.lp-dark .form-note .ico{fill:var(--d-mut)}
.lp-dark .field .err{color:#ff8f7a}
.lp-dark .form-status{color:var(--d-ink)}

/* ================= BENEFITS (cards) ================= */
.lp-dark .card{background:var(--d-panel);border:1px solid var(--d-line);box-shadow:none}
.lp-dark .card:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.6);border-color:var(--d-line2)}
.lp-dark .card h3{color:var(--d-ink);font-family:var(--font-ui);font-weight:700}
.lp-dark .card p{color:var(--d-mut)}
.lp-dark .card-ico{background:rgba(56,120,255,.12)}
.lp-dark .card-ico .ico{fill:#7aa2ff}
.lp-dark .card--feature{border-top:3px solid var(--em)}

/* ================= WHAT'S INCLUDED ================= */
.lp-dark .checklist li{color:#cfe0f4}
.lp-dark .checklist .ico{fill:var(--em)}

/* ================= PORTFOLIO ================= */
.lp-dark .project{background:var(--d-panel);border:1px solid var(--d-line);box-shadow:none}
.lp-dark .project:hover{box-shadow:0 18px 44px -18px rgba(0,0,0,.6)}
.lp-dark .project-thumb{background:#0c1220}
.lp-dark .project-body .kind{color:#7aa2ff}
.lp-dark .project-body h3{color:var(--d-ink);font-family:var(--font-ui);font-weight:700}
.lp-dark .project-body p{color:var(--d-mut)}
.lp-dark .project-body .card-link{color:var(--em)}
.lp-dark .demo-badge{background:#e8b450;color:#20160a}
.lp-dark .demo-link{border-color:var(--d-line2);color:#e8eef8}
.lp-dark .demo-link .ico{fill:var(--em)}
.lp-dark .demo-link:hover{border-color:var(--em);color:#fff}

/* ================= PRICING ================= */
.lp-dark .price{background:var(--d-panel);border:1px solid var(--d-line);box-shadow:none}
.lp-dark .price--featured{border:1.5px solid var(--em);box-shadow:0 0 0 1px rgba(52,211,153,.2),0 30px 60px -30px rgba(0,0,0,.7)}
.lp-dark .price-flag{background:var(--em);color:#04120c}
.lp-dark .price h3{color:var(--d-ink);font-family:var(--font-ui);font-weight:700}
.lp-dark .price .for{color:var(--d-mut)}
.lp-dark .price .amount{color:#fff}
.lp-dark .price .amount small,.lp-dark .price .note{color:var(--d-mut2)}
.lp-dark .price ul li{color:#c8d2e0}
.lp-dark .price ul .ico{fill:var(--em)}
.lp-dark .price ul li.off{color:var(--d-mut2)}
.lp-dark .price ul li.off .ico{fill:rgba(255,255,255,.18)}
.lp-dark .price-foot{color:var(--d-mut)}
.lp-dark .price-foot strong{color:#fff}
.lp-dark .price-foot a{color:var(--em)}

/* ================= FAQ ================= */
.lp-dark .faq-item{background:var(--d-panel);border:1px solid var(--d-line)}
.lp-dark .faq-q{color:var(--d-ink)}
.lp-dark .faq-q .ico{fill:var(--em)}
.lp-dark .faq-a-inner{color:var(--d-mut)}

/* ================= FOOTER already dark in base — keep ================= */

/* ================= RESPONSIVE ================= */
@media(min-width:560px){
  .lp-dark .grid-4{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .lp-dark .hero-grid{grid-template-columns:1.05fr .95fr}
  .lp-dark .grid-4{grid-template-columns:repeat(4,1fr)}
  .lp-dark .portfolio-grid{grid-template-columns:repeat(3,1fr)}
  .lp-dark .price-grid{grid-template-columns:repeat(3,1fr)}
}