/* ════════════════════════════════════════════════════════════════════════
   WEBIFYY DIGITAL SOLUTIONS — Stylesheet
   ──────────────────────────────────────
   Sections are delimited by full-width banner comments below.
   Use Ctrl+F on a section name to jump to it.
   ────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
    1. NAV
    2. HERO
    3. STATS BAR
    4. TRUSTED BRANDS
    5. ENTRANCE ANIMATIONS
    6. RESPONSIVE BREAKPOINTS
    7. OUR SERVICES SECTION
    8. WHY CHOOSE US SECTION
    9. INDUSTRIES WE SERVE SECTION
   10. TESTIMONIALS SECTION
   11. FAQ SECTION
   12. MARKETING CHANNELS SECTION
   13. FOOTER
   14. ANIMATED SECTION TAG STYLE
   15. CONTACT / GET A QUOTE SECTION
   ════════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════
   LOCKED TYPE SCALE — the ONLY font sizes used on the site.
   clamp(min, preferred-with-vw, max) gives smooth fluid scaling between
   the desktop and mobile sizes — no breakpoint jumps at any viewport.
══════════════════════════ */
:root {
  --fs-display: clamp(32px, 1.6vw + 26px, 56px); /* Hero headline */
  --fs-h1:      clamp(28px, 0.9vw + 25px, 42px); /* Section title */
  --fs-h2:      clamp(24px, 0.55vw + 22px, 32px); /* Subsection */
  --fs-h3:      clamp(20px, 0.2vw + 19px, 22px); /* Card title */
  --fs-body-lg: clamp(15px, 0.1vw + 14px, 16px); /* Subtitle, lead */
  --fs-body:    14px;     /* Paragraph, list item */
  --fs-small:   13px;     /* Meta, caption */
  --fs-tiny:    11.5px;   /* Tag, badge, pill */

  /* Side gap (total horizontal whitespace outside .X-inner containers) */
  --side-gap:   180px;    /* desktop: 90px each side */
}
@media (max-width: 1100px) { :root { --side-gap: 80px; } }  /* small laptop / tablet — 40px each side */
@media (max-width: 768px)  { :root { --side-gap: 40px; } }  /* mobile — 20px each side */
@media (max-width: 480px)  { :root { --side-gap: 28px; } }  /* small phone — 14px each side */

html,
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html {
  scrollbar-gutter: stable;
}

/* ══════════════════════════
   NAV
══════════════════════════ */
.nav-wrap {
  background: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

nav {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 12px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-box {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-box span {
  color: #fff;
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1;
}
.logo-name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.3px;
}

/* Phone link — visible only on mobile (in the logo row, on the right) */
.nav-phone {
  display: inline-flex;     /* visible on desktop AND mobile */
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1e40af;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  order: 3;                 /* sits between nav-links (default 0) and nav-cta (4) on desktop */
}
.nav-phone i {
  color: #1e40af;
  font-size: var(--fs-body);
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links li a {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-links li a.active {
  color: #1e40af;
  font-weight: 700;
  position: relative;
  padding-bottom: 4px;
}
.nav-links li a.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #1e40af;
  border-radius: 2px;
}
.nav-links li a:hover {
  color: #1e40af;
}

/* Nav CTA */
.nav-cta {
  background: #1e40af;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 11px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  order: 4;                /* always rightmost on desktop, after .nav-phone */
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: #1e3a8a;
}
.nav-cta-icon {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #0f0f2d;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}
.mobile-menu.open {
  opacity: 1;
}
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: #fff;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mobile-menu.open .mobile-menu-panel {
  transform: translateX(0);
}
.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: var(--fs-h3);
  color: #1a1a1a;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu ul li a {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: #000;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  transition: color 0.2s;
}
.mobile-menu ul li a.active {
  color: #1e40af;
}
.mobile-menu ul li a:hover {
  color: #1e40af;
}
.mobile-nav-cta {
  background: #1e40af;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-body-lg);
  padding: 14px 20px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero-wrap {
  background: #fff;
  width: 100%;
}
.hero-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 28px 0 0 0;
}

/* Two-col layout */
.hero-cols {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 500px;
}

/* LEFT */
.hero-left {
  width: 46%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 2;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border: 1.5px solid #93c5fd;
  border-radius: 999px;
  background: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #1e3a8a;
  width: fit-content;
}
.badge-star {
  color: #2563eb;
  font-size: var(--fs-body-lg);
  line-height: 1;
}

/* Headline */
.headline {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.07;
  color: #000;
  letter-spacing: -1.5px;
}
.hl-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.hl-blue svg,
.hl-blue .hl-underline {
  position: absolute;
  bottom: -28px;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  display: block;
}
/* Auto-rotating phrase inside the highlighted span.
   Ghost holds layout width (= longest phrase) so the underline never resizes;
   Current is overlaid on top and animates in/out as JS swaps its text. */
.rotate-text {
  position: relative;
  display: inline-block;
}
.rotate-ghost {
  visibility: hidden;
  display: inline-block;
  pointer-events: none;
}
.rotate-current {
  position: absolute;
  inset: 0;
  display: inline-block;
  text-align: left;
  will-change: opacity, transform;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.rotate-current.is-swapping {
  opacity: 0;
  transform: translateY(-10px);
}
/* Mobile: headline is centered, so center the rotated word within the ghost width */
@media (max-width: 768px) {
  .rotate-current {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .hl-blue svg,
  .hl-blue .hl-underline {
    bottom: -15px;
  }
}

/* Body text */
.body-bar {
  border-left: 3px solid #1e40af;
  padding-left: 14px;
  color: #1a1a1a;
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  max-width: 400px;
}

/* Buttons */
.btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1e40af;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 11px 14px 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  box-shadow: 0 6px 24px rgba(30, 64, 175, 0.35);
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: #1e3a8a;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(30, 64, 175, 0.45);
}
.btn-icon {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.btn-secondary:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
}
.play-ico {
  width: 26px;
  height: 26px;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* RIGHT */
.hero-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-right img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  object-fit: contain;
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* ══════════════════════════
   STATS BAR
══════════════════════════ */
.stats-bar {
  background: #fff;
  border-radius: 20px;
  padding: 24px 48px;
  box-shadow:
    0 8px 60px rgba(30, 64, 175, 0.13),
    0 2px 20px rgba(0, 0, 0, 0.07);
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: -10px;
  position: relative;
  z-index: 10;
}

.stat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.stat-ico {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
  font-size: var(--fs-body-lg);
  flex-shrink: 0;
}
.stat-num {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: #000;
  line-height: 1;
  letter-spacing: -0.5px;
}
.stat-lbl {
  font-size: var(--fs-small);
  color: #1a1a1a;
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
}
.stat-sep {
  width: 1px;
  height: 46px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* ══════════════════════════
   TRUSTED BRANDS
══════════════════════════ */
.trusted-wrap {
  background: #fff;
  padding: 36px 0 48px;
}
.trusted-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.trusted-label {
  font-size: var(--fs-tiny);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.brands-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1a1a1a;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  cursor: default;
  transition: color 0.2s;
}
.brand:hover {
  color: #1e40af;
}
.brand i {
  font-size: var(--fs-h3);
}

/* ══════════════════════════
   ENTRANCE ANIMATIONS
══════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.d1 {
  animation-delay: 0.05s;
}
.d2 {
  animation-delay: 0.17s;
}
.d3 {
  animation-delay: 0.28s;
}
.d4 {
  animation-delay: 0.4s;
}
.d5 {
  animation-delay: 0.52s;
}
.d6 {
  animation-delay: 0.15s;
}

/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════ */

/* ── Large laptop 1200-1400px ── */
@media (max-width: 1200px) {
  nav {
    padding: 12px 40px;
  }
  .hero-inner {
    padding: 24px 0 0 0;
  }
  .trusted-wrap {
    padding: 32px 0 44px;
  }
  .trusted-inner {
    padding: 0;
  }
  .headline {
    font-size: var(--fs-h1);
  }
  .nav-links {
    gap: 24px;
  }
  .stats-bar {
    padding: 22px 36px;
  }
}

/* ── Medium laptop / small desktop 1024-1200px ── */
@media (max-width: 1100px) {
  nav {
    padding: 12px 32px;
  }
  .hero-inner {
    padding: 20px 0 0 0;
  }
  .trusted-wrap {
    padding: 28px 0 40px;
  }
  .trusted-inner {
    padding: 0;
  }
  .headline {
    font-size: var(--fs-h1);
    letter-spacing: -1px;
  }
  .nav-links {
    gap: 18px;
  }
  .nav-links li a {
    font-size: var(--fs-body);
  }
  .nav-cta {
    font-size: var(--fs-small);
    padding: 10px 16px;
  }
  .stats-bar {
    padding: 20px 28px;
  }
  .stat-num {
    font-size: var(--fs-h3);
  }
  .stat-ico {
    width: 42px;
    height: 42px;
    font-size: var(--fs-body-lg);
  }
  .brands-row {
    gap: 36px;
  }
}

/* ── Tablet landscape / small laptop 768-1024px ── */
@media (max-width: 1024px) {
  /* Row 1: logo (left) + phone (right). Row 2: scrollable nav-links */
  nav {
    width: 100%;          /* override desktop's side-gap inset so nav spans edge-to-edge on mobile */
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    column-gap: 12px;
    padding: 10px 18px 6px;
  }
  .nav-cta {
    display: none;
  }
  .nav-phone {
    display: inline-flex;
    margin-left: auto;
    order: 0;             /* reset desktop order so phone sits right of logo on mobile */
  }
  .nav-links {
    order: 99;            /* always after logo/phone — wraps to next row */
    position: relative;
    display: flex;
    flex: 0 0 100%;       /* full width forces wrap onto row 2 */
    width: 100%;
    gap: 16px;
    padding: 10px 0 6px;  /* extra top padding gives the divider breathing room */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex-shrink: 0; }
  .nav-links li a { white-space: nowrap; }

  /* Faded glowing divider between row 1 (logo + phone) and row 2 (nav-links) */
  .nav-links::before {
    content: '';
    position: absolute;
    top: 0;
    left: -18px;          /* bleed past nav's horizontal padding */
    right: -18px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(30, 64, 175, 0.55) 25%,
      rgba(96, 165, 250, 0.85) 50%,
      rgba(30, 64, 175, 0.55) 75%,
      transparent 100%
    );
    box-shadow:
      0 0 6px rgba(30, 64, 175, 0.40),
      0 0 14px rgba(96, 165, 250, 0.30);
    pointer-events: none;
  }
  .hero-inner {
    padding: 20px 0 0 0;
  }

  .headline {
    font-size: var(--fs-h1);
    letter-spacing: -1px;
  }
  .hero-cols {
    min-height: 440px;
    gap: 16px;
  }
  .hero-left {
    width: 48%;
    gap: 18px;
  }
  .body-bar {
    font-size: var(--fs-body);
    max-width: 340px;
  }
  .stats-bar {
    padding: 18px 24px;
    gap: 8px;
  }
  .stat-num {
    font-size: var(--fs-h3);
  }
  .stat-lbl {
    font-size: var(--fs-tiny);
  }
  .stat-ico {
    width: 38px;
    height: 38px;
    font-size: var(--fs-body-lg);
  }
  .stat-cell {
    gap: 10px;
  }
  .brands-row {
    gap: 28px;
  }
  .trusted-wrap {
    padding: 24px 0 36px;
  }
  .trusted-inner {
    padding: 0;
  }
}

/* ── Tablet portrait 600-768px ── */
@media (max-width: 768px) {
  nav {
    padding: 10px 18px 6px;
  }
  .hero-inner {
    padding: 20px 0 0 0;
  }

  /* Stack hero vertically */
  .hero-cols {
    flex-direction: column;
    align-items: center;
    min-height: unset;
    gap: 0;
  }

  .hero-left {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding-top: 8px;
  }

  .headline {
    font-size: var(--fs-h1);
    letter-spacing: -1px;
  }

  .body-bar {
    border-left: none;
    border-top: none;
    padding-left: 0;
    padding-top: 0;
    text-align: center;
    max-width: 480px;
    font-size: var(--fs-body);
  }

  .btn-row {
    justify-content: center;
  }

  .hero-right {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .hero-right img {
    max-width: 100%;
    animation: none; /* disable float on mobile for performance */
  }

  /* Stats: 2x2 grid on tablet */
  .stats-bar {
    flex-wrap: wrap;
    gap: 0;
    padding: 20px 20px;
    margin-top: 20px;
    border-radius: 16px;
  }
  .stat-cell {
    width: 50%;
    flex: none;
    padding: 14px 12px;
    gap: 12px;
  }
  .stat-sep {
    display: none;
  }
    
  .stat-num {
    font-size: var(--fs-h3);
  }
  .stat-ico {
    width: 40px;
    height: 40px;
    font-size: var(--fs-body-lg);
  }

  .trusted-wrap {
    padding: 24px 0 36px;
  }
  .trusted-inner {
    padding: 0;
  }
  .brands-row {
    gap: 24px 36px;
  }
  .brand {
    font-size: var(--fs-body-lg);
  }
}

/* ── Large mobile 480-600px ── */
@media (max-width: 600px) {
  .headline {
    font-size: var(--fs-h2);
    letter-spacing: -0.8px;
  }
  .body-bar {
    font-size: var(--fs-body);
  }
  .hero-right {
    max-width: 400px;
  }
  .btn-primary,
  .btn-secondary {
    font-size: var(--fs-body);
  }
}

/* ── Small mobile 360-480px ── */
@media (max-width: 480px) {
  nav {
    padding: 8px 16px 6px;
  }
  .logo-name {
    font-size: var(--fs-body-lg);
  }
  .hero-inner {
    padding: 16px 17px 0px 24px;
  }
  .headline {
    font-size: var(--fs-h2);
    letter-spacing: -0.5px;
  }
  .badge {
    font-size: var(--fs-tiny);
    padding: 6px 13px 6px 10px;
  }
  .body-bar {
    font-size: var(--fs-body);
  }
  .btn-row {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .btn-primary {
    font-size: var(--fs-tiny);
    padding: 9px 10px 9px 14px;
    gap: 6px;
  }
  .btn-secondary {
    font-size: var(--fs-tiny);
    padding: 9px 14px;
    gap: 6px;
  }
  .btn-icon {
    width: 22px;
    height: 22px;
  }
  .play-ico {
    width: 20px;
    height: 20px;
  }
  .hero-right {
    max-width: 340px;
  }

  /* Stats stay 2-per-row on small mobile too */
  .stat-cell {
    width: 50%;
    padding: 12px 8px;
    gap: 10px;
  }
 
  .stat-num {
    font-size: var(--fs-h3);
  }
  .stat-lbl {
    font-size: var(--fs-tiny);
  }
  .stat-ico {
    width: 34px;
    height: 34px;
    font-size: var(--fs-body);
  }

  .trusted-wrap {
    padding: 20px 0 32px;
  }
  .trusted-inner {
    padding: 0;
  }
  .brands-row {
    gap: 18px 28px;
  }
  .brand {
    font-size: var(--fs-body);
  }
}

/* ── Tiny mobile below 360px ── */
@media (max-width: 360px) {
  .headline {
    font-size: var(--fs-h3);
  }
  .btn-row {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .btn-primary {
    font-size: var(--fs-tiny);
    padding: 8px 8px 8px 12px;
    gap: 5px;
  }
  .btn-secondary {
    font-size: var(--fs-tiny);
    padding: 8px 12px;
    gap: 5px;
  }
  .btn-icon {
    width: 20px;
    height: 20px;
  }
  .play-ico {
    width: 18px;
    height: 18px;
  }
}

/* ══════════════════════════════════════
   OUR SERVICES SECTION — Dark-bg, 12-card grid, bottom CTA banner
══════════════════════════════════════ */
.services-wrap {
  background:
    radial-gradient(circle at 80% 0%, rgba(96,165,250,0.18) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(30,64,175,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #0a1f4a 0%, #102a6b 40%, #0a1f4a 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.services-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* ── Decorative background: dot grid (top-left) + growth bars (top-right) ── */
.services-bg-dots,
.services-bg-chart {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.services-bg-dots {
  top: 30px;
  left: 0;
  width: 150px;
  height: 100px;
  background-image: radial-gradient(rgba(147,197,253,0.30) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.75;
}
.services-bg-chart {
  top: 20px;
  right: 0;
  width: 260px;
  height: 200px;
  background:
    linear-gradient(180deg, rgba(96,165,250,0) 0%, rgba(96,165,250,0.55) 60%, rgba(96,165,250,0.85) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 100% / 12% 28% no-repeat,
    linear-gradient(#000 0 0) 16% 100% / 12% 40% no-repeat,
    linear-gradient(#000 0 0) 32% 100% / 12% 52% no-repeat,
    linear-gradient(#000 0 0) 48% 100% / 12% 64% no-repeat,
    linear-gradient(#000 0 0) 64% 100% / 12% 76% no-repeat,
    linear-gradient(#000 0 0) 80% 100% / 12% 88% no-repeat;
          mask:
    linear-gradient(#000 0 0) 0 100% / 12% 28% no-repeat,
    linear-gradient(#000 0 0) 16% 100% / 12% 40% no-repeat,
    linear-gradient(#000 0 0) 32% 100% / 12% 52% no-repeat,
    linear-gradient(#000 0 0) 48% 100% / 12% 64% no-repeat,
    linear-gradient(#000 0 0) 64% 100% / 12% 76% no-repeat,
    linear-gradient(#000 0 0) 80% 100% / 12% 88% no-repeat;
  opacity: 0.35;
}

/* ── Header ── */
.services-header {
  text-align: center;
  margin-bottom: 44px;
  position: relative;
  z-index: 2;
}
/* Tag — base styles match other sections (.wcu-tag pattern). The animated
   gradient + stars come from the shared "ANIMATED SECTION TAG STYLE" block. */
.services-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.services-tag-star {
  color: #1e40af;
  font-size: var(--fs-tiny);
  line-height: 1;
}

/* Title — same scale as other section titles (--fs-h1), white for dark bg */
.services-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -1.2px;
  margin: 0 auto 14px;
  max-width: 900px;
}
.services-title-blue {
  color: #93c5fd;
}

/* Subtitle — same scale, weight, max-width as other sections */
.services-subtitle {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}

/* ── 12-card grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 44px;
  position: relative;
  z-index: 2;
}

/* Service card — image fills the whole card, text overlays at the bottom */
.service-card {
  background: #0a1f4a;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  isolation: isolate;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.service-card:hover .service-img {
  transform: scale(1.06);
}

/* Image — full-bleed background, slightly brightened + saturated for pop */
.service-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(1.12) saturate(1.08);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  -webkit-user-drag: none;
  display: block;
}
.service-card:hover .service-img {
  filter: brightness(1.18) saturate(1.12);
}

/* No overlay on the image — the image stays fully visible.
   The dark backdrop is applied ONLY to the .service-content block at the bottom. */

/* Number badge top-left — sits above image + overlay */
.service-num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: 0.08em;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 35%,
    rgba(2, 6, 20, 0.08) 45%,
    rgba(2, 6, 20, 0.22) 55%,
    rgba(2, 6, 20, 0.45) 65%,
    rgba(2, 6, 20, 0.72) 75%,
    rgba(2, 6, 20, 0.92) 88%,
    rgba(2, 6, 20, 1) 100%
  );
}

.service-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 28px 24px 24px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 12px;

  /* THIS is the important improvement */
  background: linear-gradient(
    to top,
    rgba(2, 6, 20, 1) 0%,
    rgba(2, 6, 20, 0.98) 18%,
    rgba(2, 6, 20, 0.94) 32%,
    rgba(2, 6, 20, 0.82) 48%,
    rgba(2, 6, 20, 0.62) 62%,
    rgba(2, 6, 20, 0.36) 74%,
    rgba(2, 6, 20, 0.16) 86%,
    rgba(2, 6, 20, 0.04) 94%,
    rgba(2, 6, 20, 0) 100%
  );

  backdrop-filter: blur(4px);
}

/* Better text visibility */
.service-content h3 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.45),
    0 0 30px rgba(0,0,0,0.25);
}

.service-content p {
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  font-size: 12px;
  margin: 0;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.35);
}

/* Title — locked to 2 lines so all cards align uniformly */
.service-name {
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* min-height removed — divider now sits flush against the actual title text */
}

/* Divider under title — sits flush against the title */
.service-divider {
  display: block;
  width: 30px;
  height: 2px;
  background: #60a5fa;
  border-radius: 2px;
  margin: 0;
}

/* Description — locked to 4 lines so all cards align uniformly */
.service-desc {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  margin: 6px 0 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* min-height removed — panel hugs actual description length */
}

/* Arrow CTA — gradient-blue circle, top-right of card */
.service-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-tiny);
  text-decoration: none;
  z-index: 4;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  box-shadow:
    0 6px 16px rgba(9, 28, 60, 0.45),
    0 0 0 1px rgba(147, 197, 253, 0.30);
}
.service-arrow:hover {
  transform: translateX(2px) translateY(-1px);
  filter: brightness(1.12);
  box-shadow:
    0 10px 22px rgba(9, 28, 60, 0.55),
    0 0 0 1px rgba(147, 197, 253, 0.55);
}

/* ══ Bottom CTA banner ══ */
.services-bottom {
  background: linear-gradient(135deg, #1e40af 0%, #0a1f4a 100%);
  border-radius: 18px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(147,197,253,0.25);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  z-index: 2;
}
.services-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,0.22) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(147,197,253,0.18) 0%, transparent 40%);
  pointer-events: none;
}
.services-bottom-icon,
.services-bottom-text,
.services-bottom-stats,
.services-bottom-btn {
  position: relative;
  z-index: 1;
}

.services-bottom-icon {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(147,197,253,0.30);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  font-size: var(--fs-h3);
  flex-shrink: 0;
}

.services-bottom-text {
  flex: 1;
  min-width: 0;
}
.services-bottom-text h3 {
  font-size: var(--fs-h3);
  color: #fff;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.services-bottom-text h3 span {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.services-bottom-text p {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.services-bottom-text p span {
  color: #93c5fd;
  font-weight: 600;
}

.services-bottom-stats {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-shrink: 0;
}
.services-bottom-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: 1.2;
}
.services-bottom-stat i {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  font-size: var(--fs-small);
  flex-shrink: 0;
}

.services-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1e40af;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.services-bottom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,255,255,0.25);
}
.services-bottom-btn i {
  width: 26px;
  height: 26px;
  background: #1e40af;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .services-wrap { padding: 64px 0; }
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .services-bg-chart { width: 220px; height: 170px; }
  .services-title { font-size: var(--fs-h1); }
}
/* Match other sections' title/subtitle scaling at 1100px */
@media (max-width: 1100px) {
  .services-title { font-size: var(--fs-h2); letter-spacing: -1px; }
}
@media (max-width: 900px) {
  .services-wrap { padding: 56px 0; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .services-bg-dots { width: 110px; height: 80px; }
  .services-bg-chart { width: 180px; height: 140px; opacity: 0.22; }
  .services-bottom { flex-wrap: wrap; gap: 18px; padding: 22px; }
  .services-bottom-stats { width: 100%; justify-content: space-between; order: 3; }
  .services-bottom-btn { order: 4; margin-left: auto; }
}
/* Match other sections at 768px (mobile) */
@media (max-width: 768px) {
  .services-title { font-size: var(--fs-h3); letter-spacing: -0.7px; }
  .services-subtitle { font-size: var(--fs-body); }
  .services-subtitle br { display: none; }
}
@media (max-width: 600px) {
  .services-wrap { padding: 48px 0; }
  .services-header { margin-bottom: 32px; }
  .services-bg-chart { display: none; }
  .services-bg-dots { width: 90px; height: 60px; }

  /* ── Horizontal scroll row of cards (one row, swipe to navigate) ── */
  .services-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    margin: 0 0 30px;
    padding: 6px 4px 14px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }

  .service-card {
    flex: 0 0 78%;       /* each card is 78% of viewport — peek of next card visible */
    max-width: 320px;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 480px) {
  .services-tag { font-size: var(--fs-tiny); padding: 7px 16px; letter-spacing: 0.18em; }
  /* Match other sections' tighter title/subtitle on small phones */
  .services-title { font-size: var(--fs-h3); letter-spacing: -0.5px; }
  .services-subtitle { font-size: var(--fs-small); }
  .services-bottom { padding: 18px; }
  .services-bottom-icon { width: 50px; height: 50px; font-size: var(--fs-body-lg); }
  .services-bottom-text h3 { font-size: var(--fs-body-lg); }
  .services-bottom-stats { gap: 10px; flex-wrap: wrap; }
  .services-bottom-stat { font-size: var(--fs-tiny); }
  .services-bottom-stat i { width: 30px; height: 30px; }
  .services-bottom-btn { padding: 12px 18px; width: 100%; justify-content: center; }
}
/* ══════════════════════════════════════
   WHY CHOOSE US SECTION
══════════════════════════════════════ */
.wcu-wrap {
  background: #fff;
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}
.wcu-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Decorative corner dots */
.wcu-dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  pointer-events: none;
  opacity: 0.55;
}
.wcu-dots span {
  width: 4px;
  height: 4px;
  background: #b8c5dd;
  border-radius: 50%;
}
.wcu-dots-tl {
  top: 30px;
  left: 10px;
}
.wcu-dots-br {
  bottom: 30px;
  right: 10px;
}

/* Header */
.wcu-header {
  text-align: center;
  margin-bottom: 36px;
}
.wcu-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.wcu-tag-star {
  color: #1e40af;
  font-size: var(--fs-tiny);
  line-height: 1;
}
.wcu-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.wcu-title-blue {
  color: #1e40af;
}
.wcu-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}

/* Content area */
.wcu-content {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
  margin-right: 60px;
  position: relative;
}

/* LEFT — image */
.wcu-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcu-left img {
  width: 100%;
  max-width: 560px;
  max-height: 420px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* RIGHT — heading + cards */
.wcu-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
  width: 100%;
}
.wcu-right-title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #000;
  line-height: 1.35;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
.wcu-right-blue {
  color: #1e40af;
}

/* Feature card */
.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.12);
  border-color: #93c5fd;
}
.feature-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
  font-size: var(--fs-h3);
  flex-shrink: 0;
}
.feature-text {
  flex: 1;
  min-width: 0;
}
.feature-text h4 {
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: #000;
  margin-bottom: 3px;
  letter-spacing: -0.3px;
}
.feature-text p {
  font-size: var(--fs-small);
  color: #1a1a1a;
  line-height: 1.5;
}
.feature-go {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  text-decoration: none;
  flex-shrink: 0;
  transition:
    background 0.2s,
    transform 0.2s,
    filter 0.2s;
}
.feature-go:hover {
  filter: brightness(1.12);
  transform: scale(1.08);
}

/* Bottom stats */
.wcu-stats {
  background: #fff;
  border-radius: 18px;
  padding: 20px 40px;
  box-shadow:
    0 8px 40px rgba(30, 64, 175, 0.08),
    0 2px 14px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8ebf2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.wcu-stat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
}
.wcu-stat-ico {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  color: #1e40af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  flex-shrink: 0;
}
.wcu-stat-num {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: #000;
  line-height: 1;
  letter-spacing: -0.6px;
}
.wcu-stat-lbl {
  font-size: var(--fs-small);
  color: #1a1a1a;
  font-weight: 500;
  margin-top: 4px;
  white-space: nowrap;
}
.wcu-stat-sep {
  width: 1px;
  height: 44px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* Responsive — WCU */
@media (max-width: 1200px) {
  .wcu-wrap {
    padding: 52px 0 52px;
  }
  .wcu-inner {
    padding: 0;
  }
  .wcu-title {
    font-size: var(--fs-h1);
  }
  .wcu-stats {
    padding: 18px 32px;
  }
}
@media (max-width: 1100px) {
  .wcu-wrap {
    padding: 48px 0 48px;
  }
  .wcu-inner {
    padding: 0;
  }
  .wcu-title {
    font-size: var(--fs-h2);
    letter-spacing: -1px;
  }
  .wcu-content {
    gap: 24px;
    margin-bottom: 32px;
  }
  .wcu-right-title {
    font-size: var(--fs-body-lg);
  }
  .feature-card {
    padding: 12px 14px;
    gap: 12px;
  }
  .feature-icon {
    width: 40px;
    height: 40px;
    font-size: var(--fs-body-lg);
  }
  .feature-text h4 {
    font-size: var(--fs-body);
  }
  .feature-text p {
    font-size: var(--fs-tiny);
  }
  .wcu-stat-num {
    font-size: var(--fs-h3);
  }
  .wcu-stat-ico {
    width: 44px;
    height: 44px;
    font-size: var(--fs-body-lg);
  }
}
@media (max-width: 1024px) {
  .wcu-wrap {
    padding: 44px 0 44px;
  }
  .wcu-inner {
    padding: 0;
  }
}
@media (max-width: 900px) {
  .wcu-content {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-right: 0;
  }
  .wcu-right-title {
    text-align: center;
  }
  .wcu-stats {
    padding: 18px 22px;
  }
}
@media (max-width: 768px) {
  .wcu-wrap {
    padding: 40px 0 40px;
  }
  .wcu-inner {
    padding: 0;
  }
  .wcu-header {
    margin-bottom: 28px;
  }
  .wcu-content {
    margin-bottom: 28px;
  }
  .wcu-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.7px;
  }
  .wcu-subtitle {
    font-size: var(--fs-body);
  }
  .wcu-subtitle br {
    display: none;
  }
  .wcu-stats {
    flex-wrap: wrap;
    gap: 0;
    padding: 18px 14px;
    border-radius: 16px;
  }
  .wcu-stat-cell {
    width: 50%;
    flex: none;
    padding: 12px 8px;
    gap: 10px;
  }
  .wcu-stat-sep {
    display: none;
  }
  .wcu-stat-cell:nth-child(1) {
    border-right: 1px solid #eef0f6;
    border-bottom: 1px solid #eef0f6;
  }
  .wcu-stat-cell:nth-child(3) {
    border-bottom: 1px solid #eef0f6;
  }
  .wcu-stat-cell:nth-child(5) {
    border-right: 1px solid #eef0f6;
  }
  .wcu-stat-num {
    font-size: var(--fs-h3);
  }
  .wcu-stat-ico {
    width: 40px;
    height: 40px;
    font-size: var(--fs-body-lg);
  }
  .wcu-dots {
    display: none;
  }
}
@media (max-width: 480px) {
  .wcu-wrap {
    padding: 32px 0 32px;
  }
  .wcu-inner {
    padding: 0;
  }
  .wcu-header {
    margin-bottom: 24px;
  }
  .wcu-content {
    margin-bottom: 24px;
  }
  .wcu-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.5px;
  }
  .wcu-subtitle {
    font-size: var(--fs-small);
  }
  .wcu-right-title {
    font-size: var(--fs-body-lg);
  }
  .feature-card {
    padding: 12px 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .feature-icon {
    width: 38px;
    height: 38px;
    font-size: var(--fs-body-lg);
    border-radius: 9px;
  }
  .feature-text h4 {
    font-size: var(--fs-body);
  }
  .feature-text p {
    font-size: var(--fs-tiny);
  }
  .feature-go {
    width: 30px;
    height: 30px;
    font-size: var(--fs-tiny);
  }
  .wcu-stat-num {
    font-size: var(--fs-body-lg);
  }
  .wcu-stat-lbl {
    font-size: var(--fs-tiny);
  }
  .wcu-stat-ico {
    width: 36px;
    height: 36px;
    font-size: var(--fs-body);
  }
  .wcu-stat-cell {
    padding: 10px 5px;
    gap: 8px;
  }
}

/* ══════════════════════════════════════
   INDUSTRIES WE SERVE SECTION
══════════════════════════════════════ */
.industries-wrap {
  background: #fff;
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}
.industries-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Header */
.industries-header {
  text-align: center;
  margin-bottom: 40px;
}
.industries-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.industries-tag-star {
  font-size: var(--fs-tiny);
  line-height: 1;
}
.industries-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.industries-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.industries-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.industries-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
  font-weight: 500;
}
.industries-subtitle-blue {
  color: #1e40af;
  font-weight: 700;
}

/* Grid */
.industries-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.industries-row {
  display: grid;
  gap: 16px;
}
.industries-row-2col {
  grid-template-columns: 1.5fr 1fr;
}
.industries-row-3col {
  grid-template-columns: 1.1fr 1.2fr 1.1fr;
}

/* Card */
.industry-card {
  position: relative;
  border-radius: 16px;
  padding: 20px 22px;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--card-rgb, 232, 237, 246), 0.55) 0%,
    rgba(var(--card-rgb, 232, 237, 246), 0.3) 30%,
    rgba(var(--card-rgb, 232, 237, 246), 0) 60%
  );
  backdrop-filter: brightness(1.08) saturate(1.3);
  -webkit-backdrop-filter: brightness(1.08) saturate(1.3);
  z-index: 0;
  pointer-events: none;
}
.industry-card > * {
  position: relative;
  z-index: 1;
}
.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
}

