/* VRG — minimal, clean design system */

/* Self-hosted Inter (latin subset, weights 400-800) — was loaded from
   fonts.googleapis.com/fonts.gstatic.com. That cross-origin CSS is generated
   per-browser, so it can never carry a static SRI hash; self-hosting removes
   the dependency (and the SRI gap) entirely instead of trying to work around it. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --crimson: #8a0b2b;
  --crimson-hover: #6d0822;
  --crimson-tint: #fbeef1;
  --emerald: #0f9d63;
  --emerald-tint: #eafbf3;
  --emerald-text: #0b7a4e; /* darker than --emerald: passes 4.5:1 as small text on white/tint, --emerald itself only reaches ~3.5:1 */

  --ink: #0F172A;
  --t700: #334155;
  --t500: #454d5c; /* darkened again for ACC-08 (WCAG 1.4.6 enhanced 7:1): #5b6472 only reached ~5.4-5.7:1. This clears 7:1 against every section background on the site (white cards, --bg, --bg-subtle/tint/tint-2), with margin to spare. */
  --t400: #9ca3af;

  --bg: #F8FAFC;
  --bg-subtle: #F1F5F9;
  --bg-tint: #f8f0ef;
  --bg-tint-2: #eef7f2;
  --border: #E2E8F0;
  --border-strong: #82868f; /* 3:1+ against white/--bg, for controls (ghost buttons, form fields) whose border is the only visible boundary — --border alone is ~1.1:1, fine for decorative dividers but fails WCAG 1.4.11 on those */
  --dark: #14100f;
  --dark-card: #1e1917;

  --shadow-sm: 0 1px 2px rgba(16, 16, 20, .04);
  --shadow-md: 0 8px 24px rgba(16, 16, 20, .06);
  --shadow-lg: 0 20px 48px rgba(16, 16, 20, .10);

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --maxw: 1360px;

  /* secondary accents (icon tiles, diagrams) */
  --blue: #0284C7;
  --blue-text: #0369A1;
  --blue-tint: #E0F2FE;
  --orange: #EA580C;
  --orange-tint: #FFF1E7;

  /* shapes: buttons, cards (content boxes) and panels (large framed areas) */
  --r-btn: 10px;
  --r-card: 20px;
  --r-panel: 28px;
  --shadow-card: 0 12px 32px rgba(15, 23, 42, .04);
  --shadow-card-hover: 0 20px 48px rgba(15, 23, 42, .10);
  --lift: -4px;

  /* type scale: every font-size uses one of these (display numerals excepted) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; } /* jump links land below the sticky header */
html.nav-locked { overflow: hidden; } /* mobile menu open: page behind stays put */

body {
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--t500);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56rem 40rem at 6% -8%, rgba(138, 11, 43, .13), transparent 58%),
    radial-gradient(48rem 38rem at 98% 2%, rgba(15, 157, 99, .11), transparent 58%),
    radial-gradient(60rem 44rem at 50% 92%, rgba(138, 11, 43, .07), transparent 60%);
}

h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
p { line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
svg { display: block; }
ul { list-style: none; }

.wrap {
  width: min(var(--maxw), 100%);
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
  margin: 0 auto;
}


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r-btn);
  font-weight: 600; font-size: var(--fs-15); cursor: pointer; border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--crimson); color: #fff; box-shadow: 0 1px 2px rgba(138, 11, 43, .1); }
.btn-primary:hover { background: var(--crimson-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(138, 11, 43, .28); }
.btn-ghost { background: transparent; color: var(--t700); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--t400); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost span { display: inline-block; transition: transform .18s var(--ease); }
.btn-ghost:hover span { transform: translateX(3px); }
.btn-sm { height: 42px; padding: 0 16px; font-size: var(--fs-14); }
.btn-sm:hover { transform: none; }

/* ---------- Screen-reader-only utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Skip link (keyboard/screen-reader bypass of header+nav) ---------- */
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 1000;
  background: var(--crimson); color: #fff; padding: 12px 20px; border-radius: var(--r-sm);
  font-size: var(--fs-14); font-weight: 600; text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Header: clean bar (option 1 of the 2026-10-20 redesign) ---------- */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(20, 16, 15, .06);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
header.scrolled { background: rgba(255, 255, 255, .96); border-bottom-color: var(--border); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .18); }
.header-inner { display: flex; align-items: center; gap: 20px; height: 80px; }
.header-inner nav { margin-left: auto; }
.brand img { height: 48px; width: auto; transition: transform .2s var(--ease); }
.brand:hover img { transform: scale(1.03); }
/* Company name beside the header logo: two-line lockup after a thin divider */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-name {
  display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid rgba(15, 23, 42, .14);
  font-size: var(--fs-15); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--heading-color); white-space: nowrap;
}
.brand-name > span:last-child { color: var(--crimson); }
.brand-suffix { font-size: var(--fs-13); font-weight: 600; color: var(--t500); letter-spacing: 0; }

/* plain links; a crimson underline slides in on hover and marks the current page */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  font-size: var(--fs-15); font-weight: 500; color: var(--t700);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--crimson); font-weight: 700; }
.nav-contact-item { display: none; } /* desktop shows the Contact button instead; the mobile dropdown shows this */
/* Contact button (desktop) + hamburger (<=1100px) */
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-contact-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--r-btn);
  background: var(--crimson); color: #FFFFFF; font-size: var(--fs-15); font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(138, 11, 43, 0.25);
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-contact-btn span { display: inline-block; transition: transform .2s var(--ease); }
.nav-contact-btn:hover { transform: translateY(-2px); background: var(--crimson-hover); box-shadow: 0 12px 26px rgba(138, 11, 43, 0.3); }
.nav-contact-btn:hover span { transform: translateX(3px); }
.nav-contact-btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.hamburger span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: var(--ink); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Section shell ---------- */
.section { padding: 48px 0; }
.section-head { max-width: 720px; margin: 0 auto 28px; text-align: center; } /* wide enough for 42px headings to sit on 2 lines */
.section-head h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 12px; }
.section-head p:not(.section-eyebrow) { font-size: var(--fs-16); color: var(--t500); max-width: 560px; margin-inline: auto; } /* body copy keeps a comfortable line length */

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-13); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 14px;
}
.section-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
.section-more { text-align: center; margin-top: 24px; }

/* ---------- Modern feature card (reused across sub-pages) ---------- */
.feature-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--crimson); }
.feature-card h3 { font-size: var(--fs-17); margin-bottom: 8px; }
.feature-card p { font-size: var(--fs-15); color: var(--t500); }

/* ---------- Detail row (alternating text/visual, used on Product page) ---------- */
.detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 64px 0; }
.detail-row + .detail-row { border-top: 1px solid var(--border); }
.detail-row.is-reverse .detail-visual { order: -1; }
.detail-row h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }
.detail-row > div > p:not(.section-eyebrow) { font-size: var(--fs-16); color: var(--t500); margin-bottom: 22px; }
.detail-features { display: grid; gap: 12px; margin-bottom: 26px; }
.detail-features li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-15); color: var(--t700); }
.detail-features li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--emerald); margin-top: 2px; }

/* ---------- Who We Are + Mission & Vision grid (About page) ----------
   Left: Who We Are as a tall tinted card spanning both rows; right: the Mission
   and Vision pillar cards stacked. Single column below 900px. */
.about-intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px; }
.who-card {
  grid-row: 1 / 3; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; padding: 44px 40px; border-radius: var(--r-xl);
  border: 1px solid #EEE3E7; box-shadow: var(--shadow-md);
  background:
    radial-gradient(60% 45% at 0% 0%, rgba(138, 11, 43, 0.09), transparent 70%),
    radial-gradient(60% 45% at 100% 100%, rgba(15, 157, 99, 0.10), transparent 70%),
    linear-gradient(140deg, #FCF3F5 0%, #FFFFFF 50%, #F2FAF6 100%);
}
.who-card h2 { margin-bottom: 18px; }
.who-card-text { font-size: var(--fs-17); line-height: 1.7; color: var(--t500); }
.who-card-stats { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: auto; padding-top: 32px; }
.who-card-stats > div { display: flex; align-items: baseline; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(15, 23, 42, 0.1); }
.who-stat-num { font-size: clamp(36px, 3vw + 10px, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--crimson); }
.who-stat-lbl { font-size: var(--fs-13); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t500); }
.about-intro-grid .pillar-card { margin: 0; }
@media (max-width: 900px) {
  .about-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .who-card { grid-row: auto; }
}
@media (max-width: 720px) {
  .who-card { padding: 30px 22px; }
}

/* enhancements: Who We Are card art (faint switch rings + VRG disc in the empty
   middle, dot grid top-right) and Mission/Vision accents (top bar, icon fill on hover) */
.who-card > * { position: relative; z-index: 1; }
.who-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(138, 11, 43, 0.13) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(45% 35% at 100% 0%, #000 0%, transparent 80%);
  mask-image: radial-gradient(45% 35% at 100% 0%, #000 0%, transparent 80%);
}
.about-intro-grid .pillar-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--crimson), rgba(138, 11, 43, 0.15));
  transform: scaleX(.35); transform-origin: left; transition: transform .45s var(--ease);
}
.about-intro-grid .pillar-card.is-vision::after { background: linear-gradient(90deg, var(--emerald), rgba(15, 157, 99, 0.15)); }
.about-intro-grid .pillar-card:hover::after { transform: scaleX(1); }
.about-intro-grid .pillar-icon { transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.about-intro-grid .pillar-card.is-mission:hover .pillar-icon { background: var(--crimson); color: #FFFFFF; transform: rotate(-6deg); }
.about-intro-grid .pillar-card.is-vision:hover .pillar-icon { background: var(--emerald); color: #FFFFFF; transform: rotate(-6deg); }


/* ---------- Mission / Vision pillar cards (About page) ---------- */
.pillar-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 40px 36px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pillar-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.pillar-card.is-mission::before { background: radial-gradient(28rem 18rem at 100% 0%, rgba(138, 11, 43, .06), transparent 60%); }
.pillar-card.is-vision::before { background: radial-gradient(28rem 18rem at 100% 0%, rgba(15, 157, 99, .07), transparent 60%); }
.pillar-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; }
.pillar-card.is-mission .pillar-icon { background: var(--crimson-tint); color: var(--crimson); }
.pillar-card.is-vision .pillar-icon { background: var(--emerald-tint); color: var(--emerald); }
.pillar-icon svg { width: 22px; height: 22px; }
.pillar-label { display: block; font-size: var(--fs-12); font-weight: 700; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 16px; }
.pillar-card.is-mission .pillar-label { color: var(--crimson); }
.pillar-card.is-vision .pillar-label { color: var(--emerald-text); }
.pillar-quote { font-size: clamp(19px, 2vw, 23px); font-weight: 700; color: var(--ink); line-height: 1.42; letter-spacing: -.01em; margin-bottom: 16px; }
.pillar-body { font-size: var(--fs-15); color: var(--t500); line-height: 1.65; }
.pillar-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 6px 14px; border-radius: 999px;
  font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.pillar-card.is-mission .pillar-tag { background: var(--crimson-tint); color: var(--crimson); }
.pillar-card.is-vision .pillar-tag { background: var(--emerald-tint); color: var(--emerald-text); }

/* ---------- Credentials + What Makes Us Different (merged, About page) ----------
   Two panels side by side, each a titled group of two items (icon, pill, title, text). */
.creds-section .section-head { max-width: 900px; } /* keeps the h2 on one line on desktop */
.creds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.creds-group {
  position: relative; padding: 30px 30px 10px; border-radius: var(--r-xl); background: #FFFFFF;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.creds-group::before {
  content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--crimson), rgba(138, 11, 43, 0.12));
}
.creds-group + .creds-group::before { background: linear-gradient(90deg, var(--emerald), rgba(15, 157, 99, 0.12)); }
.creds-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
.creds-item + .creds-item { border-top: 1px solid var(--border); }
.creds-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; transition: transform .25s var(--ease); }
.creds-icon svg { width: 22px; height: 22px; }
.creds-item:hover .creds-icon { transform: rotate(-6deg) scale(1.06); }
.creds-text .scheme-pill { display: inline-block; margin-bottom: 8px; }
.creds-text :is(h3, h4) { font-size: var(--fs-18); font-weight: 700; color: var(--heading-color); margin-bottom: 6px; }
.creds-text p { font-size: var(--fs-15); line-height: 1.6; color: var(--t500); }
@media (max-width: 900px) {
  .creds-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .creds-group { padding: 24px 20px 6px; }
  .creds-group::before { left: 20px; right: 20px; }
  .creds-item { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .creds-icon { width: 40px; height: 40px; }
  .creds-icon svg { width: 19px; height: 19px; }
}

/* "What makes us different" inside the Who We Are card: a clean list, no inner box —
   a label with a hairline running off to the right, then two icon rows split by a hairline */
.who-diff { margin-top: 30px; }
.who-diff-title { display: flex; align-items: center; gap: 14px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-text); }
.who-diff-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(15, 23, 42, 0.14), transparent); }
.who-diff .creds-item { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
.who-diff .creds-item + .creds-item { border-top: 1px solid rgba(15, 23, 42, 0.08); }
/* icons match the Mission/Vision .pillar-icon: 46px tile, 13px radius, brand tints,
   filled solid + tilted on hover */
.who-diff .creds-icon { width: 46px; height: 46px; border-radius: 13px; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.who-diff .creds-icon svg { width: 22px; height: 22px; }
.who-diff .creds-icon.is-crimson { background: var(--crimson-tint); color: var(--crimson); }
.who-diff .creds-icon.is-emerald { background: var(--emerald-tint); color: var(--emerald); }
.who-diff .creds-item:hover .creds-icon { transform: rotate(-6deg); }
.who-diff .creds-item:hover .creds-icon.is-crimson { background: var(--crimson); color: #FFFFFF; }
.who-diff .creds-item:hover .creds-icon.is-emerald { background: var(--emerald); color: #FFFFFF; }
.who-diff .creds-text h4 { font-size: var(--h3-size); margin-bottom: 4px; }
.who-diff .creds-text p { font-size: var(--fs-15); line-height: 1.6; }
/* licences-only credentials: one panel, the two licences side by side */
.creds-group.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 30px 32px; }
.creds-group.is-wide .creds-item { padding: 0; }
.creds-group.is-wide .creds-item + .creds-item { border-top: 0; padding-left: 40px; border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .creds-group.is-wide { grid-template-columns: minmax(0, 1fr); }
  .creds-group.is-wide .creds-item + .creds-item { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .creds-group.is-wide { padding: 24px 20px; }
}
/* ---------- Core-capability numbered rows (Privacy page) ---------- */
.capability-list { border-top: 1px solid var(--border); }
.capability-row {
  display: grid; grid-template-columns: 48px 52px 1fr; align-items: center; gap: 24px;
  padding: 28px 4px; border-bottom: 1px solid var(--border);
  transition: background-color .2s var(--ease);
}
.capability-row:hover { background: rgba(138, 11, 43, .025); }
.capability-num { font-size: 30px; font-weight: 800; color: #6B7280; letter-spacing: -.02em; transition: color .2s var(--ease); }
.capability-row:hover .capability-num { color: var(--crimson); }
.capability-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.capability-icon svg { width: 21px; height: 21px; }
.capability-text h3 { font-size: var(--fs-17); margin-bottom: 4px; }
.capability-text p { font-size: var(--fs-14); color: var(--t500); line-height: 1.55; }
@media (max-width: 720px) {
  /* number stacks above the icon in one narrow column so the text keeps most of the width */
  .capability-row { grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 6px; align-items: start; padding: 20px 2px; }
  .capability-num { grid-column: 1; grid-row: 1; font-size: var(--fs-18); text-align: center; line-height: 1.2; }
  .capability-icon { grid-column: 1; grid-row: 2; }
  .capability-text { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .capability-icon { width: 40px; height: 40px; }
  .capability-icon svg { width: 18px; height: 18px; }
}

/* ---------- Hero trust-credential badges (About page header) ---------- */
.hero-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.hero-trust-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--fs-13); font-weight: 600; color: var(--t700); box-shadow: var(--shadow-sm);
}
.hero-trust-badge svg { width: 14px; height: 14px; color: var(--emerald); flex-shrink: 0; }

/* ==================================================
   HERO — control-center composition, 60/40, premium enterprise fintech
   ================================================== */

/* Header Live Indicator Pill */
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  font-size: var(--fs-13); font-weight: 500; color: var(--t500);
}
.live-pill .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.25);
  animation: livePulse 2s ease-in-out infinite;
}
.live-pill strong { color: var(--ink); font-weight: 700; }
.live-pill .tx-unit { color: var(--t500); font-size: var(--fs-12); }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }


/* ---------- Hero Shell & Background ---------- */
.hero {
  position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0 16px;
  background: radial-gradient(100% 100% at 50% 0%, #FFFFFF 0%, var(--bg) 50%, var(--bg-subtle) 100%);
  color: var(--ink);
}
.hero .wrap { width: min(1360px, 100%); }

/* High-tech ambient background layers */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Concentric Guilloche Wave Lines */
.hero-guilloche {
  position: absolute; top: -5%; width: 700px; height: 110%; pointer-events: none; opacity: 0.85;
}
.hero-guilloche-left { left: -12%; }
.hero-guilloche-right { right: -12%; }

/* Ambient blur glows */
.hero-glow-L, .hero-glow-R { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-L { top: -5%; left: -8%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(138, 11, 43, 0.12), transparent 70%); }
.hero-glow-R { bottom: -10%; right: -6%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(15, 157, 99, 0.12), transparent 70%); }

/* ---------- Sub-Page Hero Header (.page-header) ---------- */
.page-header {
  position: relative; isolation: isolate;
  padding: 44px 0 32px; text-align: center;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 11, 43, 0.14), transparent 70%),
    radial-gradient(45% 65% at 100% 100%, rgba(15, 157, 99, 0.18), transparent 70%),
    linear-gradient(120deg, #FBEDF1 0%, #FDF6F8 38%, #F1FAF6 70%, #E6F6EF 100%);
  border-bottom: 1px solid #E8DDE1;
  overflow: hidden;
}
.page-header h1 {
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; color: var(--ink);
  letter-spacing: -.025em; line-height: 1.25; max-width: 820px; margin: 12px auto 12px;
}
.page-header h1 .hl-crimson {
  color: var(--crimson); display: inline-block; font-weight: 800;
}
.page-header p:not(.section-eyebrow) {
  font-size: var(--fs-17); color: var(--t500); line-height: 1.55; max-width: 640px; margin: 0 auto;
}

/* ---------- Platform Hero Showcase ----------
   Dark crimson→navy hero (same palette as the Home integration ribbon). The three
   schemes are glass cards that link down to their sections, strung on one dashed
   "spine" with a packet travelling along it: three schemes, one switch. */
.platform-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 72px 0 80px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--crimson) 0%, #58061B 48%, var(--ink) 100%);
}
.platform-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.phero-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(80px); }
.phero-glow-L { top: -30%; left: -12%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%); }
.phero-glow-R { bottom: -35%; right: -10%; background: radial-gradient(circle, rgba(15, 157, 99, 0.32), transparent 65%); }
.phero-rings {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 30px, rgba(255, 255, 255, 0.06) 31px 32px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
}
.phero-rings-L { top: 50%; left: -320px; margin-top: -320px; }
.phero-rings-R { top: -220px; right: -260px; }
.phero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(45% 60% at 72% 50%, #000, transparent 75%);
  mask-image: radial-gradient(45% 60% at 72% 50%, #000, transparent 75%);
}

.platform-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
.platform-hero-content { text-align: left; }
.platform-hero .section-eyebrow { color: rgba(255, 255, 255, 0.9); }
.platform-hero .section-eyebrow .dot { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); }
.platform-hero-content h1 { margin: 12px 0 18px; }
.platform-hero-content h1 .hl-crimson { color: #FF9DB5; font-weight: 800; }
.platform-hero-content p:not(.section-eyebrow) {
  font-size: var(--fs-17); color: rgba(255, 255, 255, 0.8); line-height: 1.65; max-width: 560px; margin-bottom: 30px;
}
.platform-hero-actions { display: flex; align-items: center; gap: 14px; }
.platform-hero-actions .btn span { display: inline-block; transition: transform .18s var(--ease); }
.platform-hero-actions .btn:hover span { transform: translateX(4px); }

/* scheme cards */
.platform-hero-cards { position: relative; display: flex; flex-direction: column; gap: 14px; }
.phero-spine {
  position: absolute; top: 34px; bottom: 34px; left: 45px; width: 0; z-index: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.22);
}
.phero-spine-packet {
  position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35), 0 0 14px 4px rgba(52, 211, 153, 0.55);
  animation: pheroPacket 4.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pheroPacket {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}
