/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Komplytek 2026
   Signature system: "the ledger" — clause-style section markers
   (§ 01, § 02...) and hairline double-rules borrowed from
   statutory / compliance documents, rendered in a monospace
   utility face. Brand blue + green retained; neutrals shifted
   to a quieter, warmer paper tone; dark sections use deep ink
   navy rather than flat brand blue, so the brand color reads
   as an accent, not a background.
═══════════════════════════════════════════════════════════ */
:root {
  --blue:        #006FB8;
  --blue-dark:   #00508A;
  --blue-mid:    #0891D4;
  --blue-tint:   #EEF5FC;
  --blue-tint2:  #DCEBFA;
  --green:       #00BD68;
  --green-dark:  #008C4D;
  --green-tint:  #E9FBF3;
  --green-tint2: #C6F2DE;

  --ink:      #0A1424;
  --ink-2:    #101F35;
  --ink-3:    #182B47;

  --white:    #FFFFFF;
  --paper:    #FAFAF8;
  --surface:  #F6F8FA;
  --surface2: #F0F3F6;
  --border:   #E2E6EA;
  --border2:  #D3DAE1;
  --text-1:   #0A1424;
  --text-2:   #33455C;
  --text-3:   #64758A;

  --font-d: 'Plus Jakarta Sans', sans-serif;
  --font-b: 'Inter', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --ease:   cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-s: cubic-bezier(0.34,1.56,0.64,1);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 14px rgba(10,20,36,0.06);
  --shadow:    0 14px 40px rgba(10,20,36,0.10);
  --shadow-lg: 0 28px 80px rgba(10,20,36,0.16);

  --sp-section-y: clamp(64px, 9vw, 116px);
  --sp-section-x: clamp(18px, 5vw, 44px);
  --bs-body-font-family: var(--font-b);

  /* on-dark text contrast tiers — used across #hero, #results, #contact, #footer
     so every dark section reads at a consistent, accessible contrast level */
  --on-dark-1: #FFFFFF;
  --on-dark-2: rgba(255,255,255,.86);
  --on-dark-3: rgba(255,255,255,.70);
  --on-dark-4: rgba(255,255,255,.56);
  --on-dark-5: rgba(255,255,255,.44);
}

/* ═══════════════════════════════════════════════════════════
   RESET / BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--paper);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
button { cursor: pointer; font-family: inherit; }
.container, .container-fluid { max-width: 1280px; }

/* ─── layout utils ──────────────────────────────────────── */
.section { padding: var(--sp-section-y) 0; position: relative; isolation: isolate; overflow: hidden; }
.inner   { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-section-x); position: relative; }

/* signature: clause / ledger marker */
.clause {
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-m); font-size: 20px; font-weight: 600;
  letter-spacing: .04em; color: var(--blue); margin-bottom: 18px;
}
.clause .clause-num {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 30px; height: 22px; padding:0 6px;
  border: 1px solid var(--blue-tint2); border-radius: 5px;
  background: var(--blue-tint); font-size: 11.5px; color: var(--blue);display:none;
}
.clause .clause-line { flex:0 0 30px; height:2px; background: var(--border2); }
.clause.on-dark { color: var(--green-tint2); }
.clause.on-dark .clause-num { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--green-tint2); }
.clause.on-dark .clause-line { background: rgba(255,255,255,.18); }
.clause.center { justify-content: center; }
.wwa-text p {
    margin-bottom: 18px;
    line-height: 1.7;
}

.wwa-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wwa-text ul li {
    margin-bottom: 12px;
    line-height: 1.7;
    color: var(--text-2);
}

.wwa-text ul li strong {
    font-weight: 600;
}
.sec-title {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.6vw, 52px); font-weight: 800;
  line-height: 1.14; letter-spacing: -.025em;
  color: var(--text-1); margin-bottom: 20px;
}
.sec-title .hl-blue { color: var(--blue); }
.sec-title .hl-green { color: var(--green); }
.sec-title.on-dark { color: #fff; }

.sec-sub { font-size: clamp(15px,1.6vw,17px); line-height: 1.75; color: var(--text-3); max-width: 560px; }
.sec-sub.on-dark { color: var(--on-dark-3); }

.ledger-rule { height: 5px; width: 64px; border-top: 2px solid var(--border2); border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.ledger-rule.on-dark { border-top-color: rgba(255,255,255,.3); border-bottom-color: rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   DECORATIVE SYSTEM — alternating tint sections + ambient fill
   Used to break the white/gray monotony between §-sections and
   to occupy leftover whitespace with quiet, on-brand motion
   rather than empty margin. Everything here is pure CSS/SVG:
   no images, no JS, negligible paint cost.
═══════════════════════════════════════════════════════════ */
.bg-tint {
  position: relative;
  background:
    radial-gradient(ellipse 60% 55% at 88% 0%, var(--blue-tint) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 8% 100%, var(--green-tint) 0%, transparent 62%),
    var(--surface);
  isolation: isolate;
  overflow: hidden;
}
.bg-tint::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,20,36,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,20,36,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 15%, black, transparent 78%);
}
.bg-blob { position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(6px); opacity:.55; }
.bg-blob.blob-blue  { background:radial-gradient(circle,rgba(0,111,184,.20) 0%,transparent 72%); animation:blobDrift 16s ease-in-out infinite; }
.bg-blob.blob-green { background:radial-gradient(circle,rgba(0,189,104,.20) 0%,transparent 72%); animation:blobDrift 19s 1.5s ease-in-out infinite reverse; }
@keyframes blobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(18px,-14px) scale(1.08); }
  66%     { transform: translate(-14px,10px) scale(0.96); }
}

