/* ============================================================================
   THE COGENT — 2026 Redesign  ·  "Clean Modern SaaS"
   ----------------------------------------------------------------------------
   Dark, spacious, professional (Linear/Stripe-marketing feel). The Cogent's
   own brand gradient (#383070 -> #E34576 -> #F29C48) used as a precise accent.
   Controlled, balanced type (Plus Jakarta Sans + Inter) — no oversized display.
   Loaded AFTER Bootstrap + old style.css. Content/links/SEO untouched.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --bg:        #0C0E16;     /* dark base, faint blue-violet */
  --bg-2:      #10121C;
  --surface:   #161927;
  --surface-2: #1D2132;
  --surface-3: #272C40;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --line-3:    rgba(255,255,255,0.22);

  --ink:   #F5F6FA;
  --ink-2: #BFC3D4;        /* secondary text, AA on surfaces */
  --ink-3: #868CA3;        /* muted */

  /* THE COGENT brand gradient — the identity */
  --grad:  linear-gradient(95deg, #383070 0%, #E34576 52%, #F29C48 100%);
  --grad-2:linear-gradient(95deg, #5B4FB0 0%, #E8517F 52%, #F7A23B 100%);
  --purple:#7A6CD6;
  --pink:  #E8517F;
  --orange:#F29C48;
  --accent:#E8517F;        /* solid pink for links/contrast */

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t1: 150ms; --t2: 250ms; --t3: 420ms;

  --sh-sm: 0 2px 10px rgba(0,0,0,0.3);
  --sh:    0 24px 60px -24px rgba(0,0,0,0.6);
  --glow:  0 16px 44px -16px rgba(232,81,127,0.5);
}

/* ----------------------------------------------------------------------------
   1b. GLOBAL FONT OVERRIDE  (consistency across the WHOLE site)
   ----------------------------------------------------------------------------
   The old style.css sets `font-family: Poppins` on ~493 selectors, so any
   element this redesign didn't explicitly restyle kept the old font. This
   block forces the new type system everywhere via :where()-free broad
   selectors + !important, while EXEMPTING icon fonts (FontAwesome, ionicons,
   Bootstrap-icons) so glyphs still render.
   -------------------------------------------------------------------------- */
body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="bi-"]):not([class*=" bi-"]):not(ion-icon):not(.material-icons):not(.material-symbols-outlined) {
  font-family: var(--font-body) !important;
}
/* Headings + heading-ish classes -> display font */
body h1, body h2, body h3, body h4, body h5, body h6,
.navbar-brand, .header-btns, .hover-btn, .hero-btn,
.count-box h3, .count-box .purecounter, .home-ready h4,
.testimonial h2, .testimonial h3, .faq .accordion-button,
.popup_form h5, .form .box #btnsubmits, .form h1 {
  font-family: var(--font-head) !important;
}
/* Never touch icon glyph fonts */
i.fa, i.fas, i.far, i.fab, i.fal, i.fad,
[class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab,
[class^="bi-"], [class*=" bi-"], ion-icon,
.material-icons, .material-symbols-outlined,
.owl-prev::after, .owl-next::after,
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: inherit; /* let their own @font-face / FA rules win */
}
/* Reassert correct FontAwesome families per weight so glyphs keep rendering */
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free","FontAwesome" !important; font-weight: 900 !important; }
.far, .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; }
.fa-whatsapp, .fa-phone-alt, .fa-phone { font-family: "Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome" !important; }

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html, body { width: 100%; max-width: 100%; }
body {
  background: var(--bg) !important;
  color: var(--ink-2);
  font-family: var(--font-body) !important;
  font-size: 1.05rem; line-height: 1.7; letter-spacing: -0.006em;
  margin: 0; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 35% at 50% 0%, rgba(122,108,214,0.14), transparent 70%),
    radial-gradient(40% 30% at 90% 5%, rgba(242,156,72,0.06), transparent 70%);
}
main, footer, nav { position: relative; z-index: 1; }
p { margin-bottom: 0 !important; color: var(--ink-2); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--t2) var(--ease); }
a:hover { color: var(--orange); }
.cursor, .cursor2 { display: none !important; }
::selection { background: rgba(232,81,127,0.32); color: #fff; }

main > .container, main > section > .container,
.home-service-content > .container, .testimonial > .container,
.faq > .container, .home-healthcare > .container,
.home-ready > .container, .home-map > .container { max-width: var(--maxw); }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY  — controlled, balanced (no oversized display)
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; font-weight: 700; }
main h1, .hero h1 {
  font-weight: 800;
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);  /* capped — fits on screen */
  line-height: 1.08; letter-spacing: -0.03em;
  color: var(--ink) !important; text-shadow: none !important;
}
main h2 { font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.03em; }
main h3 { font-weight: 700; font-size: clamp(1.2rem, 1rem + .7vw, 1.45rem); }
main h4 { font-weight: 700; font-size: 1.15rem; }
main h6 { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--ink-2); }