/* Icon circle */
.industry-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
  color: var(--accent, #1e40af);
}

.industry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.industry-content h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
  color: var(--accent, #1e40af);
}
.industry-content p {
  font-size: var(--fs-body);
  color: #1a1a1a;
  line-height: 1.55;
  max-width: 200px;
  margin-bottom: 0;
  flex: 1;
}

.industry-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  color: var(--accent, #1e40af);
  width: fit-content;
  transition: gap 0.25s ease;
}
.industry-link:hover {
  gap: 14px;
}
.industry-link-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #1e40af);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Industry tints (RGB tuple) + accent colors */
.industry-ecom {
  --card-rgb: 232, 239, 255;
  --accent: #2563eb;
}
.industry-realestate {
  --card-rgb: 255, 238, 222;
  --accent: #ea580c;
}
.industry-education {
  --card-rgb: 240, 232, 255;
  --accent: #7c3aed;
}
.industry-saas {
  --card-rgb: 224, 239, 255;
  --accent: #1e40af;
}
.industry-retail {
  --card-rgb: 255, 224, 235;
  --accent: #db2777;
}
.industry-healthcare {
  --card-rgb: 214, 242, 228;
  --accent: #0d9488;
}
.industry-food {
  --card-rgb: 255, 243, 213;
  --accent: #d97706;
}
.industry-more {
  --card-rgb: 232, 224, 255;
  --accent: #8b5cf6;
}

/* Responsive — Industries */
@media (max-width: 1200px) {
  .industries-wrap {
    padding: 52px 0 52px;
  }
  .industries-inner {
    padding: 0;
  }
  .industries-title {
    font-size: var(--fs-h1);
  }
}
@media (max-width: 1100px) {
  .industries-wrap {
    padding: 48px 0 48px;
  }
  .industries-inner {
    padding: 0;
  }
  .industries-title {
    font-size: var(--fs-h2);
    letter-spacing: -1px;
  }
  .industries-grid {
    gap: 14px;
  }
  .industries-row {
    gap: 14px;
  }
  .industry-card {
    padding: 20px 22px;
    min-height: 210px;
  }
  .industry-icon {
    width: 46px;
    height: 46px;
    font-size: var(--fs-body-lg);
    margin-bottom: 18px;
  }
  .industry-content h3 {
    font-size: var(--fs-h3);
  }
  .industry-content p {
    font-size: var(--fs-small);
    margin-bottom: 18px;
  }
}
@media (max-width: 1024px) {
  .industries-wrap {
    padding: 44px 0 44px;
  }
  .industries-inner {
    padding: 0;
  }
  .industries-row-2col,
  .industries-row-3col {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .industries-wrap {
    padding: 40px 0 40px;
  }
  .industries-inner {
    padding: 0;
  }
  .industries-header {
    margin-bottom: 28px;
  }
  .industries-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.7px;
  }
  .industries-subtitle {
    font-size: var(--fs-body);
  }
  .industries-subtitle br {
    display: none;
  }
  .industries-grid {
    gap: 12px;
  }
  .industries-row {
    gap: 12px;
  }
  .industries-row-2col,
  .industries-row-3col {
    grid-template-columns: 1fr;
  }
  .industry-card {
    padding: 18px 18px;
    min-height: 180px;
  }
  /* Solid colour block behind the text, then a quick fade — so the right
     half of the illustration stays clean (no fade washing over it). */
  .industry-card::before {
    background: linear-gradient(
      to right,
      rgba(var(--card-rgb, 232, 237, 246), 1) 0%,
      rgba(var(--card-rgb, 232, 237, 246), 1) 50%,
      rgba(var(--card-rgb, 232, 237, 246), 0) 64%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .industry-content h3 {
    font-size: var(--fs-body-lg);
  }
  /* Keep text inside the solid zone, clear of the illustration. */
  .industry-content p {
    max-width: 50%;
  }
  .industry-link {
    max-width: 50%;
  }
}
@media (max-width: 480px) {
  .industries-wrap {
    padding: 32px 0 32px;
  }
  .industries-inner {
    padding: 0;
  }
  .industries-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.5px;
  }
  .industries-subtitle {
    font-size: var(--fs-small);
  }
  .industry-card {
    padding: 16px 16px;
    border-radius: 14px;
    min-height: 160px;
  }
  /* Tiny screens — solid block + quick fade; right half of image stays clean. */
  .industry-card::before {
    background: linear-gradient(
      to right,
      rgba(var(--card-rgb, 232, 237, 246), 1) 0%,
      rgba(var(--card-rgb, 232, 237, 246), 1) 52%,
      rgba(var(--card-rgb, 232, 237, 246), 0) 66%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .industry-icon {
    width: 42px;
    height: 42px;
    font-size: var(--fs-body-lg);
    margin-bottom: 14px;
  }
  .industry-content h3 {
    font-size: var(--fs-body-lg);
  }
  .industry-content p {
    font-size: var(--fs-tiny);
    margin-bottom: 14px;
    max-width: 50%;
  }
  .industry-link { max-width: 50%; }
  .industry-link {
    font-size: var(--fs-small);
  }
  .industry-link-ico {
    width: 24px;
    height: 24px;
    font-size: var(--fs-tiny);
  }
}

/* ══════════════════════════════════════
   TESTIMONIALS SECTION
══════════════════════════════════════ */
.testi-wrap {
  background: #fff;
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}
.testi-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Corner dots */
.testi-dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}
.testi-dots span {
  width: 4px;
  height: 4px;
  background: #b8c5dd;
  border-radius: 50%;
}
.testi-dots-tl {
  top: 24px;
  left: 18px;
}
.testi-dots-br {
  bottom: 24px;
  right: 18px;
}

/* Header */
.testi-header {
  text-align: center;
  position: relative;
  z-index: 2;
}
.testi-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.testi-tag-star {
  font-size: var(--fs-tiny);
  line-height: 1;
}
.testi-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.15;
  color: #000;
  letter-spacing: -1.3px;
  margin-bottom: 14px;
}
.testi-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.testi-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.testi-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
  font-weight: 500;
}

