/* =========================================================
   ZTT SOLUTIONS — PREMIUM ENHANCEMENTS
   Extends style.css + features.css. Does NOT override existing
   behavior; only adds new components & refined visuals.
   ========================================================= */

/* ----- Subtle grid pattern overlay for hero-like sections ----- */
.pattern-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,87,255,0.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,87,255,0.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%);pointer-events:none;z-index:0}

.mesh-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 15% 20%,rgba(0,87,255,0.14) 0%,transparent 45%),
  radial-gradient(circle at 85% 75%,rgba(14,165,233,0.12) 0%,transparent 42%),
  radial-gradient(circle at 50% 110%,rgba(139,92,246,0.08) 0%,transparent 50%);
  pointer-events:none;z-index:0}

:root.dark .pattern-grid{background-image:
  linear-gradient(rgba(125,170,255,0.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(125,170,255,0.05) 1px,transparent 1px)}

/* ================================================================
   PACKAGE CATEGORY TABS (Cloud / Web / ERP)
   ================================================================ */
.pkg-cat-tabs{display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.pkg-cat-tab{background:#fff;border:1.5px solid var(--border);color:var(--muted);padding:0.7rem 1.4rem;
  border-radius:100px;font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:600;cursor:pointer;
  transition:all 0.25s;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.pkg-cat-tab:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.pkg-cat-tab.active{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-color:transparent;
  box-shadow:0 8px 24px rgba(0,87,255,0.3)}
.pkg-cat-tab .tab-ico{font-size:1.05rem}

.pkg-panel{display:none;animation:fade-up 0.4s ease}
.pkg-panel.active{display:block}

.pkg-panel-hdr{text-align:center;margin-bottom:2.2rem}
.pkg-panel-hdr h3{font-size:1.7rem;margin-bottom:0.4rem}
.pkg-panel-hdr p{color:var(--muted);font-size:0.95rem;max-width:580px;margin:0 auto;line-height:1.7}

/* ================================================================
   PREMIUM PRICING PACKAGE CARDS (3-column)
   ================================================================ */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}

.pkg-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:20px;
  padding:2rem 1.75rem 1.75rem;transition:transform 0.35s cubic-bezier(.4,0,.2,1),box-shadow 0.35s,border-color 0.3s;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 12px rgba(0,87,255,0.05)}
.pkg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent,#0057FF),var(--accent2,#0EA5E9));
  transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}
.pkg-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,87,255,0.18);border-color:var(--accent,#0057FF)}
.pkg-card:hover::before{transform:scaleX(1)}

.pkg-card-featured{border-color:var(--blue);box-shadow:0 10px 36px rgba(0,87,255,0.2);
  background:linear-gradient(180deg,#fff 0%,#F5F8FF 100%);transform:scale(1.03);z-index:2}
.pkg-card-featured::before{transform:scaleX(1)}
.pkg-card-featured:hover{transform:scale(1.03) translateY(-6px)}
.pkg-card-featured .pkg-ribbon{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--blue),var(--sky));
  color:#fff;font-size:0.65rem;font-weight:800;letter-spacing:1px;padding:6px 16px 6px 22px;
  border-bottom-left-radius:14px;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,87,255,0.3)}

.pkg-ic-wrap{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent,#0057FF) 0%,var(--accent2,#0EA5E9) 100%);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin-bottom:1rem;
  box-shadow:0 6px 18px rgba(0,87,255,0.25)}

.pkg-tier{font-size:0.68rem;font-weight:800;letter-spacing:1.5px;color:var(--accent,#0057FF);
  text-transform:uppercase;margin-bottom:0.4rem;display:flex;align-items:center;gap:8px}
.pkg-tier::before{content:'';width:20px;height:2px;background:var(--accent,#0057FF);border-radius:2px}
.pkg-name{font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:700;color:var(--text);
  letter-spacing:-0.3px;margin-bottom:0.5rem;line-height:1.25}
.pkg-tagline{color:var(--muted);font-size:0.85rem;line-height:1.6;margin-bottom:1.3rem;min-height:44px}

.pkg-price-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:0.3rem;flex-wrap:wrap}
.pkg-curr{font-size:0.9rem;font-weight:600;color:var(--muted);margin-bottom:0.5rem}
.pkg-amt{font-family:'Poppins',sans-serif;font-size:2.4rem;font-weight:800;color:var(--text);
  line-height:1;letter-spacing:-1.5px}
.pkg-period{color:var(--muted);font-size:0.82rem;font-weight:500;margin-bottom:0.6rem}
.pkg-price-sub{color:var(--muted);font-size:0.75rem;margin-bottom:1.2rem}
.pkg-price-sub .pkg-save{color:var(--green);font-weight:700;margin-left:6px}

.pkg-cta{display:flex;align-items:center;justify-content:center;gap:6px;padding:0.85rem;border-radius:10px;
  font-family:'Inter',sans-serif;font-size:0.87rem;font-weight:600;cursor:pointer;
  transition:all 0.2s;text-decoration:none;margin-bottom:1.4rem;width:100%;border:1.5px solid var(--accent,#0057FF);
  background:#fff;color:var(--accent,#0057FF)}
.pkg-cta:hover{background:var(--accent,#0057FF);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,87,255,0.22)}
.pkg-card-featured .pkg-cta{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(0,87,255,0.28)}
.pkg-card-featured .pkg-cta:hover{box-shadow:0 10px 24px rgba(0,87,255,0.38)}

.pkg-feats-label{font-size:0.7rem;font-weight:800;letter-spacing:1.2px;color:var(--muted);
  text-transform:uppercase;margin-bottom:0.8rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.pkg-feats{list-style:none;padding:0;margin:0 0 0.5rem}
.pkg-feats li{display:flex;align-items:flex-start;gap:10px;padding:0.5rem 0;font-size:0.85rem;
  color:var(--text3);line-height:1.55;text-align:left}
.pkg-feats li strong{color:var(--text);font-weight:700}
/* Bullet checkmark — unique class, won't conflict with process flow's .pf-icon */
.pkg-feats .pkg-check{flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  background:rgba(16,185,129,0.15);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;line-height:1;
  margin-top:3px;text-indent:0;font-family:'Inter',sans-serif;
  box-shadow:none;border:none;position:static}
.pkg-feats .pkg-check::after{display:none !important;content:none !important}
.pkg-feats .pf-highlight{color:var(--blue);font-weight:600}
.pkg-feats li.muted{color:var(--muted2);opacity:0.65}
.pkg-feats li.muted .pkg-check{background:rgba(148,163,184,0.18);color:var(--muted2)}

/* Category accent helpers */
.acc-cloud{--accent:#0057FF;--accent2:#0EA5E9;--accent-bg:rgba(0,87,255,0.08)}
.acc-web{--accent:#10B981;--accent2:#06B6D4;--accent-bg:rgba(16,185,129,0.08)}
.acc-erp{--accent:#8B5CF6;--accent2:#EC4899;--accent-bg:rgba(139,92,246,0.08)}

/* ================================================================
   FEATURE COMPARISON TABLE
   ================================================================ */
.cmp-wrap{overflow-x:auto;margin-top:2rem;border-radius:20px;
  box-shadow:0 8px 32px rgba(0,87,255,0.08);border:1px solid var(--border);background:#fff}
.cmp-table{width:100%;border-collapse:collapse;min-width:720px;font-family:'Inter',sans-serif}
.cmp-table thead th{background:linear-gradient(135deg,#F5F8FF,#EEF2FF);padding:1.1rem 1.25rem;
  text-align:left;font-size:0.78rem;font-weight:800;color:var(--text);letter-spacing:0.5px;
  text-transform:uppercase;border-bottom:2px solid var(--border)}
.cmp-table thead th:first-child{border-top-left-radius:20px}
.cmp-table thead th:last-child{border-top-right-radius:20px}
.cmp-table thead th.cmp-pop{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;position:relative}
.cmp-table thead th.cmp-pop::after{content:'★ POPULAR';position:absolute;top:-10px;right:10px;
  background:var(--gold);color:#fff;font-size:0.6rem;padding:2px 8px;border-radius:100px;letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(245,158,11,0.4)}
.cmp-table tbody td{padding:0.95rem 1.25rem;font-size:0.86rem;color:var(--text3);
  border-bottom:1px solid var(--border);vertical-align:middle}
.cmp-table tbody tr:hover{background:rgba(0,87,255,0.025)}
.cmp-table tbody td:first-child{font-weight:600;color:var(--text);background:rgba(0,87,255,0.02)}
.cmp-table .cmp-yes{color:var(--green);font-size:1.05rem;font-weight:700}
.cmp-table .cmp-no{color:var(--muted2);font-size:1.05rem}
.cmp-table .cmp-val{font-weight:600;color:var(--text2)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tr.cmp-section-row td{background:#EEF4FF;font-weight:800;font-size:0.75rem;
  letter-spacing:1px;text-transform:uppercase;color:var(--blue);padding:0.7rem 1.25rem}

/* ================================================================
   CASE STUDIES GRID
   ================================================================ */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.case-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  transition:all 0.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(0,87,255,0.05)}
.case-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(0,87,255,0.18);border-color:var(--blue)}
.case-visual{height:180px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--case-a,#0057FF),var(--case-b,#0EA5E9))}
.case-visual::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,0.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.08) 1px,transparent 1px);
  background-size:22px 22px;opacity:0.6}
.case-visual::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 70% 30%,rgba(255,255,255,0.25) 0%,transparent 50%)}
.case-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.6rem;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.25));z-index:2}
.case-industry-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.95);
  color:var(--text);padding:5px 11px;border-radius:100px;font-size:0.68rem;font-weight:700;
  letter-spacing:0.4px;z-index:2;backdrop-filter:blur(10px)}
.case-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.case-title{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);
  line-height:1.35;margin-bottom:0.55rem}
.case-summary{color:var(--muted);font-size:0.85rem;line-height:1.65;margin-bottom:1.1rem;flex:1}
.case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;padding-top:1rem;
  border-top:1px dashed var(--border);margin-bottom:1rem}
.case-metric{text-align:left}
.case-metric-val{font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:800;
  background:linear-gradient(135deg,var(--case-a,#0057FF),var(--case-b,#0EA5E9));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.case-metric-label{font-size:0.68rem;color:var(--muted);font-weight:600;letter-spacing:0.3px;margin-top:4px}
.case-link{color:var(--blue);font-size:0.83rem;font-weight:600;display:inline-flex;
  align-items:center;gap:5px;transition:gap 0.2s}
.case-link:hover{gap:10px}

/* ================================================================
   WHY-CHOOSE DETAILED CARDS (with big imagery panel)
   ================================================================ */
.why-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
.why-panel-img{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,87,255,0.18);aspect-ratio:4/3;
  background:linear-gradient(135deg,#0057FF 0%,#0040CC 50%,#0A2540 100%)}
.why-panel-img::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,0.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.08) 1px,transparent 1px);
  background-size:30px 30px}
.why-panel-img::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 30% 30%,rgba(14,165,233,0.5) 0%,transparent 55%),
  radial-gradient(circle at 80% 70%,rgba(139,92,246,0.3) 0%,transparent 55%)}
.why-features{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem;margin-top:1.6rem}
.why-point{display:flex;gap:12px;padding:1rem;background:#fff;border:1px solid var(--border);
  border-radius:14px;transition:all 0.25s}
.why-point:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,87,255,0.1)}
.why-point-ic{flex-shrink:0;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,rgba(0,87,255,0.1),rgba(14,165,233,0.05));
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.why-point-t{font-family:'Poppins',sans-serif;font-size:0.92rem;font-weight:700;color:var(--text);margin-bottom:2px}
.why-point-d{font-size:0.78rem;color:var(--muted);line-height:1.55}

/* ================================================================
   LEAD CAPTURE CTA BANNER
   ================================================================ */