/* brand gradient emphasis on the <span> the content already uses */
main h1 span, main h2 span, main h3 span,
.hero h1 .hero-grad {
  background: var(--grad-2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* eyebrow */
.home-service-content .container .row > .col-12 > h6 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin-bottom: .9rem;
}

/* ----------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  background: rgba(12,14,22,0.72) !important;
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line); padding: 0 !important;
  position: sticky; top: 0; z-index: 1030;
}
.navbar > .container { max-width: var(--maxw); display:flex; align-items:center; justify-content:space-between; min-height: 74px; gap: 1rem; flex-wrap: nowrap; }
.navbar-brand { margin: 0; padding: 0; }
.navbar-brand img { height: 40px; width: auto; }
.navbar-collapse { flex: 1 1 auto; }
.navbar .navbar-nav { margin: 0 auto !important; display:flex; align-items:center; gap: clamp(.15rem,.9vw,.7rem); flex-wrap: nowrap; }
.navbar .nav-item { padding: 0 !important; }
.navbar .nav-link {
  display:inline-flex; align-items:center; white-space: nowrap !important;
  color: var(--ink-2) !important; font-family: var(--font-body);
  font-size: .94rem; font-weight: 500; padding: .5rem .7rem !important; border-radius: var(--r-sm);
  position: relative; transition: color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ink) !important; background: rgba(255,255,255,0.04); }
.navbar .dropdown-menu { background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh); padding:.5rem; margin-top:.6rem; min-width: 260px; }
.navbar .dropdown-item { color: var(--ink-2); border-radius: 9px; padding:.55rem .85rem; font-size:.92rem; white-space: normal; transition: background var(--t1) var(--ease), color var(--t1) var(--ease); }
.navbar .dropdown-item:hover { color: var(--ink) !important; background: var(--surface-2) !important; }
.navbar-toggler { background: var(--surface-2) !important; border:1px solid var(--line-2) !important; border-radius: 9px; padding:.45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(232,81,127,0.35); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(245,246,250,0.9)' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E") !important; }
@media (max-width: 991px) { .navbar .dropdown-menu { min-width: 0; width: 100%; } .navbar > .container { flex-wrap: wrap; } .navbar .navbar-nav { gap:.2rem; align-items:flex-start; padding:.6rem 0; } .navbar .nav-link { width:100%; } }

/* header CTA — gradient pill */
.navbar > .container > .d-lg-block { flex: 0 0 auto; }
.header-btns { background: var(--grad) !important; border:none; border-radius: var(--r-pill); padding:.6rem 1.25rem !important; box-shadow: var(--glow); transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease); }
.header-btns a { color:#fff !important; font-family: var(--font-head); font-weight:700; font-size:.9rem; white-space:nowrap; }
.header-btns:hover { transform: translateY(-1px); box-shadow: 0 22px 56px -16px rgba(232,81,127,0.55); }
.header-btns:active { transform: scale(.97); }

/* ----------------------------------------------------------------------------
   5. HERO — clean SaaS: balanced headline, subtext, CTAs, stats, image. Fits.
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.5rem,5vw,4.5rem) 0 clamp(1rem,2vw,2rem); isolation: isolate; overflow: hidden; }
.hero, .hero * { max-width: 100%; }
.hero > .container { width: 100%; padding-inline: var(--gutter); }
.hero::before {
  content:""; position:absolute; z-index:-1; inset: -10% -10% auto 40%; height: 560px;
  background: radial-gradient(46% 60% at 70% 25%, rgba(122,108,214,0.22), transparent 70%), radial-gradient(40% 55% at 90% 30%, rgba(232,81,127,0.18), transparent 72%), radial-gradient(34% 48% at 60% 80%, rgba(242,156,72,0.12), transparent 72%);
  filter: blur(30px); pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(1.5rem,4vw,3.5rem); }
.hero-grid > * { min-width: 0; }
.hero-copy { text-align: left; min-width: 0; }

/* eyebrow pill (was timecode) */
.hero-timecode {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .45rem 1rem; margin-bottom: 1.5rem;
}
.hero-timecode .tc-rec { display:inline-flex; align-items:center; gap:.4rem; color: var(--pink); font-weight: 700; }
.hero-timecode .tc-rec::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--pink); animation: tc-blink 2.2s var(--ease) infinite; }
.hero-timecode .tc-dot { color: var(--ink-3); }
.hero-timecode .tc-frame { color: var(--orange); font-weight: 700; }
.hero-timecode span:not(.tc-rec):not(.tc-dot):not(.tc-frame) { color: var(--ink-2); }
@keyframes tc-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-kicker { display:none; }

.hero-copy h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.03em; color: var(--ink) !important; margin: 0; max-width: 18ch;
}
.hero-copy h1 .hero-grad { background: var(--grad-2); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; }

.hero-sub { margin-top: 1.25rem; font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); max-width: 50ch; }

.hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top: 2rem; }
.hero-btn { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-head); font-weight:700; font-size:.98rem; padding:.9rem 1.9rem; border-radius: var(--r-pill); transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.hero-btn--primary { background: var(--grad); color:#fff !important; box-shadow: var(--glow); }
.hero-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -16px rgba(232,81,127,.55); }
.hero-btn--primary:active { transform: scale(.97); }
.hero-btn--ghost { color: var(--ink) !important; border:1px solid var(--line-3); }
.hero-btn--ghost:hover { border-color: var(--pink); background: rgba(232,81,127,.08); }

.hero-stats { display:flex; gap: clamp(1.5rem,3vw,2.6rem); margin-top: 2.4rem; padding-top: 1.6rem; border-top:1px solid var(--line); }
.hero-stat strong { display:block; font-family: var(--font-head); font-weight:800; font-size: clamp(1.5rem,1.2rem+.8vw,2rem); color: var(--ink); line-height:1; }
.hero-stat span { font-size:.8rem; color: var(--ink-3); letter-spacing:.02em; }

