/* ============================================================
   Kofitek Solutions — site styles

   Every colour, radius and font comes from CSS custom properties that
   site.js writes from the editable theme. Changing the brand colour in the
   editor must not require touching this file.

   Built mobile-first and deliberately light: the audience is on Ghanaian
   mobile data, where a 2 MB framework is a bounced visitor.
   ============================================================ */

:root {
  --primary: #0b5fd4;
  --accent: #e11d2e;
  --ink: #0d1520;
  --bg: #ffffff;
  --bg-alt: #f3f7fc;
  --radius: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --muted: color-mix(in srgb, var(--ink) 62%, transparent);
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --card: #fff;
  --shadow: 0 1px 2px rgba(13,21,32,.05), 0 12px 32px -12px rgba(13,21,32,.16);
  --shadow-lg: 0 2px 6px rgba(13,21,32,.06), 0 30px 60px -24px rgba(13,21,32,.28);
  --maxw: 1160px;
}

[data-dark="1"] {
  --ink: #e8edf5;
  --bg: #0b1017;
  --bg-alt: #111926;
  --card: #131c29;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --muted: color-mix(in srgb, var(--ink) 60%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip {
  position: absolute; left: -9999px; top: 8px; background: var(--primary); color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 200;
}
.skip:focus { left: 12px; }

/* ---------------- splash ---------------- */
#splash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: linear-gradient(160deg, #0b5fd4 0%, #084298 55%, #06306e 100%);
  transition: opacity .45s ease, visibility .45s;
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-inner { text-align: center; color: #fff; }
.sp-mark {
  position: relative; width: 96px; height: 96px; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); border-radius: 26px;
  font: 800 46px/1 var(--font); letter-spacing: -1px;
  animation: spPop .6s cubic-bezier(.2,.9,.25,1.2) both;
}
.sp-ring {
  position: absolute; inset: -12px; border-radius: 34px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spSpin 1s linear infinite;
}
.sp-name { font-weight: 700; font-size: 19px; letter-spacing: .2px; opacity: .96;
  animation: spFade .5s .15s both; }
.sp-bar { width: 132px; height: 3px; margin: 18px auto 0; border-radius: 99px;
  background: rgba(255,255,255,.22); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: #fff;
  animation: spSlide 1.1s ease-in-out infinite; }