.lead-banner{position:relative;background:linear-gradient(135deg,#0057FF 0%,#0040CC 55%,#0A2540 100%);
  border-radius:28px;padding:3.5rem 3rem;overflow:hidden;color:#fff;margin:0 auto;max-width:1120px}
.lead-banner::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:28px 28px;opacity:0.5}
.lead-banner::after{content:'';position:absolute;top:-50%;right:-20%;width:80%;height:180%;
  background:radial-gradient(circle,rgba(14,165,233,0.45) 0%,transparent 60%);border-radius:50%;filter:blur(40px)}
.lead-banner-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:center}
.lead-banner h2{color:#fff;font-size:1.9rem;font-weight:800;line-height:1.2;margin-bottom:0.8rem;letter-spacing:-0.6px}
.lead-banner p{color:rgba(255,255,255,0.85);font-size:0.98rem;line-height:1.7;margin-bottom:1.4rem;max-width:520px}
.lead-banner-tags{display:flex;gap:0.6rem;flex-wrap:wrap}
.lead-banner-tag{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);
  padding:6px 14px;border-radius:100px;font-size:0.76rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}

.lead-form{background:#fff;border-radius:18px;padding:1.75rem;color:var(--text);
  box-shadow:0 20px 60px rgba(0,0,0,0.25)}
.lead-form-title{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;margin-bottom:0.25rem}
.lead-form-sub{font-size:0.8rem;color:var(--muted);margin-bottom:1.1rem}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:0.75rem 0.95rem;border:1.5px solid var(--border);
  border-radius:10px;font-family:'Inter',sans-serif;font-size:0.86rem;color:var(--text);
  background:#F8FAFF;transition:all 0.2s;margin-bottom:0.65rem;outline:none}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--blue);
  background:#fff;box-shadow:0 0 0 3px rgba(0,87,255,0.12)}
.lead-form textarea{resize:vertical;min-height:72px;font-family:'Inter',sans-serif}
.lead-form .btn-submit{width:100%;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;
  border:none;padding:0.9rem;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.9rem;font-weight:700;
  cursor:pointer;transition:all 0.2s;box-shadow:0 6px 18px rgba(0,87,255,0.28);margin-top:0.4rem}
.lead-form .btn-submit:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,87,255,0.4)}
.lead-form .form-consent{font-size:0.7rem;color:var(--muted);margin-top:0.7rem;line-height:1.5;text-align:center}
.lead-form-ok{display:none;text-align:center;padding:1rem 0}
.lead-form-ok .ok-ic{width:54px;height:54px;border-radius:50%;background:rgba(16,185,129,0.12);
  color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;font-size:1.6rem}
.lead-form.sent .lead-form-ok{display:block}
.lead-form.sent .lead-form-fields{display:none}

/* ================================================================
   CLOUD INFRASTRUCTURE SVG VISUALS (hero-like banners)
   ================================================================ */
.cloud-vis-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,#071A3E 0%,#0A2558 50%,#0D3373 100%);
  box-shadow:0 16px 48px rgba(0,87,255,0.22)}