/* hero image — single clean framed photo with floating chips (no messy collage) */
.hero-visual { position: relative; min-height: 420px; }
.hero-card { position:absolute; overflow:hidden; border:1px solid var(--line-2); background: var(--surface); box-shadow: var(--sh); border-radius: var(--r-lg); }
.hero-card::after { content:none; }
.hero-card img { width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--t3) var(--ease); }
.hero-card--1 { width: 82%; height: 86%; right: 0; top: 6%; z-index:1; }
.hero-card--2 { width: 46%; height: 44%; left: 0; bottom: 0; z-index:2; border:4px solid var(--bg); }
.hero-card:hover img { transform: scale(1.04); }
.hero-chip { position:absolute; z-index:4; background: rgba(22,25,39,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid var(--line-2); border-radius: var(--r-md); padding:.7rem 1rem; box-shadow: var(--sh-sm); }
.hero-chip strong { display:block; font-family: var(--font-head); font-weight:800; font-size:1.4rem; background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-chip span { font-size:.72rem; color: var(--ink-3); }
.hero-chip--a { top: 0; left: 0; }
.hero-chip--b { bottom: 14%; right: -2%; }

/* service marquee — quiet, small */
.hero-marquee { margin-top: clamp(2rem,4vw,3rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: .9rem 0; }
.hero-marquee-track { display:flex; align-items:center; gap:1.2rem; white-space:nowrap; width:max-content; animation: cg-marquee 42s linear infinite; }
.hero-marquee-track span { font-family: var(--font-head); font-weight:700; font-size: clamp(.95rem,1.4vw,1.2rem); color: var(--ink-2); }
.hero-marquee-track i { color: var(--pink); font-style:normal; }
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }
@keyframes cg-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 100%; }
  .hero-visual { min-height: 340px; margin-top: 1.5rem; max-width: 520px; width: 100%; }
}
@media (max-width: 575px) {
  .hero-copy h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .hero-sub { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .hero-btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 1.2rem; flex-wrap: wrap; }
}

/* ----------------------------------------------------------------------------
   5b. TRUST / RATINGS STRIP  (Trustpilot · Google · GoodFirms — our design)
   -------------------------------------------------------------------------- */
.trust-strip { padding: clamp(1rem,2vw,1.75rem) 0 clamp(0.5rem,1vw,1rem); }
.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.trust-badge {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: .7rem 1.3rem .7rem .9rem;
  box-shadow: var(--sh-sm);
  transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.trust-badge:hover { transform: translateY(-3px); border-color: var(--line-3); box-shadow: var(--sh); }
.trust-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 50%;
}
.trust-meta { display: flex; flex-direction: column; line-height: 1.1; }
.trust-name { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--ink); }
.trust-stars { display: inline-flex; gap: 1px; margin-top: 3px; font-size: .8rem; color: var(--orange); }
.trust-score { display: inline-flex; align-items: baseline; gap: .2rem; margin-left: .3rem; padding-left: .85rem; border-left: 1px solid var(--line); }
.trust-score strong { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.trust-score span { font-size: .78rem; color: var(--ink-3); }

@media (max-width: 575px) {
  .trust-badge { flex: 1 1 100%; justify-content: flex-start; padding: .7rem 1rem; }
  .trust-row { gap: .6rem; }
}

/* ----------------------------------------------------------------------------
   6. GLOBAL BUTTONS
   -------------------------------------------------------------------------- */
.hover-btn, .counts button, .home-healthcare .hover-btn {
  display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-head);
  font-weight:700; font-size:1rem; border:none; cursor:pointer;
  background: var(--grad); color:#fff !important; border-radius: var(--r-pill);
  padding:.9rem 1.9rem; box-shadow: var(--glow);
  transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.counts button a, .hover-btn { color:#fff !important; }
.hover-btn:hover, .counts button:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -16px rgba(232,81,127,.5); }
.hover-btn:active, .counts button:active { transform: scale(.97); }
.hover-btn::before { display:none !important; }

/* ----------------------------------------------------------------------------
   7. SUCCESS HIGHLIGHTS  (.counts)
   -------------------------------------------------------------------------- */
.counts { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-xl); padding: clamp(2rem,4vw,3.25rem); box-shadow: var(--sh); }
.counts h2 { margin-bottom:1.1rem; }
.counts p { color: var(--ink-2); margin-bottom:.85rem !important; max-width: 52ch; }
.count-box { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-md); padding:1.4rem 1rem; text-align:center; transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.count-box:hover { transform: translateY(-4px); border-color: var(--line-2); }
.count-box .purecounter, .count-box h3 { font-family: var(--font-head); font-weight:800; font-size: clamp(1.9rem,1.4rem+1.4vw,2.8rem); background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; line-height:1; }
.count-box h6 { color: var(--ink-2); margin-top:.4rem; font-family: var(--font-body); font-weight:500; font-size:.88rem; }

/* ----------------------------------------------------------------------------
   8. SERVICES  (.home-service-content / .col-box) — clean 3-col cards
   -------------------------------------------------------------------------- */
.home-service-content { padding-block: var(--section-y); }
.home-service-content .row:first-child { margin-bottom: clamp(2rem,4vw,3.5rem); text-align:center !important; }
.home-service-content .row:first-child .col-12 { text-align:center !important; }
.home-service-content .row:first-child h2 { max-width: 24ch; margin-inline:auto; }
.home-service-content .row:first-child p { color: var(--ink-2); max-width: 64ch; margin-inline:auto; margin-top:1.1rem; }
.col-box {
  position: relative; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); padding:0; height:100%; overflow:hidden;
  transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}
