:root{--bg:#0b1220;--panel:#111827;--muted:#64748b;--text:#0f172a;--white:#fff;--line:#e2e8f0;--soft:#f8fafc;--accent:#16a34a;--accent2:#f97316;--dark:#020617;--gold:#f59e0b;--blue:#2563eb;--rose:#e11d48;--violet:#7c3aed;--cyan:#0891b2;--shadow:0 24px 70px rgba(15,23,42,.14);--r:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}a{text-decoration:none;color:inherit}.wrap{width:min(1320px,calc(100% - 72px));margin:auto}.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.88)}.topin{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-weight:950;letter-spacing:-.04em;font-size:24px;display:inline-flex;flex-direction:column;line-height:1}.brand span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:850;margin-top:6px}.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.navlink,.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:9px 12px;background:transparent;font-size:13px;font-weight:850;color:#334155}.navlink:hover,.navlink.active{background:#f8fafc;border-color:var(--line);color:#020617}.menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 20px;font-weight:950;border:0;box-shadow:0 14px 30px rgba(15,23,42,.15);transition:.18s transform ease,.18s box-shadow ease;cursor:pointer}.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,23,42,.2)}.smallbtn{padding:10px 14px;font-size:13px}.btn.dark{background:#020617;color:#fff}.btn.green{background:#16a34a;color:#fff}.btn.orange{background:#f97316;color:#fff}.btn.blue{background:#2563eb;color:#fff}.btn.rose{background:#e11d48;color:#fff}.btn.violet{background:#7c3aed;color:#fff}.hero{padding:76px 0 46px;overflow:hidden}.grid{display:grid;grid-template-columns:1.04fr .96fr;gap:42px;align-items:center}.eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#334155}.eyebrow b{width:8px;height:8px;border-radius:50%;background:var(--accent);display:block}h1{font-size:clamp(42px,5.25vw,78px);line-height:.95;letter-spacing:-.075em;margin:20px 0 18px}h2{font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.055em;margin:0 0 14px}h3{font-size:22px;letter-spacing:-.035em;margin:0 0 10px}p{margin:0 0 14px}.lead{font-size:clamp(18px,2vw,22px);color:#475569;max-width:820px}.heroactions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}.trust div,.card,.mini,.stat,.price{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 14px 40px rgba(15,23,42,.06)}.trust strong{display:block;font-size:20px;letter-spacing:-.05em}.trust span,.small{color:#64748b;font-size:14px}.mock{position:relative;min-height:560px;border-radius:36px;padding:24px;background:linear-gradient(145deg,#f8fafc,#fff);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}.phone{width:min(330px,78%);margin:24px auto;border-radius:38px;background:#020617;padding:14px;box-shadow:0 30px 80px rgba(2,6,23,.35);transform:rotate(-2deg)}.screen{border-radius:28px;background:#fff;overflow:hidden;min-height:500px;color:#0f172a}.screenbar{height:44px;background:#f1f5f9;display:flex;gap:6px;align-items:center;padding:0 16px}.dot{width:8px;height:8px;background:#94a3b8;border-radius:50%}.product{padding:18px}.product-img{height:170px;border-radius:24px;background:linear-gradient(135deg,#dbeafe,#fef3c7);display:flex;align-items:center;justify-content:center;font-size:56px}.price-tag{font-size:30px;font-weight:950;letter-spacing:-.06em}.cod{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.cod span{padding:10px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;font-weight:900}.orderbox{background:#f8fafc;border:1px dashed #94a3b8;padding:14px;border-radius:18px;margin-top:12px}.section{padding:76px 0}.section.tight{padding:52px 0}.center{text-align:center}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.cards.two-col{grid-template-columns:repeat(2,1fr)}.demo-card{display:flex;flex-direction:column;min-height:100%}.demo-card .pill{margin-top:auto;align-self:flex-start;background:#fff}.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.mini{display:flex;gap:14px;align-items:flex-start}.icon{width:42px;height:42px;border-radius:14px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.stat b{font-size:28px;letter-spacing:-.05em;display:block}.band{border-radius:34px;padding:42px;background:#020617;color:#fff;box-shadow:var(--shadow)}.band .lead,.band .small{color:#cbd5e1}.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.price.featured{border:2px solid var(--accent);transform:scale(1.02)}.price .amount{font-size:42px;font-weight:950;letter-spacing:-.07em;margin:8px 0}.list{display:grid;gap:10px;margin:18px 0}.check{display:flex;gap:10px}.check:before{content:'✓';font-weight:950;color:var(--accent)}.notice{background:#ecfdf5;border:1px solid #bbf7d0;padding:12px 14px;border-radius:16px;color:#14532d;font-size:13px;margin-top:18px}.taggrid{display:flex;gap:8px;flex-wrap:wrap}.taggrid span{background:#eef2ff;color:#3730a3;padding:8px 10px;border-radius:999px;font-weight:900;font-size:12px}.table{display:grid;gap:10px}.row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px;align-items:center}.row>div{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.row.head>div{font-weight:950;background:#f8fafc}.floating{position:absolute;border-radius:24px;background:#fff;border:1px solid var(--line);padding:14px;box-shadow:0 20px 50px rgba(15,23,42,.15);font-weight:900}.f1{left:12px;top:58px}.f2{right:12px;bottom:58px}.f3{right:38px;top:110px}.platform-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:38px}.platform-heading:first-child{margin-top:0}.strip{background:#f8fafc;border-block:1px solid var(--line)}.contact-panel{border-radius:34px;background:radial-gradient(circle at top left,#dcfce7,transparent 34%),linear-gradient(135deg,#fff,#f8fafc);padding:42px;border:1px solid var(--line);box-shadow:var(--shadow)}.contact-steps{counter-reset:step;display:grid;gap:12px}.contact-steps div{padding:15px;border:1px solid var(--line);border-radius:18px;background:#fff}.contact-steps div:before{counter-increment:step;content:counter(step);display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;background:#020617;color:#fff;font-weight:900;margin-right:8px}.footer{padding:44px 0 24px;border-top:1px solid var(--line);color:#64748b;font-size:14px;background:#f8fafc}.footergrid{display:grid;grid-template-columns:1.1fr 1.3fr .8fr;gap:24px}.footer h3{color:#0f172a}.legal{border-top:1px solid var(--line);padding-top:20px;margin-top:24px;font-size:12px}.dark-theme{background:#020617;color:#fff}.dark-theme .top{background:rgba(2,6,23,.84);border-color:rgba(148,163,184,.25)}.dark-theme .brand,.dark-theme h1,.dark-theme h2,.dark-theme h3{color:#fff}.dark-theme .navlink{color:#cbd5e1}.dark-theme .navlink:hover,.dark-theme .navlink.active,.dark-theme .pill,.dark-theme .eyebrow,.dark-theme .card,.dark-theme .mini,.dark-theme .stat,.dark-theme .price,.dark-theme .trust div{background:rgba(15,23,42,.86);border-color:rgba(148,163,184,.24);color:#fff}.dark-theme .lead,.dark-theme .small,.dark-theme .trust span{color:#cbd5e1}.dark-theme .mock{background:linear-gradient(145deg,#0f172a,#020617);border-color:rgba(148,163,184,.24)}.dark-theme .row>div{background:#0f172a;border-color:rgba(148,163,184,.25)}.dark-theme .notice{background:rgba(22,163,74,.12);color:#bbf7d0;border-color:rgba(187,247,208,.25)}.dark-theme .footer{background:#020617;border-color:rgba(148,163,184,.24)}.dark-theme .footer h3{color:#fff}.dark-theme .footer .brand{color:#fff}.warm{background:#fff7ed}.warm .top{background:rgba(255,247,237,.9)}.warm .mock{background:linear-gradient(145deg,#ffedd5,#fff)}.warm .product-img{background:linear-gradient(135deg,#fed7aa,#fff7ed)}.luxury{background:#fbf7ef}.luxury .top{background:rgba(251,247,239,.9)}.luxury .mock{background:linear-gradient(145deg,#111827,#78350f);color:#fff}.luxury .product-img{background:linear-gradient(135deg,#fde68a,#fff7ed)}.electric{background:#f8fafc}.electric .mock{background:radial-gradient(circle at 20% 20%,#cffafe,transparent 30%),linear-gradient(145deg,#eef2ff,#fff)}.electric .product-img{background:linear-gradient(135deg,#c7d2fe,#cffafe)}.urdu .urdu-line{font-size:20px;font-weight:900;color:#0f172a}.skip{position:absolute;left:-9999px}.skip:focus{left:18px;top:18px;background:#fff;padding:10px 14px;z-index:999;border-radius:10px}.sr-only{position:absolute;left:-9999px}
@media(max-width:900px){.menu-toggle{display:block}.topin{min-height:auto;padding:14px 0;align-items:center}.nav{display:none;width:100%;padding:8px 0 4px}.nav-open .nav{display:flex;flex-direction:column;align-items:stretch}.navlink,.smallbtn{justify-content:center}.grid,.two,.pricing,.footergrid{grid-template-columns:1fr}.cards,.cards.two-col,.stats,.trust{grid-template-columns:1fr}.hero{padding-top:44px}.mock{min-height:440px}.phone{width:92%;transform:none}.row{grid-template-columns:1fr}h1{font-size:44px}.cards{gap:14px}.platform-heading{display:block}.floating{display:none}.footer .btn{width:100%}}


/* WhatsApp conversion layer */
.btn.whatsapp,.whatsapp-float{background:#16a34a;color:#fff}.btn.backup{background:#fff;color:#0f172a;border:1px solid var(--line);box-shadow:none}.contact-note{font-size:13px;color:#64748b;margin-top:10px}.contact-note strong{color:#0f172a}.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:60;border-radius:999px;padding:13px 18px;font-weight:950;box-shadow:0 18px 42px rgba(22,163,74,.35);border:1px solid rgba(255,255,255,.55)}.whatsapp-float:before{content:'💬';margin-right:8px}.dark-theme .btn.backup{background:#0f172a;color:#fff;border-color:rgba(148,163,184,.28)}.dark-theme .contact-note strong{color:#fff}@media(max-width:900px){.whatsapp-float{left:18px;right:18px;text-align:center;justify-content:center;display:flex}.footer{padding-bottom:84px}}

/* === Customer-facing contrast fix: dark theme nested light surfaces === */
.dark-theme .screen,
.dark-theme .screen .product,
.dark-theme .screen .product h3,
.dark-theme .screen .price-tag,
.dark-theme .screen .orderbox,
.dark-theme .screen .cod span {
  color:#0f172a;
}
.dark-theme .screen {
  background:#ffffff;
}
.dark-theme .screen .small {
  color:#64748b;
}
.dark-theme .screen .screenbar {
  background:#f1f5f9;
}
.dark-theme .screen .dot {
  background:#94a3b8;
}
.dark-theme .screen .cod span {
  background:#f8fafc;
  border-color:#e2e8f0;
}
.dark-theme .screen .orderbox {
  background:#f8fafc;
  border-color:#94a3b8;
}
.dark-theme .screen .btn.green {
  color:#ffffff;
}
.dark-theme .floating {
  background:rgba(15,23,42,.94);
  border-color:rgba(148,163,184,.28);
  color:#ffffff;
}
.dark-theme .contact-panel {
  color:#0f172a;
}
.dark-theme .contact-panel h2,
.dark-theme .contact-panel h3,
.dark-theme .contact-panel strong {
  color:#0f172a;
}
.dark-theme .contact-panel .lead,
.dark-theme .contact-panel .small {
  color:#475569;
}
.dark-theme .contact-panel .contact-steps div {
  background:#ffffff;
  color:#0f172a;
  border-color:#e2e8f0;
}
.dark-theme .contact-panel .btn.dark {
  background:#020617;
  color:#ffffff;
}
.dark-theme .hero .btn.dark {
  background:#ffffff;
  color:#020617;
}
.dark-theme .phone {
  border:1px solid rgba(255,255,255,.12);
}


/* === Visual concept preview blocks === */
.concept-section{
  position:relative;
  overflow:hidden;
}
.concept-section:before{
  content:"";
  position:absolute;
  inset:10% auto auto -120px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
  filter:blur(30px);
  pointer-events:none;
}
.concept-grid{
  align-items:center;
}
.concept-frame{
  position:relative;
  display:block;
  border-radius:28px;
  padding:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 90px rgba(0,0,0,.35);
  text-decoration:none;
  transform:translateZ(0);
}
.concept-frame picture,
.concept-frame img{
  display:block;
  width:100%;
}
.concept-frame img{
  height:auto;
  max-height:760px;
  object-fit:cover;
  object-position:top center;
  border-radius:20px;
  background:#0f172a;
}
.concept-frame:hover{
  transform:translateY(-3px);
}
.concept-badge{
  position:absolute;
  z-index:2;
  top:24px;
  right:24px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
  color:#fff;
  font-weight:800;
  font-size:13px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.preview-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.preview-points span{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#e2e8f0;
  font-size:13px;
  font-weight:800;
}
@media (max-width:760px){
  .concept-frame{border-radius:20px;padding:8px}
  .concept-frame img{border-radius:14px;max-height:560px}
  .concept-badge{top:16px;right:16px;font-size:12px;padding:8px 11px}
}

/* === Preview thumbnail sizing + contrast hardening === */
.concept-section {
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(248,250,252,.92));
}

.concept-section .lead {
  color: #475569;
}

.concept-section .concept-grid {
  gap: 42px;
}

.concept-thumb-frame {
  width: min(100%, 520px);
  margin-inline: auto;
}

.concept-frame {
  color: #0f172a;
}

.concept-frame picture {
  display: block;
}

.concept-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
}

.concept-badge {
  color: #ffffff;
}

.concept-section .preview-points span {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

/* Prevent white-on-white in dark feature bands and light nested cards */
.band .stat,
.dark-theme .band .stat,
.luxury .band .stat,
.electric .band .stat,
.warm .band .stat,
.urdu .band .stat {
  background: rgba(255,255,255,.97);
  border-color: rgba(226,232,240,.96);
  color: #0f172a;
}

.band .stat *,
.dark-theme .band .stat *,
.luxury .band .stat *,
.electric .band .stat *,
.warm .band .stat *,
.urdu .band .stat * {
  color: #0f172a;
}

.band .stat .small,
.dark-theme .band .stat .small,
.luxury .band .stat .small,
.electric .band .stat .small,
.warm .band .stat .small,
.urdu .band .stat .small {
  color: #475569;
}

/* Light mockups should always keep dark readable text, regardless of parent theme */
.screen,
.screen *,
.product,
.product *,
.orderbox,
.orderbox *,
.cod span,
.contact-panel,
.contact-panel * {
  color: #0f172a;
}

.screen .small,
.product .small,
.orderbox .small,
.contact-panel .lead,
.contact-panel .small {
  color: #475569;
}

.screen .btn,
.product .btn,
.contact-panel .btn.green,
.contact-panel .btn.orange,
.contact-panel .btn.blue,
.contact-panel .btn.rose,
.contact-panel .btn.violet {
  color: #ffffff;
}

.contact-panel .btn.dark {
  background: #020617;
  color: #ffffff;
}

.electric .concept-frame {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
  border-color: rgba(191,219,254,.95);
  box-shadow: 0 24px 70px rgba(37,99,235,.14);
}

.electric .concept-badge {
  background: rgba(37,99,235,.94);
}

.electric .preview-points span {
  color: #1e3a8a;
}

@media(max-width:900px){
  .concept-section .concept-grid {
    gap: 26px;
  }
  .concept-thumb-frame {
    width: min(100%, 430px);
  }
  .concept-frame img {
    max-height: 460px;
  }
}



/* === Wix fashion / luxury visual preview styling === */
.luxury .concept-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(225,29,72,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,247,237,.82), rgba(255,255,255,.94));
}