.cloud-vis-card svg{width:100%;height:100%;display:block}
.cloud-vis-overlay{position:absolute;bottom:16px;left:16px;right:16px;display:flex;
  justify-content:space-between;align-items:center;color:#fff;z-index:3}
.cloud-vis-tag{background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);
  padding:6px 12px;border-radius:100px;font-size:0.72rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cloud-vis-tag .vis-dot{width:6px;height:6px;border-radius:50%;background:#10B981;animation:blink 1.8s infinite}

/* ================================================================
   INDUSTRIES – ENHANCED CARDS
   ================================================================ */
.ind-grid-plus{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ind-plus{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.25rem;
  transition:all 0.3s;position:relative;overflow:hidden}
.ind-plus::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ip-a,#0057FF),var(--ip-b,#0EA5E9));transform:scaleX(0);
  transform-origin:left;transition:transform 0.35s}
.ind-plus:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,87,255,0.15);border-color:var(--ip-a,#0057FF)}
.ind-plus:hover::before{transform:scaleX(1)}
.ind-plus-ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;margin-bottom:0.85rem;background:linear-gradient(135deg,var(--ip-a,#0057FF),var(--ip-b,#0EA5E9));color:#fff}
.ind-plus-t{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.35rem}
.ind-plus-d{font-size:0.78rem;color:var(--muted);line-height:1.6;margin-bottom:0.8rem}
.ind-plus-stats{display:flex;gap:0.8rem;font-size:0.68rem;color:var(--muted);font-weight:600;
  border-top:1px dashed var(--border);padding-top:0.7rem}
.ind-plus-stats span strong{color:var(--text2);display:block;font-size:0.9rem;font-family:'Poppins',sans-serif}

/* ================================================================
   BILLING TOGGLE (for packages)
   ================================================================ */
.bill-switch{display:inline-flex;background:#fff;border:1.5px solid var(--border);border-radius:100px;
  padding:4px;gap:2px;box-shadow:0 4px 14px rgba(0,87,255,0.08)}
.bill-switch button{border:none;background:transparent;color:var(--muted);padding:0.55rem 1.4rem;
  border-radius:100px;font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;
  transition:all 0.25s;display:inline-flex;align-items:center;gap:6px}
.bill-switch button.on{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;
  box-shadow:0 4px 14px rgba(0,87,255,0.3)}
.bill-save{background:var(--green);color:#fff;font-size:0.6rem;padding:2px 7px;border-radius:100px;font-weight:800;letter-spacing:0.3px}

/* ================================================================
   ANNUAL/MONTHLY value labels shown/hidden
   ================================================================ */
.pkg-amt[data-monthly][data-annual]{transition:color 0.2s}
.pkg-card[data-billing="monthly"] .bill-yearly{display:none}
.pkg-card[data-billing="annual"] .bill-monthly{display:none}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:980px){
  .pkg-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .pkg-card-featured{transform:none}
  .pkg-card-featured:hover{transform:translateY(-6px)}
  .case-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .why-panel{grid-template-columns:1fr;gap:2rem}
  .why-features{grid-template-columns:1fr}
  .lead-banner-inner{grid-template-columns:1fr;gap:1.6rem}
  .lead-banner{padding:2.2rem 1.5rem}
  .lead-banner h2{font-size:1.55rem}
  .ind-grid-plus{grid-template-columns:repeat(2,1fr)}
  .cmp-table{font-size:0.78rem}
  .pkg-cat-tab{padding:0.55rem 1rem;font-size:0.78rem}
}
@media (max-width:560px){
  .ind-grid-plus{grid-template-columns:1fr}
  .pkg-panel-hdr h3{font-size:1.35rem}
}

/* ================================================================
   DARK-MODE OVERRIDES for all new components
   ================================================================ */
:root.dark .pkg-cat-tab{background:#1E293B;border-color:rgba(255,255,255,0.1);color:#94A3B8}
:root.dark .pkg-cat-tab:hover{color:#7DAAFF;border-color:#7DAAFF}
:root.dark .pkg-card{background:#1E293B;border-color:rgba(255,255,255,0.1);box-shadow:0 2px 12px rgba(0,0,0,0.4)}
:root.dark .pkg-card:hover{box-shadow:0 20px 48px rgba(0,87,255,0.3)}
:root.dark .pkg-card-featured{background:linear-gradient(180deg,#1E293B 0%,#243354 100%)}
:root.dark .pkg-name{color:#E2E8F4}
:root.dark .pkg-amt{color:#E2E8F4}
:root.dark .pkg-feats li{color:#CBD5E1}
:root.dark .pkg-feats li strong{color:#E2E8F4}
:root.dark .pkg-feats-label{border-color:rgba(255,255,255,0.1);color:#94A3B8}
:root.dark .pkg-cta{background:#0F172A;color:#7DAAFF;border-color:#7DAAFF}
:root.dark .pkg-cta:hover{background:#7DAAFF;color:#0F172A}

:root.dark .cmp-wrap{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .cmp-table thead th{background:linear-gradient(135deg,#243354,#1E293B);color:#E2E8F4;border-color:rgba(255,255,255,0.1)}
:root.dark .cmp-table tbody td{color:#CBD5E1;border-color:rgba(255,255,255,0.08)}
:root.dark .cmp-table tbody td:first-child{color:#E2E8F4;background:rgba(255,255,255,0.03)}
:root.dark .cmp-table tbody tr:hover{background:rgba(125,170,255,0.05)}
:root.dark .cmp-table tr.cmp-section-row td{background:#0B1628;color:#7DAAFF}

:root.dark .case-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .case-title{color:#E2E8F4}
:root.dark .case-summary{color:#94A3B8}
:root.dark .case-metric-label{color:#94A3B8}
:root.dark .case-metrics{border-color:rgba(255,255,255,0.1)}

:root.dark .why-point{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .why-point-t{color:#E2E8F4}
:root.dark .why-point-d{color:#94A3B8}
:root.dark .why-point-ic{background:linear-gradient(135deg,rgba(125,170,255,0.15),rgba(14,165,233,0.08))}

:root.dark .ind-plus{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .ind-plus-t{color:#E2E8F4}
:root.dark .ind-plus-d{color:#94A3B8}
:root.dark .ind-plus-stats{border-color:rgba(255,255,255,0.08);color:#94A3B8}
:root.dark .ind-plus-stats span strong{color:#E2E8F4}

:root.dark .lead-form{background:#1E293B;color:#E2E8F4}
:root.dark .lead-form input,:root.dark .lead-form select,:root.dark .lead-form textarea{
  background:#0F172A;color:#E2E8F4;border-color:rgba(255,255,255,0.15)}
:root.dark .lead-form input:focus,:root.dark .lead-form select:focus,:root.dark .lead-form textarea:focus{background:#243354}
:root.dark .lead-form-sub{color:#94A3B8}

:root.dark .bill-switch{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .bill-switch button{color:#94A3B8}

/* ================================================================
   PREMIUM STATS BAND — "Impact by the Numbers"
   ================================================================ */
.stats-band{position:relative;padding:4.5rem 0;overflow:hidden;
  background:linear-gradient(135deg,#071A3E 0%,#0A2558 50%,#0D3373 100%);color:#fff}
.stats-band::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:40px 40px;opacity:0.7;pointer-events:none}
.stats-band::after{content:'';position:absolute;top:-30%;left:-10%;width:60%;height:160%;
  background:radial-gradient(circle,rgba(14,165,233,0.3) 0%,transparent 60%);filter:blur(60px);pointer-events:none}
.stats-band-inner{position:relative;z-index:2}
.stats-hdr{text-align:center;margin-bottom:2.8rem}
.stats-hdr .sec-tag{background:rgba(255,255,255,0.1);color:#7DAAFF;border-color:rgba(125,170,255,0.3)}
.stats-hdr h2{color:#fff;margin-bottom:0.6rem}
.stats-hdr h2 .grad{background:linear-gradient(135deg,#7DAAFF,#0EA5E9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stats-hdr p{color:rgba(255,255,255,0.7);font-size:0.98rem;max-width:620px;margin:0 auto;line-height:1.7}

.stats-grid-xl{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1120px;margin:0 auto}
.stat-box{position:relative;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;padding:1.8rem 1.4rem;text-align:center;backdrop-filter:blur(10px);
  transition:all 0.3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--sb-a,#7DAAFF),var(--sb-b,#0EA5E9));
  transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}
.stat-box:hover{transform:translateY(-5px);background:rgba(255,255,255,0.07);
  border-color:rgba(125,170,255,0.35);box-shadow:0 16px 36px rgba(0,87,255,0.2)}
.stat-box:hover::before{transform:scaleX(1)}
.stat-box-ic{width:46px;height:46px;margin:0 auto 0.85rem;border-radius:12px;
  background:linear-gradient(135deg,var(--sb-a,#0EA5E9),var(--sb-b,#0057FF));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 4px 14px rgba(14,165,233,0.35)}
.stat-box-n{font-family:'Poppins',sans-serif;font-size:2.6rem;font-weight:800;
  color:#fff;line-height:1;letter-spacing:-1.5px;margin-bottom:0.35rem;display:block}
.stat-box-l{font-size:0.8rem;color:rgba(255,255,255,0.75);font-weight:600;
  letter-spacing:0.3px;line-height:1.5}
.stat-box-sub{font-size:0.68rem;color:rgba(125,170,255,0.85);font-weight:700;
  letter-spacing:1px;margin-top:0.55rem;text-transform:uppercase;padding-top:0.5rem;
  border-top:1px solid rgba(255,255,255,0.08)}

/* Light-mode variant (uses same class but different surrounding bg) */
.stats-band-light{background:linear-gradient(135deg,#F0F5FF 0%,#FFFFFF 50%,#EEF4FF 100%);color:var(--text)}
.stats-band-light::before{background-image:
  linear-gradient(rgba(0,87,255,0.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,87,255,0.04) 1px,transparent 1px)}
.stats-band-light::after{background:radial-gradient(circle,rgba(14,165,233,0.15) 0%,transparent 60%)}
.stats-band-light .stats-hdr h2{color:var(--text)}
.stats-band-light .stats-hdr .sec-tag{background:rgba(0,87,255,0.08);color:var(--blue);border-color:rgba(0,87,255,0.2)}
.stats-band-light .stats-hdr p{color:var(--muted)}
.stats-band-light .stat-box{background:#fff;border-color:var(--border);
  box-shadow:0 2px 12px rgba(0,87,255,0.06)}
.stats-band-light .stat-box:hover{background:#fff;border-color:rgba(0,87,255,0.25);
  box-shadow:0 20px 40px rgba(0,87,255,0.14)}
.stats-band-light .stat-box-n{color:var(--text)}
.stats-band-light .stat-box-l{color:var(--muted)}
.stats-band-light .stat-box-sub{color:var(--blue);border-color:var(--border)}

@media (max-width:980px){
  .stats-grid-xl{grid-template-columns:repeat(2,1fr);gap:1rem}
  .stat-box{padding:1.4rem 1rem}
  .stat-box-n{font-size:2.1rem}
}
@media (max-width:560px){
  .stats-grid-xl{gap:0.7rem}
  .stat-box{padding:1.2rem 0.8rem}
  .stat-box-n{font-size:1.7rem}
  .stat-box-l{font-size:0.72rem}
  .stat-box-sub{font-size:0.6rem}
}

/* Dark-mode overrides for the light variant */
:root.dark .stats-band-light{background:linear-gradient(135deg,#0B1628 0%,#0F172A 50%,#0B1628 100%)}
:root.dark .stats-band-light .stats-hdr h2{color:#E2E8F4}
:root.dark .stats-band-light .stats-hdr p{color:#94A3B8}
:root.dark .stats-band-light .stat-box{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .stats-band-light .stat-box:hover{background:#243354;border-color:rgba(125,170,255,0.3)}
:root.dark .stats-band-light .stat-box-n{color:#E2E8F4}
:root.dark .stats-band-light .stat-box-l{color:#CBD5E1}

/* ================================================================
   GLOBAL BACKGROUND SYSTEM
   Premium SVG-based backgrounds — layered, performant, brand-matched
   ================================================================ */

/* --- Cleaner body background — easy to read everywhere --- */
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,87,255,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  background-attachment:fixed !important;
  position:relative;
}

/* Very faint dotted grid — barely visible */
body::before{
  content:'' !important;
  position:fixed !important;
  inset:0 !important;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,87,255,0.03) 1px, transparent 0) !important;
  background-size:32px 32px !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

:root.dark body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(14,165,233,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0B1628 0%, #0A1432 100%) !important;
}
:root.dark body::before{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(125,170,255,0.04) 1px, transparent 0) !important;
}

/* ================================================================
   SECTION BACKGROUND VARIANTS
   Apply these classes on <section> to get different backgrounds
   ================================================================ */

/* --- BG 1: Tech Circuit / Blueprint pattern --- */
.bg-circuit{position:relative;overflow:hidden}
.bg-circuit::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><defs><pattern id='c' patternUnits='userSpaceOnUse' width='120' height='120'><path d='M20 20h80v80H20z' fill='none' stroke='%230057FF' stroke-opacity='0.08' stroke-width='1'/><circle cx='20' cy='20' r='3' fill='%230057FF' fill-opacity='0.12'/><circle cx='100' cy='20' r='3' fill='%230057FF' fill-opacity='0.12'/><circle cx='100' cy='100' r='3' fill='%230057FF' fill-opacity='0.12'/><circle cx='20' cy='100' r='3' fill='%230057FF' fill-opacity='0.12'/><path d='M60 20v40M20 60h40M60 60h40M60 100v-40' stroke='%230EA5E9' stroke-opacity='0.08' stroke-width='1'/></pattern></defs><rect width='120' height='120' fill='url(%23c)'/></svg>");
  opacity:0.8;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.bg-circuit > *{position:relative;z-index:1}
:root.dark .bg-circuit::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><defs><pattern id='c' patternUnits='userSpaceOnUse' width='120' height='120'><path d='M20 20h80v80H20z' fill='none' stroke='%237DAAFF' stroke-opacity='0.1' stroke-width='1'/><circle cx='20' cy='20' r='3' fill='%237DAAFF' fill-opacity='0.18'/><circle cx='100' cy='20' r='3' fill='%237DAAFF' fill-opacity='0.18'/><circle cx='100' cy='100' r='3' fill='%237DAAFF' fill-opacity='0.18'/><circle cx='20' cy='100' r='3' fill='%237DAAFF' fill-opacity='0.18'/><path d='M60 20v40M20 60h40M60 60h40M60 100v-40' stroke='%230EA5E9' stroke-opacity='0.12' stroke-width='1'/></pattern></defs><rect width='120' height='120' fill='url(%23c)'/></svg>");
}

/* --- BG 2: Hexagon Mesh (for tech/infra feel) --- */
.bg-hex{position:relative;overflow:hidden}
.bg-hex::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><path d='M28 0L56 16.2v33.6L28 66 0 49.8V16.2z' fill='none' stroke='%230057FF' stroke-opacity='0.07' stroke-width='1'/><path d='M0 49.8L28 66l28-16.2v33.6L28 100 0 83.4z' fill='none' stroke='%230057FF' stroke-opacity='0.07' stroke-width='1'/></svg>");
  opacity:0.9;
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.bg-hex > *{position:relative;z-index:1}
:root.dark .bg-hex::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><path d='M28 0L56 16.2v33.6L28 66 0 49.8V16.2z' fill='none' stroke='%237DAAFF' stroke-opacity='0.1' stroke-width='1'/><path d='M0 49.8L28 66l28-16.2v33.6L28 100 0 83.4z' fill='none' stroke='%237DAAFF' stroke-opacity='0.1' stroke-width='1'/></svg>");
}

/* --- BG 3: Wave / Topographic layers --- */
.bg-waves{position:relative;overflow:hidden}
.bg-waves::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%230057FF' fill-opacity='0.04' d='M0,192L80,176C160,160,320,128,480,138.7C640,149,800,203,960,213.3C1120,224,1280,192,1360,176L1440,160L1440,320L0,320Z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%230EA5E9' fill-opacity='0.03' d='M0,96L60,122.7C120,149,240,203,360,213.3C480,224,600,192,720,181.3C840,171,960,181,1080,170.7C1200,160,1320,128,1380,112L1440,96L1440,320L0,320Z'/></svg>");
  background-size:100% 60%, 100% 80%;
  background-position:bottom, bottom;
  background-repeat:no-repeat, no-repeat;
}
.bg-waves > *{position:relative;z-index:1}

/* --- BG 4: Aurora Gradient (soft flowing color) --- */
.bg-aurora{position:relative;overflow:hidden}
.bg-aurora::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,87,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(14,165,233,0.08) 0%, transparent 45%),
    radial-gradient(circle at 60% 80%, rgba(139,92,246,0.07) 0%, transparent 50%),
    radial-gradient(circle at 30% 90%, rgba(236,72,153,0.05) 0%, transparent 40%);
  animation:auroraShift 20s ease-in-out infinite alternate;
}
.bg-aurora > *{position:relative;z-index:1}
@keyframes auroraShift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2%,-1%) scale(1.05)}
  100%{transform:translate(2%,1%) scale(1)}
}

/* --- BG 5: Dotted (classic) --- */
.bg-dots{position:relative;overflow:hidden}
.bg-dots::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(0,87,255,0.15) 1px, transparent 0);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.bg-dots > *{position:relative;z-index:1}
:root.dark .bg-dots::before{
  background-image:radial-gradient(circle at 1px 1px, rgba(125,170,255,0.2) 1px, transparent 0);
}

/* --- BG 6: Diagonal lines (soft) --- */
.bg-lines{position:relative;overflow:hidden}
.bg-lines::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    45deg,
    transparent, transparent 28px,
    rgba(0,87,255,0.03) 28px, rgba(0,87,255,0.03) 29px);
}
.bg-lines > *{position:relative;z-index:1}
:root.dark .bg-lines::before{
  background-image:repeating-linear-gradient(
    45deg,
    transparent, transparent 28px,
    rgba(125,170,255,0.05) 28px, rgba(125,170,255,0.05) 29px);
}

/* ================================================================
   FLOATING DECORATIVE SHAPES
   Add these as children of sections that need extra depth
   ================================================================ */
.float-shape{position:absolute;pointer-events:none;z-index:0;filter:blur(40px);opacity:0.5}
.float-shape.fs-blue{background:radial-gradient(circle, rgba(0,87,255,0.35), transparent 70%);width:320px;height:320px;border-radius:50%}
.float-shape.fs-sky{background:radial-gradient(circle, rgba(14,165,233,0.3), transparent 70%);width:260px;height:260px;border-radius:50%}
.float-shape.fs-purple{background:radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%);width:280px;height:280px;border-radius:50%}
.float-shape.fs-pink{background:radial-gradient(circle, rgba(236,72,153,0.25), transparent 70%);width:220px;height:220px;border-radius:50%}
.float-shape.fs-green{background:radial-gradient(circle, rgba(16,185,129,0.25), transparent 70%);width:240px;height:240px;border-radius:50%}

.float-shape.fs-tl{top:-80px;left:-80px}
.float-shape.fs-tr{top:-80px;right:-80px}
.float-shape.fs-bl{bottom:-80px;left:-80px}
.float-shape.fs-br{bottom:-80px;right:-80px}
.float-shape.fs-ml{top:50%;left:-100px;transform:translateY(-50%)}
.float-shape.fs-mr{top:50%;right:-100px;transform:translateY(-50%)}

.float-shape.fs-anim{animation:floatDrift 18s ease-in-out infinite alternate}
@keyframes floatDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-15px) scale(1.1)}
  100%{transform:translate(-15px,10px) scale(0.95)}
}

/* ================================================================
   ENHANCED HERO BACKGROUND
   Overrides the existing .hero-bg for a richer feel
   ================================================================ */
.hero{position:relative;overflow:hidden}
.hero-bg{
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(0,87,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(14,165,233,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(139,92,246,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #F0F5FF 0%, #F8FAFF 50%, #EEF4FF 100%) !important;
}
.hero::after{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path d='M30 5L55 20v20L30 55 5 40V20z' fill='none' stroke='%230057FF' stroke-opacity='0.06' stroke-width='1'/></svg>");
  opacity:0.9;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 80%);
}
.hero .wrap{position:relative;z-index:2}

:root.dark .hero-bg{
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(14,165,233,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(125,170,255,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(139,92,246,0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0A1432 0%, #0F172A 50%, #0B1628 100%) !important;
}
:root.dark .hero::after{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path d='M30 5L55 20v20L30 55 5 40V20z' fill='none' stroke='%237DAAFF' stroke-opacity='0.08' stroke-width='1'/></svg>");
}

/* Animated particles floating in hero (pure CSS) */
.hero-bg::after{
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0,87,255,0.4) 1.5px, transparent 2px),
    radial-gradient(circle at 25% 70%, rgba(14,165,233,0.35) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 40%, rgba(139,92,246,0.3) 1.5px, transparent 2px),
    radial-gradient(circle at 75% 80%, rgba(16,185,129,0.3) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 30%, rgba(14,165,233,0.4) 1.5px, transparent 2px),
    radial-gradient(circle at 95% 50%, rgba(139,92,246,0.35) 1.5px, transparent 2px);
  animation:particlesFloat 30s linear infinite;
  opacity:0.5;
}
@keyframes particlesFloat{
  0%{transform:translateY(0)}
  100%{transform:translateY(-40px)}
}

/* ================================================================
   PAGE-HERO BACKGROUND ENHANCEMENT (for sub-pages)
   ================================================================ */
.page-hero{position:relative;overflow:hidden}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(0,87,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 40%, rgba(14,165,233,0.1) 0%, transparent 55%);
}
.page-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(0,87,255,0.12) 1.5px, transparent 0);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.page-hero .wrap{position:relative;z-index:2}

:root.dark .page-hero::before{
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(14,165,233,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 40%, rgba(125,170,255,0.12) 0%, transparent 55%);
}
:root.dark .page-hero::after{
  background-image:radial-gradient(circle at 1.5px 1.5px, rgba(125,170,255,0.15) 1.5px, transparent 0);
}

/* Ensure section content stays above background layers */
.sec{position:relative}
.sec > .wrap{position:relative;z-index:2}

/* Mobile perf: disable animated backgrounds on small screens */
@media (max-width:768px){
  .bg-aurora::before{animation:none}
  .hero-bg::after{animation:none}
  .float-shape{filter:blur(30px)}
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion:reduce){
  .bg-aurora::before, .hero-bg::after, .float-shape.fs-anim{animation:none !important}
}

/* ================================================================
   DARK MODE — Override inline light-background sections
   Inline styles can't be changed in HTML, so we use !important
   to override them only when dark mode is active.
   ================================================================ */
:root.dark section[style*="background:#fff"],
:root.dark section[style*="background:linear-gradient(135deg,#F0F7FF"],
:root.dark section[style*="background:linear-gradient(180deg,#F7F9FF"],
:root.dark section[style*="background:linear-gradient(180deg,#fff"],
:root.dark section[style*="background:linear-gradient(180deg,#FFFFFF"],
:root.dark section[style*="background:#F7F9FF"]{
  background:transparent !important;
}

/* Page hero dark fix */
:root.dark .page-hero{background:linear-gradient(135deg,#0A1432 0%,#0F172A 50%,#0B1628 100%) !important}
:root.dark .page-hero h1{color:#E2E8F4}
:root.dark .page-hero p{color:#94A3B8}

/* Dark mode for all text elements on previously-white sections */
:root.dark .sec h2,
:root.dark .sec h3,
:root.dark .sec h4,
:root.dark .sec p{color:inherit}
:root.dark .sec h2,
:root.dark .sec h3{color:#E2E8F4}
:root.dark .sec-sub{color:#94A3B8}

/* Industry cards / process flow / feature strip / other legacy cards */
:root.dark .ind-card,
:root.dark .pf-step .pf-icon,
:root.dark .feat-item,
:root.dark .vis-card,
:root.dark .timeline-card,
:root.dark .why-card,
:root.dark .val-item,
:root.dark .svc-visual{background:#1E293B !important;border-color:rgba(255,255,255,0.1)}
:root.dark .ind-name,
:root.dark .feat-title,
:root.dark .why-title,
:root.dark .pf-label{color:#E2E8F4}
:root.dark .ind-desc,
:root.dark .feat-desc,
:root.dark .why-desc,
:root.dark .pf-desc{color:#94A3B8}

/* Fix CTA box dark */
:root.dark .cta-box{background:linear-gradient(135deg,#0057FF 0%,#0040CC 50%,#0A2540 100%) !important}

/* Footer dark */
:root.dark footer,
:root.dark .ft-top,
:root.dark .ft-body{background:#050B1A !important}
:root.dark .ft-logo-name,
:root.dark footer h4,
:root.dark .ft-links li a{color:#E2E8F4}
:root.dark .ft-links li{color:#94A3B8}
:root.dark .ft-bottom{color:#94A3B8;border-color:rgba(255,255,255,0.08)}
:root.dark .ft-badge-item{background:rgba(255,255,255,0.05);color:#CBD5E1}

/* Trust bar dark */
:root.dark .trust-bar{background:#0B1628 !important;border-color:rgba(255,255,255,0.08)}
:root.dark .ti{color:#CBD5E1}

/* Partner strip dark */
:root.dark .partner-sec{background:#0B1628 !important}
:root.dark .partner-label{color:#94A3B8}

/* Infra section */
:root.dark .infra-stat{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .is-val{color:#7DAAFF}
:root.dark .is-label{color:#94A3B8}
:root.dark .infra-svg-wrap{border-color:rgba(255,255,255,0.1)}

/* Services card grid */
:root.dark .sw-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .sw-title{color:#E2E8F4}
:root.dark .sw-desc{color:#94A3B8}
:root.dark .sw-card.feat{background:linear-gradient(180deg,#1E293B,#243354)}

/* Cert badges */
:root.dark .cert-badge{background:rgba(255,255,255,0.05);color:#CBD5E1;border-color:rgba(255,255,255,0.1)}

/* Testimonials (already in features.css partially) */
:root.dark .testi-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .testi-text{color:#CBD5E1}
:root.dark .tav-name{color:#E2E8F4}
:root.dark .tav-role{color:#94A3B8}

/* ================================================================
   FIX: CTA section touching footer — add spacing
   ================================================================ */
section.sec:last-of-type,
section.sec[style*="padding-bottom:0"]{padding-bottom:5.5rem !important}
.page-wrap > section:last-child{margin-bottom:0}

/* Ensure footer has clear visual separation from last content section */
footer{margin-top:0;border-top:1px solid var(--border)}
:root.dark footer{border-top-color:rgba(255,255,255,0.08)}

/* ================================================================
   LOGO SYSTEM — Premium CSS-based ZTT logo (used in header + footer)
   Replaces the heavy base64 JPEG with clean inline SVG approach
   ================================================================ */
.ztt-logo-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#0057FF 0%,#0040CC 50%,#0EA5E9 100%);
  box-shadow:0 4px 14px rgba(0,87,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  position:relative;overflow:hidden
}
.ztt-logo-icon::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3), transparent 60%)
}
.ztt-logo-icon span{
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.35rem;
  color:#fff;letter-spacing:-1px;line-height:1;position:relative;z-index:1;
  text-shadow:0 1px 2px rgba(0,0,0,0.15)
}
.ztt-logo-icon.sm{width:32px;height:32px;border-radius:8px}
.ztt-logo-icon.sm span{font-size:1rem}
.ztt-logo-icon.lg{width:54px;height:54px;border-radius:12px}
.ztt-logo-icon.lg span{font-size:1.7rem}

/* ================================================================
   PREMIUM ENTERPRISE COMPONENTS — v4 content upgrade
   ================================================================ */

/* --- Outcome Strip (3-card row after trust bar) --- */
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.outcome-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:1.8rem 1.6rem;transition:all 0.35s cubic-bezier(.4,0,.2,1);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,87,255,0.05)}
.outcome-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ocard-a,#0057FF),var(--ocard-b,#0EA5E9));
  transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}
.outcome-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,87,255,0.15);border-color:var(--ocard-a,#0057FF)}
.outcome-card:hover::before{transform:scaleX(1)}
.outcome-card.oc-1{--ocard-a:#0057FF;--ocard-b:#0EA5E9}
.outcome-card.oc-2{--ocard-a:#10B981;--ocard-b:#06B6D4}
.outcome-card.oc-3{--ocard-a:#8B5CF6;--ocard-b:#EC4899}
.oc-ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--ocard-a),var(--ocard-b));
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;color:#fff;
  margin-bottom:1rem;box-shadow:0 6px 16px rgba(0,87,255,0.18)}
.oc-t{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:0.5rem;line-height:1.3}
.oc-d{font-size:0.88rem;color:var(--muted);line-height:1.65}

/* --- Layer Header (01/02/03 service architecture) --- */
.layer-hdr{display:flex;align-items:center;gap:1.4rem;margin-bottom:1.8rem;padding:1.2rem 0;
  border-top:1px solid var(--border);position:relative}
.layer-hdr::before{content:'';position:absolute;top:-1px;left:0;width:80px;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky));border-radius:2px}
.layer-num{font-family:'Poppins',sans-serif;font-size:2.6rem;font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-2px}
.layer-tag{font-size:0.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue);margin-bottom:0.25rem}
.layer-title{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;
  color:var(--text);letter-spacing:-0.4px;line-height:1.25;margin:0}

/* --- Service card bullet list & benefit line --- */
.benefit-line{font-size:0.82rem;color:var(--text2);line-height:1.55;
  background:linear-gradient(135deg,rgba(0,87,255,0.06),rgba(14,165,233,0.04));
  border-left:3px solid var(--blue);padding:0.7rem 0.9rem;border-radius:0 10px 10px 0;
  margin:0.8rem 0 0.9rem;font-style:italic}
.benefit-line strong{color:var(--blue);font-style:normal;font-weight:700}
.sw-bullets{list-style:none;padding:0;margin:0 0 1rem}
.sw-bullets li{position:relative;padding-left:1.3rem;font-size:0.82rem;color:var(--text3);
  line-height:1.5;margin-bottom:0.45rem}
.sw-bullets li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:800;font-size:0.9rem}

/* --- Why ZTT 7-point grid --- */
.why-grid-7{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.why7-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:1.8rem 1.6rem;transition:all 0.35s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 10px rgba(0,87,255,0.04)}
.why7-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky));transform:scaleX(0);
  transform-origin:left;transition:transform 0.4s ease}
.why7-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,87,255,0.16);border-color:var(--blue)}
.why7-card:hover::before{transform:scaleX(1)}
.why7-num{position:absolute;top:14px;right:18px;font-family:'Poppins',sans-serif;font-size:1.2rem;
  font-weight:800;color:rgba(0,87,255,0.18);letter-spacing:-0.5px}
.why7-ic{width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,rgba(0,87,255,0.12),rgba(14,165,233,0.06));
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1rem}
.why7-t{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text);
  margin-bottom:0.55rem;line-height:1.3;letter-spacing:-0.2px}
.why7-d{font-size:0.86rem;color:var(--muted);line-height:1.65}
.why7-wide{grid-column:span 3}

/* --- WhatsApp floating button --- */
.wa-fab{position:fixed;bottom:24px;left:24px;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(37,211,102,0.45);text-decoration:none;font-size:1.6rem;
  z-index:998;transition:transform 0.2s,box-shadow 0.2s}
.wa-fab::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid #25D366;opacity:0.5;animation:waPulse 2s infinite}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 14px 36px rgba(37,211,102,0.6)}
@keyframes waPulse{
  0%{transform:scale(1);opacity:0.6}
  100%{transform:scale(1.5);opacity:0}
}

/* --- Responsive --- */
@media (max-width:980px){
  .outcome-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .layer-hdr{flex-direction:column;align-items:flex-start;gap:0.6rem}
  .layer-num{font-size:2rem}
  .layer-title{font-size:1.25rem}
  .why-grid-7{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .why7-wide{grid-column:span 1}
  .wa-fab{width:48px;height:48px;font-size:1.4rem;bottom:18px;left:18px}
}

/* --- Dark mode --- */
:root.dark .outcome-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .oc-t{color:#E2E8F4}
:root.dark .oc-d{color:#94A3B8}
:root.dark .layer-hdr{border-color:rgba(255,255,255,0.1)}
:root.dark .layer-title{color:#E2E8F4}
:root.dark .benefit-line{background:linear-gradient(135deg,rgba(125,170,255,0.08),rgba(14,165,233,0.05));color:#CBD5E1}
:root.dark .benefit-line strong{color:#7DAAFF}
:root.dark .sw-bullets li{color:#CBD5E1}
:root.dark .why7-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .why7-t{color:#E2E8F4}
:root.dark .why7-d{color:#94A3B8}
:root.dark .why7-num{color:rgba(125,170,255,0.25)}
:root.dark .why7-ic{background:linear-gradient(135deg,rgba(125,170,255,0.15),rgba(14,165,233,0.08))}

/* ================================================================
   ENGAGEMENT TIER CARDS — Foundation / Scale / Transformation
   ================================================================ */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.tier-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:22px;
  padding:2.2rem 1.9rem 2rem;display:flex;flex-direction:column;
  box-shadow:0 4px 20px rgba(0,87,255,0.06);transition:all 0.4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.tier-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform 0.45s ease}
.tier-card:hover{transform:translateY(-8px);box-shadow:0 28px 64px rgba(0,87,255,0.18);border-color:var(--blue)}
.tier-card:hover::before{transform:scaleX(1)}

.tier-card-featured{border-color:var(--blue);box-shadow:0 16px 48px rgba(0,87,255,0.22);
  background:linear-gradient(180deg,#fff 0%,#F5F8FF 100%);transform:scale(1.025);z-index:2}
.tier-card-featured::before{transform:scaleX(1);height:6px;
  background:linear-gradient(90deg,#0057FF,#8B5CF6,#0EA5E9)}
.tier-card-featured:hover{transform:scale(1.025) translateY(-8px)}

.tier-ribbon{position:absolute;top:0;right:0;
  background:linear-gradient(135deg,var(--blue),#8B5CF6);color:#fff;
  font-size:0.66rem;font-weight:800;letter-spacing:1.2px;padding:8px 18px 8px 24px;
  border-bottom-left-radius:16px;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,87,255,0.35);z-index:3}

.tier-num{font-family:'Poppins',sans-serif;font-size:0.85rem;font-weight:800;
  color:var(--blue);letter-spacing:1.5px;margin-bottom:0.4rem}
.tier-tag{font-size:0.7rem;font-weight:800;letter-spacing:1.4px;
  color:var(--muted);text-transform:uppercase;margin-bottom:0.5rem}
.tier-name{font-family:'Poppins',sans-serif;font-size:2rem;font-weight:800;
  color:var(--text);letter-spacing:-1px;line-height:1.05;margin-bottom:0.6rem;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tier-tag-line{font-size:0.92rem;color:var(--text2);font-weight:600;
  line-height:1.5;margin-bottom:1.4rem;padding-bottom:1.3rem;border-bottom:1px solid var(--border)}

.tier-section{margin-bottom:1.3rem}
.tier-section-h{font-size:0.68rem;font-weight:800;letter-spacing:1.5px;
  color:var(--blue);text-transform:uppercase;margin-bottom:0.55rem;
  display:flex;align-items:center;gap:8px}
.tier-section-h::before{content:'';width:18px;height:2px;background:var(--blue);border-radius:2px}
.tier-section-d{font-size:0.85rem;color:var(--text3);line-height:1.65}

.tier-feats{list-style:none;padding:0;margin:0}
.tier-feats li{position:relative;padding-left:1.4rem;font-size:0.84rem;
  color:var(--text3);line-height:1.55;margin-bottom:0.5rem}
.tier-feats li::before{content:'✓';position:absolute;left:0;top:0;
  color:var(--green);font-weight:800;font-size:0.95rem}

.tier-vp{margin-top:0.4rem;padding:1.1rem 1.15rem;
  background:linear-gradient(135deg,rgba(0,87,255,0.05),rgba(14,165,233,0.03));
  border-left:3px solid var(--blue);border-radius:0 12px 12px 0}
.tier-vp p{font-size:0.86rem;color:var(--text2);line-height:1.7;
  font-style:italic;margin:0}

.tier-cta{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:0.95rem;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:0.9rem;font-weight:700;
  cursor:pointer;transition:all 0.25s;text-decoration:none;
  background:#fff;color:var(--blue);border:1.5px solid var(--blue);
  margin-top:auto}
.tier-cta:hover{background:var(--blue);color:#fff;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,87,255,0.28)}
.tier-card-featured .tier-cta{
  background:linear-gradient(135deg,var(--blue),#8B5CF6);color:#fff;border-color:transparent;
  box-shadow:0 6px 20px rgba(0,87,255,0.3)}
.tier-card-featured .tier-cta:hover{box-shadow:0 12px 32px rgba(0,87,255,0.42)}

/* Don't see your fit fallback */
.tier-fallback{display:flex;justify-content:space-between;align-items:center;
  gap:2rem;flex-wrap:wrap;margin-top:3rem;padding:2rem 2.4rem;
  background:linear-gradient(135deg,#F5F8FF,#EEF4FF);
  border:1.5px dashed rgba(0,87,255,0.25);border-radius:18px}
.tier-fallback-h{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:0.3rem}
.tier-fallback-d{font-size:0.9rem;color:var(--muted);line-height:1.6;max-width:560px}

@media (max-width:980px){
  .tier-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .tier-card-featured{transform:none}
  .tier-card-featured:hover{transform:translateY(-8px)}
  .tier-fallback{flex-direction:column;text-align:center;padding:1.6rem}
}

/* Dark mode */
:root.dark .tier-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .tier-card-featured{background:linear-gradient(180deg,#1E293B 0%,#243354 100%)}
:root.dark .tier-tag-line{color:#CBD5E1;border-color:rgba(255,255,255,0.1)}
:root.dark .tier-section-d,
:root.dark .tier-feats li{color:#CBD5E1}
:root.dark .tier-vp{background:linear-gradient(135deg,rgba(125,170,255,0.08),rgba(14,165,233,0.05))}
:root.dark .tier-vp p{color:#CBD5E1}
:root.dark .tier-cta{background:#0F172A;color:#7DAAFF;border-color:#7DAAFF}
:root.dark .tier-cta:hover{background:#7DAAFF;color:#0F172A}
:root.dark .tier-fallback{background:linear-gradient(135deg,#1E293B,#0F172A);border-color:rgba(125,170,255,0.2)}
:root.dark .tier-fallback-h{color:#E2E8F4}
:root.dark .tier-fallback-d{color:#94A3B8}

/* ================================================================
   MOBILE RESPONSIVE FIXES — Pricing & overall
   ================================================================ */
@media (max-width:980px){
  /* Pricing cards: better mobile spacing */
  .pkg-card{padding:1.8rem 1.4rem 1.5rem}
  .pkg-name{font-size:1.2rem}
  .pkg-amt{font-size:2.1rem}
  .pkg-feats li{font-size:0.82rem;padding:0.4rem 0}
  .pkg-feats-label{font-size:0.65rem}

  /* Engagement tier cards */
  .tier-card{padding:1.8rem 1.4rem 1.6rem}
  .tier-name{font-size:1.7rem}
  .tier-tag-line{font-size:0.85rem}
  .tier-feats li{font-size:0.8rem}
  .tier-vp p{font-size:0.82rem}

  /* Comparison tables — sticky first column on mobile */
  .cmp-wrap{margin-left:-1rem;margin-right:-1rem;border-radius:0;border-left:none;border-right:none}
  .cmp-table{min-width:600px;font-size:0.75rem}
  .cmp-table thead th,.cmp-table tbody td{padding:0.7rem 0.85rem}

  /* Category tabs — scroll horizontally on mobile if needed */
  .pkg-cat-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:0.4rem 0;gap:0.4rem;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem;
    scrollbar-width:none}
  .pkg-cat-tabs::-webkit-scrollbar{display:none}
  .pkg-cat-tab{flex-shrink:0;white-space:nowrap}

  /* Billing switch */
  .bill-switch button{padding:0.5rem 1rem;font-size:0.78rem}
  .bill-save{font-size:0.55rem;padding:1px 5px}
}

@media (max-width:560px){
  /* Hero mobile */
  .hero h1{font-size:1.8rem !important;line-height:1.15 !important}
  .hero-sub{font-size:0.92rem}

  /* Page hero h1 */
  .page-hero h1{font-size:1.65rem !important;line-height:1.2 !important}
  .page-hero p{font-size:0.9rem}

  /* Section h2 */
  .sec h2{font-size:1.5rem !important;line-height:1.2}

  /* Pricing — even tighter spacing */
  .pkg-card{padding:1.6rem 1.2rem 1.4rem}
  .pkg-amt{font-size:1.9rem}
  .pkg-tagline{font-size:0.82rem;min-height:auto}

  /* Tier cards mobile */
  .tier-card{padding:1.6rem 1.3rem}
  .tier-name{font-size:1.5rem}

  /* Tier ribbon — smaller on mobile */
  .tier-ribbon{font-size:0.58rem;padding:6px 12px 6px 16px}

  /* Comparison tables — more compact */
  .cmp-table{min-width:520px;font-size:0.7rem}
  .cmp-table thead th,.cmp-table tbody td{padding:0.6rem 0.7rem}
  .cmp-table thead th.cmp-pop::after{font-size:0.5rem;padding:1px 6px}

  /* Stats grid mobile — 2 columns instead of cramped */
  .stats-grid-xl{grid-template-columns:repeat(2,1fr) !important;gap:0.6rem !important}
  .stat-box{padding:1rem 0.7rem !important}
  .stat-box-n{font-size:1.5rem !important}
  .stat-box-l{font-size:0.7rem}
  .stat-box-sub{font-size:0.55rem}

  /* Lead banner mobile */
  .lead-banner{padding:1.8rem 1.2rem}
  .lead-banner h2{font-size:1.35rem !important;line-height:1.25}
  .lead-banner p{font-size:0.88rem}
  .lead-form{padding:1.3rem}
  .lead-form input,.lead-form select,.lead-form textarea{font-size:0.85rem;padding:0.7rem 0.85rem}

  /* Layer header on mobile */
  .layer-num{font-size:1.6rem !important}
  .layer-title{font-size:1.1rem !important}
  .layer-tag{font-size:0.62rem}

  /* Service cards */
  .sw-card{padding:1.4rem 1.2rem}
  .sw-title{font-size:1.05rem}
  .sw-desc{font-size:0.85rem}
  .benefit-line{font-size:0.78rem;padding:0.6rem 0.75rem}
  .sw-bullets li{font-size:0.78rem}

  /* Outcome cards */
  .oc-t{font-size:1.05rem}
  .oc-d{font-size:0.84rem}

  /* Why-7 cards */
  .why7-card{padding:1.5rem 1.3rem}
  .why7-t{font-size:0.98rem}
  .why7-d{font-size:0.82rem}

  /* Case cards mobile */
  .case-card{max-width:none}
  .case-title{font-size:1.05rem}
  .case-summary{font-size:0.82rem}

  /* Industries 2-col on mobile */
  .ind-grid-plus{grid-template-columns:repeat(2,1fr) !important;gap:0.7rem}
  .ind-plus{padding:1.1rem 0.9rem}
  .ind-plus-t{font-size:0.88rem}
  .ind-plus-d{font-size:0.72rem}
  .ind-plus-stats{font-size:0.62rem;gap:0.5rem}

  /* Nav buttons smaller on mobile */
  .btns{flex-direction:column;align-items:stretch;gap:0.6rem}
  .btn-p,.btn-s{width:100%;text-align:center;justify-content:center}

  /* Tier fallback mobile */
  .tier-fallback{padding:1.4rem 1.1rem}
  .tier-fallback-h{font-size:1.05rem}
  .tier-fallback-d{font-size:0.82rem}

  /* WhatsApp FAB smaller on mobile */
  .wa-fab{width:46px;height:46px;font-size:1.3rem;bottom:80px;left:14px}

  /* Hide some heavy decorative elements on small screens */
  .float-shape{display:none}
  body::before{opacity:0.5}

  /* Prevent table overflow horizontally */
  .cmp-wrap{margin-left:-0.8rem;margin-right:-0.8rem}
}

/* Very small screens (320–380px) */
@media (max-width:380px){
  .pkg-card{padding:1.4rem 1rem 1.2rem}
  .pkg-cat-tab{padding:0.5rem 0.8rem;font-size:0.72rem}
  .stat-box-n{font-size:1.3rem !important}
  .pkg-amt{font-size:1.7rem}
  .tier-name{font-size:1.35rem}
  .lead-banner h2{font-size:1.2rem !important}
}

/* Fix pricing comparison table — add scroll hint */
.cmp-wrap{position:relative}
@media (max-width:900px){
  .cmp-wrap::after{content:'← Scroll →';position:absolute;top:8px;right:12px;
    background:rgba(0,87,255,0.08);color:var(--blue);font-size:0.65rem;
    font-weight:700;padding:3px 8px;border-radius:100px;
    pointer-events:none;letter-spacing:0.5px}
}

/* Prevent horizontal page overflow on mobile */
html,body{overflow-x:hidden;max-width:100vw}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ================================================================
   REAL IMAGE INTEGRATION — Photo backgrounds for premium feel
   ================================================================ */

/* Case-study cards with real industry photos */
.case-visual.has-img{position:relative}
.case-visual.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.case-visual.has-img::before,
.case-visual.has-img::after{z-index:1}
.case-visual.has-img .case-emoji,
.case-visual.has-img .case-industry-badge{z-index:3}
/* Dark gradient overlay for text readability */
.case-visual.has-img .img-overlay{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(7,26,62,0.3) 0%,
    rgba(7,26,62,0.55) 60%,
    rgba(7,26,62,0.85) 100%)}
.case-visual.has-img .case-emoji{filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5));font-size:3.2rem;
  background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);
  width:80px;height:80px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.25)}

/* Hero image variant — full-bleed background photo */
.hero-image-bg{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0.5}
.hero-image-bg img{width:100%;height:100%;object-fit:cover;opacity:0.18;
  filter:brightness(0.6) contrast(1) saturate(0.5)}
.hero-image-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,
    rgba(248,250,255,0.85) 0%,
    rgba(238,244,255,0.7) 50%,
    rgba(245,248,255,0.85) 100%)}
:root.dark .hero-image-bg::after{
  background:linear-gradient(135deg,
    rgba(10,20,50,0.85) 0%,
    rgba(15,23,42,0.7) 50%,
    rgba(11,22,40,0.85) 100%)}

/* Section image banner — full-width photo with overlay */
.img-banner{position:relative;width:100%;border-radius:24px;overflow:hidden;
  margin:2.5rem 0;box-shadow:0 24px 64px rgba(0,87,255,0.2);min-height:340px}
.img-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.img-banner-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,
    rgba(7,26,62,0.85) 0%,
    rgba(0,87,255,0.7) 60%,
    rgba(14,165,233,0.55) 100%)}
.img-banner-content{position:relative;z-index:2;padding:3rem 2.5rem;color:#fff}
.img-banner-content .sec-tag{background:rgba(255,255,255,0.15);color:#fff;
  border-color:rgba(255,255,255,0.3);margin-bottom:1rem}
.img-banner-content h2{color:#fff;font-size:2rem;font-weight:800;
  letter-spacing:-0.6px;margin-bottom:0.7rem;line-height:1.2}
.img-banner-content p{color:rgba(255,255,255,0.9);font-size:0.98rem;
  line-height:1.7;max-width:620px;margin-bottom:1.2rem}
.img-banner-content .btn-white{background:#fff;color:var(--blue);padding:0.85rem 1.5rem;
  border-radius:10px;text-decoration:none;font-weight:700;font-size:0.9rem;
  display:inline-flex;align-items:center;gap:6px;transition:all 0.2s;
  box-shadow:0 6px 18px rgba(0,0,0,0.2)}
.img-banner-content .btn-white:hover{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.3)}

/* Image card grid — 2-column with photos */
.img-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2rem}
.img-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 8px 24px rgba(0,87,255,0.1);transition:all 0.4s cubic-bezier(.4,0,.2,1)}
.img-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,87,255,0.2)}
.img-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 0.6s ease}
.img-card:hover img{transform:scale(1.06)}
.img-card-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 30%,rgba(7,26,62,0.85) 100%)}
.img-card-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem;color:#fff}
.img-card-tag{display:inline-block;background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.25);color:#fff;padding:4px 10px;
  border-radius:100px;font-size:0.65rem;font-weight:700;letter-spacing:0.6px;
  text-transform:uppercase;margin-bottom:0.6rem}
.img-card-t{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;
  margin-bottom:0.35rem;line-height:1.25;color:#fff}
.img-card-d{font-size:0.84rem;color:rgba(255,255,255,0.85);line-height:1.5}

@media (max-width:760px){
  .img-card-grid{grid-template-columns:1fr}
  .img-banner{min-height:280px}
  .img-banner-content{padding:2rem 1.4rem}
  .img-banner-content h2{font-size:1.45rem}
}

/* Subtle dark mode adjustments — images already have their own overlays */
:root.dark .img-banner{box-shadow:0 24px 64px rgba(0,0,0,0.4)}

/* ================================================================
   REAL ZTT LOGO — image-based logo for header & footer
   ================================================================ */
.ztt-logo-img{display:block;flex-shrink:0;width:42px;height:42px;
  object-fit:contain;background:#fff;border-radius:10px;padding:4px;
  box-shadow:0 2px 8px rgba(0,87,255,0.12)}
.ztt-logo-img.lg{width:54px;height:54px;border-radius:12px;padding:5px}

/* In dark mode, logo gets a subtle border so the white tile reads cleanly */
:root.dark .ztt-logo-img{box-shadow:0 2px 10px rgba(0,0,0,0.3),
  inset 0 0 0 1px rgba(125,170,255,0.15)}

/* Mobile sizing */
@media (max-width:560px){
  .ztt-logo-img{width:36px;height:36px;border-radius:8px;padding:3px}
  .ztt-logo-img.lg{width:46px;height:46px}
}

/* ================================================================
   FULL ZTT LOGO (image with built-in "ZTT Solutions" text)
   ================================================================ */
.ztt-logo-full{display:block;height:50px;width:auto;max-width:200px;
  object-fit:contain;flex-shrink:0}
.ztt-logo-full.ft-logo-full{height:64px;max-width:240px}

/* Hide the redundant text spans if any remain anywhere */
.logo-wrap > div:has(.logo-name),
.ft-logo-wrap > div:has(.ft-logo-name){display:none}

/* Mobile sizing — keep logo readable on small screens */
@media (max-width:560px){
  .ztt-logo-full{height:40px;max-width:160px}
  .ztt-logo-full.ft-logo-full{height:54px;max-width:200px}
}
@media (max-width:380px){
  .ztt-logo-full{height:36px;max-width:140px}
}

/* ================================================================
   DOCTOR REVENUE SETTLEMENT MODULE — Featured visual
   ================================================================ */
.drs-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}

/* Visual ledger card mockup */
.drs-visual{background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:1.6rem 1.4rem;box-shadow:0 16px 48px rgba(239,68,68,0.12),0 4px 14px rgba(0,87,255,0.06);
  position:relative;overflow:hidden}
.drs-visual::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#EF4444,#F59E0B,#EF4444)}

.drs-visual-header{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--border)}
.drs-visual-name{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;color:var(--text)}
.drs-visual-sub{font-size:0.74rem;color:var(--muted);margin-top:2px}
.drs-visual-badge{background:rgba(16,185,129,0.12);color:var(--green);
  padding:4px 10px;border-radius:100px;font-size:0.65rem;font-weight:800;
  letter-spacing:0.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px}
.drs-visual-badge::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--green);animation:blink 1.6s infinite}

.drs-row{display:flex;justify-content:space-between;align-items:center;
  padding:0.7rem 0;font-size:0.85rem;border-bottom:1px solid rgba(0,87,255,0.06)}
.drs-row-l{color:var(--text2);font-weight:500;display:flex;align-items:center;gap:8px}
.drs-row-r{color:var(--text);font-family:'Poppins',sans-serif;font-weight:700}
.drs-ic{font-size:0.95rem;width:24px;text-align:center}
.drs-row-pos .drs-row-r{color:var(--green)}
.drs-row-neg .drs-row-r{color:#EF4444}

.drs-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border) 30%,var(--border) 70%,transparent);margin:0.6rem 0}

.drs-balance{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;margin:0.4rem -0.2rem 1rem;border-radius:14px;
  background:linear-gradient(135deg,rgba(0,87,255,0.08),rgba(14,165,233,0.05));
  border:1px solid rgba(0,87,255,0.15)}
.drs-balance-l{font-size:0.8rem;color:var(--text2);font-weight:700;letter-spacing:0.3px;text-transform:uppercase}
.drs-balance-r{font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.drs-actions{display:flex;gap:0.6rem;margin-bottom:0.9rem}
.drs-btn-primary{flex:1;padding:0.7rem;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;
  font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:700;
  transition:all 0.2s;box-shadow:0 4px 14px rgba(0,87,255,0.25)}
.drs-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,87,255,0.4)}
.drs-btn-secondary{flex:1;padding:0.7rem;border-radius:10px;cursor:pointer;
  background:#fff;color:var(--blue);border:1.5px solid var(--blue);
  font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:700;transition:all 0.2s}
.drs-btn-secondary:hover{background:rgba(0,87,255,0.05)}

.drs-foot{display:flex;justify-content:space-between;align-items:center;
  font-size:0.7rem;color:var(--muted);padding-top:0.7rem;border-top:1px dashed var(--border)}
.drs-live{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:700}
.drs-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.6s infinite}

/* Features list */
.drs-features{display:flex;flex-direction:column;gap:1rem}
.drs-feat{display:flex;gap:14px;padding:1rem 1.2rem;background:#fff;
  border:1px solid var(--border);border-radius:14px;
  transition:all 0.25s;box-shadow:0 1px 4px rgba(0,87,255,0.03)}
.drs-feat:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(239,68,68,0.1);border-color:#F59E0B}
.drs-feat-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(245,158,11,0.06));
  display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.drs-feat-t{font-family:'Poppins',sans-serif;font-size:0.95rem;font-weight:700;
  color:var(--text);margin-bottom:0.25rem;line-height:1.3}
.drs-feat-d{font-size:0.82rem;color:var(--muted);line-height:1.6}

/* Mobile */
@media (max-width:980px){
  .drs-grid{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:560px){
  .drs-visual{padding:1.3rem 1.1rem}
  .drs-row{font-size:0.8rem;padding:0.6rem 0}
  .drs-balance-r{font-size:1.2rem}
  .drs-feat{padding:0.85rem 1rem}
  .drs-feat-t{font-size:0.88rem}
  .drs-feat-d{font-size:0.78rem}
  .drs-actions{flex-direction:column}
}

/* Dark mode */
:root.dark .drs-visual{background:#1E293B;border-color:rgba(255,255,255,0.1);
  box-shadow:0 16px 48px rgba(0,0,0,0.4)}
:root.dark .drs-visual-name{color:#E2E8F4}
:root.dark .drs-visual-sub{color:#94A3B8}
:root.dark .drs-visual-header{border-color:rgba(255,255,255,0.1)}
:root.dark .drs-row{border-color:rgba(255,255,255,0.05)}
:root.dark .drs-row-l{color:#CBD5E1}
:root.dark .drs-row-r{color:#E2E8F4}
:root.dark .drs-balance{background:linear-gradient(135deg,rgba(125,170,255,0.12),rgba(14,165,233,0.08));
  border-color:rgba(125,170,255,0.25)}
:root.dark .drs-balance-l{color:#CBD5E1}
:root.dark .drs-btn-secondary{background:#0F172A;color:#7DAAFF;border-color:#7DAAFF}
:root.dark .drs-btn-secondary:hover{background:#1E293B}
:root.dark .drs-foot{color:#94A3B8;border-color:rgba(255,255,255,0.08)}
:root.dark .drs-feat{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .drs-feat-t{color:#E2E8F4}
:root.dark .drs-feat-d{color:#94A3B8}
:root.dark .drs-feat-ic{background:linear-gradient(135deg,rgba(239,68,68,0.18),rgba(245,158,11,0.1))}

/* ================================================================
   MANUAL vs AUTOMATED — Problem to Solution comparison
   ================================================================ */
.manual-vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:stretch;max-width:1100px;margin:0 auto}
.mva-card{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:1.8rem 1.6rem;
  box-shadow:0 4px 18px rgba(0,87,255,0.06);transition:all 0.3s}
.mva-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,87,255,0.12)}
.mva-before{border-color:rgba(239,68,68,0.25);background:linear-gradient(180deg,#fff,#FEF2F2)}
.mva-after{border-color:rgba(16,185,129,0.25);background:linear-gradient(180deg,#fff,#ECFDF5)}
.mva-tag{display:inline-block;font-size:0.72rem;font-weight:800;letter-spacing:0.6px;
  color:#EF4444;background:rgba(239,68,68,0.1);padding:5px 12px;border-radius:100px;margin-bottom:1rem;text-transform:uppercase}
.mva-tag-good{color:var(--green);background:rgba(16,185,129,0.12)}
.mva-title{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);
  margin-bottom:1.1rem;line-height:1.3}
.mva-list{list-style:none;padding:0;margin:0}
.mva-list li{display:flex;gap:10px;padding:0.55rem 0;font-size:0.86rem;line-height:1.55;color:var(--text2);
  border-bottom:1px dashed var(--border)}
.mva-list li:last-child{border-bottom:none}
.mva-x,.mva-y{flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;margin-top:1px}
.mva-x{background:rgba(239,68,68,0.15);color:#EF4444}
.mva-y{background:rgba(16,185,129,0.15);color:var(--green)}

.mva-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem}
.mva-arrow-circle{width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:900;
  box-shadow:0 10px 28px rgba(0,87,255,0.4);position:relative}
.mva-arrow-circle::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--blue);opacity:0.4;animation:waPulse 2.5s infinite}
.mva-arrow-label{font-family:'Poppins',sans-serif;font-size:0.78rem;font-weight:800;
  color:var(--blue);text-align:center;letter-spacing:0.5px;text-transform:uppercase}

@media (max-width:900px){
  .manual-vs-grid{grid-template-columns:1fr}
  .mva-arrow{flex-direction:row;padding:1rem 0}
  .mva-arrow-circle{transform:rotate(90deg);width:50px;height:50px;font-size:1.4rem}
}

:root.dark .mva-before{background:linear-gradient(180deg,#1E293B,#2A1818);border-color:rgba(239,68,68,0.3)}
:root.dark .mva-after{background:linear-gradient(180deg,#1E293B,#0F2A1F);border-color:rgba(16,185,129,0.3)}
:root.dark .mva-card{box-shadow:0 4px 18px rgba(0,0,0,0.4)}
:root.dark .mva-title{color:#E2E8F4}
:root.dark .mva-list li{color:#CBD5E1;border-color:rgba(255,255,255,0.08)}

/* ================================================================
   FEATURED SOLUTIONS — ERP / POS / TSplus cards with image header
   ================================================================ */
.featsol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.featsol-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 4px 18px rgba(0,87,255,0.06);transition:all 0.4s cubic-bezier(.4,0,.2,1)}
.featsol-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(0,87,255,0.18)}
.featsol-card-feat{border-color:#F59E0B;box-shadow:0 12px 36px rgba(245,158,11,0.18)}

.featsol-img{position:relative;height:170px;overflow:hidden}
.featsol-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.featsol-card:hover .featsol-img img{transform:scale(1.07)}
.featsol-img-overlay{position:absolute;inset:0}
.featsol-badge{position:absolute;left:14px;bottom:14px;color:#fff;
  padding:6px 14px;border-radius:100px;font-size:0.72rem;font-weight:800;
  letter-spacing:0.5px;backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,0.2)}
.featsol-pop{position:absolute;top:12px;right:12px;background:#fff;color:#F59E0B;
  padding:5px 11px;border-radius:100px;font-size:0.65rem;font-weight:800;letter-spacing:0.6px;
  text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,0.15)}

.featsol-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.featsol-title{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);
  line-height:1.3;margin-bottom:0.55rem;letter-spacing:-0.2px}
.featsol-desc{font-size:0.86rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}
.featsol-desc strong{color:var(--blue)}
.featsol-pts{list-style:none;padding:0;margin:0 0 1.2rem;flex:1}
.featsol-pts li{font-size:0.83rem;color:var(--text3);line-height:1.55;padding:0.35rem 0}
.featsol-link{color:var(--blue);font-weight:700;font-size:0.85rem;
  display:inline-flex;align-items:center;gap:5px;transition:gap 0.2s;text-decoration:none}
.featsol-link:hover{gap:9px}

@media (max-width:980px){
  .featsol-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}

:root.dark .featsol-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .featsol-title{color:#E2E8F4}
:root.dark .featsol-desc{color:#94A3B8}
:root.dark .featsol-pts li{color:#CBD5E1}
:root.dark .featsol-pop{background:#243354;color:#F59E0B}

/* ================================================================
   PRICING PREVIEW — 3 simplified cards
   ================================================================ */
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1080px;margin:0 auto}
.pp-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:20px;
  padding:2rem 1.7rem 1.8rem;text-align:center;transition:all 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 18px rgba(0,87,255,0.06);overflow:hidden}
.pp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform 0.4s}
.pp-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,87,255,0.18);border-color:var(--blue)}
.pp-card:hover::before{transform:scaleX(1)}
.pp-card-feat{border-color:var(--blue);box-shadow:0 12px 36px rgba(0,87,255,0.18);
  background:linear-gradient(180deg,#fff,#F5F8FF);transform:scale(1.025);z-index:2}
.pp-card-feat::before{transform:scaleX(1);height:4px}
.pp-card-feat:hover{transform:scale(1.025) translateY(-6px)}
.pp-ribbon{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--blue),var(--sky));
  color:#fff;font-size:0.62rem;font-weight:800;letter-spacing:1px;padding:6px 16px 6px 22px;
  border-bottom-left-radius:14px;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,87,255,0.3)}
.pp-ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;margin:0 auto 0.9rem;box-shadow:0 6px 16px rgba(0,87,255,0.18)}
.pp-cat{font-size:0.66rem;font-weight:800;letter-spacing:1.5px;color:var(--blue);
  text-transform:uppercase;margin-bottom:0.3rem}
.pp-name{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;color:var(--text);
  margin-bottom:0.8rem;line-height:1.25}
.pp-from{font-size:0.7rem;color:var(--muted);font-weight:600;letter-spacing:0.4px;text-transform:uppercase}
.pp-price{font-family:'Poppins',sans-serif;font-size:1.9rem;font-weight:800;color:var(--text);
  letter-spacing:-0.8px;line-height:1;margin:0.3rem 0 0.9rem}
.pp-price span{font-size:0.85rem;font-weight:600;color:var(--muted);letter-spacing:0}
.pp-desc{font-size:0.82rem;color:var(--muted);line-height:1.6;margin-bottom:1.2rem;min-height:54px}
.pp-cta{display:block;padding:0.8rem;border-radius:10px;background:#fff;color:var(--blue);
  border:1.5px solid var(--blue);font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:700;
  text-decoration:none;transition:all 0.2s}
.pp-cta:hover{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,87,255,0.28)}
.pp-card-feat .pp-cta{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(0,87,255,0.28)}
.pp-card-feat .pp-cta:hover{box-shadow:0 10px 28px rgba(0,87,255,0.42)}

@media (max-width:980px){
  .pp-grid{grid-template-columns:1fr;max-width:400px}
  .pp-card-feat{transform:none}
  .pp-card-feat:hover{transform:translateY(-6px)}
}

:root.dark .pp-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .pp-card-feat{background:linear-gradient(180deg,#1E293B,#243354)}
:root.dark .pp-name{color:#E2E8F4}
:root.dark .pp-price{color:#E2E8F4}
:root.dark .pp-desc{color:#94A3B8}
:root.dark .pp-cta{background:#0F172A;color:#7DAAFF;border-color:#7DAAFF}
:root.dark .pp-cta:hover{background:#7DAAFF;color:#0F172A}
.acc-tsplus{--accent:#F59E0B;--accent2:#EF4444;--accent-bg:rgba(245,158,11,0.08)}

/* ================================================================
   PARTNER CARDS — TSplus / Sidat Hyder
   ================================================================ */
.partner-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.partner-card{display:flex;gap:1.4rem;background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:1.8rem 1.7rem;transition:all 0.3s;box-shadow:0 4px 14px rgba(0,87,255,0.06)}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,87,255,0.13);border-color:var(--blue)}
.partner-logo{flex-shrink:0;width:80px;height:80px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-1px;
  box-shadow:0 8px 22px rgba(16,185,129,0.3)}
.partner-info{flex:1;min-width:0}
.partner-name{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:800;color:var(--text);
  margin-bottom:0.25rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.partner-badge{font-size:0.62rem;font-weight:800;letter-spacing:0.6px;
  background:rgba(16,185,129,0.12);color:var(--green);padding:3px 9px;border-radius:100px;text-transform:uppercase}
.partner-tagline{font-size:0.78rem;color:var(--blue);font-weight:700;margin-bottom:0.7rem;letter-spacing:0.3px}
.partner-desc{font-size:0.86rem;color:var(--muted);line-height:1.65;margin-bottom:0.9rem}
.partner-perks{display:flex;flex-wrap:wrap;gap:0.6rem;font-size:0.76rem;color:var(--text2);font-weight:600}
.partner-perks span{background:rgba(0,87,255,0.05);padding:4px 9px;border-radius:8px}

@media (max-width:980px){
  .partner-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .partner-card{flex-direction:column;padding:1.4rem 1.2rem}
  .partner-logo{width:60px;height:60px;font-size:1.2rem;border-radius:14px}
}

:root.dark .partner-card{background:#1E293B;border-color:rgba(255,255,255,0.1)}
:root.dark .partner-name{color:#E2E8F4}
:root.dark .partner-desc{color:#94A3B8}
:root.dark .partner-perks span{background:rgba(125,170,255,0.1);color:#CBD5E1}

/* ================================================================
   CONTACT PAGE — WhatsApp & Call buttons
   ================================================================ */
.contact-wa-btn{display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;padding:0.95rem 1.6rem;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:0.95rem;font-weight:700;text-decoration:none;
  box-shadow:0 8px 24px rgba(37,211,102,0.4);transition:all 0.25s}
.contact-wa-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,0.55);background:#1FAD52}
.contact-call-btn{display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--text);padding:0.95rem 1.6rem;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:0.95rem;font-weight:700;text-decoration:none;
  border:1.5px solid var(--border);transition:all 0.25s}
.contact-call-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

@media (max-width:560px){
  .contact-wa-btn,.contact-call-btn{font-size:0.85rem;padding:0.8rem 1.2rem}
}

:root.dark .contact-call-btn{background:#1E293B;color:#E2E8F4;border-color:rgba(255,255,255,0.1)}
:root.dark .contact-call-btn:hover{border-color:#7DAAFF;color:#7DAAFF}

/* ================================================================
   READABILITY FIX — Hero text contrast
   Reduce decorative element intensity so text is always readable
   ================================================================ */
.hero .float-shape{opacity:0.18 !important;filter:blur(60px) !important}
.hero h1{position:relative;z-index:3}
.hero p,.hero .pill,.hero .btns,.hero .stat-row{position:relative;z-index:3}

/* Strengthen text contrast on hero */
.hero h1{color:#0A2540}
.hero h1 em{color:#0057FF;font-style:normal;font-weight:800}
.hero-sub{color:#475569 !important;font-weight:500}
:root.dark .hero h1{color:#F1F5F9}
:root.dark .hero h1 em{color:#7DAAFF}
:root.dark .hero-sub{color:#CBD5E1 !important}

/* Hide hero image entirely on light mode if it's too distracting */
.hero-image-bg{opacity:0.4}
:root.dark .hero-image-bg{opacity:0.25}

/* ================================================================
   CLEAN HERO BACKGROUND — grid only, no image
   ================================================================ */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F8FF 50%,#EEF4FF 100%) !important}
.hero-bg,.hero-image-bg,.hero-dots{display:none !important}

.hero-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,87,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,87,255,0.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%)}

/* Light orbs - keep as soft gradients only */
.hero-orb1,.hero-orb2{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.hero-orb1{top:-150px;right:-100px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(0,87,255,0.15),transparent 70%)}
.hero-orb2{bottom:-200px;left:-100px;width:450px;height:450px;
  background:radial-gradient(circle,rgba(14,165,233,0.12),transparent 70%)}

/* Hero text - max contrast */
.hero h1{color:#0A2540 !important;position:relative;z-index:3}
.hero h1 em{color:#0057FF !important;font-style:normal;font-weight:800}
.hero-sub{color:#475569 !important;position:relative;z-index:3}
.hero .pill,.hero .btns,.hero .stat-row{position:relative;z-index:3}
.hero-vis{position:relative;z-index:3}

:root.dark .hero{background:linear-gradient(180deg,#0B1628 0%,#0A1432 100%) !important}
:root.dark .hero-grid-bg{
  background-image:
    linear-gradient(rgba(125,170,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,170,255,0.08) 1px, transparent 1px)}
:root.dark .hero h1{color:#F1F5F9 !important}
:root.dark .hero h1 em{color:#7DAAFF !important}
:root.dark .hero-sub{color:#CBD5E1 !important}
:root.dark .hero-orb1{background:radial-gradient(circle,rgba(14,165,233,0.2),transparent 70%)}
:root.dark .hero-orb2{background:radial-gradient(circle,rgba(125,170,255,0.15),transparent 70%)}

/* ================================================================
   MANUAL vs AUTOMATED — image headers on cards
   ================================================================ */
.mva-card{padding:0;overflow:hidden}
.mva-card-img{position:relative;height:160px;overflow:hidden}
.mva-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.mva-card:hover .mva-card-img img{transform:scale(1.06)}
.mva-card-img-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(239,68,68,0.5) 100%)}
.mva-card-body{padding:1.6rem 1.5rem}

@media (max-width:560px){
  .mva-card-img{height:130px}
}

/* ================================================================
   CATEGORY-SCOPED COLOR THEMING for pricing cards
   Each .pkg-panel.acc-X applies its colors to all child elements
   ================================================================ */

/* Top accent bar on cards inherits category color */
.pkg-panel.acc-cloud .pkg-card::before,
.pkg-panel.acc-web .pkg-card::before,
.pkg-panel.acc-erp .pkg-card::before,
.pkg-panel.acc-tsplus .pkg-card::before{
  background:linear-gradient(90deg,var(--accent),var(--accent2)) !important}

/* Card hover border = accent */
.pkg-panel.acc-cloud .pkg-card:hover,
.pkg-panel.acc-web .pkg-card:hover,
.pkg-panel.acc-erp .pkg-card:hover,
.pkg-panel.acc-tsplus .pkg-card:hover{border-color:var(--accent) !important}

/* Featured card */
.pkg-panel.acc-cloud .pkg-card-featured,
.pkg-panel.acc-web .pkg-card-featured,
.pkg-panel.acc-erp .pkg-card-featured,
.pkg-panel.acc-tsplus .pkg-card-featured{border-color:var(--accent) !important;
  box-shadow:0 10px 36px var(--accent-bg) !important}

/* Ribbon */
.pkg-panel.acc-cloud .pkg-ribbon,
.pkg-panel.acc-web .pkg-ribbon,
.pkg-panel.acc-erp .pkg-ribbon,
.pkg-panel.acc-tsplus .pkg-ribbon{
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  box-shadow:0 4px 12px var(--accent-bg) !important}

/* Tier label */
.pkg-panel.acc-cloud .pkg-tier,
.pkg-panel.acc-web .pkg-tier,
.pkg-panel.acc-erp .pkg-tier,
.pkg-panel.acc-tsplus .pkg-tier{color:var(--accent) !important}
.pkg-panel.acc-cloud .pkg-tier::before,
.pkg-panel.acc-web .pkg-tier::before,
.pkg-panel.acc-erp .pkg-tier::before,
.pkg-panel.acc-tsplus .pkg-tier::before{background:var(--accent) !important}

/* CTA buttons */
.pkg-panel.acc-cloud .pkg-cta,
.pkg-panel.acc-web .pkg-cta,
.pkg-panel.acc-erp .pkg-cta,
.pkg-panel.acc-tsplus .pkg-cta{color:var(--accent) !important;border-color:var(--accent) !important}
.pkg-panel.acc-cloud .pkg-cta:hover,
.pkg-panel.acc-web .pkg-cta:hover,
.pkg-panel.acc-erp .pkg-cta:hover,
.pkg-panel.acc-tsplus .pkg-cta:hover{background:var(--accent) !important;color:#fff !important}
.pkg-panel.acc-cloud .pkg-card-featured .pkg-cta,
.pkg-panel.acc-web .pkg-card-featured .pkg-cta,
.pkg-panel.acc-erp .pkg-card-featured .pkg-cta,
.pkg-panel.acc-tsplus .pkg-card-featured .pkg-cta{
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;color:#fff !important;border-color:transparent !important}

/* Bullet check tinted with accent (subtle) */
.pkg-panel.acc-web .pkg-feats .pkg-check{background:rgba(16,185,129,0.15);color:#10B981}
.pkg-panel.acc-erp .pkg-feats .pkg-check{background:rgba(139,92,246,0.15);color:#8B5CF6}
.pkg-panel.acc-tsplus .pkg-feats .pkg-check{background:rgba(245,158,11,0.18);color:#F59E0B}
.pkg-panel.acc-cloud .pkg-feats .pkg-check{background:rgba(0,87,255,0.15);color:#0057FF}

/* Highlight color in feats follows accent */
.pkg-panel.acc-web .pf-highlight{color:#10B981 !important}
.pkg-panel.acc-erp .pf-highlight{color:#8B5CF6 !important}
.pkg-panel.acc-tsplus .pf-highlight{color:#F59E0B !important}
.pkg-panel.acc-cloud .pf-highlight{color:#0057FF !important}

/* Save badge in price-sub */
.pkg-panel.acc-cloud .pkg-save,
.pkg-panel.acc-web .pkg-save,
.pkg-panel.acc-erp .pkg-save,
.pkg-panel.acc-tsplus .pkg-save{color:var(--accent) !important;font-weight:700}

/* Comparison table popular column color matches category */
.pkg-panel.acc-web .cmp-table thead th.cmp-pop{background:linear-gradient(135deg,#10B981,#06B6D4) !important}
.pkg-panel.acc-erp .cmp-table thead th.cmp-pop{background:linear-gradient(135deg,#8B5CF6,#EC4899) !important}
.pkg-panel.acc-tsplus .cmp-table thead th.cmp-pop{background:linear-gradient(135deg,#F59E0B,#EF4444) !important}
.pkg-panel.acc-cloud .cmp-table thead th.cmp-pop{background:linear-gradient(135deg,#0057FF,#0EA5E9) !important}

/* Comparison table section row color tinted */
.pkg-panel.acc-web .cmp-table tr.cmp-section-row td{color:#10B981 !important;background:rgba(16,185,129,0.05) !important}
.pkg-panel.acc-erp .cmp-table tr.cmp-section-row td{color:#8B5CF6 !important;background:rgba(139,92,246,0.05) !important}
.pkg-panel.acc-tsplus .cmp-table tr.cmp-section-row td{color:#F59E0B !important;background:rgba(245,158,11,0.06) !important}

/* Featured card subtle bg tint per category */
.pkg-panel.acc-web .pkg-card-featured{background:linear-gradient(180deg,#fff 0%,#F0FDF7 100%) !important}
.pkg-panel.acc-erp .pkg-card-featured{background:linear-gradient(180deg,#fff 0%,#FAF5FF 100%) !important}
.pkg-panel.acc-tsplus .pkg-card-featured{background:linear-gradient(180deg,#fff 0%,#FFFBEB 100%) !important}

/* Dark mode keeps accent colors */
:root.dark .pkg-panel.acc-web .pkg-card-featured,
:root.dark .pkg-panel.acc-erp .pkg-card-featured,
:root.dark .pkg-panel.acc-tsplus .pkg-card-featured,
:root.dark .pkg-panel.acc-cloud .pkg-card-featured{background:linear-gradient(180deg,#1E293B 0%,#243354 100%) !important}

/* Category tab active state matches its panel color */
.pkg-cat-tab[data-cat="web"].active{background:linear-gradient(135deg,#10B981,#06B6D4) !important;
  box-shadow:0 8px 24px rgba(16,185,129,0.3) !important}
.pkg-cat-tab[data-cat="erp"].active{background:linear-gradient(135deg,#8B5CF6,#EC4899) !important;
  box-shadow:0 8px 24px rgba(139,92,246,0.3) !important}
.pkg-cat-tab[data-cat="tsplus"].active{background:linear-gradient(135deg,#F59E0B,#EF4444) !important;
  box-shadow:0 8px 24px rgba(245,158,11,0.3) !important}
.pkg-cat-tab[data-cat="cloud"].active{background:linear-gradient(135deg,#0057FF,#0EA5E9) !important;
  box-shadow:0 8px 24px rgba(0,87,255,0.3) !important}

/* Hover color tints per category tab */
.pkg-cat-tab[data-cat="web"]:hover:not(.active){border-color:#10B981 !important;color:#10B981 !important}
.pkg-cat-tab[data-cat="erp"]:hover:not(.active){border-color:#8B5CF6 !important;color:#8B5CF6 !important}
.pkg-cat-tab[data-cat="tsplus"]:hover:not(.active){border-color:#F59E0B !important;color:#F59E0B !important}
.pkg-cat-tab[data-cat="cloud"]:hover:not(.active){border-color:#0057FF !important;color:#0057FF !important}

/* ================================================================
   DARK MODE — MASTER OVERRIDE
   Handles ALL inline light backgrounds across the whole site
   ================================================================ */

/* 1. Force-override any inline white/light backgrounds on sections */
:root.dark section[style*="background:#fff"],
:root.dark section[style*="background:#FFF"],
:root.dark section[style*="background:linear-gradient(180deg,#fff"],
:root.dark section[style*="background:linear-gradient(180deg,#FFF"],
:root.dark section[style*="background:linear-gradient(135deg,#F"],
:root.dark section[style*="background:linear-gradient(180deg,#F"],
:root.dark section[style*="background:linear-gradient(180deg,#fff"],
:root.dark section[style*="background:#F7F9FF"],
:root.dark section[style*="background:#F5F8FF"],
:root.dark section[style*="background:#FFFFFF"],
:root.dark section[style*="background:#fff5f5"],
:root.dark section[style*="background:#FFF5F5"]{
  background:transparent !important}

/* 2. Force section-level inline backgrounds with bg-* classes too */
:root.dark .sec[style]{background:transparent !important}

/* 3. All white card-type elements get a dark surface */
:root.dark .pkg-card,
:root.dark .tier-card,
:root.dark .case-card,
:root.dark .why7-card,
:root.dark .outcome-card,
:root.dark .featsol-card,
:root.dark .pp-card,
:root.dark .mva-card,
:root.dark .partner-card,
:root.dark .ind-plus,
:root.dark .feat-item,
:root.dark .why-card,
:root.dark .ind-card,
:root.dark .testi-card,
:root.dark .stat-box,
:root.dark .sw-card,
:root.dark .drs-feat,
:root.dark .drs-visual,
:root.dark .why-point{
  background:#1E293B !important;
  border-color:rgba(255,255,255,0.1) !important}

/* 4. Featured cards keep gradient but in dark colors */
:root.dark .pkg-card-featured,
:root.dark .tier-card-featured,
:root.dark .pp-card-feat{
  background:linear-gradient(180deg,#1E293B 0%,#243354 100%) !important}

/* 5. Manual vs Automated colored cards */
:root.dark .mva-before{background:linear-gradient(180deg,#1E293B,#2A1418) !important}
:root.dark .mva-after{background:linear-gradient(180deg,#1E293B,#0F2A1F) !important}

/* 6. All headings & body text in dark */
:root.dark h1,
:root.dark h2,
:root.dark h3,
:root.dark h4{color:#E2E8F4}
:root.dark p{color:#94A3B8}
:root.dark .sec-sub,
:root.dark .sec-tag{color:#94A3B8}
:root.dark .pkg-name,
:root.dark .pkg-amt,
:root.dark .tier-name,
:root.dark .case-title,
:root.dark .why7-t,
:root.dark .oc-t,
:root.dark .featsol-title,
:root.dark .pp-name,
:root.dark .mva-title,
:root.dark .ind-plus-t,
:root.dark .partner-name,
:root.dark .layer-title,
:root.dark .sw-title{color:#E2E8F4 !important}

/* 7. CTA box stays dark blue gradient (good in both modes) */
:root.dark .cta-box{background:linear-gradient(135deg,#0057FF 0%,#0040CC 50%,#0A2540 100%) !important}

/* 8. Footer */
:root.dark footer,
:root.dark .ft-top,
:root.dark .ft-body{background:#050B1A !important}

/* 9. Trust bar */
:root.dark .trust-bar{background:#0B1628 !important;border-color:rgba(255,255,255,0.08)}
:root.dark .ti{color:#CBD5E1}

/* 10. Body text on the dark cards */
:root.dark .pkg-tagline,
:root.dark .case-summary,
:root.dark .why7-d,
:root.dark .oc-d,
:root.dark .featsol-desc,
:root.dark .pp-desc,
:root.dark .ind-plus-d,
:root.dark .partner-desc,
:root.dark .sw-desc,
:root.dark .mva-list li{color:#94A3B8 !important}

/* 11. Comparison table dark styling */
:root.dark .cmp-wrap{background:#1E293B !important;border-color:rgba(255,255,255,0.1) !important}
:root.dark .cmp-table thead th{background:linear-gradient(135deg,#243354,#1E293B) !important;color:#E2E8F4 !important}
:root.dark .cmp-table tbody td{color:#CBD5E1 !important;border-color:rgba(255,255,255,0.08) !important}
:root.dark .cmp-table tbody td:first-child{color:#E2E8F4 !important;background:rgba(255,255,255,0.03) !important}

/* 12. Buttons */
:root.dark .btn-s{background:#1E293B;color:#7DAAFF;border-color:rgba(125,170,255,0.3)}
:root.dark .btn-s:hover{background:#243354;border-color:#7DAAFF}

/* 13. Lead form dark */
:root.dark .lead-form{background:#1E293B !important;color:#E2E8F4 !important}
:root.dark .lead-form input,
:root.dark .lead-form select,
:root.dark .lead-form textarea{background:#0F172A !important;color:#E2E8F4 !important;border-color:rgba(255,255,255,0.15) !important}

/* 14. FAQ items dark */
:root.dark .faq-item{background:#1E293B !important;border-color:rgba(255,255,255,0.1) !important}
:root.dark .faq-q{color:#E2E8F4 !important}
:root.dark .faq-a p{color:#94A3B8 !important}