/* 3-column content */
.testi-content {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.testi-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  align-self: stretch;
  padding: 60px 0;
}

/* Testimonial card */
.testi-card {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  padding: 13px 15px 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.045);
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
}
.testi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(30, 64, 175, 0.13);
  border-color: #93c5fd;
}

/* Quote marks */
.testi-quote-mark {
  position: absolute;
  font-family: Georgia, serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #c7d4ec;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.testi-quote-tl {
  top: 8px;
  left: 12px;
}
.testi-quote-br {
  bottom: -6px;
  right: 12px;
  transform: scaleX(-1);
}

/* Body */
.testi-card-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 10px;
}
.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.12);
}
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testi-text {
  flex: 1;
  min-width: 0;
}
.testi-message {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 8px;
}
.testi-author {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}
.testi-author strong {
  font-size: var(--fs-small);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.2px;
}
.testi-author span {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  margin-top: 1px;
}
.testi-stars {
  color: #1e40af;
  font-size: var(--fs-tiny);
  letter-spacing: 2px;
}

/* Center image */
.testi-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}
.testi-center img {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* Floating icons around center */
.testi-float-icon {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  box-shadow: 0 8px 22px rgba(30, 64, 175, 0.32);
  z-index: 3;
  animation: float-y 4s ease-in-out infinite;
}
.testi-float-tl {
  top: 10%;
  left: -14px;
  animation-delay: 0s;
}
.testi-float-tr {
  top: 10%;
  right: -14px;
  animation-delay: 0.5s;
}
.testi-float-bl {
  bottom: 12%;
  left: -14px;
  animation-delay: 1s;
}
.testi-float-br {
  bottom: 12%;
  right: -14px;
  animation-delay: 1.5s;
}

/* Stats bar */
.testi-stats {
  background: #fff;
  border-radius: 18px;
  padding: 20px 40px;
  box-shadow:
    0 8px 40px rgba(30, 64, 175, 0.08),
    0 2px 14px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8ebf2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}
.testi-stat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
}
.testi-stat-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
  font-size: var(--fs-body-lg);
  flex-shrink: 0;
}
.testi-stat-num {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: #000;
  line-height: 1;
  letter-spacing: -0.6px;
}
.testi-stat-lbl {
  font-size: var(--fs-small);
  color: #1a1a1a;
  font-weight: 500;
  margin-top: 4px;
  white-space: nowrap;
}
.testi-stat-sep {
  width: 1px;
  height: 44px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* Brands strip */
.testi-brands {
  background: #fff;
  border-radius: 18px;
  padding: 22px 40px 26px;
  box-shadow: 0 4px 24px rgba(30, 64, 175, 0.06);
  border: 1px solid #e8ebf2;
  position: relative;
  z-index: 2;
}
.testi-brands-label {
  text-align: center;
  font-size: var(--fs-tiny);
  letter-spacing: 0.22em;
  font-weight: 800;
  color: #1e40af;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.testi-brands-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 36px;
}
.testi-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1e3a8a;
  font-size: var(--fs-body-lg);
  font-weight: 800;
  letter-spacing: -0.3px;
  cursor: default;
}
.testi-brand i {
  font-size: var(--fs-body-lg);
  color: #1e40af;
}

/* Responsive — Testimonials */
@media (max-width: 1200px) {
  .testi-wrap {
    padding: 52px 0 52px;
  }
  .testi-inner {
    padding: 0;
  }
  .testi-title {
    font-size: var(--fs-h1);
  }
  .testi-stats {
    padding: 18px 32px;
  }
}
@media (max-width: 1100px) {
  .testi-wrap {
    padding: 48px 0 48px;
  }
  .testi-inner {
    padding: 0;
  }
  .testi-title {
    font-size: var(--fs-h2);
    letter-spacing: -1px;
  }
  .testi-content {
    gap: 16px;
  }
  .testi-card {
    padding: 12px 13px 11px;
  }
  .testi-avatar {
    width: 42px;
    height: 42px;
  }
  .testi-message {
    font-size: var(--fs-tiny);
  }
  .testi-author strong {
    font-size: var(--fs-tiny);
  }
  .testi-author span {
    font-size: var(--fs-tiny);
  }
  .testi-center img {
    max-width: 480px;
  }
  .testi-center {
    min-height: 420px;
  }
  .testi-float-icon {
    width: 46px;
    height: 46px;
    font-size: var(--fs-body-lg);
  }
  .testi-stat-num {
    font-size: var(--fs-h3);
  }
  .testi-stat-ico {
    width: 44px;
    height: 44px;
    font-size: var(--fs-body-lg);
  }
}
@media (max-width: 1024px) {
  .testi-wrap {
    padding: 44px 0 44px;
  }
  .testi-inner {
    padding: 0;
  }
  .testi-content {
    grid-template-columns: 1fr 1fr;
  }
  /* Image spans both cols, sits between the two card rows */
  .testi-center {
    grid-column: 1 / -1;
    order: 2;
    min-height: 360px;
  }
  .testi-center img {
    max-width: 420px;
  }
  .testi-float-icon { display: none; }
}
@media (max-width: 768px) {
  .testi-wrap {
    padding: 40px 0 40px;
  }
  .testi-inner {
    padding: 0;
  }
  .testi-header {
    margin-bottom: 28px;
  }
  .testi-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.7px;
  }
  .testi-subtitle {
    font-size: var(--fs-body-lg);
  }
  .testi-subtitle br {
    display: none;
  }
  .testi-content {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  /* Mobile order: left cards → image → right cards (natural HTML order) */
  .testi-center {
    order: 0;
    grid-column: auto;
    min-height: 320px;
  }
  .testi-center img {
    max-width: 320px;
  }
  .testi-col {
    gap: 14px;
  }

  .testi-stats {
    flex-wrap: wrap;
    gap: 0;
    padding: 18px 14px;
    border-radius: 16px;
  }
  .testi-stat-cell {
    width: 50%;
    flex: none;
    padding: 12px 8px;
    gap: 10px;
  }
  .testi-stat-sep {
    display: none;
  }
  .testi-stat-cell:nth-child(1) {
    border-right: 1px solid #eef0f6;
    border-bottom: 1px solid #eef0f6;
  }
  .testi-stat-cell:nth-child(3) {
    border-bottom: 1px solid #eef0f6;
  }
  .testi-stat-cell:nth-child(5) {
    border-right: 1px solid #eef0f6;
  }
  .testi-stat-num {
    font-size: var(--fs-h3);
  }
  .testi-stat-ico {
    width: 40px;
    height: 40px;
    font-size: var(--fs-body-lg);
  }

  .testi-brands {
    padding: 18px 18px 22px;
  }
  .testi-brands-row {
    gap: 16px 24px;
    justify-content: center;
  }
  .testi-brand {
    font-size: var(--fs-body);
  }
  .testi-brand i {
    font-size: var(--fs-body-lg);
  }

  .testi-dots {
    display: none;
  }
}
@media (max-width: 480px) {
  .testi-wrap {
    padding: 32px 0 32px;
  }
  .testi-inner {
    padding: 0;
  }
  .testi-header {
    margin-bottom: 24px;
  }
  .testi-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.5px;
  }
  .testi-subtitle {
    font-size: var(--fs-small);
  }

  .testi-card {
    padding: 12px 14px;
    border-radius: 14px;
  }
  .testi-card-body {
    gap: 12px;
  }
  .testi-avatar {
    width: 44px;
    height: 44px;
  }
  .testi-message {
    font-size: var(--fs-tiny);
  }
  .testi-author strong {
    font-size: var(--fs-small);
  }
  .testi-author span {
    font-size: var(--fs-tiny);
  }

  .testi-stat-num {
    font-size: var(--fs-body-lg);
  }
  .testi-stat-lbl {
    font-size: var(--fs-tiny);
  }
  .testi-stat-ico {
    width: 36px;
    height: 36px;
    font-size: var(--fs-body);
  }

  .testi-brands {
    padding: 14px 14px 18px;
    border-radius: 14px;
  }
  .testi-brand {
    font-size: var(--fs-small);
  }
  .testi-brand i {
    font-size: var(--fs-body-lg);
  }
}

/* ══════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════ */
.faq-wrap {
  background: #fff;
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}
.faq-wrap::before,
.faq-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.faq-wrap::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0) 70%);
  top: -100px; right: -120px;
}
.faq-wrap::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.28) 0%, rgba(147, 197, 253, 0) 70%);
  bottom: -80px; left: -120px;
}
.faq-inner { position: relative; z-index: 1; }
.faq-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Header */
.faq-header {
  text-align: center;
  margin-bottom: 36px;
}
.faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.faq-tag-star {
  font-size: var(--fs-tiny);
  line-height: 1;
}
.faq-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.faq-title-blue {
  color: #1e40af;
}
.faq-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}

/* FAQ list */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}
.faq-item.open {
  border-color: #93c5fd;
  box-shadow: 0 10px 30px rgba(30, 64, 175, 0.1);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: #000;
  letter-spacing: -0.2px;
  user-select: none;
  transition: color 0.2s ease;
}
.faq-q:hover {
  color: #1e40af;
}
.faq-item.open .faq-q {
  color: #1e40af;
}

.faq-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8edf6 0%, #c7d4ec 100%);
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  flex-shrink: 0;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    color 0.3s ease;
}
.faq-item.open .faq-icon {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  transform: rotate(45deg);
}

/* Smooth open/close via grid-template-rows */
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open .faq-a-wrap {
  grid-template-rows: 1fr;
}
.faq-a {
  overflow: hidden;
  min-height: 0;
}
.faq-a-inner {
  padding: 0 22px 20px;
  font-size: var(--fs-body);
  color: #1a1a1a;
  line-height: 1.65;
  border-top: 1px solid #eef0f6;
  padding-top: 16px;
  margin-top: 2px;
}

/* Responsive — FAQ */
@media (max-width: 1200px) {
  .faq-wrap {
    padding: 52px 0 52px;
  }
  .faq-inner {
    padding: 0;
  }
  .faq-title {
    font-size: var(--fs-h1);
  }
}
@media (max-width: 1100px) {
  .faq-wrap {
    padding: 48px 0 48px;
  }
  .faq-inner {
    padding: 0;
  }
  .faq-title {
    font-size: var(--fs-h2);
    letter-spacing: -1px;
  }
}
@media (max-width: 1024px) {
  .faq-wrap {
    padding: 44px 0 44px;
  }
  .faq-inner {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .faq-wrap {
    padding: 40px 0 40px;
  }
  .faq-inner {
    padding: 0;
  }
  .faq-header {
    margin-bottom: 26px;
  }
  .faq-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.7px;
  }
  .faq-subtitle {
    font-size: var(--fs-body-lg);
  }
  .faq-q {
    font-size: var(--fs-body);
    padding: 15px 18px;
  }
  .faq-a-inner {
    padding: 14px 18px 18px;
    font-size: var(--fs-small);
  }
  .faq-icon {
    width: 30px;
    height: 30px;
    font-size: var(--fs-tiny);
  }
}
@media (max-width: 480px) {
  .faq-wrap {
    padding: 32px 0 32px;
  }
  .faq-inner {
    padding: 0;
  }
  .faq-title {
    font-size: var(--fs-h3);
    letter-spacing: -0.5px;
  }
  .faq-subtitle {
    font-size: var(--fs-small);
  }
  .faq-list {
    gap: 10px;
  }
  .faq-q {
    font-size: var(--fs-body);
    padding: 13px 14px;
    gap: 12px;
  }
  .faq-a-inner {
    padding: 12px 14px 16px;
    font-size: var(--fs-small);
  }
  .faq-icon {
    width: 26px;
    height: 26px;
    font-size: var(--fs-tiny);
  }
}

/* ══════════════════════════════════════
   MARKETING CHANNELS SECTION
══════════════════════════════════════ */
.channels-wrap {
  background: #fff;
  padding: 60px 0 60px;
  position: relative;
  overflow: hidden;
}
.channels-wrap::before,
.channels-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.channels-wrap::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 70%);
  top: -140px; left: -150px;
}
.channels-wrap::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.30) 0%, rgba(147, 197, 253, 0) 70%);
  bottom: -120px; right: -140px;
}
.channels-inner { position: relative; z-index: 1; }
.channels-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Header */
.channels-header {
  text-align: center;
  margin-bottom: 36px;
}
.channels-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.channels-tag-star {
  font-size: var(--fs-tiny);
  line-height: 1;
}
.channels-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.channels-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.channels-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.channels-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto;
  font-weight: 500;
}

