/* ==========================================================================
   INNOVENTURE FINTECH PVT LTD — CORE STYLESHEET
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design Tokens (colours, type, spacing, elevation)
   02. Dark Theme Overrides
   03. Base & Reset
   04. Accessibility Utilities
   05. Reusable Components (buttons, glass cards, badges, links)
   06. Preloader & Scroll Progress
   07. Top Header Bar
   08. Navigation
   09. Hero Section
   10. Breadcrumbs
   11. Section Framework
   12. About
   13. Why Choose Us
   14. Filter Bar
   15. Services
   16. Products
   17. Industries
   18. Process Timeline
   19. Portfolio
   20. Technology Stack
   21. Counters
   22. Testimonials
   23. Careers
   24. Blogs
   25. FAQ
   26. CTA
   27. Contact
   28. Footer & Newsletter
   29. Floating UI (WhatsApp, top, chat, sticky CTA, cookies)
   30. Keyframes
   31. Motion Preferences & Print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand palette ----
     Every value below is sampled straight out of logo.webp (653×130, RGBA) —
     measured, not eyeballed. Region map, for anyone re-deriving them:

       INN     navy   x   0–218
       globe          x 158–221   (ring #0060B0, cyan nodes, green nodes)
       VENTURE red    x 227–650
       FINTECH grey   y  86–129

     Navy and red are never gradient partners: mixed, they pass through a
     muddy brown. Navy→cyan is the brand gradient (it already exists in the
     globe); red is reserved for CTAs, hovers and highlights. */
  --c-primary:      #283090;  /* navy  — INN wordmark */
  --c-secondary:    #00A8E8;  /* cyan  — globe nodes */
  --c-accent:       #A81828;  /* red   — VENTURE wordmark */
  --c-blue-mid:     #0060B0;  /* blue  — globe ring */
  --c-green:        #A0C838;  /* green — globe nodes */
  --c-green-600:    #5E7D20;  /* darkened globe green — meets AA on white */
  --c-lime:         #C0D840;  /* lime  — globe nodes */
  --c-grey:         #808080;  /* grey  — FINTECH wordmark */
  --c-dark:         #121844;  /* deepest navy, on the logo navy's hue */
  --c-light:        #F7F9FC;

  /* ---- Primary (navy #283090) tints ---- */
  --c-primary-50:   #EFF0F9;
  --c-primary-100:  #DCDEF2;
  --c-primary-600:  #202671;
  --c-primary-700:  #181D55;

  /* ---- Accent (red #A81828) tints ---- */
  --c-accent-50:    #FBEDEF;
  --c-accent-100:   #F4D3D7;
  --c-accent-600:   #8A1420;
  --c-accent-700:   #6C0F19;

  /* ---- Semantic surfaces (light theme defaults) ---- */
  --bg-body:        #FFFFFF;
  --bg-tint:        var(--c-light);
  --bg-elevated:    #FFFFFF;
  --bg-dark:        var(--c-dark);

  /* ---- Text ---- */
  --t-heading:      var(--c-dark);
  --t-body:         #5A6274;
  --t-muted:        var(--c-grey);
  --t-inverse:      #FFFFFF;
  --t-inverse-soft: rgba(255, 255, 255, .72);

  /* ---- Borders & lines ---- */
  --border:         rgba(18, 24, 68, .10);
  --border-strong:  rgba(18, 24, 68, .16);

  /* ---- Glassmorphism ---- */
  --glass-bg:       rgba(255, 255, 255, .68);
  --glass-bg-solid: rgba(255, 255, 255, .92);
  --glass-border:   rgba(255, 255, 255, .85);
  --glass-blur:     18px;
  --glass-shadow:   0 8px 32px rgba(18, 24, 68, .08);

  /* ---- Glass on dark backgrounds ---- */
  --glass-dark-bg:     rgba(255, 255, 255, .07);
  --glass-dark-border: rgba(255, 255, 255, .14);

  /* ---- Gradients ---- */
  --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
  --grad-accent:  linear-gradient(135deg, var(--c-accent) 0%, #D0342E 100%);
  --grad-vivid:   linear-gradient(135deg, var(--c-primary) 0%, #0060B0 55%, var(--c-secondary) 100%);
  --grad-globe:   linear-gradient(135deg, var(--c-secondary) 0%, var(--c-green) 100%);
  --grad-dark:    linear-gradient(160deg, #0B1136 0%, var(--c-dark) 45%, #283090 100%);
  --grad-text:    linear-gradient(100deg, var(--c-primary) 0%, #0060B0 55%, var(--c-secondary) 100%);

  /* ---- Elevation ---- */
  --sh-sm:   0 2px 8px  rgba(18, 24, 68, .06);
  --sh-md:   0 8px 24px rgba(18, 24, 68, .08);
  --sh-lg:   0 18px 48px rgba(18, 24, 68, .12);
  --sh-xl:   0 30px 70px rgba(18, 24, 68, .16);
  --sh-brand:0 14px 34px rgba(40, 48, 144, .28);
  --sh-accent:0 14px 34px rgba(168, 24, 40, .3);

  /* ---- Typography ----
     Poppins throughout, headings and body. It is a geometric face — wider,
     rounder and with a smaller x-height than a grotesque like Inter — so it
     is NOT a drop-in swap. Body copy gets more leading (1.8) and a touch of
     negative tracking to close the letter gaps; headings get progressively
     tighter tracking as they grow, which is what stops large geometric type
     reading as "poster" rather than "corporate". */
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — min at 360px, max at 1400px.
     Scaled up from the previous set: large, confident headings with tight
     tracking and generous whitespace is the biggest single lever on how
     "enterprise" a page reads. */
  --fs-hero:  clamp(2.3rem,  1.25rem + 4.4vw, 4.5rem);
  --fs-h2:    clamp(1.8rem,  1.22rem + 2.4vw, 3rem);
  --fs-h3:    clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --fs-lead:  clamp(1rem,    0.95rem + 0.32vw, 1.15rem);
  --fs-body:  0.97rem;   /* Poppins reads larger than Inter at the same px */
  --fs-sm:    0.86rem;
  --fs-xs:    0.76rem;

  /* ---- Tracking ---- */
  --tr-hero: -.038em;
  --tr-head: -.024em;
  --tr-body: -.003em;
  --tr-caps:  .12em;     /* uppercase labels need the opposite treatment */

  /* ---- Radii ---- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* ---- Spacing ----
     Deliberately generous. Whitespace is the cheapest premium signal there is. */
  --sp-section: clamp(4.5rem, 2.8rem + 5.6vw, 8.5rem);
  --gutter: 1.5rem;

  /* ---- Motion ---- */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast:   .18s;
  --d-base:   .32s;
  --d-slow:   .6s;

  /* ---- Layers ---- */
  --z-nav:      1030;
  --z-fab:      1040;
  --z-chat:     1045;
  --z-cookie:   1050;
  --z-preload:  9999;

  /* Fixed chrome height, used by scroll-margin so anchors land correctly */
  --nav-h: 78px;
}


/* ==========================================================================
   02. DARK THEME OVERRIDES
   Applied via [data-theme="dark"] on <html>. Toggle is persisted in
   localStorage and falls back to prefers-color-scheme on first visit.
   ========================================================================== */
[data-theme="dark"] {
  --bg-body:     #080C24;
  --bg-tint:     #0C1130;
  --bg-elevated: #111740;
  --bg-dark:     #05081A;

  --t-heading:   #F2F4FC;
  --t-body:      #AEB6CE;
  --t-muted:     #8089A4;

  --border:        rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);

  --glass-bg:       rgba(255, 255, 255, .05);
  --glass-bg-solid: rgba(17, 23, 64, .92);
  --glass-border:   rgba(255, 255, 255, .11);
  --glass-shadow:   0 8px 32px rgba(0, 0, 0, .4);

  /* Navy is too close to the dark canvas to read as a tint here — the cyan
     end of the brand gradient carries the accent surfaces instead. */
  --c-primary-50:  rgba(0, 168, 232, .12);
  --c-primary-100: rgba(0, 168, 232, .22);
  --c-accent-50:   rgba(168, 24, 40, .16);
  --c-accent-100:  rgba(168, 24, 40, .3);

  /* The darkened green reads as near-black here — flip to the light side */
  --c-green-600:   #B8DC50;

  /* --grad-text starts on the logo navy, which all but disappears against this
     canvas — the first word of every gradient headline was dropping out. Lift
     the navy end to a tint of itself; the hue and the navy→cyan travel stay. */
  --grad-text: linear-gradient(100deg, #6373E4 0%, #00A8E8 58%, #7FDBFF 100%);

  --sh-sm: 0 2px 8px   rgba(0, 0, 0, .3);
  --sh-md: 0 8px 24px  rgba(0, 0, 0, .36);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, .46);
  --sh-xl: 0 30px 70px rgba(0, 0, 0, .55);
}


/* ==========================================================================
   03. BASE & RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;              /* Poppins needs more leading than Inter */
  letter-spacing: var(--tr-body);
  color: var(--t-body);
  background: var(--bg-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}

/* Page transition — body fades in once assets are ready (see script.js) */
body.is-loading { overflow: hidden; }
body.is-ready main,
body.is-ready .footer { animation: pageIn .7s var(--e-out) both; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--t-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tr-head);
  margin: 0 0 .6rem;
}
/* Smaller headings don't want the same tightening — tracking scales with size */
h3, h4, h5, h6 { letter-spacing: -.015em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}
a:hover { color: var(--c-accent); }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; }

/* Anchors must clear the fixed header */
section[id],
[id="home"] { scroll-margin-top: var(--nav-h); }

/* Consistent, visible focus ring across the whole site (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--c-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-primary);
  color: #fff;
}

/* Branded scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-tint); }
::-webkit-scrollbar-thumb {
  background: var(--grad-primary);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-tint);
}


/* ==========================================================================
   04. ACCESSIBILITY UTILITIES
   ========================================================================== */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: .8rem 1.4rem;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--d-base) var(--e-out);
}
.skip-link:focus { top: 0; color: #fff; }

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-secondary);
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 0 rgba(0, 168, 232, .7);
  animation: pulse 2s infinite;
}
.pulse-dot--green {
  background: var(--c-green);
  box-shadow: 0 0 0 0 rgba(160, 200, 56, .7);
}


/* ==========================================================================
   05. REUSABLE COMPONENTS
   ========================================================================== */

/* ---- Gradient text ---- */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for browsers that ignore background-clip on text */
  -webkit-text-fill-color: transparent;
}
.text-gradient-light {
  background: linear-gradient(100deg, var(--c-secondary) 0%, #A5B4FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Glass card : the signature surface of this design system ---- */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}

/* Progressive enhancement: opaque fallback where backdrop-filter is absent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: var(--glass-bg-solid); }
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: var(--r-pill);
  padding: .78rem 1.75rem;
  border: none;
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              background-position var(--d-slow) var(--e-out),
              color var(--d-base) var(--e-out);
}
.btn-lg { padding: 1.02rem 2.25rem; font-size: .98rem; }
.btn-sm { padding: .52rem 1.2rem; font-size: var(--fs-sm); }

/* Primary CTA — red, drawn from the VENTURE wordmark.
   Red appears ONLY here and on hover/highlight states, which is what makes it
   read as a call to action rather than as decoration. */
.btn-gradient {
  position: relative;
  overflow: hidden;
  background: var(--grad-accent);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: var(--sh-accent);
}
.btn-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
  transform: translateX(-100%);
  transition: transform var(--d-slow) var(--e-out);
}
.btn-gradient:hover,
.btn-gradient:focus-visible {
  color: #fff;
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(168, 24, 40, .42);
}
.btn-gradient:hover::after { transform: translateX(100%); }
.btn-gradient:active { transform: translateY(-1px); }

/* Glass button — for use over imagery and gradients */
.btn-glass {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .32);
  color: var(--t-heading);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover,
.btn-glass:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
  color: var(--t-heading);
  transform: translateY(-3px);
}
/* On dark backdrops the glass button carries white text */
.section--dark .btn-glass,
.cta .btn-glass,
.counters .btn-glass,
[data-theme="dark"] .btn-glass { color: #fff; }
[data-theme="dark"] .hero .btn-glass:hover { color: #fff; }

/* Outline button with a gradient border, drawn via double-background */
.btn-outline-gradient {
  position: relative;
  color: var(--c-primary);
  background:
    linear-gradient(var(--bg-body), var(--bg-body)) padding-box,
    var(--grad-vivid) border-box;
  border: 2px solid transparent;
}
.btn-outline-gradient:hover,
.btn-outline-gradient:focus-visible {
  color: #fff;
  background: var(--grad-vivid) border-box;
  transform: translateY(-3px);
  box-shadow: var(--sh-brand);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--t-body);
}
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

.cta__btn-primary { color: var(--c-primary); font-weight: 700; }
.cta__btn-primary:hover { color: var(--c-primary-700); transform: translateY(-3px); }

/* Submit button loading state */
.btn__spinner[hidden] { display: none; }
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__spinner { display: inline; }

/* ---- "Learn More" style link with a travelling arrow ---- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-primary);
  margin-top: auto;
  padding-top: .35rem;
}
.link-more i { transition: transform var(--d-base) var(--e-spring); }
.link-more:hover { color: var(--c-accent); }
.link-more:hover i { transform: translateX(5px); }

/* ---- Section badge (eyebrow pill) ---- */
.section__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-primary-50);
  border: 1px solid var(--c-primary-100);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.section__badge--light {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: var(--c-secondary);
}


