/* ===========================================================================
   posplus.pk — static template design system
   Colorful but professional: calm ink/paper neutrals everywhere, colour comes
   from the product accents and the animated hero. No frameworks, no fonts to
   load — system stack, pure CSS.
   =========================================================================== */

:root {
  /* Ink & paper */
  --ink: #0f1c14;
  --ink-soft: #44554a;
  --ink-faint: #94a39a;
  --paper: #f9fbf8;
  --card: #ffffff;
  --line: #e6ece7;

  /* Brand — Pakistan green, with the product colours as the supporting cast */
  --brand: #16a34a;            /* posplus green */
  --brand-deep: #15803d;
  --navy-1: #04130a;           /* hero deep-forest sky */
  --navy-2: #0b2916;

  /* Product accents */
  --hardware: #f59e0b;
  --paint-a: #7c3aed;
  --paint-b: #d946ef;
  --shoes: #b45309;
  --plants: #65a30d;
  --pharmacy: #0d9488;
  --whatsapp: #16a34a;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 4px 16px rgb(16 24 40 / .06);
  --shadow-2: 0 4px 8px rgb(16 24 40 / .06), 0 16px 40px rgb(16 24 40 / .12);

  --wrap: 1120px;
  --ease: cubic-bezier(.22, .8, .26, .99);
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: 84px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; }
.section { padding-block: 88px; }
.section-head { text-align: center; max-width: 640px; margin-inline: auto; }
.section-head p { color: var(--ink-soft); margin: 12px 0 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }

/* ---- buttons & chips ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgb(22 163 74 / .35); }
.btn-primary:hover { background: #22c55e; }
.btn-ghost { border-color: rgb(255 255 255 / .28); color: #fff; }
.btn-ghost:hover { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .06); }
.btn-ghost-dark { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost-dark:hover { border-color: var(--ink-faint); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 8px 24px rgb(22 163 74 / .35); }
.btn-whatsapp:hover { background: #15803d; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .92);
  border: 1px solid rgb(255 255 255 / .14);
}
.chip svg { width: 15px; height: 15px; color: #4ade80; }

/* Periodic light-sweep across a chip (the "Made in Pakistan" badge). */
.chip-shine { position: relative; overflow: hidden; border-color: rgb(255 255 255 / .28); }
.chip-shine::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / .45) 50%, transparent 80%);
  transform: translateX(-160%) skewX(-18deg);
  animation: chipShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chipShine {
  0% { transform: translateX(-160%) skewX(-18deg); }
  45%, 100% { transform: translateX(320%) skewX(-18deg); }
}