/* 3-column layout: left cards | orbital center | right cards */
.channels-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 30px;
}
.channels-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Platform card */
.platform-card {
  position: relative;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 16px;
  padding: 16px 16px 16px 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow: hidden;
}
/* Gradient left-border removed per request */
.platform-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--brand, #1e40af) 0%,
    color-mix(in srgb, var(--brand, #1e40af) 55%, #091c3c) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand, #1e40af) 35%, transparent);
}
.platform-icon.gradient-icon {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 35%, #d62976 65%, #962fbf 100%);
  color: #fff;
}
.platform-body { flex: 1; min-width: 0; }
.platform-body h3 {
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.platform-body p {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 10px;
}
.platform-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  background: var(--brand-light, #eaf2ff);
  color: var(--brand, #1e40af);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: -0.1px;
}
.platform-stat i { font-size: var(--fs-tiny); }

/* Platform brand colors */
.platform-google      { --brand: #4285F4; --brand-light: #eaf2ff; --brand-soft: #c5dcff; }
.platform-meta        { --brand: #1877F2; --brand-light: #e8f1ff; --brand-soft: #c0dcff; }
.platform-instagram   { --brand: #d62976; --brand-light: #ffe9f1; --brand-soft: #ffc4dd; }
.platform-linkedin    { --brand: #0A66C2; --brand-light: #e7f1ff; --brand-soft: #c2dcff; }
.platform-youtube     { --brand: #FF0000; --brand-light: #ffe8e8; --brand-soft: #ffc8c8; }
.platform-seo         { --brand: #10B981; --brand-light: #dffaee; --brand-soft: #b8efd2; }

/* ── Orbital center ── */
.channels-orbit {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
/* Static container — no rotation, just holds the icons */
.orbit-spin {
  position: absolute;
  inset: 0;
}

/* Each icon travels along a hardcoded circular path.
   Never rotates itself — always upright. */
.orbit-icon {
  --orbit-radius: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px;
  animation: orbit-circle 30s linear infinite;
}
/* 24-step circle (every 15°) — smooth and reliable in every browser */
@keyframes orbit-circle {
  0%      { transform: translate(0,                                       calc(-1 * var(--orbit-radius))); }
  4.167%  { transform: translate(calc(0.2588 * var(--orbit-radius)),      calc(-0.9659 * var(--orbit-radius))); }
  8.333%  { transform: translate(calc(0.5 * var(--orbit-radius)),         calc(-0.8660 * var(--orbit-radius))); }
  12.5%   { transform: translate(calc(0.7071 * var(--orbit-radius)),      calc(-0.7071 * var(--orbit-radius))); }
  16.667% { transform: translate(calc(0.8660 * var(--orbit-radius)),      calc(-0.5 * var(--orbit-radius))); }
  20.833% { transform: translate(calc(0.9659 * var(--orbit-radius)),      calc(-0.2588 * var(--orbit-radius))); }
  25%     { transform: translate(var(--orbit-radius),                    0); }
  29.167% { transform: translate(calc(0.9659 * var(--orbit-radius)),      calc(0.2588 * var(--orbit-radius))); }
  33.333% { transform: translate(calc(0.8660 * var(--orbit-radius)),      calc(0.5 * var(--orbit-radius))); }
  37.5%   { transform: translate(calc(0.7071 * var(--orbit-radius)),      calc(0.7071 * var(--orbit-radius))); }
  41.667% { transform: translate(calc(0.5 * var(--orbit-radius)),         calc(0.8660 * var(--orbit-radius))); }
  45.833% { transform: translate(calc(0.2588 * var(--orbit-radius)),      calc(0.9659 * var(--orbit-radius))); }
  50%     { transform: translate(0,                                       var(--orbit-radius)); }
  54.167% { transform: translate(calc(-0.2588 * var(--orbit-radius)),     calc(0.9659 * var(--orbit-radius))); }
  58.333% { transform: translate(calc(-0.5 * var(--orbit-radius)),        calc(0.8660 * var(--orbit-radius))); }
  62.5%   { transform: translate(calc(-0.7071 * var(--orbit-radius)),     calc(0.7071 * var(--orbit-radius))); }
  66.667% { transform: translate(calc(-0.8660 * var(--orbit-radius)),     calc(0.5 * var(--orbit-radius))); }
  70.833% { transform: translate(calc(-0.9659 * var(--orbit-radius)),     calc(0.2588 * var(--orbit-radius))); }
  75%     { transform: translate(calc(-1 * var(--orbit-radius)),          0); }
  79.167% { transform: translate(calc(-0.9659 * var(--orbit-radius)),     calc(-0.2588 * var(--orbit-radius))); }
  83.333% { transform: translate(calc(-0.8660 * var(--orbit-radius)),     calc(-0.5 * var(--orbit-radius))); }
  87.5%   { transform: translate(calc(-0.7071 * var(--orbit-radius)),     calc(-0.7071 * var(--orbit-radius))); }
  91.667% { transform: translate(calc(-0.5 * var(--orbit-radius)),        calc(-0.8660 * var(--orbit-radius))); }
  95.833% { transform: translate(calc(-0.2588 * var(--orbit-radius)),     calc(-0.9659 * var(--orbit-radius))); }
  100%    { transform: translate(0,                                       calc(-1 * var(--orbit-radius))); }
}

/* Stagger icons evenly around the circle via negative delays
   (7 icons × 4.2857s each = 30s total cycle) */
.orbit-icon:nth-child(1) { animation-delay: 0s; }
.orbit-icon:nth-child(2) { animation-delay: -4.2857s; }
.orbit-icon:nth-child(3) { animation-delay: -8.5714s; }
.orbit-icon:nth-child(4) { animation-delay: -12.8571s; }
.orbit-icon:nth-child(5) { animation-delay: -17.1429s; }
.orbit-icon:nth-child(6) { animation-delay: -21.4286s; }
.orbit-icon:nth-child(7) { animation-delay: -25.7143s; }

/* Icon visible content — completely static, always upright */
.orbit-icon-inner {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  color: var(--brand, #1e40af);
  box-shadow:
    0 8px 20px rgba(30, 64, 175, 0.20),
    inset 0 -2px 4px rgba(30, 64, 175, 0.08);
}
.orbit-icon-inner.gradient-icon {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 35%, #d62976 65%, #962fbf 100%);
  color: #fff;
}

/* Center pedestal — dark gradient circle, logo only */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  height: 36%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  border-radius: 50%;
  box-shadow:
    0 24px 54px rgba(9, 28, 60, 0.40),
    0 0 0 8px #fff,
    0 0 0 10px rgba(147, 197, 253, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-display);
  z-index: 3;
}

/* Bottom features strip */
.channels-features {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 999px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 18px;
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.06);
  flex-wrap: wrap;
}
.channels-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #000;
  letter-spacing: -0.1px;
}
.channels-feature i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--feat-bg, #eaf2ff);
  color: var(--feat-color, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  flex-shrink: 0;
}
.feat-multi   { --feat-bg: #eaf2ff; --feat-color: #2563eb; }
.feat-data    { --feat-bg: #ffe9f1; --feat-color: #d62976; }
.feat-reach   { --feat-bg: #ffe5ee; --feat-color: #ec4899; }
.feat-growth  { --feat-bg: #fff5e0; --feat-color: #f59e0b; }

/* Numbered ribbon */
.channel-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  background: var(--channel-color, #1e40af);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 0 0 9px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-radius: 18px 0 0 0;
}

/* Icon circle */
.channel-icon {
  width: 76px;
  height: 76px;
  background: var(--channel-bg, #f3f4f6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  color: var(--channel-color, #1e40af);
  margin: 10px 0 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}
.channel-icon.channel-icon-gradient {
  background: linear-gradient(
    135deg,
    #feda75 0%,
    #fa7e1e 35%,
    #d62976 65%,
    #962fbf 100%
  );
  color: #fff;
}

.channel-name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--channel-color, #1e40af);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.channel-bar {
  display: block;
  width: 30px;
  height: 2.5px;
  background: var(--channel-color, #1e40af);
  border-radius: 2px;
  margin-bottom: 14px;
}
.channel-desc {
  font-size: var(--fs-small);
  color: #1a1a1a;
  line-height: 1.55;
}

/* Platform colors */
.channel-google {
  --channel-color: #4285f4;
  --channel-bg: #eaf2ff;
}
.channel-meta {
  --channel-color: #1877f2;
  --channel-bg: #e8f1ff;
}
.channel-instagram {
  --channel-color: #d62976;
  --channel-bg: #ffe9f1;
}
.channel-linkedin {
  --channel-color: #0a66c2;
  --channel-bg: #e7f1ff;
}
.channel-youtube {
  --channel-color: #ff0000;
  --channel-bg: #ffe8e8;
}
.channel-seo {
  --channel-color: #10b981;
  --channel-bg: #dffaee;
}
.channel-email {
  --channel-color: #8b5cf6;
  --channel-bg: #efe9ff;
}

/* Special CTA card (8th slot) */
.channel-cta {
  position: relative;
  background: linear-gradient(
    135deg,
    #a78bfa 0%,
    #8b5cf6 50%,
    #7c3aed 100%
  );
  border-radius: 18px;
  padding: 22px 22px 22px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.3);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.channel-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(124, 58, 237, 0.38);
}
.channel-cta-content {
  position: relative;
  z-index: 2;
}
.channel-cta h3 {
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  color: #fff;
}
.channel-cta-desc {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 70%;
}
.channel-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #7c3aed;
  font-weight: 800;
  font-size: var(--fs-small);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.channel-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
.channel-cta-btn-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
}

/* Decorative floating icons in CTA card */
.channel-cta-deco {
  position: absolute;
  z-index: 1;
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  animation: float-y 4s ease-in-out infinite;
}
.channel-cta-deco-megaphone {
  bottom: 16px;
  right: 14px;
  width: 78px;
  height: 78px;
  font-size: var(--fs-h2);
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}
.channel-cta-deco-heart {
  top: 14px;
  right: 18px;
  color: #fda4af;
  background: #fff;
  animation-delay: 0.4s;
}
.channel-cta-deco-chart {
  top: 56px;
  right: 8px;
  color: #c4b5fd;
  background: #fff;
  width: 32px;
  height: 32px;
  font-size: var(--fs-body);
  animation-delay: 0.8s;
}
.channel-cta-deco-user {
  bottom: 96px;
  right: 70px;
  color: #8b5cf6;
  background: #fff;
  width: 30px;
  height: 30px;
  font-size: var(--fs-tiny);
  animation-delay: 1.2s;
}

/* Responsive — Channels (orbital layout) */
@media (max-width: 1200px) {
  .channels-wrap { padding: 52px 0 52px; }
  .channels-inner { padding: 0; }
  .channels-title { font-size: var(--fs-h1); }
  .channels-content { gap: 22px; }
  .channels-orbit { max-width: 420px; }
  .orbit-icon { --orbit-radius: 180px; }
}
@media (max-width: 1100px) {
  .channels-wrap { padding: 48px 0 48px; }
  .channels-inner { padding: 0; }
  .channels-title { font-size: var(--fs-h2); letter-spacing: -1px; }
  .channels-content { gap: 18px; }
  .channels-orbit { max-width: 360px; }
  .orbit-icon { --orbit-radius: 156px; width: 52px; height: 52px; margin: -26px; }
  .orbit-icon-inner { font-size: var(--fs-h3); border-radius: 12px; }
  .platform-card { padding: 14px 14px 14px 20px; gap: 12px; }
  .platform-icon { width: 44px; height: 44px; font-size: var(--fs-h3); }
  .platform-body h3 { font-size: var(--fs-body); }
  .platform-body p { font-size: var(--fs-tiny); }
  .platform-stat { font-size: var(--fs-tiny); padding: 4px 9px; }
}
@media (max-width: 1024px) {
  .channels-wrap { padding: 44px 0 44px; }
  .channels-inner { padding: 0; }
  /* Stack: cards row 1 (left+right), orbit row 2 */
  .channels-content {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .channels-orbit {
    grid-column: 1 / -1;
    order: 0;
    max-width: 380px;
  }
  .channels-col-left { order: 1; }
  .channels-col-right { order: 2; }
}
@media (max-width: 768px) {
  .channels-wrap { padding: 40px 0 40px; }
  .channels-inner { padding: 0; }
  .channels-header { margin-bottom: 28px; }
  .channels-title { font-size: var(--fs-h3); letter-spacing: -0.7px; }
  .channels-subtitle { font-size: var(--fs-body-lg); }
  .channels-subtitle br { display: none; }

  .channels-content {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  .channels-col-left { order: 2; }
  .channels-orbit { order: 1; max-width: 320px; }
  .channels-col-right { order: 3; }
  .orbit-icon { --orbit-radius: 134px; width: 48px; height: 48px; margin: -24px; }
  .orbit-icon-inner { font-size: var(--fs-body-lg); border-radius: 10px; }
  .orbit-center { font-size: var(--fs-h1); }

  .channels-features {
    padding: 14px 18px;
    gap: 12px 16px;
    justify-content: center;
    border-radius: 16px;
  }
  .channels-feature { font-size: var(--fs-tiny); }
  .channels-feature i { width: 28px; height: 28px; font-size: var(--fs-tiny); }
}
@media (max-width: 480px) {
  .channels-wrap { padding: 32px 0 32px; }
  .channels-inner { padding: 0; }
  .channels-title { font-size: var(--fs-h3); letter-spacing: -0.5px; }
  .channels-subtitle { font-size: var(--fs-small); }

  .channels-orbit { max-width: 280px; }
  .orbit-icon { --orbit-radius: 116px; width: 42px; height: 42px; margin: -21px; }
  .orbit-icon-inner { font-size: var(--fs-body-lg); border-radius: 9px; }
  .orbit-center { font-size: var(--fs-h2); }

  .platform-card { padding: 12px 12px 12px 14px; gap: 10px; border-radius: 14px; }
  .platform-icon { width: 40px; height: 40px; font-size: var(--fs-body-lg); }
  .platform-body h3 { font-size: var(--fs-body); }
  .platform-body p { font-size: var(--fs-tiny); line-height: 1.45; margin-bottom: 8px; }
  .platform-stat { font-size: var(--fs-tiny); padding: 4px 8px; }

  .channels-features {
    padding: 12px 14px;
    gap: 10px 14px;
    border-radius: 16px;
  }
  .channels-feature { font-size: var(--fs-tiny); gap: 8px; }
  .channels-feature i { width: 26px; height: 26px; font-size: var(--fs-tiny); }
}

/* ══════════════════════════════════════
   CTA SECTION (compact)
══════════════════════════════════════ */
.cta-wrap {
  background: #fff;
  padding: 40px 0 40px;
  position: relative;
}
.cta-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.cta-card {
  position: relative;
  background:
    /* SVG dot grid texture */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><circle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.10'/></svg>"),
    /* Diagonal sheen lines */
    repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 64px,
        rgba(255, 255, 255, 0.04) 64px,
        rgba(255, 255, 255, 0.04) 65px
      ),
    /* Cyan glow top-left */
    radial-gradient(
        circle at 12% 25%,
        rgba(147, 197, 253, 0.3),
        transparent 50%
      ),
    /* Blue glow bottom-right */
    radial-gradient(
        circle at 88% 80%,
        rgba(37, 99, 235, 0.24),
        transparent 55%
      ),
    /* Center vignette */
    radial-gradient(
        ellipse at center,
        rgba(30, 64, 175, 0.4) 0%,
        transparent 65%
      ),
    /* Base navy gradient */
    linear-gradient(135deg, #1e40af 0%, #0a1f4d 55%, #091c3c 100%);
  background-size:
    26px 26px,
    auto,
    auto,
    auto,
    auto,
    auto;
  border-radius: 22px;
  padding: 36px 48px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(30, 64, 175, 0.26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  isolation: isolate;
}

/* Floating soft blobs */
.cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.cta-blob-1 {
  width: 260px;
  height: 260px;
  background: rgba(147, 197, 253, 0.3);
  top: -80px;
  left: -50px;
  animation: cta-drift-a 14s ease-in-out infinite;
}
.cta-blob-2 {
  width: 240px;
  height: 240px;
  background: rgba(37, 99, 235, 0.28);
  bottom: -70px;
  right: -40px;
  animation: cta-drift-b 16s ease-in-out infinite;
}
@keyframes cta-drift-a {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 20px);
  }
}
@keyframes cta-drift-b {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-30px, -20px);
  }
}

.cta-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

/* Live badge */
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cta-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  animation: cta-pulse 1.6s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
  }
}

/* Heading */
.cta-heading {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.9px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.cta-heading-accent {
  background: linear-gradient(135deg, #93c5fd 0%, #fff 50%, #93c5fd 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cta-shine 5s linear infinite;
}
@keyframes cta-shine {
  to {
    background-position: 200% center;
  }
}
.cta-subtitle {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  max-width: 520px;
  font-weight: 500;
  margin: 0;
}

/* Buttons */
.cta-btns {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--fs-body);
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.1px;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease;
  white-space: nowrap;
}
.cta-btn-primary {
  background: #fff;
  color: #1e40af;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.cta-btn-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  transition: transform 0.3s ease;
}
.cta-btn-primary:hover .cta-btn-arrow {
  transform: rotate(-45deg) scale(1.08);
}

.cta-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  padding: 12px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-3px);
}
.cta-btn-play {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  flex-shrink: 0;
}

/* Responsive — CTA */
@media (max-width: 1200px) {
  .cta-wrap {
    padding: 36px 0 36px;
  }
  .cta-inner {
    padding: 0;
  }
  .cta-card {
    padding: 32px 40px;
  }
  .cta-heading {
    font-size: var(--fs-h2);
  }
}
@media (max-width: 1100px) {
  .cta-wrap {
    padding: 32px 0 32px;
  }
  .cta-inner {
    padding: 0;
  }
  .cta-card {
    padding: 28px 32px;
    gap: 24px;
  }
  .cta-heading {
    font-size: var(--fs-h3);
    letter-spacing: -0.7px;
  }
  .cta-subtitle {
    font-size: var(--fs-small);
  }
}
@media (max-width: 1024px) {
  .cta-wrap {
    padding: 30px 0 30px;
  }
  .cta-inner {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .cta-wrap {
    padding: 28px 0 28px;
  }
  .cta-inner {
    padding: 0;
  }
  .cta-card {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
    border-radius: 18px;
    gap: 18px;
  }
  .cta-heading {
    font-size: var(--fs-h3);
    letter-spacing: -0.6px;
  }
  .cta-subtitle {
    font-size: var(--fs-small);
    margin: 0 auto;
  }
  .cta-btns {
    justify-content: center;
    gap: 10px;
  }
  .cta-btn {
    font-size: var(--fs-small);
    padding: 11px 12px 11px 18px;
  }
  .cta-btn-secondary {
    padding: 11px 18px;
  }
  .cta-badge {
    font-size: var(--fs-tiny);
    padding: 5px 12px 5px 8px;
  }
}
@media (max-width: 480px) {
  .cta-wrap {
    padding: 24px 0 24px;
  }
  .cta-inner {
    padding: 0;
  }
  .cta-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .cta-heading {
    font-size: var(--fs-h3);
    letter-spacing: -0.5px;
  }
  .cta-subtitle {
    font-size: var(--fs-small);
  }
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .cta-btn,
  .cta-btn-secondary {
    justify-content: center;
    width: 100%;
  }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer-wrap {
  /* Multi-layer deep gradient — black corners, brand blue mid, with two
     radial glows for depth and a subtle dotted noise overlay */
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.32) 0%, transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(147, 197, 253, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 50% 60%, rgba(30, 64, 175, 0.45) 0%, transparent 55%),
    linear-gradient(
      135deg,
      #00050f 0%,
      #050d22 18%,
      #0a1f4a 35%,
      #1e40af 55%,
      #0a1f4a 75%,
      #050d22 92%,
      #00050f 100%
    );
  color: #cbd5e8;
  position: relative;
  overflow: hidden;
}
.footer-wrap::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(96, 165, 250, 0.28) 0%,
    rgba(96, 165, 250, 0) 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.footer-wrap::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    rgba(30, 64, 175, 0.40) 0%,
    rgba(30, 64, 175, 0) 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.footer-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 60px 56px 0;
  position: relative;
  z-index: 1;
}

/* Top section */
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* Brand column */
.footer-brand-col {
  max-width: 320px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo-box {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-logo-box span {
  color: #1e40af;
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1;
}
.footer-logo-name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}
.footer-desc {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  text-decoration: none;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}
.footer-social a:hover {
  background: #fff;
  color: #1e40af;
  transform: translateY(-3px);
  border-color: #fff;
}

/* Link columns */
.footer-col h4 {
  font-size: var(--fs-body);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: #93c5fd;
  border-radius: 2px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col ul li a {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.footer-col ul li a::before {
  content: "›";
  color: #93c5fd;
  font-size: var(--fs-body);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.footer-col ul li a:hover {
  color: #fff;
  transform: translateX(4px);
}
.footer-col ul li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contact strip (inside brand col) */
.footer-contact {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.78);
}
.footer-contact-item i {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  color: #93c5fd;
  flex-shrink: 0;
}
.footer-contact-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-item a:hover {
  color: #fff;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.65);
}
.footer-copy strong {
  color: #fff;
  font-weight: 700;
}
.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover {
  color: #fff;
}

/* Responsive — Footer */
@media (max-width: 1200px) {
  .footer-inner {
    padding: 56px 40px 0;
  }
  .footer-top {
    gap: 28px;
  }
}
@media (max-width: 1100px) {
  .footer-inner {
    padding: 48px 32px 0;
  }
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }
}
@media (max-width: 1024px) {
  .footer-inner {
    padding: 44px 28px 0;
  }
}
@media (max-width: 768px) {
  .footer-inner {
    padding: 40px 20px 0;
  }
  /* Brand col on top (full width), then link columns flow 2-up. */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding-bottom: 36px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;   /* spans both columns */
  }
  .footer-bottom {
    padding: 18px 0 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-legal {
    gap: 18px;
  }
}
@media (max-width: 480px) {
  .footer-inner {
    padding: 32px 16px 0;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    padding-bottom: 28px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
  .footer-col h4 {
    margin-bottom: 14px;
  }
  .footer-col ul li a {
    font-size: var(--fs-small);
  }
  .footer-logo-name {
    font-size: var(--fs-h3);
  }
}

/* ══════════════════════════════════════
   ANIMATIONS — professional looping
══════════════════════════════════════ */

/* Soft vertical float */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Gentle pulse glow for dark gradient icons */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.2);
  }
  50% {
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.42);
  }
}

/* Dots twinkle */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.85;
  }
}

/* CTA gradient sheen */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Scroll reveal */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Floating icons (staggered) ── */
.stat-ico,
.service-icon,
.feature-icon {
  animation: float-y 4.2s ease-in-out infinite;
  will-change: transform;
}
.service-card:nth-child(2) .service-icon {
  animation-delay: 0.35s;
}
.service-card:nth-child(3) .service-icon {
  animation-delay: 0.7s;
}
.service-card:nth-child(4) .service-icon {
  animation-delay: 1.05s;
}
.service-card:nth-child(5) .service-icon {
  animation-delay: 1.4s;
}
.service-card:nth-child(6) .service-icon {
  animation-delay: 1.75s;
}

.feature-card:nth-child(2) .feature-icon {
  animation-delay: 0.3s;
}
.feature-card:nth-child(3) .feature-icon {
  animation-delay: 0.6s;
}
.feature-card:nth-child(4) .feature-icon {
  animation-delay: 0.9s;
}
.feature-card:nth-child(5) .feature-icon {
  animation-delay: 1.2s;
}

.stat-cell:nth-child(3) .stat-ico {
  animation-delay: 0.4s;
}
.stat-cell:nth-child(5) .stat-ico {
  animation-delay: 0.8s;
}
.stat-cell:nth-child(7) .stat-ico {
  animation-delay: 1.2s;
}

/* ── Pulse-glow on dark gradient icons (feature arrow buttons only) ── */
.feature-go {
  animation: pulse-glow 3.4s ease-in-out infinite;
  will-change: box-shadow;
}
.feature-card:nth-child(2) .feature-go {
  animation-delay: 0.35s;
}
.feature-card:nth-child(3) .feature-go {
  animation-delay: 0.7s;
}
.feature-card:nth-child(4) .feature-go {
  animation-delay: 1.05s;
}

/* ── Twinkling decorative dots ── */
.services-dots span,
.wcu-dots span {
  animation: twinkle 3s ease-in-out infinite;
  will-change: opacity;
}
.services-dots span:nth-child(5n + 1) {
  animation-delay: 0s;
}
.services-dots span:nth-child(5n + 2) {
  animation-delay: 0.25s;
}
.services-dots span:nth-child(5n + 3) {
  animation-delay: 0.5s;
}
.services-dots span:nth-child(5n + 4) {
  animation-delay: 0.75s;
}
.services-dots span:nth-child(5n + 5) {
  animation-delay: 1s;
}
.wcu-dots span:nth-child(5n + 1) {
  animation-delay: 0.1s;
}
.wcu-dots span:nth-child(5n + 2) {
  animation-delay: 0.35s;
}
.wcu-dots span:nth-child(5n + 3) {
  animation-delay: 0.6s;
}
.wcu-dots span:nth-child(5n + 4) {
  animation-delay: 0.85s;
}
.wcu-dots span:nth-child(5n + 5) {
  animation-delay: 1.1s;
}

/* ── CTA banner gradient sheen ── */
.services-cta {
  background-size: 200% 200%;
  animation: gradient-shift 9s ease-in-out infinite;
}

/* ── Logo box subtle shimmer on hover ── */
.logo-box {
  transition: transform 0.3s ease;
}
.logo:hover .logo-box {
  transform: rotate(-6deg) scale(1.05);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 {
  transition-delay: 0.05s;
}
.reveal-d2 {
  transition-delay: 0.15s;
}
.reveal-d3 {
  transition-delay: 0.25s;
}
.reveal-d4 {
  transition-delay: 0.35s;
}
.reveal-d5 {
  transition-delay: 0.45s;
}
.reveal-d6 {
  transition-delay: 0.55s;
}

/* ── Card hover lift refinement ── */
.service-card,
.feature-card {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
}
.feature-card:hover .feature-icon {
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.06);
  transition: transform 0.25s ease;
}

/* ── Accessibility — respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive fixes
══════════════════════════════════════ */

/* Prevent any horizontal scroll site-wide (clip, not hidden — keeps sticky working) */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}
img,
svg {
  max-width: 100%;
}

/* ── Tablet portrait (≤900px) ── */
@media (max-width: 900px) {
  /* WCU — kill the left-shift margin everywhere when stacked */
  .wcu-content {
    margin-right: 0 !important;
  }
  .wcu-left {
    max-width: 100%;
  }
  .wcu-left img {
    max-height: none;
  }

  /* Testi cols — when grid stacks, kill the arrow-aligned padding & space-between */
  .testi-col {
    padding: 0 !important;
    justify-content: flex-start !important;
    align-self: auto !important;
    gap: 14px !important;
  }

  /* Industries CTA card handles wrapping itself */
  .channel-cta {
    justify-content: flex-start;
  }

}

/* Stats sections — perfect cross divider via centered overlay */
@media (max-width: 768px) {
  .stats-bar,
  .wcu-stats,
  .testi-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* One pseudo on the container draws BOTH lines through exact geometric center */
  .stats-bar::after,
  .wcu-stats::after,
  .testi-stats::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
      linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)) center center / 100% 1px no-repeat,
      linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)) center center / 1px 100% no-repeat;
  }

  .stat-cell,
  .wcu-stat-cell,
  .testi-stat-cell {
    width: auto !important;
    flex: 0 0 auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative;
    z-index: 1;
  }

  /* Reserve 2-line height for label so cells stay equal */
  .stat-cell > div:nth-child(2),
  .wcu-stat-cell > div:nth-child(2),
  .testi-stat-cell > div:nth-child(2) {
    min-height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Hide desktop separator divs */
  .stat-sep,
  .wcu-stat-sep,
  .testi-stat-sep {
    display: none !important;
  }
}

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
  /* Channels stay 2-col, CTA card fits as a single cell like the others */
  .channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .channel-cta {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    text-align: center;
    min-height: 0;
  }
  .channel-cta-content {
    text-align: center;
  }
  .channel-cta h3 {
    font-size: var(--fs-body-lg);
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .channel-cta-desc {
    font-size: var(--fs-tiny);
    max-width: 100%;
    margin: 0 0 14px;
  }
  .channel-cta-btn {
    font-size: var(--fs-tiny);
    padding: 9px 14px;
    margin: 0 auto;
  }
  .channel-cta-deco-megaphone {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
    font-size: var(--fs-h3);
    margin: 4px auto 10px;
  }
  .channel-cta-deco-heart,
  .channel-cta-deco-chart,
  .channel-cta-deco-user {
    display: none;
  }

  /* Hero stats — already 2x2 grid, ensure no overflow */
  .stats-bar {
    padding: 16px 12px !important;
  }
  .stat-cell {
    min-width: 0;
  }
  .stat-num {
    font-size: var(--fs-h3) !important;
  }
  .stat-lbl {
    font-size: var(--fs-tiny) !important;
  }

  /* Testi avatars row — keep visible */
  .testi-card-body {
    gap: 10px;
  }

  /* CTA inside services */
  .services-cta-text h3 {
    font-size: var(--fs-body-lg);
  }

  /* FAQ items — make question text wrap */
  .faq-q span:first-child {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
  }
}

