/* =========================================================
   IRFSDPK (SMC-Private) Limited — Corporate Site
   Design tokens — Light premium SaaS, navy dark-bands, blue/cyan accent
   ========================================================= */
:root{
  --dark:#04347E;
  --bg:#F8FAFC;
  --panel:#FFFFFF;
  --panel-2:#F1F5FF;
  --line:#CBD5E1;
  --line-strong:#94A3B8;

  --primary:#2A7AFE;
  --primary-deep:#1B5FD8;
  --accent:#00CFE8;
  --accent-deep:#00A8BD;
  --accent-light:#5FE0F0;
  --grad:linear-gradient(135deg, var(--primary), var(--accent));

  --text:#04347E;
  --muted:#475569;
  --muted-2:#64748B;

  --success:#10B981;
  --amber:#D97706;
  --danger:#DC2626;

  --radius-pill:999px;
  --radius-card:18px;
  --radius-sm:10px;

  --font-en: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-ur: "Noto Naskh Arabic", "Plus Jakarta Sans", sans-serif;
  --font-ur-display: "Noto Nastaliq Urdu", "Syne", serif;

  --maxw: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 6.5rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-en);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

/* ---------- Language handling ----------
   Inactive-language elements are force-hidden with !important, scoped via :not()
   so the rule never applies to the active language — letting each element's own
   component CSS (e.g. inline-flex on .eyebrow-pill) control its shown display type. */
html:not([data-lang="en"]) .lang-en{ display:none !important; }
html:not([data-lang="ur"]) .lang-ur{ display:none !important; }

html[data-lang="ur"] body{ font-family:var(--font-ur); direction:rtl; }
html[data-lang="ur"] .lang-ur{ line-height:2; }
html[data-lang="ur"] h1.lang-ur, html[data-lang="ur"] h2.lang-ur, html[data-lang="ur"] h3.lang-ur{
  font-family:var(--font-ur-display); line-height:1.9; font-weight:600;
}
html[data-lang="ur"] .brand-name, html[data-lang="ur"] .eyebrow-pill{ font-family:var(--font-ur-display); }
html[data-lang="en"] body{ direction:ltr; }