/* dotted orbit ring — quiet geometric filler for asymmetric layouts (e.g. Who We Are image column) */
.orbit-ring {
  position:absolute; border-radius:50%;
  border:1.5px dashed var(--border2);
  pointer-events:none; z-index:-1;
  animation: orbitSpin 60s linear infinite;
}
.orbit-ring.tight { border-color: var(--blue-tint2); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.deco-plus {
  position:absolute; width:14px; height:14px; pointer-events:none; z-index:-1; opacity:.5;
}
.deco-plus::before, .deco-plus::after { content:''; position:absolute; background:var(--border2); }
.deco-plus::before { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
.deco-plus::after  { left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .bg-blob, .orbit-ring { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index: 1030;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
  padding: 0;
}
#nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 2px 24px rgba(10,20,36,0.08);
}

#nav.scrolled .nav-logo img {
    height: 36px;
    width: auto;
    filter: none;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; min-height:70px; padding-top:10px; padding-bottom:10px; gap:16px; }
.nav-logo img { height: 36px; width: auto;filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)); }

.nav-list { display:flex; align-items:center; gap:2px; margin:0 auto; }
.nav-item { position: relative; }
.nav-link.dropdown-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background:none; border:none;
  transition: color .2s, background .2s;
}
.navbar.scrolled .nav-link.dropdown-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  background:none; border:none;
  transition: color .2s, background .2s;
}
.nav-link.dropdown-toggle::after { display:none; }
.nav-link.dropdown-toggle svg { width:11px; height:11px; opacity:.5; transition:transform .2s; }
.nav-item:hover .nav-link.dropdown-toggle,
.nav-link.dropdown-toggle:hover,
.nav-link.dropdown-toggle[aria-expanded="true"] { color: var(--blue); background: var(--blue-tint); }
.nav-item.show .nav-link.dropdown-toggle svg,
.nav-item:hover .nav-link.dropdown-toggle svg { transform:rotate(180deg); }

.nav-dd {
  min-width:222px; background:#fff;
  border:1px solid var(--border); border-radius:14px;
  padding:8px; box-shadow:var(--shadow-lg);
  margin-top:6px !important;
}
.nav-dd a {
  display:block; padding:9px 13px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--text-2);
  transition: background .15s, color .15s, padding-left .15s;
}
.nav-dd a:hover { background:var(--blue-tint); color:var(--blue); padding-left:18px; }

.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.btn-nav-ghost {
  padding:8px 16px; border-radius:8px;
  border:1.5px solid var(--border2); background:transparent;
  font-size:13px; font-weight:600; color:#fff;
  transition:.2s; white-space:nowrap;
}
.navbar.scrolled .btn-nav-ghost {
  padding:8px 16px; border-radius:8px;
  border:1.5px solid var(--border2); background:transparent;
  font-size:13px; font-weight:600; color:var(--text-2);
  transition:.2s; white-space:nowrap;
}