.phero-card {
  --accent: #FF9DB5; --accent-rgb: 255, 157, 181;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 18px 20px 18px 16px; border-radius: 18px; color: #FFFFFF;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  animation: pheroRise .7s var(--ease) backwards;
}
.phero-card.is-teal { --accent: #6EE7B7; --accent-rgb: 110, 231, 183; animation-delay: .12s; }
.phero-card.is-blue { --accent: #7DD3FC; --accent-rgb: 125, 211, 252; animation-delay: .24s; }
.phero-card.is-pink { animation-delay: 0s; }
.phero-card:hover { transform: translateX(6px); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }
.phero-card:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@keyframes pheroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* numeral tile sits on the spine: opaque base (hides the dashed line behind it)
   tinted and ringed in the scheme's accent, white figures with a soft accent glow */
.phero-num {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 15%, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.14) 65%), #24101A;
  border: 1px solid rgba(var(--accent-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 4px rgba(var(--accent-rgb), 0.08), 0 10px 22px rgba(var(--accent-rgb), 0.16);
  font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: #FFFFFF; text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.65);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.phero-card:hover .phero-num {
  transform: translateY(-2px) scale(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(var(--accent-rgb), 0.14), 0 14px 28px rgba(var(--accent-rgb), 0.32);
}
.phero-kicker { font-size: var(--fs-12); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1px; }
.phero-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phero-title { font-size: var(--fs-17); font-weight: 700; color: #FFFFFF; }
.phero-meta { font-size: var(--fs-13); font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.phero-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--accent); font-size: var(--fs-15);
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.phero-card:hover .phero-arrow { transform: translateX(3px); background: var(--accent); color: #1A0A12; }

/* ---------- Partners hero: light + logo orbit ----------
   Two rings of partner logos rotate in opposite directions around the VRG hub;
   each chip counter-rotates so logos stay upright. Sizes use cqw of .po-orbit. */
.po-hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 64px;
  /* soft brand tint: blush crimson on the text side fading to mint behind the orbit */
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 11, 43, 0.14), transparent 70%),
    radial-gradient(45% 65% at 100% 100%, rgba(15, 157, 99, 0.18), transparent 70%),
    radial-gradient(35% 55% at 75% 45%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(120deg, #FBEDF1 0%, #FDF6F8 38%, #F1FAF6 70%, #E6F6EF 100%);
  border-bottom: 1px solid #E8DDE1;
}
/* faint dot grid behind the orbit for depth */
.po-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(138, 11, 43, 0.14) 1.1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(38% 60% at 74% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(38% 60% at 74% 50%, #000 0%, transparent 75%);
}
.po-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.po-content .partners-hero-title { margin: 12px 0 18px !important; }
.po-content .hl-crimson { color: var(--crimson); }
.po-lead { font-size: var(--fs-17); color: var(--t500); line-height: 1.65; max-width: 540px; margin-bottom: 28px; }
.po-content .btn span { display: inline-block; transition: transform .18s var(--ease); }
.po-content .btn:hover span { transform: translateX(4px); }

.po-orbit { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.po-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(138, 11, 43, 0.2); animation: poSpin 90s linear infinite; }
.po-ring-outer { inset: 11%; --r: 39cqw; }   /* radius + half a chip stays inside the box */
.po-ring-inner { inset: 31%; --r: 19cqw; border-color: rgba(15, 157, 99, 0.28); animation-direction: reverse; }
.po-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.po-spin { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: poSpin 90s linear infinite reverse; }
.po-ring-inner .po-spin { animation-direction: normal; }
.po-chip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 21cqw; height: 12cqw; padding: 1.8cqw 2.2cqw; border-radius: 14px;
  background: #FFFFFF; border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.po-ring-inner .po-chip { width: 16cqw; height: 9.5cqw; padding: 1.5cqw 1.8cqw; }
.po-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.po-ring-outer .po-item:nth-child(1) { --a: 0deg; }
.po-ring-outer .po-item:nth-child(2) { --a: 45deg; }
.po-ring-outer .po-item:nth-child(3) { --a: 90deg; }
.po-ring-outer .po-item:nth-child(4) { --a: 135deg; }
.po-ring-outer .po-item:nth-child(5) { --a: 180deg; }
.po-ring-outer .po-item:nth-child(6) { --a: 225deg; }
.po-ring-outer .po-item:nth-child(7) { --a: 270deg; }
.po-ring-outer .po-item:nth-child(8) { --a: 315deg; }
.po-ring-inner .po-item:nth-child(1) { --a: 36deg; }
.po-ring-inner .po-item:nth-child(2) { --a: 108deg; }
.po-ring-inner .po-item:nth-child(3) { --a: 180deg; }
.po-ring-inner .po-item:nth-child(4) { --a: 252deg; }
.po-ring-inner .po-item:nth-child(5) { --a: 324deg; }
.po-hub {
  position: absolute; left: 50%; top: 50%; width: 22cqw; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 0 10px rgba(138, 11, 43, 0.06), 0 0 0 22px rgba(15, 157, 99, 0.05), 0 18px 40px rgba(138, 11, 43, 0.18);
}
.po-hub img { width: 72%; height: auto; }
.po-orbit:hover .po-ring, .po-orbit:hover .po-spin { animation-play-state: paused; }
@keyframes poSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .po-hero { padding: 44px 0 52px; }
  .po-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
  .po-content .section-eyebrow { justify-content: center; }
  .po-lead { margin-left: auto; margin-right: auto; }
  .po-orbit { width: min(100%, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .po-ring, .po-spin { animation: none; }
}


/* ---------- About hero (company.html): reuses .platform-hero ----------
   Headline + paragraph on the left; the SBP and PTA licences as large white logo
   chips stacked on the right (stack under the text below 900px). */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.about-hero-text { max-width: 760px; text-align: left; }
.about-hero-text h1 { font-size: var(--h1-size); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #FFFFFF; text-wrap: balance; margin-bottom: 18px; }
.about-hero-text h1 .hl-crimson { color: #FF9DB5; }
.about-hero-text p { font-size: var(--fs-17); line-height: 1.65; color: rgba(255, 255, 255, 0.8); max-width: 620px; }
.licence-chips { list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.licence-chip {
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25); text-align: left;
  animation: pheroRise .7s var(--ease) .15s backwards;
}
.licence-chip + .licence-chip { animation-delay: .27s; }
.licence-chip img { width: 52px; height: 52px; object-fit: contain; }
.licence-chip span { display: flex; flex-direction: column; font-size: var(--fs-13); font-weight: 600; color: var(--t500); }
.licence-chip b { font-size: var(--fs-15); color: var(--heading-color); }
.licence-chips.is-stacked { flex-direction: column; align-items: stretch; gap: 18px; max-width: 400px; margin: 0 0 0 auto; }
.licence-chips.is-stacked .licence-chip { padding: 16px 28px 16px 16px; gap: 20px; }
.licence-chips.is-stacked .licence-chip img { width: 72px; height: 72px; }
.licence-chips.is-stacked .licence-chip span { font-size: var(--fs-14); }
.licence-chips.is-stacked .licence-chip b { font-size: var(--fs-20); }
@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .licence-chips.is-stacked { margin: 0; max-width: 360px; }
}
@media (max-width: 720px) {
  .licence-chip { width: 100%; max-width: 300px; }
  .licence-chips.is-stacked .licence-chip img { width: 56px; height: 56px; }
  .licence-chips.is-stacked .licence-chip b { font-size: var(--fs-17); }
}
@media (prefers-reduced-motion: reduce) {
  .licence-chip { animation: none; }
}



/* ---------- Contact page ---------- */
.contact-hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 44px 0 48px; border-bottom: 1px solid #E8DDE1;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 11, 43, 0.14), transparent 70%),
    radial-gradient(45% 65% at 100% 100%, rgba(15, 157, 99, 0.18), transparent 70%),
    linear-gradient(120deg, #FBEDF1 0%, #FDF6F8 38%, #F1FAF6 70%, #E6F6EF 100%);
}
.contact-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(138, 11, 43, 0.14) 1.1px, transparent 1.5px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(40% 70% at 85% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(40% 70% at 85% 50%, #000 0%, transparent 75%);
}
.contact-hero-text { max-width: 760px; }
.contact-hero-text h1 { margin-bottom: 18px; }
.contact-hero-text h1 .hl-crimson { color: var(--crimson); }
.contact-hero-text p { font-size: var(--fs-17); line-height: 1.65; color: var(--t500); max-width: 640px; }
.contact-reply { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 16px 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid #EEE3E7; font-size: var(--fs-14) !important; font-weight: 600; color: var(--t700) !important; }

/* hero right side: contact & location icon tiles (staggered, gentle float) */
.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.contact-hero-art { display: flex; justify-content: center; }
.ci-stage { position: relative; width: 100%; max-width: 400px; aspect-ratio: 11 / 8; }
.ci-ring {
  position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 38%, transparent 39%),
              repeating-radial-gradient(circle, transparent 0 28px, rgba(138, 11, 43, 0.07) 29px 30px);
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 72%); mask-image: radial-gradient(circle, #000 50%, transparent 72%);
}
.ci-tile {
  --cc: 138, 11, 43;
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px;
  background: #FFFFFF; border: 1px solid rgba(var(--cc), 0.18);
  box-shadow: 0 18px 40px rgba(var(--cc), 0.14), 0 2px 6px rgba(15, 23, 42, 0.04);
  animation: ciFloat 6s ease-in-out infinite;
}
.ci-tile.is-call { --cc: 15, 157, 99; left: 4%; top: 6%; }
.ci-tile.is-email { --cc: 2, 132, 199; right: 2%; top: 38%; animation-delay: -2s; }
.ci-tile.is-visit { left: 12%; bottom: 4%; animation-delay: -4s; }
.ci-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(var(--cc), 0.10); color: rgb(var(--cc)); }
.ci-icon svg { width: 22px; height: 22px; }
.ci-label { display: flex; flex-direction: column; font-size: var(--fs-16); font-weight: 700; color: var(--heading-color); }
.ci-label small { font-size: var(--fs-12); font-weight: 600; color: var(--t500); }
@keyframes ciFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
  .contact-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ci-stage { max-width: 340px; }
}
@media (max-width: 720px) {
  .ci-tile { padding: 8px 14px 8px 8px; gap: 10px; border-radius: 16px; }
  .ci-icon { width: 40px; height: 40px; border-radius: 12px; }
  .ci-icon svg { width: 20px; height: 20px; }
  .ci-label { font-size: var(--fs-15); }
}
@media (prefers-reduced-motion: reduce) {
  .ci-tile { animation: none; }
}
/* enhancements: centre chat disc, dashed links with travelling dots, tile glow,
   staggered entrance, icon fill + tilt on hover */
.ci-links { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; z-index: 0; overflow: visible; }
.ci-link { stroke-width: 1.6; stroke-dasharray: 4 6; opacity: .45; animation: ciDash 1.1s linear infinite; }
@keyframes ciDash { to { stroke-dashoffset: -10; } }
.ci-core {
  position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #FFFFFF; color: var(--crimson);
  box-shadow: 0 0 0 10px rgba(138, 11, 43, 0.05), 0 0 0 22px rgba(15, 157, 99, 0.04), 0 16px 34px rgba(138, 11, 43, 0.16);
}
.ci-core svg { width: 28px; height: 28px; }
.ci-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(138, 11, 43, 0.35); animation: ciPulse 2.8s ease-out infinite; }
@keyframes ciPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.ci-tile { z-index: 2; transition: box-shadow .25s var(--ease); }
.ci-tile { box-shadow: 0 22px 44px -6px rgba(var(--cc), 0.26), 0 2px 6px rgba(15, 23, 42, 0.04); }
.ci-icon { transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.ci-tile { opacity: 0; animation: ciIn .7s var(--ease) forwards, ciFloat 6s ease-in-out infinite; }
.ci-tile.is-call { animation-delay: .1s, 0s; }
.ci-tile.is-email { animation-delay: .25s, -2s; }
.ci-tile.is-visit { animation-delay: .4s, -4s; }
@keyframes ciIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 720px) {
  .ci-core { width: 56px; height: 56px; }
  .ci-core svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ci-link, .ci-core::after { animation: none; }
  .ci-tile { opacity: 1; animation: none; }
}
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contact-card {
  --cc: 138, 11, 43;
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px 30px 28px; border-radius: var(--r-xl);
  background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.contact-card.is-emerald { --cc: 15, 157, 99; }
.contact-card.is-blue { --cc: 2, 132, 199; }
.contact-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgb(var(--cc)), rgba(var(--cc), 0.15));
  transform: scaleX(.35); transform-origin: left; transition: transform .45s var(--ease);
}
.contact-card:hover { transform: translateY(-5px); border-color: rgba(var(--cc), 0.35); box-shadow: 0 18px 40px rgba(var(--cc), 0.12); }
.contact-card:hover::after { transform: scaleX(1); }
.contact-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 22px;
  background: rgba(var(--cc), 0.1); color: rgb(var(--cc));
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-card:hover .contact-icon { background: rgb(var(--cc)); color: #FFFFFF; transform: rotate(-6deg); }
.contact-card h2 { font-size: var(--fs-20); font-weight: 700; color: var(--heading-color); margin-bottom: 10px; }
.contact-card p { font-size: var(--fs-15); line-height: 1.65; color: var(--t500); margin-bottom: 22px; flex-grow: 1; }
.contact-card p strong { font-size: var(--fs-17); color: var(--heading-color); }
.contact-action {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-top: 16px; width: 100%;
  border-top: 1px solid var(--border); font-size: var(--fs-15); font-weight: 700; color: rgb(var(--cc));
}
.contact-action span[aria-hidden] { display: inline-block; transition: transform .18s var(--ease); }
.contact-action:hover span[aria-hidden] { transform: translateX(4px); }
.contact-card.is-emerald .contact-action { color: var(--emerald-text); }
.contact-card.is-blue .contact-action, .office-card.is-blue .contact-action { color: var(--blue-text); } /* var(--blue) was 4.1:1 on white */
@media (max-width: 900px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
/* Call + Email side by side; offices in their own row of three */
.contact-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section.contact-cards-section { padding-bottom: 24px; }
.section.offices-section { padding-top: 24px; }
.offices-title { font-size: var(--fs-13); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson);
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.offices-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(15, 23, 42, 0.14), transparent); }
.office-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.office-card {
  --cc: 138, 11, 43;
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 26px 28px 24px; border-radius: var(--r-xl);
  background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.office-card.is-emerald { --cc: 15, 157, 99; }
.office-card.is-blue { --cc: 2, 132, 199; }
.office-card:hover { transform: translateY(-5px); border-color: rgba(var(--cc), 0.35); box-shadow: 0 18px 40px rgba(var(--cc), 0.12); }
.office-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.office-top .contact-icon { margin-bottom: 0; flex-shrink: 0; }
.office-card:hover .contact-icon { background: rgb(var(--cc)); color: #FFFFFF; transform: rotate(-6deg); }
.office-top h3 { font-size: var(--fs-20); font-weight: 700; color: var(--heading-color); }
.office-card p { font-size: var(--fs-15); line-height: 1.65; color: var(--t500); margin-bottom: 20px; flex-grow: 1; }
.office-card.is-emerald .contact-action { color: var(--emerald-text); }
/* tablets: Call + Email stay side by side, offices stack at full width; phones: all stack */
@media (max-width: 900px) {
  .contact-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 16px; }
  .office-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .contact-cards.is-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .office-card { padding: 22px 22px 20px; }
}
@media (max-width: 720px) {
  .contact-hero { padding: 36px 0 40px; }
  .contact-card { padding: 26px 22px 22px; }
}



@media (max-width: 900px) {
  .platform-hero { padding: 56px 0 60px; }
  .platform-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .platform-hero-content { text-align: center; }
  .platform-hero-content p:not(.section-eyebrow) { margin-left: auto; margin-right: auto; }
  .platform-hero-actions { justify-content: center; }
  .platform-hero-cards { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .platform-hero { padding: 44px 0 48px; }
  .phero-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 14px 14px 14px 12px; }
  .phero-num { width: 52px; height: 52px; font-size: 22px; border-radius: 15px; }
  .phero-spine { left: 37px; }
  .phero-title { font-size: var(--fs-15); }
  .phero-meta { font-size: var(--fs-13); }
  .phero-arrow { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .phero-spine-packet { display: none; }
}

.hero-diagram:hover .switch-logo-bg {
  transform: scale(1.04);
}

/* ---------- Clean Partner Logo Grid Cards ---------- */
.partner-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.partner-logo-grid .logo-card {
  flex: 0 1 180px;
}
@media (max-width: 440px) {
  .partner-logo-grid { gap: 12px; }
  .partner-logo-grid .logo-card { flex-basis: calc(50% - 6px); }
}
.logo-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  text-align: center;
  min-height: 110px;
}
.logo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(138, 11, 43, 0.3);
  box-shadow: 0 10px 24px rgba(138, 11, 43, 0.08);
}

.logo-card h3 {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

/* ---------- Hero Slider ---------- */
.hero-slider { position: relative; width: 100%; }
.hero-track { position: relative; width: 100%; min-height: 520px; }

.hero-slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.hero-slide.is-active {
  position: relative; top: auto; left: auto;
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hero-slide-grid {
  display: grid;
  /* fr, not %: 42% + 58% + gap overflowed the wrap and pushed the diagram past the stat panel */
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 24px;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}

.hero-content { text-align: left; position: relative; z-index: 3; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-12); font-weight: 500; color: var(--t500);
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.2); animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Text-Only Hero Slider ---------- */
.hero-text-slider { position: relative; width: 100%; min-height: 240px; overflow: hidden; }

.hero-text-slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s;
}
.hero-text-slide.is-active {
  position: relative; top: auto; left: auto;
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}

.hero-heading {
  font-size: clamp(32px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  text-align: left; color: #0B132A;
}
.hero-heading .hl {
  color: var(--crimson); background: none; -webkit-background-clip: unset;
}

.hero-sub {
  max-width: 460px; margin: 16px 0 0; font-size: var(--fs-16); line-height: 1.6; color: var(--t500);
}

/* Text Slide Control Dots */
.hero-text-dots {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
}
.text-dot {
  width: 24px; height: 5px; border-radius: 3px;
  background: #CBD5E1; border: none; cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
/* invisible padding grows the 5px-tall bar to a ~25px touch target */
.text-dot { position: relative; }
.text-dot::before { content: ""; position: absolute; inset: -10px -4px; }
.text-dot.is-active {
  width: 36px; background: var(--crimson);
}


/* ---------- Unified Bottom Glass Stat Panel (4 Metrics Only) ---------- */
.hero-stat-panel {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center;
  width: 100%; margin-top: 16px; border-radius: 20px; padding: 16px 36px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .65s, transform .5s var(--ease) .65s;
}
.hero-slide.is-active .hero-stat-panel { opacity: 1; transform: none; }

.stat-seg { display: flex; align-items: center; justify-content: center; gap: 14px; }

.seg-icon-badge {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.seg-icon-badge.bg-pink { background: var(--crimson-tint); }
.seg-icon-badge.bg-teal { background: var(--emerald-tint); }
.seg-icon-badge.bg-orange { background: var(--orange-tint); }
.seg-icon-badge.bg-blue { background: var(--blue-tint); }

.seg-data strong {
  display: block; font-size: var(--fs-20); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.1;
}
.seg-data strong.stat-crimson { color: var(--crimson); }
/* pulsing "live" dot inside the Live AMA Accounts label (the generic .seg-data span rule makes spans block) */
.seg-data .live-dot-sm { display: inline-block; vertical-align: middle; margin: -2px 7px 0 3px; }
.seg-data span {
  display: block; font-size: var(--fs-12); font-weight: 500; color: var(--t500); margin-top: 2px;
}

/* ---------- Bottom Slider Controls Bar ---------- */

/* Visual Diagram Stage */
.hero-visual {
  position: relative; z-index: 2; width: 100%; max-width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .65s var(--ease) .2s, transform .65s var(--ease) .2s;
}
.hero-slide.is-active .hero-visual { opacity: 1; transform: none; }

.hero-stage {
  position: relative; width: 100%; max-width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
}
.hero-diagram { width: 100%; height: auto; max-height: 480px; display: block; overflow: visible; }
/* Portrait phone version of the home flow diagram — swapped in at <=720px below */
.hero-stage .hero-diagram-m,
.hero-visual-card .hero-diagram-m { display: none; }
.hero-diagram-m .orbit-satellites-group,
.hero-diagram-m .switch-logo-bg,
.hero-diagram-m .switch-logo-img { transform-box: fill-box; transform-origin: center; }
/* Grid items default to min-width:auto, so a wide SVG would otherwise stretch the
   column (and the heading with it) past the viewport instead of shrinking. */
.hero-slide-grid > * { min-width: 0; }

/* Central Switch Hub Logo Animations */
.switch-logo-bg {
  transform-origin: 480px 235px;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.switch-logo-img {
  transform-origin: 480px 235px;
  animation: logoFloat 3.5s ease-in-out infinite;
}

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


.hero-visual-glow {
  position: absolute; top: 50%; left: 50%; width: 72%; padding-top: 72%;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(15, 157, 99, .22), transparent 62%);
  animation: anchorPulse 5s ease-in-out infinite;
}
.hero-visual-glow.g-emerald { background: radial-gradient(circle, rgba(15, 157, 99, .26), transparent 62%); }
@keyframes anchorPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* ---------- Scheme showcase card (platform.html, Scheme 01 AMA) ----------
   Original two-column layout and diagram size; the visual column becomes a tinted
   "stage" that bleeds to the card's right/top/bottom edges (glows, dot grid, rings +
   radar sweep centred on the VRG hub). The stage's negative margins equal its padding,
   so the diagram keeps exactly the width it had before.
   Add .is-showcase + the stage spans to another .product-card to reuse. */
.detail-row.product-card.is-showcase { overflow: hidden; }
.is-showcase .product-feature-item {
  padding: 8px 12px; margin-left: -12px; border-radius: 10px; border: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.is-showcase .product-feature-item:hover { background: var(--bg); border-color: rgba(138, 11, 43, 0.18); transform: translateX(4px); }
.is-showcase .product-feature-list { gap: 2px !important; }
.is-showcase .flex-1 .btn span { display: inline-block; transition: transform .18s var(--ease); }
.is-showcase .flex-1 .btn:hover span { transform: translateX(4px); }

.showcase-stage {
  --hub-x: 54.2%; --hub-y: 47.8%;   /* VRG hub position inside the wide diagram (520,215 of 960x450) */
  position: relative; isolation: isolate; overflow: hidden; align-self: stretch;
  display: flex; align-items: center;
  margin: -40px -40px -40px -28px; padding: 40px 40px 40px 28px;
  border-left: 1px solid #EEF2F6;
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(138, 11, 43, 0.07), transparent 70%),
    radial-gradient(70% 60% at 100% 0%, rgba(15, 157, 99, 0.08), transparent 70%),
    linear-gradient(180deg, #FCFCFD 0%, #F6F8FB 100%);
}
.stage-dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.12) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 85%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 85%);
}
.showcase-stage .hero-visual-card { position: relative; isolation: isolate; width: 100%; }
/* concentric rings + rotating radar sweep, both centred on the hub */
.stage-rings, .stage-sweep {
  position: absolute; left: var(--hub-x); top: var(--hub-y); z-index: -1; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.stage-rings {
  width: 100%; aspect-ratio: 1;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(138, 11, 43, 0.07) 23px 24px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
.stage-sweep {
  width: 52%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(15, 157, 99, 0.18) 50deg, transparent 90deg);
  -webkit-mask-image: radial-gradient(circle, transparent 22%, #000 26%, #000 60%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 22%, #000 26%, #000 60%, transparent 70%);
  animation: stageSweep 7s linear infinite;
}
@keyframes stageSweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Scheme 02/03 diagrams put the hub at (480,235) of 960x450 */
.showcase-stage.hub-agent, .showcase-stage.hub-ibft { --hub-x: 50%; --hub-y: 52.2%; }
/* mirrored row (diagram on the left): bleed to the left edge instead */
@media (min-width: 1101px) {
  .is-reverse > .showcase-stage { margin: -40px -28px -40px -40px; padding: 40px 28px 40px 40px; border-left: 0; border-right: 1px solid #EEF2F6; }
}
/* stacked: the stage becomes a full-width band along the bottom of the card */
@media (max-width: 1100px) {
  .showcase-stage { margin: 0 -40px -40px; padding: 32px 40px; border-left: 0; border-top: 1px solid #EEF2F6; }
}
@media (max-width: 720px) {
  .showcase-stage { --hub-x: 50%; --hub-y: 52.3%; }   /* hub in the portrait diagram (180,250 of 360x478) */
  .showcase-stage.hub-agent { --hub-y: 47.3%; }   /* (180,226 of 360x478) */
  .showcase-stage.hub-ibft { --hub-y: 46.5%; }    /* (180,226 of 360x486) */
  .stage-rings { width: 150%; }
  .stage-sweep { width: 92%; }
}
@media (max-width: 720px) {
  .showcase-stage { margin: 0 -20px -28px; padding: 24px 20px 28px; }
}
@media (max-width: 440px) {
  .showcase-stage { margin: 0 -16px -24px; padding: 20px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-sweep { animation: none; }
}

/* ---------- Node & network micro-interactions ---------- */
.node-pill { transition: scale .2s var(--ease), filter .2s var(--ease); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 6px 14px rgba(20, 16, 15, .08)); }
.node-pill:hover { scale: 1.09; filter: drop-shadow(0 10px 20px rgba(20, 16, 15, .18)) brightness(1.06); }
/* "+ More Partner Banks" pill in the home diagram links to partners.html */
.diagram-link { cursor: pointer; outline: none; }
.diagram-link rect, .diagram-link text { transition: stroke .2s var(--ease), fill .2s var(--ease); }
.diagram-link:hover rect, .diagram-link:focus-visible rect { stroke: var(--crimson); }
.diagram-link:hover text, .diagram-link:focus-visible text { fill: var(--crimson); }
.diagram-link:focus-visible rect { stroke-width: 2.5; }

.switch-glow { transform-box: fill-box; transform-origin: center; animation: switchGlowPulse 3.6s ease-in-out infinite; }
@keyframes switchGlowPulse { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.18); opacity: 1; } }

/* ---------- Modern Central Switch Cyber Orbit Animations ---------- */
.orbit-satellites-group {
  transform-origin: 480px 235px;
  animation: hubSpinCW 18s linear infinite;
}

@keyframes hubSpinCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}






/* ---------- Logos Marquee ---------- */
.logos-section {
  position: relative; z-index: 10; padding: 28px 0;
  background: radial-gradient(100% 100% at 50% 0%, #FFFFFF 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.logos-head { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.logos-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-14); font-weight: 600; color: var(--t500); margin-bottom: 0;
}
.live-dot-sm {
  width: 6px; height: 6px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.2); animation: livePulse 2s ease-in-out infinite;
}
.logos-marquee {
  overflow: hidden; padding: 8px 0 16px; /* room for the hover lift + shadow, which overflow would clip */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos-row { display: flex; flex-wrap: nowrap; width: max-content; gap: 16px; animation: logosScroll 28s linear infinite; }
.logos-marquee:hover .logos-row { animation-play-state: paused; }
@keyframes logosScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logos-row { animation: none; }
}

.logos-row li {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 24px;
  font-family: var(--font); font-size: var(--fs-15); font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.logos-row li:hover {
  color: var(--crimson); border-color: rgba(138, 11, 43, 0.3); transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(138, 11, 43, 0.12);
}
/* Partner logos (home marquee + Partners page). Each img's width/height attributes
   set its display size, chosen so every logo has roughly the same visual weight. */
.logos-row li.logo-item { padding: 0 22px; }
.logos-row li.logo-item img { height: auto; max-width: none; }
.logo-card.has-logo { gap: 0; min-height: 120px; padding: 22px 18px; }
.partner-logo { max-width: 100%; height: auto; }
/* Shared hover for logo pills (home strip) and logo cards (Partners page):
   lift + crimson edge + soft crimson glow, and the logo itself grows slightly. */
.logos-row li.logo-item,
.logo-card.has-logo {
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.logos-row li.logo-item img,
.logo-card.has-logo .partner-logo { transition: transform .25s var(--ease); }
@media (hover: hover) { /* touch screens would otherwise keep the hover look stuck after a tap */
  .logos-row li.logo-item:hover,
  .logo-card.has-logo:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 11, 43, .35);
    box-shadow: 0 12px 28px rgba(138, 11, 43, .12), 0 2px 6px rgba(15, 23, 42, .04);
  }
  .logos-row li.logo-item:hover img,
  .logo-card.has-logo:hover .partner-logo { transform: scale(1.06); }
}

/* ---------- Partners page sections: banks, telcos, regulators, alliances ----------
   Kept deliberately quiet: one background, plain white cards at rest. Each card's
   brand colour (--tc) only appears on hover (top bar, border, glow). */
.banks-section .partner-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.banks-section .logo-card.brand-card { flex: 0 0 calc((100% - 100px) / 6); }
.telco-section .partner-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.regulator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.alliance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 720px; margin: 0 auto; }

.brand-card.tc-abhi-mfb { --tc: 49, 46, 129; }
.brand-card.tc-allied-bank { --tc: 237, 125, 49; }
.brand-card.tc-askari-bank { --tc: 0, 94, 170; }
.brand-card.tc-bank-alfalah { --tc: 237, 28, 36; }
.brand-card.tc-bank-makramah { --tc: 183, 135, 62; }
.brand-card.tc-easypaisa { --tc: 59, 181, 74; }
.brand-card.tc-hbl-mfb { --tc: 0, 139, 123; }
.brand-card.tc-jazzcash { --tc: 240, 180, 0; }
.brand-card.tc-js-bank { --tc: 241, 90, 34; }
.brand-card.tc-khushhali-mfb { --tc: 106, 168, 79; }
.brand-card.tc-konnect-hbl { --tc: 0, 150, 110; }
.brand-card.tc-meezan-bank { --tc: 102, 45, 145; }
.brand-card.tc-mmbl { --tc: 220, 30, 40; }
.brand-card.tc-sindh-bank { --tc: 0, 104, 56; }
.brand-card.tc-u-bank { --tc: 0, 70, 140; }
.brand-card.tc-ubl { --tc: 0, 114, 188; }
.brand-card.tc-ztbl { --tc: 30, 90, 170; }
.brand-card.is-jazz { --tc: 227, 6, 19; }
.brand-card.is-telenor { --tc: 0, 172, 231; }
.brand-card.is-ufone { --tc: 245, 130, 32; }
.brand-card.is-zong { --tc: 141, 198, 63; }
.brand-card.tc-sbp { --tc: 0, 112, 60; }
.brand-card.tc-pta { --tc: 46, 49, 146; }
.brand-card.tc-edison { --tc: 38, 200, 180; }
.brand-card.tc-dco { --tc: 28, 90, 200; }

/* logo cards: brand-colour top bar (grows on hover), soft corner tint and
   signal-wave arcs in the bottom-right corner */
:is(.telco-section, .banks-section, .regulators-section, .alliances-section) .brand-card {
  position: relative; z-index: 1; overflow: hidden; min-height: 130px;
  background:
    linear-gradient(90deg, rgb(var(--tc)), rgba(var(--tc), 0.35)) 0 0 / 34% 4px no-repeat,
    radial-gradient(70% 60% at 100% 100%, rgba(var(--tc), 0.08), transparent 70%),
    #FFFFFF;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background-size .45s var(--ease);
}
:is(.telco-section, .banks-section, .regulators-section, .alliances-section) .brand-card::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%, transparent 0 12px, rgba(var(--tc), 0.16) 13px 14px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 70%);
  opacity: .7; transition: opacity .3s var(--ease), transform .4s var(--ease);
}
@media (hover: hover) {
  :is(.telco-section, .banks-section, .regulators-section, .alliances-section) .brand-card.has-logo:hover {
    background-size: 100% 4px, auto, auto;
    border-color: rgba(var(--tc), 0.45);
    box-shadow: 0 18px 40px rgba(var(--tc), 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
  }
  :is(.telco-section, .banks-section, .regulators-section, .alliances-section) .brand-card:hover::after { opacity: 1; transform: scale(1.15); }
}

/* each Partners section sits in its own framed panel (soft blush-to-mint tint,
   thin border, faint dot grid); sections are pulled closer so the panels read as
   separate boxes rather than full-width bands */
.section:is(.banks-section, .telco-section, .regulators-section, .alliances-section) { padding: 20px 0; }
.section.banks-section { padding-top: 48px; }
.section.alliances-section { padding-bottom: 48px; }
.partner-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 36px 32px 34px; border-radius: 28px; border: 1px solid #EEE3E7;
  background:
    radial-gradient(40% 60% at 0% 0%, rgba(138, 11, 43, 0.08), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(15, 157, 99, 0.10), transparent 70%),
    linear-gradient(120deg, #FCF3F5 0%, #FBFAFB 45%, #F2FAF6 100%);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.06);
}
.partner-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(138, 11, 43, 0.12) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 85%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 85%);
}
@media (max-width: 720px) {
  .section:is(.banks-section, .telco-section, .regulators-section, .alliances-section) { padding: 12px 0; }
  .section.banks-section { padding-top: 36px; }
  .section.alliances-section { padding-bottom: 36px; }
  .partner-panel { padding: 26px 14px 16px; border-radius: 20px; }
}

/* regulators: logo left, name + licence tag right */
.regulators-section .regulator-card { flex-direction: row; justify-content: flex-start; gap: 22px; padding: 26px 30px; text-align: left; }
.regulator-logo { flex-shrink: 0; height: auto; }
.regulator-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.regulator-text h3 { font-size: var(--fs-18); font-weight: 700; line-height: 1.3; color: var(--ink); }
.regulator-tag {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--tc)); background: rgba(var(--tc), 0.07);
}
.alliance-logo { max-width: 100%; height: auto; }