@keyframes spPop { from { transform: scale(.7); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes spSpin { to { transform: rotate(360deg) } }
@keyframes spFade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes spSlide { 0% { transform: translateX(-110%) } 100% { transform: translateX(260%) } }

/* ---------------- header ---------------- */
#hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
#hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(13,21,32,.5); }
.hdr-in { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
  color: #fff; font-weight: 800; font-size: 20px; flex: 0 0 auto;
  background-size: cover; background-position: center;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 17px; letter-spacing: -.2px; }
.brand-txt i { font-style: normal; font-size: 11px; color: var(--muted); }
#nav { display: flex; gap: 4px; margin-left: auto; }
#nav a {
  text-decoration: none; padding: 9px 14px; border-radius: 10px; font-size: 15px;
  font-weight: 550; color: var(--muted); transition: background .15s, color .15s;
}
#nav a:hover, #nav a.on { background: var(--bg-alt); color: var(--ink); }
.hdr-cta { display: flex; gap: 8px; }
.burger { display: none; background: none; border: 0; width: 42px; height: 42px;
  border-radius: 10px; cursor: pointer; }
.burger span { display: block; height: 2px; width: 20px; margin: 4px auto; background: var(--ink);
  border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer { border-top: 1px solid var(--line); background: var(--bg); padding: 10px 20px 18px; }
.drawer a { display: block; padding: 13px 4px; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 14px; width: 100%; }

@media (max-width: 900px) {
  #nav, .hdr-cta { display: none; }
  .burger { display: block; margin-left: auto; }
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  background: var(--primary); color: #fff; font: inherit; font-weight: 650;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform .12s ease, box-shadow .2s ease, background .2s;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 80%, transparent);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--primary) 85%, transparent); }
.btn:active { transform: none; }
.btn.sm { padding: 9px 16px; font-size: 14.5px; border-radius: 10px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-alt); box-shadow: none; }
.btn-accent { background: var(--accent); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-white { background: #fff; color: var(--primary); }

/* ---------------- sections ---------------- */
section { padding: 84px 0; }
section.alt { background: var(--bg-alt); }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 6px 12px; border-radius: 99px; margin-bottom: 14px;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
h1 { font-size: clamp(32px, 6vw, 54px); font-weight: 800; }
h2 { font-size: clamp(26px, 4.2vw, 38px); font-weight: 750; }
h3 { font-size: 18.5px; font-weight: 680; }
.lead { font-size: clamp(16.5px, 2.2vw, 19px); color: var(--muted); max-width: 62ch; }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.center { text-align: center; margin-inline: auto; }

/* ---------------- hero ---------------- */
#hero {
  position: relative; overflow: hidden; padding: 92px 0 88px;
  background:
    radial-gradient(900px 460px at 88% -10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 60%),
    radial-gradient(700px 420px at 4% 108%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    var(--bg);
}
#hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(720px 400px at 70% 20%, #000, transparent 75%);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 52px;
  grid-template-columns: 1.08fr .92fr; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-stats { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.hero-stats span { font-size: 13.5px; color: var(--muted); }

/* the device mock */
.mock { position: relative; padding: 0 8px; }
.mock-phone {
  position: relative; z-index: 1;
  width: min(300px, 78vw); margin-inline: auto; aspect-ratio: 9/18.6;
  background: linear-gradient(150deg, #182233, #0b1017);
  border-radius: 34px; padding: 9px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08); animation: floaty 7s ease-in-out infinite;
}
.mock-screen { width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
  background: var(--card); display: flex; flex-direction: column; }
.mock-bar { background: var(--primary); color: #fff; padding: 13px 14px; font-size: 12.5px; font-weight: 700; }
.mock-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.mock-row { height: 34px; border-radius: 9px; background: var(--bg-alt);
  display: flex; align-items: center; padding: 0 11px; font-size: 11.5px; color: var(--muted); gap: 8px; }
.mock-row b { margin-left: auto; color: var(--ink); font-size: 11.5px; }
.mock-total { margin-top: auto; background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 11px; padding: 11px; display: flex; justify-content: space-between;
  font-weight: 800; font-size: 14px; }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }
/* The chips carry their own translateX, so they need an animation that only
   touches the vertical axis — otherwise the keyframe resets their position. */
@keyframes floatyY { 0%,100% { translate: 0 0 } 50% { translate: 0 -11px } }
.mock-chip { animation-name: floatyY !important; }
.mock-chip {
  position: absolute; background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px;
  font-weight: 650; display: flex; align-items: center; gap: 8px;
}
/* Positioned against the PHONE, not the grid column. Anchoring them to the
   column edge pushed them outside it, and #hero has overflow:hidden, so both
   chips were sliced in half — caught in the first screenshot review. */
/* Anchored to the phone's own edges and lifted ABOVE it. The first attempt
   centred them on the column, which put them behind the handset — visible
   only by reading the screenshot, which is why every visual change here gets
   looked at rather than assumed. */
.mock-chip.a { top: 15%; right: calc(50% + 118px); z-index: 3;
  animation: floaty 6s ease-in-out infinite .4s; }
.mock-chip.b { bottom: 19%; left: calc(50% + 118px); z-index: 3;
  animation: floaty 6.6s ease-in-out infinite .9s; }
@media (max-width: 1180px) {
  .mock-chip.a { right: calc(50% + 104px); }
  .mock-chip.b { left: calc(50% + 104px); }
}
@media (max-width: 940px) { .mock-chip { display: none; } }

/* ---------------- cards ---------------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: transform .18s ease, box-shadow .22s ease, border-color .2s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); }
.card .ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
}
.card p { color: var(--muted); margin: 0; font-size: 15.2px; }
.card .more { font-size: 14px; color: var(--muted); margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--line); }

/* why-us */
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-item .ico { width: 42px; height: 42px; font-size: 20px; border-radius: 12px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--primary) 11%, transparent); }
.why-item h3 { margin: 0 0 3px; font-size: 16.5px; }
.why-item p { margin: 0; font-size: 14.6px; color: var(--muted); }

/* ---------------- product ---------------- */
#product { background:
  linear-gradient(160deg, color-mix(in srgb, var(--primary) 96%, #000) 0%, color-mix(in srgb, var(--primary) 72%, #000) 100%);
  color: #fff; }
#product .lead, #product p { color: rgba(255,255,255,.86); }
#product .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
#product .card { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); color: #fff; }
#product .card:hover { border-color: rgba(255,255,255,.4); }
#product .card .ico { background: rgba(255,255,255,.15); }
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-name { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.prod-name b { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.prod-name span { font-size: 12.5px; background: rgba(255,255,255,.18); padding: 5px 11px;
  border-radius: 99px; font-weight: 650; }

/* ---------------- work ---------------- */
.work-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.work-img { aspect-ratio: 16/10; background: var(--bg-alt); display: grid; place-items: center;
  font-size: 40px; color: var(--muted); background-size: cover; background-position: center; }
.work-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.tag { font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 11%, transparent); color: var(--primary); }
.work-res { margin-top: auto; padding-top: 14px; font-size: 14px;
  color: color-mix(in srgb, var(--primary) 90%, var(--ink)); font-weight: 600; }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
.cinfo { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 22px; }
.cinfo .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 11%, transparent); font-size: 19px; flex: 0 0 auto; }
.cinfo b { display: block; font-size: 15px; }
.cinfo a, .cinfo span { color: var(--muted); text-decoration: none; font-size: 15px; }
.cinfo a:hover { color: var(--primary); }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 15.5px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.field textarea { min-height: 132px; resize: vertical; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.note { padding: 14px 16px; border-radius: 12px; font-size: 14.5px; margin-top: 14px; }
.note.ok { background: color-mix(in srgb, #16a34a 13%, transparent); color: #15803d; }
.note.err { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }

/* ---------------- footer ---------------- */
#foot { background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 56px 0 32px; font-size: 14.6px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 34px; margin-bottom: 30px; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
#foot h4:not(.f-col h4) { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 13px; }
/* v1.2.2 — scoped with :not() so it no longer overrides the icon+text rows
   added below. An ID selector outranks a class, so those links were being
   forced to display:block and the icon wrapped onto its own line. Fixing the
   over-broad rule beats escalating to !important. */
#foot a:not(.f-links a):not(.f-txt a):not(.fb):not(.socials a) {
  color: var(--muted); text-decoration: none; display: block; padding: 4px 0; }
#foot a:hover { color: var(--primary); }
.socials { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.socials a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); font-size: 17px; padding: 0;
  transition: transform .15s, border-color .15s; }
.socials a:hover { transform: translateY(-2px); border-color: var(--primary); }
.foot-btm { border-top: 1px solid var(--line); padding-top: 22px; display: flex;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }

/* ---------------- floating actions ---------------- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 19px; cursor: pointer; box-shadow: var(--shadow); z-index: 90;
  touch-action: manipulation;
}
.wa-float {
  position: fixed; right: 18px; bottom: 74px; width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center; font-size: 25px;
  box-shadow: 0 10px 28px -8px rgba(37,211,102,.6); z-index: 90; text-decoration: none;
  touch-action: manipulation;
}

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(var(--rv-shift, 16px));
  transition: opacity var(--rv-ms, 520ms) cubic-bezier(.22,.61,.36,1),
              transform var(--rv-ms, 520ms) cubic-bezier(.22,.61,.36,1); }
.rv.in { opacity: 1; transform: none; }

/* The transition style is a choice in the editor. Each one only changes the
   STARTING position — the finished state is always the same, so a half-
   finished animation can never leave the page looking wrong. */
[data-transition="slide"] .rv { transform: translateX(-24px); }
[data-transition="slide"] .rv:nth-child(even) { transform: translateX(24px); }
[data-transition="zoom"]  .rv { transform: scale(.96); }
[data-transition="rise"]  .rv { transform: translateY(var(--rv-shift, 16px)) scale(.985); }
[data-transition="slide"] .rv.in,
[data-transition="zoom"]  .rv.in,
[data-transition="rise"]  .rv.in { transform: none; }

/* 'off' must be inert, not merely fast: leaving opacity:0 on an element whose
   observer never fires is how a section disappears for ever. */
[data-motion="off"] .rv { opacity: 1 !important; transform: none !important;
  transition: none !important; }
[data-motion="lively"] .btn:hover { transform: translateY(-2px); }
[data-motion="lively"] .svc:hover { transform: translateY(-4px); }
[data-motion="off"] .btn:hover, [data-motion="off"] .svc:hover { transform: none; }

/* The scroll button flips to point downwards near the top of the page. */
.to-top.down { transform: rotate(0deg); }
.to-top[hidden] { display: none; }


/* ---- an uploaded splash logo sits inside the ring ---- */
#splash .sp-mark img { display: block; }


/* ============================================================
   v1.2.2 — icons, infographics, and a footer that labels itself.
   ============================================================ */

/* ---- the icon primitive ----
   currentColor everywhere, so an icon takes the colour of whatever it sits
   in and never needs a second rule per context. */
.ic { display: block; flex: 0 0 auto; }

/* ---- services: numbered cards with a hover affordance ---- */
.svc { position: relative; overflow: hidden; }
.svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.svc-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.svc-no {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: color-mix(in srgb, var(--ink) 26%, transparent);
  font-variant-numeric: tabular-nums;
}
.svc-go {
  position: absolute; right: 16px; bottom: 14px; color: var(--primary);
  opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease;
}
.svc:hover .svc-ico { background: var(--primary); color: #fff; transform: scale(1.04); }
.svc:hover .svc-go { opacity: 1; transform: none; }

/* ---- why: icon tiles ---- */
.why-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  flex: 0 0 auto; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ---- the stat band ----
   Four figures in one strip. Deliberately NOT cards: the page already has
   three card grids and a fourth would read as more of the same. */
.statband {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 34px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.stat-c { background: var(--card); padding: 20px 18px; text-align: center; }
.stat-i {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 10px;
  border-radius: 11px; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.stat-c b { display: block; font-size: 27px; line-height: 1.1; letter-spacing: -.02em; }
.stat-c .stat-l { display: block; font-size: 13.5px; font-weight: 650; margin-top: 3px; }
.stat-c i { display: block; font-style: normal; font-size: 12.4px; color: var(--muted); margin-top: 3px; }

/* ---- the process flow ----
   A connecting line behind the dots, drawn with a pseudo-element rather than
   a background image so it themes and needs no asset. */
.flow { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.flow::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 27px; height: 2px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--primary) 32%, transparent) 12%,
    color-mix(in srgb, var(--primary) 32%, transparent) 88%, transparent);
}
.flow-step { position: relative; text-align: center; padding: 0 6px; }
.flow-dot {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 14px; color: #fff; background: var(--primary);
  box-shadow: 0 0 0 6px var(--bg-alt), 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent);
  position: relative; z-index: 1;
}
.flow-n { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 5px; }
.flow-step h3 { margin: 0 0 5px; font-size: 16.5px; }
.flow-step p { margin: 0; font-size: 14.4px; color: var(--muted); }

/* ---- footer ---- */
.f-note { color: var(--muted); max-width: 36ch; margin: 0 0 14px; font-size: 14.6px; }
.f-badges { list-style: none; margin: 0 0 4px; padding: 0; display: flex;
  flex-wrap: wrap; gap: 8px; }
.f-badges li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.6px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 11px;
}
#foot .f-col h4, .f-col h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.f-col h4 .ic { color: var(--primary); }
.f-links, .f-rows { list-style: none; margin: 0; padding: 0; }
.f-links li { margin-bottom: 2px; }
#foot .f-links a, .f-links a {
  /* flex-start, not center: a label that wraps to two lines would otherwise
     pull the icon down to the middle and it reads as a stray bullet.
     The small padding-top optically centres it on the first line. */
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 0;
  color: var(--muted); font-size: 14.6px; text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}
.f-links a .ic { color: color-mix(in srgb, var(--ink) 34%, transparent);
  transition: color .16s ease; margin-top: 3px; }
.f-links a:hover { color: var(--ink); transform: translateX(3px); }
.f-links a:hover .ic { color: var(--primary); }

.f-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.f-ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid;
  place-items: center; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.f-txt { display: flex; flex-direction: column; min-width: 0; }
.f-txt i { font-style: normal; font-size: 11.4px; letter-spacing: .05em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 45%, transparent); }
#foot .f-txt a, .f-txt a, .f-txt b {
  font-size: 14.6px; font-weight: 600; color: var(--ink); text-decoration: none;
  word-break: break-word;
}
.f-txt a:hover { color: var(--primary); text-decoration: underline; }