/* ---------- Type scale ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0 0 var(--space-2); letter-spacing:-0.01em; color:var(--text); }
h1{ color:var(--text); }
h1{ font-size:clamp(2.3rem, 4.6vw, 3.8rem); line-height:1.05; }
h1 .accent-text{ color:var(--primary); }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.1; }
h3{ font-size:1.4rem; line-height:1.25; }
p{ margin:0 0 var(--space-2); max-width:64ch; color:var(--muted); }
html[data-lang="ur"] p{ max-width:none; }
.lede{ font-size:1.15rem; color:var(--muted); }
.eyebrow-pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:0.78rem; font-weight:700; letter-spacing:0.03em; padding:0.4rem 1rem; border-radius:var(--radius-pill); margin-bottom:var(--space-2); background:var(--panel-2); border:1px solid var(--accent-deep); color:var(--accent-deep); }
.eyebrow-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-light); flex-shrink:0; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }
section{ padding:var(--space-5) 0; }
.section-tight{ padding:var(--space-4) 0; }
hr.rule{ border:none; border-top:1px solid var(--line); margin:var(--space-4) 0; }

/* dark-block marks the select navy accent bands (trust section, final CTA, footer) on an otherwise light page */
.dark-block{ background:var(--dark); }
.dark-block p{ color:#B7C2D4; }
.dark-block h1, .dark-block h2, .dark-block h3, .dark-block h4{ color:#FFFFFF; }
.dark-block .eyebrow-pill{ background:rgba(255,255,255,0.08); border-color:var(--accent-light); color:var(--accent-light); }

/* tint-block marks a soft light-blue band, used to alternate with white sections so each section reads as distinct */
.tint-block{ background:var(--panel-2); }

/* ---------- Header (light, clean sticky bar) ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand-logo{ height:42px; width:auto; display:block; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text); letter-spacing:0.06em; }
html[data-lang="ur"] .brand-name{ font-family:var(--font-ur-display); font-size:1.15rem; letter-spacing:normal; }
.footer-brand-mark{ width:26px; height:26px; flex-shrink:0; }
.footer-brand-mark img{ width:100%; height:100%; }

nav.main-nav{ display:flex; align-items:center; gap:var(--space-3); }
nav.main-nav ul{ display:flex; gap:var(--space-3); }
nav.main-nav a{ text-decoration:none; font-size:0.95rem; color:var(--muted); padding:0.3rem 0; font-weight:500; transition:color .15s; }
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{ color:var(--text); }

.header-actions{ display:flex; align-items:center; gap:0.9rem; }
.main-nav > .header-actions{ display:none; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:0.4rem;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--muted);
  padding:0.4rem 0.9rem; border-radius:var(--radius-pill); font-size:0.85rem; font-weight:500; cursor:pointer;
}
.lang-toggle:hover{ border-color:var(--primary); color:var(--primary); }
.lang-icon{ width:15px; height:15px; flex-shrink:0; }

/* ---------- Buttons (solid, moderate radius — matching IR-POS) ---------- */
.btn{
  display:inline-block; text-decoration:none; padding:0.8rem 1.5rem; border-radius:var(--radius-sm);
  font-size:0.95rem; font-weight:700; cursor:pointer; border:1px solid transparent; transition:opacity .15s, background .15s, border-color .15s, transform .15s;
}
.btn-primary{ background:var(--primary); color:#FFFFFF; }
.btn-primary:hover{ background:var(--primary-deep); }
.btn-ink{ background:var(--primary); color:#FFFFFF; }
.btn-ink:hover{ background:var(--primary-deep); }
.btn-primary:hover, .btn-ink:hover{ opacity:0.9; transform:translateY(-1px); }
.btn-outline-dark{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,0.4); }
.btn-outline-dark:hover{ border-color:var(--accent); color:var(--accent); }
.btn-outline-light{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-outline-light:hover{ border-color:var(--accent); color:var(--accent-deep); }
.btn-sm{ padding:0.55rem 1.1rem; font-size:0.85rem; }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:0.4rem; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); margin:5px 0; }

/* ---------- Hero ---------- */
.hero{ padding:var(--space-6) 0 var(--space-5); }
.hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:var(--space-5); align-items:center; }
.hero-illustration{ width:100%; }
.hero-illustration img{ width:100%; height:auto; max-width:600px; margin:0 auto; display:block; }
.hero-illustration svg{ width:100%; height:auto; max-width:600px; margin:0 auto; display:block; direction:ltr; }

/* ---------- Hero illustration animation (respects prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-bar{
    transform-box:fill-box; transform-origin:bottom center;
    animation:heroBarGrow 0.6s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:var(--bar-delay, 0s);
  }
  @keyframes heroBarGrow{
    from{ transform:scaleY(0); opacity:0; }
    to{ transform:scaleY(1); opacity:1; }
  }

  .hero-line{
    stroke-dasharray:700; stroke-dashoffset:700;
    animation:heroLineDraw 1.1s 0.4s cubic-bezier(.3,.7,.3,1) forwards;
  }
  @keyframes heroLineDraw{ to{ stroke-dashoffset:0; } }

  .hero-pulse-outer{
    transform-box:fill-box; transform-origin:center;
    animation:heroPulse 2s 1.5s ease-out infinite;
  }
  .hero-pulse-inner{
    transform-box:fill-box; transform-origin:center;
    animation:heroPulseDot 2s 1.5s ease-out infinite;
  }
  @keyframes heroPulse{
    0%{ transform:scale(0.6); opacity:0.9; }
    70%{ transform:scale(1.6); opacity:0; }
    100%{ transform:scale(0.6); opacity:0; }
  }
  @keyframes heroPulseDot{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.15); }
  }

  .hero-float-slow{
    animation:heroFloat 7s var(--float-delay, 0s) ease-in-out infinite;
  }
  .hero-float{
    animation:heroFloat 4.5s var(--float-delay, 0s) ease-in-out infinite;
  }
  @keyframes heroFloat{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }

  .hero-plant{
    transform-box:fill-box; transform-origin:bottom center;
    animation:heroSway 5s ease-in-out infinite;
  }
  @keyframes heroSway{
    0%, 100%{ transform:rotate(-1.5deg); }
    50%{ transform:rotate(1.5deg); }
  }
}
.hero h1{ margin-bottom:var(--space-3); }
.hero-stat{
  border-radius:var(--radius-card); border:1px solid var(--line-strong); background:var(--panel);
  box-shadow:0 16px 44px rgba(15,23,42,0.10); overflow:hidden;
}
.hero-stat-bar{ background:var(--primary); padding:0.7rem 1.1rem; display:flex; align-items:center; justify-content:space-between; }
.hero-stat-bar .title{ color:#fff; font-size:0.85rem; font-weight:600; }
.hero-stat-bar .dots{ display:flex; gap:5px; }
.hero-stat-bar .dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); }
.hero-stat-bar .dots span:last-child{ background:var(--accent); }
.hero-stat-body{ padding:var(--space-3); }
.hero-stat .eyebrow-line{ font-size:0.78rem; color:var(--accent-deep); font-weight:600; margin-bottom:0.4rem; letter-spacing:0.02em; }
.hero-stat .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-2); }
.hero-stat .stat-box{ background:var(--panel-2); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:0.9rem 1rem; }
.hero-stat .stat-box .num{ font-size:1.5rem; font-weight:700; color:var(--text); display:block; }
.hero-stat .stat-box .label{ color:var(--muted); font-size:0.82rem; }
.stat-grid{ display:grid; gap:var(--space-2); }
.stat-box{ border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:1rem; }
.stat-box .num{ font-size:1.5rem; font-weight:800; font-family:var(--font-display); display:block; margin-bottom:0.2rem; }
.stat-box .label{ font-size:0.82rem; }
.hero-stat .num{ font-size:2.6rem; color:var(--text); display:block; font-weight:800; }
.hero-stat .label{ color:var(--muted); font-size:0.9rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:var(--space-3); flex-wrap:wrap; }
.trust-line{ font-size:0.85rem; color:var(--muted-2); margin-top:var(--space-2); }

.page-hero{ padding:var(--space-5) 0 var(--space-4); }

/* ---------- Cards (products, general) ---------- */
.card{
  background:var(--panel); border:1.5px solid var(--line-strong); border-radius:var(--radius-card); padding:var(--space-4);
  box-shadow:0 12px 32px rgba(15,23,42,0.10);
}
.portfolio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-4); align-items:stretch; }
.product-block{ display:flex; flex-direction:column; position:relative; overflow:hidden; }
.product-block.tint-primary{ background:linear-gradient(160deg, rgba(42,122,254,0.08), var(--panel) 55%); }
.product-block.tint-accent{ background:linear-gradient(160deg, rgba(0,207,232,0.09), var(--panel) 55%); }
.product-tag{ font-size:0.78rem; font-weight:700; letter-spacing:0.03em; margin-bottom:var(--space-2); display:inline-flex; align-items:center; gap:0.45rem; text-transform:uppercase; }
.product-tag.tag-live{ color:var(--success); }
.product-tag.tag-progress{ color:var(--amber); }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:currentColor; }
.product-block h3{ font-size:1.7rem; margin-bottom:0.6rem; color:var(--text); }
.product-block p{ margin-bottom:var(--space-2); color:var(--muted); }
.product-block .btn{ align-self:flex-start; margin-top:auto; }
.feature-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:var(--space-2) 0; }
.feature-tags span{ font-size:0.82rem; color:var(--muted); border:1px solid var(--line-strong); padding:0.3rem 0.75rem; border-radius:var(--radius-pill); }