/* ── Phone (≤600px) ── */
@media (max-width: 600px) {
  /* Headline & badge tighter */
  .headline {
    font-size: var(--fs-h2) !important;
    line-height: 1.1;
  }
  .badge {
    font-size: var(--fs-tiny);
    padding: 5px 12px 5px 10px;
  }

  /* Trusted brands strip — wrap nicely */
  .brands-row {
    gap: 16px 24px;
  }
  .brand {
    font-size: var(--fs-small);
  }
  .brand i {
    font-size: var(--fs-body-lg);
  }

  /* All ".reveal" stagger delays compress on mobile */
  .reveal-d3,
  .reveal-d4,
  .reveal-d5,
  .reveal-d6 {
    transition-delay: 0.12s;
  }

  /* Channels stay 2-col on all phones — CTA shrinks to fit one cell */
  .channels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .channel-cta {
    grid-column: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 16px 12px !important;
    min-height: 0 !important;
  }
  .channel-cta-content {
    text-align: center !important;
  }
  .channel-cta h3 {
    font-size: var(--fs-body-lg) !important;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .channel-cta-desc {
    font-size: var(--fs-tiny) !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }
  .channel-cta-btn {
    font-size: var(--fs-tiny) !important;
    padding: 8px 12px !important;
    gap: 6px;
    margin: 0 auto;
  }
  .channel-cta-btn-ico {
    width: 18px;
    height: 18px;
    font-size: var(--fs-tiny);
  }
  /* Hide most decorations, keep small megaphone */
  .channel-cta-deco-heart,
  .channel-cta-deco-chart,
  .channel-cta-deco-user {
    display: none !important;
  }
  .channel-cta-deco-megaphone {
    position: static !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    font-size: var(--fs-h3) !important;
    margin: 4px auto 10px !important;
  }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
  /* Nav logo tightens */
  .logo-name {
    font-size: var(--fs-body-lg);
  }
  .logo-box {
    width: 32px;
    height: 32px;
  }
  .logo-box span {
    font-size: var(--fs-body-lg);
  }

  /* Hero headline — wider and bigger on mobile */
  .hero-left {
    width: 100% !important;
    padding: 0 !important;
  }
  .headline {
    font-size: var(--fs-h2) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.7px !important;
  }
  .hl-blue {
    padding-bottom: 8px;
  }

  /* HERO STATS — keep 2x2 grid on phone (not 1-col) */
  .stats-bar {
    flex-wrap: wrap !important;
    padding: 14px 10px !important;
  }
  .stats-bar .stat-cell {
    width: 50% !important;
    flex: none !important;
    padding: 12px 8px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  .stats-bar .stat-sep {
    display: none !important;
  }

  .stat-num {
    font-size: var(--fs-body-lg) !important;
  }
  .stat-lbl {
    font-size: var(--fs-tiny) !important;
  }
  .stat-ico {
    width: 36px !important;
    height: 36px !important;
    font-size: var(--fs-body) !important;
  }

  /* Channels — 2 cards stay 2-col, CTA spans full */
  .channel-cta {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
  }
  .channel-cta-content {
    text-align: center;
  }
  .channel-cta-desc {
    max-width: 100%;
    margin-right: 0;
  }
  .channel-cta-btn {
    margin-left: auto;
    margin-right: auto;
  }
  .channel-cta-deco-megaphone {
    position: static;
    transform: none;
    margin: 6px auto 12px;
    animation: float-y 4s ease-in-out infinite;
  }

  /* WCU bottom stats — keep 2x2 */
  .wcu-stats {
    padding: 16px 12px !important;
  }
  .wcu-stats .wcu-stat-cell {
    width: 50% !important;
    flex: none !important;
  }
  .wcu-stat-num {
    font-size: var(--fs-body-lg) !important;
  }
  .wcu-stat-lbl {
    font-size: var(--fs-tiny) !important;
  }

  /* Testi stats — keep 2x2 */
  .testi-stats .testi-stat-cell {
    width: 50% !important;
    flex: none !important;
    padding: 10px 6px !important;
  }
  .testi-stat-num {
    font-size: var(--fs-body-lg) !important;
  }
  .testi-stat-lbl {
    font-size: var(--fs-tiny) !important;
  }

  /* Testi heading — ensure properly centered */
  .testi-header {
    text-align: center !important;
  }
  .testi-title {
    text-align: center;
  }
  .testi-title-blue {
    display: inline-block;
  }
  .testi-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Testi brands — center-justified wrap */
  .testi-brands-row {
    gap: 14px 20px !important;
    justify-content: center;
  }

  /* Footer social — stay on one line */
  .footer-social a {
    width: 34px;
    height: 34px;
    font-size: var(--fs-small);
  }

  /* CTA buttons — full width stack */
  .cta-btns {
    width: 100%;
  }
  .cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Tiny phone (≤360px) ── */
@media (max-width: 360px) {
  /* Industries can go single column on tiny screens, channels stay 2-col */
  .industries-row-3col {
    grid-template-columns: 1fr !important;
  }
  .channels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .channel-cta {
    grid-column: auto !important;
  }

  /* Tighter padding on all inner wrappers */
  .hero-inner,
  .services-inner,
  .wcu-inner,
  .industries-inner,
  .testi-inner,
  .faq-inner,
  .channels-inner,
  .cta-inner,
  .footer-inner,
  .trusted-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Section titles all match */
  .services-title,
  .wcu-title,
  .industries-title,
  .testi-title,
  .faq-title,
  .channels-title {
    font-size: var(--fs-h3) !important;
    letter-spacing: -0.4px !important;
  }
  /* Hero headline bigger + wider even on tiny phones */
  .headline {
    font-size: var(--fs-h2) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
  }
  .hero-left {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Stats — DO NOT go to 1 column, keep 2x2 */
  .stats-bar .stat-cell,
  .wcu-stats .wcu-stat-cell,
  .testi-stats .testi-stat-cell {
    width: 50% !important;
    flex: none !important;
  }
  .stat-num,
  .wcu-stat-num,
  .testi-stat-num {
    font-size: var(--fs-body-lg) !important;
  }
  .stat-lbl,
  .wcu-stat-lbl,
  .testi-stat-lbl {
    font-size: var(--fs-tiny) !important;
  }
  .stat-ico,
  .wcu-stat-ico,
  .testi-stat-ico {
    width: 32px !important;
    height: 32px !important;
    font-size: var(--fs-small) !important;
  }

  /* Subtitles tighter */
  .services-subtitle,
  .wcu-subtitle,
  .industries-subtitle,
  .testi-subtitle,
  .faq-subtitle,
  .channels-subtitle {
    font-size: var(--fs-tiny) !important;
  }

  /* Reveal effect off to prevent jumpy entrances on tiny screens */
  .reveal {
    transition-duration: 0.4s;
  }

  /* Industries CTA / Services CTA — column */
  .services-cta-btn {
    font-size: var(--fs-tiny);
    padding: 9px 14px;
  }

  /* Footer columns single */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-logo-name {
    font-size: var(--fs-body-lg);
  }
}

/* ══════════════════════════════════════
   STATS BARS — Hero is white with running glow border;
   WCU + Testi stay dark with shifting gradient
══════════════════════════════════════ */

/* ── HERO stats bar: white card with animated blue gradient glow border ── */
.stats-bar {
  background: #fff !important;
  border: 1px solid transparent !important;
  position: relative;
  box-shadow:
    0 12px 36px rgba(30, 64, 175, 0.10),
    0 4px 14px rgba(0, 0, 0, 0.04) !important;
  animation: fadeInUp 0.6s ease 0.52s forwards !important;
}
/* Hollow gradient ring drawn with mask-composite */
.stats-bar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    120deg,
    rgba(30, 64, 175, 0.10) 0%,
    rgba(96, 165, 250, 0.85) 20%,
    rgba(30, 64, 175, 0.95) 35%,
    rgba(147, 197, 253, 0.50) 50%,
    rgba(30, 64, 175, 0.95) 65%,
    rgba(96, 165, 250, 0.85) 80%,
    rgba(30, 64, 175, 0.10) 100%
  );
  background-size: 250% 250%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: stats-border-flow 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes stats-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}
/* Slightly thicker glow border on smaller screens so it remains visible */
@media (max-width: 768px) {
  .stats-bar::before { padding: 2px; }
}
@media (max-width: 480px) {
  .stats-bar::before { padding: 2.25px; }
}

/* ── WCU / Testi stats stay dark with shifting gradient ── */
.wcu-stats,
.testi-stats {
  background: linear-gradient(
    120deg,
    #1e40af 0%,
    #1e3a8a 22%,
    #091c3c 50%,
    #1e3a8a 78%,
    #1e40af 100%
  ) !important;
  background-size: 240% 240% !important;
  border: 1px solid rgba(147, 197, 253, 0.18) !important;
  box-shadow:
    0 12px 36px rgba(9, 28, 60, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.08) !important;
  animation: stats-bg-shift 9s ease-in-out infinite !important;
}
@keyframes stats-bg-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Hero stats text: dark on white; WCU/Testi stay light on dark */
.stat-num {
  color: #000 !important;
}
.stat-lbl {
  color: #1a1a1a !important;
}
.wcu-stat-num,
.testi-stat-num {
  color: #fff !important;
}
.wcu-stat-lbl,
.testi-stat-lbl {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Hero stats icons: blue gradient on white card — white glyph */
.stat-ico {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30);
}
/* WCU + Testi icons: light gradient so they pop on dark navy bar */
.wcu-stat-ico,
.testi-stat-ico {
  background: linear-gradient(
    135deg,
    #e8edf6 0%,
    #c7d4ec 100%
  ) !important;
  color: #1e40af !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Dividers on dark bg — light translucent lines */
.stat-sep,
.wcu-stat-sep,
.testi-stat-sep {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* (Old border-based mobile dividers removed — replaced by ::after overlay) */

/* ══════════════════════════════════════
   ANIMATED SECTION TAG STYLE
   — deep navy shifting bg + sweeping shimmer + gentle border pulse
══════════════════════════════════════ */
.badge,
.services-tag,
.wcu-tag,
.industries-tag,
.testi-tag,
.channels-tag,
.faq-tag,
.proc-tag,
.pg-tag,
.quote-modal-tag {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    #091c3c 0%,
    #1e40af 25%,
    #3b82f6 50%,
    #1e40af 75%,
    #091c3c 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat !important;
  border: 1px solid rgba(147, 197, 253, 0.45) !important;
  color: #fff !important;
  font-size: var(--fs-small) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 8px 18px !important;
  animation:
    tag-bg-shift 3s linear infinite,
    tag-border-pulse 3s ease-in-out infinite !important;
}

/* Force stars and inner glyphs to white */
.badge .badge-star,
.services-tag-star,
.wcu-tag-star,
.industries-tag-star,
.testi-tag-star,
.channels-tag-star,
.faq-tag-star,
.proc-tag-star,
.pg-tag-star,
.quote-modal-tag-star {
  color: #93c5fd !important;
}

@keyframes tag-bg-shift {
  0%   { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}

/* Gently pulsing border + outer glow */
@keyframes tag-border-pulse {
  0%,
  100% {
    border-color: rgba(147, 197, 253, 0.35);
    box-shadow: 0 0 0 0 rgba(30, 64, 175, 0);
  }
  50% {
    border-color: rgba(147, 197, 253, 0.85);
    box-shadow: 0 0 16px 0 rgba(30, 64, 175, 0.45);
  }
}

/* Sweeping light highlight that runs continuously across the pill */
.badge::after,
.services-tag::after,
.wcu-tag::after,
.industries-tag::after,
.testi-tag::after,
.channels-tag::after,
.faq-tag::after,
.proc-tag::after,
.pg-tag::after,
.quote-modal-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: tag-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tag-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .badge,
  .services-tag,
  .wcu-tag,
  .industries-tag,
  .testi-tag,
  .channels-tag,
  .faq-tag,
  .pg-tag,
  .quote-modal-tag {
    animation: none;
  }
  .badge::after,
  .services-tag::after,
  .wcu-tag::after,
  .industries-tag::after,
  .testi-tag::after,
  .channels-tag::after,
  .faq-tag::after,
  .process-tag::after,
  .contact-tag::after,
  .pg-tag::after,
  .quote-modal-tag::after {
    animation: none;
    opacity: 0;
  }
}

/* ══════════════════════════════════════
   OUR PROCESS SECTION — Pinned scroll (scrollbar moves, section sticks)
══════════════════════════════════════ */
.process-track {
  position: relative;
  /* 5 steps × ~50vh of scroll distance each + 1vh sticky window */
  height: 350vh;
  background: #ffffff;
}
.process-wrap {
  background: #ffffff;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.process-pin-inner {
  width: 100%;
  width: calc(100% - var(--side-gap));
  padding: 18px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* Header inside the sticky frame — compact */
.process-header {
  text-align: center;
  position: relative;
  z-index: 2;
}
.process-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: #000;
  letter-spacing: -0.7px;
  margin: 8px 0 10px;
  line-height: 1.1;
}
.process-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.process-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.process-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 600px;
  margin: 6px auto 0;
  font-weight: 500;
}

/* 2-column split — both columns swap together based on scroll */
.process-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

/* LEFT side container */
.process-split-left {
  position: relative;
  min-height: 360px;
}
.process-pin-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.process-tag-star { font-size: var(--fs-tiny); line-height: 1; }

/* Each step is absolutely positioned, only active visible */
.process-pin-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.process-pin-step.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Big faded step number watermark behind icon.
   Decorative visual — font-size stays inside the locked scale (--fs-display),
   scaled up via transform so we don't introduce an off-scale px value. */
.process-pin-num {
  font-size: var(--fs-display);
  font-weight: 900;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.22) 0%, rgba(30, 64, 175, 0) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.85;
  letter-spacing: -5px;
  transform: scale(2.3);
  transform-origin: left top;
  margin: -10px 0 24px;
  position: relative;
  z-index: 0;
  width: fit-content;
}

/* Icon — compact dark gradient square with rotating dashed ring */
.process-pin-icon {
  width: 82px;
  height: 82px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  box-shadow:
    0 16px 36px rgba(30, 64, 175, 0.32),
    0 0 0 6px #fff,
    0 0 0 7px rgba(147, 197, 253, 0.45);
}
/* Dashed rotating ring around the icon */
.process-pin-icon::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 28px;
  border: 1.5px dashed rgba(30, 64, 175, 0.35);
  animation: process-ring-spin 16s linear infinite;
}
@keyframes process-ring-spin {
  to { transform: rotate(360deg); }
}

.process-pin-step h3 {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: #000;
  letter-spacing: -1.2px;
  line-height: 1.05;
  margin-bottom: 14px;
  text-align: left;
}
.process-pin-step p {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 0 20px;
  font-weight: 500;
  text-align: left;
}
.process-pin-step p strong {
  color: #1e40af;
  font-weight: 700;
}
.process-pin-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.process-pin-pills span {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #1e40af;
  background: #eef2ff;
  border: 1px solid rgba(147, 197, 253, 0.45);
  padding: 5px 13px;
  border-radius: 999px;
  letter-spacing: -0.1px;
}

/* RIGHT side container — absolute cards swap in place */
.process-split-right {
  position: relative;
  min-height: 360px;
}
.process-side-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow:
    0 6px 18px rgba(15, 15, 45, 0.05),
    0 18px 42px rgba(30, 64, 175, 0.12);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.process-side-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  border-color: rgba(147, 197, 253, 0.7);
}
.process-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-tiny);
  font-weight: 800;
  color: #1e40af;
  background: #eef2ff;
  border: 1px solid rgba(147, 197, 253, 0.5);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  align-self: flex-start;
  text-transform: uppercase;
}
.process-card-badge i { font-size: var(--fs-tiny); }
.process-side-card h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.process-side-card > p {
  font-size: var(--fs-body);
  color: #1a1a1a;
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: 500;
}
.process-side-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.process-side-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  color: #000;
  font-weight: 600;
  line-height: 1.45;
}
.process-side-card ul li i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  flex-shrink: 0;
  margin-top: 1px;
}
.process-card-stat {
  margin-top: auto;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(147, 197, 253, 0.10) 100%);
  border: 1px solid rgba(147, 197, 253, 0.40);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.process-card-stat-num {
  font-size: var(--fs-h2);
  font-weight: 900;
  color: #1e40af;
  letter-spacing: -0.8px;
  line-height: 1;
  flex-shrink: 0;
}
.process-card-stat-text {
  font-size: var(--fs-small);
  color: #1a1a1a;
  font-weight: 600;
  line-height: 1.4;
}
.process-card-stat-text strong { color: #000; font-weight: 800; }

/* Progress indicator below stage */
.process-pin-progress {
  width: 100%;
  max-width: 480px;
  margin-top: 28px;
}
.process-pin-bar {
  width: 100%;
  height: 4px;
  background: rgba(30, 64, 175, 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.process-pin-bar-fill {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-pin-dots {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.process-pin-dot {
  flex: 1;
  background: none;
  border: none;
  font-size: var(--fs-tiny);
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 2px 0;
  transition: color 0.3s ease;
}
.process-pin-dot::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: rgba(30, 64, 175, 0.18);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.process-pin-dot.is-active {
  color: #1e40af;
}
.process-pin-dot.is-active::before {
  background: #1e40af;
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgba(30, 64, 175, 0.15);
}
.process-pin-dot.is-done::before {
  background: #1e40af;
}

/* Responsive — Process split */
@media (max-width: 1200px) {
  .process-pin-inner { padding: 16px 0; }
  .process-title { font-size: var(--fs-h1); }
  .process-split { gap: 36px; }
  .process-pin-num { font-size: var(--fs-display); transform: scale(2); margin: -8px 0 18px; }
  .process-pin-icon { width: 72px; height: 72px; font-size: var(--fs-h2); border-radius: 20px; margin-bottom: 18px; }
  .process-pin-step h3 { font-size: var(--fs-h1); }
  .process-pin-step p { font-size: var(--fs-body-lg); }
}
@media (max-width: 1100px) {
  .process-pin-inner { padding: 14px 0; }
  .process-title { font-size: var(--fs-h3); }
  .process-split { gap: 28px; }
  .process-pin-num { font-size: var(--fs-display); transform: scale(1.7); margin: -6px 0 14px; }
  .process-pin-icon { width: 64px; height: 64px; font-size: var(--fs-h3); border-radius: 18px; margin-bottom: 16px; }
  .process-pin-icon::after { inset: -10px; border-radius: 24px; }
  .process-pin-step h3 { font-size: var(--fs-h2); letter-spacing: -0.9px; }
  .process-pin-step p { font-size: var(--fs-body); }
  .process-side-card { padding: 20px 18px; }
  .process-side-card h3 { font-size: var(--fs-h3); }
}
@media (max-width: 1024px) {
  /* Stack left + right vertically, both visible */
  .process-pin-inner { padding: 16px 0; gap: 14px; }
  .process-split { grid-template-columns: 1fr; gap: 18px; }
  .process-split-left { min-height: 240px; }
  .process-pin-stage { min-height: 240px; }
  .process-split-right { min-height: 250px; }
}
@media (max-width: 768px) {
  .process-pin-inner { padding: 12px 0; gap: 12px; }
  .process-title { font-size: var(--fs-h3); letter-spacing: -0.5px; }
  .process-subtitle { font-size: var(--fs-small); max-width: 90%; }
  .process-split { gap: 14px; }
  .process-pin-num { font-size: var(--fs-display); transform: scale(1.4); letter-spacing: -2.5px; margin: -4px 0 10px; }
  .process-pin-icon { width: 54px; height: 54px; font-size: var(--fs-h3); border-radius: 15px; margin-bottom: 12px; }
  .process-pin-icon::after { inset: -9px; border-radius: 21px; }
  .process-pin-step h3 { font-size: var(--fs-h3); letter-spacing: -0.6px; margin-bottom: 8px; }
  .process-pin-step p { font-size: var(--fs-small); max-width: none; margin-bottom: 12px; line-height: 1.55; }
  .process-pin-pills { gap: 6px; }
  .process-pin-pills span { font-size: var(--fs-tiny); padding: 3px 9px; }
  .process-split-left { min-height: 210px; }
  .process-pin-stage { min-height: 210px; }
  .process-split-right { min-height: 230px; }
  .process-side-card { padding: 16px 16px; border-radius: 14px; }
  .process-card-badge { font-size: var(--fs-tiny); padding: 4px 10px; margin-bottom: 10px; }
  .process-side-card h3 { font-size: var(--fs-body-lg); margin-bottom: 8px; }
  .process-side-card > p { font-size: var(--fs-small); margin-bottom: 12px; line-height: 1.55; }
  .process-side-card ul { gap: 6px; }
  .process-side-card ul li { font-size: var(--fs-small); gap: 9px; }
  .process-side-card ul li i { width: 18px; height: 18px; font-size: var(--fs-tiny); }
}
@media (max-width: 480px) {
  .process-pin-inner { padding: 10px 0; gap: 10px; }
  .process-title { font-size: var(--fs-h3); letter-spacing: -0.4px; }
  .process-subtitle { font-size: var(--fs-tiny); }
  .process-split { gap: 12px; }
  .process-pin-num { font-size: var(--fs-display); transform: scale(1.25); letter-spacing: -2px; margin: -3px 0 8px; }
  .process-pin-icon { width: 46px; height: 46px; font-size: var(--fs-body-lg); border-radius: 13px; margin-bottom: 10px; box-shadow: 0 12px 28px rgba(30,64,175,0.28), 0 0 0 5px #fff, 0 0 0 6px rgba(147,197,253,0.45); }
  .process-pin-icon::after { inset: -8px; border-radius: 19px; }
  .process-pin-step h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
  .process-pin-step p { font-size: var(--fs-small); margin-bottom: 10px; }
  .process-pin-pills span { font-size: var(--fs-tiny); padding: 3px 8px; }
  .process-split-left { min-height: 190px; }
  .process-pin-stage { min-height: 190px; }
  .process-split-right { min-height: 215px; }
  .process-side-card { padding: 14px 14px; }
  .process-side-card h3 { font-size: var(--fs-body-lg); }
  .process-side-card > p { font-size: var(--fs-tiny); }
  .process-side-card ul li { font-size: var(--fs-tiny); }
}

/* ══════════════════════════════════════
   CONTACT / GET A QUOTE SECTION
   — Split layout with chip-based smart form
══════════════════════════════════════ */
.contact-wrap {
  background: #fff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.contact-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}
/* Decorative bg blobs */
.contact-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.contact-blob-1 {
  width: 300px; height: 300px;
  background: rgba(147, 197, 253, 0.25);
  top: -100px; right: -80px;
}
.contact-blob-2 {
  width: 260px; height: 260px;
  background: rgba(37, 99, 235, 0.15);
  bottom: -80px; left: -60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ─── Left info column ─── */
.contact-info {
  padding-top: 20px;
}
.contact-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.contact-tag-star { font-size: var(--fs-tiny); line-height: 1; }
.contact-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin-bottom: 16px;
}
.contact-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.contact-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.contact-desc {
  font-size: var(--fs-body);
  color: #1a1a1a;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 380px;
}

/* Contact channels list */
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-channel,
.contact-channel:hover,
.contact-channel:focus,
.contact-channel:active,
.contact-channel-label,
.contact-channel-value {
  text-decoration: none;
}
.contact-channel:hover {
  border-color: rgba(147, 197, 253, 0.7);
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(30, 64, 175, 0.10);
}
.contact-channel-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  flex-shrink: 0;
}
.contact-channel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.contact-channel-label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-channel-value {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #000;
  text-decoration: none;
}
.contact-channel-value:hover { color: #1e40af; }

/* Live response badge */
.contact-response {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.30);
  color: #047857;
  font-size: var(--fs-tiny);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
}
.contact-response-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: contact-pulse 1.8s ease-in-out infinite;
}
@keyframes contact-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

/* ─── Right form card ─── */
.contact-form-card {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 22px;
  padding: 30px 30px;
  box-shadow:
    0 4px 14px rgba(15, 15, 45, 0.04),
    0 18px 50px rgba(30, 64, 175, 0.10);
  position: relative;
}
/* Form heading pill */
.contact-form-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-tiny);
  font-weight: 800;
  color: #1e40af;
  background: #e8edf6;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.contact-form-heading i { font-size: var(--fs-tiny); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: #000;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
}
.form-field label .req { color: #1e40af; margin-left: 2px; }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e8ebf2;
  border-radius: 12px;
  font-size: var(--fs-body);
  font-family: inherit;
  background: #fafbff;
  color: #000;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #1a1a1a;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #1e40af;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.form-field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

/* Service & budget chips */
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.form-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #e8ebf2;
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: #1a1a1a;
  background: #fafbff;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
.form-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-chip i {
  font-size: var(--fs-tiny);
  color: #1e40af;
  transition: color 0.2s ease;
}
.form-chip:hover {
  border-color: rgba(30, 64, 175, 0.4);
  background: #fff;
  color: #000;
}
.form-chip.is-checked,
.form-chip:has(input:checked) {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30);
}
.form-chip.is-checked i,
.form-chip:has(input:checked) i {
  color: #93c5fd;
}

/* Service dropdown */
.form-select-wrap {
  position: relative;
}
.form-select-wrap select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid #e8ebf2;
  border-radius: 12px;
  font-size: var(--fs-body);
  font-family: inherit;
  background: #fafbff;
  color: #000;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.form-select-wrap select:focus {
  outline: none;
  border-color: #1e40af;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.form-select-wrap select:invalid { color: #1a1a1a; }
.form-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  pointer-events: none;
  transition: color 0.25s ease;
}
.form-select-wrap select:focus + .form-select-caret { color: #1e40af; }

/* Submit row — privacy left, compact button right */
.form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 9px 9px 18px;
  font-size: var(--fs-small);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.1px;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.30);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.42);
  filter: brightness(1.05);
}
.form-submit-arrow {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
}