.luxury .concept-frame {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,242,.92));
  border-color: rgba(251,207,232,.95);
  box-shadow: 0 24px 70px rgba(136,19,55,.14);
}

.luxury .concept-badge {
  background: rgba(159,18,57,.94);
  color: #ffffff;
}

.luxury .preview-points span {
  color: #881337;
  background: #ffffff;
  border-color: #fecdd3;
}

/* Keep preview thumbnails contained, never full-page height */
.concept-thumb-frame {
  width: min(100%, 520px);
  margin-inline: auto;
}

.concept-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
}

@media(max-width:900px){
  .concept-thumb-frame {
    width: min(100%, 430px);
  }
  .concept-frame img {
    max-height: 460px;
  }
}


/* === Global contrast hardening patch: light sections, dark themes, cards, buttons === */

/* Any intentionally light content area must keep dark readable text even inside dark/luxury/electric/warm page themes */
.concept-section,
.concept-section *,
.contact-panel,
.contact-panel *,
.policy-card,
.policy-card *,
.policy-hero,
.policy-hero *,
.error-card,
.error-card *,
.seo-map-card,
.seo-map-card *,
.local-seo-card,
.local-seo-card *,
.home-offer-card,
.home-offer-card *,
.home-demo-card,
.home-demo-card *,
.cert-panel,
.cert-panel *,
.demo-platform-title,
.demo-platform-title *,
.pain-card,
.pain-card *,
.platform-help .card,
.platform-help .card *,
.screen,
.screen *,
.product,
.product *,
.orderbox,
.orderbox *,
.cod span,
.cod span * {
  color: #0f172a;
}