/* ==========================================================================
   06. PRELOADER & SCROLL PROGRESS
   ========================================================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preload);
  display: grid;
  place-items: center;
  background: var(--bg-body);
  transition: opacity .55s var(--e-out), visibility .55s;
}
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner { text-align: center; }

/* Innoventure globe (favicon mark) pulsing inside a spinning brand-coloured arc */
.preloader__globe {
  position: relative;
  width: 94px;
  height: 94px;
  margin: 0 auto 1.7rem;
  display: grid;
  place-items: center;
}
.preloader__globe img {
  width: 66px;
  height: 66px;
  animation: globePulse 1.8s var(--e-out) infinite;
}
.preloader__globe::before,
.preloader__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1.4s linear infinite;
}
.preloader__globe::before { border-top-color: var(--c-secondary); }
.preloader__globe::after {
  inset: 6px;
  border-top-color: var(--c-accent);
  animation-duration: 2s;
  animation-direction: reverse;
}
@keyframes globePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.preloader__brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .38em;
  margin: 0 0 .35rem;
  padding-left: .38em; /* optically re-centre the tracked text */
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.preloader__tag {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--t-muted);
  letter-spacing: .04em;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: calc(var(--z-nav) + 5);
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-vivid);
  box-shadow: 0 0 12px rgba(0, 168, 232, .6);
  transition: width .1s linear;
}


/* ==========================================================================
   07. TOP HEADER BAR
   ========================================================================== */
.topbar {
  background: var(--grad-dark);
  color: var(--t-inverse-soft);
  font-size: var(--fs-xs);
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  flex-wrap: wrap;
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  flex-wrap: wrap;
}
.topbar__contact li,
.topbar__contact li a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--t-inverse-soft);
}
.topbar__contact i { color: var(--c-secondary); }
.topbar__contact a:hover { color: #fff; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.topbar__social {
  display: flex;
  gap: .45rem;
  margin: 0;
}
.topbar__social a {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--t-inverse-soft);
  font-size: .72rem;
  transition: transform var(--d-base) var(--e-spring),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.topbar__social a:hover {
  background: var(--grad-primary);
  color: #fff;
  transform: translateY(-3px);
}

.topbar__pay {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem 1rem;
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.topbar__pay:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(168, 24, 40, .45);
}


/* ==========================================================================
   08. NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

#mainNav {
  padding: .85rem 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              padding var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}

/* Solid state — toggled by script.js once the page scrolls */
#mainNav.is-stuck {
  padding: .5rem 0;
  background: var(--glass-bg-solid);
  border-bottom-color: var(--border);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ==========================================================================
   BRAND
   The official logo.webp, used as supplied — no filters, no recolouring.
   Height is the only knob; the 5.02:1 aspect ratio does the rest.
   ========================================================================== */
.navbar-brand,
.footer__brand {
  display: flex;
  align-items: center;
  padding: 0;
}

/* Height is the only knob — the 5.02:1 ratio sets the width (36px -> ~181px).
   At 44px the lockup filled 61% of the 72px navbar and its wordmark out-shouted
   the 15px nav links; ~50% sits it alongside them instead of above them. */
.brand__logo {
  height: 36px;
  width: auto;          /* overrides the intrinsic width attribute */
  display: block;
  /* The global reset is border-box, which would make the white plate's padding
     eat INTO this height — the logo shrank by ~40% the moment dark mode added
     the plate. content-box keeps `height` meaning the artwork itself. */
  box-sizing: content-box;
  transition: transform var(--d-base) var(--e-out);
}
#mainNav.is-stuck .brand__logo { height: 33px; }
.navbar-brand:hover .brand__logo,
.footer__brand:hover .brand__logo { transform: scale(1.03); }

/* ---- Dark surfaces ----
   The artwork is transparent and inked in navy (#283090) and grey (#808080),
   both of which disappear against the dark navy footer / dark theme.

   FOOTER — knockout. `logo-white.webp` is generated from logo.webp: every inked
   pixel forced to white, alpha channel untouched, same 653x130 box. That is a
   real reverse logo, not `filter: invert()` — inverting maps navy to yellow and
   red to cyan before it ever gets to white, and mangles the globe.
   `content:` swaps the pixels while the <img src>/alt on all three pages keep
   pointing at the real mark, so the accessible name is unchanged and there is
   exactly one line to revert. Regenerate with scratchpad/white_logo.py.

   NAV in dark mode — still the white plate the artwork was designed for. The
   mark is small there and carries the red and the globe; knocking it out would
   throw away the brand colour at the one place it reads best. If an official
   reverse file ever lands, point `content:` at it and delete the plate. */
.footer__brand .brand__logo {
  content: url("/images/logo-white.webp");
  height: 40px;
}
[data-theme="dark"] .navbar-brand .brand__logo {
  background: #FFFFFF;
  padding: .3rem .5rem;   /* sits outside the height — see box-sizing above */
  border-radius: var(--r-sm);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

/* ---- Links ---- */
.navbar-nav { gap: .12rem; }

.nav-link {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .93rem;
  color: var(--t-heading);
  padding: .5rem .8rem;
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--e-out);
}
/* Underline sweep on hover / active */
.nav-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.nav-link:hover,
.nav-link.active { color: var(--c-primary); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ---- Services mega-menu ----
   A Bootstrap dropdown restyled into a categorised panel of all 26 service
   pages. Below xl (1200px) the navbar collapses and Bootstrap renders the menu
   inline in the hamburger drawer — there it's a plain one-column list; the
   floating card styling is scoped to >=1200px. */
.nav-mega .dropdown-toggle::after {
  margin-left: .35rem;
  vertical-align: .1em;
  border-top-color: currentColor;
}
.nav-mega__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem 1.4rem;
}
.nav-mega__col { display: grid; gap: .1rem; align-content: start; }
.nav-mega__col--web       { --mc: #2563EB; }
.nav-mega__col--software  { --mc: #7C3AED; }
.nav-mega__col--mobile    { --mc: #16A34A; }
.nav-mega__col--backend   { --mc: #0891B2; }
.nav-mega__col--marketing { --mc: #E11D48; }
.nav-mega__col--cloud     { --mc: #EA8A00; }
.nav-mega__col--payments  { --mc: #2563EB; }
.nav-mega__col--lending   { --mc: #199868; }
.nav-mega__col--markets   { --mc: #7C3AED; }
.nav-mega__col--chain     { --mc: #E08A00; }
.nav-mega__col--business  { --mc: #2563EB; }
.nav-mega__col--industry  { --mc: #199868; }
.nav-mega__col--commerce  { --mc: #E11D48; }
.nav-mega__col--ind-public     { --mc: #2563EB; }
.nav-mega__col--ind-commerce   { --mc: #199868; }
.nav-mega__col--ind-industrial { --mc: #E08A00; }
.nav-mega__col--ind-growth     { --mc: #7C3AED; }
.nav-mega__head {
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mc, var(--t-muted));
  margin-bottom: .3rem;
}
.nav-mega__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .5rem;
  border-radius: var(--r-sm);
  transition: background var(--d-fast) var(--e-out);
}
.nav-mega__item:hover,
.nav-mega__item.active { background: var(--c-primary-50); }
.nav-mega__ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: .8rem;
  color: var(--mc, var(--c-primary));
  background: color-mix(in srgb, var(--mc, var(--c-primary)) 13%, transparent);
}
.nav-mega__txt { display: grid; min-width: 0; }
.nav-mega__txt strong {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--t-heading);
  line-height: 1.25;
}
.nav-mega__item.active .nav-mega__txt strong { color: var(--c-primary); }
.nav-mega__txt small {
  font-size: .69rem;
  color: var(--t-muted);
  line-height: 1.2;
}
.nav-mega__all {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .84rem;
  color: var(--c-primary);
}
.nav-mega__all i { transition: transform var(--d-base) var(--e-spring); }
.nav-mega__all:hover i { transform: translateX(4px); }

/* Desktop: a floating card, centred under the navbar so a 760px panel never
   runs off either edge. `data-bs-display="static"` disables Popper so these
   position rules win; `.nav-mega` goes static so the panel anchors to the
   sticky header rather than the narrow toggle. */
@media (min-width: 1200px) {
  .nav-mega { position: static; }
  .nav-mega__panel.dropdown-menu {
    width: min(860px, calc(100vw - 3rem));
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 1.3rem 1.45rem 1.1rem;
    margin-top: .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    /* Fully opaque — --glass-bg-solid is only 92% and let the hero bleed through.
       --bg-elevated is solid, so the menu reads as a proper panel. */
    background: var(--bg-elevated);
    box-shadow: var(--sh-lg);
    /* Never run past the bottom of the screen — cap to the viewport and scroll
       inside the panel on short laptops rather than pushing items off-page. */
    max-height: calc(100vh - var(--nav-h) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-mega__grid { grid-template-columns: repeat(3, 1fr); }

  /* Fintech panel: four category families read best as four side-by-side
     columns, so it gets its own wider panel and a 4-track grid. */
  .nav-mega__panel--fintech.dropdown-menu { width: min(1000px, calc(100vw - 3rem)); }
  .nav-mega__grid--fintech { grid-template-columns: repeat(4, 1fr); }

  /* Products: three families, a 3-track grid on a slightly narrower panel. */
  .nav-mega__panel--products.dropdown-menu { width: min(760px, calc(100vw - 3rem)); }
  .nav-mega__grid--products { grid-template-columns: repeat(3, 1fr); }

  /* Industries: four families, a 4-track grid like Fintech. */
  .nav-mega__panel--industries.dropdown-menu { width: min(1000px, calc(100vw - 3rem)); }
  .nav-mega__grid--industries { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile / collapsed drawer: the panel renders inline as a plain list, not a
   floating card. */
@media (max-width: 1199.98px) {
  .nav-mega__panel.dropdown-menu {
    position: static;
    border: 0;
    box-shadow: none;
    padding: .25rem 0 .5rem .4rem;
    background: transparent;
  }
  .nav-mega__all { margin-top: .6rem; }
}

/* ---- Theme toggle ---- */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--glass-bg);
  color: var(--t-heading);
  cursor: pointer;
  transition: transform var(--d-base) var(--e-spring),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.theme-toggle:hover {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  transform: rotate(-25deg) scale(1.08);
}

/* ---- Animated hamburger ---- */
.navbar-toggler {
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  box-shadow: none !important;
}
.navbar-toggler__bars {
  display: grid;
  gap: 5px;
  justify-items: center;
}
.navbar-toggler__bars i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--t-heading);
  transition: transform var(--d-base) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler__bars i:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   09. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(680px, 94vh, 1040px);
  display: flex;
  align-items: center;
  padding: 5rem 0 7rem;
  margin-top: calc(var(--nav-h) * -1); /* slide under the transparent navbar */
  padding-top: calc(var(--nav-h) + 3rem);
  background:
    radial-gradient(1100px 620px at 78% 8%,  rgba(0, 168, 232, .16), transparent 60%),
    radial-gradient(900px 560px at 12% 92%, rgba(160, 200, 56, .16), transparent 60%),
    linear-gradient(170deg, var(--c-light) 0%, #EAF2FF 55%, #E2ECFF 100%);
  overflow: hidden;
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(1100px 620px at 78% 8%,  rgba(0, 168, 232, .14), transparent 60%),
    radial-gradient(900px 560px at 12% 92%, rgba(160, 200, 56, .18), transparent 60%),
    var(--grad-dark);
}

.hero__container { position: relative; z-index: 3; }

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Faint technical grid */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(40, 48, 144, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40, 48, 144, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 45%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 5%, transparent 72%);
}
[data-theme="dark"] .hero__grid {
  background-image:
    linear-gradient(to right, rgba(0, 168, 232, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 168, 232, .07) 1px, transparent 1px);
}

/* Floating gradient orbs */
.hero__orbs { position: absolute; inset: 0; z-index: 0; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: .5;
  will-change: transform;
}
.orb--1 {
  width: 420px; height: 420px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, var(--c-secondary), transparent 70%);
  animation: floatOrb 17s ease-in-out infinite;
}
.orb--2 {
  width: 360px; height: 360px;
  bottom: -100px; left: -60px;
  background: radial-gradient(circle, var(--c-accent), transparent 70%);
  animation: floatOrb 21s ease-in-out infinite reverse;
}
.orb--3 {
  width: 280px; height: 280px;
  top: 45%; left: 42%;
  background: radial-gradient(circle, var(--c-primary), transparent 70%);
  opacity: .3;
  animation: floatOrb 25s ease-in-out infinite;
}

/* ---- Copy ---- */

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;          /* 800 in geometric Poppins at this size shouts */
  line-height: 1.06;
  letter-spacing: var(--tr-hero);
  margin-bottom: 1.1rem;
}
.hero__title .text-gradient { display: block; }

.hero__typed-wrap {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem);
  font-weight: 600;
  color: var(--t-heading);
  margin-bottom: 1.5rem;
  min-height: 2.2em; /* reserve space so typing never shifts layout (CLS) */
}
.hero__typed-label { color: var(--t-muted); font-weight: 500; }
.hero__typed { color: var(--c-primary); }
/* Typed.js cursor, restyled to match the brand */
.typed-cursor {
  color: var(--c-secondary);
  font-weight: 400;
  animation: blink .8s infinite;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 0;
}


/* ---- Centred hero copy ----
   Held to a narrow measure so the headline never runs under either hand. */
.hero__center {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.hero__center .hero__title .text-gradient { display: block; }
.hero__center .hero__typed-wrap { justify-content: center; }
.hero__center .hero__cta { justify-content: center; }

/* ---- Scroll cue ---- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .45rem;
  color: var(--t-muted);
  animation: bobble 2.4s ease-in-out infinite;
}
.hero__scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  display: grid;
  justify-items: center;
  padding-top: 6px;
  opacity: .65;
}
.hero__scroll-mouse i {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--c-primary);
  animation: wheel 1.8s ease-in-out infinite;
}
.hero__scroll-text {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero__scroll:hover { color: var(--c-primary); }




/* ==========================================================================
   CLIENTS — Embraced by Top Brands
   A logo wall in each brand's original colours; the card lifts on hover.
   ========================================================================== */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}
.clients__item {
  display: grid;
  place-items: center;
  padding: 1.5rem 1.3rem;
  min-height: 104px;
}
.clients__item img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--d-base) var(--e-spring);
}
.clients__item:hover {
  border-color: var(--c-primary-100);
  box-shadow: var(--sh-lg);
}
.clients__item:hover img { transform: scale(1.05); }

/* Auto-scrolling logo carousel. The track holds two identical copies of the
   logos; each item carries its own right margin so the copies are equal-width
   units and translating the track -50% loops seamlessly. Pauses on hover. */
.clients__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients__track {
  display: flex;
  width: max-content;
  margin: 0;
  animation: clientsScroll 32s linear infinite;
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
.clients__marquee .clients__item {
  flex: 0 0 auto;
  width: 210px;
  margin-right: 1.25rem;
}
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}


/* ==========================================================================
   PARTNER / CERTIFICATION STRIP
   A white card pulled up so it straddles the banner's bottom edge, exactly as
   on the live site. The negative margin is half the card's height.
   ========================================================================== */
.partners {
  position: relative;
  z-index: 5;                 /* above the hero, below the sticky nav */
  margin-top: -3.5rem;
}
.partners__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1.1rem clamp(1rem, 2vw, 2rem);
  overflow: hidden;
}
/* The badges are dark-on-white JPGs shown in their original colours, so the
   card stays light in dark mode — otherwise each one renders as a white
   rectangle. Recolouring them is not an option: they are other companies'
   trademarks and their brand guidelines require them unaltered. */
[data-theme="dark"] .partners__card {
  background: #F4F6FB;
  border-color: rgba(255, 255, 255, .16);
}

/* A CSS conveyor. The track holds two identical groups and slides by exactly
   -50%, so the seam is invisible and it never stalls. */
.partners__marquee {
  display: flex;
  overflow: hidden;
  /* Fade the row out at both edges so badges enter and leave, not pop */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.partners__track {
  display: flex;
  flex: none;
  animation: partnerScroll 34s linear infinite;
}
.partners__marquee:hover .partners__track { animation-play-state: paused; }

.partners__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  padding-right: clamp(2.5rem, 4vw, 4.5rem);
  flex: none;
  margin: 0;
}
/* Badges show in their original colours — these are earned credentials, and
   Google/Semrush/ISO/Meta brand guidelines all expect their marks unaltered. */
.partners__group img {
  width: auto;
  height: 46px;
  max-width: none;
  object-fit: contain;
  transition: transform var(--d-base) var(--e-out);
}
.partners__group img:hover { transform: scale(1.06); }

/* ISO 9001:2015 logo (client-supplied ISO_9001-2015.png) in the partner
   conveyor, linked to the genuine certificate PDF. The img inherits the 46px
   height from .partners__group img; the link just hugs it. */
.partners__group .iso-cert-link { display: inline-flex; align-items: center; height: 46px; }

@keyframes partnerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   11. SECTION FRAMEWORK
   ========================================================================== */
.section {
  position: relative;
  padding: var(--sp-section) 0;
  overflow: hidden;
}
.section--tint { background: var(--bg-tint); }

.section--dark {
  background: var(--grad-dark);
  color: var(--t-inverse-soft);
}
.section--dark .section__title,
.section--dark h3 { color: #fff; }

/* Ambient orbs for dark sections */
.section__bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.section__bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
}
.section__bg-orbs span:nth-child(1) {
  width: 460px; height: 460px;
  top: -140px; left: -100px;
  background: var(--c-primary);
}
.section__bg-orbs span:nth-child(2) {
  width: 400px; height: 400px;
  bottom: -140px; right: -80px;
  background: var(--c-accent);
}
.section--dark .container { position: relative; z-index: 1; }

.section__head {
  max-width: 48rem;
  margin: 0 auto clamp(2.75rem, 1.6rem + 2.6vw, 4.5rem);
  text-align: center;
}
.section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 1.05rem;
}
.section__lead {
  font-size: var(--fs-lead);
  line-height: 1.78;
  color: var(--t-body);
  margin: 0;
}
/* Centred leads read better a little narrower than their heading */
.section__head .section__lead {
  max-width: 44rem;
  margin-inline: auto;
}
.section__lead--light { color: var(--t-inverse-soft); }

/* Left-aligned heads (About / FAQ columns) */
.about .section__head,
.faq .section__title { text-align: left; }


/* ==========================================================================
   12. ABOUT
   ========================================================================== */

/* The intro line and the paragraphs under it are one continuous piece of copy,
   so they share one size. The generic .section__lead is a step larger
   (--fs-lead, ~18px vs ~15.5px), which made the two read as different kinds of
   text rather than a single passage. */
.about .section__lead,
.about__body {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--t-body);
  margin: 0 0 1.1rem;
}

.about__subtitle {
  font-size: var(--fs-h3);
  margin: 1.6rem 0 1rem;
}

.about__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem 1.2rem;
  margin-bottom: 1.6rem;
}
.about__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-heading);
}
.about__list i {
  color: var(--c-primary);
  font-size: .95rem;
  flex: none;
}

.about__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.9rem;
}
.about__call {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--t-heading);
}
.about__call-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary-50);
  color: var(--c-primary);
  transition: transform var(--d-base) var(--e-spring),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.about__call:hover .about__call-icon {
  background: var(--grad-primary);
  color: #fff;
  transform: scale(1.1);
}
.about__call small { display: block; font-size: var(--fs-xs); color: var(--t-muted); }
.about__call strong { font-family: var(--font-head); font-size: 1.02rem; }