/* Tiny privacy note (now in submit row, left-aligned) */
.form-note {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  text-align: left;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.form-note a {
  color: #1e40af;
  text-decoration: none;
  font-weight: 700;
}

/* Responsive — Contact */
@media (max-width: 1200px) {
  .contact-wrap { padding: 52px 0; }
  .contact-inner { padding: 0; }
  .contact-title { font-size: var(--fs-h1); }
}
@media (max-width: 1100px) {
  .contact-wrap { padding: 48px 0; }
  .contact-inner { padding: 0; }
  .contact-title { font-size: var(--fs-h2); letter-spacing: -1px; }
  .contact-grid { gap: 28px; }
  .contact-form-card { padding: 24px 22px; }
}
@media (max-width: 1024px) {
  .contact-wrap { padding: 44px 0; }
  .contact-inner { padding: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-desc { max-width: none; }
}
@media (max-width: 768px) {
  .contact-wrap { padding: 40px 0; }
  .contact-inner { padding: 0; }
  .contact-title { font-size: var(--fs-h3); letter-spacing: -0.7px; }
  .contact-desc { font-size: var(--fs-body); }
  .contact-form-card { padding: 22px 18px; border-radius: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 14px; }
  .contact-channel { padding: 12px 14px; }
  .contact-channel-icon { width: 38px; height: 38px; font-size: var(--fs-body); }
  .contact-channel-value { font-size: var(--fs-body); }
}
@media (max-width: 480px) {
  .contact-wrap { padding: 32px 0; }
  .contact-inner { padding: 0; }
  .contact-title { font-size: var(--fs-h3); letter-spacing: -0.5px; }
  .contact-desc { font-size: var(--fs-small); }
  .contact-form-card { padding: 20px 16px; border-radius: 16px; }
  .form-field input,
  .form-field textarea,
  .form-select-wrap select { font-size: var(--fs-small); padding: 11px 12px; padding-right: 36px; }
  .form-submit { font-size: var(--fs-small); padding: 8px 8px 8px 16px; gap: 6px; }
  .form-submit-arrow { width: 20px; height: 20px; font-size: var(--fs-tiny); }
  .form-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-submit-row .form-submit { align-self: flex-end; }
  .form-note { text-align: center; }
}

/* Process & contact tags also inherit the animated tag style at the top */
.process-tag,
.contact-tag {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    #091c3c 0%,
    #1e40af 25%,
    #3b82f6 50%,
    #1e40af 75%,
    #091c3c 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat !important;
  border: 1px solid rgba(147, 197, 253, 0.45) !important;
  color: #fff !important;
  font-size: var(--fs-small) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 8px 18px !important;
  animation:
    tag-bg-shift 3s linear infinite,
    tag-border-pulse 3s ease-in-out infinite !important;
}
.process-tag .process-tag-star,
.contact-tag .contact-tag-star {
  color: #93c5fd !important;
}
.process-tag::after,
.contact-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: tag-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* ══════════════════════════════════════
   FLOATING WHATSAPP BUTTON — bottom-right, sticks to viewport on every page
══════════════════════════════════════ */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  text-decoration: none;
  box-shadow:
    0 10px 24px rgba(37, 211, 102, 0.42),
    0 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: wa-pulse 2.4s ease-in-out infinite;
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 30px rgba(37, 211, 102, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.22);
  animation-play-state: paused;
}
.wa-float i {
  line-height: 1;
}

/* Outer green ring pulse to draw attention */
@keyframes wa-pulse {
  0%, 100% {
    box-shadow:
      0 10px 24px rgba(37, 211, 102, 0.42),
      0 4px 10px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  50% {
    box-shadow:
      0 10px 24px rgba(37, 211, 102, 0.42),
      0 4px 10px rgba(0, 0, 0, 0.18),
      0 0 0 14px rgba(37, 211, 102, 0);
  }
}

@media (max-width: 480px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
}
/* ══════════════════════════════════════
   TEMPORARILY HIDDEN — Our Process section (markup preserved in index.html)
   To bring it back: delete or comment-out this rule.
══════════════════════════════════════ */
.process-track {
  display: none !important;
}
/* ══════════════════════════════════════
   OUR PROCESS SECTION (v2)
   — 5 numbered orb nodes connected by a flowing animated track
══════════════════════════════════════ */
.proc-wrap {
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.10) 0%, transparent 32%),
    radial-gradient(circle at 88% 100%, rgba(30, 64, 175, 0.10) 0%, transparent 38%),
    linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.proc-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.proc-bg-blob-1 {
  width: 360px; height: 360px;
  background: rgba(96, 165, 250, 0.22);
  top: -120px; left: -80px;
}
.proc-bg-blob-2 {
  width: 320px; height: 320px;
  background: rgba(30, 64, 175, 0.18);
  bottom: -100px; right: -80px;
}
.proc-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.proc-header { text-align: center; margin-bottom: 70px; }
.proc-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.proc-tag-star {
  color: #1e40af;
  font-size: var(--fs-tiny);
  line-height: 1;
}
.proc-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin: 0 auto 14px;
  max-width: 900px;
}
.proc-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.proc-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.proc-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}

/* ── Track container ── */
.proc-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-top: 36px;       /* room for the watermark number that overhangs */
}