/* Muted copy inside light cards should stay readable, not white or too pale */
.concept-section .lead,
.concept-section .small,
.concept-section p,
.contact-panel .lead,
.contact-panel .small,
.contact-panel p,
.policy-card p,
.policy-card li,
.error-card .lead,
.seo-map-card p,
.local-seo-card p,
.home-demo-copy p,
.home-offer-card p,
.cert-panel p,
.demo-platform-title p,
.pain-card p,
.platform-help .card p,
.screen .small,
.product .small,
.orderbox .small {
  color: #475569;
}

/* Buttons must preserve their intended contrast inside globally hardened light sections */
.btn.green,
.btn.orange,
.btn.blue,
.btn.rose,
.btn.violet,
.screen .btn.green,
.screen .btn.orange,
.screen .btn.blue,
.screen .btn.rose,
.screen .btn.violet,
.contact-panel .btn.green,
.contact-panel .btn.orange,
.contact-panel .btn.blue,
.contact-panel .btn.rose,
.contact-panel .btn.violet,
.home-offer-card .btn.green,
.home-offer-card .btn.orange,
.home-offer-card .btn.blue,
.home-offer-card .btn.rose,
.home-offer-card .btn.violet {
  color: #ffffff !important;
}

.btn.dark,
.contact-panel .btn.dark,
.home-offer-card .btn.dark,
.concept-section .btn.dark {
  background: #020617;
  color: #ffffff !important;
}

