/*
 * ═══════════════════════════════════════════════════════════════════
 *  p2b-global.css  |  P2B Services  |  2026
 *  Master stylesheet — include ONCE in every page header:
 *
 *    <link rel="stylesheet" href="css/p2b-global.css">
 *
 *  Replaces the <style> block duplicated across all service pages.
 *  Page-specific overrides only go in a small inline <style> tag.
 *
 *  TABLE OF CONTENTS
 *  ─────────────────────────────────────────────────────────────────
 *  01. TOKENS (CSS variables)
 *  02. BASE RESET
 *  03. URGENCY BAR
 *  04. HERO SECTION
 *  05. COUNTER / STATS STRIP
 *  06. BREADCRUMB
 *  07. CONTENT TYPOGRAPHY
 *  08. INTRO HIGHLIGHT + INSIGHT BOXES
 *  09. SOCIAL PROOF STRIP
 *  10. CATEGORY / SERVICE CARDS
 *  11. METRICS ROW
 *  12. COVERAGE GRID
 *  13. RESULTS GRID
 *  14. COMPARISON TABLE
 *  15. FIELDS TABLE
 *  16. STYLED LIST
 *  17. COMPLIANCE BADGES
 *  18. LINK CHIPS
 *  19. TESTIMONIAL CARDS
 *  20. PROCESS / STEPS
 *  21. INTERACTIVE LIST BUILDER
 *  22. INDUSTRY CARDS
 *  23. CONVERSION BOX (mid-page CTA)
 *  24. CTA STRIP (inline CTA)
 *  25. FINAL CTA SECTION
 *  26. FAQ ACCORDION
 *  27. SIDEBAR WIDGETS
 *  28. STICKY MOBILE CTA BAR
 *  29. UTILITIES
 *  30. ANIMATIONS
 *  31. RESPONSIVE OVERRIDES
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   01. TOKENS
───────────────────────────────────────────────────────────────── */
:root {
  --navy:    #0e2743;
  --blue:    #1a56db;
  --cyan:    #2AB4EF;
  --green:   #16a34a;
  --red:     #dc2626;
  --orange:  #ea580c;
  --gold:    #d97706;
  --light:   #f7f9fc;
  --dark:    #111827;
  --gray:    #6b7280;
  --border:  #e5e9f0;
  --ff-head: 'Poppins', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   02. BASE RESET (scoped — won't break Bootstrap)
───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--ff-body), sans-serif; }
a { transition: color .2s; }
img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────
   03. URGENCY BAR
───────────────────────────────────────────────────────────────── */
.urgency-bar {
  background: linear-gradient(90deg, #dc2626, #9b1c1c);
  padding: 10px 0;
  text-align: center;
}
.urgency-bar p {
  color: #fff; font-size: 13px; font-weight: 600; margin: 0;
}
.urgency-bar a {
  color: #fca5a5; text-decoration: underline;
  margin-left: 8px; font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   04. HERO SECTION
───────────────────────────────────────────────────────────────── */
.ilg-hero {
  background: linear-gradient(135deg, #0a1e3d 0%, #0e2743 45%, #1a3a70 100%);
  min-height: 420px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 80px 0 60px;
}
.ilg-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(42,180,239,.13) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(26,86,219,.16) 0%, transparent 50%);
}
.ilg-hero::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 60px;
  background: #fff;
  clip-path: ellipse(55% 100% at 50% 100%);
}
.ilg-hero .container { position: relative; z-index: 2; }

.ilg-hero h1 {
  color: #fff; font-size: 46px; font-weight: 900;
  line-height: 1.12; margin-bottom: 16px;
  font-family: var(--ff-head);
}
.ilg-hero h1 span {
  background: linear-gradient(90deg, var(--cyan), #60e6ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(42,180,239,.15);
  border: 1px solid rgba(42,180,239,.3);
  color: var(--cyan); font-size: 12px; font-weight: 700;
  padding: 5px 16px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 16px;
}
.hero-sub {
  font-size: 17px; color: #c3d9f5;
  max-width: 700px; margin: 0 auto 26px;
  line-height: 1.7;
}
.hero-badges {
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 30px;
}
.badge-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #e0f0ff; padding: 6px 16px;
  border-radius: 20px; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(4px);
}
.badge-pill span { color: var(--cyan); margin-right: 5px; }
.hero-btn-group {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
}
.btn-hero-primary {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff; padding: 16px 40px; border-radius: 40px;
  font-weight: 700; font-size: 17px; text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(26,86,219,.4);
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(26,86,219,.5);
  color: #fff;
}
.btn-hero-outline {
  border: 2px solid rgba(255,255,255,.4);
  color: #fff; padding: 14px 30px; border-radius: 40px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  display: inline-block; transition: all .2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Gold variant (lead-generation page) */
.btn-hero-gold {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  color: #fff; padding: 16px 40px; border-radius: 40px;
  font-weight: 700; font-size: 17px; text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(217,119,6,.4);
}
.btn-hero-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(217,119,6,.5);
  color: #fff;
}

/* Inline hero stats bar */
.ilg-stats {
  display: flex; flex-wrap: wrap;
  gap: 16px; justify-content: center;
  margin-top: 30px;
}
.ilg-stats .stat-item {
  text-align: center; padding: 14px 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; min-width: 110px;
  backdrop-filter: blur(4px);
}
.ilg-stats .stat-val {
  font-size: 28px; font-weight: 900;
  color: var(--cyan); line-height: 1;
  font-family: var(--ff-head); display: block;
}
.ilg-stats .stat-lbl {
  font-size: 11px; color: rgba(255,255,255,.6);
  margin-top: 4px; display: block;
}