/* The horizontal connecting line behind the orbs */
.proc-track-line {
  position: absolute;
  top: 100px;              /* aligns with the vertical center of the orbs */
  left: 10%;
  right: 10%;
  height: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(30, 64, 175, 0.18) 0 10px,
      transparent 10px 18px
    );
  border-radius: 2px;
  z-index: 0;
}
.proc-track-fill {
  display: block;
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(30, 64, 175, 0) 0%,
    #3b82f6 15%,
    #1e40af 50%,
    #3b82f6 85%,
    rgba(30, 64, 175, 0) 100%
  );
  background-size: 200% 100%;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(30, 64, 175, 0.40);
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  animation: proc-track-flow 4s linear infinite;
}
@keyframes proc-track-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.proc-track.is-visible .proc-track-fill { width: 100%; }

/* ── Each step ── */
.proc-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90px 18px 24px;  /* big top padding for the floating orb */
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  transition-delay: calc(var(--step-i, 0) * 0.12s);
  z-index: 1;
}
.proc-track.is-visible .proc-step {
  opacity: 1;
  transform: translateY(0);
}
.proc-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(30, 64, 175, 0.18);
  border-color: rgba(147, 197, 253, 0.65);
}
.proc-step:hover .proc-step-node {
  transform: translateX(-50%) scale(1.06);
}

/* Floating orb on top of card — sits ON the connecting line */
.proc-step-node {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  box-shadow:
    0 14px 30px rgba(9, 28, 60, 0.38),
    0 0 0 6px #fff,
    0 0 0 8px rgba(147, 197, 253, 0.40);
  z-index: 3;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: proc-orb-pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--step-i, 0) * 0.6s);
}
@keyframes proc-orb-pulse {
  0%, 100% {
    box-shadow:
      0 14px 30px rgba(9, 28, 60, 0.38),
      0 0 0 6px #fff,
      0 0 0 8px rgba(147, 197, 253, 0.40),
      0 0 0 8px rgba(30, 64, 175, 0);
  }
  50% {
    box-shadow:
      0 14px 30px rgba(9, 28, 60, 0.38),
      0 0 0 6px #fff,
      0 0 0 8px rgba(147, 197, 253, 0.60),
      0 0 0 18px rgba(30, 64, 175, 0.10);
  }
}

/* Big faded number watermark at top of card */
.proc-step-num {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  background: linear-gradient(
    180deg,
    rgba(30, 64, 175, 0.16) 0%,
    rgba(30, 64, 175, 0) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  pointer-events: none;
  z-index: 1;
}

.proc-step-title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
  position: relative;
  z-index: 2;
}
.proc-step-desc {
  font-size: var(--fs-small);
  color: #1a1a1a;
  line-height: 1.55;
  margin: 0 0 16px;
  position: relative;
  z-index: 2;
}
.proc-step-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;       /* push pill to bottom of card — aligns across all cards */
  font-size: var(--fs-tiny);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  border: 1px solid rgba(147, 197, 253, 0.45);
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: none;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(9, 28, 60, 0.30);
}
.proc-step-meta i {
  font-size: var(--fs-tiny);
  color: #fff;
  line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .proc-track { gap: 16px; padding-top: 32px; }
  .proc-step { padding: 80px 16px 22px; }
}
@media (max-width: 1024px) {
  .proc-wrap { padding: 64px 0; }
  .proc-header { margin-bottom: 56px; }
  .proc-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 18px;
    padding-top: 32px;
  }
  /* Line doesn't make sense across wrapped rows — hide it */
  .proc-track-line { display: none; }
}
@media (max-width: 768px) {
  .proc-wrap { padding: 56px 0; }
  .proc-header { margin-bottom: 48px; }
  .proc-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .proc-track { grid-template-columns: 1fr; gap: 56px; }
  .proc-step { padding: 76px 18px 22px; }
  .proc-step-node { width: 64px; height: 64px; top: -32px; font-size: var(--fs-body-lg); }
  .proc-step-num { font-size: 72px; top: 18px; }
}
/* ══════════════════════════════════════
   TESTIMONIAL WALL — Infinite vertical scroll, 3 columns, varied direction
══════════════════════════════════════ */
.twall-wrap {
  background: linear-gradient(180deg, #fafbff 0%, #fff 50%, #f7f9fd 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.twall-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.twall-blob-1 {
  width: 420px; height: 420px;
  background: rgba(96,165,250,0.20);
  top: -180px; right: -120px;
}
.twall-blob-2 {
  width: 380px; height: 380px;
  background: rgba(30,64,175,0.18);
  bottom: -180px; left: -100px;
}
.twall-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header — same pattern as every other section */
.twall-header { text-align: center; margin-bottom: 48px; }
.twall-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.twall-tag-star { color: #1e40af; font-size: var(--fs-tiny); line-height: 1; }
.twall-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
  color: #000;
  letter-spacing: -1.2px;
  margin: 0 auto 14px;
  max-width: 900px;
}
.twall-title-blue { color: #1e40af; }
.twall-subtitle {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
}

/* ── Stage: 3-column grid with masked top & bottom edges ── */
.twall-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  height: 620px;
  /* Mask out the top + bottom 90px so cards fade in/out as they enter/leave */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
          mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

/* Column wrapper — clips its overflowing strip */
.twall-col {
  position: relative;
  overflow: hidden;
}

/* The strip is the animated flex column. Animation translates the strip
   by exactly -50% so the duplicated set covers the gap → seamless loop. */
.twall-strip {
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: transform;
}

/* Direction variants */
.twall-col-up   .twall-strip { animation: twall-scroll-up   var(--twall-dur, 40s) linear infinite; }
.twall-col-down .twall-strip { animation: twall-scroll-down var(--twall-dur, 40s) linear infinite; }

/* All columns share the same speed — only direction differs */
.twall-col-slow,
.twall-col-medium,
.twall-col-fast { --twall-dur: 48s; }

@keyframes twall-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes twall-scroll-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* Pause on hover anywhere in the stage */
.twall-stage:hover .twall-strip { animation-play-state: paused; }

/* ── Card ── */
.twall-card {
  position: relative;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.twall-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 22px 50px rgba(30, 64, 175, 0.18);
  border-color: rgba(147, 197, 253, 0.6);
}
.twall-card-accent {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  border-color: rgba(147, 197, 253, 0.30);
}
.twall-card-accent .twall-quote { color: rgba(255, 255, 255, 0.94); }
.twall-card-accent .twall-meta strong { color: #fff; }
.twall-card-accent .twall-meta span { color: rgba(255, 255, 255, 0.72); }
.twall-card-accent .twall-quote-mark { color: rgba(147, 197, 253, 0.55); }
.twall-card-accent .twall-stars i { color: #fcd34d; }

/* Big decorative quote mark */
.twall-quote-mark {
  position: absolute;
  top: -2px;
  right: 14px;
  font-size: 60px;
  font-weight: 900;
  color: rgba(30, 64, 175, 0.14);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
  user-select: none;
}

.twall-quote {
  font-size: var(--fs-body);
  color: #1a1a1a;
  line-height: 1.55;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.twall-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.twall-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ava, linear-gradient(135deg, #1e40af, #091c3c));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.twall-meta { display: flex; flex-direction: column; min-width: 0; }
.twall-meta strong {
  font-size: var(--fs-small);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.twall-meta span {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  margin-top: 2px;
}

.twall-stars {
  position: absolute;
  bottom: 18px;
  right: 18px;
  display: flex;
  gap: 2px;
  font-size: 10px;
}
.twall-stars i { color: #f59e0b; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .twall-wrap { padding: 64px 0; }
  .twall-stage { grid-template-columns: repeat(2, 1fr); height: 580px; gap: 18px; }
  /* Hide column 3 (fastest) on tablet to keep the layout balanced */
  .twall-stage .twall-col:nth-child(3) { display: none; }
  /* Tablet — speed up scroll since the stage is shorter */
  .twall-col-slow,
  .twall-col-medium,
  .twall-col-fast { --twall-dur: 32s; }
}
@media (max-width: 600px) {
  .twall-wrap { padding: 56px 0; }
  .twall-header { margin-bottom: 36px; }
  .twall-stage { grid-template-columns: 1fr; height: 520px; }
  .twall-stage .twall-col:nth-child(2) { display: none; }
  .twall-card { padding: 18px 18px 16px; }
  .twall-quote-mark { font-size: 50px; right: 10px; }
  /* Mobile — faster scroll so testimonials feel alive on a single column */
  .twall-col-slow,
  .twall-col-medium,
  .twall-col-fast { --twall-dur: 22s; }
}
/* ══════════════════════════════════════
   TEMPORARILY HIDDEN — Trusted Brands strip
   (markup preserved in index.html — delete or comment this rule to restore)
══════════════════════════════════════ */
.trusted-wrap { display: none !important; }
/* ══════════════════════════════════════
   BRAND PILLAR CARDS — reuses .testi-card grid + center pedestal
══════════════════════════════════════ */
.testi-card-pillar .pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  flex-shrink: 0;
  box-shadow:
    0 8px 20px rgba(30, 64, 175, 0.32),
    0 0 0 4px #fff,
    0 0 0 5px rgba(147, 197, 253, 0.40);
}
.testi-card-pillar .pillar-title {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.testi-card-pillar .pillar-desc {
  font-size: var(--fs-small);
  color: #1a1a1a;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

/* Hide the old "trusted brands" strip — testimonial-coded, doesn't fit pillars */
.testi-brands { display: none !important; }
/* ══════════════════════════════════════
   UNDERLINE SVG POSITIONING — adds the squiggle to sections that were missing it
══════════════════════════════════════ */
.services-title-blue,
.wcu-title-blue,
.faq-title-blue,
.twall-title-blue {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.services-title-blue svg,
.wcu-title-blue svg,
.faq-title-blue svg,
.twall-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
/* ══════════════════════════════════════
   PROMISE STRIP — short transition between Hero and Services
══════════════════════════════════════ */
.promise-wrap {
  background:
    radial-gradient(circle at 10% 50%, rgba(96, 165, 250, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(30, 64, 175, 0.10) 0%, transparent 40%),
    linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(30, 64, 175, 0.06);
  border-bottom: 1px solid rgba(30, 64, 175, 0.06);
}
.promise-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.promise-glow-1 {
  width: 280px; height: 280px;
  background: rgba(96, 165, 250, 0.22);
  top: -120px; left: -80px;
}
.promise-glow-2 {
  width: 240px; height: 240px;
  background: rgba(30, 64, 175, 0.20);
  bottom: -120px; right: -60px;
}

.promise-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.promise-content {
  flex: 1;
  min-width: 0;
}

/* Tag — inherits animated dark gradient from shared section-tag style */
.promise-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e8edf6;
  color: #1e40af;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.promise-tag-star {
  color: #1e40af;
  font-size: var(--fs-tiny);
  line-height: 1;
}

.promise-title {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.15;
  color: #000;
  letter-spacing: -0.8px;
  margin: 0;
  max-width: 760px;
}
.promise-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.promise-title-blue svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* CTA pill — white card with blue text + arrow */
.promise-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #1e40af;
  font-size: var(--fs-body);
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(30, 64, 175, 0.18);
  box-shadow: 0 8px 22px rgba(30, 64, 175, 0.10);
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.promise-cta:hover {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(30, 64, 175, 0.30);
}
.promise-cta i {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  transition: background 0.25s ease, color 0.25s ease;
}
.promise-cta:hover i {
  background: #fff;
  color: #1e40af;
}

/* Responsive */
@media (max-width: 900px) {
  .promise-wrap { padding: 44px 0; }
  .promise-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .promise-title { max-width: none; }
  .promise-cta { align-self: stretch; justify-content: center; }
}
@media (max-width: 480px) {
  .promise-wrap { padding: 36px 0; }
  .promise-title { font-size: var(--fs-h3); letter-spacing: -0.4px; }
  .promise-glow { display: none; }
}
/* ══════════════════════════════════════
   INDUSTRIES MARQUEE — dark bar, white items, bullet dividers, auto-scroll
══════════════════════════════════════ */
.industries-bar-wrap {
  background: linear-gradient(90deg, #050d22 0%, #0a1f4a 50%, #050d22 100%);
  padding: 18px 0;
  margin: 56px 0;       /* breathing room from Hero above and Services below */
  position: relative;
  overflow: hidden;
}

.industries-bar-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: industries-scroll 42s linear infinite;
  will-change: transform;
}
.industries-bar-wrap:hover .industries-bar-track {
  animation-play-state: paused;
}
@keyframes industries-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each industry — icon + label inline, all white */
.industries-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.industries-bar-item i {
  color: rgba(147, 197, 253, 0.95);
  font-size: var(--fs-body-lg);
  line-height: 1;
}

/* Bullet point divider — small soft glowing dot */
.industries-bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(147, 197, 253, 0.55);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.45);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .industries-bar-wrap { padding: 14px 0; }
  .industries-bar-track { gap: 22px; animation-duration: 30s; }
  .industries-bar-item { font-size: var(--fs-small); gap: 8px; }
  .industries-bar-item i { font-size: var(--fs-body); }
  .industries-bar-dot { width: 5px; height: 5px; }
}
@media (max-width: 768px) {
  .industries-bar-wrap { margin: 40px 0; }
}
@media (max-width: 480px) {
  .industries-bar-wrap { margin: 32px 0; }
  .industries-bar-track { gap: 18px; animation-duration: 24s; }
}
/* ══════════════════════════════════════
   UNIFIED BUTTON SYSTEM
   Every CTA on the site uses one shape, one icon style, one set of behaviors.
   Only the COLOR differs: primary = brand gradient bg, secondary = white pill.
══════════════════════════════════════ */

/* Shared base — applies to ALL CTA classes used across the site */
.nav-cta,
.btn-primary,
.btn-secondary,
.cta-btn-primary,
.cta-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-size: var(--fs-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease !important;
  cursor: pointer;
}

/* Trailing icon — uniform 24px circle that holds the arrow SVG */
.nav-cta .nav-cta-icon,
.btn-primary .btn-icon,
.btn-secondary .btn-icon,
.cta-btn-primary .cta-btn-arrow,
.cta-btn-secondary .cta-btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}

/* ── Primary buttons: solid brand-gradient pill, white text ── */
.nav-cta,
.btn-primary,
.cta-btn-primary {
  background: linear-gradient(135deg, #1e40af 0%, #091c3c 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.30) !important;
}
.nav-cta:hover,
.btn-primary:hover,
.cta-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(30, 64, 175, 0.40) !important;
  filter: brightness(1.06);
}
/* Primary icon — white circle ring with arrow on the dark pill */
.nav-cta .nav-cta-icon,
.btn-primary .btn-icon,
.cta-btn-primary .cta-btn-arrow {
  background: rgba(255, 255, 255, 0.18) !important;
}
.nav-cta:hover .nav-cta-icon,
.btn-primary:hover .btn-icon,
.cta-btn-primary:hover .cta-btn-arrow {
  background: rgba(255, 255, 255, 0.30) !important;
  transform: translateX(2px) !important;
}

/* ── Secondary buttons: white pill, brand-blue text & icon ── */
.btn-secondary,
.cta-btn-secondary {
  background: #fff !important;
  color: #1e40af !important;
  border: 1.5px solid rgba(30, 64, 175, 0.22) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
.btn-secondary:hover,
.cta-btn-secondary:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(30, 64, 175, 0.60) !important;
  box-shadow: 0 14px 28px rgba(30, 64, 175, 0.18) !important;
}
/* Secondary icon — soft blue tinted circle holding a blue arrow */
.btn-secondary .btn-icon,
.cta-btn-secondary .cta-btn-arrow {
  background: rgba(30, 64, 175, 0.10) !important;
}
.btn-secondary:hover .btn-icon,
.cta-btn-secondary:hover .cta-btn-arrow {
  background: rgba(30, 64, 175, 0.20) !important;
  transform: translateX(2px) !important;
}
/* Secondary arrow svg path — re-tint to brand blue regardless of inline stroke */
.btn-secondary .btn-icon svg path,
.cta-btn-secondary .cta-btn-arrow svg path {
  stroke: #1e40af !important;
}

/* The CTA section's gradient bg makes white-pill secondary buttons look great as-is,
   but its primary already has the brand gradient and we want it to stand out on the
   dark CTA card — bump shadow only there. */
.cta-card .cta-btn-primary {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35) !important;
}
.cta-card .cta-btn-secondary {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* ══════════════════════════════════════
   QUOTE MODAL — "Get a Free Quote" dialog
   Opens from .nav-cta, hero .btn-primary, .cta-btn-primary
   (any element with [data-open="quote"]). Sits above .wa-float (z=9999).
══════════════════════════════════════ */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* iOS safe area padding */
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.quote-modal.is-open {
  display: flex;
}
.quote-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 28, 60, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: quote-modal-fade 0.2s ease both;
  cursor: pointer;
}
.quote-modal-dialog {
  position: relative;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 22px;
  width: 100%;
  max-width: 760px;          /* wider — landscape feel rather than tall column */
  max-height: 92vh;
  /* Dynamic viewport units so the soft keyboard on iOS doesn't hide the
     submit button below the fold (audit: keyboard must not cover submit). */
  max-height: 92svh;
  max-height: 92dvh;
  overflow-y: auto;
  /* Smooth momentum scroll on older iOS Safari */
  -webkit-overflow-scrolling: touch;
  /* Keep focused inputs visible above the keyboard */
  scroll-padding-bottom: 80px;
  /* Prevent rubber-band from chaining to the background page */
  overscroll-behavior: contain;
  padding: 30px 30px 26px;
  box-shadow:
    0 4px 14px rgba(15, 15, 45, 0.04),
    0 30px 80px rgba(30, 64, 175, 0.35);
  animation: quote-modal-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Hide native scrollbar styling tweaks */
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 64, 175, 0.35) transparent;
}
/* Make programmatic focus on the dialog itself (last-resort fallback in JS)
   not draw an outline. */
.quote-modal-dialog:focus {
  outline: none;
}
.quote-modal-dialog::-webkit-scrollbar { width: 8px; }
.quote-modal-dialog::-webkit-scrollbar-thumb {
  background: rgba(30, 64, 175, 0.30);
  border-radius: 999px;
}

@keyframes quote-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes quote-modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Close (X) button — sibling of the dialog, fixed to the modal container so it
   stays visible even when the dialog scrolls (landscape, keyboard open, etc.).
   44x44 minimum touch target per audit. */
.quote-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e8ebf2;
  background: #fafbff;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.quote-modal-close:hover {
  color: #1e40af;
  background: #fff;
  border-color: rgba(30, 64, 175, 0.45);
  transform: rotate(90deg);
}
.quote-modal-close:focus-visible,
.quote-modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.45);
  color: #1e40af;
}

/* Header */
.quote-modal-header {
  text-align: left;
  margin-bottom: 18px;
  padding-right: 40px;
}
/* Tag — shared selector list at ~line 5606 already supplies the animated
   gradient, border, color, font-size, font-weight, padding, ::after shimmer
   and reduced-motion overrides. Only modal-specific layout lives here. */
.quote-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.quote-modal-tag-star {
  font-size: var(--fs-tiny);
  line-height: 1;
}
.quote-modal-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: #000;
  line-height: 1.2;
  margin: 0 0 8px;
}
.quote-modal-sub {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}