.btn-nav-ghost:hover { border-color:var(--blue); color:var(--blue); }
.btn-nav-primary {
  padding:9px 20px; border-radius:9px; border:none;
  background: var(--ink);
  font-size:13px; font-weight:700; color:#fff;
  box-shadow:0 4px 16px rgba(10,20,36,.25);
  transition:.25s var(--ease); white-space:nowrap;
}
.btn-nav-primary:hover { transform:translateY(-1px); background: var(--green-dark); box-shadow:0 8px 24px rgba(0,140,77,.3); color:#fff; }

.navbar-toggler { border:1.5px solid var(--border2); padding:8px 10px; border-radius:8px; }
.navbar-toggler:focus { box-shadow:0 0 0 3px rgba(0,111,184,.15); }
.navbar-toggler-icon { width:20px; height:20px; }

@media (max-width: 991.98px) {

  /* FIX 3 (the overflow/cut-off menu) — the flex row lives on the custom
     .nav-inner, which (unlike Bootstrap's own .navbar) had no flex-wrap.
     Without it, the opened .navbar-collapse — which Bootstrap gives
     flex-basis:100% — can't drop onto its own row, so it stays squeezed on
     the bar and overflows / gets cut off to the right. Allowing the row to
     wrap lets the menu occupy a full-width second row, as intended. */
  .nav-inner { flex-wrap: wrap; }

  .nav-list { margin:0 0 12px; flex-direction:column; align-items:stretch; width:100%; gap:6px; }
  .nav-item { width:100%; }

  /* FIX 1 — the collapsed mobile menu panel is always white (see
     .navbar-collapse below), but the toggle label + chevron inherit
     color:#fff until the navbar gets .scrolled. At the top of the page
     that renders them white-on-white (invisible). Force dark text/chevron
     inside the mobile menu regardless of the navbar's scroll state. */
  .nav-link.dropdown-toggle { width:100%; justify-content:space-between; padding:12px 14px; border:1px solid var(--border); color:var(--text-2); }
  .nav-item.show .nav-link.dropdown-toggle,
  .nav-link.dropdown-toggle[aria-expanded="true"] { color:var(--blue); background:var(--blue-tint); }

  .nav-dd { position:static !important; transform:none !important; width:100%; box-shadow:none; border:none; background:var(--surface); margin-top:2px !important; display:none; }

  /* FIX 2 — Bootstrap 5 adds .show to the .dropdown-menu (.nav-dd) and to
     the toggle <button>, never to the .nav-item <li>. The old selector
     `.nav-item.show .nav-dd` therefore never matched; match the class
     Bootstrap actually toggles instead. */
  .nav-dd.show { display:block; }

  .navbar-collapse {
    background:var(--white); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); border:1px solid var(--border);
    padding:16px; margin-top:10px; max-height:calc(100vh - 100px); overflow-y:auto;
  }
  .nav-actions { flex-direction:column; align-items:stretch; gap:10px; }
  .nav-actions .btn-nav-ghost, .nav-actions .btn-nav-primary { width:100%; justify-content:center; text-align:center; }
}
@media (min-width: 992px) {
  .navbar-collapse { display:flex !important; flex:1 1 auto; }
  .nav-dd { position:absolute; top:100%; left:50%; transform:translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   HERO — fixed, full-bleed photographic background
═══════════════════════════════════════════════════════════ */
#hero {
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  /* true fixed background: pinned to the viewport while this section is on
     screen, naturally clipped away once the section scrolls past — no JS
     needed. Disabled on touch/small screens below (perf + iOS quirks). */
  background-image:
    linear-gradient(180deg, rgba(6,14,28,.82) 0%, rgba(8,17,32,.86) 45%, rgba(6,13,26,.94) 100%),
    url('../image/finance_banner_new.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
@media (max-width: 991.98px), (hover:none) {
  #hero { background-attachment: scroll, scroll; }
}
/* grid overlay + glow accents scroll normally with hero content */
#hero .hero-grid {
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 70% at 50% 35%,black,transparent);
}
#hero .glow-a, #hero .glow-b { position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(4px); }
#hero .glow-a { top:-160px; right:-120px; width:560px; height:560px; background:radial-gradient(circle,rgba(0,189,104,.16) 0%,transparent 70%); animation:pulseBg 9s ease-in-out infinite; }
#hero .glow-b { bottom:-200px; left:-160px; width:520px; height:520px; background:radial-gradient(circle,rgba(0,111,184,.18) 0%,transparent 70%); animation:pulseBg 11s 1s ease-in-out infinite; }
@keyframes pulseBg { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

#hero { padding-top: 118px; padding-bottom: 56px; }
.hero-row { position:relative; z-index:2; width:100%;text-align:center; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:100px; font-family:var(--font-m); font-size:12px; font-weight:500; color:#fff;
  backdrop-filter:blur(6px); margin-bottom:26px; letter-spacing:.02em;
}
.hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(0,189,104,.25); animation:blink 2s ease-in-out infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }

.hero-h1 {
  font-family:var(--font-d);
  font-size:clamp(36px,5.4vw,72px);
  font-weight:900; line-height:1.08; letter-spacing:-.03em;
  color:#fff; margin-bottom:24px; max-width: 820px;
  text-align:center; margin-left:auto; margin-right:auto;
}
.hero-h1 em { font-style:normal; color:var(--green-tint2); }

.hero-p { font-size:17px; line-height:1.75; color:var(--on-dark-3); margin-bottom:38px; max-width:600px; text-align:center; margin-left:auto; margin-right:auto; }

.hero-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:64px; }

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--radius-sm); border:none;
  background: var(--green);
  font-family:var(--font-d); font-size:14.5px; font-weight:700; color:#06110b;
  box-shadow:0 10px 30px rgba(0,189,104,.35);
  transition:.3s var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease);
}
.btn-primary:hover::after { left:130%; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,189,104,.45); color:#06110b; background:#00d976; }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.05);
  font-family:var(--font-d); font-size:14.5px; font-weight:700; color:#fff;
  backdrop-filter:blur(6px);
  transition:.25s var(--ease);
}
.btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.12); }