/* ---------- Content sections ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.value-list{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-3); }
.value-item{ border-top:1px solid var(--line); padding-top:var(--space-2); }
.value-item h4{ font-size:1.05rem; margin-bottom:0.4rem; color:var(--text); }
.value-item p{ color:var(--muted); }

.quote-block{ background:var(--panel); border:1.5px solid var(--line-strong); color:var(--text); border-radius:var(--radius-card); padding:var(--space-4); font-size:1.3rem; font-weight:500; line-height:1.4; margin:var(--space-3) 0; }

.legal-block dl{ margin:var(--space-2) 0; }
.legal-block dt{ font-weight:600; color:var(--text); }
.legal-block dd{ margin:0 0 var(--space-2); color:var(--muted); }

/* ---------- Icon feature grid (top-border accent, square icon badge) ---------- */
.icon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-4); }
.icon-grid-4{ grid-template-columns:repeat(4,1fr); }

/* Bento layout: one tall featured card + smaller cards stacked beside it */
.bento-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-3); margin-top:var(--space-4); }
.bento-grid .bento-main{ grid-row:span 3; display:flex; flex-direction:column; }
.bento-grid .bento-main .icon-circle{ width:60px; height:60px; border-radius:18px; }
.bento-grid .bento-main .icon-circle svg{ width:28px; height:28px; }
.bento-grid .bento-main h4{ font-size:1.3rem; }
.bento-points{ margin-top:auto; padding-top:var(--space-3); }
.bento-points li{ display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0; font-size:0.92rem; color:var(--muted); border-top:1px solid var(--line); }
.bento-points li:first-child{ border-top:1px solid var(--line); margin-top:var(--space-2); }
.bento-points li::before{ content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.bento-illustration{ width:100%; max-width:280px; margin:var(--space-2) auto 0; display:block; overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  .bento-float{ animation:bentoCloudFloat 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes bentoCloudFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  .about-float{ animation:aboutPinFloat 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes aboutPinFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
  .clocktower-float{ animation:aboutPinFloat 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
}
@media (prefers-reduced-motion: reduce){
  .bento-illustration animateMotion, .hero-illustration animateMotion{ display:none; }
}
@media (max-width:720px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-grid .bento-main{ grid-row:auto; }
}
.icon-card{ background:var(--panel); border:1.5px solid var(--line-strong); border-top:3px solid var(--accent); border-radius:var(--radius-card); padding:var(--space-3); box-shadow:0 10px 24px rgba(15,23,42,0.07); }
.icon-card.top-danger{ border-top-color:var(--danger); }
.icon-card.top-amber{ border-top-color:var(--amber); }
.icon-card.top-primary{ border-top-color:var(--primary); }
.icon-card.top-success{ border-top-color:var(--success); }
.icon-card .icon-circle{ width:52px; height:52px; border-radius:16px; background:rgba(0,207,232,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-2); color:var(--accent-deep); }
.icon-card.top-primary .icon-circle{ background:rgba(42,122,254,0.12); color:var(--primary); }
.icon-card.top-success .icon-circle{ background:rgba(16,185,129,0.14); color:var(--success); }
.icon-card.top-amber .icon-circle{ background:rgba(217,119,6,0.14); color:var(--amber); }
.icon-card .icon-circle svg{ width:24px; height:24px; }
.icon-card h4{ font-size:1.05rem; margin-bottom:0.4rem; color:var(--text); }
.icon-grid.cat-primary .icon-card{ border-top-color:var(--primary); }
.icon-grid.cat-primary .icon-card .icon-circle{ background:rgba(42,122,254,0.12); color:var(--primary); }
.icon-grid.cat-success .icon-card{ border-top-color:var(--success); }
.icon-grid.cat-success .icon-card .icon-circle{ background:rgba(16,185,129,0.14); color:var(--success); }
.icon-grid.cat-amber .icon-card{ border-top-color:var(--amber); }
.icon-grid.cat-amber .icon-card .icon-circle{ background:rgba(217,119,6,0.14); color:var(--amber); }
.icon-card p{ color:var(--muted); font-size:0.92rem; margin-bottom:0; }

/* ---------- Comparison (before / after) ---------- */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-4); }
.compare-col{ border-radius:var(--radius-card); padding:var(--space-3) var(--space-4); border:1.5px solid var(--line-strong); }
.compare-col.old{ background:var(--panel); }
.compare-col.new{ background:var(--panel); border-color:var(--line-strong); }
.compare-col h4{ margin-bottom:var(--space-1); color:var(--text); font-size:1.2rem; }
.compare-col.new h4{ color:var(--text); }
.compare-col .compare-sub{ color:var(--muted); font-size:0.85rem; margin-bottom:var(--space-3); }
.compare-col.new .compare-sub{ color:var(--muted); }
.compare-head{ display:flex; align-items:center; gap:1rem; }
.compare-badge{ flex-shrink:0; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#FEE2E2; box-shadow:0 0 0 rgba(220,38,38,0); }
.compare-badge svg{ width:24px; height:24px; }
.compare-col.new .compare-badge{ background:var(--accent); box-shadow:0 0 18px rgba(0,207,232,0.35); }
.compare-col ul{ margin-top:var(--space-3); }
.compare-col ul li{ padding:0.7rem 0.8rem; margin-bottom:0.5rem; font-size:0.95rem; display:flex; gap:0.7rem; align-items:center; color:var(--text); font-weight:600; background:var(--panel-2); border-radius:12px; }
.compare-col ul li .li-label{ flex:1; }
.compare-col ul li .li-outcome{ font-weight:700; font-size:0.8rem; flex-shrink:0; padding:0.35rem 0.8rem; border-radius:var(--radius-pill); color:#991B1B; background:#FEF2F2; }
.compare-col.new ul li{ color:#fff; background:var(--dark); }
.compare-col.new ul li .li-outcome{ color:var(--accent-light); background:rgba(0,207,232,0.16); }
.compare-col ul li .li-icon{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#FEE2E2; }
.compare-col ul li .li-icon svg{ width:16px; height:16px; color:#DC2626; }
.compare-col.new ul li .li-icon{ background:rgba(0,207,232,0.18); }
.compare-col.new ul li .li-icon svg{ color:var(--accent-light); }
.compare-grid{ position:relative; align-items:stretch; }
.compare-divider{ display:none; }
@media (min-width:721px){
  .compare-divider{ display:flex; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--panel); align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(15,23,42,0.15); z-index:2; }
  .compare-divider svg{ width:18px; height:18px; color:var(--primary); }
}

/* ---------- Tag cloud ---------- */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:var(--space-3); }
.tag-cloud span{ display:inline-flex; align-items:center; gap:0.5rem; background:var(--panel); border:1px solid var(--line-strong); padding:0.5rem 1.1rem; border-radius:var(--radius-pill); font-size:0.9rem; font-weight:600; color:var(--text); box-shadow:0 4px 12px rgba(15,23,42,0.04); margin:0 0.3rem 0.3rem 0; }

/* ---------- Numbered steps ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-4); }
.steps-grid-4{ grid-template-columns:repeat(4,1fr); }
.step-item{ border-top:2px solid var(--line-strong); padding-top:var(--space-2); }
.step-item .step-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--grad); color:var(--dark); font-weight:800; font-size:0.9rem; margin-bottom:var(--space-2); }
.step-item h4{ margin-bottom:0.4rem; color:var(--text); }
.step-item p{ color:var(--muted); }

/* ---------- FAQ accordion ---------- */
.faq-list{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:0.6rem; }
.faq-item{ background:var(--panel); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:1rem 1.2rem; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:1rem; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color:var(--primary); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:0.7rem; color:var(--muted); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-5); }
.contact-list{ margin-top:var(--space-3); }
.contact-list li{ display:flex; gap:0.8rem; padding:var(--space-2) 0; border-top:1px solid var(--line); }
.contact-list li:first-child{ border-top:none; }
.contact-list .k{ min-width:120px; color:var(--muted-2); font-size:0.9rem; }
.contact-list .v a{ color:var(--accent-light); text-decoration:none; font-weight:600; }
.contact-list .v a:hover{ text-decoration:underline; }

form.contact-form{ display:flex; flex-direction:column; gap:1rem; }
form.contact-form label{ font-size:0.88rem; color:var(--muted); display:block; margin-bottom:0.35rem; }
form.contact-form input, form.contact-form textarea{
  width:100%; padding:0.8rem 1rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:inherit; font-size:0.95rem; background:var(--panel-2); color:var(--text);
}
html[data-lang="ur"] form.contact-form input, html[data-lang="ur"] form.contact-form textarea{ font-family:var(--font-ur); text-align:right; }
form.contact-form textarea{ min-height:130px; resize:vertical; }
form.contact-form input:focus, form.contact-form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-note{ font-size:0.82rem; color:var(--muted-2); }
.form-status{ font-size:0.9rem; padding:0.6rem 0; }
.form-status.ok{ color:var(--success); }
.form-status.err{ color:var(--danger); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--panel-2); border-top:1px solid var(--line); padding:var(--space-5) 0 var(--space-3); }
footer.site-footer a{ color:var(--text); text-decoration:none; opacity:0.8; }
footer.site-footer a:hover{ opacity:1; text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:var(--space-4); }
.footer-brand{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.8rem; }
.footer-brand .brand-name{ color:var(--text); }
.footer-col p{ color:var(--muted-2); margin-top:0.6rem; font-size:0.9rem; max-width:34ch; }
.footer-col h4{ font-size:0.82rem; color:var(--accent-light); font-weight:600; margin-bottom:var(--space-2); text-transform:uppercase; letter-spacing:0.02em; }
.footer-col ul li{ margin-bottom:0.55rem; font-size:0.92rem; opacity:0.8; }
.footer-bottom{ border-top:1px solid var(--line); margin-top:var(--space-4); padding-top:var(--space-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; font-size:0.82rem; color:var(--muted-2); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,12,0.7); z-index:100;
  display:none; align-items:center; justify-content:center; padding:1.25rem;
  opacity:0; transition:opacity .18s ease;
}
.modal-overlay.is-open{ display:flex; opacity:1; }
.modal-box{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-card); padding:var(--space-4);
  max-width:480px; width:100%; max-height:90vh; overflow-y:auto;
  transform:translateY(12px) scale(0.98); transition:transform .18s ease;
  box-shadow:0 16px 44px rgba(15,23,42,0.10);
}
.modal-overlay.is-open .modal-box{ transform:translateY(0) scale(1); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:var(--space-2); }
.modal-head h3{ margin-bottom:0.3rem; color:var(--text); }
.modal-close{ background:none; border:none; cursor:pointer; font-size:1.4rem; line-height:1; color:var(--muted); padding:0.2rem 0.4rem; flex-shrink:0; }
.modal-close:hover{ color:var(--text); }
.modal-desc{ color:var(--muted); font-size:0.92rem; margin-bottom:var(--space-3); }
.modal-form{ display:flex; flex-direction:column; gap:0.9rem; }
.modal-form label{ font-size:0.85rem; color:var(--muted); display:block; margin-bottom:0.3rem; }
.modal-form input{
  width:100%; padding:0.75rem 0.9rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:inherit; font-size:0.95rem; background:var(--panel-2); color:var(--text);
}
html[data-lang="ur"] .modal-form input{ font-family:var(--font-ur); text-align:right; }
.modal-form input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.modal-form input.field-error{ border-color:var(--danger); }
.field-error-msg{ color:var(--danger); font-size:0.8rem; margin-top:0.3rem; display:none; }
.modal-form input.field-error + .field-error-msg{ display:block; }
.modal-success{ display:none; text-align:center; padding:var(--space-3) 0; }
.modal-success.is-visible{ display:block; }
.modal-success .icon{ font-size:2.2rem; margin-bottom:var(--space-2); }
.modal-form.is-hidden{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  nav.main-nav{ display:none; }
  nav.main-nav.is-open{ display:flex; position:fixed; z-index:60; top:64px; left:0; right:0; bottom:0; background:var(--bg); flex-direction:column; align-items:flex-start; padding:var(--space-3) 1.5rem; gap:var(--space-3); border-top:1px solid var(--line); overflow-y:auto; }
  nav.main-nav ul{ flex-direction:column; gap:1rem; width:100%; }
  .header-inner > .header-actions{ display:flex; }
  .header-inner > .header-actions .btn{ display:none; }
  .main-nav > .header-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:0.8rem; margin-top:1.2rem; width:100%; }
  .main-nav > .header-actions .lang-toggle{ display:none; }
  .menu-toggle{ display:block; }
  .hero-grid, .two-col, .portfolio-grid, .contact-grid, .value-list, .footer-grid, .icon-grid, .compare-grid, .steps-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:var(--space-4); }
  section{ padding:var(--space-4) 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* =========================================================
   Chat widget (rule-based assistant, no backend)
   ========================================================= */
.chat-float{
  position:fixed; bottom:22px; inset-inline-start:22px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 8px 24px rgba(42,122,254,0.3); border:none; cursor:pointer; line-height:1;
  color:#fff; transition:transform .15s ease;
}
.chat-float:hover{ transform:scale(1.06); }
.chat-panel{
  position:fixed; bottom:90px; inset-inline-start:22px; z-index:70;
  width:min(360px, calc(100vw - 32px)); height:min(480px, calc(100vh - 140px));
  background:var(--panel); border-radius:var(--radius-card); box-shadow:0 20px 50px rgba(15,23,42,0.18);
  display:none; flex-direction:column; overflow:hidden; border:1px solid var(--line-strong);
}
.chat-panel.open{ display:flex; }
.chat-head{ background:var(--primary); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.chat-head .t{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; }
.chat-head button{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; opacity:.8; }
.chat-head button:hover{ opacity:1; }
.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--panel-2); }
.chat-msg{ max-width:85%; padding:9px 13px; border-radius:12px; font-size:13.5px; line-height:1.6; }
html[data-lang="ur"] .chat-msg{ font-family:var(--font-ur); line-height:1.9; }
.chat-msg.bot{ background:var(--panel); color:var(--text); align-self:flex-start; border:1px solid var(--line); }
.chat-msg.user{ background:var(--accent); color:#fff; align-self:flex-end; }
.chat-msg.bot a{ color:var(--accent-deep); font-weight:600; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; flex-shrink:0; }
.chat-quick button{ background:var(--panel); border:1px solid var(--line-strong); color:var(--text); border-radius:var(--radius-pill); padding:5px 12px; font-size:12px; cursor:pointer; }
.chat-quick button:hover{ border-color:var(--accent); color:var(--accent-deep); }
.chat-inputrow{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line-strong); flex-shrink:0; background:var(--panel); }
.chat-inputrow input{ flex:1; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; font-family:inherit; background:var(--panel-2); color:var(--text); }
html[data-lang="ur"] .chat-inputrow input{ font-family:var(--font-ur); text-align:right; }
.chat-inputrow input:focus{ outline:none; border-color:var(--accent); }
.chat-inputrow button{ background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 16px; font-size:13.5px; font-weight:600; cursor:pointer; flex-shrink:0; }
.chat-inputrow button:hover{ background:var(--accent-deep); }
@media (max-width:520px){
  .chat-panel{ inset-inline-start:16px; inset-inline-end:16px; width:auto; bottom:82px; }
  .chat-float{ inset-inline-start:16px; }
}

/* ---------- Footer contact row, product screenshot and plans (Oct 2026) ---------- */
.footer-contact { display:flex; flex-wrap:wrap; gap:0.6rem 1.8rem; margin-top:var(--space-3); font-size:0.86rem; color:var(--muted-2); line-height:1.6; }
.footer-contact b { color:var(--text); font-weight:600; }
.product-shot { margin:var(--space-3) 0 0; }
.product-shot img { display:block; width:100%; height:auto; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); box-shadow:0 12px 32px rgba(15,23,42,0.10); }
.product-shot figcaption { font-size:0.85rem; color:var(--muted-2); margin-top:0.6rem; text-align:center; }
.plan-actions { display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:var(--space-3); }