/* Form layout (reuses .form-field / .form-select-wrap / .req / .form-submit
   styles already in this file). */
.quote-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quote-modal-form .form-field label .req {
  color: #1e40af;
  margin-left: 2px;
}
/* iOS Safari auto-zooms any input with font-size < 16px on focus.
   Force a literal 16px on every form control inside the modal so it never
   triggers the zoom-and-scroll behaviour, regardless of the page-wide
   --fs-body (14px) or --fs-small (13px @480px) overrides. */
.quote-modal-form .form-field input,
.quote-modal-form .form-field textarea,
.quote-modal-form .form-select-wrap select {
  font-size: 16px;
}
/* Invalid-field visual cue paired with aria-invalid in JS. */
.quote-modal-form .form-field input[aria-invalid="true"],
.quote-modal-form .form-field textarea[aria-invalid="true"],
.quote-modal-form .form-select-wrap select[aria-invalid="true"] {
  border-color: rgba(30, 64, 175, 0.7);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
/* Per-field error message, populated by JS via aria-describedby. */
.quote-modal-field-error {
  display: none;
  margin-top: 6px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: #091c3c;
}
.quote-modal-field-error.is-shown { display: block; }

/* Status line (after submit) */
.quote-modal-status {
  min-height: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: #1a1a1a;
  margin: 0;
}
.quote-modal-status:empty { display: none; }
.quote-modal-status.is-success {
  color: #065f46;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.30);
  padding: 10px 12px;
  border-radius: 10px;
}
/* Error state — kept on-palette by leaning on the brand deep-navy/blue.
   The icon/wording communicate "error"; no new red is introduced. */
.quote-modal-status.is-error {
  color: #091c3c;
  background: rgba(30, 64, 175, 0.06);
  border: 1px solid rgba(30, 64, 175, 0.28);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
}

/* Bottom action row — note left, submit right (matches existing .form-submit-row) */
.quote-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}
.quote-modal-actions .form-note {
  font-size: var(--fs-tiny);
  color: #1a1a1a;
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.quote-modal-actions .form-note a {
  color: #1e40af;
  text-decoration: none;
  font-weight: 700;
}
.quote-modal-submit:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

/* Quick alternatives strip */
.quote-modal-alt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #e8ebf2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quote-modal-alt-label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.7;
}
.quote-modal-alt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-modal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 12px vertical + ~14px line-height + 13px font ≈ 44px+ tall (audit min). */
  padding: 12px 16px;
  min-height: 44px;
  border: 1.5px solid #e8ebf2;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #1a1a1a;
  background: #fafbff;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quote-modal-pill i {
  font-size: var(--fs-small);
  color: #1e40af;
}
.quote-modal-pill:hover {
  border-color: rgba(30, 64, 175, 0.45);
  background: #fff;
  color: #000;
  transform: translateY(-1px);
}
.quote-modal-pill:focus-visible,
.quote-modal-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.45);
}

/* Tablet */
@media (max-width: 720px) {
  .quote-modal { padding: 16px 12px; }
  .quote-modal-dialog { padding: 26px 22px 22px; border-radius: 20px; }
  .quote-modal-row { grid-template-columns: 1fr; gap: 12px; }
  .quote-modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* Submit button must clear 44px on phones — the global .form-submit at the
     480px breakpoint shrinks below this otherwise. */
  .quote-modal-actions .form-submit {
    justify-content: center;
    padding: 12px 12px 12px 20px;
    min-height: 44px;
    font-size: var(--fs-body);
  }
  .quote-modal-actions .form-note { order: 2; text-align: center; }
}

/* Phone */
@media (max-width: 600px) {
  .quote-modal { padding: 12px; }
  .quote-modal-dialog {
    width: 92vw;
    padding: 22px 18px 20px;
    border-radius: 18px;
    max-height: 90vh;
    max-height: 90svh;
    max-height: 90dvh;
  }
  .quote-modal-header { padding-right: 52px; margin-bottom: 14px; }
  /* Keep the close button at 44x44 on phones — DO NOT shrink. */
  .quote-modal-close { top: 14px; right: 14px; width: 44px; height: 44px; }
  /* Stack alt-contact pills vertically so each gets full-width 44px+ rows. */
  .quote-modal-alt-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .quote-modal-pill {
    padding: 12px 16px;
    min-height: 44px;
    width: 100%;
    font-size: var(--fs-body);
  }
  /* Drop the GPU-heavy blur on phones (entry-tier Android jank) and lean on
     a darker solid backdrop instead. */
  .quote-modal-backdrop {
    background: rgba(9, 28, 60, 0.85);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Re-assert the 16px input rule — at 480px the base form input rule drops
     to var(--fs-small) (13px) and would re-trigger iOS zoom otherwise. */
  .quote-modal-form .form-field input,
  .quote-modal-form .form-field textarea,
  .quote-modal-form .form-select-wrap select {
    font-size: 16px;
  }
}

/* Tiny phone — make sure it never overflows on 360px-wide screens */
@media (max-width: 380px) {
  .quote-modal-dialog { padding: 20px 16px 18px; }
  .quote-modal-title { font-size: var(--fs-h3); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .quote-modal-backdrop,
  .quote-modal-dialog {
    animation: none;
  }
  .quote-modal-close:hover { transform: none; }
  /* Suppress hover/focus translate transitions inside the modal so users with
     vestibular sensitivities don't get motion. Scoped — does NOT bleed into
     the page contact form. */
  .quote-modal-pill,
  .quote-modal-pill:hover,
  .quote-modal-actions .form-submit,
  .quote-modal-actions .form-submit:hover {
    transform: none !important;
    transition: none;
  }
}

/* ── Quote modal — placeholders: small, soft gray, italic-light feel ── */
.quote-modal-form .form-field input::placeholder,
.quote-modal-form .form-field textarea::placeholder {
  color: rgba(15, 23, 42, 0.38) !important;     /* very soft gray */
  font-size: 13.5px !important;                  /* smaller than 16px input */
  font-weight: 400 !important;
  opacity: 1;                                   /* normalise cross-browser */
}
.quote-modal-form .form-field input::-webkit-input-placeholder,
.quote-modal-form .form-field textarea::-webkit-input-placeholder {
  color: rgba(15, 23, 42, 0.38) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}
.quote-modal-form .form-field input::-moz-placeholder,
.quote-modal-form .form-field textarea::-moz-placeholder {
  color: rgba(15, 23, 42, 0.38) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  opacity: 1;
}

/* SELECT: the FIRST option (disabled "Choose a service…") should look faded
   while it's the current value — but the OPEN dropdown must show all real
   options in solid dark.  We can't style the closed-select text via :invalid
   because Chromium inherits that color into the open option list too,
   making every option look faded.  Approach:
     1.  Default select color = solid dark (so the open dropdown is readable).
     2.  When the placeholder option is the current value, the disabled option
         itself supplies the faded color via [disabled] styling — Chrome paints
         the closed value with the same color the option uses. */
.quote-modal-form .form-select-wrap select {
  color: #0f172a !important;                    /* solid dark — applies to options too */
}
.quote-modal-form .form-select-wrap select option {
  color: #0f172a;                               /* explicit dark for every option */
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}
.quote-modal-form .form-select-wrap select option[disabled] {
  color: rgba(15, 23, 42, 0.45);                /* placeholder option looks softer */
  font-weight: 400;
}

/* ══════════════════════════════════════
   ABOUT WEBIFYY — Editorial split (copy left + image right with floating badges)
══════════════════════════════════════ */
.about-wrap {
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.about-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ── LEFT ── */
.about-left { position: relative; }

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.30em;
  color: #1e40af;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.about-eyebrow-dash {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: rgba(30, 64, 175, 0.45);
  border-radius: 2px;
}

.about-title {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.05;
  color: #000;
  letter-spacing: -1.8px;
  margin: 0 0 22px;
}
/* "We drive growth." line — wraps tight to the text so the squiggle
   underneath hugs the same width. */
.about-title-blue {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  line-height: inherit;
  white-space: nowrap;
}
.about-title-blue-text {
  display: inline-block;
}
.about-title-blue svg {
  position: absolute;
  bottom: 0;
  left: 2%;
  width: 96%;
  height: 14px;
  pointer-events: none;
  display: block;
}

.about-desc {
  font-size: var(--fs-body-lg);
  color: #1a1a1a;
  line-height: 1.7;
  margin: 0 0 40px;
  max-width: 520px;
  font-weight: 500;
}

/* Value chips row at the bottom of left column */
.about-values {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.about-value {
  flex: 1;
  min-width: 0;
}
.about-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8edf6 0%, #dbeafe 100%);
  color: #1e40af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.10);
}
.about-value strong {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: #000;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  line-height: 1.25;
}
.about-value p {
  margin: 0;
  font-size: var(--fs-small);
  color: #1a1a1a;
  line-height: 1.55;
  font-weight: 500;
}
.about-value-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(30, 64, 175, 0.16);
  margin-top: 6px;
}

/* ── RIGHT ── */
.about-right {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The big rounded image — top + right edges STRAIGHT, left side curves
   (half-ellipse on the left, flat right side). */
/* ── ABOUT COLLAGE — main center photo + 3 satellite photos + deco icons/dots ── */
.about-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;       /* slightly wider than tall to feel like a hero scene */
  max-width: 560px;
  margin: 0 auto;
}

/* Main center photo — largest, rounded rectangle, sits centered slightly to the right */
.collage-main {
  position: absolute;
  top: 12%;
  left: 22%;
  right: 12%;
  bottom: 14%;
  border-radius: 20px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.08),
    0 28px 60px rgba(30, 64, 175, 0.22);
}
.collage-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Satellite photos — smaller rounded photos floating around the main */
.collage-sat {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  z-index: 3;
  background: #fff;
  padding: 6px;
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.10),
    0 18px 42px rgba(30, 64, 175, 0.18);
}
.collage-sat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.collage-sat-tl {
  top: 4%;
  left: 0%;
  width: 36%;
  aspect-ratio: 4 / 3;
}
.collage-sat-bl {
  bottom: 4%;
  left: 4%;
  width: 32%;
  aspect-ratio: 4 / 3;
}
.collage-sat-br {
  bottom: 0%;
  right: 0%;
  width: 36%;
  aspect-ratio: 4 / 3;
}

/* Decorative outlined icons — float around the photos */
.collage-icon {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1.5px solid rgba(30, 64, 175, 0.32);
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
  font-size: 22px;
  z-index: 1;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.10);
}
.collage-icon-top {
  top: 0;
  left: 38%;
}
.collage-icon-right {
  top: 4%;
  right: 0;
}
.collage-icon-midright {
  top: 42%;
  right: -4%;
}
.collage-icon-bottom {
  bottom: 6%;
  left: 42%;
}

/* Dot grids — scattered in two corners */
.collage-dots {
  position: absolute;
  background-image: radial-gradient(rgba(30, 64, 175, 0.42) 2px, transparent 2px);
  background-size: 12px 12px;
  pointer-events: none;
  z-index: 0;
}
.collage-dots-tr {
  top: 6%;
  right: 12%;
  width: 80px;
  height: 50px;
  opacity: 0.7;
}
.collage-dots-bl {
  bottom: 30%;
  left: 0;
  width: 70px;
  height: 70px;
  opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .about-left { order: 1; }
  .about-right {
    order: 2;
    min-height: 0;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  .about-title {
    font-size: var(--fs-h1);
    letter-spacing: -1.2px;
  }
  .about-desc { max-width: none; }
}

@media (max-width: 768px) {
  .about-wrap { padding: 60px 0; }
  .about-inner { padding: 0 20px; }
  .about-left { text-align: center; }
  .about-eyebrow {
    margin-bottom: 18px;
    justify-content: center;
  }
  .about-eyebrow-dash { width: 36px; }
  .about-title {
    font-size: var(--fs-h2);
    letter-spacing: -0.9px;
    margin-left: auto;
    margin-right: auto;
  }
  .about-desc {
    font-size: var(--fs-body);
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 520px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .about-values {
    flex-wrap: wrap;
    gap: 18px 22px;
    justify-content: center;
  }
  .about-value {
    flex: 1 1 calc(50% - 22px);
    min-width: 0;
    text-align: center;
    /* Flex-column with centered children so the icon, title and description
       all sit on the same vertical centerline regardless of width. */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about-value-icon {
    display: flex;             /* override base `inline-flex` so align-items can centre it */
    margin: 0 0 12px;          /* drop horizontal auto-margins — alignment is handled by parent */
  }
  .about-value strong,
  .about-value p {
    max-width: 100%;
  }
  .about-value-sep { display: none; }

  /* Collage scales down but keeps the structure */
  .about-right { max-width: 480px; }
  .collage-icon { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
  .collage-dots-tr,
  .collage-dots-bl { width: 60px; height: 50px; background-size: 10px 10px; }
}

@media (max-width: 480px) {
  .about-wrap { padding: 48px 0; }
  .about-inner { padding: 0 16px; }
  .about-title { font-size: var(--fs-h3); letter-spacing: -0.5px; line-height: 1.15; }
  .about-desc {
    font-size: var(--fs-body);
    line-height: 1.6;
    margin-bottom: 26px;
  }
  /* Single-column value chips — each card constrained to a uniform width so
     all icons / titles / descriptions sit on the SAME vertical centerline. */
  .about-values {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .about-value {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
    /* the existing display:flex / flex-direction:column / align-items:center
       cascade from the ≤768px block — all chips now have identical layout box */
  }
  .about-value-icon {
    width: 42px;
    height: 42px;
    font-size: var(--fs-body);
    margin-bottom: 12px;
  }
  .about-right { max-width: 340px; }
  .collage-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
  .collage-sat { padding: 4px; border-radius: 12px; }
  .collage-sat img { border-radius: 9px; }
  .collage-dots-tr,
  .collage-dots-bl { width: 48px; height: 40px; background-size: 8px 8px; }
}


/* ── NAV CTA visibility: hide on every viewport BY DEFAULT, then only re-show on desktop.
   The mobile-first approach removes any chance of an earlier rule winning the cascade. ── */
nav .nav-cta,
.nav-wrap nav .nav-cta,
a.nav-cta { display: none !important; }
@media (min-width: 1025px) {
  nav .nav-cta,
  .nav-wrap nav .nav-cta,
  a.nav-cta { display: inline-flex !important; }
}
/* ── Hero CTA: shorten "Get a Free Quote" -> "Get Quote" on mobile to keep it on one line ── */
@media (max-width: 600px) {
  .btn-text-extra { display: none; }
}
/* ══════════════════════════════════════
   LOGO IMAGES — used in nav (header.php) and footer (footer.php).
   One file (assets/img/logo.png) is the source of truth.
   Footer gets a brightness/invert filter to render as white on the dark nav bg.
══════════════════════════════════════ */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 18px;
}
.footer-logo-img {
  height: 56px;
  width: auto;
  display: block;
  /* Logo file is dark navy — convert to white so it's readable on the
     dark footer gradient. brightness(0) → all-black silhouette,
     invert(1) → flip to white. */
  filter: brightness(0) invert(1);
  user-select: none;
  -webkit-user-drag: none;
}

/* Responsive — shrink in the nav as the viewport narrows */
@media (max-width: 1100px) {
  .logo-img { height: 40px; }
}
@media (max-width: 768px) {
  .logo-img { height: 36px; }
  .footer-logo-img { height: 50px; }
}
@media (max-width: 480px) {
  .logo-img { height: 32px; }
  .footer-logo-img { height: 44px; }
}
/* ── Orbit center pedestal: now holds the Webifyy logo (white) instead of the megaphone icon ── */
.orbit-center-logo {
  width: 62%;             /* sits comfortably inside the blue circle */
  height: auto;
  display: block;
  filter: brightness(0) invert(1);   /* same recipe as footer-logo-img — dark logo -> pure white */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .orbit-center-logo { width: 64%; }
}
@media (max-width: 480px) {
  .orbit-center-logo { width: 68%; }
}
/* ── About title — mobile: exactly 2 stacked lines.
   1st <br> (after "We don't do") is hidden so "We don't do marketing." joins.
   2nd <br> (after "marketing.") stays visible so "We drive growth." drops below.
   Font is capped small enough that "We don't do marketing." never wraps. ── */
@media (max-width: 768px) {
  .about-title-br { display: none; }
  .about-title {
    font-size: clamp(22px, 5.8vw, 30px);
    letter-spacing: -0.6px;
    line-height: 1.15;
  }
}
@media (max-width: 480px) {
  .about-title {
    font-size: clamp(20px, 6.4vw, 26px);
    letter-spacing: -0.4px;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER NAV  (≤768px) — replaces the scrolling link strip on phones
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav { flex-wrap: nowrap !important; padding: 11px 16px !important; column-gap: 10px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-phone { order: 1; margin-left: auto; }
  .nav-hamburger { display: flex !important; order: 2; margin-left: 10px; }
}

/* drawer becomes visible when opened (CSS file already styles the panel) */
.mobile-menu.open { display: block; }
.mobile-menu-backdrop { position: absolute; inset: 0; }

/* hamburger morphs into an X while the drawer is open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════════════════
   LIGHTER SECTION HEADINGS — reduced from 900 → 700 across the site
   ════════════════════════════════════════════════════════════════════ */
.headline,
.services-title,
.wcu-title,
.wcu-right-title,
.industries-title,
.testi-title,
.twall-title,
.faq-title,
.channels-title,
.contact-title,
.proc-title,
.process-title,
.about-title,
.cta-heading {
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
   WHY-CHOOSE-US STATS — clean equal grid, no divider lines
   ════════════════════════════════════════════════════════════════════ */
.wcu-stat-sep { display: none !important; }          /* remove the vertical lines */
.wcu-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px !important;
  align-items: stretch;
}
.wcu-stats .wcu-stat-cell {
  width: auto !important;
  flex: none !important;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 12px 12px !important;
  border: 0 !important;                              /* remove the cell divider borders */
}
.wcu-stats .wcu-stat-lbl { white-space: normal; }    /* let long labels wrap, not overflow */
@media (max-width: 768px) {
  .wcu-stats { grid-template-columns: repeat(2, 1fr); gap: 10px 14px !important; }
}
@media (max-width: 440px) {
  .wcu-stats { grid-template-columns: 1fr; }
}