/* ---- Visual ---- */
.about__visual { position: relative; }
.about__visual-glow {
  position: absolute;
  inset: 12%;
  background: var(--grad-vivid);
  filter: blur(70px);
  opacity: .16;
  border-radius: 50%;
}
.about__svg { position: relative; width: 100%; height: auto; }

/* ---- About artwork ----
   Surfaces and type are driven from here rather than hardcoded fills, so the
   whole illustration flips for dark mode without a second copy of the SVG. */
.about__svg .a-surface { fill: #FFFFFF; }
.about__svg .a-tile    { fill: #F1F4FC; }
.about__svg .a-grid    { stroke: #121844; stroke-opacity: .07; stroke-width: 1; }
.about__svg .a-axis    { stroke: #121844; stroke-opacity: .14; stroke-width: 1.5; }
.about__svg .a-ring    { stroke: #121844; stroke-opacity: .1; }

.about__svg text { font-family: var(--font-body); }
.about__svg .a-h {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  fill: var(--c-dark);
}
.about__svg .a-sub    { font-size: 10.5px; font-weight: 500; fill: var(--c-grey); }
.about__svg .a-num {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  fill: var(--c-primary);
}
.about__svg .a-lab    { font-size: 9.5px; font-weight: 500; fill: var(--c-grey); }
.about__svg .a-chip-t { font-size: 10px; font-weight: 500; fill: var(--c-grey); }
.about__svg .a-chip-s { font-size: 9px;  font-weight: 500; fill: var(--c-grey); opacity: .8; }
.about__svg .a-chip-n {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  fill: var(--c-dark);
}
.about__svg .a-donut {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  fill: var(--c-dark);
}

/* Dark mode: navy ink and white cards both need flipping */
[data-theme="dark"] .about__svg .a-surface { fill: #16204A; }
[data-theme="dark"] .about__svg .a-tile    { fill: #0E1638; }
[data-theme="dark"] .about__svg .a-grid,
[data-theme="dark"] .about__svg .a-axis,
[data-theme="dark"] .about__svg .a-ring    { stroke: #FFFFFF; }
[data-theme="dark"] .about__svg .a-h,
[data-theme="dark"] .about__svg .a-chip-n,
[data-theme="dark"] .about__svg .a-donut   { fill: #EEF1FA; }
[data-theme="dark"] .about__svg .a-num     { fill: #7C8CEE; }

/* SVG micro-animations */
.about__svg .float-y { animation: floatY 5.5s ease-in-out infinite; transform-origin: center; }
.about__svg .float-y--delay { animation-delay: -2.5s; }
.about__svg .spin-slow {
  animation: spin 44s linear infinite;
  transform-origin: 300px 245px;
}

.about__badge {
  position: absolute;
  right: 2%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.3rem;
  background: var(--glass-bg-solid);
  box-shadow: var(--sh-lg);
}
.about__badge strong {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about__badge span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--t-heading);
  line-height: 1.35;
}

/* ---- Highlight cards under the dashboard ----
   Balance the tall copy column and fill the right side. 2-up, dropping to 1-up
   only on the narrowest phones. Each icon carries its own colour, matched to the
   Why-Choose-Us / Services palette. */
.about__highlights {
  display: grid;
  /* minmax(0,1fr) forces genuinely equal tracks — plain 1fr lets a card's
     longest word push it wider than its neighbour. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.about__highlight {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.05rem;
}
.about__highlight-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.05rem;
  color: var(--hi, var(--c-primary));
  background: color-mix(in srgb, var(--hi, var(--c-primary)) 15%, transparent);
}
.about__highlight-icon--amber  { --hi: #E08A00; }
.about__highlight-icon--cyan   { --hi: #0E8FB8; }
.about__highlight-icon--green  { --hi: #16A34A; }
.about__highlight-icon--violet { --hi: #7C3AED; }
.about__highlight strong {
  display: block;
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--t-heading);
  line-height: 1.25;
}
.about__highlight small {
  font-size: var(--fs-xs);
  color: var(--t-muted);
}


/* ==========================================================================
   12b. CERTIFICATE (about page)
   The scanned certificate is a white A4 portrait. It keeps its own white plate
   in dark mode for the same reason the logo does — the artwork is not ours to
   recolour, and inverting a certificate would misrepresent a legal document.
   ========================================================================== */
.cert__preview {
  display: block;
  padding: .6rem;
  border-radius: var(--r-lg);
  background: #FFFFFF;
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.cert__preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-lg) - .5rem);
}
.cert__preview:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
}
/* The zoom cue sits over the sheet, so it needs its own contrast */
.cert__preview {
  position: relative;
}
.cert__preview::after {
  content: "\f00e";           /* fa-magnifying-glass-plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-vivid);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-spring);
}
.cert__preview:hover::after { opacity: 1; transform: scale(1); }

.cert__meta { display: grid; gap: .9rem; margin: 0 0 1.6rem; }
.cert__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: .3rem 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.cert__row:last-child { border-bottom: 0; padding-bottom: 0; }
.cert__row dt {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--t-muted);
}
.cert__row dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-heading);
}
.cert__row dd strong { font-weight: 700; }
/* Not Bootstrap's .text-muted — that hardcodes a light-theme grey and drops to
   near-invisible on the dark canvas. --t-muted has both sides. */
.cert__aka {
  font-weight: 400;
  color: var(--t-muted);
}


/* ==========================================================================
   12c. SERVICE DETAIL PAGES
   Shared by all 26 service detail pages (website-development, seo, …).
   Reuses the section framework, feature-card, tech-chip, accordion and cta;
   only the page header, breadcrumb, "what you get" card and step cards are new.
   ========================================================================== */
.svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-h) + 3rem) 0 3.5rem;
  margin-top: calc(var(--nav-h) * -1);
  background:
    radial-gradient(900px 500px at 88% 0%, rgba(0, 168, 232, .14), transparent 60%),
    radial-gradient(760px 460px at 4% 100%, rgba(160, 200, 56, .12), transparent 60%),
    linear-gradient(170deg, var(--c-light) 0%, #EAF2FF 60%, #E5EEFF 100%);
}
.svc-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(40, 48, 144, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40, 48, 144, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 70% 30%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 5%, transparent 70%);
}

.svc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.svc-breadcrumb a { color: var(--t-muted); }
.svc-breadcrumb a:hover { color: var(--c-primary); }
.svc-breadcrumb i { font-size: .6rem; color: var(--t-muted); opacity: .7; }
.svc-breadcrumb span { color: var(--c-primary); font-weight: 600; }

.svc-hero__title {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--tr-hero);
  margin: .4rem 0 1rem;
}
.svc-hero__lead {
  font-size: var(--fs-lead);
  color: var(--t-body);
  max-width: 40rem;
  margin-bottom: 1.9rem;
}

/* Centred hero: pages whose hero is a lone text column (no side visual) get their
   content centred instead of hugging the left with an empty right half. Product
   pages use col-lg-7 + the dashboard mockup, so this selector never touches them. */
.svc-hero .row > .col-lg-8 {
  margin-inline: auto;
  text-align: center;
}
.svc-hero .row > .col-lg-8 .svc-hero__lead { margin-inline: auto; }
.svc-hero .row > .col-lg-8 .svc-hero__points {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.svc-hero .row > .col-lg-8 .about__actions { justify-content: center; }

/* Key points: a 2-up checklist under the lead (moved out of the old side card
   now that the hero has an illustration on the right). */
.svc-hero__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem 1.3rem;
  margin: 0 0 1.9rem;
}
.svc-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-heading);
}
.svc-hero__points i { color: var(--c-green-600); font-size: .95rem; flex: none; margin-top: .12rem; }

/* ---- Product UI mockup (hero, per-product "screenshot") --------------------
   A pure CSS app-window: browser chrome + sidebar + stat cards + bar chart +
   data rows. --pm is the product's accent hue (set inline per page). Decorative
   (aria-hidden). Crisp at any DPI, self-contained, gently floating. */
.pm-window {
  --pm: var(--c-primary);
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 68, .06);
  box-shadow: 0 30px 60px rgba(20, 24, 68, .16), 0 2px 8px rgba(20, 24, 68, .06);
  animation: floatY 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pm-window { animation: none; } }
.pm-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: #F4F6FB;
  border-bottom: 1px solid rgba(20, 24, 68, .06);
}
.pm-bar b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pm-bar .d1 { background: #FF5F57; } .pm-bar .d2 { background: #FEBC2E; } .pm-bar .d3 { background: #28C840; }
.pm-bar__url {
  margin-left: 8px; flex: 1; height: 17px; border-radius: 8px; background: #E4E8F2;
  display: flex; align-items: center; gap: 5px; padding: 0 10px;
  font-size: .6rem; color: var(--t-muted); font-weight: 600;
}
.pm-bar__url i { font-size: .55rem; color: var(--c-green-600); }
.pm-app { display: flex; min-height: 246px; }
.pm-side {
  width: 46px; background: color-mix(in srgb, var(--pm) 8%, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 15px 0; border-right: 1px solid rgba(20, 24, 68, .05);
}
.pm-side i { color: var(--pm); font-size: .82rem; opacity: .55; }
.pm-side i.on {
  background: var(--pm); color: #fff; width: 27px; height: 27px;
  border-radius: 8px; display: grid; place-items: center; opacity: 1; font-size: .78rem;
}
.pm-main { flex: 1; padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.pm-head strong { display: block; font-size: .82rem; font-weight: 700; color: var(--t-heading); letter-spacing: -.01em; }
.pm-head span { font-size: .62rem; color: var(--t-muted); }
.pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pm-stat { background: #F7F9FD; border-radius: 10px; padding: 8px 9px; }
.pm-stat b { display: block; font-size: .82rem; font-weight: 700; color: var(--pm); }
.pm-stat small { font-size: .5rem; color: var(--t-muted); letter-spacing: .02em; text-transform: uppercase; }
.pm-chart { display: flex; align-items: flex-end; gap: 6px; height: 52px; }
.pm-chart span { flex: 1; background: color-mix(in srgb, var(--pm) 55%, #fff); border-radius: 4px 4px 0 0; }
.pm-chart span.hi { background: var(--pm); }
.pm-rows { display: flex; flex-direction: column; gap: 7px; }
.pm-row { display: flex; align-items: center; gap: 8px; }
.pm-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--pm); flex: none; }
.pm-row > span:not(.pm-pill) { flex: 1; min-width: 0; font-size: .62rem; font-weight: 500; color: var(--t-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-pill { font-size: .52rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; flex: none; }
.pm-pill--ok   { background: color-mix(in srgb, var(--c-green) 22%, #fff); color: var(--c-green-600); }
.pm-pill--go   { background: color-mix(in srgb, var(--pm) 14%, #fff); color: var(--pm); }
.pm-pill--wait { background: #FFF1DC; color: #B26A00; }

/* ---- Social share row (detail pages, above the CTA) ----------------------- */
.share {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 1.15rem;
  margin: .5rem auto 3.5rem;
}
.share__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--t-heading);
}
.share__label i { color: var(--c-secondary); }
.share__links { display: flex; gap: .6rem; }
.share__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 24, 68, .12);
  background: var(--bg-elevated);
  color: var(--t-body);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.share__btn:hover { transform: translateY(-3px); color: #fff; }
.share__btn--wa:hover   { background: #25D366; border-color: #25D366; }
.share__btn--li:hover   { background: #0A66C2; border-color: #0A66C2; }
.share__btn--fb:hover   { background: #1877F2; border-color: #1877F2; }
.share__btn--x:hover    { background: #000;     border-color: #000; }
.share__btn--copy:hover { background: var(--c-primary); border-color: var(--c-primary); }
.share__btn.copied { background: var(--c-green-600); border-color: var(--c-green-600); color: #fff; }
.share__btn:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* Contact form heading (keeps the heading order h1 -> h2 -> h3 on contact.html) */
.contact__form-title { font-size: 1.3rem; margin-bottom: 1.4rem; color: var(--t-heading); }

/* ---- Blog article page ----------------------------------------------------- */
.blog-post { padding-top: 2.6rem; }
.blog-post__head { max-width: 820px; margin: 0 auto 2.2rem; text-align: center; }
.blog-post__title {
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: var(--tr-head);
  margin: 1rem 0 1.1rem;
}
.blog-post__meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.4rem;
  color: var(--t-muted); font-size: var(--fs-sm); font-weight: 500;
}
.blog-post__meta li { display: inline-flex; align-items: center; gap: .45rem; }
.blog-post__meta i { color: var(--c-secondary); }
.blog-post__cover {
  max-width: 960px; margin: 0 auto 2.6rem;
  border-radius: 20px; overflow: hidden; box-shadow: var(--sh-md);
}
.blog-post__cover img { width: 100%; height: auto; display: block; }

.blog-body { max-width: 760px; margin: 0 auto; }
.blog-body > p:first-of-type { font-size: 1.08rem; color: var(--t-heading); }
.blog-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 2.3rem 0 .9rem; letter-spacing: var(--tr-head); }
.blog-body h3 { font-size: 1.18rem; margin: 1.7rem 0 .6rem; }
.blog-body p { color: var(--t-body); line-height: 1.85; margin-bottom: 1.15rem; }
.blog-body strong { color: var(--t-heading); font-weight: 600; }
.blog-body ul { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .6rem; }
.blog-body ul li { position: relative; padding-left: 1.7rem; color: var(--t-body); line-height: 1.7; }
.blog-body ul li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: .18rem; font-size: .78rem; color: var(--c-green-600);
}
.blog-body blockquote {
  margin: 1.9rem 0; padding: 1.1rem 1.5rem;
  border-left: 4px solid var(--c-secondary);
  background: color-mix(in srgb, var(--c-secondary) 7%, transparent);
  border-radius: 0 12px 12px 0;
  font-size: 1.08rem; font-style: italic; color: var(--t-heading);
}

/* ---- "What you get" card ---- */
.svc-deliver { padding: 2rem 1.9rem; }
.svc-deliver__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  margin-bottom: 1.3rem;
}
.svc-deliver__title i { color: var(--c-secondary); }
.svc-deliver__list { display: grid; gap: .85rem; }
.svc-deliver__list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-heading);
}
.svc-deliver__list i {
  color: #fff;
  background: var(--grad-primary);
  width: 20px; height: 20px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .6rem;
  margin-top: .15rem;
}

/* ---- Process step cards ---- */
.svc-step {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.6rem 1.7rem;
}
.svc-step__num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.svc-step__title { font-size: 1.15rem; margin: .6rem 0 .5rem; }
.svc-step p { font-size: var(--fs-sm); margin: 0; }


/* ==========================================================================
   13. WHY CHOOSE US
   ========================================================================== */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 2.1rem 1.8rem;
  display: flex;
  flex-direction: column;
}
/* Gradient wash that rises on hover */
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-vivid);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
  z-index: 0;
}
.feature-card > * { position: relative; z-index: 1; }

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
  border-color: transparent;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover .feature-card__title,
.feature-card:hover p { color: #fff; }
.feature-card:hover .feature-card__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}
.feature-card:hover .feature-card__no { color: rgba(255, 255, 255, .22); }

.feature-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  border-radius: 18px;
  background: var(--c-primary-50);
  color: var(--c-primary);
  font-size: 1.5rem;
  transition: all var(--d-base) var(--e-spring);
}

/* ---- Per-icon colour (Why Choose Us) ----
   Each of the six carries a --fi; the glyph takes it and the tile is a soft
   wash of the same hue, mixed live so there is one value per card. Only cards
   with a --*-modifier are affected, so the same .feature-card reused on
   about.html (Vision/Mission, Who We Are, Core Values) keeps its plain navy
   icon. Rest state only — hover still floods the card with --grad-vivid and
   knocks the icon white, so the colour hands off cleanly. */
.feature-card__icon[class*="feature-card__icon--"] {
  color: var(--fi);
  background: color-mix(in srgb, var(--fi) 15%, transparent);
}
.feature-card__icon--amber  { --fi: #E08A00; }  /* experience */
.feature-card__icon--blue   { --fi: #2563EB; }  /* certification */
.feature-card__icon--green  { --fi: #059669; }  /* support */
.feature-card__icon--rose   { --fi: #E11D48; }  /* pricing */
.feature-card__icon--cyan   { --fi: #0E8FB8; }  /* global */
.feature-card__icon--violet { --fi: #7C3AED; }  /* satisfaction */
.feature-card__title {
  font-size: var(--fs-h3);
  margin-bottom: .6rem;
  transition: color var(--d-base) var(--e-out);
}
.feature-card p {
  font-size: var(--fs-sm);
  margin: 0;
  transition: color var(--d-base) var(--e-out);
}
.feature-card__no {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  font-family: var(--font-head);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary-50);
  transition: color var(--d-base) var(--e-out);
  pointer-events: none;
}


/* ==========================================================================
   14. FILTER BAR
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 2.6rem;
}
.filter-btn {
  padding: .55rem 1.3rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--glass-bg);
  color: var(--t-body);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: transform var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.filter-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  transform: translateY(-2px);
}
.filter-btn.is-active {
  background: var(--grad-vivid);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* Filter transition — .is-hidden is applied by script.js */
.filter-item {
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.filter-item.is-hidden {
  display: none;
}
.filter-item.is-entering {
  animation: filterIn .45s var(--e-out) both;
}


/* ==========================================================================
   15. SERVICES
   ========================================================================== */
.service-card {
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Top accent line that sweeps in on hover */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-vivid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary-100);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover .service-card__icon {
  background: var(--grad-vivid);
  color: #fff;
  transform: rotate(-8deg) scale(1.08);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--svc, var(--c-primary)) 14%, transparent);
  color: var(--svc, var(--c-primary));
  font-size: 1.35rem;
  transition: all var(--d-base) var(--e-spring);
}

/* ---- One colour per service icon ----
   26 distinct hues, golden-angle spaced so neighbours differ sharply, every one
   solved to the same luminance so none washes out on the light tint or vanishes
   on the dark one. Set via nth-child (the filter only toggles .is-hidden, never
   reorders, so position is stable) — no markup change. Each rule sets only
   --svc; the base .service-card__icon consumes it and :hover overrides
   background+colour directly, so the flood still wins on hover.
   Regenerate with scratchpad/gen_svc.py. */
#servicesGrid .filter-item:nth-child(1) .service-card__icon { --svc: #E35555; }  /* Website Design */
#servicesGrid .filter-item:nth-child(2) .service-card__icon { --svc: #199A3E; }  /* Website Development */
#servicesGrid .filter-item:nth-child(3) .service-card__icon { --svc: #AF62E5; }  /* Ecommerce Development */
#servicesGrid .filter-item:nth-child(4) .service-card__icon { --svc: #958618; }  /* WordPress Development */
#servicesGrid .filter-item:nth-child(5) .service-card__icon { --svc: #1C91A9; }  /* Shopify Development */
#servicesGrid .filter-item:nth-child(6) .service-card__icon { --svc: #E24B9C; }  /* Magento Development */
#servicesGrid .filter-item:nth-child(7) .service-card__icon { --svc: #399819; }  /* Custom Software */
#servicesGrid .filter-item:nth-child(8) .service-card__icon { --svc: #7C78E9; }  /* ERP Development */
#servicesGrid .filter-item:nth-child(9) .service-card__icon { --svc: #DA6023; }  /* CRM Development */
#servicesGrid .filter-item:nth-child(10) .service-card__icon { --svc: #199868; }  /* Android App Development */
#servicesGrid .filter-item:nth-child(11) .service-card__icon { --svc: #D444E0; }  /* iOS App Development */
#servicesGrid .filter-item:nth-child(12) .service-card__icon { --svc: #758F17; }  /* Flutter Development */
#servicesGrid .filter-item:nth-child(13) .service-card__icon { --svc: #3287DE; }  /* React Development */
#servicesGrid .filter-item:nth-child(14) .service-card__icon { --svc: #E35270; }  /* Laravel Development */
#servicesGrid .filter-item:nth-child(15) .service-card__icon { --svc: #199B24; }  /* PHP Development */
#servicesGrid .filter-item:nth-child(16) .service-card__icon { --svc: #9B6CE7; }  /* Python Development */
#servicesGrid .filter-item:nth-child(17) .service-card__icon { --svc: #AC7C1C; }  /* AI Solutions */
#servicesGrid .filter-item:nth-child(18) .service-card__icon { --svc: #189590; }  /* SEO */
#servicesGrid .filter-item:nth-child(19) .service-card__icon { --svc: #E044B9; }  /* Digital Marketing */
#servicesGrid .filter-item:nth-child(20) .service-card__icon { --svc: #519618; }  /* Social Media Marketing */
#servicesGrid .filter-item:nth-child(21) .service-card__icon { --svc: #697DE7; }  /* Google Ads */
#servicesGrid .filter-item:nth-child(22) .service-card__icon { --svc: #E15945; }  /* Branding */
#servicesGrid .filter-item:nth-child(23) .service-card__icon { --svc: #19984E; }  /* Graphic Design */
#servicesGrid .filter-item:nth-child(24) .service-card__icon { --svc: #BC5AE4; }  /* Cloud Solutions */
#servicesGrid .filter-item:nth-child(25) .service-card__icon { --svc: #898916; }  /* IT Consulting */
#servicesGrid .filter-item:nth-child(26) .service-card__icon { --svc: #1F8FBD; }  /* Staff Augmentation */
#servicesGrid .filter-item:nth-child(27) .service-card__icon { --svc: #7C3AED; }  /* AI Chatbot Development */
#servicesGrid .filter-item:nth-child(28) .service-card__icon { --svc: #059669; }  /* AI Voice Agent */

/* ---- Services and industries carousels ----
   Both sit on light bands, so they share this styling. Homepage only:
   services.html and industries.html keep the same markup as plain grids and
   load no Swiper, so every rule here is scoped to the carousel wrappers. */
.services-swiper,
.industries-swiper,
.tech-swiper {
  /* Swiper clips at the padding box, so this is the lane the glass cards'
     shadows live in. Without it every card is sheared off at the edges. */
  padding: 6px 6px 8px;
}
/* Swiper hands slides height:100%, which collapses the h-100 article inside;
   auto lets the flex row stretch each slide to the tallest card in view. */
.services-swiper .swiper-slide,
.industries-swiper .swiper-slide,
.tech-swiper .swiper-slide { height: auto; }

/* Controls sit in a row under the track rather than floating over the cards:
   at 4-up the arrows would otherwise cover the first and last card's icon. */
.services-swiper__controls,
.industries-swiper__controls,
.tech-swiper__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1.9rem;
}
.services-swiper__controls .swiper-button-prev,
.services-swiper__controls .swiper-button-next,
.industries-swiper__controls .swiper-button-prev,
.industries-swiper__controls .swiper-button-next,
.tech-swiper__controls .swiper-button-prev,
.tech-swiper__controls .swiper-button-next {
  position: static;
  margin: 0;
  width: 46px;
  height: 46px;
}
/* The bullet run is a wrapping flex block, not one long line: the services
   carousel is 28 bullets at 1-up on a phone, which would otherwise shove the
   arrows off the screen. Wrapped, it stays a tidy centred cluster. */
.services-swiper__controls .swiper-pagination,
.industries-swiper__controls .swiper-pagination,
.tech-swiper__controls .swiper-pagination,
.products-swiper__controls .swiper-pagination {
  position: static;
  width: auto;
  max-width: min(52%, 380px);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: .45rem;
}
/* On a phone the wide bullet block pushes the arrows out toward the screen
   edges, where the floating WhatsApp/chat/scroll-top buttons live. Keeping the
   block narrower holds both arrows clear of that corner. */
@media (max-width: 575.98px) {
  .services-swiper__controls .swiper-pagination,
  .industries-swiper__controls .swiper-pagination,
  .tech-swiper__controls .swiper-pagination,
  .products-swiper__controls .swiper-pagination {
    max-width: 44%;
  }
  .services-swiper__controls,
  .industries-swiper__controls,
  .tech-swiper__controls,
  .products-swiper__controls { gap: .8rem; }
}
.services-swiper .swiper-pagination-bullet,
.industries-swiper .swiper-pagination-bullet,
.tech-swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--border-strong);
  opacity: 1;
  transition: width var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.services-swiper .swiper-pagination-bullet-active,
.industries-swiper .swiper-pagination-bullet-active,
.tech-swiper .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: var(--r-pill);
  background: var(--grad-vivid);
}
.services-swiper .swiper-button-disabled,
.industries-swiper .swiper-button-disabled,
.tech-swiper .swiper-button-disabled { opacity: .35; }

/* ---- Products carousel ----
   Same mechanics as the services one, but #products is a permanently dark band
   in both themes, so the controls need light-on-dark treatment rather than the
   glass-on-white used elsewhere. Homepage only; products.html keeps the grid. */
.products-swiper { padding: 6px 6px 8px; }
.products-swiper .swiper-slide { height: auto; }

.products-swiper__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2rem;
}
.products-swiper__controls .swiper-button-prev,
.products-swiper__controls .swiper-button-next {
  position: static;
  margin: 0;
  width: 46px;
  height: 46px;
}
.products-swiper__controls {
  flex-wrap: wrap;
}
.products-swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, .32);
  opacity: 1;
  transition: width var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.products-swiper .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: var(--r-pill);
  background: var(--grad-text-light, linear-gradient(90deg, #6FC7FF, #00A8E8));
}
.products-swiper .swiper-button-disabled { opacity: .3; }

.products-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.products-nav::after { font-size: .95rem; font-weight: 700; }
.products-nav:hover {
  background: #fff;
  color: var(--c-primary);
  border-color: transparent;
  transform: scale(1.08);
}
.service-card__title {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.service-card p {
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
}


/* ==========================================================================
   16. PRODUCTS
   ========================================================================== */
.product-card {
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
}
.product-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .11);
  border-color: rgba(0, 168, 232, .45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.product-card:hover .product-card__icon {
  background: var(--grad-primary);
  color: #fff;                    /* glyph whitens over the gradient tile on hover */
  transform: rotate(-8deg) scale(1.08);
}

.product-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  /* --pi is the per-product colour; tile is a soft wash of it over the dark
     section, glyph the full colour. Fallback #fff = the old white-on-glass. */
  background: color-mix(in srgb, var(--pi, #fff) 20%, transparent);
  color: var(--pi, #fff);
  font-size: 1.35rem;
  transition: all var(--d-base) var(--e-spring);
}

/* ---- One colour per product icon ----
   These live on the permanently dark Products band, so the palette is tuned
   BRIGHT (high luminance) to read on dark — the opposite of the Services icons
   on their light tiles. Golden-angle spaced, luminance-matched so no two are
   close and none is too dim. nth-child on the 10 cards (no filter here, stable
   order). :hover overrides background+colour, so the flood still wins.
   Regenerate with scratchpad/gen_prod.py. */
#products .row > div:nth-child(1) .product-card__icon,
#productsGrid > div:nth-child(1) .product-card__icon { --pi: #FF6B6B; }  /* CRM Software */
#products .row > div:nth-child(2) .product-card__icon,
#productsGrid > div:nth-child(2) .product-card__icon { --pi: #C9A227; }  /* HRMS */
#products .row > div:nth-child(3) .product-card__icon,
#productsGrid > div:nth-child(3) .product-card__icon { --pi: #6FDB6F; }  /* Hospital Management */
#products .row > div:nth-child(4) .product-card__icon,
#productsGrid > div:nth-child(4) .product-card__icon { --pi: #38D9D9; }  /* School ERP */
#products .row > div:nth-child(5) .product-card__icon,
#productsGrid > div:nth-child(5) .product-card__icon { --pi: #8AB4FF; }  /* Inventory Management */
#products .row > div:nth-child(6) .product-card__icon,
#productsGrid > div:nth-child(6) .product-card__icon { --pi: #FF8AD8; }  /* Billing Software */
#products .row > div:nth-child(7) .product-card__icon,
#productsGrid > div:nth-child(7) .product-card__icon { --pi: #FF9E5C; }  /* Restaurant POS */
#products .row > div:nth-child(8) .product-card__icon,
#productsGrid > div:nth-child(8) .product-card__icon { --pi: #9BE86B; }  /* WhatsApp Marketing */
#products .row > div:nth-child(9) .product-card__icon,
#productsGrid > div:nth-child(9) .product-card__icon { --pi: #4FD3B0; }  /* Real Estate CRM */
#products .row > div:nth-child(10) .product-card__icon,
#productsGrid > div:nth-child(10) .product-card__icon { --pi: #B99CFF; }  /* Ecommerce Platform */
.product-card__title {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: .5rem;
}
.product-card p {
  font-size: var(--fs-sm);
  color: var(--t-inverse-soft);
  margin-bottom: 1rem;
}
.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.product-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: .68rem;
  color: var(--t-inverse-soft);
}
.product-card__meta i { color: var(--c-secondary); font-size: .6rem; }
.product-card .link-more { color: var(--c-secondary); }
.product-card .link-more:hover { color: #fff; }


/* ==========================================================================
   17. INDUSTRIES
   ========================================================================== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
.industry-tile {
  display: grid;
  place-items: center;
  gap: .75rem;
  padding: 1.7rem .85rem;
  text-align: center;
  color: var(--t-heading);
  overflow: hidden;
}
.industry-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-vivid);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.industry-tile > * { position: relative; z-index: 1; }

.industry-tile i {
  font-size: 1.7rem;
  color: var(--ind, var(--c-primary));
  transition: transform var(--d-base) var(--e-spring),
              color var(--d-base) var(--e-out);
}

/* ---- One --ind per vertical ----
   Unlike the tech chips, these are conventional rather than official: no
   industry owns a colour, so each is the hue the sector actually reads as —
   medical rose, money green, hi-vis ochre, delivery brown. Hues are spread far
   enough apart that no two tiles in the 7-wide grid read as a pair.

   Rest state only. Hover still floods the tile with --grad-vivid and knocks the
   icon to white; that is the brand moment and it stays. */
.industry-tile--healthcare    { --ind: #E11D48; }  /* rose — medical */
.industry-tile--education     { --ind: #F59E0B; }  /* amber */
.industry-tile--finance       { --ind: #059669; }  /* emerald — money */
.industry-tile--retail        { --ind: #DB2777; }  /* pink */
.industry-tile--manufacturing { --ind: #64748B; }  /* steel */
.industry-tile--realestate    { --ind: #0D9488; }  /* teal */
.industry-tile--hospitality   { --ind: #9333EA; }  /* purple */
.industry-tile--travel        { --ind: #0EA5E9; }  /* sky */
.industry-tile--logistics     { --ind: #92400E; }  /* brown — parcel */
.industry-tile--construction  { --ind: #CA8A04; }  /* hi-vis ochre */
.industry-tile--food          { --ind: #F97316; }  /* orange */
.industry-tile--automobile    { --ind: #B91C1C; }  /* racing red */
.industry-tile--government    { --ind: #283090; }  /* institutional navy */
.industry-tile--startups      { --ind: #65A30D; }  /* lime — growth */

/* The darker half of the set sinks into the dark canvas — same hue, lifted
   until the glyph reads. Government is the brand navy, which disappears
   completely, so it borrows the dark-theme gradient blue. */
[data-theme="dark"] .industry-tile--healthcare    { --ind: #F43F5E; }
[data-theme="dark"] .industry-tile--finance       { --ind: #10B981; }
[data-theme="dark"] .industry-tile--retail        { --ind: #EC4899; }
[data-theme="dark"] .industry-tile--manufacturing { --ind: #94A3B8; }
[data-theme="dark"] .industry-tile--realestate    { --ind: #14B8A6; }
[data-theme="dark"] .industry-tile--hospitality   { --ind: #A855F7; }
[data-theme="dark"] .industry-tile--logistics     { --ind: #CD8B4E; }
[data-theme="dark"] .industry-tile--construction  { --ind: #EAB308; }
[data-theme="dark"] .industry-tile--automobile    { --ind: #EF4444; }
[data-theme="dark"] .industry-tile--government    { --ind: #6373E4; }
[data-theme="dark"] .industry-tile--startups      { --ind: #84CC16; }
.industry-tile span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
  transition: color var(--d-base) var(--e-out);
}
.industry-tile:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: var(--sh-lg);
  color: #fff;
}
.industry-tile:hover::before { opacity: 1; }
.industry-tile:hover i {
  color: #fff;
  transform: translateY(-3px) scale(1.14);
}
.industry-tile:hover span { color: #fff; }


/* ==========================================================================
   18. PROCESS TIMELINE
   ========================================================================== */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vertical spine, centred on desktop */
.timeline__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
/* Height is driven by GSAP ScrollTrigger in script.js */
.timeline__spine i {
  display: block;
  width: 100%;
  height: 0;
  background: var(--grad-vivid);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(40, 48, 144, .5);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding-right: 3.6rem;
  margin-bottom: 2.6rem;
}
/* Alternate sides */
.timeline__item:nth-child(even) {
  margin-left: 50%;
  padding-right: 0;
  padding-left: 3.6rem;
}
.timeline__item:last-child { margin-bottom: 0; }

.timeline__marker {
  position: absolute;
  top: 1.6rem;
  right: -27px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-vivid);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 0 0 6px var(--bg-body), var(--sh-brand);
  z-index: 2;
  transition: transform var(--d-base) var(--e-spring);
}
.timeline__item:nth-child(even) .timeline__marker { right: auto; left: -27px; }
.timeline__item:hover .timeline__marker { transform: scale(1.12) rotate(-8deg); }

.timeline__card {
  padding: 1.9rem 1.7rem;
}
.timeline__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
}
.timeline__step {
  display: inline-block;
  margin-bottom: .55rem;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.timeline__title { font-size: 1.3rem; margin-bottom: .6rem; }
.timeline__card p { font-size: var(--fs-sm); margin-bottom: 1rem; }

.timeline__points { display: grid; gap: .5rem; }
.timeline__points li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--t-body);
}
.timeline__points i {
  margin-top: .38em;
  font-size: .7rem;
  color: var(--c-primary);
  flex: none;
}


/* ==========================================================================
   19. PORTFOLIO
   ========================================================================== */
.portfolio-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
}

.portfolio-card__media {
  position: relative;
  aspect-ratio: 600 / 420;
  overflow: hidden;
}
.portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.08); }

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(0deg, rgba(18, 24, 68, .82), rgba(40, 48, 144, .5));
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }

.portfolio-card__zoom {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--c-primary);
  font-size: 1.05rem;
  transform: scale(.5) rotate(-45deg);
  transition: transform var(--d-base) var(--e-spring);
}
.portfolio-card:hover .portfolio-card__zoom { transform: scale(1) rotate(0); }
.portfolio-card__zoom:hover { color: var(--c-accent); }

.portfolio-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portfolio-card__tag {
  align-self: flex-start;
  margin-bottom: .6rem;
  padding: .22rem .75rem;
  border-radius: var(--r-pill);
  background: var(--c-primary-50);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.portfolio-card__title { font-size: 1.15rem; margin-bottom: .45rem; }
.portfolio-card__body p { font-size: var(--fs-sm); margin: 0; }


/* ==========================================================================
   20. TECHNOLOGY STACK
   ========================================================================== */
.tech-grid {
  display: grid;
  /* Fixed-width tracks + centred, so a short row (e.g. a 6-chip service stack)
     sits centred instead of hugging the left with empty tracks on the right.
     A full row (the homepage's 22 chips) still fills edge to edge. Responsive
     breakpoints below override to 1fr grids that fill the width. */
  grid-template-columns: repeat(auto-fit, 134px);
  justify-content: center;
  gap: 1rem;
}
.tech-chip {
  display: grid;
  place-items: center;
  gap: .6rem;
  padding: 1.4rem .7rem;
  text-align: center;
  cursor: default;
}
.tech-chip i {
  font-size: 1.9rem;
  color: var(--tech, var(--c-primary));
  transition: transform var(--d-base) var(--e-spring),
              color var(--d-base) var(--e-out);
}

/* ---- Official brand colours, one --tech per chip ----
   Sourced from each project's own brand guide. Five chips (Django, Flutter,
   Kubernetes, MySQL, MongoDB) have no brand glyph in Font Awesome Free, so
   they wear a solid stand-in icon in the real brand colour.

   Anything overridden under [data-theme] below failed legibility at that
   theme's background — the brand value stays the default, the theme value is
   the nearest hue from the same brand's own palette. */
.tech-chip--html      { --tech: #E34F26; }
.tech-chip--css       { --tech: #1572B6; }
.tech-chip--bootstrap { --tech: #7952B3; }
.tech-chip--js        { --tech: #F7DF1E; }
.tech-chip--react     { --tech: #61DAFB; }
.tech-chip--angular   { --tech: #DD0031; }
.tech-chip--vue       { --tech: #4FC08D; }
.tech-chip--node      { --tech: #5FA04E; }
.tech-chip--php       { --tech: #777BB4; }
.tech-chip--laravel   { --tech: #FF2D20; }
.tech-chip--python    { --tech: #3776AB; }
.tech-chip--django    { --tech: #092E20; }
.tech-chip--flutter   { --tech: #02569B; }
.tech-chip--android   { --tech: #3DDC84; }
.tech-chip--swift     { --tech: #F05138; }
.tech-chip--aws       { --tech: #FF9900; }
.tech-chip--azure     { --tech: #0078D4; }
.tech-chip--gcp       { --tech: #4285F4; }
.tech-chip--docker    { --tech: #2496ED; }
.tech-chip--k8s       { --tech: #326CE5; }
.tech-chip--mysql     { --tech: #4479A1; }
.tech-chip--mongodb   { --tech: #47A248; }

/* JS yellow, React cyan and Android green wash out on the light card — measured
   at 1.2:1, 1.6:1 and 2.6:1. React's own site ships #149ECA for exactly this
   reason; the other two are the same hue, darkened until the glyph reads. */
[data-theme="light"] .tech-chip--js      { --tech: #C9A800; }
[data-theme="light"] .tech-chip--react   { --tech: #149ECA; }
[data-theme="light"] .tech-chip--android { --tech: #2DA85F; }

/* Django near-black and Flutter navy vanish on the dark card; React cyan and
   Python blue are the same family, just lifted. */
[data-theme="dark"] .tech-chip--django  { --tech: #44B78B; }
[data-theme="dark"] .tech-chip--flutter { --tech: #47C5FB; }
[data-theme="dark"] .tech-chip--python  { --tech: #4B8BBE; }
[data-theme="dark"] .tech-chip--css     { --tech: #33A9DC; }
.tech-chip span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .76rem;
  color: var(--t-heading);
}
.tech-chip:hover {
  transform: translateY(-7px);
  border-color: var(--c-primary-100);
  box-shadow: var(--sh-lg);
}
/* No colour shift on hover any more — the chip's whole point is now the brand
   colour, so recolouring it to the accent would throw away the signal. */
.tech-chip:hover i {
  transform: scale(1.18) rotate(-6deg);
}

/* ---- Colour every chip icon by its Font Awesome class ----
   Many chips on the inner pages (social platforms, WordPress, Shopify, Figma,
   Google, and generic solid glyphs) carry no `tech-chip--x` modifier, so their
   icon fell back to navy. Keying off the icon class paints them their brand
   colour on every page without editing the markup. Values are tuned to read on
   the light chip background (site is light-only). */
.tech-chip i.fa-html5      { color: #E34F26; }
.tech-chip i.fa-css3-alt   { color: #1572B6; }
.tech-chip i.fa-bootstrap  { color: #7952B3; }
.tech-chip i.fa-square-js  { color: #C9A800; }
.tech-chip i.fa-react      { color: #149ECA; }
.tech-chip i.fa-angular    { color: #DD0031; }
.tech-chip i.fa-vuejs      { color: #35A46F; }
.tech-chip i.fa-node-js    { color: #5FA04E; }
.tech-chip i.fa-php        { color: #6C74C7; }
.tech-chip i.fa-laravel    { color: #FF2D20; }
.tech-chip i.fa-python     { color: #3776AB; }
.tech-chip i.fa-swift      { color: #F05138; }
.tech-chip i.fa-android    { color: #2DA85F; }
.tech-chip i.fa-aws        { color: #E8890A; }
.tech-chip i.fa-microsoft  { color: #0078D4; }
.tech-chip i.fa-google     { color: #4285F4; }
.tech-chip i.fa-docker     { color: #2496ED; }
.tech-chip i.fa-meta       { color: #0866FF; }
.tech-chip i.fa-figma      { color: #F24E1E; }
.tech-chip i.fa-sketch     { color: #E39A00; }
.tech-chip i.fa-shopify    { color: #6FA53F; }
.tech-chip i.fa-magento    { color: #E8681B; }
.tech-chip i.fa-wordpress  { color: #21759B; }
.tech-chip i.fa-apple      { color: #333333; }
.tech-chip i.fa-facebook   { color: #1877F2; }
.tech-chip i.fa-instagram  { color: #E4405F; }
.tech-chip i.fa-linkedin   { color: #0A66C2; }
.tech-chip i.fa-x-twitter  { color: #0F1419; }
.tech-chip i.fa-youtube    { color: #FF0000; }
.tech-chip i.fa-tiktok     { color: #EE1D52; }
/* Generic solid glyphs (no brand mark in Font Awesome Free) */
.tech-chip i.fa-mobile-screen    { color: #02569B; }
.tech-chip i.fa-database         { color: #4479A1; }
.tech-chip i.fa-server           { color: #4B7BEC; }
.tech-chip i.fa-brain            { color: #7C3AED; }
.tech-chip i.fa-vector-square    { color: #14B8A6; }
.tech-chip i.fa-cloud            { color: #0EA5E9; }
.tech-chip i.fa-code             { color: #6366F1; }
.tech-chip i.fa-code-branch      { color: #F1502F; }
.tech-chip i.fa-plug             { color: #10B981; }
.tech-chip i.fa-chart-line       { color: #16A34A; }
.tech-chip i.fa-gauge-high       { color: #EA580C; }
.tech-chip i.fa-pen-nib          { color: #DB2777; }
.tech-chip i.fa-palette          { color: #F59E0B; }
.tech-chip i.fa-swatchbook       { color: #8B5CF6; }
.tech-chip i.fa-magnifying-glass { color: #2563EB; }
.tech-chip i.fa-bag-shopping     { color: #E11D48; }
.tech-chip i.fa-bolt             { color: #F59E0B; }
.tech-chip i.fa-book             { color: #0891B2; }
.tech-chip i.fa-chess            { color: #7C3AED; }
.tech-chip i.fa-compass          { color: #0EA5E9; }
.tech-chip i.fa-crosshairs       { color: #DC2626; }
.tech-chip i.fa-envelope         { color: #EA580C; }
.tech-chip i.fa-film             { color: #7C3AED; }
.tech-chip i.fa-fire             { color: #F97316; }
.tech-chip i.fa-font             { color: #4F46E5; }
.tech-chip i.fa-image            { color: #16A34A; }
.tech-chip i.fa-location-dot     { color: #DC2626; }
.tech-chip i.fa-n                { color: #111827; }
.tech-chip i.fa-arrows-rotate    { color: #16A34A; }
.tech-chip i.fa-arrows-spin      { color: #0D9488; }
.tech-chip i.fa-print            { color: #475569; }
.tech-chip i.fa-scale-balanced   { color: #0891B2; }
.tech-chip i.fa-shield-halved    { color: #16A34A; }
.tech-chip i.fa-sitemap          { color: #7C3AED; }
.tech-chip i.fa-universal-access { color: #2563EB; }
.tech-chip i.fa-dharmachakra     { color: #326CE5; }
.tech-chip i.fa-leaf             { color: #47A248; }


/* ==========================================================================
   21. COUNTERS
   ========================================================================== */
.counters {
  position: relative;
  padding: var(--sp-section) 0;
  background: var(--grad-dark);
  overflow: hidden;
}
.counters__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 15% 20%, rgba(40, 48, 144, .3), transparent 60%),
    radial-gradient(700px 400px at 85% 80%, rgba(160, 200, 56, .3), transparent 60%);
}
.counters .container { position: relative; z-index: 1; }

.counter-card {
  padding: 2.1rem 1.1rem;
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  height: 100%;
}
.counter-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .11);
  border-color: rgba(0, 168, 232, .4);
}
.counter-card i {
  font-size: 1.7rem;
  color: var(--c-secondary);
  margin-bottom: .8rem;
  display: block;
  transition: transform var(--d-base) var(--e-spring);
}
.counter-card:hover i { transform: scale(1.15) translateY(-3px); }
.counter-card strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.counter-card p {
  margin: .3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--t-inverse-soft);
}


/* ==========================================================================
   22. TESTIMONIALS
   ========================================================================== */
.testimonial-swiper {
  /* The side padding is a lane for the arrows. Swiper parks them at left/right
     10px by default, which sat them ON the cards — over a quote on a tall card,
     over the author's avatar on a short one. The lane is 3.4rem for a 46px
     arrow; responsive.css reclaims it below 768px where the arrows are hidden. */
  padding: .5rem 3.4rem 3.6rem;
  margin-inline: -.5rem;
}
.testimonial-swiper .swiper-button-prev { left: 0; }
.testimonial-swiper .swiper-button-next { right: 0; }
/* Equal-height cards: Swiper defaults slides to height:100%, which collapses
   against an auto-height wrapper; height:auto lets the flex row stretch every
   slide to the tallest, and the card then fills it. */
.testimonial-swiper .swiper-slide { height: auto; }
.testimonial-card {
  height: 100%;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -.4rem;
  right: 1.4rem;
  font-family: var(--font-head);
  font-size: 6rem;
  line-height: 1;
  color: var(--c-primary-50);
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary-100);
}

.testimonial-card__stars {
  display: flex;
  gap: .2rem;
  margin-bottom: 1.1rem;
  color: #FFB020;
  font-size: .88rem;
}
.testimonial-card blockquote { margin: 0 0 1.6rem; flex: 1; }
.testimonial-card blockquote p {
  font-size: var(--fs-sm);
  color: var(--t-body);
  line-height: 1.8;
  margin: 0;
  /* Quotes run 140–860 chars. Clamp every one to the same line count so all
     cards are the same height (paired with Swiper `autoHeight:false`, which
     stretches the slides to the tallest); the few long quotes end in an
     ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.avatar {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
}
.avatar--2 { background: var(--grad-accent); }
.avatar--3 { background: linear-gradient(135deg, #00A8E8, #A0C838); }
/* Was #A81828 -> #283090: the banned red->navy pair, which ramps through a
   muddy brown at its midpoint. Same slot, brand-legal ramp. */
.avatar--4 { background: linear-gradient(135deg, #0060B0, #A0C838); }
.avatar--5 { background: linear-gradient(135deg, #FFB020, #FF6B6B); }

/* ---- Photo avatars ----
   The testimonial authors are real people with real headshots (client-*.webp).
   The gradient variants above are the fallback for anyone without a photo —
   keep them. `background` here overrides the gradient so it cannot flash behind
   a transparent or still-loading image.

   Two of the seventeen are company logos rather than faces, fitted onto white
   at build time instead of cropped; the hairline keeps that white plate from
   dissolving into the light section behind it. */
.avatar--photo {
  object-fit: cover;
  background: var(--glass-bg-solid);
  border: 1px solid var(--border);
}

.testimonial-card__author strong {
  display: block;
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--t-heading);
  line-height: 1.3;
}
.testimonial-card__author small {
  font-size: var(--fs-xs);
  color: var(--t-muted);
}

/* ---- Swiper controls ---- */
.testimonial-swiper .swiper-pagination {
  bottom: 0;
}
.testimonial-swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--border-strong);
  opacity: 1;
  transition: width var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.testimonial-swiper .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: var(--r-pill);
  background: var(--grad-vivid);
}

/* Shared arrow styling for both carousels, testimonials and services. */
.testimonial-nav,
.services-nav,
.industries-nav,
.tech-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--glass-bg-solid);
  color: var(--c-primary);
  box-shadow: var(--sh-md);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.testimonial-nav::after,
.services-nav::after,
.industries-nav::after,
.tech-nav::after { font-size: .95rem; font-weight: 700; }
.testimonial-nav:hover,
.services-nav:hover,
.industries-nav:hover,
.tech-nav:hover {
  background: var(--grad-vivid);
  color: #fff;
  border-color: transparent;
  transform: scale(1.08);
}
.testimonial-swiper .swiper-button-disabled { opacity: .35; }


/* ==========================================================================
   23. CAREERS
   ========================================================================== */
.job-card {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}
.job-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary-100);
}
.job-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.job-card__title { font-size: 1.15rem; margin: 0; }
.job-card__badge {
  flex: none;
  padding: .25rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(160, 200, 56, .14);
  border: 1px solid rgba(160, 200, 56, .38);
  color: var(--c-green-600);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin-bottom: .9rem;
}
.job-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.job-card__meta i { color: var(--c-primary); }
.job-card p { font-size: var(--fs-sm); margin-bottom: 1rem; flex: 1; }

/* Role icon tile, so a grid of four text cards has an entry point for the eye */
.job-card__ico {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.05rem;
  color: var(--c-primary);
  background: var(--c-primary-50);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-spring);
}
[data-theme="dark"] .job-card__ico { color: var(--c-secondary); }
.job-card:hover .job-card__ico {
  background: var(--grad-vivid);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}

.job-card__head { flex: 1; min-width: 0; }
.job-card__dept {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--t-muted);
}

/* Same divider-plus-circled-arrow row as the blog cards, so the two grids
   share one "read on" language. */
.job-card__apply {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.job-card__apply i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .7rem;
  color: var(--c-primary);
  background: var(--c-primary-50);
  transition: transform var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.job-card:hover .job-card__apply i {
  background: var(--grad-vivid);
  color: #fff;
  transform: translateX(4px);
}

/* Gradient hairline that draws itself, matching .blog-card */
.job-card { overflow: hidden; }
.job-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad-vivid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.job-card:hover::after,
.job-card:focus-within::after { transform: scaleX(1); }


/* ==========================================================================
   24. BLOGS
   ========================================================================== */
.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary-100);
}

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 600 / 340;
  overflow: hidden;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.07); }

.blog-card__cat {
  position: absolute;
  top: .9rem;
  left: .9rem;
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-bottom: .7rem;
}
.blog-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.blog-card__meta i { color: var(--c-primary); }

.blog-card__title { font-size: 1.12rem; margin-bottom: .55rem; line-height: 1.35; }
.blog-card__title a { color: var(--t-heading); }
.blog-card__title a:hover { color: var(--c-primary); }
.blog-card__body p { font-size: var(--fs-sm); margin-bottom: 1rem; }

/* Scrim over the photo — the category pill sits on wildly different artwork
   from post to post, and a bare white pill on a pale illustration disappears.
   A top-down darkening keeps it legible without dulling the whole image. */
.blog-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 24, 68, .38) 0%, rgba(18, 24, 68, 0) 46%);
  pointer-events: none;
}

/* Brand gradient hairline that draws itself across the card on hover */
.blog-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad-vivid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.blog-card:hover::after,
.blog-card:focus-within::after { transform: scaleX(1); }

/* The excerpt takes the slack so every "Read Article" row lines up across a row
   of cards, whatever the summary length. */
.blog-card__body p { flex: 1; }

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.blog-card__more i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .7rem;
  color: var(--c-primary);
  background: var(--c-primary-50);
  transition: transform var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.blog-card__more:hover { color: var(--c-primary); }
.blog-card:hover .blog-card__more i {
  background: var(--grad-vivid);
  color: #fff;
  transform: translateX(4px);
}

/* ---- Category chip, shared by the feature card ---- */
.blog-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: .32rem .95rem;
  margin-bottom: .9rem;
  border-radius: var(--r-pill);
  background: var(--c-primary-50);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
[data-theme="dark"] .blog-chip { color: var(--c-secondary); }

/* ---- Featured post — full-width split card ---- */
.feature-post {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.feature-post:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
  border-color: var(--c-primary-100);
}

.feature-post__media {
  position: relative;
  display: block;
  min-height: 340px;
  overflow: hidden;
}
.feature-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.feature-post:hover .feature-post__media img { transform: scale(1.05); }

.feature-post__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(18, 24, 68, .45) 0%, rgba(18, 24, 68, 0) 55%);
  pointer-events: none;
}
.feature-post__flag {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  box-shadow: var(--sh-accent);
}

.feature-post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.6rem, 1rem + 1.8vw, 2.9rem);
}
.feature-post__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  line-height: 1.28;
  margin-bottom: .8rem;
}
.feature-post__title a { color: var(--t-heading); }
.feature-post__title a:hover { color: var(--c-primary); }
.feature-post__lead {
  font-size: var(--fs-body);
  margin-bottom: 1.2rem;
}
.feature-post .blog-card__meta { margin-bottom: 1.6rem; }

@media (max-width: 991.98px) {
  .feature-post { grid-template-columns: 1fr; }
  .feature-post__media { min-height: 0; aspect-ratio: 900 / 420; }
}

/* ---- Hero topic index ---- */
.blog-topics { padding: 1.7rem 1.5rem; }
.blog-topics__title {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 1.1rem;
}
.blog-topics__list { margin: 0; }
.blog-topics__list li + li { border-top: 1px solid var(--border); }
.blog-topics__list a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .72rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--t-heading);
  transition: color var(--d-base) var(--e-out),
              padding-left var(--d-base) var(--e-out);
}
.blog-topics__list a:hover {
  color: var(--c-primary);
  padding-left: .35rem;
}
.blog-topics__ico {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: .8rem;
  color: var(--c-primary);
  background: var(--c-primary-50);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
[data-theme="dark"] .blog-topics__ico { color: var(--c-secondary); }
.blog-topics__list a:hover .blog-topics__ico {
  background: var(--grad-vivid);
  color: #fff;
}
/* Count sits hard right, in the muted tone so it never competes with the label */
.blog-topics__list em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.blog-topics__note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.blog-topics__note i { color: var(--c-secondary); }


/* ==========================================================================
   24b. LEGAL DOCUMENTS (privacy policy, terms of service)
   ========================================================================== */
.legal-doc { max-width: 52rem; }
.legal-doc__updated {
  font-size: var(--fs-sm);
  color: var(--t-muted);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.legal-doc__h {
  font-size: 1.25rem;
  margin: 2.4rem 0 .8rem;
}
.legal-doc__h:first-of-type { margin-top: 0; }
.legal-doc p { margin-bottom: 1rem; }
.legal-doc__list { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-doc__list li { margin-bottom: .5rem; }
.legal-doc a { color: var(--c-primary); font-weight: 600; }
.legal-doc a:hover { color: var(--c-accent); }


/* ==========================================================================
   25. FAQ
   ========================================================================== */
.faq__help {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem;
  margin-top: 2rem;
}
.faq__help > i {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 1.15rem;
}
.faq__help strong {
  display: block;
  font-family: var(--font-head);
  color: var(--t-heading);
  margin-bottom: .2rem;
}
.faq__help p { font-size: var(--fs-sm); }

.faq__accordion { display: grid; gap: 1rem; }

.faq__accordion .accordion-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md) !important;
  overflow: hidden;
  background: var(--glass-bg);
}
.faq__accordion .accordion-item:hover { border-color: var(--c-primary-100); }

.faq__accordion .accordion-button {
  padding: 1.15rem 1.4rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .98rem;
  color: var(--t-heading);
  background: transparent;
  box-shadow: none;
  border-radius: var(--r-md) !important;
}
.faq__accordion .accordion-button:not(.collapsed) {
  color: var(--c-primary);
  background: var(--c-primary-50);
}
.faq__accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
/* Custom chevron so it inherits brand colour in both themes */
.faq__accordion .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23283090'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  transition: transform var(--d-base) var(--e-out);
}
.faq__accordion .accordion-body {
  padding: 0 1.4rem 1.3rem;
  font-size: var(--fs-sm);
  color: var(--t-body);
}
[data-theme="dark"] .faq__accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A8E8'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   26. CTA
   ========================================================================== */
.cta {
  position: relative;
  padding: var(--sp-section) 0;
  background: #fff;
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; }
.cta__bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
}
.cta__bg span:nth-child(1) {
  width: 420px; height: 420px;
  top: -120px; left: -60px;
  background: #fff;
  opacity: .18;
  animation: floatOrb 19s ease-in-out infinite;
}
.cta__bg span:nth-child(2) {
  width: 360px; height: 360px;
  bottom: -120px; right: -40px;
  background: var(--c-secondary);
  opacity: .14;
  animation: floatOrb 23s ease-in-out infinite reverse;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(2.4rem, 1.5rem + 3vw, 3.8rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  text-align: center;
  background: linear-gradient(165deg, #F3F7FF, #FFFFFF);
  border-color: rgba(20, 24, 68, .08);
  box-shadow: var(--sh-lg);
}
.cta__title {
  font-size: var(--fs-h2);
  color: var(--t-heading);
  margin-bottom: .6rem;
}
.cta__text {
  font-size: var(--fs-lead);
  color: var(--t-body);
  margin-bottom: 2rem;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-bottom: 2rem;
}
/* Light CTA buttons: filled gradient primary, brand-outline secondary */
.cta .cta__btn-primary {
  background: var(--grad-vivid);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c-primary) 28%, transparent);
}
.cta .cta__btn-primary:hover { color: #fff; transform: translateY(-3px); }
.cta .btn-glass {
  border-color: rgba(40, 48, 144, .28);
  color: var(--c-primary);
}
.cta .btn-glass:hover { background: var(--c-primary-50); color: var(--c-primary); }

.cta__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(20, 24, 68, .1);
}
.cta__assurances li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: var(--t-body);
}
.cta__assurances i { color: var(--c-secondary); font-size: .8rem; }


/* ==========================================================================
   27. CONTACT
   ========================================================================== */
.contact__form-wrap { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); }

.form-label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--t-heading);
  margin-bottom: .4rem;
}
.req { color: #EF4444; }

.form-control,
.form-select {
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--t-heading);
  font-size: var(--fs-sm);
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.form-control::placeholder { color: var(--t-muted); opacity: .8; }
.form-control:focus,
.form-select:focus {
  border-color: var(--c-primary);
  background: var(--bg-elevated);
  color: var(--t-heading);
  box-shadow: 0 0 0 4px rgba(40, 48, 144, .13);
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A9BAD2'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.form-check-input {
  border-color: var(--border-strong);
  background-color: var(--bg-elevated);
}
.form-check-input:checked {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(40, 48, 144, .13); }
.form-check-label { font-size: var(--fs-sm); color: var(--t-body); }

.contact__privacy {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.contact__privacy i { color: var(--c-primary); }

/* Submission feedback */
.form-status {
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: filterIn .35s var(--e-out) both;
}
.form-status--ok {
  background: rgba(160, 200, 56, .12);
  border: 1px solid rgba(160, 200, 56, .4);
  color: var(--c-green-600);
}
.form-status--err {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #DC2626;
}

/* ---- Info panel ---- */
.contact__info { padding: 1.9rem 1.7rem; margin-bottom: 1.5rem; }
.contact__info-title { font-size: 1.15rem; margin-bottom: 1.3rem; }

.contact__list { display: grid; gap: 1.15rem; margin-bottom: 1.5rem; }
.contact__list li { display: flex; gap: .95rem; align-items: flex-start; }
.contact__ico {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-primary-50);
  color: var(--c-primary);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-spring);
}
.contact__list li:hover .contact__ico {
  background: var(--grad-primary);
  color: #fff;
  transform: scale(1.08);
}
.contact__list small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--t-muted);
  margin-bottom: .1rem;
}
.contact__list a,
.contact__list address,
.contact__list p {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-heading);
  font-style: normal;
  margin: 0;
  line-height: 1.55;
}
.contact__list a:hover { color: var(--c-primary); }

.contact__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem;
  border-radius: var(--r-pill);
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .35);
  color: #1EA952;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.contact__whatsapp i { font-size: 1.1rem; }
.contact__whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  transform: translateY(-2px);
}

/* ---- Map ---- */
.contact__map {
  overflow: hidden;
  min-height: 260px;
  display: grid;
}
.contact__map-placeholder {
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(40, 48, 144, .08), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 168, 232, .08), transparent 60%);
}
.contact__map-placeholder > i {
  font-size: 2.3rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.contact__map-placeholder strong {
  font-family: var(--font-head);
  color: var(--t-heading);
}
.contact__map-placeholder p {
  font-size: var(--fs-sm);
  margin: 0 0 .5rem;
}
.contact__map-placeholder small {
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  display: block;
}


/* ==========================================================================
   28. FOOTER & NEWSLETTER
   ========================================================================== */
.footer {
  position: relative;
  background: var(--grad-dark);
  color: var(--t-inverse-soft);
  padding-top: var(--sp-section);
  overflow: hidden;
}
.footer__glow {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(40, 48, 144, .3), transparent 65%);
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

/* ---- Newsletter ---- */
.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.2rem;
  margin-bottom: 3.6rem;
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
}
.newsletter__title { font-size: 1.4rem; color: #fff; margin-bottom: .3rem; }
.newsletter__copy p { font-size: var(--fs-sm); color: var(--t-inverse-soft); margin: 0; }

.newsletter__form {
  position: relative;
  display: flex;
  gap: .6rem;
  flex: 1;
  min-width: 300px;
  max-width: 480px;
}
.newsletter__form .form-control {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: var(--r-pill);
  padding-inline: 1.2rem;
}
.newsletter__form .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter__form .form-control:focus {
  background: rgba(255, 255, 255, .13);
  border-color: var(--c-secondary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 168, 232, .16);
}
.newsletter__form .btn { flex: none; }
.newsletter__status {
  position: absolute;
  top: 100%;
  left: 1.2rem;
  margin: .45rem 0 0;
  font-size: var(--fs-xs);
  color: var(--c-secondary);
}
.newsletter__status.is-error { color: #FCA5A5; }

/* Spam honeypot, on the newsletter and contact forms. A bot that fills every
   input trips it and the submission is dropped server-side.
   Deliberately NOT display:none or hidden: the better scrapers skip those,
   while an off-screen field still looks fillable. It is out of the tab order
   and aria-hidden in the markup, so nobody using the site can reach it. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Main columns ---- */
.footer__main { padding-bottom: 3rem; }

/* Text brand name (replaced the footer image logo). Sits at the top of the brand
   column so it lines up with the Quick Links / Services / Contact headings. */
.footer__brandname {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: 1.15rem;
  transition: color var(--d-base) var(--e-out);
}
.footer__brandname:hover { color: var(--c-secondary); }

.footer__about {
  font-size: var(--fs-sm);
  color: var(--t-inverse-soft);
  margin-bottom: 1rem;
  max-width: 30rem;
}

/* Company Profile button in the footer brand column (light footer) */
.footer__profile {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
  padding: .58rem 1.2rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  background: var(--grad-vivid);
  color: #fff;
  box-shadow: var(--sh-brand);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              filter var(--d-base) var(--e-out);
}
.footer__profile:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  filter: brightness(1.06);
}
.footer__profile i { font-size: .95em; }

.footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--t-inverse-soft);
  transition: transform var(--d-base) var(--e-spring),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.footer__social a:hover {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px);
}

/* ---- Social icons in real brand colours (topbar + footer) ----
   Both rows sit on dark surfaces, so the chip carries the brand colour and the
   glyph stays white. X has no colour of its own, so it reads black-on-white per
   its own identity (a hairline keeps its edge visible on the dark bg). The
   :hover selectors reuse the brand colour so the fill never reverts to the
   default gradient; the base rules still supply the lift. */
.topbar__social a i,
.footer__social a i { color: #fff; }

.topbar__social a:has(.fa-linkedin-in),
.footer__social a:has(.fa-linkedin-in),
.topbar__social a:has(.fa-linkedin-in):hover,
.footer__social a:has(.fa-linkedin-in):hover { background: #0A66C2; border-color: transparent; }

.topbar__social a:has(.fa-facebook-f),
.footer__social a:has(.fa-facebook-f),
.topbar__social a:has(.fa-facebook-f):hover,
.footer__social a:has(.fa-facebook-f):hover { background: #1877F2; border-color: transparent; }

.topbar__social a:has(.fa-instagram),
.footer__social a:has(.fa-instagram),
.topbar__social a:has(.fa-instagram):hover,
.footer__social a:has(.fa-instagram):hover {
  background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 62%, #285AEB 95%);
  border-color: transparent;
}

.topbar__social a:has(.fa-x-twitter),
.footer__social a:has(.fa-x-twitter),
.topbar__social a:has(.fa-x-twitter):hover,
.footer__social a:has(.fa-x-twitter):hover { background: #000; border-color: rgba(255, 255, 255, .32); }

/* Hover feedback: a subtle brighten on top of the existing lift */
.topbar__social a:hover,
.footer__social a:hover { filter: brightness(1.08); color: #fff; }

.footer__title {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1.3rem;
  position: relative;
  padding-bottom: .7rem;
}
.footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-primary);
}
.footer__title--sm { margin-top: 2rem; font-size: .95rem; }

.footer__links { display: grid; gap: .65rem; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--t-inverse-soft);
  transition: transform var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.footer__links a::before {
  content: "›";
  margin-right: .5rem;
  color: var(--c-secondary);
  transition: margin var(--d-base) var(--e-out);
}
.footer__links a:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer__contact { display: grid; gap: .9rem; margin-bottom: .5rem; }
.footer__contact li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--t-inverse-soft);
}
.footer__contact i {
  color: var(--c-secondary);
  margin-top: .38em;
  flex: none;
}
.footer__contact a { color: var(--t-inverse-soft); }
.footer__contact a:hover { color: #fff; }

/* ---- Office addresses ----
   Their own full-width band, not a tail on the Contact column. In there the
   column ran ~495px against the brand column's 261px of content, and since every
   column stretches to the tallest, the brand sat above 234px of dead space.
   The 448px column also only fitted two 150px tracks, so USA orphaned onto a
   second row beside an empty cell. Full width, auto-fit collapses the empty
   tracks and the three sit 3-up. */
.footer__addresses {
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__addresses .footer__title--sm { margin-top: 0; }

.footer__offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.3rem 2.5rem;
}
.footer__office strong {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-head);
  font-size: .82rem;
  color: #fff;
  margin-bottom: .45rem;
}
.footer__office strong i { color: var(--c-secondary); font-size: .75rem; }

/* Country flag, in place of the old generic location pin.
   Real SVG artwork, not the flag emoji: Windows Chrome has no flag glyphs and
   renders the emoji as the bare letter pair ("IN", "AE", "US") instead.
   The hairline ring matters, the white stripe of the UAE and USA flags would
   otherwise bleed straight into the dark footer with no edge. */
.footer__flag {
  flex: 0 0 auto;
  width: 22px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}
.footer__office address {
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: 1.75;
  color: var(--t-inverse-soft);
  margin: 0;
}
.footer__office em {
  font-style: normal;
  color: var(--c-secondary);
  font-weight: 600;
}

/* ---- Bottom bar ---- */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.3rem 0;
  background: rgba(0, 0, 0, .2);
}
.footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; gap: 1.4rem; }
.footer__legal a { color: var(--t-inverse-soft); }
.footer__legal a:hover { color: var(--c-secondary); }


/* ---- LIGHT FOOTER ----
   Flips the whole footer (from the newsletter down) from the dark gradient to a
   light surface with dark text, to match the live site. Appended last so these
   win over the dark rules above. The brand-coloured social chips already read on
   light, so they are left as-is. */
.footer {
  background: var(--bg-tint);
  color: var(--t-body);
  border-top: 1px solid var(--border);
}
.footer__glow { display: none; }

/* The newsletter stays a dark band sitting above the light footer. */
.newsletter {
  background: var(--grad-dark);
  border-color: var(--glass-dark-border);
  box-shadow: var(--sh-lg);
}
.newsletter__title { color: #fff; }
.newsletter__copy p { color: var(--t-inverse-soft); }
.newsletter__form .form-control {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.newsletter__form .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter__form .form-control:focus {
  background: rgba(255, 255, 255, .13);
  border-color: var(--c-secondary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 168, 232, .16);
}

.footer__brandname { color: var(--c-primary); }
.footer__brandname:hover { color: var(--c-accent); }
/* Footer brand is now the full-colour logo (the brand column is light, so the
   logo's navy/red/grey ink reads well). Height only; the 5.02:1 ratio does the rest. */
.footer__logo { display: block; height: 46px; width: auto; margin-bottom: .2rem; }
.footer__about { color: var(--t-body); }
.footer__title { color: var(--t-heading); }
.footer__links a { color: var(--t-body); }
.footer__links a:hover { color: var(--c-primary); }
.footer__contact li,
.footer__contact a { color: var(--t-body); }
.footer__contact a:hover { color: var(--c-primary); }

/* Office Address band + bottom bar are a dark region at the foot of the light
   footer. The addresses band full-bleeds its dark background with a 100vw pseudo
   (body has overflow-x:hidden), so it runs edge to edge while its content stays
   contained; padding-bottom:0 on footer__main removes the light gap so the band
   and the bottom bar join into one dark block. */
.footer__main { padding-bottom: 0; }
.footer__addresses {
  position: relative;
  margin-top: 3rem;
  padding: 2.6rem 0 2.8rem;
  border-top: none;
}
.footer__addresses::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--grad-dark);
  z-index: -1;
}
.footer__addresses .footer__title { color: #fff; }
.footer__office strong { color: #fff; }
.footer__office address { color: var(--t-inverse-soft); }

.footer__bottom {
  border-top: none;
  background: var(--c-dark);
}
.footer__bottom-row p { color: var(--t-inverse-soft); }
.footer__legal a { color: var(--t-inverse-soft); }
.footer__legal a:hover { color: var(--c-secondary); }


/* ==========================================================================
   29. FLOATING UI
   ========================================================================== */

/* ---- Shared FAB base ---- */
.fab {
  position: fixed;
  right: 22px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  z-index: var(--z-fab);
  box-shadow: var(--sh-lg);
  transition: transform var(--d-base) var(--e-spring),
              opacity var(--d-base) var(--e-out),
              visibility var(--d-base),
              box-shadow var(--d-base) var(--e-out);
}
.fab:hover { transform: translateY(-4px) scale(1.07); }

.fab__tip {
  position: absolute;
  right: calc(100% + 12px);
  padding: .4rem .8rem;
  border-radius: var(--r-sm);
  background: var(--c-dark);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.fab:hover .fab__tip { opacity: 1; transform: translateX(0); }

/* WhatsApp */
.fab--whatsapp {
  bottom: 154px;
  background: #25D366;
  color: #fff;
}
.fab--whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: ripple 2.4s ease-out infinite;
  z-index: -1;
}

/* Live chat */
.fab--chat {
  bottom: 88px;
  background: var(--grad-vivid);
}
.fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EF4444;
  color: #fff;
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 700;
  border: 2px solid var(--bg-body);
}

/* Back to top — hidden until scrolled */
.fab--top {
  bottom: 22px;
  background: var(--c-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fab--top:hover { background: var(--grad-vivid); }

/* ---- Chat panel ---- */
.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 152px;
  width: 340px;
  max-width: calc(100vw - 44px);
  z-index: var(--z-chat);
  background: var(--glass-bg-solid);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatIn .32s var(--e-spring) both;
}
.chat-panel[hidden] { display: none; }

.chat-panel__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  background: var(--grad-vivid);
  color: #fff;
}
.chat-panel__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: .95rem;
}
.chat-panel__head strong {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  line-height: 1.25;
}
.chat-panel__head small {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .85);
}
.chat-panel__close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.chat-panel__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

.chat-panel__body {
  padding: 1rem;
  max-height: 240px;
  overflow-y: auto;
  display: grid;
  gap: .6rem;
  background: var(--bg-tint);
}
.chat-msg { display: flex; }
.chat-msg p {
  max-width: 82%;
  margin: 0;
  padding: .6rem .85rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  animation: filterIn .3s var(--e-out) both;
}
.chat-msg--bot p {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  color: var(--t-body);
}
.chat-msg--user { justify-content: flex-end; }
.chat-msg--user p {
  background: var(--grad-vivid);
  border-radius: 14px 14px 4px 14px;
  color: #fff;
}

.chat-panel__quick {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
}
.chat-chip {
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-primary-100);
  background: var(--c-primary-50);
  color: var(--c-primary);
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}
.chat-chip:hover { background: var(--c-primary); color: #fff; }

.chat-panel__form {
  display: flex;
  gap: .5rem;
  padding: .7rem 1rem 1rem;
  border-top: 1px solid var(--border);
}
.chat-panel__form .form-control { border-radius: var(--r-pill); font-size: var(--fs-sm); }
.chat-panel__form button {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--grad-vivid);
  color: #fff;
  cursor: pointer;
  transition: transform var(--d-base) var(--e-spring);
}
.chat-panel__form button:hover { transform: scale(1.08) rotate(-8deg); }

/* ---- Sticky CTA (mobile) ---- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-fab);
  display: none; /* enabled at <= 767px in responsive.css */
  gap: 1px;
  background: var(--border);
  box-shadow: 0 -6px 24px rgba(18, 24, 68, .14);
  transform: translateY(100%);
  transition: transform var(--d-base) var(--e-out);
}
.sticky-cta.is-visible { transform: translateY(0); }

/* Never stack the sticky CTA under the consent bar — see initCookies() */
body.has-cookie-bar .sticky-cta { display: none; }
.sticky-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .9rem .5rem;
  background: var(--bg-elevated);
  color: var(--t-heading);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.sticky-cta__btn i { color: var(--c-primary); }
.sticky-cta__btn--primary {
  background: var(--grad-vivid);
  color: #fff;
}
.sticky-cta__btn--primary i { color: #fff; }

/* ---- Cookie banner ---- */
/* A slim full-width bar rather than a bottom-left card: the card sat directly
   on top of the hero's primary CTA at common viewport heights, which is the one
   place a consent notice must never cover. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
  background: var(--glass-bg-solid);
  box-shadow: 0 -8px 32px rgba(18, 24, 68, .16);
  animation: cookieIn .45s var(--e-out) both;
}
.cookie-banner__copy { flex: 1; }
.cookie-banner__copy p { max-width: 78ch; }
.cookie-banner[hidden] { display: none; }

/* The icon, not the copy, is what sets the bar's height now — keep it small */
.cookie-banner__icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFB020, #FF6B6B);
  color: #fff;
  font-size: .9rem;
}
/* Kept deliberately short: the bar's height is clearance the hero CTA doesn't
   get. The heading sits inline with the copy so the whole thing is one line. */
.cookie-banner__copy strong {
  font-family: var(--font-head);
  font-size: .9rem;
  color: var(--t-heading);
  margin-right: .5rem;
}
.cookie-banner__copy p {
  display: inline;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.cookie-banner__actions {
  display: flex;
  gap: .5rem;
  flex: none;
}


/* ==========================================================================
   30. KEYFRAMES
   ========================================================================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 168, 232, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 168, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 168, 232, 0); }
}

@keyframes ripple {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(34px, -28px) scale(1.09); }
  66%      { transform: translate(-26px, 22px) scale(.94); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}


@keyframes bobble {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}

@keyframes wheel {
  0%   { transform: translateY(0);   opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes filterIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes chatIn {
  from { opacity: 0; transform: scale(.85) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cookieIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   31. MOTION PREFERENCES & PRINT
   ========================================================================== */

/* Respect users who ask the OS to reduce motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Kill the decorative motion outright rather than fast-forwarding it */
  .orb,
  .partners__track,
  .hero__scroll,
  .about__svg .float-y,
  .about__svg .spin-slow,
  .fab--whatsapp::before {
    animation: none !important;
  }
}

/* High-contrast mode: drop translucency in favour of solid surfaces */
@media (prefers-contrast: more) {
  .glass-card { background: var(--glass-bg-solid); }
  .nav-link { font-weight: 600; }
}

@media print {
  .topbar, .site-header, .hero__particles, .hero__orbs, .hero__grid,
  .fab, .chat-panel, .sticky-cta, .cookie-banner,
  .scroll-progress, #preloader, .hero__scroll { display: none !important; }

  body { background: #fff; color: #000; }
  .section { padding: 1.5rem 0; break-inside: avoid; }
  .glass-card { background: #fff; border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}