.col-box:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--sh); }
.col-box img { border-radius:0; margin:0 0 1.2rem; width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--line); transition: transform var(--t3) var(--ease); }
.col-box:hover img { transform: scale(1.04); }
.col-box h3 { margin: 0 1.4rem .6rem; }
.col-box p { color: var(--ink-2); font-size:.95rem; margin: 0 1.4rem 1.4rem !important; }
.col-box p a { color: var(--pink) !important; font-weight:600; }
.col-box p a:hover { color: var(--orange) !important; }
.hori hr, main hr { border:0; height:1px; width:100%; background: linear-gradient(90deg, transparent, var(--line-2), transparent); opacity:1; margin-block:2rem; }

/* ----------------------------------------------------------------------------
   9. BRAND MARQUEE  (.home-trust)
   -------------------------------------------------------------------------- */
/* Brands — THREE infinite logo lanes, alternating direction, on-theme chips. */
.home-trust { padding-block: var(--section-y); overflow: hidden; }
.brands-head { text-align:center; max-width: 720px; margin-inline:auto; margin-bottom: clamp(2rem,4vw,3rem); }
.brands-eyebrow { display:inline-block; font-family: var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--pink); margin-bottom:.9rem; }
.brands-head h2 { font-weight:800; margin-bottom:.75rem; }
.brands-head h2 span { background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.brands-head p { color: var(--ink-3); font-size:1.02rem; }

.brand-wall {
  display:flex; flex-direction:column; gap: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brand-lane { overflow:hidden; display:flex; }
.brand-track { display:flex; align-items:center; gap:1.1rem; flex-shrink:0; width:max-content; will-change:transform; }
.brand-track--l1 { animation: brand-left  60s linear infinite; }
.brand-track--r2 { animation: brand-right 72s linear infinite; }
.brand-track--l3 { animation: brand-left  66s linear infinite; }
.brand-wall:hover .brand-track { animation-play-state: paused; }
@keyframes brand-left  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
@keyframes brand-right { from{transform:translateX(-50%)} to{transform:translateX(0)} }

.brand-item {
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width: 176px; height: 100px; padding: 16px 22px; box-sizing:border-box;
  /* Light chip so EVERY logo (any color / background) renders correctly */
  background: #FFFFFF; border:1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.brand-item img {
  max-width:100%; max-height:100%; width:auto !important; height:auto; object-fit:contain;
  transition: transform var(--t2) var(--ease);
}
.brand-item:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.brand-item:hover img { transform: scale(1.05); }

@media (max-width: 575px) {
  .brand-item { width: 138px; height: 80px; padding:12px 16px; }
  .brand-wall { gap:.75rem; }
}
@media (prefers-reduced-motion: reduce) { .brand-track { animation:none !important; } }
.brand-wall-cta { text-align:center; margin-top: clamp(1.75rem,3vw,2.5rem); }

/* ----------------------------------------------------------------------------
   10. INDUSTRIES  (.home-healthcare)
   -------------------------------------------------------------------------- */
.home-healthcare { padding-block: var(--section-y); }
.home-healthcare .row { align-items: center; }
.home-healthcare .col-md-4 { justify-content: center !important; }
.home-healthcare h2 { margin-bottom:.2rem; }
.home-healthcare .col-md-4 .hover-btn { margin-top: 1.75rem !important; }
.home-healthcare .circle { width:180px; height:180px; margin-top:2.5rem; border-radius:50%; background: var(--grad); filter: blur(55px); opacity:.4; }
/* Industries carousel: uniform framed tiles, no cut-off, no dead space */
.home-healthcare #home-industry .post-slide,
.home-healthcare .owl-carousel .post-slide {
  background: transparent !important; border:none !important; box-shadow:none !important;
  padding: 0 .5rem !important; transform:none !important;
}
.home-healthcare .owl-carousel .img-box {
  position: relative; display:block; border-radius: var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); box-shadow: var(--sh);
}
.home-healthcare .owl-carousel .img-box img {
  width:100% !important; height: 340px !important; object-fit: cover; display:block;
  border-radius: 0 !important; border:none !important;
  transition: transform var(--t3) var(--ease);
}
.home-healthcare .owl-carousel .img-box:hover img { transform: scale(1.05); }
/* caption overlay if present */
.home-healthcare .owl-carousel .card-info {
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  background: linear-gradient(transparent, rgba(8,9,14,.88));
}
.home-healthcare .owl-carousel .card-info h3 { color:#fff; font-family: var(--font-head); font-weight:700; font-size:1.15rem; margin:0; }
.home-healthcare .owl-carousel .owl-stage { display:flex; align-items:stretch; }
.owl-carousel .owl-nav { margin-top: 1.25rem; display:flex; gap:.6rem; justify-content:flex-end; }
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { width:46px !important; height:46px !important; border-radius:50% !important; background: var(--surface-2) !important; border:1px solid var(--line-2) !important; color: var(--ink) !important; display:inline-flex !important; align-items:center; justify-content:center; }
.owl-carousel .owl-nav button:hover { background: var(--surface-3) !important; border-color: var(--pink) !important; }

/* ----------------------------------------------------------------------------
   11. CTA BAND  (.home-ready)
   -------------------------------------------------------------------------- */
.home-ready { padding-block: var(--section-y); }
.home-ready > .container { position:relative; overflow:hidden; background: radial-gradient(90% 120% at 0% 0%, rgba(122,108,214,.24), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(242,156,72,.16), transparent 55%), var(--surface); border:1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(2.5rem,6vw,4.5rem); box-shadow: var(--sh); }
.home-ready h4 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem,1.1rem+1.6vw,2.2rem); background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom:.6rem; }
.home-ready h2 { font-size: clamp(1rem,.9rem+.5vw,1.25rem); font-weight:600; color: var(--ink-2); margin-bottom:2.5rem; }
/* The feature cards use .col-boxe (note trailing e) — force ALL to the dark
   card treatment so none renders white/inconsistent. */