/* Dark page theme: light preview sections must not inherit white headings */
.dark-theme .concept-section h1,
.dark-theme .concept-section h2,
.dark-theme .concept-section h3,
.dark-theme .concept-section p,
.dark-theme .concept-section .lead,
.dark-theme .concept-section .small,
.dark-theme .concept-section .eyebrow,
.dark-theme .concept-section .preview-points span {
  color: #0f172a;
}

.dark-theme .concept-section .lead,
.dark-theme .concept-section .small,
.dark-theme .concept-section p {
  color: #475569;
}

.dark-theme .concept-section .eyebrow {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* Dark theme pills/cards should not become dark-on-dark */
.dark-theme .pill {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #ffffff;
}
.dark-theme .muted-pill {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
  color: #e2e8f0;
}

/* Light cards inside dark theme must remain light and readable when explicitly designed as white surfaces */
.dark-theme .home-demo-card,
.dark-theme .home-demo-card *,
.dark-theme .pain-card,
.dark-theme .pain-card *,
.dark-theme .platform-help .card,
.dark-theme .platform-help .card *,
.dark-theme .cert-panel,
.dark-theme .cert-panel *,
.dark-theme .demo-platform-title,
.dark-theme .demo-platform-title *,
.dark-theme .local-seo-card,
.dark-theme .local-seo-card *,
.dark-theme .seo-map-card,
.dark-theme .seo-map-card * {
  color: #0f172a;
}
.dark-theme .home-demo-card p,
.dark-theme .pain-card p,
.dark-theme .platform-help .card p,
.dark-theme .cert-panel p,
.dark-theme .demo-platform-title p,
.dark-theme .local-seo-card p,
.dark-theme .seo-map-card p {
  color: #475569;
}

/* White/light card backgrounds should remain white; prevents theme inheritance from making white text on white or dark text on dark */
.home-demo-card,
.pain-card,
.platform-help .card,
.cert-panel,
.demo-platform-title,
.local-seo-card,
.seo-map-card,
.home-offer-card,
.contact-panel,
.policy-card,
.error-card {
  background-color: #ffffff;
}

/* Feature band stats: dark background band with light stat cards */
.band {
  color: #ffffff;
}
.band h1,
.band h2,
.band h3 {
  color: #ffffff;
}
.band .lead,
.band .small,
.band p {
  color: #cbd5e1;
}
.band .stat,
.band .stat * {
  color: #0f172a !important;
}

/* Nav and footer: keep visible across themes */
.dark-theme .top .brand span,
.dark-theme .footer .brand span {
  color: #cbd5e1;
}
.dark-theme .footer,
.dark-theme .footer p,
.dark-theme .footer a,
.dark-theme .legal {
  color: #cbd5e1;
}
.dark-theme .footer h3 {
  color: #ffffff;
}

/* Luxury/warm/electric pages: keep light section cards readable */
.luxury .concept-section h1,
.luxury .concept-section h2,
.luxury .concept-section h3,
.electric .concept-section h1,
.electric .concept-section h2,
.electric .concept-section h3,
.warm .concept-section h1,
.warm .concept-section h2,
.warm .concept-section h3,
.urdu .concept-section h1,
.urdu .concept-section h2,
.urdu .concept-section h3 {
  color: #0f172a;
}

/* Preview point pills must be readable in every theme */
.preview-points span {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}
.dark-theme .preview-points span {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

/* Keep generated local SEO hero dark content readable */
.local-seo-hero,
.local-seo-hero h1,
.local-seo-hero h2,
.local-seo-hero h3 {
  color: #ffffff;
}
.local-seo-hero .lead {
  color: #e2e8f0;
}
.local-seo-hero .trust div {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #ffffff;
}
.local-seo-hero .trust span {
  color: #cbd5e1;
}

/* Urdu callout and local SEO band remain dark with readable text */
.urdu-callout,
.urdu-callout h1,
.urdu-callout h2,
.urdu-callout h3,
.local-seo-band,
.local-seo-band h1,
.local-seo-band h2,
.local-seo-band h3 {
  color: #ffffff;
}
.urdu-callout .lead,
.urdu-callout p,
.local-seo-band .lead,
.local-seo-band p {
  color: #cbd5e1;
}
.urdu-callout .brief-list div,
.local-seo-band .brief-list div {
  color: #ffffff;
}

/* Accessibility: visible focus without breaking design */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}
/* === Dark-theme light-section contrast guard ===
   Fixes white headings/text inside light sections on dark-theme pages.
   Keep this near the end of src/static/style.css so it overrides the broad
   .dark-theme h1/h2/h3 color rule without editing each HTML page.
*/

.dark-theme .strip {
  color:#0f172a;
  background:#f8fafc;
}

/* Main section headings directly inside light strip sections */
.dark-theme .strip > .wrap > h1,
.dark-theme .strip > .wrap > h2,
.dark-theme .strip > .wrap > h3,
.dark-theme .strip .wrap.center > h1,
.dark-theme .strip .wrap.center > h2,
.dark-theme .strip .wrap.center > h3,
.dark-theme .strip .local-section-title h1,
.dark-theme .strip .local-section-title h2,
.dark-theme .strip .local-section-title h3 {
  color:#0f172a;
}

/* Main explanatory text directly inside light strip sections */
.dark-theme .strip > .wrap > p,
.dark-theme .strip > .wrap > .lead,
.dark-theme .strip .wrap.center > p,
.dark-theme .strip .wrap.center > .lead,
.dark-theme .strip .local-section-title p,
.dark-theme .strip .local-section-title .lead {
  color:#475569;
}

/* Keep cards inside light strips readable even when page body is dark-theme */
.dark-theme .strip .card,
.dark-theme .strip .mini,
.dark-theme .strip .stat,
.dark-theme .strip .price,
.dark-theme .strip .trust div {
  background:#ffffff;
  border-color:#e2e8f0;
  color:#0f172a;
}

.dark-theme .strip .card h1,
.dark-theme .strip .card h2,
.dark-theme .strip .card h3,
.dark-theme .strip .mini h1,
.dark-theme .strip .mini h2,
.dark-theme .strip .mini h3,
.dark-theme .strip .stat h1,
.dark-theme .strip .stat h2,
.dark-theme .strip .stat h3,
.dark-theme .strip .price h1,
.dark-theme .strip .price h2,
.dark-theme .strip .price h3,
.dark-theme .strip .trust strong {
  color:#0f172a;
}

.dark-theme .strip .card p,
.dark-theme .strip .card .small,
.dark-theme .strip .mini p,
.dark-theme .strip .mini .small,
.dark-theme .strip .stat p,
.dark-theme .strip .stat .small,
.dark-theme .strip .price p,
.dark-theme .strip .price .small,
.dark-theme .strip .trust span {
  color:#64748b;
}

/* Concept preview sections on dark-theme pages are light-content areas */
.dark-theme .concept-section {
  color:#0f172a;
}

.dark-theme .concept-section .concept-grid h1,
.dark-theme .concept-section .concept-grid h2,
.dark-theme .concept-section .concept-grid h3 {
  color:#0f172a;
}

.dark-theme .concept-section .concept-grid p,
.dark-theme .concept-section .concept-grid .lead,
.dark-theme .concept-section .concept-grid .small {
  color:#475569;
}

/* Eyebrow badges inside light sections should look like light-section badges */
.dark-theme .strip .eyebrow,
.dark-theme .concept-section .eyebrow {
  background:#ffffff;
  border-color:#e2e8f0;
  color:#334155;
}

.dark-theme .strip .eyebrow b,
.dark-theme .concept-section .eyebrow b {
  background:#16a34a;
}
/* === Dark-theme hero secondary button contrast fix ===
   Fixes white-on-white secondary buttons such as "See page strategy"
   on dark-theme hero sections.
*/

.dark-theme .hero .btn.dark,
.dark-theme .service-hero .btn.dark,
.dark-theme .lp-hero .btn.dark {
  background:#ffffff;
  color:#020617;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}

.dark-theme .hero .btn.dark:hover,
.dark-theme .service-hero .btn.dark:hover,
.dark-theme .lp-hero .btn.dark:hover {
  background:#f8fafc;
  color:#020617;
}
/* === Force readable secondary dark buttons inside dark hero sections === */
body.dark-theme .hero .heroactions a.btn.dark,
body.dark-theme .hero .heroactions .btn.dark,
body.dark-theme main .hero .heroactions a.btn.dark,
body.dark-theme main .hero .heroactions .btn.dark {
  background:#ffffff !important;
  color:#020617 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28) !important;
}

body.dark-theme .hero .heroactions a.btn.dark:hover,
body.dark-theme .hero .heroactions .btn.dark:hover,
body.dark-theme main .hero .heroactions a.btn.dark:hover,
body.dark-theme main .hero .heroactions .btn.dark:hover {
  background:#f8fafc !important;
  color:#020617 !important;
}

/* === Layout width + typography adjustment v9 ===
   Balanced desktop container: wider than the boxed 1180px version, calmer than the 1460px edge-heavy version.
   Main rules are patched above in the base CSS: .wrap 1320px with stronger side breathing room, moderated h1/h2 and lead text.
*/

/* === Brand logo/icon from existing /assets/previews/ file v8 === */
.brand-logo {
  flex-direction:row;
  align-items:center;
  gap:10px;
  letter-spacing:0;
}

.brand-logo img {
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  background:#ffffff;
  box-shadow:
    0 0 0 1px rgba(22,163,74,.35),
    0 8px 22px rgba(15,23,42,.16);
}

.brand-logo span {
  margin-top:0;
  font-size:11px;
  letter-spacing:.11em;
  line-height:1.25;
}

.site-footer .brand-logo img,
.footer-brand.brand-logo img {
  width:58px;
  height:58px;
}

@media(max-width:900px){
  .brand-logo img {
    width:42px;
    height:42px;
  }

  .brand-logo span {
    font-size:10px;
    max-width:160px;
  }
}


/* === Mobile breathing room for v9 balanced layout === */
@media(max-width:900px){.wrap{width:min(100% - 32px, 1320px)}}

/* === Generated footer polish v4 === */
.site-footer {
  padding: 64px 0 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(22,163,74,.09), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  color:#64748b;
}
.site-footer .footer-panel {
  border:1px solid #e2e8f0;
  border-radius:34px;
  padding:34px;
  background:rgba(255,255,255,.82);
  box-shadow:0 24px 70px rgba(15,23,42,.08);
}
.site-footer .footer-main {
  display:grid;
  grid-template-columns:1.15fr .9fr .72fr;
  gap:34px;
  align-items:start;
}
.site-footer .footer-col + .footer-col {
  border-left:1px solid #e2e8f0;
  padding-left:34px;
}
.site-footer .footer-brand {
  margin-bottom:14px;
  color:#0f172a;
}
.site-footer .footer-brand span {
  color:#64748b;
}
.site-footer h3 {
  color:#0f172a;
  font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.055em;
  margin:0 0 16px;
}
.site-footer p {
  max-width:460px;
  color:#64748b;
}
.site-footer .footer-kicker {
  display:inline-flex;
  margin-bottom:9px;
  padding:7px 10px;
  border-radius:999px;
  background:#ecfdf5;
  color:#166534;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.site-footer .footer-mini-block {
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid #e2e8f0;
}
.site-footer .footer-demo-block h3,
.site-footer .footer-extra-block h3 {
  font-size:22px;
  margin-bottom:12px;
}
.site-footer .footer-link-list {
  display:grid;
  gap:10px 16px;
}
.site-footer .footer-link-list--demos {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.site-footer .footer-link-list--important {
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:22px;
}
.site-footer .footer-link {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  color:#334155;
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  padding:6px 0;
  border-radius:10px;
  transition:color .18s ease, transform .18s ease;
}
.site-footer .footer-link:hover {
  color:#16a34a;
  transform:translateX(2px);
}
.site-footer .footer-service-stack {
  display:grid;
  gap:12px;
  margin-top:18px;
}
.site-footer .footer-service-stack .footer-link {
  width:100%;
  padding:14px 15px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(15,23,42,.055);
}
.site-footer .footer-service-stack .footer-link:before {
  content:'→';
  margin-right:9px;
  color:#16a34a;
  font-weight:950;
}
.site-footer .footer-whatsapp {
  margin-top:4px;
  box-shadow:0 18px 42px rgba(22,163,74,.22);
}
.site-footer .footer-legal {
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid #e2e8f0;
  color:#64748b;
  font-size:13px;
}
.dark-theme .site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.13), transparent 30%),
    linear-gradient(180deg,#020617 0%,#07111f 100%);
  color:#cbd5e1;
  border-color:rgba(148,163,184,.24);
}
.dark-theme .site-footer .footer-panel {
  background:rgba(15,23,42,.78);
  border-color:rgba(148,163,184,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.dark-theme .site-footer .footer-col + .footer-col,
.dark-theme .site-footer .footer-mini-block,
.dark-theme .site-footer .footer-legal {
  border-color:rgba(148,163,184,.24);
}
.dark-theme .site-footer h3,
.dark-theme .site-footer .footer-brand {
  color:#ffffff;
}
.dark-theme .site-footer .footer-brand span,
.dark-theme .site-footer p,
.dark-theme .site-footer .footer-legal {
  color:#cbd5e1;
}
.dark-theme .site-footer .footer-link {
  color:#e2e8f0;
}
.dark-theme .site-footer .footer-link:hover {
  color:#86efac;
}
.dark-theme .site-footer .footer-service-stack .footer-link {
  background:rgba(2,6,23,.62);
  border-color:rgba(148,163,184,.24);
}
@media(max-width:900px){
  .site-footer { padding:42px 0 92px; }
  .site-footer .footer-panel { padding:24px; border-radius:26px; }
  .site-footer .footer-main { grid-template-columns:1fr; gap:26px; }
  .site-footer .footer-col + .footer-col { border-left:0; padding-left:0; border-top:1px solid #e2e8f0; padding-top:24px; }
  .dark-theme .site-footer .footer-col + .footer-col { border-color:rgba(148,163,184,.24); }
  .site-footer .footer-link-list--demos,
  .site-footer .footer-link-list--important { grid-template-columns:1fr; }
  .site-footer .footer-link { width:100%; }
  .site-footer .footer-whatsapp { width:100%; }
}