.foot-btm { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
#foot .fb, .fb { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--muted); text-decoration: none; }
.fb .ic { color: color-mix(in srgb, var(--ink) 32%, transparent); }
.fb-top { margin-left: auto; }
.fb-top .ic { transform: rotate(-90deg); transition: transform .18s ease; }
.fb-top:hover { color: var(--primary); }
.fb-top:hover .ic { color: var(--primary); transform: rotate(-90deg) translateX(3px); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .flow { grid-template-columns: 1fr 1fr; gap: 28px; }
  .flow::before { display: none; }
  .statband { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .flow { grid-template-columns: 1fr; }
  .flow-step { text-align: left; display: grid; grid-template-columns: 54px 1fr;
    gap: 0 14px; align-items: start; }
  .flow-dot { margin: 0; grid-row: span 3; }
  .statband { grid-template-columns: 1fr 1fr; }
  .stat-c { padding: 16px 12px; }
  .stat-c b { font-size: 23px; }
  .fb-top { margin-left: 0; }
}

/* Motion off must not leave a hover-only affordance unreachable. */
[data-motion="off"] .svc-go { opacity: 1; transform: none; }
[data-motion="off"] .svc:hover .svc-ico { transform: none; }


/* v1.2.2 — found by reading the rendered footer. */

/* A single social bubble with no context reads as an orphan. Give the row a
   label so it is obviously a list of links. */
.socials { position: relative; padding-top: 22px; }
.socials::before {
  content: 'Follow us'; position: absolute; top: 0; left: 2px;
  font-size: 11.4px; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}