.home-ready .box, .home-ready .col-box, .home-ready .col-boxe {
  background: rgba(255,255,255,.035) !important; border:1px solid var(--line) !important;
  border-radius: var(--r-md) !important; padding:1.6rem 1.4rem !important; height:100%;
  color: var(--ink-2) !important;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.home-ready .box:hover, .home-ready .col-box:hover, .home-ready .col-boxe:hover { border-color: var(--line-3) !important; background: rgba(255,255,255,.06) !important; transform: translateY(-4px); }
.home-ready .col-boxe h3 { margin-bottom:.7rem; color: var(--ink) !important; font-family: var(--font-head); font-weight:700; padding-top:0 !important; }
.home-ready .col-boxe h6 { color: var(--ink-2) !important; font-family: var(--font-body) !important; font-weight:400; font-size:.92rem; line-height:1.65; }
.home-ready .col-boxe .read-more-text { color: var(--ink-2) !important; }
.home-ready .read-more-btn, .home-ready .col-boxe .read-more-btn {
  display:inline-block; margin-top:.8rem; color: var(--pink) !important; font-family: var(--font-head);
  font-weight:600; font-size:.88rem; background:none !important;
}
.home-ready .read-more-btn:hover { color: var(--orange) !important; }

/* ----------------------------------------------------------------------------
   12. BLOGS  (.post-slide) + Swiper
   -------------------------------------------------------------------------- */
.post-slide { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding:0; overflow:hidden; height:auto; transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.post-slide:hover { transform: translateY(-5px); border-color: var(--line-2); }
.post-slide img { border-radius:0; aspect-ratio:16/9; object-fit:cover; width:100%; border-bottom:1px solid var(--line); }
.post-slide h3, .post-slide h4 { margin:1rem 1.2rem .5rem; font-size:1.1rem; }
.post-slide p { color: var(--ink-2); font-size:.92rem; margin:0 1.2rem 1.2rem !important; }
.swiper-button-next, .swiper-button-prev { color: var(--pink) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size:1.3rem !important; }
.swiper-pagination-bullet { background: var(--ink-3); opacity:1; }
.swiper-pagination-bullet-active { background: var(--pink); }

/* ----------------------------------------------------------------------------
   13. TESTIMONIALS  (.testimonial)
   -------------------------------------------------------------------------- */
.testimonial { padding-block: var(--section-y); overflow: hidden; }
.testimonial h2 { margin-bottom:.5rem; }
.testimonial h6 { color: var(--ink-3); }
.testimonial .mySwiper { padding: 1rem 0.25rem; }   /* Swiper keeps its own overflow clipping */
.testimonial .swiper-wrapper { align-items: stretch; padding-block: 0.5rem; }

/* Each slide = a full-height clickable card. Avatar sits INSIDE with padding
   (fixes the cut-off), then quote, stars, name. */
.testimonial .content, .testimonial .swiper-slide.content {
  background: transparent; border: none; box-shadow: none; padding: 0; height: auto;
  display: flex;
}
.testimonial .t-link {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.2rem);
  box-shadow: var(--sh); text-decoration: none;
  transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.testimonial .t-link:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: 0 30px 70px -24px rgba(232,81,127,.35); }

/* Avatar — clean circle, fully visible, gradient ring */
.testimonial .t-link > img:first-child,
.testimonial .content > img:first-child {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  border: 3px solid transparent; background: var(--surface);
  box-shadow: 0 0 0 2px var(--pink), var(--sh-sm);
  margin: 0 auto 1.1rem; flex: 0 0 auto; display: block;
}
.testimonial .text-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.testimonial .text-content p {
  color: var(--ink-2); font-size: .98rem; line-height: 1.7; padding-top: 0 !important;
  /* clamp very long quotes so cards stay even, but show plenty */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.testimonial .text-content hr { border:0; height:1px; background: var(--line-2); opacity:1; width: 60%; margin: 1.25rem auto 1rem; }
.testimonial .text-content > img { margin: 0 auto .6rem; }
.testimonial .text-content h3 { font-family: var(--font-head); font-weight:700; font-size:1.05rem; color: var(--ink); margin-top: auto; line-height:1.35; }
.testimonial .text-content h3 span { color: var(--pink); font-size:.88rem; font-weight:500; }

/* "Read reviews on Google" hint on the card */
.testimonial .t-link::after {
  content: "★ View on Google"; margin-top: .9rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-3); transition: color var(--t2) var(--ease);
}
.testimonial .t-link:hover::after { color: var(--pink); }

/* ----------------------------------------------------------------------------
   14. FAQ  (.faq / .accordion)
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq h2 { text-align:center; margin-bottom:2.5rem; }
.faq .accordion { --bs-accordion-bg: transparent; max-width: 860px; margin-inline:auto; }
.faq .accordion-item { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md) !important; margin-bottom:.85rem; overflow:hidden; transition: border-color var(--t2) var(--ease); }
.faq .accordion-item:hover { border-color: var(--line-2); }
.faq .accordion-button { background: transparent; color: var(--ink); font-family: var(--font-head); font-weight:700; font-size:1.02rem; line-height:1.5; padding:1.15rem 1.35rem; box-shadow:none; }
.faq .accordion-button:not(.collapsed) { color: var(--ink); background: var(--surface-2); box-shadow:none; }
.faq .accordion-button::after { filter: brightness(0) invert(1); opacity:.6; }
.faq .accordion-button:focus { border-color:transparent; box-shadow: 0 0 0 3px rgba(232,81,127,.3); }
.faq .accordion-body { color: var(--ink-2); padding: 0 1.35rem 1.25rem; }

/* ----------------------------------------------------------------------------
   15. MAP  (.home-map)
   -------------------------------------------------------------------------- */
.home-map { padding-block: var(--section-y); text-align:center; }
.home-map h2 { margin-bottom:2.5rem; }
.home-map iframe { width:100%; border:1px solid var(--line); border-radius: var(--r-lg); filter: grayscale(35%) invert(92%) hue-rotate(180deg) contrast(.9); box-shadow: var(--sh); }

/* ----------------------------------------------------------------------------
   16. FORMS + POPUP
   -------------------------------------------------------------------------- */
main input, main select, main textarea,
.popup_form input, .popup_form select, .popup_form textarea {
  width:100%; background: var(--surface-2) !important; border:1px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important; color: var(--ink) !important; font-family: var(--font-body);
  font-size:1rem; padding:.8rem 1rem; transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
main input::placeholder, main textarea::placeholder, .popup_form input::placeholder, .popup_form textarea::placeholder { color: var(--ink-3); opacity:1; }
main input:focus, main select:focus, main textarea:focus, .popup_form input:focus, .popup_form select:focus, .popup_form textarea:focus { outline:none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(232,81,127,.22); }
main select option, .popup_form select option { background: var(--surface); color: var(--ink); }

.popup_form .overlay, #overlay { position:fixed; inset:0; z-index:1050; background: rgba(8,9,14,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.popup_form .form-container, #formContainer { position:fixed; z-index:1051; top:50%; left:50%; transform: translate(-50%,-50%); width: min(640px,92vw); max-height:92vh; overflow-y:auto; background: var(--surface) !important; border:1px solid var(--line-2) !important; border-radius: var(--r-lg) !important; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85) !important; padding: clamp(1.5rem,3vw,2.4rem) clamp(1.25rem,3vw,2.2rem) !important; }
.popup_form .form-container::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background: var(--grad); }
.popup_form .close-btn, .popup_form .close-btn.btn-danger, .popup_form span.close-btn {
  position:absolute; top:1rem; right:1rem; width:40px; height:40px; min-width:40px; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  background: var(--surface-2) !important; border:1px solid var(--line-2) !important;
  border-radius:50% !important; color: transparent !important; font-size:0 !important; line-height:0 !important;
  box-shadow:none !important; cursor:pointer; transition: background var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.popup_form .close-btn::before {
  content:"\00d7" !important; font-size:24px !important; line-height:1 !important;
  font-family: var(--font-body); font-weight:400; color: var(--ink-2) !important;
  -webkit-text-fill-color: var(--ink-2);
}
.popup_form .close-btn:hover { background: var(--pink) !important; transform: rotate(90deg); }
.popup_form .close-btn:hover::before { color:#fff !important; -webkit-text-fill-color:#fff; }
/* +91 prefix chip — make text visible (override any transparent/hidden state) */
.popup_form .input-group-text, .popup_form #basic-addon1 {
  background: var(--surface-3) !important; border:1px solid var(--line-2) !important; border-right:0 !important;
  border-radius: var(--r-sm) 0 0 var(--r-sm) !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink);
  font-family: var(--font-head); font-weight:700; font-size:1rem; padding:0 .95rem !important;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.popup_form h5 { font-family: var(--font-head); font-weight:800; color: var(--ink); font-size: clamp(1.2rem,1rem+1vw,1.5rem); line-height:1.25; margin:0 2.5rem 1.5rem 0 !important; }
.popup_form .fields { margin-bottom:.85rem; }
.popup_form .row { --bs-gutter-x:.85rem; }
.popup_form textarea { min-height:96px; resize:vertical; }
.popup_form .input-group { flex-wrap:nowrap; }
.popup_form .input-group-text { background: var(--surface-3) !important; border:1px solid var(--line-2) !important; border-right:0 !important; border-radius: var(--r-sm) 0 0 var(--r-sm) !important; color: var(--pink) !important; font-family: var(--font-head); font-weight:700; padding:0 .9rem; }
.popup_form .input-group .numbersOnly { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; border-left:0 !important; }
.popup_form #sum-question { font-family: var(--font-head); font-weight:700; color: var(--ink) !important; font-size:1rem; }
.popup_form #btnsubmits { width:100%; background: var(--grad) !important; color:#fff !important; font-family: var(--font-head); font-weight:700; font-size:1rem; border:none; border-radius: var(--r-pill); padding:.95rem; margin-top:.4rem; box-shadow: var(--glow); transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease); }
.popup_form #btnsubmits:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -16px rgba(232,81,127,.55); }
.popup_form #btnsubmits:active { transform: scale(.98); }
.popup_form #regen-sum { width:100%; background: transparent !important; color: var(--ink-2) !important; border:1px solid var(--line-2) !important; border-radius: var(--r-pill); font-family: var(--font-head); font-weight:700; font-size:.9rem; padding:.8rem; transition: border-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.popup_form #regen-sum:hover { border-color: var(--pink) !important; color: var(--ink) !important; }

/* ----------------------------------------------------------------------------
   16b. CONTACT PAGE  (.form / .box / .check-social) — redesigned + font fix
   The page also loads Poppins; force the site fonts to match everything else.
   -------------------------------------------------------------------------- */
.form, .form *, .check-social, .check-social * { font-family: var(--font-body) !important; }
.form h1, .form h2, .form h3, .form h6, .check-social h2,
.form .box h5, .form #sum-question, .form #btnsubmits, .form #regen-sum,
.form .input-group-text { font-family: var(--font-head) !important; }

.form { padding-block: var(--section-y) !important; margin: 0 !important; }
.form .p-1, .form .p-lg-5 { padding: 0 !important; }
.form > .container > .row, .form .p-lg-5 > .row { align-items: stretch; }

/* Left info column */
.form h1 { font-weight: 800; font-size: clamp(2rem,1.4rem+2vw,3rem) !important; color: var(--ink) !important; letter-spacing:-.03em; margin-bottom: 1rem; }
.form h1 span { background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.form > .container .col-lg-6:first-child > p,
.form .p-lg-5 .col-lg-6:first-child > p { color: var(--ink-2) !important; font-size:1.05rem; line-height:1.7; max-width: 46ch; margin-bottom: 2rem !important; }
/* info items as cards */
.form .col-lg-6:first-child .row > [class*="col-"] {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 1.2rem 1.3rem !important; margin: 0 0 1rem 0 !important;
}
.form .col-lg-6:first-child .row { --bs-gutter-x: 1rem; }
.form h6 { color: var(--ink-3) !important; font-weight:700 !important; font-size:.75rem !important; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.6rem !important; }
.form h6 img { width:16px; height:16px; object-fit:contain; filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(2500%) hue-rotate(310deg); opacity:.9; }
.form .col-lg-6:first-child a { display:block; color: var(--ink) !important; font-size:1rem; font-weight:500; margin-bottom:.2rem; transition: color var(--t1) var(--ease); }
.form .col-lg-6:first-child a:hover { color: var(--pink) !important; }

/* Right form panel */
.form .box {
  background: var(--surface) !important; border:1px solid var(--line-2) !important;
  border-radius: var(--r-lg) !important; padding: clamp(1.5rem,3vw,2.5rem) !important;
  box-shadow: var(--sh); position: relative; overflow:hidden;
}
.form .box::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background: var(--grad); }
.form .box .fields { margin-bottom: .9rem; }
.form .box .row { --bs-gutter-x: .85rem; }
.form .box input, .form .box select, .form .box textarea {
  width:100%; background: var(--surface-2) !important; border:1px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important; color: var(--ink) !important; font-size:1rem; padding:.85rem 1rem !important; height:auto;
}
.form .box input::placeholder, .form .box textarea::placeholder { color: var(--ink-3) !important; }
.form .box input:focus, .form .box select:focus, .form .box textarea:focus { outline:none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(232,81,127,.22); }
.form .box textarea, .form .box #floatingTextarea { min-height: 110px; resize: vertical; background: var(--surface-2) !important; color: var(--ink) !important; }
.form .box .input-group { flex-wrap:nowrap; }
.form .box .input-group-text, .form .box #basic-addon1 { background: var(--surface-3) !important; border:1px solid var(--line-2) !important; border-right:0 !important; border-radius: var(--r-sm) 0 0 var(--r-sm) !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink); font-weight:700; padding:0 .95rem; display:inline-flex; align-items:center; }
.form .box .input-group .numbersOnly { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; border-left:0 !important; }
.form .box #sum-question { color: var(--ink) !important; font-weight:700; }
.form .box #btnsubmits { width:100%; background: var(--grad) !important; color:#fff !important; font-weight:700; font-size:1.02rem; border:none; border-radius: var(--r-pill); padding:.95rem; box-shadow: var(--glow); transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease); }
.form .box #btnsubmits:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -16px rgba(232,81,127,.55); }
.form .box #regen-sum { width:100%; background: transparent !important; color: var(--ink-2) !important; border:1px solid var(--line-2) !important; border-radius: var(--r-pill); font-weight:700; font-size:.9rem; padding:.8rem; }
.form .box #regen-sum:hover { border-color: var(--pink) !important; color: var(--ink) !important; }

/* Map section */
.form + section iframe, .home-map iframe { border:1px solid var(--line) !important; border-radius: var(--r-lg) !important; }

/* Social handles */
.check-social { padding-block: var(--section-y) !important; }
.check-social h2 { font-weight:800; margin-bottom: 1.5rem; }
.check-social .d-flex a { width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--line-2); border-radius:50%; transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t2) var(--ease); }
.check-social .d-flex a:hover { border-color: var(--pink); background: rgba(232,81,127,.1); transform: translateY(-4px); }
.check-social .d-flex a svg { width:24px; height:24px; }
.check-social .d-flex a svg path { fill: var(--ink-2); transition: fill var(--t2) var(--ease); }
.check-social .d-flex a:hover svg path { fill: var(--pink); }