.hero-stats { display:flex; justify-content:center; gap:0; flex-wrap:wrap; max-width:920px; margin:0 auto; border-top:1px solid rgba(255,255,255,.14); padding-top:34px; }
.h-stat { flex:1 1 0; min-width:130px; text-align:center; padding:0 14px; position:relative; }
.h-stat + .h-stat::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:rgba(255,255,255,.14); }
.h-stat-num { font-family:var(--font-m); font-size:clamp(24px,3vw,34px); font-weight:700; color:#fff; line-height:1; display:flex; align-items:baseline; justify-content:center; gap:2px; }
.h-stat-num .suffix { color:var(--green-tint2); }
.h-stat-lbl { font-size:12px; color:var(--on-dark-4); margin-top:8px; letter-spacing:.01em; }

.hero-floats { position:absolute; z-index:2; display:none; }
@media (min-width: 992px) {
  .hero-floats { display:block; }
  .hf-1 { top:22%; left:4%; animation:floatY 5s ease-in-out infinite; }
  .hf-2 { top:60%; right:5%; animation:floatY 5s 1.2s ease-in-out infinite; }
}
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hf-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); border-radius:14px; padding:12px 16px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.hf-label { font-family:var(--font-m); font-size:10.5px; color:var(--on-dark-4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.hf-val { font-family:var(--font-d); font-size:18px; font-weight:800; color:#fff; }
.hf-val i { color:var(--green); margin-right:6px; }

.scroll-cue { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--on-dark-4); font-family:var(--font-m); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue .bar { width:1px; height:26px; background:linear-gradient(180deg, rgba(255,255,255,.7), transparent); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

@media (max-width: 575.98px) {
  .hero-stats { row-gap:22px; }
  .h-stat { flex-basis:45%; }
  .h-stat + .h-stat::before { display:none; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width:100%; }
  .hero-btns { flex-direction:column; align-items:stretch; }
  .wwa-stat-chip{
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   CLIENTS / PARTNERS TICKER
═══════════════════════════════════════════════════════════ */
#industry-leaders { background:var(--white); }
#consulting-partners { /* background handled by .bg-tint */ }

.ticker-label { text-align:center; font-family:var(--font-m); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:28px; }

.ticker-wrap { position:relative; overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }
.ticker-wrap::before, .ticker-wrap::after { content:""; position:absolute; top:0; width:min(180px,12vw); height:100%; z-index:2; pointer-events:none; }
.ticker-wrap::before { left:0; background:linear-gradient(to right,var(--white),transparent); }
.ticker-wrap::after  { right:0; background:linear-gradient(to left,var(--white),transparent); }
#consulting-partners .ticker-wrap::before { background:linear-gradient(to right,var(--surface),transparent); }
#consulting-partners .ticker-wrap::after  { background:linear-gradient(to left,var(--surface),transparent); }

.ticker-track { display:flex; align-items:center; gap:16px; width:max-content; animation:ticker 32s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ticker-item {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:184px; height:104px; padding:18px 30px; border-radius:16px;
  background:var(--white); border:1.5px solid var(--border);
  overflow:hidden; transition:all .4s var(--ease);
}
.ticker-item img { max-width:150px; max-height:56px; width:auto; height:auto; object-fit:contain; transition:all .4s var(--ease); }
.ticker-item:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:var(--shadow-lg); }
.ticker-item:hover img { transform:scale(1.06); }

@media (max-width:575.98px) {
  .ticker-item { min-width:148px; height:84px; padding:14px 22px; }
  .ticker-item img { max-width:112px; max-height:44px; }
}

/* ═══════════════════════════════════════════════════════════
   WHO WE ARE
═══════════════════════════════════════════════════════════ */
#who-we-are { background:var(--white); }
.wwa-img-stack { position:relative; height:100%; min-height:560px; isolation:isolate; }
.wwa-img-main { position:absolute; top:0; left:0; right:10%; bottom:70px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.wwa-img-main img { width:100%; height:100%; object-fit:cover; }
.wwa-img-accent { position:absolute; bottom:-24px; right:-10px; width:56%; height:200px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:5px solid var(--white); display:none; }
.wwa-img-accent img { width:100%; height:100%; object-fit:cover; }
.wwa-stat-chip { position:absolute; top:-82px; left:-16px; z-index:3; background:var(--ink); border-radius:14px; box-shadow:var(--shadow-lg); padding:16px 20px; }
.wwa-stat-chip .n { font-family:var(--font-m); font-size:24px; font-weight:700; color:var(--green-tint2); }
.wwa-stat-chip .l { font-size:11.5px; color:var(--on-dark-3); max-width:150px; margin-top:4px; }

.wwa-text p { font-size:16px; line-height:1.8; color:var(--text-2); margin-bottom:18px; }
.wwa-link { display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700; color:var(--blue); border-bottom:2px solid var(--blue-tint2); padding-bottom:2px; transition:.2s; margin-bottom: 36px;}
.wwa-link:hover { border-color:var(--green); color:var(--green-dark); gap:11px; }

.mv-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom: 30px; }
.mv-card { padding:24px 22px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--surface); transition:.25s; }
.mv-card:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-3px); }
.mv-card-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:14px; }
.mv-card.mission .mv-card-icon { background:var(--blue-tint); color:var(--blue); }
.mv-card.vision .mv-card-icon { background:var(--green-tint); color:var(--green-dark); }
.mv-card h4 { font-family:var(--font-d); font-size:16px; font-weight:800; margin-bottom:9px; color:var(--text-1); }
.mv-card p { font-size:13.5px; line-height:1.65; color:var(--text-3); }

.values-strip { display:flex; flex-wrap:wrap; gap:10px; }
.value-chip { display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:100px; border:1.5px solid var(--border2); background:var(--white); font-size:15px; font-weight:700; color:var(--text-2); transition:.2s; }
.value-chip:hover { border-color:var(--green); color:var(--green-dark); background:var(--green-tint); }
.value-chip .vc-num { font-family:var(--font-m); font-size:11px; color:var(--text-3); }

@media (max-width:991.98px) {
  .wwa-img-stack { min-height:360px; margin-bottom:36px; }
}
@media (max-width:575.98px) {
  .mv-row { grid-template-columns:1fr; }
  .wwa-img-accent { right:0; width:60%; height:150px; }
}

/* ═══════════════════════════════════════════════════════════
   WHAT WE DO — services
═══════════════════════════════════════════════════════════ */
#services { /* background handled by .bg-tint */ }

.svc-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; flex-wrap:wrap; }

.svc-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; border-bottom:1px solid var(--border); padding-bottom: 22px; }
.svc-tab {
  padding:10px 20px; border-radius:100px;
  border:1.5px solid var(--border2); background:var(--white);
  font-size:13px; font-weight:700; color:var(--text-2);
  transition:.2s var(--ease); display:flex; align-items:center; gap:8px;
}
.svc-tab i { font-size:12px; color: var(--text-3); }
.svc-tab:hover { border-color:var(--blue); color:var(--blue); }
.svc-tab.on {
  background: var(--ink);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 22px rgba(10,20,36,.25);
}
.svc-tab.on i { color: var(--green-tint2); }

.svc-panel { display:none; }
.svc-panel.on { display:block; }