/* staggered entrance, only once main.js adds .in (no-JS shows everything) */
@keyframes bankCardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
:is(.partner-logo-grid, .regulator-grid, .alliance-grid).in .brand-card { animation: bankCardIn .55s var(--ease) backwards; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(1) { animation-delay: 0.10s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(2) { animation-delay: 0.14s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(3) { animation-delay: 0.18s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(4) { animation-delay: 0.22s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(5) { animation-delay: 0.26s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(6) { animation-delay: 0.30s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(7) { animation-delay: 0.34s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(8) { animation-delay: 0.38s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(9) { animation-delay: 0.42s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(10) { animation-delay: 0.46s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(11) { animation-delay: 0.50s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(12) { animation-delay: 0.54s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(13) { animation-delay: 0.58s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(14) { animation-delay: 0.62s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(15) { animation-delay: 0.66s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(16) { animation-delay: 0.70s; }
.banks-section .partner-logo-grid.in .logo-card:nth-child(17) { animation-delay: 0.74s; }
.telco-section .partner-logo-grid.in .telco-card:nth-child(2),
.regulator-grid.in .regulator-card:nth-child(2),
.alliance-grid.in .alliance-card:nth-child(2) { animation-delay: .08s; }
.telco-section .partner-logo-grid.in .telco-card:nth-child(3) { animation-delay: .16s; }
.telco-section .partner-logo-grid.in .telco-card:nth-child(4) { animation-delay: .24s; }

@media (max-width: 900px) {
  .banks-section .logo-card.brand-card { flex-basis: calc((100% - 40px) / 3); }
  .telco-section .partner-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
/* side by side, the regulator cards get too narrow for "Telecommunication" below ~900px */
@media (max-width: 900px) {
  .regulator-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 720px) {
  .banks-section .partner-logo-grid, .telco-section .partner-logo-grid, .regulator-grid, .alliance-grid { gap: 12px; }
  .banks-section .logo-card.brand-card { flex-basis: calc((100% - 12px) / 2); }
  :is(.telco-section, .banks-section, .alliances-section) .brand-card { min-height: 96px; padding: 16px 12px; }
}
/* small phones: logo above the name and licence tag */
@media (max-width: 440px) {
  .regulators-section .regulator-card { flex-direction: column; justify-content: center; gap: 14px; padding: 24px 18px; text-align: center; }
  .regulator-logo { max-width: 80px; }
  .regulator-text { align-items: center; }
  .regulator-text h3 { font-size: var(--fs-16); }
}

/* ---------- Performance Metrics Section ---------- */
.metrics-section { position: relative; isolation: isolate; padding: 48px 0; background: var(--bg); }
.metrics-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.metrics-glow-L { position: absolute; top: -10%; left: -6%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(138, 11, 43, 0.07), transparent 70%); filter: blur(70px); }
.metrics-glow-R { position: absolute; bottom: -10%; right: -6%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 157, 99, 0.08), transparent 70%); filter: blur(70px); }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-card {
  position: relative; background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  padding: 36px 30px; border-radius: 20px; border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.stat-card:hover {
  transform: translateY(-6px); border-color: rgba(138, 11, 43, 0.35);
  box-shadow: 0 20px 48px rgba(138, 11, 43, 0.12); background: #FFFFFF;
}
.stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.stat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

.icon-pink { background: var(--crimson-tint); color: var(--crimson); }
.icon-teal { background: var(--emerald-tint); color: var(--emerald); }
.icon-orange { background: var(--orange-tint); color: var(--orange); }
.icon-blue { background: var(--blue-tint); color: var(--blue); }
.icon-crimson { background: var(--crimson-tint); color: var(--crimson); }
.icon-emerald { background: var(--emerald-tint); color: var(--emerald); }

.stat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600;
}
.badge-pink { background: var(--crimson-tint); color: var(--crimson); }
.badge-teal { background: var(--emerald-tint); color: var(--emerald-text); }
.badge-orange { background: var(--orange-tint); color: #C2410C; }

.dot-pulse-pink { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 2px rgba(138, 11, 43, 0.25); animation: livePulse 2s ease-in-out infinite; }
.dot-pulse-teal { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 2px rgba(15, 157, 99, 0.25); animation: livePulse 2s ease-in-out infinite; }
.dot-pulse-orange { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25); animation: livePulse 2s ease-in-out infinite; }

.stat-card .num { font-size: clamp(32px, 3.2vw, 42px); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.stat-card .num.stat-crimson { color: var(--crimson); }
.stat-card .lbl { font-size: var(--fs-15); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.stat-card .stat-sub { font-size: var(--fs-13); color: var(--t500); line-height: 1.45; }

/* ---------- Flagship Schemes Section ---------- */
.schemes-section { position: relative; isolation: isolate; padding: 48px 0; background: var(--bg-subtle); }
.schemes-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 30rem at 10% 10%, rgba(138, 11, 43, 0.08), transparent 60%),
    radial-gradient(36rem 28rem at 90% 90%, rgba(15, 157, 99, 0.09), transparent 60%);
}
.schemes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scheme-card {
  position: relative; background: #FFFFFF; padding: 36px 30px; border-radius: 20px;
  border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.scheme-card:hover {
  transform: translateY(-6px); border-color: rgba(138, 11, 43, 0.4);
  box-shadow: 0 20px 48px rgba(138, 11, 43, 0.12);
}
.scheme-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.scheme-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.scheme-icon svg { width: 22px; height: 22px; }
.scheme-pill { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--bg-subtle); color: var(--t500); }

.scheme-card h3 { font-size: var(--fs-20); font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.scheme-card p { font-size: var(--fs-15); color: var(--t500); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

.scheme-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.scheme-tags span { font-size: var(--fs-12); font-weight: 600; color: var(--t700); background: var(--bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; }

.scheme-stat {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-14); font-weight: 500; color: var(--t500); padding-top: 18px; border-top: 1px solid var(--bg-subtle);
}
.scheme-stat strong { color: var(--ink); font-weight: 700; }
.stat-live-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stat-live-dot.bg-pink { background: var(--crimson); box-shadow: 0 0 0 2px rgba(138, 11, 43, 0.25); }
.stat-live-dot.bg-teal { background: var(--emerald); box-shadow: 0 0 0 2px rgba(15, 157, 99, 0.25); }
.stat-live-dot.bg-blue { background: var(--blue); box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25); }

/* ---------- Platform Architecture Section ---------- */
.platform-section { position: relative; isolation: isolate; padding: 48px 0; background: var(--bg); }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.platform-card {
  position: relative; background: #FFFFFF; padding: 34px 28px; border-radius: 20px;
  border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.platform-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1); }
.platform-card.card-crimson:hover { border-color: rgba(138, 11, 43, 0.4); }
.platform-card.card-emerald:hover { border-color: rgba(15, 157, 99, 0.4); }
.platform-card.card-blue:hover { border-color: rgba(2, 132, 199, 0.4); }

.platform-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.platform-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.platform-icon svg { width: 20px; height: 20px; }

.platform-tag { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.tag-crimson { background: var(--crimson-tint); color: var(--crimson); }
.tag-emerald { background: var(--emerald-tint); color: var(--emerald-text); }
.tag-blue { background: var(--blue-tint); color: var(--blue-text); }

.platform-card :is(h3, h4) { font-size: var(--fs-18); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.platform-card p { font-size: var(--fs-14); color: var(--t500); line-height: 1.6; margin-bottom: 20px; }

.platform-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.platform-chips span { font-size: var(--fs-12); font-weight: 600; color: var(--t500); background: var(--bg-subtle); padding: 4px 10px; border-radius: 6px; }

/* ---------- Full-Stack Switch Architecture (platform.html only: .arch-section) ----------
   Home reuses .platform-card, so everything here is scoped. The cards read as one
   "switch fabric": animated dashed links run between neighbouring cards (3 columns
   above 900px, a single column below). Each card's colour comes from --c. */
.platform-section.arch-section {
  overflow: hidden; border-top: 1px solid var(--border);
  background:
    radial-gradient(45% 35% at 0% 0%, rgba(138, 11, 43, 0.06), transparent 70%),
    radial-gradient(45% 35% at 100% 100%, rgba(15, 157, 99, 0.07), transparent 70%),
    var(--bg);
}
.arch-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(55% 30% at 50% 6%, #000 0%, transparent 80%);
  mask-image: radial-gradient(55% 30% at 50% 6%, #000 0%, transparent 80%);
}
.platform-section.arch-section .platform-grid { gap: 28px; }

.arch-section .card-crimson { --c: 138, 11, 43; --c-text: var(--crimson); }
.arch-section .card-emerald { --c: 15, 157, 99; --c-text: var(--emerald-text); }
.arch-section .card-blue { --c: 2, 132, 199; --c-text: var(--blue-text); }

.arch-section .platform-card {
  /* accent strip along the top edge (grows on hover) + soft corner glow */
  background:
    linear-gradient(90deg, rgb(var(--c)), rgba(var(--c), 0.15)) 28px 0 / 44px 3px no-repeat,
    radial-gradient(60% 45% at 100% 0%, rgba(var(--c), 0.07), transparent 70%),
    #FFFFFF;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background-size .45s var(--ease);
}
.arch-section .platform-card:hover {
  background-size: calc(100% - 56px) 3px, auto, auto;
  box-shadow: 0 22px 48px rgba(var(--c), 0.12);
}
.arch-section .platform-icon {
  box-shadow: 0 0 0 4px rgba(var(--c), 0.07);
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.arch-section .platform-card:hover .platform-icon {
  background: rgb(var(--c)); color: #FFFFFF; transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 0 0 6px rgba(var(--c), 0.12), 0 8px 18px rgba(var(--c), 0.28);
}
.arch-section .platform-chips span { border: 1px solid transparent; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.arch-section .platform-card:hover .platform-chips span { background: rgba(var(--c), 0.07); border-color: rgba(var(--c), 0.18); color: var(--c-text); }

/* switch-fabric links in the gutters: ::after → right neighbour, ::before → card below */
.arch-section .platform-card::after,
.arch-section .platform-card::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  animation: archFlow 1.1s linear infinite;
}
.arch-section .platform-card::after {
  top: 50%; right: -30px; width: 30px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(var(--c), 0.55) 50%, transparent 50%) 0 0 / 8px 2px;
}
.arch-section .platform-card::before {
  left: 50%; bottom: -30px; width: 2px; height: 30px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(var(--c), 0.55) 50%, transparent 50%) 0 0 / 2px 8px;
  animation-name: archFlowY;
}
.arch-section .platform-card:nth-child(3n)::after,
.arch-section .platform-card:nth-child(n+7)::before { display: none; }
@keyframes archFlow { to { background-position: 8px 0; } }
@keyframes archFlowY { to { background-position: 0 8px; } }

@media (max-width: 900px) {
  .platform-section.arch-section .platform-grid { gap: 28px; }
  .arch-section .platform-card::after { display: none; }
  .arch-section .platform-card:nth-child(n+7)::before { display: block; }
  .arch-section .platform-card:last-child::before { display: none; }
}
@media (max-width: 720px) {
  .platform-section.arch-section .platform-grid { gap: 24px; }
  .arch-section .platform-card::before { bottom: -26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-section .platform-card::after, .arch-section .platform-card::before { animation: none; }
}

/* ---------- Vision + Technical Integration (home, one card) ----------
   White card with the vision statement; a dark "ticket stub" ribbon along its
   bottom edge carries the integration invitation. The notches are circles in the
   section's background colour, half-clipped by the card's rounded overflow.
   Entrance animations only run once main.js adds .in, so without JS (noscript.css
   makes .reveal visible) everything simply shows in its final state. */
.connect-section { padding: 56px 0; background: var(--bg); }

.connect-card {
  position: relative; overflow: hidden; border-radius: 28px;
  background: #FFFFFF; border: 1px solid var(--border);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.08);
}

.connect-main {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: end;
  padding: 64px 64px 56px;
}
/* watermark quote glyph carried over from the old vision card */
.connect-main::before {
  content: "\201C"; position: absolute; top: -34px; left: 28px; z-index: -1; pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif; font-size: 220px; font-weight: 700; line-height: 1;
  color: var(--crimson); opacity: .06;
}
/* faint dot-grid texture, strongest top-right and fading out toward the text */
.connect-main::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(138, 11, 43, 0.16) 1.2px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 75%);
}
.connect-statement .section-eyebrow { margin-bottom: 16px; }
.connect-statement .hl-crimson { display: block; color: var(--crimson); }
/* highlighter stroke under "better tomorrow." */
.connect-mark {
  background-image: linear-gradient(90deg, rgba(138, 11, 43, 0.18), rgba(15, 157, 99, 0.22));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.28em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.connect-aside { position: relative; padding-left: 32px; }
/* accent rule beside the lead: crimson into emerald, grows down on reveal */
.connect-aside::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--crimson), var(--emerald)); transform-origin: top;
}
.connect-lead { font-size: var(--fs-17); line-height: 1.65; color: var(--t500); margin-bottom: 24px; }
.connect-lead strong { color: var(--ink); font-weight: 800; }

.connect-ribbon {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: 40px 64px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--crimson) 0%, #58061B 55%, var(--ink) 100%);
}
/* glow + rings clipped to the ribbon in their own layer, so the ribbon itself can
   stay unclipped for the notches and the packet riding on its top edge */
.connect-ribbon-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* concentric rings behind the action, echoing the hero's guilloche background */
.connect-rings {
  position: absolute; top: 50%; right: -160px;
  width: 520px; height: 520px; margin-top: -260px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 26px, rgba(255, 255, 255, 0.07) 27px 28px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
/* perforated tear line along the top of the stub */
.connect-ribbon::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.28);
}
.connect-notch {
  position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border);
}
.connect-notch-l { left: -14px; }
.connect-notch-r { right: -14px; }
/* a data packet travelling along the tear line, through the switch */
.connect-track { position: absolute; top: 0; left: 28px; right: 28px; height: 0; pointer-events: none; }
.connect-packet {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35), 0 0 14px 4px rgba(52, 211, 153, 0.55);
  animation: connectPacket 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes connectPacket {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
.connect-ribbon .section-eyebrow { color: rgba(255, 255, 255, 0.92); margin-bottom: 10px; }
.connect-ribbon .section-eyebrow .dot { background: #34D399; }
.connect-ribbon h2 { margin-bottom: 10px; }
.connect-ribbon-text p:not(.section-eyebrow) { font-size: var(--fs-16); line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 620px; }
.connect-ribbon-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.connect-ribbon-action .btn span { display: inline-block; transition: transform .18s var(--ease); }
.connect-ribbon-action .btn:hover span { transform: translateX(4px); }

/* staggered entrance once the card is revealed */
.connect-card.in .connect-statement { animation: connectRise .7s var(--ease) .15s both; }
.connect-card.in .connect-aside { animation: connectRise .7s var(--ease) .3s both; }
.connect-card.in .connect-aside::before { animation: connectGrow .9s var(--ease) .45s both; }
.connect-card.in .connect-mark { animation: connectMark 1s var(--ease) .7s both; }
.connect-card.in .connect-ribbon-text { animation: connectRise .7s var(--ease) .45s both; }
.connect-card.in .connect-ribbon-action { animation: connectRise .7s var(--ease) .6s both; }
@keyframes connectRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes connectGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes connectMark { from { background-size: 0 0.28em; } to { background-size: 100% 0.28em; } }

@media (max-width: 900px) {
  .connect-card { border-radius: 22px; }
  .connect-main { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 48px 32px 40px; }
  .connect-main::after { width: 100%; }
  .connect-aside { padding-left: 20px; }
  .connect-ribbon { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 32px; }
  .connect-ribbon-action { align-items: flex-start; }
  .connect-rings { top: auto; bottom: -260px; margin-top: 0; }
}
@media (max-width: 720px) {
  .connect-section { padding: 48px 0; }
  .connect-main { padding: 40px 20px 32px; }
  .connect-main::before { display: none; }
  .connect-ribbon { padding: 32px 20px; }
  .connect-ribbon-action { align-items: stretch; }
  .connect-ribbon-action .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-packet { animation: none; display: none; }
}

/* ---------- Company / Stats Cards (reused) ---------- */
.company-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.company-fig {
  background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 30px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.company-fig:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--crimson); }
.company-icon {
  width: 38px; height: 38px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%;
  background: var(--crimson-tint); color: var(--crimson);
  transition: background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.company-icon svg { width: 18px; height: 18px; }
.company-fig:hover .company-icon { background: var(--crimson); color: #fff; transform: scale(1.08); }
.company-fig .num { font-size: 30px; font-weight: 800; color: var(--crimson); letter-spacing: -.02em; margin-bottom: 6px; }
.company-fig .lbl { font-size: var(--fs-14); color: var(--t500); line-height: 1.5; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border); background: var(--crimson-tint);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.gallery-tile:nth-child(3n+2) { background: var(--emerald-tint); }
.gallery-tile:nth-child(3n) { background: rgba(2, 132, 199, .08); }
.gallery-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-tile svg { width: 30px; height: 30px; color: var(--crimson); opacity: .5; }
.gallery-tile:nth-child(3n+2) svg { color: var(--emerald); }
.gallery-tile:nth-child(3n) svg { color: var(--blue); }
.gallery-tile span { font-size: var(--fs-13); font-weight: 600; color: var(--t700); }
.gallery-note { text-align: center; font-size: var(--fs-14); color: var(--t500); margin-top: 20px; }

/* ---------- CTA Section ---------- */
.cta-section { position: relative; isolation: isolate; padding: 48px 0; text-align: center; background: var(--bg); }
.cta-box {
  position: relative; overflow: hidden; isolation: isolate; width: 100%;
  background: linear-gradient(135deg, var(--crimson) 0%, #58061B 55%, var(--ink) 100%);
  border-radius: 28px; padding: 60px 48px; color: #FFFFFF;
  box-shadow: 0 24px 56px rgba(138, 11, 43, 0.28);
}
.cta-bg-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32rem 24rem at 10% 0%, rgba(255, 255, 255, 0.15), transparent 60%),
    radial-gradient(28rem 22rem at 90% 100%, rgba(15, 157, 99, 0.3), transparent 60%);
}

/* ---------- Slim CTA band (platform.html: .cta-box.cta-slim) ----------
   One row: heading + text left, button right; faint rings behind the button. */
.cta-box.cta-slim {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  text-align: left; padding: 36px 48px; border-radius: 22px;
  box-shadow: 0 18px 44px rgba(138, 11, 43, 0.22);
}
.cta-box.cta-slim h2 { font-size: clamp(22px, 1vw + 14px, 28px); margin-bottom: 8px; }
.cta-box.cta-slim p { font-size: var(--fs-16); max-width: 640px; margin: 0; }
.cta-slim-rings {
  position: absolute; top: 50%; right: -150px; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; margin-top: -230px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 24px, rgba(255, 255, 255, 0.07) 25px 26px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
}
.cta-slim .btn span { display: inline-block; transition: transform .18s var(--ease); }
.cta-slim .btn:hover span { transform: translateX(4px); }

@media (max-width: 720px) {
  .cta-box.cta-slim { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 30px 24px; }
  .cta-slim-rings { top: auto; bottom: -260px; margin-top: 0; }
}
@media (max-width: 720px) {
  .cta-box.cta-slim { padding: 28px 20px; border-radius: 20px; }
  .cta-slim .btn { width: 100%; }
}

.cta-box h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; color: #FFFFFF; }
.cta-box p { font-size: var(--fs-17); color: rgba(255, 255, 255, 0.85); max-width: 720px; margin: 0 auto 32px; line-height: 1.6; }
.btn-primary-light {
  background: #FFFFFF; color: var(--crimson); font-weight: 600; font-size: var(--fs-15); height: 46px; padding: 0 24px;
  border-radius: var(--r-btn); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-primary-light:hover { transform: translateY(-3px); background: var(--bg); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25); }

.cta-contact-pills { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.contact-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF; font-size: var(--fs-14); font-weight: 600; backdrop-filter: blur(8px);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-pill svg { width: 16px; height: 16px; stroke-width: 2; }
.contact-pill:hover { background: rgba(255, 255, 255, 0.25); border-color: #FFFFFF; transform: translateY(-2px); }

/* ---------- Footer ---------- */
footer { position: relative; overflow: hidden; background: var(--dark); padding: 48px 0 24px; }
footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40rem 26rem at 8% 0%, rgba(138, 11, 43, .35), transparent 60%),
    radial-gradient(34rem 22rem at 96% 100%, rgba(15, 157, 99, .18), transparent 60%);
}
.footer-inner { position: relative; }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 28px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-brand { padding-right: 20px; }
.footer-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 12px; }
.footer-tagline { font-size: var(--fs-14); line-height: 1.6; color: rgba(255, 255, 255, .55); max-width: 300px; }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-bottom .footer-social { margin-top: 0; }
.social-icon-link { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); transition: background .15s var(--ease), color .15s var(--ease); }
.social-icon-link svg { width: 16px; height: 16px; }
.social-icon-link:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.footer-col h2 { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .62); margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: var(--fs-15); color: rgba(255, 255, 255, .68); transition: color .15s var(--ease); }
.footer-col ul a:hover { color: #fff; }

.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-14); color: rgba(255, 255, 255, .68); line-height: 1.5; }
.footer-contact-item svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, .42); }
.footer-contact-item a { display: inline-block; padding: 3px 0; color: inherit; transition: color .15s var(--ease); }
.footer-contact-item a:hover { color: #fff; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: var(--fs-13); color: rgba(255, 255, 255, .6); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 720px) {
  footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .footer-brand { grid-column: 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--t700); cursor: pointer; box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s, border-color .15s var(--ease), color .15s var(--ease);
  z-index: 90;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { border-color: var(--t400); color: var(--ink); }

/* ---------- Responsive ---------- */
/* Tablet & Mobile: responsive hero section layout */

/* Stacks the hero below 1100px: side-by-side, the diagram column gets so narrow
   on tablets/small laptops that its labels shrink to ~7px. */
@media (max-width: 1100px) {
  .hero { padding: 28px 0 20px; }
  .hero-slide-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .hero-content {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .hero-text-slider {
    min-height: auto; width: 100%;
  }
  .hero-heading {
    text-align: center; font-size: clamp(26px, 4.8vw, 38px);
  }
  .hero-sub {
    text-align: center; margin-left: auto; margin-right: auto; max-width: 560px;
  }
  .hero-text-dots {
    justify-content: center; margin-top: 14px;
  }
  .hero-visual {
    width: 100%; max-width: 100%; justify-content: center; overflow: hidden;
  }
  .hero-stage {
    width: 100%; max-width: 100%; justify-content: center; overflow: visible;
  }
  .hero-diagram {
    width: 100%; max-width: 100%; min-width: 0; height: auto; max-height: 440px; display: block;
  }
  .hero-stat-panel {
    gap: 16px; padding: 18px 24px; margin-top: 20px;
  }
  /* Platform scheme rows: side by side, their diagrams shrink to ~390px and the labels
     become unreadable, so stack them through the tablet/small-laptop range. */
  .detail-row.product-card { grid-template-columns: 1fr; gap: 32px; }
  .detail-row.product-card.is-reverse .detail-visual { order: 0; }
}

/* Phones: swap the wide diagram for the portrait one so labels stay readable
   without any horizontal scrolling. */
@media (max-width: 720px) {
  .hero-stage .hero-diagram-d,
  .hero-visual-card .hero-diagram-d { display: none; }
  .hero-stage .hero-diagram-m,
  .hero-visual-card .hero-diagram-m { display: block; width: 100%; max-width: 420px; max-height: none; margin: 0 auto; }
}

/* Collapse to the hamburger at 1100px and below, the same width at which the hero and
   product rows stack (one tablet/laptop breakpoint instead of two). */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-contact-btn { display: none; }
  /* dropdown restyled to match the desktop bar: crimson bar marks the current page,
     Contact sits at the bottom as the same crimson button */
  header.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 80px; left: 0; right: 0; padding: 10px 16px 16px;
    background: #FFFFFF; border-bottom: 1px solid var(--border); box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.22);
  }
  header.menu-open .nav-links a { display: flex; width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; font-size: var(--fs-16); }
  header.menu-open .nav-links a::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  header.menu-open .nav-links a:hover { background: #F7F5F6; }
  header.menu-open .nav-links a.active { background: var(--crimson-tint); }
  header.menu-open .nav-links a.active::after, header.menu-open .nav-links a:hover::after { transform: scaleY(1); }
  header.menu-open .nav-contact-item { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
  header.menu-open .nav-contact-item a { justify-content: center; background: var(--crimson); color: #FFFFFF; font-weight: 700; }
  header.menu-open .nav-contact-item a::after { display: none; }
  header.menu-open .nav-contact-item a:hover, header.menu-open .nav-contact-item a.active { background: var(--crimson-hover); color: #FFFFFF; }
}

@media (max-width: 900px) {
  .schemes-grid, .platform-grid { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr; } /* 3 cards: one column, no orphan */
  /* hero stat panel: 4 columns get too tight below 900px (labels wrap unevenly), so use an even 2x2 */
  .hero-stat-panel { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
  .stat-seg { justify-content: flex-start; justify-self: center; width: min(210px, 100%); } /* same-width slots so icons line up per column */
  .company-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  /* index.html's metrics/schemes/platform grids each hold exactly 3 cards — a 2-column
     grid leaves the 3rd orphaned alone in its own row with empty space beside it, so on
     the Home page specifically these stay single-column through the tablet range instead. */
  .metrics-section .metrics-grid,
.platform-section .platform-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .detail-row { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .detail-row.is-reverse .detail-visual { order: 0; }
  .page-header { padding: 40px 0 36px; }
}

/* Mobile: clean stacked flow, fluid responsive diagram, compact metrics */
@media (max-width: 720px) {
  .section { padding: 48px 0; }
  .metrics-section, .schemes-section, .platform-section { padding: 48px 0; }
  .metrics-grid, .schemes-grid, .platform-grid { grid-template-columns: 1fr; gap: 16px; }
  .company-grid { grid-template-columns: 1fr; gap: 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-tile { aspect-ratio: 1; border-radius: 14px; padding: 8px; text-align: center; }
  .cta-box { padding: 44px 20px; border-radius: 20px; }
  .cta-contact-pills { flex-direction: column; width: 100%; }
  .contact-pill { width: 100%; justify-content: center; }
  .logos-section { padding: 28px 0; }
  .hero { padding: 18px 0 14px; }
  .live-pill .tx-unit { display: none; }
  .eyebrow {
    font-size: var(--fs-12); padding: 5px 12px; text-align: center; line-height: 1.4; max-width: 100%;
  }
  .hero-heading {
    font-size: clamp(22px, 6.2vw, 30px); line-height: 1.15;
  }
  .hero-sub {
    font-size: var(--fs-14); margin-top: 10px; line-height: 1.5;
  }
  .detail-row > * { min-width: 0; }
  .detail-row.product-card { padding: 28px 20px !important; border-radius: 20px !important; }
  .hero-stat-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px; padding: 14px; margin-top: 16px; border-radius: 16px;
  }
  .stat-seg { flex-direction: column; justify-content: flex-start; gap: 6px; width: 100%; text-align: center; } /* icon above figure: labels get the full column width */
  .seg-icon-badge {
    width: 36px; height: 36px;
  }
  .seg-icon-badge svg {
    width: 18px; height: 18px;
  }
  .seg-data strong { font-size: var(--fs-15); }
  .seg-data span { font-size: var(--fs-12); line-height: 1.3; }
  .hero-glow-L, .hero-glow-R { display: none; }
  .page-header { padding: 32px 0 32px; }
  .page-header h1 { font-size: clamp(28px, 8vw, 36px); }
}

@media (max-width: 440px) {
  .hero-stat-panel { gap: 12px 8px; padding: 12px 10px; }
  .seg-data strong { font-size: var(--fs-14); }
  .seg-data span { font-size: var(--fs-12); }
  /* long button labels (e.g. "Explore the full platform architecture") can exceed
     the viewport on very narrow phones since .btn is white-space:nowrap by default */
  .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 46px; padding: 12px 18px; line-height: 1.3; }
  /* narrow phones: let the platform flow diagrams use the card's side padding too */
  .detail-row.product-card { padding: 24px 16px !important; }
  .hero-visual-card .hero-diagram-m { width: calc(100% + 24px); max-width: none; margin: 0 -12px; }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-slide { transition: opacity .3s linear; }
  .word, .hero-sub, .hero-visual { transition: opacity .3s linear !important; transform: none !important; }
}

/* ---------- Utility classes (replacing inline styles) ---------- */
.role-loc-meta { color: var(--crimson); font-weight: 600; margin: 6px 0 12px; font-size: var(--fs-14); }
.mt-16 { margin-top: 16px; }

/* ---------- Journey Timeline Section (2026 Redesigned Corporate Component) ---------- */
/* same 48px rhythm and content edges as every other About section (the wider
   1480px wrap made this box stick out past the sections above and below it) */
.journey-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}

.journey-wrapper {
  background: #FFFFFF;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02);
  padding: 48px clamp(24px, 20vw - 212px, 44px); /* 24px up to ~1180px wide, easing to 44px by 1280px (replaces a 1240px breakpoint) */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-image: radial-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Ambient Radial Glow */
.journey-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(138, 11, 43, 0.03) 0%, rgba(15, 23, 42, 0.02) 50%, transparent 80%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.journey-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}

.journey-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: var(--heading-color);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.25;
}

.journey-header p {
  font-size: var(--fs-15);
  color: var(--t500);
  line-height: 1.6;
  margin: 0;
}

/* Desktop Two-Row Timeline View — Unified Single-Grid Layout */
.journey-timeline-desktop {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Canvas Scrollable Container */
.journey-canvas-scroll {
  width: 100%;
  overflow: visible;
  padding: 8px 0 16px;
}

/* ===== DESKTOP TIMELINE CANVAS (100% Full-Width Expanded Grid Layout) ===== */
.journey-stage {
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ===== TOP ROW: 5 Columns across 100% width (Centers at 10%, 30%, 50%, 70%, 90%) ===== */
.journey-top-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  gap: clamp(10px, 6vw - 61px, 16px);
}

.journey-top-row .journey-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ===== BOTTOM ROW: 4 Columns across 80% width shifted right by 10% (Centers at 20%, 40%, 60%, 80%) ===== */
.journey-bottom-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 80%;
  margin-left: 10%;
  gap: clamp(10px, 6vw - 61px, 16px);
  box-sizing: border-box;
}

.journey-bottom-row .journey-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* columns may shrink below their content now that the box shares the page's normal
   width: let cards shrink, and tighten the box padding on small laptops */
.journey-col, .journey-card { min-width: 0; }
/* equal card heights per row, so every icon and stem meets the track at the same height */
.journey-top-row .journey-card, .journey-bottom-row .journey-card { flex: 1 1 auto; width: 100%; }
/* ===== CONNECTOR STEMS ===== */
.journey-stem {
  width: 2px;
  height: 16px;
  background: var(--border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

/* ===== FLOATING ICON BADGE ===== */
.journey-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.journey-icon-float {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jc-tint, #FFFFFF);
  border: 1.5px solid var(--jc-border, var(--border));
  color: var(--jc-color, var(--t500));
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-icon-float svg {
  width: 22px;
  height: 22px;
}

/* Per-milestone icon colors, cycling through the site's established accent
   palette (crimson/blue/emerald/orange) so each timeline stop reads distinctly
   at rest — hover/active still overrides to crimson as the "selected" signal. */
.journey-col[data-index="0"], .journey-v-item[data-index="0"] { --jc-tint: var(--crimson-tint); --jc-border: #F3D2DB; --jc-color: var(--crimson); }
.journey-col[data-index="1"], .journey-v-item[data-index="1"] { --jc-tint: var(--blue-tint); --jc-border: #BAE6FD; --jc-color: var(--blue); }
.journey-col[data-index="2"], .journey-v-item[data-index="2"] { --jc-tint: var(--emerald-tint); --jc-border: #BBEFD7; --jc-color: var(--emerald); }
.journey-col[data-index="3"], .journey-v-item[data-index="3"] { --jc-tint: var(--orange-tint); --jc-border: #FDD5B6; --jc-color: var(--orange); }
.journey-col[data-index="4"], .journey-v-item[data-index="4"] { --jc-tint: var(--crimson-tint); --jc-border: #F3D2DB; --jc-color: var(--crimson); }
.journey-col[data-index="5"], .journey-v-item[data-index="5"] { --jc-tint: var(--blue-tint); --jc-border: #BAE6FD; --jc-color: var(--blue); }
.journey-col[data-index="6"], .journey-v-item[data-index="6"] { --jc-tint: var(--emerald-tint); --jc-border: #BBEFD7; --jc-color: var(--emerald); }
.journey-col[data-index="7"], .journey-v-item[data-index="7"] { --jc-tint: var(--orange-tint); --jc-border: #FDD5B6; --jc-color: var(--orange); }
.journey-col[data-index="8"], .journey-v-item[data-index="8"] { --jc-tint: var(--crimson-tint); --jc-border: #F3D2DB; --jc-color: var(--crimson); }

/* ===== MIDDLE TIMELINE TRACK ===== */
.journey-track-container {
  width: 100%;
  position: relative;
  height: 28px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}

.journey-track-line-wrap {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.journey-track-line-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: var(--border);
  border-radius: 999px;
}

.journey-nodes-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.journey-node {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.journey-node[data-index="0"] { left: 10%; }
.journey-node[data-index="1"] { left: 20%; }
.journey-node[data-index="2"] { left: 30%; }
.journey-node[data-index="3"] { left: 40%; }
.journey-node[data-index="4"] { left: 50%; }
.journey-node[data-index="5"] { left: 60%; }
.journey-node[data-index="6"] { left: 70%; }
.journey-node[data-index="7"] { left: 80%; }
.journey-node[data-index="8"] { left: 90%; }



.node-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid var(--t700);
  box-shadow: 0 0 0 3px #FFFFFF;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Styling - Full Size */
.journey-card {
  width: 100%;
  min-height: 180px;
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  padding: 16px 14px;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.journey-card-topbar {
  display: flex;
  flex-wrap: wrap; /* the label drops under the year when the card is narrow */
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.journey-year {
  font-size: var(--fs-24);
  font-weight: 800;
  color: var(--crimson);
  letter-spacing: -0.03em;
  line-height: 1;
}

.journey-category,
.journey-badge-latest {
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t700);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.journey-card-title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.35;
  margin: 0 0 6px;
}

.journey-card-divider {
  width: 24px;
  height: 2.5px;
  background: var(--crimson);
  border-radius: 999px;
  margin-bottom: 8px;
}

.journey-card-desc {
  font-size: var(--fs-13);
  color: var(--t500);
  line-height: 1.45;
  margin: 0;
}

/* Hover & Active Card / Stem / Icon States */
.journey-col:hover .journey-card {
  transform: translateY(-4px);
  border-color: var(--crimson);
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 16px -2px rgba(138, 11, 43, 0.18);
}

.journey-col:hover .journey-stem {
  background: var(--crimson);
}

.journey-col:hover .journey-icon-float {
  border-color: var(--crimson);
  color: var(--crimson);
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--crimson-tint), 0 6px 16px -2px rgba(138, 11, 43, 0.25);
}

/* Mobile & Tablet Vertical Timeline View (< 992px) */
.journey-timeline-mobile {
  display: none;
}

@media (max-width: 1100px) {
  .journey-wrapper {
    padding: 32px 18px;
    border-radius: 20px;
  }
  .journey-header {
    margin-bottom: 30px;
  }
  .journey-timeline-desktop {
    display: none;
  }
  .journey-timeline-mobile {
    display: block;
    position: relative;
    padding-left: 18px;
  }

  .journey-v-track-line {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 42px;
    width: 2.5px;
    background: linear-gradient(180deg, var(--t700) 0%, var(--crimson) 50%, var(--t700) 100%);
    border-radius: 999px;
  }

  .journey-v-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .journey-v-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .journey-v-node {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
  }

  .journey-v-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--jc-tint, #FFFFFF);
    border: 2px solid var(--jc-border, var(--t700));
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jc-color, var(--t700));
    transition: all 0.3s var(--ease);
  }

  .journey-v-icon-badge svg {
    width: 22px;
    height: 22px;
  }

  .journey-v-item:hover .journey-v-icon-badge {
    border-color: var(--crimson);
    color: var(--crimson);
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(138, 11, 43, 0.25);
  }

  .journey-v-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05);
    padding: 18px 16px;
    transition: all 0.3s var(--ease);
  }

  .journey-v-item:hover .journey-v-card {
    transform: translateX(4px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.1);
    border-color: rgba(138, 11, 43, 0.25);
  }
}

/* ---------- Legal / Privacy Policy — matches company.html's section language ---------- */

.details-section { position: relative; isolation: isolate; }
.details-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 0% 0%, rgba(2, 132, 199, .05), transparent 55%),
    radial-gradient(38rem 28rem at 100% 100%, rgba(234, 88, 12, .05), transparent 55%);
}



/* ===== Former inline style="" attributes =====
   Moved here so the CSP can drop style-src 'unsafe-inline'. !important keeps
   the same precedence the inline styles had. */
.pb-120 { padding-bottom: 120px !important; }
.mt-28 { margin-top: 28px !important; }
.tint-crimson { background: var(--crimson-tint) !important; color: var(--crimson) !important; }
.tint-emerald { background: var(--emerald-tint) !important; color: var(--emerald) !important; }
.tint-blue { background: rgba(2, 132, 199, 0.1) !important; color: var(--blue) !important; }
.bg-soft-bordered { background: var(--bg) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
.tint-orange { background: rgba(234, 88, 12, 0.1) !important; color: var(--orange) !important; }
.pad-48-0-24 { padding: 48px 0 24px !important; }
.intro-title { font-size: var(--fs-24) !important; margin-bottom: 16px !important; color: var(--ink) !important; }
.intro-text-spaced { margin-bottom: 20px !important; font-size: var(--fs-16) !important; color: var(--t700) !important; line-height: 1.7 !important; }
.intro-text { font-size: var(--fs-16) !important; color: var(--t700) !important; line-height: 1.7 !important; }
.grid-gap-20 { display: grid !important; gap: 20px !important; }
.pad-24-rounded { padding: 24px !important; border-radius: var(--r-lg) !important; }
.kicker-crimson { color: var(--crimson) !important; font-size: var(--fs-15) !important; font-weight: 700 !important; margin-bottom: 8px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.note-text { font-size: var(--fs-14) !important; line-height: 1.5 !important; color: var(--t500) !important; }
.kicker-emerald { color: var(--emerald-text) !important; font-size: var(--fs-15) !important; font-weight: 700 !important; margin-bottom: 8px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.fit-contain { object-fit:contain !important; }
.partners-hero-title { margin:12px 0 14px !important; } /* room for the 54px title to sit on 2 lines; the lead paragraph keeps its own 620px cap */
.mb-28 { margin-bottom:28px !important; }
.stack-48 { display:flex !important; flex-direction:column !important; gap:48px !important; }
.product-card { background:#FFFFFF !important; border:1px solid var(--border) !important; border-radius:var(--r-panel) !important; padding:40px !important; box-shadow:0 12px 32px rgba(15, 23, 42, 0.04) !important; }
.flex-1 { flex:1 !important; }
.product-card-title { margin-bottom:12px !important; }
.product-card-lead { font-size: var(--fs-16) !important; color:var(--t500) !important; line-height:1.6 !important; margin-bottom:20px !important; }
.product-feature-list { list-style:none !important; padding:0 !important; margin:0 0 28px !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
.product-feature-item { display:flex !important; align-items:center !important; gap:10px !important; font-size: var(--fs-15) !important; color:var(--t700) !important; font-weight:500 !important; }
.icon-18 { width:18px !important; height:18px !important; flex-shrink:0 !important; }
.footer-note-light { margin-top:22px !important; font-size: var(--fs-13) !important; color:rgba(255,255,255,.8) !important; }

/* ---------- Heading system (single source of truth) ----------
   Every page title and every section heading shares one of two styles,
   so sections look the same wherever they appear. Kept last in the file
   so it wins over the older per-component sizes above. */
:root {
  --h1-size: clamp(34px, 2.8vw + 16px, 54px);
  --h2-size: clamp(30px, 2.4vw + 12px, 42px);
  --heading-color: var(--ink);
  --h3-size: 18px; /* card titles */
}
/* Page titles */
.hero-heading,
.page-header h1,
.contact-hero-text h1,
.platform-hero-content h1,
.partners-hero-title {
  font-size: var(--h1-size); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--heading-color);
  text-wrap: balance; /* even line lengths, no single-word last line */
}
/* Section headings */
.section-head h2,
.detail-row h2,
.who-card h2,
.product-card-title,
.journey-header h2,
.cta-box h2,
.connect-statement h2,
.connect-ribbon h2 {
  font-size: var(--h2-size); font-weight: 800; letter-spacing: -.025em; line-height: 1.18; color: var(--heading-color);
  text-wrap: balance; /* even line lengths, no single-word last line */
}
.cta-box h2, .connect-ribbon h2, .platform-hero-content h1 { color: #FFFFFF; }
/* Partners page section headings: smaller, framed by two fading hairlines
   (crimson left, emerald right); a short gradient underline instead on phones. */
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head { margin-bottom: 24px !important; }
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2 {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0;
  font-size: clamp(22px, 0.9vw + 15px, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::before,
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::after {
  content: ""; flex: 0 1 96px; height: 2px; border-radius: 2px;
}
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::before {
  background: linear-gradient(90deg, transparent, var(--crimson));
}
:is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::after {
  background: linear-gradient(90deg, var(--emerald), transparent);
}
@media (max-width: 720px) {
  :is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2 { display: block; }
  :is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::before { display: none; }
  :is(.banks-section, .telco-section, .regulators-section, .alliances-section) .section-head h2::after {
    display: block; width: 48px; height: 3px; margin: 12px auto 0;
    background: linear-gradient(90deg, var(--crimson), var(--emerald));
  }
}
/* the integration ribbon is a secondary strip under the vision statement: smaller heading */
.connect-ribbon h2 { font-size: clamp(22px, 1vw + 14px, 28px); }


/* ---------- Audit fixes (2026-10-21) ---------- */
/* Visible keyboard focus everywhere: crimson on light surfaces, white on the dark ones */
:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
:where(.platform-hero, .cta-box, .connect-ribbon, footer) :focus-visible { outline-color: #FFFFFF; }
.logos-marquee:focus-visible { outline-offset: -3px; }

/* Looping logo animations also pause on keyboard focus (Home strip) and on tap (both) */
.logos-marquee:focus-within .logos-row,
.logos-marquee.is-paused .logos-row,
.po-orbit.is-paused .po-ring,
.po-orbit.is-paused .po-spin { animation-play-state: paused; }

/* Pause / play for the rotating hero text, sitting after the slide dots */
.text-pause {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px;
  border: 1px solid #CBD5E1; border-radius: 50%; background: #FFFFFF; color: var(--t700); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.text-pause:hover { border-color: var(--crimson); color: var(--crimson); }
.text-pause svg { width: 12px; height: 12px; }
.text-pause .icon-play, .text-pause.is-paused .icon-pause { display: none; }
.text-pause.is-paused .icon-play { display: block; }
.text-pause[hidden] { display: none; }

/* Current page on the Contact page: the header button is the only nav item there */
.nav-contact-btn[aria-current="page"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--crimson); }

/* Narrow phones: the 44px menu button needs the header's gaps tightened (overflowed by 3px at 320px) */
@media (max-width: 440px) {
  .header-inner { gap: 8px; }
}

/* ---------- Card & panel system (single source of truth) ----------
   Cards = content boxes in a grid; panels = large framed areas. Shape, resting
   shadow and hover lift come from the tokens in :root, so every card matches. */
@media (max-width: 900px) { :root { --r-panel: 22px; } }
@media (max-width: 720px) { :root { --r-panel: 20px; } }
.stat-card, .scheme-card, .platform-card, .company-fig, .feature-card, .pillar-card, .who-card,
.contact-card, .office-card, .logo-card, .creds-group, .journey-card, .journey-v-card { border-radius: var(--r-card); }
.stat-card, .scheme-card, .platform-card, .company-fig, .feature-card, .pillar-card,
.contact-card, .office-card, .creds-group { border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.stat-card:hover, .scheme-card:hover, .platform-card:hover, .company-fig:hover, .feature-card:hover,
.pillar-card:hover, .contact-card:hover, .office-card:hover { transform: translateY(var(--lift)); }
.connect-card, .cta-box, .partner-panel, .journey-wrapper { border-radius: var(--r-panel); }

/* Card titles: one size everywhere */
.feature-card h3, .scheme-card h3, .platform-card :is(h3, h4), .contact-card h2, .office-top h3,
.creds-text :is(h3, h4), .capability-text h3, .regulator-text h3 { font-size: var(--h3-size); font-weight: 700; color: var(--heading-color); }

/* Small uppercase labels above headings / inside cards: one style */
.section-eyebrow, .pillar-label, .who-diff-title, .offices-title {
  font-size: var(--fs-13); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

/* Privacy "Contact Us" uses the slim call-to-action band; its two contact pills stack on the right */
.cta-slim .cta-contact-pills { flex-direction: column; align-items: stretch; gap: 10px; }
.cta-slim .footer-note-light { margin-top: 14px !important; }

/* Arrow icon used in buttons and links (replaces the \2192 character, which the bundled
   Inter subset lacks, so it no longer falls back to a different system font) */
.i-arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }

/* Footer tap targets: 44px social icons; footer links get a taller click area
   (36px with a mouse, the full 44px on phones) */
.social-icon-link { width: 44px; height: 44px; }
.social-icon-link svg { width: 18px; height: 18px; }
.footer-col ul { gap: 2px; }
.footer-col ul a, .footer-contact-item a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; }
.footer-contact-item:has(a) { align-items: center; }
.footer-contact-item:has(a) svg { margin-top: 0; }
@media (max-width: 720px) {
  .footer-col ul { gap: 0; }
  .footer-col ul a, .footer-contact-item a { min-height: 44px; }
}
.footer-brand > a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-bottom: 4px; }
.footer-brand > a .footer-logo { margin-bottom: 0; }