/* ---- nav ----------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 250 248 / .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 10px; }
.logo .word {
  /* One wordmark: gradient-filled letters with a fine darker border stroke. */
  color: var(--brand-deep);
  filter: drop-shadow(0 1px 1.5px rgb(22 163 74 / .3));
  transition: filter .15s;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo .word {
    background: linear-gradient(100deg, #14532d, #16a34a 55%, #4ade80);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgb(20 83 45 / .3);
  }
}
.logo:hover .word { filter: drop-shadow(0 1px 3px rgb(22 163 74 / .5)) brightness(1.08); }
.logo-mark { width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0; box-shadow: 0 2px 6px rgb(22 163 74 / .35); }
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.nav-links a { transition: color .15s; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
@media (max-width: 1360px) {
  .nav-links { gap: 14px; font-size: .88rem; }
  .nav-links a svg { width: 15px; height: 15px; }
}
.nav-links a svg { width: 16px; height: 16px; color: var(--brand); opacity: .85; transition: opacity .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover svg { opacity: 1; }
.nav .btn { padding: 9px 18px; font-size: .9rem; white-space: nowrap; }
.nav-product {
  /* the current product's name next to the logo — a soft chip in the
     product's own colours (from the page theme), not plain text */
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 5px 14px; border-radius: 999px;
  font-weight: 800; font-size: .85rem; letter-spacing: .01em;
  background: var(--p-chip-bg, #dcfce7); color: var(--p-chip-ink, #166534);
  border: 1px solid var(--p-chip-line, #86efac);
}
.nav-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger svg { width: 26px; height: 26px; }

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 20% 0%, var(--navy-2), var(--navy-1) 55%);
  color: #fff;
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  pointer-events: none; will-change: transform;
}
.hero-blob.b1 { width: 520px; height: 520px; background: #16a34a; top: -160px; left: -120px; animation: drift1 26s ease-in-out infinite alternate; }
.hero-blob.b2 { width: 460px; height: 460px; background: #0d9488; bottom: -200px; left: 32%; animation: drift2 32s ease-in-out infinite alternate; }
.hero-blob.b3 { width: 420px; height: 420px; background: #f59e0b; top: -80px; right: -140px; opacity: .35; animation: drift3 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(90px, 70px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-70px, -60px) scale(.92); } }
@keyframes drift3 { to { transform: translate(-50px, 90px) scale(1.1); } }

.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center; padding-block: 96px 110px;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem); font-weight: 800;
}
.hero h1 .accent {
  background: linear-gradient(92deg, #4ade80, #2dd4bf 55%, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: rgb(255 255 255 / .78); font-size: 1.13rem; max-width: 34rem; margin: 18px 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero-visual { position: relative; perspective: 1200px; }
.hero-shot {
  border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 40px 90px rgb(0 0 0 / .5);
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform .3s var(--ease);
  will-change: transform;
}
/* Framed panel around the hero screenshot (the reference-page look): a
   tinted, bordered card with the shot inside. Carries the tilt itself. */
.hero-frame {
  border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .07); padding: 12px;
  box-shadow: 0 40px 90px rgb(0 0 0 / .5);
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform .3s var(--ease);
  will-change: transform;
}
.hero-frame img { border-radius: 14px; display: block; }

/* Demo-video placeholder frame with a play chip. */
.video-frame {
  position: relative; overflow: hidden; max-width: 760px; margin: 48px auto 0;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: #10141c; box-shadow: var(--shadow-2);
}
.video-frame img { opacity: .8; width: 100%; }
.video-frame .play-chip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-chip span {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgb(0 0 0 / .62); color: #fff; padding: 11px 22px;
  border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.play-chip svg { width: 16px; height: 16px; }
.video-note { text-align: center; font-size: .87rem; color: var(--ink-soft); margin-top: 14px; }

/* Checklist inside the download buy-card. */
.buy-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; color: rgb(255 255 255 / .8); }
.buy-check li { display: flex; align-items: center; gap: 9px; }
.buy-check svg { width: 16px; height: 16px; color: #4ade80; flex-shrink: 0; }
.hero-float {
  position: absolute; right: -18px; bottom: -34px; width: 46%;
  border-radius: var(--radius); border: 1px solid rgb(255 255 255 / .2);
  box-shadow: 0 24px 60px rgb(0 0 0 / .55);
  animation: floaty 6s ease-in-out infinite alternate;
}
@keyframes floaty { to { transform: translateY(-14px); } }

/* ---- stats strip --------------------------------------------------------- */

.stats { border-block: 1px solid var(--line); background: var(--card); }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 34px; text-align: center; }
.stat b { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); }
.stat b .unit { font-size: 1.1rem; color: var(--brand); }
.stat span { color: var(--ink-soft); font-size: .92rem; }

/* ---- product cards ------------------------------------------------------- */

.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.product-card {
  --accent: var(--brand);
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.product-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}
.product-card[data-accent="hardware"] { --accent: var(--hardware); }
.product-card[data-accent="paint"] { --accent: var(--paint-b); }
.product-card[data-accent="shoes"] { --accent: var(--shoes); }
.product-card[data-accent="plants"] { --accent: var(--plants); }
.product-card[data-accent="pharmacy"] { --accent: var(--pharmacy); }

.product-shot { aspect-ratio: 16 / 9.6; overflow: hidden; border-bottom: 1px solid var(--line); }
.product-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .5s var(--ease); }
.product-card:hover .product-shot img { transform: scale(1.04); }

.product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-name { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 800; }
.product-name .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.product-tag { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.product-feats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.product-feats span {
  font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
}
.product-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.product-actions .btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: .92rem; }
.product-actions .btn-primary { background: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.product-actions .btn-primary:hover { filter: brightness(1.08); background: var(--accent); }

.product-card.soon { opacity: .78; }
.product-card.soon .product-shot {
  display: grid; place-items: center; background:
    repeating-linear-gradient(-45deg, #f4f4f2 0 14px, #fbfaf8 14px 28px);
  color: var(--ink-faint); font-weight: 700;
}
.soon-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}

/* ---- feature grid -------------------------------------------------------- */

.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.feature h3 { font-size: 1.02rem; margin-top: 14px; }
.feature p { color: var(--ink-soft); font-size: .9rem; margin: 6px 0 0; }
.ficon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
}
.ficon svg { width: 21px; height: 21px; }
.ficon.t1 { background: #fff7ed; color: #ea580c; }
.ficon.t2 { background: #f5f3ff; color: #7c3aed; }
.ficon.t3 { background: #ecfdf5; color: #059669; }
.ficon.t4 { background: #eff6ff; color: #2563eb; }
.ficon.t5 { background: #fdf2f8; color: #db2777; }
.ficon.t6 { background: #f0fdfa; color: #0d9488; }
.ficon.t7 { background: #fefce8; color: #ca8a04; }
.ficon.t8 { background: #f8fafc; color: #475569; }

/* ---- urdu band ----------------------------------------------------------- */

.urdu-band {
  /* Light counterpoint to the two dark green bands around it. */
  background: linear-gradient(115deg, #f0fdf4, #ecfdf5 55%, #fefce8);
  border-block: 1px solid var(--line);
  color: var(--ink); overflow: hidden; position: relative;
}
.urdu-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-block: 72px; position: relative; }
.urdu-band h2 .ur { color: var(--brand-deep); }
.urdu-sample {
  direction: rtl; font-size: 1.5rem; line-height: 2.1; font-weight: 600;
  background: var(--card); border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg); padding: 26px 30px; box-shadow: var(--shadow-1);
}
.urdu-sample small { display: block; direction: ltr; font-size: .8rem; color: var(--ink-faint); margin-top: 10px; font-weight: 400; }
.urdu-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-soft); }
.urdu-points li { display: flex; gap: 10px; align-items: start; }
.urdu-points svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 4px; }

/* ---- steps --------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; counter-reset: step; position: relative; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; text-align: center; position: relative; box-shadow: var(--shadow-1);
}
.step-num {
  width: 46px; height: 46px; margin-inline: auto; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff;
}
.step:nth-child(1) .step-num { background: var(--brand); }
.step:nth-child(2) .step-num { background: var(--paint-a); }
.step:nth-child(3) .step-num { background: var(--hardware); }
.step h3 { margin-top: 16px; font-size: 1.08rem; }
.step p { color: var(--ink-soft); font-size: .92rem; margin: 8px 0 0; }

/* ---- gallery ------------------------------------------------------------- */

.gallery-tabs { display: flex; justify-content: center; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.gallery-tab {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 9px 20px; font-weight: 700; font-size: .92rem; cursor: pointer; color: var(--ink-soft);
  transition: all .18s var(--ease);
}
.gallery-tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.gallery-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery-panels { margin-top: 28px; position: relative; }
.gallery-panel { display: none; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-panel.active { display: grid; animation: fadeUp .45s var(--ease); }
.gallery-panel figure { margin: 0; }
.gallery-panel img {
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery-panel img:hover { transform: scale(1.02); box-shadow: var(--shadow-2); }
.gallery-panel figcaption { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }

/* ---- faq ----------------------------------------------------------------- */

.faq-list { max-width: 760px; margin: 44px auto 0; display: grid; gap: 12px; }
.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; box-shadow: var(--shadow-1);
}
.faq summary {
  list-style: none; cursor: pointer; font-weight: 700; padding-block: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 500; color: var(--brand);
  transition: transform .25s var(--ease); line-height: 1;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 18px; }

/* ---- contact band -------------------------------------------------------- */

.contact-band {
  background: radial-gradient(100% 140% at 80% 0%, var(--navy-2), var(--navy-1) 60%);
  color: #fff; text-align: center;
}
.contact-inner { padding-block: 80px; }
.contact-inner p.lead { color: rgb(255 255 255 / .75); max-width: 34rem; margin: 14px auto 0; }
.contact-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.contact-number { margin-top: 18px; color: rgb(255 255 255 / .65); font-size: .95rem; }
.contact-number b { color: #fff; letter-spacing: .04em; }

/* ---- footer -------------------------------------------------------------- */

.footer { background: var(--card); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding-block: 30px; color: var(--ink-soft); font-size: .92rem; }
.footer a:hover { color: var(--ink); }
.footer-products { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 600; }

/* richer umbrella footer: brand + link columns + base bar */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-block: 46px 30px; }
.footer-brand p { margin: 14px 0 16px; color: var(--ink-soft); font-size: .93rem; max-width: 340px; }
.footer-flag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #dcfce7; color: #166534; border: 1px solid #86efac;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.footer-col h4 {
  margin: 6px 0 14px; font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
}
.footer-col a { display: block; padding: 5px 0; color: var(--ink-soft); font-weight: 600; font-size: .93rem; }
.footer-col a:hover { color: var(--brand-deep); }
.footer-col .soon { display: block; padding: 5px 0; color: var(--ink-faint); font-size: .86rem; }
.footer-base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-block: 20px;
  color: var(--ink-faint); font-size: .84rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- reveal animations ---------------------------------------------------
   Hidden state is gated on .js (set by site.js) so a no-JS visitor — or a
   crawler — always sees the full page. Print always shows everything. */

.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 72px; }
  .hero-visual { max-width: 560px; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .urdu-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery-panel { grid-template-columns: 1fr; }
  .nav-links, .nav .btn-primary { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 14px;
  }
}
@media (max-width: 620px) {
  .products-grid, .features-grid { grid-template-columns: 1fr; }
  .section { padding-block: 64px; }
}

/* ---- WhatsApp: header chip + floating corner button ---------------------- */

.nav-wa {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgb(37 211 102 / .1); border: 1px solid rgb(37 211 102 / .45);
  color: var(--brand-deep, #15803d); font-weight: 800; font-size: .86rem;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  transition: background .15s;
}
.nav-wa svg { width: 16px; height: 16px; fill: #25d366; flex-shrink: 0; }
.nav-wa:hover { background: rgb(37 211 102 / .2); }
@media (max-width: 1150px) { .nav-wa { display: none; } }

.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgb(0 0 0 / .34); }

/* featured screenshot inside the buy card's left column */
.buy-shot {
  display: block; width: 100%; margin-top: 20px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3);
}

/* ---- column utilities + mobile hardening --------------------------------
   WHY THIS EXISTS: sections used to carry inline
   style="grid-template-columns:repeat(3,1fr)". An inline style beats every
   media query in this file, so phones kept 3-column grids and the page
   scrolled sideways. Columns now come from these CLASSES, and the overrides
   below sit last in the file so they always win.
   Rule for every new section: never put grid-template-columns in a style
   attribute — use cols-N (or split for a 2-up band).                       */

.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* A text-beside-picture band (the unique section on every product page). */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }

@media (max-width: 980px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split img { margin-inline: auto; }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .buy-card { padding: 22px; }
  .buy-price { font-size: 2rem; }
  .pay-row { font-size: .88rem; padding: 11px 13px; }
  .section-head h2 { font-size: 1.5rem; }
  .wa-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa-fab svg { width: 26px; height: 26px; }
}

/* Nothing may push the page sideways on a phone. */
img, svg, video, canvas { max-width: 100%; height: auto; }
.wrap { overflow-wrap: break-word; }