.svc-banner { position:relative; border-radius:var(--radius-lg); overflow:hidden; height:220px; margin-bottom:26px; box-shadow:var(--shadow); }
.svc-banner img { width:100%; height:100%; object-fit:cover; }
.svc-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,20,36,.82) 10%, rgba(10,20,36,.35) 55%, transparent 90%); }
.svc-banner-copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 36px; max-width:520px;z-index:2; }
.svc-banner-tag { font-family:var(--font-m); font-size:11px; color:var(--green-tint2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.svc-banner-copy h3 { font-family:var(--font-d); font-size:clamp(20px,2.4vw,27px); font-weight:800; color:#fff; margin-bottom:8px; }
.svc-banner-copy p { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.6; max-width:420px; }

/* equal-height, icon-driven service cards */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:991.98px) { .svc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px) { .svc-grid { grid-template-columns:1fr; } }

.svc-card {
  display:flex; flex-direction:column; height:100%;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:.3s var(--ease); position:relative; padding:26px 22px;
}
.svc-card:hover { transform:translateY(-5px); border-color:var(--blue); box-shadow:var(--shadow-lg); }
.svc-card-icon { width:48px; height:48px; border-radius:13px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:20px; transition:.3s; flex-shrink:0; }
.svc-card:hover .svc-card-icon { background:var(--green-tint); color:var(--green-dark); transform:scale(1.08) rotate(-4deg); }
.svc-card h3 { font-family:var(--font-d); font-size:16.5px; font-weight:800; color:var(--text-1); margin-bottom:10px; line-height:1.32; }
.svc-card p { font-size:13.5px; line-height:1.65; color:var(--text-3); flex:1; margin-bottom:18px; }
.svc-arrow { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue); transition:gap .2s; margin-top:auto; }
.svc-card:hover .svc-arrow { gap:10px; color: var(--green-dark);}

/* ═══════════════════════════════════════════════════════════
   WHO WE SERVE — new section, illustrated icon cards
═══════════════════════════════════════════════════════════ */
#who-we-serve { background:var(--white); }
.serve-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:991.98px) { .serve-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:575.98px) { .serve-grid { grid-template-columns:repeat(2,1fr); } }

.serve-card {
  position:relative; padding:26px 18px 22px; border-radius:var(--radius);
  background:var(--surface); border:1.5px solid var(--border);
  text-align:center; transition:.3s var(--ease); overflow:hidden;
}
.serve-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green)); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.serve-card:hover { transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow-lg); background:var(--white); }
.serve-card:hover::before { transform:scaleX(1); }
.serve-icon { width:56px; height:56px; margin:0 auto 16px; border-radius:16px; background:var(--white); border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--blue); transition:.3s var(--ease); }
.serve-card:hover .serve-icon { background:var(--ink); color:var(--green-tint2); border-color:var(--ink); transform:scale(1.08); }
.serve-card h4 { font-family:var(--font-d); font-size:16px; font-weight:800; color:var(--text-1); margin-bottom:6px; }
.serve-card p { font-size:14px; line-height:1.5; color:var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   SUCCESS STORIES — consulting-report style cards
═══════════════════════════════════════════════════════════ */
#stories { /* background handled by .bg-tint */ }
.story-card {
  height:100%; display:flex; flex-direction:column;
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.35s var(--ease);
}
.story-card:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:var(--shadow-lg); }
.story-img { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--blue-tint); position:relative; }
.story-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.story-card:hover .story-img img { transform:scale(1.06); }
.story-industry-badge { position:absolute; top:14px; left:14px; padding:5px 12px; border-radius:100px; background:rgba(10,20,36,.75); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-m); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.story-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.story-body h3 { font-family:var(--font-d); font-size:15px; font-weight:800; line-height:1.45; margin-bottom:16px; color:var(--text-1); }
.story-field { margin-bottom:12px; padding-left:14px; border-left:2px solid var(--border2); }
.story-field:last-of-type { margin-bottom:0; }
.story-field .fl { font-family:var(--font-m); font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.story-field .fv { font-size:12.5px; line-height:1.55; color:var(--text-2); }
.story-field.result { border-left-color:var(--green); }
.story-field.result .fl { color:var(--green-dark); }
.story-field.result .fv { color:var(--text-1); font-weight:600; }

.story-nums { background:var(--ink); border:none; }
.story-nums:hover { border-color:transparent; }

/* ═══════════════════════════════════════════════════════════
   RESULTS BY NUMBERS + GLOBAL PRESENCE
═══════════════════════════════════════════════════════════ */
#results { background:var(--ink); overflow:hidden; }
#results .inner { z-index:2; }
#results::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,black,transparent);
}

.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); overflow:hidden; margin-top:8px; }
@media (max-width:767.98px) { .stat-grid { grid-template-columns:repeat(2,1fr); } }
.stat-cell { background:var(--ink-2); padding:32px 26px; text-align:left; }
.stat-cell i { font-size:18px; color:var(--green-tint2); margin-bottom:16px; display:block; }
.stat-num { font-family:var(--font-m); font-size:clamp(30px,3.4vw,42px); font-weight:700; color:#fff; line-height:1; }
.stat-num .suffix { color:var(--green-tint2); }
.stat-lbl { font-size:13px; color:var(--on-dark-4); margin-top:10px; line-height:1.5; max-width:200px; }

.globe-row { margin-top: 76px; padding-top: 64px; border-top:1px solid rgba(255,255,255,.1); }
.globe-copy .clause.on-dark { margin-bottom:16px; }
.globe-copy h3 { font-family:var(--font-d); font-size:clamp(22px,2.6vw,30px); font-weight:800; color:#fff; margin-bottom:16px; }
.globe-copy p { font-size:14.5px; line-height:1.75; color:var(--on-dark-3); margin-bottom:26px; max-width:420px; }
.globe-country-list { display:flex; flex-wrap:wrap; gap:9px; }
.gc-chip { display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); font-size:12.5px; color:var(--on-dark-2); }
.gc-chip .flag { font-size:14px; }

.globe-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; isolation:isolate; }
.globe-glow-bg {
  position:absolute; inset:6%; z-index:-1; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(0,189,104,.16) 0%, rgba(8,145,212,.10) 45%, transparent 72%);
  filter: blur(18px);
  animation: globeGlowPulse 6s ease-in-out infinite;
}
@keyframes globeGlowPulse { 0%,100% { opacity:.7; transform:scale(1); } 50% { opacity:1; transform:scale(1.05); } }