/* ─────────────────────────────────────────────────────────────────
   05. COUNTER / STATS STRIP
───────────────────────────────────────────────────────────────── */
.counter-strip {
  background: var(--navy);
  padding: 0;
  border-bottom: 3px solid var(--blue);
}
.counter-strip .inner {
  display: flex; justify-content: space-around;
  flex-wrap: wrap; padding: 10px 0;
}
.c-item {
  text-align: center; padding: 18px 12px;
  min-width: 140px; position: relative;
}
.c-item + .c-item::before {
  content: ''; position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(255,255,255,.1);
}
.c-num {
  font-size: 38px; font-weight: 900;
  color: var(--cyan); line-height: 1;
  font-family: var(--ff-head); display: block;
}
.c-suffix { font-size: 26px; font-weight: 900; color: var(--cyan); }
.c-label {
  font-size: 12px; color: #94a3b8;
  margin-top: 6px; line-height: 1.35;
  display: block; font-weight: 500;
}
.c-icon { font-size: 20px; margin-bottom: 6px; display: block; }

/* ─────────────────────────────────────────────────────────────────
   06. BREADCRUMB
───────────────────────────────────────────────────────────────── */
.ilg-breadcrumb {
  background: var(--light);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--gray);
}
.ilg-breadcrumb a { color: var(--blue); text-decoration: none; }
.ilg-breadcrumb a:hover { text-decoration: underline; }
.ilg-breadcrumb span { margin: 0 7px; color: #cbd5e1; }

/* ─────────────────────────────────────────────────────────────────
   07. CONTENT TYPOGRAPHY
───────────────────────────────────────────────────────────────── */
.ilg-content h2 {
  font-size: 26px; font-weight: 700; color: var(--dark);
  margin: 44px 0 14px; line-height: 1.3;
  font-family: var(--ff-head);
}
.ilg-content h2:first-child { margin-top: 0; }
.ilg-content h3 {
  font-size: 19px; font-weight: 700; color: var(--navy);
  margin: 24px 0 8px; font-family: var(--ff-head);
}
.ilg-content p {
  font-size: 15px; line-height: 1.85;
  color: #374151; margin-bottom: 14px;
}
.s-divider {
  border: none; border-top: 1px solid var(--border); margin: 40px 0;
}

/* ─────────────────────────────────────────────────────────────────
   08. INTRO HIGHLIGHT + INSIGHT BOXES
───────────────────────────────────────────────────────────────── */
.intro-highlight {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-left: 5px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px; margin-bottom: 32px;
}
.intro-highlight p {
  margin: 0; font-size: 16px; line-height: 1.8; color: #1e3a5f;
}

.insight {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 24px 0;
}
.insight p { font-size: 14px; color: #78350f; margin: 0; line-height: 1.7; }

/* ─────────────────────────────────────────────────────────────────
   09. SOCIAL PROOF STRIP
───────────────────────────────────────────────────────────────── */
.social-proof-strip {
  background: var(--light); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 24px;
  display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap; margin: 28px 0;
}
.sp-item {
  display: flex; align-items: center;
  gap: 10px; font-size: 13px; color: #374151;
}
.sp-icon { font-size: 22px; flex-shrink: 0; }
.sp-item strong { color: var(--navy); display: block; font-size: 15px; }

/* ─────────────────────────────────────────────────────────────────
   10. CATEGORY / SERVICE CARDS
───────────────────────────────────────────────────────────────── */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 28px 0 40px;
}
.cat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 20px;
  text-decoration: none; transition: all .25s;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
}
.cat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-radius: 14px 14px 0 0;
}
.cat-card.blue::before   { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.cat-card.green::before  { background: linear-gradient(90deg, #16a34a, #4ade80); }
.cat-card.orange::before { background: linear-gradient(90deg, #ea580c, #fb923c); }
.cat-card.purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.cat-card.teal::before   { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.cat-card.red::before    { background: linear-gradient(90deg, #dc2626, #f87171); }
.cat-card.gold::before   { background: linear-gradient(90deg, #d97706, #fbbf24); }

.cat-card:hover {
  box-shadow: 0 10px 36px rgba(26,86,219,.15);
  transform: translateY(-4px); text-decoration: none;
}
.cat-icon { font-size: 36px; margin-bottom: 14px; display: block; }
.cat-card h3 {
  font-size: 17px; font-weight: 700; color: var(--navy);
  margin: 0 0 8px; font-family: var(--ff-head);
}
.cat-card p {
  font-size: 13px; color: var(--gray);
  line-height: 1.6; margin: 0 0 14px; flex: 1;
}
.cat-count {
  display: flex; align-items: center;
  justify-content: space-between; margin-top: auto;
}
.cat-count .cnt-val {
  font-size: 22px; font-weight: 800; color: var(--blue);
  font-family: var(--ff-head); line-height: 1;
}
.cat-count .cnt-lbl { font-size: 11px; color: var(--gray); }
.cat-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--blue);
  text-decoration: none; margin-top: 14px; transition: gap .2s;
}
.cat-card:hover .cat-link { gap: 10px; }

/* ─────────────────────────────────────────────────────────────────
   11. METRICS ROW
───────────────────────────────────────────────────────────────── */
.metrics-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin: 24px 0 36px;
}
.m-card {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 20px 16px; text-align: center;
}
.m-card .m-val {
  font-size: 30px; font-weight: 800; color: var(--blue);
  line-height: 1; font-family: var(--ff-head);
}
.m-card .m-label {
  font-size: 12px; color: var(--navy);
  margin-top: 7px; font-weight: 600; line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
   12. COVERAGE GRID
───────────────────────────────────────────────────────────────── */
.coverage-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 20px 0 36px;
}
.cov-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 12px;
  text-align: center; transition: all .2s;
}
.cov-card:hover {
  box-shadow: 0 4px 16px rgba(26,86,219,.12);
  border-color: #bfdbfe;
}
.cov-flag  { font-size: 28px; display: block; margin-bottom: 6px; }
.cov-country {
  font-size: 13px; font-weight: 700;
  color: var(--navy); display: block;
}
.cov-count {
  font-size: 12px; color: var(--blue);
  font-weight: 600; display: block; margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────────
   13. RESULTS GRID
───────────────────────────────────────────────────────────────── */
.results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 24px 0 36px;
}
.r-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 22px 16px; text-align: center;
}
.r-card .r-val {
  font-size: 32px; font-weight: 800; color: var(--blue);
  line-height: 1; font-family: var(--ff-head);
}
.r-card .r-desc {
  font-size: 12px; color: var(--gray);
  margin-top: 8px; line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
   14. COMPARISON TABLE
───────────────────────────────────────────────────────────────── */
.compare-wrap {
  overflow-x: auto; margin: 28px 0 40px;
  border-radius: 14px; box-shadow: 0 4px 28px rgba(0,0,0,.08);
}
.compare-table {
  width: 100%; border-collapse: collapse;
  min-width: 560px; font-size: 14px;
}
.compare-table thead tr th {
  padding: 16px 20px; text-align: left; font-weight: 700;
}
.compare-table thead tr th:first-child {
  background: var(--navy); color: #fff;
  font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 14px 0 0 0;
}
.compare-table thead tr th:nth-child(2) {
  background: #fef2f2; color: var(--red);
  border-top: 3px solid var(--red); text-align: center;
}
.compare-table thead tr th:nth-child(3) {
  background: #f0fdf4; color: var(--green);
  border-top: 3px solid var(--green);
  text-align: center; border-radius: 0 14px 0 0;
}
.compare-table tbody tr td {
  padding: 13px 20px; border-bottom: 1px solid var(--border);
  color: #374151; vertical-align: middle;
}
.compare-table tbody tr td:first-child {
  font-weight: 600; color: var(--navy); background: var(--light);
}
.compare-table tbody tr td:nth-child(2) { text-align: center; background: #fff; }
.compare-table tbody tr td:nth-child(3) { text-align: center; background: #f9fffe; }
.compare-table tbody tr:last-child td:first-child { border-radius: 0 0 0 14px; }
.compare-table tbody tr:last-child td:last-child  { border-radius: 0 0 14px 0; }
.chk-yes  { color: var(--green); font-size: 18px; font-weight: 700; }
.chk-no   { color: var(--red);   font-size: 18px; font-weight: 700; }
.chk-warn { color: #f59e0b; font-size: 14px; }

/* ─────────────────────────────────────────────────────────────────
   15. FIELDS TABLE
───────────────────────────────────────────────────────────────── */
.fields-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  margin: 20px 0 36px; font-size: 14px;
}
.fields-table thead th {
  background: var(--navy); color: #fff;
  padding: 13px 18px; text-align: left; font-weight: 600;
}
.fields-table tbody tr:nth-child(even) td { background: var(--light); }
.fields-table tbody td {
  padding: 11px 18px; color: #374151;
  border-bottom: 1px solid var(--border);
}
.fields-table tbody td:first-child { font-weight: 600; color: var(--navy); }
.check-green { color: var(--green); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────
   16. STYLED LIST
───────────────────────────────────────────────────────────────── */
.styled-list { list-style: none; padding: 0; margin: 16px 0 24px; }
.styled-list li {
  font-size: 15px; color: #374151;
  padding: 10px 0 10px 28px; position: relative;
  border-bottom: 1px solid #f1f5f9; line-height: 1.6;
}
.styled-list li:last-child { border-bottom: none; }
.styled-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--green); font-weight: 700; font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────────
   17. COMPLIANCE BADGES
───────────────────────────────────────────────────────────────── */
.compliance-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 28px; }
.comp-badge {
  display: flex; align-items: center; gap: 8px;
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 8px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: #15803d;
}
.comp-badge span { font-size: 18px; }

/* ─────────────────────────────────────────────────────────────────
   18. LINK CHIPS
───────────────────────────────────────────────────────────────── */
.link-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 28px; }
.link-chip {
  background: #eff6ff; color: var(--blue);
  border: 1px solid #bfdbfe; border-radius: 20px;
  padding: 7px 18px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: all .2s;
}
.link-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ─────────────────────────────────────────────────────────────────
   19. TESTIMONIAL CARDS
───────────────────────────────────────────────────────────────── */
.testimonial-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  height: 100%; position: relative;
}
.testimonial-card::before {
  content: '"'; font-size: 60px; color: #dbeafe;
  font-family: Georgia, serif; position: absolute;
  top: 10px; left: 18px; line-height: 1;
}
.testimonial-card p {
  font-size: 14px; font-style: italic; color: #374151;
  line-height: 1.7; margin: 20px 0 16px;
}
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 15px; flex-shrink: 0;
}
.t-name  { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0; }
.t-role  { font-size: 12px; color: var(--gray); margin: 0; }
.stars   { color: #f59e0b; font-size: 13px; margin-bottom: 4px; }

/* ─────────────────────────────────────────────────────────────────
   20. PROCESS / STEPS
───────────────────────────────────────────────────────────────── */
.process-item {
  display: flex; gap: 20px; margin-bottom: 28px;
  align-items: flex-start;
}
.p-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 14px rgba(26,86,219,.3);
}
.p-body h4 {
  font-size: 16px; font-weight: 700; color: var(--navy);
  margin: 0 0 6px; font-family: var(--ff-head);
}
.p-body p { font-size: 14px; color: #374151; margin: 0; line-height: 1.65; }

/* ─────────────────────────────────────────────────────────────────
   21. INTERACTIVE LIST BUILDER
───────────────────────────────────────────────────────────────── */
.list-builder {
  background: linear-gradient(135deg, #0e2743, #1a3a70);
  border-radius: 18px; padding: 40px 36px;
  margin: 44px 0; position: relative; overflow: hidden;
}
.list-builder::before {
  content: ''; position: absolute;
  top: -40px; right: -40px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(42,180,239,.08);
}
.list-builder h3 {
  color: #fff; font-size: 24px; font-weight: 800;
  margin-bottom: 8px; font-family: var(--ff-head);
}
.list-builder > p { color: #94a3b8; font-size: 14px; margin-bottom: 28px; }
.lb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.lb-field label {
  display: block; font-size: 12px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 8px;
}
.lb-field select {
  width: 100%; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: 11px 14px; color: #fff; font-size: 14px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; transition: border .2s;
}
.lb-field select:focus { outline: none; border-color: var(--cyan); }
.lb-field select option { background: #0e2743; color: #fff; }
.lb-result {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 24px;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.lb-count-display { display: flex; align-items: flex-end; gap: 12px; }
.lb-count-num {
  font-size: 52px; font-weight: 900; color: var(--cyan);
  line-height: 1; font-family: var(--ff-head);
}
.lb-count-label {
  font-size: 14px; color: #94a3b8;
  padding-bottom: 8px; line-height: 1.4;
}
.lb-count-label strong { color: #fff; display: block; }
.btn-lb {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff; padding: 14px 32px; border-radius: 30px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: none; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-lb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,86,219,.4); color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   22. INDUSTRY CARDS (ind-card grid)
───────────────────────────────────────────────────────────────── */
.industry-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 20px 0 36px;
}
.ind-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
  text-decoration: none; transition: all .22s;
  display: flex; align-items: center; gap: 14px;
}
.ind-card:hover {
  box-shadow: 0 8px 28px rgba(26,86,219,.12);
  transform: translateY(-3px); border-color: #bfdbfe;
  text-decoration: none;
}
.ic-icon  { font-size: 32px; flex-shrink: 0; }
.ic-name  { font-size: 14px; font-weight: 700; color: var(--navy); display: block; }
.ic-sub   { font-size: 12px; color: var(--gray); }
.ic-arrow { font-size: 11px; color: var(--blue); margin-left: auto; flex-shrink: 0; }
.ic-body  { flex: 1; min-width: 0; }
.ic-targets { font-size: 11px; color: var(--blue); font-weight: 600; }

/* BANT badge */
.bant-tag {
  display: inline-block; padding: 3px 10px;
  border-radius: 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}
.bant-badge { background: #eff6ff; color: var(--blue); }

/* ─────────────────────────────────────────────────────────────────
   23. CONVERSION BOX  (mid-page CTA)
───────────────────────────────────────────────────────────────── */
.conversion-box {
  background: #fff; border: 2px solid var(--blue);
  border-radius: 16px; padding: 36px 30px;
  margin: 44px 0; text-align: center;
  position: relative; overflow: hidden;
}
.conversion-box::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), #60e6ff, var(--blue));
  background-size: 300%;
  animation: shimmer 3s linear infinite;
}
.cb-tag {
  display: inline-block; background: #eff6ff; color: var(--blue);
  border-radius: 20px; padding: 5px 16px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px;
}
.conversion-box h3 {
  font-size: 24px; font-weight: 800; color: var(--dark);
  margin-bottom: 10px; font-family: var(--ff-head);
}
.conversion-box > p {
  font-size: 15px; color: var(--gray); margin-bottom: 22px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.cb-steps {
  display: flex; justify-content: center;
  gap: 0; margin-bottom: 24px; flex-wrap: wrap;
}
.cb-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #374151; font-weight: 500;
}
.cs-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.cb-arrow { color: #cbd5e1; font-size: 18px; margin: 0 10px; flex-shrink: 0; }
.btn-cb {
  display: inline-block;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff; padding: 16px 44px; border-radius: 40px;
  font-weight: 700; font-size: 17px; text-decoration: none;
  transition: all .2s; box-shadow: 0 6px 24px rgba(26,86,219,.35);
  border: none; cursor: pointer;
}
.btn-cb:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(26,86,219,.45); color: #fff;
}
.btn-cb-gold {
  display: inline-block;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  color: #fff; padding: 16px 44px; border-radius: 40px;
  font-weight: 700; font-size: 17px; text-decoration: none;
  transition: all .2s; box-shadow: 0 6px 24px rgba(217,119,6,.35);
}
.btn-cb-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(217,119,6,.45); color: #fff;
}
.cb-reassure { font-size: 12px; color: #9ca3af; margin-top: 12px; }

/* ─────────────────────────────────────────────────────────────────
   24. CTA STRIP  (inline band CTA)
───────────────────────────────────────────────────────────────── */
.cta-strip {
  background: linear-gradient(135deg, var(--navy) 0%, #1a4080 100%);
  border-radius: 16px; padding: 40px 36px; margin: 44px 0;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.cta-strip .cta-text { flex: 1; min-width: 220px; }
.cta-strip h3 {
  color: #fff; font-size: 22px; font-weight: 700;
  margin: 0 0 8px; font-family: var(--ff-head);
}
.cta-strip p { color: #94a3b8; font-size: 14px; margin: 0; }
.cta-strip a {
  background: var(--cyan); color: #fff; padding: 14px 32px;
  border-radius: 40px; font-weight: 700; font-size: 15px;
  white-space: nowrap; text-decoration: none;
  transition: all .2s; flex-shrink: 0;
}
.cta-strip a:hover {
  background: #1da9e0; color: #fff; transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   25. FINAL CTA SECTION
───────────────────────────────────────────────────────────────── */
.final-cta {
  background: linear-gradient(135deg, var(--navy), #1a56db);
  border-radius: 18px; padding: 56px 40px;
  text-align: center; margin: 44px 0 12px;
}
.final-cta h3 {
  color: #fff; font-size: 30px; font-weight: 800;
  margin-bottom: 12px; font-family: var(--ff-head);
}
.final-cta p { color: #c3d9f5; font-size: 16px; margin-bottom: 28px; }
.btn-group-final {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
}
.btn-final-p {
  background: #fff; color: var(--blue); padding: 15px 36px;
  border-radius: 40px; font-weight: 700; font-size: 16px;
  text-decoration: none; display: inline-block; transition: all .2s;
}
.btn-final-p:hover { transform: translateY(-2px); color: var(--navy); }
.btn-final-o {
  border: 2px solid rgba(255,255,255,.5); color: #fff;
  padding: 13px 30px; border-radius: 40px; font-weight: 600;
  font-size: 15px; text-decoration: none;
  display: inline-block; transition: all .2s;
}
.btn-final-o:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-final-gold {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  color: #fff; padding: 15px 36px; border-radius: 40px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  display: inline-block; transition: all .2s;
  box-shadow: 0 6px 24px rgba(217,119,6,.4);
}
.btn-final-gold:hover { transform: translateY(-2px); color: #fff; }

/* Brand quote (lead-generation) */
.brand-quote {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 20px 24px;
  margin: 28px 0; font-size: 15px; font-style: italic;
  color: #c3d9f5; line-height: 1.7; position: relative;
}
.brand-quote::before {
  content: '"'; font-size: 48px; color: rgba(42,180,239,.3);
  font-family: Georgia, serif; position: absolute;
  top: 8px; left: 16px; line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────
   26. FAQ ACCORDION
───────────────────────────────────────────────────────────────── */
.faq-wrap { margin: 20px 0 36px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.faq-btn {
  width: 100%; text-align: left; background: #fff; border: none;
  padding: 17px 20px; font-size: 15px; font-weight: 600;
  color: var(--navy); cursor: pointer;
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
  transition: background .15s; font-family: var(--ff-head);
}
.faq-btn:hover { background: #f0f7ff; }
.faq-icon {
  font-size: 22px; color: var(--blue);
  transition: transform .25s; flex-shrink: 0; line-height: 1;
}
.faq-btn.active .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease; background: #fff;
}
.faq-answer.open { max-height: 600px; }
.faq-answer-inner {
  padding: 0 20px 18px;
  font-size: 14px; line-height: 1.8; color: #4b5563;
}
.faq-answer-inner a { color: var(--blue); }

/* ─────────────────────────────────────────────────────────────────
   27. SIDEBAR WIDGETS
───────────────────────────────────────────────────────────────── */
.blog_right_sidebar .widget_title {
  font-size: 17px; font-weight: 700; color: var(--navy);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--cyan);
  font-family: var(--ff-head);
}
.sidebar-trust {
  background: linear-gradient(135deg, var(--navy), #1a56db);
  border-radius: 14px; padding: 24px; margin-top: 24px;
}
.sidebar-trust h4 {
  color: #fff; font-size: 15px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 10px; font-family: var(--ff-head);
}
.sidebar-trust ul { list-style: none; padding: 0; margin: 0 0 20px; }
.sidebar-trust ul li {
  font-size: 13px; color: #c3d9f5;
  margin-bottom: 10px;
  display: flex; gap: 8px; align-items: flex-start;
}
.sidebar-trust ul li span { color: var(--cyan); font-weight: 700; flex-shrink: 0; }
.sidebar-trust a {
  display: block; text-align: center;
  background: var(--cyan); color: #fff; padding: 12px;
  border-radius: 8px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: background .2s;
}
.sidebar-trust a:hover { background: #1da9e0; color: #fff; }

.mini-stats {
  background: var(--light); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; margin-top: 24px;
}
.mini-stats h4 {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: 16px; font-family: var(--ff-head);
}
.ms-item {
  display: flex; justify-content: space-between;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.ms-item:last-child { border-bottom: none; padding-bottom: 0; }
.ms-label { color: var(--gray); }
.ms-val { font-weight: 700; color: var(--blue); font-family: var(--ff-head); }

/* ─────────────────────────────────────────────────────────────────
   28. STICKY MOBILE CTA BAR
───────────────────────────────────────────────────────────────── */
.sticky-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9999; background: var(--navy);
  padding: 14px 20px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
  align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-cta-bar p {
  color: #c3d9f5; font-size: 13px; margin: 0; line-height: 1.3; flex: 1;
}
.sticky-cta-bar p strong { color: #fff; display: block; font-size: 14px; }
.sticky-cta-bar a {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff; padding: 11px 22px; border-radius: 30px;
  font-weight: 700; font-size: 14px; white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   29. UTILITIES
───────────────────────────────────────────────────────────────── */
.good  { color: var(--green); font-weight: 700; }
.bad   { color: var(--red);   font-weight: 700; }
.check { color: var(--green); }
.cross { color: var(--red); }
.green { color: var(--green); }
.done  { color: var(--green); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────
   30. ANIMATIONS
───────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 0% }
  100% { background-position: 300% }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.c-num { animation: countUp .6s ease both; }

/* FAQ JS helper */
.faq-answer.open { max-height: 600px; }

/* ─────────────────────────────────────────────────────────────────
   31. RESPONSIVE OVERRIDES
───────────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 991px) {
  .cat-grid       { grid-template-columns: repeat(2, 1fr); }
  .industry-cards { grid-template-columns: repeat(2, 1fr); }
  .metrics-row    { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid  { grid-template-columns: repeat(2, 1fr); }
  .lb-grid        { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
  .sticky-cta-bar { display: flex; }
  body { padding-bottom: 72px; }
  .metrics-row    { grid-template-columns: 1fr 1fr; }
  .results-grid   { grid-template-columns: 1fr 1fr; }
  .lb-grid        { grid-template-columns: 1fr; }
  .lb-count-num   { font-size: 36px; }
  .list-builder   { padding: 28px 20px; }
  .cta-strip      { padding: 28px 20px; }
  .final-cta      { padding: 36px 20px; }
  .final-cta h3   { font-size: 22px; }
  .btn-final-p, .btn-final-o, .btn-final-gold {
    width: 100%; text-align: center;
  }
  .conversion-box { padding: 28px 18px; }
  .conversion-box h3 { font-size: 20px; }
  .cb-arrow       { display: none; }
  .cb-step        { width: 100%; justify-content: center; margin-bottom: 8px; }
  .c-item + .c-item::before { display: none; }
}

/* Small mobile */
@media (max-width: 576px) {
  .ilg-hero       { padding: 100px 0 60px; min-height: auto; }
  .ilg-hero h1    { font-size: 26px; }
  .hero-sub       { font-size: 14px; }
  .cat-grid       { grid-template-columns: 1fr; }
  .industry-cards { grid-template-columns: 1fr; }
  .coverage-grid  { grid-template-columns: 1fr 1fr; }
  .results-grid   { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   32. OLD → NEW DESIGN BRIDGE
   ─────────────────────────────────────────────────────────────────
   These rules restyle the OLD page classes (.breadcrumb_bg,
   .blog_details, etc.) to match the NEW service-page look
   (.ilg-hero, .ilg-content, etc.) — so you do NOT have to
   rewrite the HTML of every old page.
   Just include p2b-global.css + apac-theme-override.css
   and the old pages will match the new design automatically.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   32a. OLD HERO BANNER → NEW GRADIENT HERO
   Old: .breadcrumb.breadcrumb_bg with background-image
   New: gradient + wave clip + centered text
───────────────────────────────────────────────────────────────── */
section.breadcrumb.breadcrumb_bg,
.breadcrumb.breadcrumb_bg {
  background: linear-gradient(135deg, #0a1e3d 0%, #0e2743 45%, #1a3a70 100%) !important;
  background-image: none !important;
  min-height: 420px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
  z-index: 1;
  border-radius: 0;
  margin-bottom: 0;
}

/* Remove old dark overlay */
section.breadcrumb.breadcrumb_bg::after,
.breadcrumb.breadcrumb_bg::after {
  background: #fff !important;
  opacity: 1 !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: 60px !important;
  width: 100% !important;
  clip-path: ellipse(55% 100% at 50% 100%) !important;
  z-index: 1 !important;
}

/* Radial gradient overlays on old hero */
section.breadcrumb.breadcrumb_bg::before,
.breadcrumb.breadcrumb_bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(42,180,239,.13) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(26,86,219,.16) 0%, transparent 50%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Inner layout — override old table display */
.breadcrumb .breadcrumb_iner {
  height: auto !important;
  min-height: 280px;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  z-index: 2;
}

.breadcrumb .breadcrumb_iner .breadcrumb_iner_item {
  display: block !important;
  vertical-align: unset !important;
  padding-top: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Hero heading */
.breadcrumb_iner .breadcrumb_iner_item h1,
.breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
  color: #fff !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
  font-family: var(--ff-head, 'Poppins', sans-serif) !important;
  text-transform: none !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* Hero paragraph */
.breadcrumb .breadcrumb_iner .breadcrumb_iner_item p {
  font-size: 16px !important;
  color: #c3d9f5 !important;
  max-width: 680px;
  margin: 0 auto 20px !important;
  line-height: 1.7 !important;
}

/* Hero breadcrumb separator */
.breadcrumb .breadcrumb_iner .breadcrumb_iner_item span {
  margin: 0 8px !important;
  color: rgba(255,255,255,.4) !important;
}

/* Old hero CTA button override */
.breadcrumb_bg .custom-btn,
.breadcrumb_bg .btnaa-12,
.breadcrumb_iner .custom-btn,
.breadcrumb_iner .btnaa-12 {
  background: linear-gradient(90deg, var(--blue, #1a56db), var(--cyan, #2AB4EF)) !important;
  color: #fff !important;
  padding: 14px 36px !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: transform .2s, box-shadow .2s !important;
  box-shadow: 0 6px 24px rgba(26,86,219,.4) !important;
  text-transform: none !important;
}
.breadcrumb_bg .custom-btn:hover,
.breadcrumb_bg .btnaa-12:hover,
.breadcrumb_iner .custom-btn:hover,
.breadcrumb_iner .btnaa-12:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(26,86,219,.5) !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--blue, #1a56db), var(--cyan, #2AB4EF)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   32b. OLD CONTENT AREA → NEW TYPOGRAPHY
   Old: .blog_details p, h2, h3
   New: matches .ilg-content styling
───────────────────────────────────────────────────────────────── */
.blog_details {
  padding: 0 !important;
}

.blog_details h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark, #111827);
  margin: 0 0 18px;
  line-height: 1.3;
  font-family: var(--ff-head, 'Poppins', sans-serif);
}

.blog_details h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--dark, #111827) !important;
  margin: 40px 0 14px !important;
  line-height: 1.3 !important;
  font-family: var(--ff-head, 'Poppins', sans-serif) !important;
}

.blog_details h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy, #0e2743);
  margin: 28px 0 10px;
  font-family: var(--ff-head, 'Poppins', sans-serif);
}

.blog_details p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #374151 !important;
  margin-bottom: 14px !important;
}

.blog_details a {
  color: var(--blue, #1a56db);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
.blog_details a:hover {
  color: var(--cyan, #2AB4EF);
  text-decoration: underline;
}

/* Bold links in old pages */
.blog_details .blod_link,
.blog_details b.blod_link {
  color: var(--blue, #1a56db);
  font-weight: 700;
}
.blog_details a:hover .blod_link,
.blog_details a:hover b.blod_link {
  color: var(--cyan, #2AB4EF);
}

/* Old list styling → new styled look */
.blog_details ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
}
.blog_details ul li {
  font-size: 15px;
  color: #374151;
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.6;
}
.blog_details ul li:last-child {
  border-bottom: none;
}
.blog_details ul li .fa-arrow-right,
.blog_details ul li i.fa-arrow-right {
  color: var(--green, #16a34a);
  font-size: 12px;
}
.blog_details li.country_list {
  padding-left: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   32c. OLD SIDEBAR → NEW SIDEBAR LOOK
───────────────────────────────────────────────────────────────── */

/* Old sidebar container */
.blog_side_div,
.blogbgcolor {
  background: transparent;
}

/* Sidebar image container */
.containerimg {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.containerimg img {
  border-radius: 14px;
  width: 100%;
}

/* Old sidebar CTA button */
.callbutton {
  background: linear-gradient(90deg, var(--blue, #1a56db), var(--cyan, #2AB4EF)) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-block;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(26,86,219,.35);
  cursor: pointer;
}
.callbutton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,86,219,.45);
}

/* Subscribe widget */
.blog_right_sidebar .search_widget .form-control,
.blog_right_sidebar .newsletter_widget .form-control {
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  transition: border .2s;
}
.blog_right_sidebar .search_widget .form-control:focus,
.blog_right_sidebar .newsletter_widget .form-control:focus {
  border-color: var(--blue, #1a56db);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

/* Sidebar "We Cover" links */
.blog_right_sidebar .post_category_widget .cat-list li {
  border-bottom: 1px solid var(--border, #e5e9f0);
  padding: 10px 0;
}
.blog_right_sidebar .post_category_widget .cat-list li a p {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy, #0e2743);
  transition: color .2s;
  margin: 0;
}
.blog_right_sidebar .post_category_widget .cat-list li a:hover p {
  color: var(--blue, #1a56db);
}
.blog_right_sidebar .post_category_widget .cat-list li a .fa-arrow-right {
  color: var(--cyan, #2AB4EF);
  margin-right: 6px;
  font-size: 11px;
}

/* ─────────────────────────────────────────────────────────────────
   32d. OLD BREADCRUMB TEXT → NEW STYLED BREADCRUMB
   (the inline breadcrumb path inside blog_details)
───────────────────────────────────────────────────────────────── */
.blog_details > p:first-child {
  background: var(--light, #f7f9fc);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e9f0);
  font-size: 13px !important;
  color: var(--gray, #6b7280) !important;
  margin-bottom: 24px !important;
}
.blog_details > p:first-child a {
  font-weight: 600;
}
.blog_details > p:first-child b.blo,
.blog_details > p:first-child b.bl {
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   32e. OLD FAQ → keep existing faqstyle.css but improve spacing
───────────────────────────────────────────────────────────────── */
.faq .faq-heading {
  font-family: var(--ff-head, 'Poppins', sans-serif);
  font-weight: 600;
  color: var(--navy, #0e2743);
}
.faq label {
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq label:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.faq .faq-text {
  color: #4b5563;
  line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────────
   32f. OLD HERO RESPONSIVE — MOBILE FIXES
───────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  section.breadcrumb.breadcrumb_bg,
  .breadcrumb.breadcrumb_bg {
    padding: 100px 0 60px !important;
    min-height: auto !important;
  }
  .breadcrumb_iner .breadcrumb_iner_item h1,
  .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .breadcrumb .breadcrumb_iner .breadcrumb_iner_item p {
    font-size: 14px !important;
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .breadcrumb_iner .breadcrumb_iner_item h1,
  .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
    font-size: 32px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb_iner .breadcrumb_iner_item h1,
  .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
    font-size: 36px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   32g. SERVICE CARD (from inline styles)
───────────────────────────────────────────────────────────────── */
.service-card {
  background: #fff;
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 20px;
  transition: box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--blue, #1a56db), var(--cyan, #2AB4EF));
  border-radius: 14px 0 0 14px;
}
.service-card:hover {
  box-shadow: 0 8px 32px rgba(26,86,219,.13);
  transform: translateY(-3px);
}
.service-card .svc-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe, #93c5fd);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 14px;
}
.service-card h3 {
  font-size: 18px; font-weight: 700;
  color: var(--navy, #0e2743);
  margin: 0 0 8px;
  font-family: var(--ff-head, 'Poppins', sans-serif);
}
.service-card p {
  font-size: 14px; line-height: 1.75;
  color: #4b5563; margin: 0 0 8px;
}
.service-card .svc-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.svc-tag {
  font-size: 11px;
  background: #eff6ff;
  color: var(--blue, #1a56db);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 3px 10px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   32h. CHANNEL GRID (from inline styles)
───────────────────────────────────────────────────────────────── */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 24px 0 36px;
}
.ch-card {
  background: #fff;
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  transition: all .2s;
}
.ch-card:hover {
  box-shadow: 0 6px 20px rgba(26,86,219,.12);
  transform: translateY(-2px);
}
.ch-card .ch-icon {
  font-size: 32px; margin-bottom: 10px; display: block;
}
.ch-card h4 {
  font-size: 14px; font-weight: 700;
  color: var(--navy, #0e2743); margin: 0 0 6px;
  font-family: var(--ff-head, 'Poppins', sans-serif);
}
.ch-card p {
  font-size: 12px; color: var(--gray, #6b7280);
  margin: 0; line-height: 1.5;
}
.ch-card .ch-roi {
  font-size: 11px; font-weight: 700;
  color: var(--green, #16a34a);
  background: #f0fdf4;
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  margin-top: 8px;
}

@media (max-width: 767px) { .channel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .channel-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────
   32i. VS GRID (from inline styles)
───────────────────────────────────────────────────────────────── */
.vs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin: 24px 0 36px;
}
.vs-col { border-radius: 12px; padding: 24px; }
.vs-col.bad  { background: #fef2f2; border: 1px solid #fca5a5; }
.vs-col.good { background: #f0fdf4; border: 1px solid #86efac; }
.vs-col h4 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.vs-col.bad  h4 { color: var(--red, #dc2626); }
.vs-col.good h4 { color: var(--green, #16a34a); }
.vs-col ul { list-style: none; padding: 0; margin: 0; }
.vs-col ul li {
  font-size: 13px; color: #374151;
  margin-bottom: 9px; padding-left: 20px;
  position: relative; line-height: 1.5;
}
.vs-col ul li::before { position: absolute; left: 0; font-weight: 700; }
.vs-col.bad  ul li::before { content: '✗'; color: var(--red, #dc2626); }
.vs-col.good ul li::before { content: '✓'; color: var(--green, #16a34a); }

@media (max-width: 576px) { .vs-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────
   32j. IND-TABLE (from inline styles)
───────────────────────────────────────────────────────────────── */
.ind-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  margin: 24px 0 36px; font-size: 14px;
}
.ind-table thead th {
  background: var(--navy, #0e2743); color: #fff;
  padding: 15px 18px; text-align: left; font-weight: 600;
}
.ind-table tbody tr:nth-child(even) td { background: var(--light, #f7f9fc); }
.ind-table tbody td {
  padding: 13px 18px; color: #374151;
  border-bottom: 1px solid var(--border, #e5e9f0); vertical-align: top;
}
.ind-table tbody td:first-child { font-weight: 600; color: var(--navy, #0e2743); }

/* ─────────────────────────────────────────────────────────────────
   32k. COUNTER STRIP — standalone (from inline .ilg-stats block)
───────────────────────────────────────────────────────────────── */
div.ilg-stats {
  background: var(--navy, #0e2743);
  padding: 28px 0;
}
div.ilg-stats .stat-item { text-align: center; }
div.ilg-stats .s-num {
  font-size: 34px; font-weight: 800;
  color: var(--cyan, #2AB4EF); line-height: 1;
  font-family: var(--ff-head, 'Poppins', sans-serif);
}
div.ilg-stats .s-label {
  font-size: 12px; color: #94a3b8;
  margin-top: 5px; line-height: 1.4;
}

@media (max-width: 576px) {
  div.ilg-stats .col-6 { margin-bottom: 18px; }
  div.ilg-stats .s-num { font-size: 26px; }
}

/* ─────────────────────────────────────────────────────────────────
   32l. P-TAG (process tags from inline styles)
───────────────────────────────────────────────────────────────── */
.p-tag {
  background: #eff6ff;
  color: var(--blue, #1a56db);
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}
.p-body .tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   END OF P2B-GLOBAL.CSS
═══════════════════════════════════════════════════════════════════ */