/* ----------------------------------------------------------------------------
   16c. OUR CLIENTS PAGE  (our-clients.php)
   -------------------------------------------------------------------------- */
.clients-hero { position:relative; text-align:center; padding: clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; isolation:isolate; }
.clients-hero::before { content:""; position:absolute; z-index:-1; inset:-20% 0 auto 0; height:420px;
  background: radial-gradient(50% 60% at 50% 10%, rgba(122,108,214,.22), transparent 70%), radial-gradient(40% 50% at 78% 20%, rgba(232,81,127,.16), transparent 72%), radial-gradient(36% 46% at 30% 30%, rgba(242,156,72,.12), transparent 72%);
  filter: blur(24px); pointer-events:none; }
.clients-hero .brands-eyebrow { margin-bottom: 1rem; }
.clients-hero h1 { font-family: var(--font-head); font-weight:800; font-size: clamp(2.2rem,1.4rem+2.8vw,3.8rem); letter-spacing:-.03em; color: var(--ink); margin:0 auto .9rem; max-width: 18ch; }
.clients-hero h1 span { background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.clients-hero p { color: var(--ink-2); font-size:1.08rem; line-height:1.7; max-width: 60ch; margin:0 auto; }
.clients-hero-actions { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top: 2rem; }

.clients-grid-section { padding-block: clamp(2.5rem,5vw,4rem); }
.clients-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.clients-grid .client-cell {
  margin:0; display:flex; align-items:center; justify-content:center;
  height: 120px; padding: 20px 26px; box-sizing:border-box;
  background:#FFFFFF; border:1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.clients-grid .client-cell img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition: transform var(--t2) var(--ease); }
.clients-grid .client-cell:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.clients-grid .client-cell:hover img { transform: scale(1.05); }

.clients-cta { padding-block: var(--section-y); }
.clients-cta > .container { position:relative; overflow:hidden; text-align:center;
  background: radial-gradient(90% 130% at 0% 0%, rgba(122,108,214,.24), transparent 55%), radial-gradient(90% 130% at 100% 100%, rgba(242,156,72,.18), transparent 55%), var(--surface);
  border:1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(2.5rem,6vw,4.5rem); box-shadow: var(--sh); }
.clients-cta h2 { font-weight:800; margin-bottom:.75rem; }
.clients-cta h2 span { background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.clients-cta p { color: var(--ink-2); margin-bottom:1.75rem !important; }

@media (max-width: 575px) { .clients-grid { grid-template-columns: repeat(2, 1fr); gap:.7rem; } .clients-grid .client-cell { height:96px; padding:14px 16px; } }

/* ----------------------------------------------------------------------------
   17. FOOTER  — symmetric grid, real logo
   -------------------------------------------------------------------------- */
footer { background: var(--bg-2); border-top:1px solid var(--line); }
footer .foot { padding-block: clamp(3rem,6vw,5rem); }
footer .foot > .container > .row { align-items: flex-start; }
footer .foot img { filter:none; }
footer .foot .col-lg-5 > img { height:46px; width:auto; margin-bottom:1.25rem; }
footer .reach { display:block; color: var(--ink); font-family: var(--font-head); font-weight:700; font-size:1.05rem; margin:.25rem 0 1rem; }
footer h6 { color: var(--ink-2); font-family: var(--font-body); font-weight:400; font-size:.9rem; line-height:1.6; margin-bottom:.4rem; }
footer h6[style] { color: var(--ink-3) !important; font-weight:700 !important; font-size:.72rem !important; letter-spacing:.1em; text-transform:uppercase; margin-top:1rem; }
footer h4 { color: var(--ink); font-family: var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding-bottom:.85rem; margin-bottom:1rem; border-bottom:1px solid var(--line); }
footer li { list-style:none; margin-bottom:.55rem; }
footer li a { color: var(--ink-2); font-size:.94rem; display:inline-block; transition: color var(--t1) var(--ease), transform var(--t1) var(--ease); }
footer li a:hover { color: var(--pink); transform: translateX(3px); }
footer .col-lg-7 .row > [class*="col-"] { margin-bottom:1.5rem; }
footer .col-lg-4 .d-flex a { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:50%; transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t2) var(--ease); }
footer .col-lg-4 .d-flex a:hover { border-color: var(--pink); background: rgba(232,81,127,.1); transform: translateY(-3px); }
footer .col-lg-4 .d-flex a img { height:18px; width:18px; filter: brightness(0) invert(1); opacity:.85; }
footer hr { background: var(--line); border:0; height:1px; opacity:1; margin:0; }
footer .foot-bottom { padding-block:1.5rem; }
footer .foot-bottom .row { align-items:center; }
footer .foot-bottom h3, footer .foot-bottom h3 a { font-family: var(--font-body); font-size:.8rem; color: var(--ink-3); font-weight:400; margin:0; }
footer .foot-bottom .d-flex { gap:1.75rem !important; }
footer .foot-bottom h3 a:hover { color: var(--pink); }

/* ----------------------------------------------------------------------------
   18. FLOAT + STICKY CTAs
   -------------------------------------------------------------------------- */
.float-btn { box-shadow: var(--sh); }
.whatsapp-float { background:#25d366 !important; }
.call-float { background: var(--pink) !important; }
.sticky-button { position:fixed; bottom:0; left:0; right:0; z-index:1040; background: var(--surface); border-top:1px solid var(--line); }
.sticky-button button { width:100%; background:transparent; border:none; padding:.95rem; }
.sticky-button button a { color: var(--ink) !important; font-family: var(--font-head); font-weight:700; }
.sticky-button .col-6:last-child button { background: var(--grad); }
.sticky-button .whatsapp-track-btn { color:#fff !important; }

/* ----------------------------------------------------------------------------
   19. SCROLL-REVEAL + a11y
   -------------------------------------------------------------------------- */
.wow { opacity:1; }
html.cg-io .cg-reveal { opacity:0; transform: translateY(26px); }
html.cg-io .cg-reveal.cg-in { opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
a:focus-visible, button:focus-visible, .nav-link:focus-visible, .accordion-button:focus-visible { outline:2px solid var(--pink); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-timecode .tc-rec::before, .hero-marquee-track, .home-trust .logos-slide { animation:none !important; }
}
@media (hover:none) { .col-box:hover, .post-slide:hover, .home-ready .box:hover, .count-box:hover { transform:none; } }

/* ----------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) { :root { --section-y: clamp(3.5rem,9vw,5rem); } .counts .count-box { margin-bottom:1rem; } }
@media (max-width: 575px) { .home-trust .logos-slide img { height:44px; } footer .col-lg-4 .d-flex { justify-content:flex-start; } }