.globe-svg { width:100%; max-width:420px; height:auto; overflow:visible; }
.globe-svg circle.g-ring { fill:none; stroke:rgba(255,255,255,.16); }
.globe-svg ellipse.g-merid { fill:none; stroke:rgba(255,255,255,.13); }
.globe-svg circle.g-core { fill: url(#globeGrad); }

.globe-rotor { animation: globeSpin 100s linear infinite; }
@keyframes globeSpin { to { transform: rotate(360deg); } }

/* connection arcs — dim base line + a brighter travelling pulse riding the same path */
.g-arc-base { fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; }
.g-arc-base.mesh { stroke:rgba(0,189,104,.10); stroke-dasharray:2 4; }
.g-arc-flow {
  fill:none; stroke:url(#arcFlowGrad); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray: 30 220; animation: arcFlow 3.6s linear infinite;
}
.g-arc-flow.mesh { stroke-width:1.2; opacity:.7; animation-duration:4.4s; }
@keyframes arcFlow { to { stroke-dashoffset: -250; } }

/* pins — hub (India), featured countries, minor countries */
.g-pin { transform-box: fill-box; transform-origin:center; }
.g-pin .glow { fill:var(--green); opacity:.35; filter:blur(2px); }
.g-pin .dot { fill:var(--green); }
.g-pin .ring { fill:none; stroke:var(--green); stroke-width:1.4; opacity:0; animation:pinPulse 2.8s ease-out infinite; }
@keyframes pinPulse { 0%{opacity:.65; transform:scale(.3);} 100%{opacity:0; transform:scale(2.8);} }

.g-pin.hub-pin .dot, .g-pin.hub-pin .glow, .g-pin.hub-pin .ring { fill:var(--green); stroke:var(--green); }
.g-pin.hub-pin .dot { filter:url(#pinGlow); }

.g-pin.feat-pin .dot, .g-pin.feat-pin .glow, .g-pin.feat-pin .ring { fill:var(--blue-mid); stroke:var(--blue-mid); }
.g-pin.feat-pin .dot { filter:url(#pinGlow); }

.g-pin.minor-pin .dot, .g-pin.minor-pin .ring { fill:var(--green-tint2); stroke:var(--green-tint2); opacity:.9; }
.g-pin.minor-pin.alt .dot, .g-pin.minor-pin.alt .ring { fill:var(--blue-tint2); stroke:var(--blue-tint2); }
.g-pin.minor-pin .ring { animation-duration:3.4s; }

.globe-badge { position:absolute; bottom:6px; right:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); border-radius:12px; padding:10px 16px; text-align:center; }
.globe-badge .n { font-family:var(--font-m); font-size:22px; font-weight:700; color:#fff; }
.globe-badge .l { font-size:10px; color:var(--on-dark-4); text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:991.98px) { .globe-wrap { margin-top:36px; } }
@media (prefers-reduced-motion: reduce) {
  .globe-rotor, .g-arc-flow, .globe-glow-bg { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   WHY CHOOSE KOMPLYTEK — USPs
═══════════════════════════════════════════════════════════ */
#usps { background:var(--white); }
.usp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:767.98px) { .usp-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px) { .usp-grid { grid-template-columns:1fr; } }
.usp-card { height:100%; padding:30px 24px; border-radius:var(--radius); background:var(--surface); border:1.5px solid var(--border); transition:.3s var(--ease); }
.usp-card:hover { border-color:var(--green); box-shadow:var(--shadow-lg); transform:translateY(-4px); background:var(--white); }
.usp-icon-wrap { width:52px; height:52px; border-radius:14px; background:var(--ink); color:var(--green-tint2); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:20px; }
.usp-card h4 { font-family:var(--font-d); font-size:15.5px; font-weight:800; line-height:1.4; color:var(--text-1); margin-bottom: 8px;}
.usp-card p { font-size:13px; line-height:1.6; color:var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   OUR PROCESS
═══════════════════════════════════════════════════════════ */
#process { /* background handled by .bg-tint */ }
.process-row { position:relative; margin-top:56px; row-gap:36px; }
.process-row::after {
  content:''; position:absolute; top:36px; left:8.5%; right:8.5%; height:1px;
  background-image: repeating-linear-gradient(90deg, var(--border2) 0 8px, transparent 8px 16px); z-index:0;
}
.proc-step { display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1; }
.proc-dot { width:72px; height:72px; border-radius:50%; background:var(--white); border:1.5px solid var(--border2); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; transition:.3s var(--ease); box-shadow:var(--shadow-sm); }
.proc-dot .pnum { font-family:var(--font-m); font-size:9px; color:var(--text-3); margin-top:2px; }
.proc-step:hover .proc-dot { border-color:var(--blue); background:var(--blue-tint); transform:scale(1.08); box-shadow:0 0 0 6px rgba(0,111,184,.1); }
.proc-step h4 { font-family:var(--font-d); font-size:13.5px; font-weight:800; color:var(--text-1); margin-bottom:6px; }
.proc-step p { font-size:12px; line-height:1.5; color:var(--text-3); max-width:150px; }
@media (max-width:991.98px) { .process-row::after { display:none; } }

/* ═══════════════════════════════════════════════════════════
   KNOWLEDGE HUB — blog
═══════════════════════════════════════════════════════════ */
#blogs { background:var(--white); }
.blogs-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.btn-viewall { display:inline-block; padding:10px 22px; border-radius:var(--radius-sm); border:1.5px solid var(--border2); background:var(--white); font-size:13.5px; font-weight:700; color:var(--blue); transition:.2s; white-space:nowrap; }
.btn-viewall:hover { border-color:var(--blue); background:var(--blue-tint); }

.blog-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.blog-filter { padding:8px 18px; border-radius:100px; border:1.5px solid var(--border2); background:var(--white); font-size:12.5px; font-weight:700; color:var(--text-2); transition:.2s; }
.blog-filter:hover { border-color:var(--blue); color:var(--blue); }
.blog-filter.on { background:var(--ink); border-color:transparent; color:#fff; }

.blog-card { display:flex; flex-direction:column; height:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:.35s var(--ease); }
.blog-card:hover { transform:translateY(-5px); border-color:var(--blue); box-shadow:var(--shadow-lg); }
.blog-img { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--blue-tint2); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.blog-card:hover .blog-img img { transform:scale(1.04); }
.blog-cat { position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:100px; background:rgba(10,20,36,.75); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-m); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.blog-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.blog-body h3 { font-family:var(--font-d); font-size:15px; font-weight:800; line-height:1.4; color:var(--text-1); margin-bottom:10px; flex:1; }
.blog-body p { font-size:13px; line-height:1.65; color:var(--text-3); margin-bottom:16px; }
.blog-meta { font-size:11.5px; color:var(--text-3); display:flex; gap:14px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px; }
.blog-meta span { display:flex; align-items:center; gap:5px; }
.blog-meta i { font-size:10.5px; color: var(--text-3);}
.blog-read { margin-top:14px; font-size:13px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:4px; }
.blog-spinner { display:flex; align-items:center; justify-content:center; padding:60px 20px; color:var(--text-3); gap:12px; text-align:center; }
.spin { width:28px; height:28px; border-radius:50%; border:2px solid var(--border2); border-top-color:var(--blue); animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════════════════
   CONTACT — glassmorphism
═══════════════════════════════════════════════════════════ */
#contact { background:var(--ink); position:relative; overflow:hidden; }
#contact::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 70% at 100% 0%,black,transparent);
}
#contact::after {
  content:''; position:absolute; top:-140px; left:-100px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,189,104,.14) 0%, transparent 70%); pointer-events:none;
}
.contact-side h3 { font-family:var(--font-d); font-size:clamp(20px,2.4vw,25px); font-weight:800; color:#fff; margin-bottom:28px; line-height:1.3; }
.cinfo-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.cinfo-icon { width:44px; height:44px; border-radius:12px; flex-shrink:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--green-tint2); }
.cinfo-lbl { font-family:var(--font-m); font-size:10.5px; font-weight:500; color:var(--on-dark-4); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.cinfo-val { font-size:14.5px; font-weight:500; color:var(--on-dark-2); word-break:break-word; }
.cinfo-val a:hover { color:var(--green-tint2); }

.socials { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.soc-btn { width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--on-dark-3); transition:.2s; }
.soc-btn:hover { background:var(--green); border-color:var(--green); color:#06110b; }

.contact-map { margin-top:30px; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.14); height:200px; filter:grayscale(.2) contrast(1.05); }
.contact-map iframe { width:100%; height:100%; border:0; display:block; }

.cform-wrap {
  background:rgba(255,255,255,.06); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); padding:clamp(26px,4vw,40px);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.cform-title { font-family:var(--font-d); font-size:clamp(19px,2.2vw,23px); font-weight:800; color:#fff; margin-bottom:6px; }
.cform-sub { font-size:14px; color:var(--on-dark-4); margin-bottom:28px; }
.finput {
  width:100%; padding:13px 16px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm); font-family:var(--font-b);
  font-size:14px; color:#fff; outline:none;
  transition:.25s var(--ease); -webkit-appearance:none;
}
.finput::placeholder { color:var(--on-dark-5); font-size:13.5px; }
.finput:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,189,104,.15); background:rgba(255,255,255,.08); }

/*popup form placgolder*/
#mform .finput::placeholder { color:#64758a; font-size:13.5px; }
#mform .finput:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,189,104,.15); background:rgba(255,255,255,.08); }


textarea.finput { resize:vertical; min-height:90px; }
.fsubmit {
  width:100%; padding:15px; border-radius:var(--radius-sm); border:none;
  background: var(--green);
  font-family:var(--font-d); font-size:15px; font-weight:800; color:#06110b;
  box-shadow:0 10px 30px rgba(0,189,104,.3); margin-top:8px;
  transition:.3s var(--ease);
}
.fsubmit:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,189,104,.4); background:#00d976; }
.fsubmit:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.fmsg { margin-top:10px; font-size:13.5px; text-align:center; min-height:18px; color:var(--on-dark-2); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
#footer { background:#080F1C; padding-top:76px; }
.footer-grid-wrap { padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); row-gap:40px; }
.footer-brand p { font-size:14px; line-height:1.75; color:var(--on-dark-4); margin:20px 0 24px; max-width:300px; }
.footer-logo { height:40px; width:auto; background:#fff; border-radius:8px; padding:6px 14px; }
.footer-socials { display:flex; gap:9px; flex-wrap:wrap; }
.fsoc { width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:transparent; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--on-dark-4); transition:.2s; }
.fsoc:hover { background:var(--green); border-color:var(--green); color:#06110b; }
.footer-col h5 { font-family:var(--font-m); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--on-dark-5); margin-bottom:18px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:13.5px; color:var(--on-dark-3); transition:.2s; display:inline-block; }
.footer-col a:hover { color:#fff; padding-left:4px; }
.footer-contact { font-size:13px; color:var(--on-dark-4); display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.footer-contact a { color:var(--on-dark-3); transition:.2s; }
.footer-contact a:hover { color:#fff; }
.footer-bottom { padding:20px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; text-align:center; }
.footer-copy { font-size:12.5px; color:var(--on-dark-5); margin:0; }
.footer-copy a { color:var(--on-dark-4); transition:.2s; }
.footer-copy a:hover { color:#fff; }
@media (max-width:575.98px) { .footer-bottom { flex-direction:column; text-align:center; } }

/* ═══════════════════════════════════════════════════════════
   FLOATING WHATSAPP / MODAL / MISC
═══════════════════════════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:20px; right:20px; z-index:800;
  width:54px; height:54px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff;
  box-shadow:0 8px 28px rgba(37,211,102,.4);
  transition:.3s var(--ease-s);
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 12px 40px rgba(37,211,102,.55); color:#fff; }
@media (max-width:575.98px) { .wa-float { width:48px; height:48px; font-size:21px; bottom:16px; right:16px; } }

.modal-content.km-modal { border-radius:var(--radius-lg); border:none; padding:8px; }
.km-modal .modal-header { border:none; padding:24px 24px 0; }
.km-modal .modal-body { padding:8px 24px 24px; }
.modal-title-lg { font-family:var(--font-d); font-size:24px; font-weight:900; color:var(--text-1); margin-bottom:5px; }
.modal-sub { font-size:14px; color:var(--text-3); margin-bottom:26px; }
.btn-close:focus { box-shadow:0 0 0 3px rgba(0,111,184,.15); }

a:focus-visible, button:focus-visible, .finput:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
::selection { background: var(--green-tint2); color: var(--text-1); }

@media (max-width: 575.98px) {
  .section { padding: 60px 0; }
  .sec-title { margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   RESULTS / GLOBAL PRESENCE — moved out of inline <style> blocks
   (originally embedded inside the #results section markup)
═══════════════════════════════════════════════════════════ */
.flag{
    font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
}

.globe-country-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin-top:30px;
}

.gc-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:50px;
    backdrop-filter:blur(10px);
    transition:.35s ease;
}

.gc-chip:hover{
    transform:translateY(-4px);
    border-color:var(--primary);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.flag-svg{
    width:22px;
    height:16px;
    border-radius:3px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.gc-chip span{
    font-size:14px;
    font-weight:500;
    color:#fff; /* Change to #222 if the section has a light background */
}

.more-country{
    background:var(--primary);
    color:#fff;
    font-weight:600;
}

/* ═══════════════════════════════════════════════════════════
   INNER-PAGE BANNER — used by Business Setup / other inner pages
   (breadcrumb + eyebrow + title + standfirst over a dark image)
═══════════════════════════════════════════════════════════ */
.page-banner {
  position:relative;
  padding-top:150px; padding-bottom:64px;
  overflow:hidden; isolation:isolate;
  /*background-image:*/
  /*  linear-gradient(180deg, rgba(6,14,28,.88) 0%, rgba(8,17,32,.90) 50%, rgba(6,13,26,.96) 100%),*/
  /*  var(--pb-img);*/
  background-image: linear-gradient(180deg, rgb(6 14 28) 0%, rgb(8 17 32 / 54%) 35%, rgb(6 13 26) 100%), var(--pb-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.page-banner .glow-a, .page-banner .glow-b { position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(4px); }
.page-banner .glow-a { top:-140px; right:-100px; width:420px; height:420px; background:radial-gradient(circle,rgba(0,189,104,.16) 0%,transparent 70%); animation:pulseBg 9s ease-in-out infinite; }
.page-banner .glow-b { bottom:-160px; left:-120px; width:380px; height:380px; background:radial-gradient(circle,rgba(0,111,184,.18) 0%,transparent 70%); animation:pulseBg 11s 1s ease-in-out infinite; }

.pb-crumb { display:flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:12px; color:var(--on-dark-4); margin-bottom:22px; flex-wrap:wrap; }
.pb-crumb a { color:var(--on-dark-3); transition:.2s; }
.pb-crumb a:hover { color:var(--green-tint2); }
.pb-crumb i { font-size:9px; color:var(--on-dark-5); }
.pb-crumb .current { color:#fff; font-weight:600; }

.pb-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 8px; margin-bottom:20px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  font-family:var(--font-m); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--on-dark-2);
}
.pb-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(0,189,104,.25); animation:blink 2s ease-in-out infinite; flex-shrink:0; }

.pb-title {
  font-family:var(--font-d); font-weight:900;
  font-size:clamp(30px, 4.2vw, 56px); line-height:1.1; letter-spacing:-.03em;
  color:#fff; max-width:820px; margin-bottom:18px;
}
.pb-title em { font-style:normal; color:var(--green-tint2); }

.pb-standfirst { font-size:clamp(15px,1.6vw,17.5px); line-height:1.75; color:var(--on-dark-3); max-width:660px; }

@media (max-width: 575.98px) {
  .page-banner { padding-top:128px; padding-bottom:48px; }
}

/* ═══════════════════════════════════════════════════════════
   CTA BAND — inline call-to-action strip used on inner pages
═══════════════════════════════════════════════════════════ */
.cta-band {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:36px 40px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
  box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 100% at 50% 50%,black,transparent);
}
.cta-band-copy h3 { font-family:var(--font-d); font-size:clamp(19px,2.2vw,25px); font-weight:800; color:#fff; margin-bottom:6px; }
.cta-band-copy p { font-size:14px; line-height:1.6; color:var(--on-dark-3); margin-bottom:0; max-width:480px; }
.cta-band .btn-primary { flex-shrink:0; }
@media (max-width: 575.98px) {
  .cta-band { padding:28px 24px; flex-direction:column; align-items:flex-start; }
  .cta-band .btn-primary { width:100%; }
}