/* ==========================================================================
   Mandit Global — Modern Design System
   Dark, dimensional, motion-first. Plain CSS, no build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #fcfcf9;
  --bg-soft: #f5f5f1;
  --bg-elev: #ffffff;

  --surface: #ffffff;
  --surface-2: #f5f5f1;
  --border: rgba(10, 60, 130, 0.14);
  --border-strong: rgba(10, 60, 130, 0.26);

  --text: #12120e;
  --text-soft: #3b3b34;
  --muted: #585850;

  --brand: #0a3c82;
  --brand-2: #0e5aa8;
  /* Legacy alias: launchpad.css referenced var(--navy) before it was defined,
     which silently dropped the chip background. Keep it defined. */
  --navy: #0a3c82;
  --cyan: #0a7e43;
  --green-ink: #096a35;
  --lime: #35a86d;
  --amber: #9a4205;

  --grad-brand: linear-gradient(120deg, #0a3c82 0%, #0e5aa8 50%, #0a7e43 100%);
  --grad-warm: linear-gradient(120deg, #9a4205 0%, #d97706 100%);
  --grad-text: linear-gradient(100deg, #0a3c82 10%, #0e5aa8 45%, #0a7e43 90%);

  --glow-brand: 0 0 0 1px rgba(10, 60, 130, 0.25), 0 18px 60px -18px rgba(10, 60, 130, 0.35);
  --shadow-lg: 0 30px 70px -32px rgba(12, 32, 62, 0.28);
  --shadow-md: 0 18px 42px -24px rgba(12, 32, 62, 0.22);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --container: 1200px;
  --header-h: 78px;
  --topbar-h: 38px;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {box-sizing: border-box;  }

* {margin: 0; padding: 0;  }

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

body {background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; 
}

body::after {content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); 
}

img, svg, video, canvas {display: block; max-width: 100%;  }

a {color: inherit; text-decoration: none;  }

ul, ol {list-style: none;  }

button, input, textarea, select {font: inherit; color: inherit;  }

button {background: none; border: 0; cursor: pointer;  }

::selection {background: rgba(10, 60, 130, 0.38); color: #12120e;  }

/* Scrollbar */
::-webkit-scrollbar {width: 11px;  }
::-webkit-scrollbar-track {background: #f0f0ea;  }
::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #b9c8e4, #9fb4d6); border-radius: 20px; border: 3px solid #f0f0ea; 
}
::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #8fa7cd, #7b95c2);  }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5 {font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; color: #12120e; text-wrap: balance; 
}

h1 {font-size: clamp(2.5rem, 6.1vw, 4.6rem);  }
h2 {font-size: clamp(2rem, 4.2vw, 3.25rem);  }
h3 {font-size: clamp(1.35rem, 2.3vw, 1.75rem); letter-spacing: -0.02em;  }
h4 {font-size:0.7rem; letter-spacing: -0.012em;  }

p {color: var(--text-soft);  }
p + p {margin-top: 1rem;  }

strong {color: #12120e; font-weight: 600;  }

.lead {font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--text-soft); max-width: 62ch; 
}

.grad-text {background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

.grad-brand-text {background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

/* ---------- 4. Layout ---------- */
.container {width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; 
}

.container--wide {max-width: 1420px;  }

.section {position: relative; padding-block: clamp(72px, 9vw, 130px); 
}

.section--tight {padding-block: clamp(52px, 6vw, 84px);  }

.section-head {max-width: 780px; margin-bottom: clamp(38px, 5vw, 64px); 
}

.section-head--center {margin-inline: auto; text-align: center; 
}

.eyebrow {display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border: 1px solid var(--border); border-radius: 100px; background: linear-gradient(180deg, #ffffff, #f7f7f1); backdrop-filter: blur(12px); font-size:0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 22px; 
}

.eyebrow::before {content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulseDot 2.4s var(--ease) infinite; 
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.grid {display: grid; gap: 22px;  }
.grid--2 {grid-template-columns: repeat(2, 1fr);  }
.grid--3 {grid-template-columns: repeat(3, 1fr);  }
.grid--4 {grid-template-columns: repeat(4, 1fr);  }

.split {display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(34px, 5vw, 74px); align-items: center; 
}

.split--reverse .split__media {order: -1;  }

.divider {height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); border: 0; 
}

/* Reveal animations translate elements in from the side before they
   trigger. Those pre-animation offsets can push past the viewport and
   create a horizontal scrollbar, so clip the root and keep the side
   offsets subtle. */
html {
  overflow-x: clip;
}

[data-reveal="left"] {transform: translateX(-22px);  }
[data-reveal="right"] {transform: translateX(22px);  }

/* ---------- 5. Grid overflow guard ----------
   Grid children default to min-width:auto, so a wide child (an address
   line, a long unbroken string) pushes past the column and creates a
   horizontal scrollbar. Reset it on every layout grid. */
.grid > *,
.split > *,
.xp-grid > *,
.xp-split > * {
  min-width: 0;
}

.info-tile p,
.info-tile span {
  overflow-wrap: anywhere;
}

/* ---------- 6. Buttons ---------- */
.btn {position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 27px; border-radius: 100px; font-family: var(--font-display); font-size:0.7rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); overflow: hidden; isolation: isolate; 
}

.btn::after {content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #ffffff, transparent 62%); opacity: 0; transition: opacity 0.4s var(--ease); 
}

.btn:hover::after {opacity: 1;  }

.btn svg {width: 17px; height: 17px; flex: 0 0 auto; transition: transform 0.35s var(--ease);  }
.btn:hover svg {transform: translateX(4px);  }

.btn--primary {background: var(--grad-brand); color: #ffffff; box-shadow: 0 14px 40px -14px rgba(10, 60, 130, 0.75), inset 0 1px 0 rgba(10, 60, 130, 0.06); 
}

.btn--primary:hover {transform: translateY(-3px); box-shadow: 0 24px 55px -16px rgba(14, 90, 168, 0.9), inset 0 1px 0 rgba(10, 60, 130, 0.06); 
}

.btn--ghost {background: var(--surface); border-color: var(--border-strong); color: #12120e; backdrop-filter: blur(14px); 
}

.btn--ghost:hover {transform: translateY(-3px); background: rgba(10, 60, 130, 0.135); border-color: rgba(18, 18, 14, 0.525); 
}

.btn--light {background: #fff; color: var(--text); box-shadow: var(--shadow-md); 
}
.btn--light:hover {transform: translateY(-3px);  }

.btn--sm {padding: 11px 20px; font-size:0.7rem;  }
.btn--lg {padding: 18px 34px; font-size:0.7rem;  }
.btn--block {width: 100%;  }

.btn-row {display: flex; flex-wrap: wrap; gap: 14px; align-items: center;  }

.text-link {display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--font-display); color: #12120e; font-size:0.7rem; position: relative; 
}

.text-link span {background-image: linear-gradient(var(--cyan), var(--cyan)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; padding-bottom: 2px; transition: background-size 0.45s var(--ease); 
}

.text-link:hover span {background-size: 100% 1px;  }
.text-link svg {width: 15px; height: 15px; transition: transform 0.35s var(--ease);  }
.text-link:hover svg {transform: translateX(4px);  }

/* ---------- 6. Header ---------- */
.scroll-progress {position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--grad-brand); z-index: 200; box-shadow: 0 0 14px rgba(10, 60, 130, 0.9); 
}

.site-header {position: fixed; top: 0; left: 0; right: 0; z-index: 120; transition: background 0.45s var(--ease), backdrop-filter 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.5s var(--ease); border-bottom: 1px solid transparent; 
}

.site-header.is-stuck {background: rgba(252, 252, 249, 0.9); backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--border); 
}

.header__inner {height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; 
}

/* Top utility bar — brand slogan */
.topbar {height: var(--topbar-h); overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(10, 60, 130, 0.16), rgba(124, 58, 237, 0.11) 50%, rgba(10, 126, 67, 0.13)); transition: height 0.55s var(--ease), opacity 0.4s var(--ease), border-color 0.4s var(--ease); 
}

.site-header.is-stuck .topbar {height: 0; opacity: 0; border-color: transparent; 
}

.topbar__inner {height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size:0.7rem; 
}

.topbar__slogan {display: flex; align-items: center; gap: 9px; margin: 0; color: #dbe6ff; font-weight: 600; letter-spacing: 0.015em; white-space: nowrap; 
}

.topbar__slogan svg {width: 14px; height: 14px; color: var(--green-ink); flex: 0 0 auto;  }
.topbar__slogan em {font-style: normal; color: var(--green-ink);  }

.topbar__links {display: flex; align-items: center; gap: 10px; color: var(--muted); white-space: nowrap;  }
.topbar__links a {color: var(--text-soft); transition: color 0.3s var(--ease);  }
.topbar__links a:hover {color: #12120e;  }

@media (max-width: 900px) {
  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; }
}

@media (max-width: 620px) {
  .topbar__slogan { font-size:0.7rem; }
  .topbar__slogan svg { display: none; }
}

.brand {display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size:0.7rem; letter-spacing: -0.03em; color: #12120e; 
}

.brand__logo {height: 38px; width: auto; display: block; 
}

@media (max-width: 620px) { .brand__logo { height: 32px; } }

.brand__mark {width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand); display: grid; place-items: center; box-shadow: 0 10px 26px -10px rgba(10, 60, 130, 0.9), inset 0 1px 0 rgba(10, 60, 130, 0.06); flex: 0 0 auto; 
}

.brand__mark svg {width: 20px; height: 20px;  }

.brand small {display: block; font-family: var(--font-body); font-size:0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 1px; 
}

.nav__list {display: flex; align-items: center; gap: 4px;  }

.nav__link {position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 100px; font-size:0.7rem; font-weight: 500; color: var(--text-soft); transition: color 0.3s var(--ease), background 0.3s var(--ease); 
}

.nav__link:hover,
.nav__link[aria-current="page"] {color: #12120e; background: var(--surface-2);  }

.nav__link[aria-current="page"]::after {content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); 
}

.nav__link svg {width: 12px; height: 12px; transition: transform 0.3s var(--ease);  }
.has-mega:hover .nav__link svg {transform: rotate(180deg);  }

.has-mega {position: relative;  }

.mega {position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 12px); width: min(720px, 88vw); padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(26px) saturate(170%); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0.35s; 
}

.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-mega-open .mega {opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); 
}

/* Hover bridge — the panel is offset 16px below the trigger, so moving the
   pointer down into it crossed a dead zone and lost :hover, snapping the menu
   shut mid-move. This transparent strip covers the gap and keeps the hover
   chain alive so the panel can actually be reached and read. */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.mega__item {display: flex; gap: 13px; padding: 14px; border-radius: var(--r-md); border: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.35s var(--ease); 
}

.mega__item:hover {background: var(--surface-2); border-color: var(--border); transform: translateX(4px); 
}

.mega__icon {width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(10, 60, 130, 0.22), rgba(10, 126, 67, 0.08)); border: 1px solid var(--border); color: var(--green-ink); 
}
.mega__icon svg {width: 19px; height: 19px;  }

.mega__title {font-family: var(--font-display); font-weight: 600; font-size:0.7rem; color: #12120e;  }
.mega__desc {font-size:0.7rem; line-height: 1.5; color: var(--muted); margin-top: 2px;  }

.header__actions {display: flex; align-items: center; gap: 12px;  }

.nav-toggle {display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); position: relative; 
}

.nav-toggle span {position: absolute; left: 50%; width: 18px; height: 1.7px; border-radius: 2px; background: #fff; transform: translateX(-50%); transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), top 0.4s var(--ease); 
}
.nav-toggle span:nth-child(1) {top: 16px;  }
.nav-toggle span:nth-child(2) {top: 21px;  }
.nav-toggle span:nth-child(3) {top: 26px;  }

.nav-toggle.is-open span:nth-child(1) {top: 21px; transform: translateX(-50%) rotate(45deg);  }
.nav-toggle.is-open span:nth-child(2) {opacity: 0;  }
.nav-toggle.is-open span:nth-child(3) {top: 21px; transform: translateX(-50%) rotate(-45deg);  }

/* ---------- 7. Hero ---------- */
.hero {position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--topbar-h) + 44px); padding-bottom: 60px; overflow: hidden; isolation: isolate; 
}

#hero-globe {position: absolute; top: 12%; right: 0; bottom: -12%; left: 0; z-index: -2; opacity: 0; transition: opacity 1.4s var(--ease); 
}
#hero-globe.is-ready {opacity: 1;  }

/* The globe owns the pointer so it can be dragged; the hero copy stays
   selectable-free on purpose and the interactive parts opt back in. */
.hero__inner {pointer-events: none;  }
.hero__inner .float-panel,
.hero__inner .hero__cta a {pointer-events: auto;  }
.scroll-cue {pointer-events: none;  }

/* On a wide screen the globe sits behind the glass panel on the right */
@media (min-width: 1081px) {
  #hero-globe { left: auto; right: 0; width: 58%; }
}

.hero__glow {position: absolute; inset: -20% -10% auto; height: 90%; z-index: -3; background: radial-gradient(46% 60% at 18% 34%, rgba(10, 60, 130, 0.34), transparent 70%),
    radial-gradient(40% 55% at 82% 26%, rgba(124, 58, 237, 0.28), transparent 70%),
    radial-gradient(36% 50% at 60% 84%, rgba(10, 126, 67, 0.2), transparent 70%); filter: blur(14px); animation: floatGlow 16s ease-in-out infinite alternate; 
}

@keyframes floatGlow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, -26px, 0) scale(1.07); }
}

.hero__grid-lines {position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(10, 60, 130, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.045) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 30%, transparent 78%); 
}

.hero__inner {display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(36px, 5vw, 70px); align-items: center; width: 100%; 
}

.hero__title {margin-bottom: 24px;  }

.hero__lead {margin-bottom: 34px;  }

.hero__cta {margin-bottom: 34px;  }

.hero__proof {display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 26px; border-top: 1px solid var(--border); 
}

.hero__proof li {display: flex; align-items: center; gap: 9px; font-size:0.7rem; color: var(--text-soft); font-weight: 500; 
}

.hero__proof svg {width: 16px; height: 16px; color: var(--green-ink); flex: 0 0 auto; 
}

.scroll-cue {position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size:0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); 
}

.scroll-cue i {width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--brand), transparent); animation: cueRun 2.4s var(--ease) infinite; 
}

@keyframes cueRun {
  0% { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
  45% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0; }
}

/* Floating glass panel */
.float-panel {position: relative; padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--border-strong); background: linear-gradient(158deg, #ffffff, #fbfbf6 55%, #f7f7f1); backdrop-filter: blur(22px) saturate(160%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(10, 60, 130, 0.06); transform-style: preserve-3d; animation: floatPanel 8s ease-in-out infinite alternate; 
}

@keyframes floatPanel {
  from { transform: translateY(-8px); }
  to { transform: translateY(10px); }
}

.float-panel__glow {position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(10, 60, 130, 0.6), transparent 42%, rgba(10, 126, 67, 0.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; 
}

.float-panel__label {font-size:0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 600; 
}

.signal-row {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); 
}
.signal-row:last-of-type {border-bottom: 0;  }

.signal-row__name {display: flex; align-items: center; gap: 11px; font-size:0.7rem; color: var(--text); font-weight: 500;  }

.signal-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: 0 0 auto; 
}

.signal-bar {flex: 1; height: 5px; border-radius: 10px; background: rgba(10, 60, 130, 0.12); overflow: hidden; max-width: 120px; 
}

.signal-bar i {display: block; height: 100%; width: 100%; border-radius: 10px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease); will-change: transform; 
}

.signal-val {font-family: var(--font-display); font-weight: 600; font-size:0.7rem; color: #12120e; min-width: 44px; text-align: right; 
}

.mini-stat {margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; 
}

.mini-stat div {padding: 14px; border-radius: var(--r-sm); background: rgba(10, 60, 130, 0.06); border: 1px solid var(--border); 
}

.mini-stat b {display: block; font-family: var(--font-display); font-size:0.7rem; font-weight: 700; letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

.mini-stat span {font-size:0.7rem; color: var(--muted);  }

/* Globe controls, tucked under the panel stats */
.globe-hud {margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); 
}

.globe-hud__hint {font-size:0.7rem; line-height: 1.55; color: var(--muted); margin-bottom: 10px; 
}

.globe-hud__status {display: inline-block; font-size:0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 600; 
}

/* ---------- 8. Marquee ---------- */
.marquee {position: relative; overflow: hidden; padding-block: 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, #ffffff, #fbfbf6, #f7f7f1); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); 
}

.marquee__track {display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; 
}

.marquee:hover .marquee__track {animation-play-state: paused;  }

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

.marquee__item {display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size:0.7rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-soft); white-space: nowrap; transition: color 0.35s var(--ease); 
}

.marquee__item:hover {color: #12120e;  }
.marquee__item::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); opacity: 0.7; 
}

/* ---------- 9. Cards ---------- */
.card {position: relative; padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(170deg, #ffffff, #f7f7f1); backdrop-filter: blur(10px); overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); transform-style: preserve-3d; height: 100%; 
}

.card::before {content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(10, 60, 130, 0.16), transparent 62%); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; 
}

.card:hover {border-color: var(--border-strong); box-shadow: var(--shadow-md), 0 0 0 1px rgba(10, 60, 130, 0.16); 
}
.card:hover::before {opacity: 1;  }

.card__num {font-family: var(--font-display); font-size:0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--brand); margin-bottom: 14px; 
}

.card__icon {width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(150deg, rgba(10, 60, 130, 0.24), rgba(124, 58, 237, 0.1)); border: 1px solid var(--border-strong); color: #cfe0ff; box-shadow: inset 0 1px 0 rgba(10, 60, 130, 0.06); transition: transform 0.5s var(--ease), color 0.4s var(--ease); 
}
.card:hover .card__icon {transform: translateY(-4px) scale(1.06); color: var(--green-ink);  }
.card__icon svg {width: 24px; height: 24px;  }

.card h3 {margin-bottom: 11px;  }
.card p {font-size:0.7rem;  }

.card__list {margin-top: 18px; display: grid; gap: 9px;  }
.card__list li {display: flex; gap: 10px; font-size:0.7rem; color: var(--text-soft); 
}
.card__list li::before {content: ""; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--cyan); flex: 0 0 auto; 
}

/* Service link card */
.svc-card {display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--border); background: radial-gradient(110% 90% at 100% 0%, rgba(10, 60, 130, 0.14), transparent 60%),
    linear-gradient(170deg, #ffffff, #f7f7f1); transition: transform 0.55s var(--ease), border-color 0.55s var(--ease), box-shadow 0.55s var(--ease); height: 100%; overflow: hidden; position: relative; 
}

.svc-card:hover {transform: translateY(-8px); border-color: rgba(10, 60, 130, 0.5); box-shadow: 0 34px 70px -34px rgba(10, 60, 130, 0.75); 
}

.svc-card__tag {display: inline-flex; align-items: center; gap: 8px; font-size:0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-ink); font-weight: 700; margin-bottom: 18px; 
}

.svc-card h3 {font-size:0.7rem; margin-bottom: 12px;  }
.svc-card p {font-size:0.7rem;  }

.svc-card__foot {margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size:0.7rem; 
}

.svc-card__arrow {width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); transition: background 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s var(--ease); 
}
.svc-card:hover .svc-card__arrow {background: #fff; color: var(--text); transform: rotate(-45deg); 
}
.svc-card__arrow svg {width: 15px; height: 15px;  }

/* ---------- 10. Stats ---------- */
.stat {text-align: center; padding: 34px 20px; border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #f7f7f1); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); 
}
.stat:hover {transform: translateY(-6px); border-color: var(--border-strong);  }

.stat__num {font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

.stat__label {margin-top: 12px; font-size:0.7rem; color: var(--muted); line-height: 1.45; 
}

/* ---------- 11. Steps / Process ---------- */
.steps {display: grid; gap: 16px; counter-reset: step;  }

.step {position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(120deg, #ffffff, #f7f7f1); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); 
}

.step:hover {transform: translateX(6px); border-color: rgba(10, 60, 130, 0.4); background: linear-gradient(120deg, rgba(10, 60, 130, 0.1), #ffffff); 
}

.step__num {counter-increment: step; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size:0.7rem; color: #ffffff; background: var(--grad-brand); box-shadow: 0 12px 30px -14px rgba(10, 60, 130, 0.9); flex: 0 0 auto; 
}

.step__num::before {content: counter(step, decimal-leading-zero);  }

.step h3 {font-size:0.7rem; margin-bottom: 7px;  }
.step p {font-size:0.7rem;  }

/* Timeline vertical (timeline variant) */
.timeline {position: relative; padding-left: 32px;  }
.timeline::before {content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--brand), rgba(10, 126, 67, 0.35), transparent); 
}
.timeline__item {position: relative; padding-bottom: 34px;  }
.timeline__item:last-child {padding-bottom: 0;  }
.timeline__item::before {content: ""; position: absolute; left: -28px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); box-shadow: 0 0 14px rgba(10, 60, 130, 0.85); 
}
.timeline__item h4 {margin-bottom: 6px;  }
.timeline__item p {font-size:0.7rem;  }

/* ---------- 12. Pills / Tabs ---------- */
.pills {display: flex; flex-wrap: wrap; gap: 10px;  }

.pill {padding: 9px 17px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font-size:0.7rem; font-weight: 500; color: var(--text-soft); transition: all 0.35s var(--ease); 
}
.pill:hover {border-color: var(--border-strong); color: #12120e; transform: translateY(-2px);  }
.pill.is-active {background: var(--grad-brand); color: #ffffff; border-color: transparent;  }

/* ---------- 13. FAQ ---------- */
.faq {display: grid; gap: 14px;  }

.faq__item {border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(120deg, #ffffff, #f7f7f1); overflow: hidden; transition: border-color 0.45s var(--ease), background 0.45s var(--ease); 
}

.faq__item.is-open {border-color: rgba(10, 60, 130, 0.45); background: linear-gradient(120deg, rgba(10, 60, 130, 0.1), #ffffff); 
}

.faq__q {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; text-align: left; font-family: var(--font-display); font-size:0.7rem; font-weight: 600; color: #12120e; letter-spacing: -0.015em; 
}

.faq__icon {width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); position: relative; transition: background 0.4s var(--ease), transform 0.5s var(--ease); 
}
.faq__icon::before,
.faq__icon::after {content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); 
}
.faq__icon::before {width: 12px; height: 1.6px;  }
.faq__icon::after {width: 1.6px; height: 12px;  }
.is-open .faq__icon {background: var(--grad-brand); transform: rotate(90deg);  }
.is-open .faq__icon::after {opacity: 0;  }

.faq__a {display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); 
}
.is-open .faq__a {grid-template-rows: 1fr;  }

.faq__a > div {overflow: hidden;  }

.faq__a p {padding: 0 26px 24px; font-size:0.7rem; line-height: 1.72; 
}
.faq__a .usecase {display: block; margin: 14px 26px 24px; padding: 14px 18px; border-left: 2px solid var(--brand); border-radius: 0 12px 12px 0; background: rgba(10, 60, 130, 0.08); font-size:0.7rem; color: var(--text-soft); 
}
.faq__a .usecase b {color: var(--green-ink);  }

/* ---------- 14. CTA band ---------- */
.cta-band {position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--border-strong); padding: clamp(42px, 6vw, 82px); background: radial-gradient(80% 120% at 12% 0%, rgba(10, 60, 130, 0.28), transparent 60%),
    radial-gradient(70% 110% at 92% 100%, rgba(124, 58, 237, 0.26), transparent 60%),
    linear-gradient(150deg, #0c1020, #04182f); text-align: center; 
}

.cta-band::after {content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 60, 130, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.05) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%); pointer-events: none; 
}

.cta-band > * {position: relative; z-index: 1;  }
.cta-band h2 {margin-bottom: 18px;  }
.cta-band .lead {margin-inline: auto; margin-bottom: 32px;  }
.cta-band .btn-row {justify-content: center;  }

/* ---------- 15. Forms ---------- */
.form-card {padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-xl); border: 1px solid var(--border-strong); background: linear-gradient(165deg, #ffffff, #f7f7f1); backdrop-filter: blur(18px); box-shadow: var(--shadow-lg); 
}

.form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;  }

.field {display: grid; gap: 8px;  }
.field--full {grid-column: 1 / -1;  }

.field label {font-size:0.7rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-soft); 
}

.field input,
.field textarea,
.field select {width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: rgba(10, 60, 130, 0.053); color: #12120e; font-size:0.7rem; transition: border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease); 
}

.field textarea {min-height: 128px; resize: vertical;  }

.field input::placeholder,
.field textarea::placeholder {color: #5f677e;  }

.field input:focus,
.field textarea:focus,
.field select:focus {outline: none; border-color: rgba(10, 60, 130, 0.65); background: rgba(10, 60, 130, 0.07); box-shadow: 0 0 0 4px rgba(10, 60, 130, 0.12); 
}

.field select option {background: #ffffff; color: var(--text);  }

.check {display: flex; align-items: flex-start; gap: 11px; font-size:0.7rem; color: var(--muted); cursor: pointer; 
}

.check input {width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--brand); 
}

.form-note {font-size:0.7rem; color: var(--muted);  }

.form-status {margin-top: 14px; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid rgba(10, 126, 67, 0.4); background: rgba(10, 126, 67, 0.1); color: #b6f4ff; font-size:0.7rem; display: none; 
}
.form-status.is-visible {display: block;  }

/* Contact info tiles */
.info-tile {display: flex; gap: 16px; padding: 22px; border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(150deg, #ffffff, #f7f7f1); transition: transform 0.45s var(--ease), border-color 0.45s var(--ease); 
}
.info-tile:hover {transform: translateY(-4px); border-color: var(--border-strong);  }

.info-tile__icon {width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(10, 60, 130, 0.24), rgba(10, 126, 67, 0.08)); border: 1px solid var(--border); color: var(--green-ink); 
}
.info-tile__icon svg {width: 19px; height: 19px;  }

.info-tile small {display: block; font-size:0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; 
}

.info-tile a,
.info-tile p {font-size:0.7rem; color: #12120e; font-weight: 500;  }
.info-tile a:hover {color: var(--green-ink);  }

/* ---------- 16. Page hero (inner pages) ---------- */
.page-hero {position: relative; padding-top: calc(var(--header-h) + var(--topbar-h) + clamp(64px, 8vw, 104px)); padding-bottom: clamp(48px, 6vw, 80px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border); 
}

.page-hero::before {content: ""; position: absolute; inset: -30% -10% auto; height: 90%; z-index: -2; background: radial-gradient(42% 62% at 20% 34%, rgba(10, 60, 130, 0.34), transparent 70%),
    radial-gradient(36% 56% at 84% 24%, rgba(124, 58, 237, 0.26), transparent 70%); filter: blur(10px); 
}

.breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size:0.7rem; color: var(--muted); margin-bottom: 22px; 
}
.breadcrumb a {color: var(--text-soft); transition: color 0.3s var(--ease);  }
.breadcrumb a:hover {color: var(--green-ink);  }
.breadcrumb span[aria-hidden] {opacity: 0.4;  }

.page-hero__inner {max-width: 880px;  }
.page-hero h1 {margin-bottom: 22px;  }
.page-hero .lead {font-size: clamp(1.05rem, 1.6vw, 1.24rem); margin-bottom: 24px;  }

/* hero rhythm: the lead, the action buttons and the pill row are three
   separate groups and must not butt up against one another */
.pills {margin-top: 24px;  }

/* ---------- 17. Footer ---------- */
.site-footer {position: relative; margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #f5f5f1 45%); overflow: hidden; 
}

.site-footer::before {content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 90%; height: 100%; background: radial-gradient(50% 50% at 50% 50%, rgba(10, 60, 130, 0.16), transparent 70%); pointer-events: none; 
}

.footer__top {position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(30px, 4vw, 56px); padding-block: clamp(52px, 6vw, 76px); 
}

.footer__brand p {font-size:0.7rem; margin-top: 20px; max-width: 34ch;  }

.socials {display: flex; gap: 10px; margin-top: 24px;  }

.socials a {width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); transition: all 0.4s var(--ease); 
}
.socials a:hover {color: #ffffff; transform: translateY(-3px); background: var(--grad-brand); border-color: transparent; box-shadow: 0 12px 28px -12px rgba(10, 60, 130, 0.9); 
}
.socials svg {width: 17px; height: 17px;  }

.footer__col h4 {font-size:0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; font-family: var(--font-body); font-weight: 600; 
}

.footer__col ul {display: grid; gap: 12px;  }

.footer__col li,
.footer__col a {font-size:0.7rem; color: var(--text-soft);  }

.footer__col a {transition: color 0.3s var(--ease), transform 0.3s var(--ease); display: inline-block;  }
.footer__col a:hover {color: #12120e; transform: translateX(4px);  }

.footer__col address {font-style: normal; font-size:0.7rem; color: var(--text-soft); line-height: 1.62; 
}

.footer__bottom {position: relative; border-top: 1px solid var(--border); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size:0.7rem; color: var(--muted); 
}

.footer__legal {display: flex; flex-wrap: wrap; gap: 8px 20px;  }
.footer__legal a {transition: color 0.3s var(--ease);  }
.footer__legal a:hover {color: #12120e;  }

/* Newsletter strip */
.newsletter {position: relative; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; padding: 30px 34px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: linear-gradient(130deg, rgba(10, 60, 130, 0.14), rgba(124, 58, 237, 0.09)); margin-bottom: 0; 
}
.newsletter h3 {font-size:0.7rem; margin-bottom: 6px;  }
.newsletter p {font-size:0.7rem;  }

/* ---------- 18. Reveal animations ---------- */
[data-reveal] {opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 1s var(--ease);  }
[data-reveal="left"] {transform: translateX(-38px);  }
[data-reveal="right"] {transform: translateX(38px);  }
[data-reveal="scale"] {transform: scale(0.94);  }
[data-reveal].is-in {opacity: 1; transform: none;  }

/* Above-the-fold hero content is the Largest Contentful Paint element on
   every page. Fading it in from opacity 0 delays the paint, so the first
   screen of copy is visible from the first frame instead. The rest of the
   page keeps the scroll reveal. */
.hero__content [data-reveal],
.page-hero__inner [data-reveal] {opacity: 1; transform: none;  }

[data-delay="1"] {transition-delay: 0.09s;  }
[data-delay="2"] {transition-delay: 0.18s;  }
[data-delay="3"] {transition-delay: 0.27s;  }
[data-delay="4"] {transition-delay: 0.36s;  }
[data-delay="5"] {transition-delay: 0.45s;  }
[data-delay="6"] {transition-delay: 0.54s;  }

/* Floating orbs */
.orb {position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; opacity: 0.55; 
}

/* Back to top */
.to-top {position: fixed; right: 24px; bottom: 24px; z-index: 110; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); color: var(--brand); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all 0.45s var(--ease); 
}
.to-top.is-visible {opacity: 1; visibility: visible; transform: none;  }
.to-top:hover {background: var(--grad-brand); border-color: transparent;  }
.to-top svg {width: 18px; height: 18px;  }

/* Cursor glow */
.cursor-glow {position: fixed; top: 0; left: 0; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, rgba(10, 60, 130, 0.13), transparent 62%); transform: translate(-50%, -50%); transition: opacity 0.4s var(--ease); opacity: 0; mix-blend-mode: screen; 
}
@media (pointer: fine) { .cursor-glow { opacity: 1; } }

/* Media frames */
.media-frame {position: relative; border-radius: var(--r-xl); border: 1px solid var(--border-strong); overflow: hidden; background: linear-gradient(160deg, rgba(10, 60, 130, 0.14), #ffffff); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; display: grid; place-items: center; 
}

.media-frame img {width: 100%; height: 100%; object-fit: cover;  }

.media-frame--tall {aspect-ratio: 3 / 4;  }
.media-frame--wide {aspect-ratio: 16 / 10;  }

/* Mock dashboard visual (pure CSS 3D) */
.mock {width: 100%; padding: 18px; transform-style: preserve-3d; 
}

.mock__bar {display: flex; align-items: center; gap: 6px; margin-bottom: 16px; 
}
.mock__bar i {width: 9px; height: 9px; border-radius: 50%; background: rgba(10, 60, 130, 0.22);  }
.mock__bar i:first-child {background: #ff6b6b;  }
.mock__bar i:nth-child(2) {background: #ffd166;  }
.mock__bar i:nth-child(3) {background: #35a86d;  }

.mock__row {display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(10, 60, 130, 0.053); margin-bottom: 10px; 
}

.mock__avatar {width: 46px; height: 46px; border-radius: 12px; background: var(--grad-brand); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size:0.7rem; color: #ffffff; 
}

.mock__lines {display: grid; gap: 7px;  }
.mock__lines i {display: block; height: 8px; border-radius: 6px; background: rgba(10, 60, 130, 0.165); 
}
.mock__lines i:nth-child(2) {width: 62%; background: rgba(10, 60, 130, 0.105);  }
.mock__lines i:nth-child(1) {width: 84%;  }

.badge-float {position: absolute; padding: 26px 28px; min-height: 148px; min-width: 226px; border-radius: 20px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(10, 60, 130, 0.06); display: flex; align-items: center; gap: 16px; font-size:0.7rem; font-weight: 600; font-family: var(--font-display); color: #12120e; 
}

.badge-float > svg {width: 58px; height: 58px; padding: 16px; flex: 0 0 auto; border-radius: 17px; background: rgba(10, 60, 130, 0.105); border: 1px solid var(--border-strong); 
}

.badge-float > span {display: block;  }

.badge-float b {display: block; font-size:0.7rem; line-height: 1.1; letter-spacing: -0.03em; 
}

.badge-float small {display: block; font-size:0.7rem; color: var(--muted); font-weight: 500; font-family: var(--font-body); margin-top: 7px; letter-spacing: 0; 
}

.badge-float--tl {top: 18px; left: -14px; animation: floatPanel 7s ease-in-out infinite alternate;  }
.badge-float--br {bottom: 20px; right: -14px; animation: floatPanel 9s ease-in-out infinite alternate-reverse;  }

/* Blog cards */
.post-card {display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: linear-gradient(170deg, #ffffff, #f7f7f1); transition: transform 0.55s var(--ease), border-color 0.55s var(--ease), box-shadow 0.55s var(--ease); height: 100%; 
}
.post-card:hover {transform: translateY(-8px); border-color: rgba(10, 60, 130, 0.45); box-shadow: 0 34px 70px -34px rgba(10, 60, 130, 0.6); 
}

.post-card__media {aspect-ratio: 16 / 9; overflow: hidden; position: relative; background:
    linear-gradient(rgba(10, 60, 130, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.07) 1px, transparent 1px),
    linear-gradient(140deg, #f4f7fc, #eaf0f9); 
}
.post-card__media img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease);  }
.post-card:hover .post-card__media img {transform: scale(1.06);  }

.post-card__body {padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 12px;  }

.post-card__tag {font-size:0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); font-weight: 700; 
}

.post-card h3 {font-size:0.7rem; line-height: 1.3;  }
.post-card p {font-size:0.7rem;  }
.post-card .post-card__foot {margin-top: auto; padding-top: 16px;  }

/* Gradient placeholder for blog art */
.art {width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size:0.7rem; color: var(--brand); letter-spacing: -0.04em; 
}
.art--1 {background: linear-gradient(135deg, #e8f0fb, #e6f4ec); color: var(--brand);  }
.art--2 {background: linear-gradient(135deg, #eef3fb, #eaf3e9); color: var(--brand);  }
.art--3 {background: linear-gradient(135deg, #e6f4ec, #eef8f1); color: var(--green-ink);  }
.art--4 {background: linear-gradient(135deg, #fdf0e2, #fbe8ec); color: var(--amber);  }
.art--5 {background: linear-gradient(135deg, #e9eefb, #f0eafa); color: var(--brand);  }
.art--6 {background: linear-gradient(135deg, #e7f1f4, #e9eff8); color: #0b5c6b;  }

/* ---------- 18b. Data visualisations (SVG / CSS) ---------- */
.viz {position: relative; padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--border-strong); background: linear-gradient(160deg, #ffffff, #f7f7f1); backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(10, 60, 130, 0.06); overflow: hidden; transform-style: preserve-3d; 
}

.viz::before {content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 60, 130, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 80% at 70% 0%, #000, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 0%, #000, transparent 76%); pointer-events: none; 
}

.viz > * {position: relative;  }

.viz__head {display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; 
}

.viz__title {font-family: var(--font-display); font-weight: 600; font-size:0.7rem; color: #12120e; letter-spacing: -0.015em; 
}

.viz__live {display: inline-flex; align-items: center; gap: 7px; font-size:0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; 
}

.viz__live i {width: 7px; height: 7px; border-radius: 50%; background: #35a86d; box-shadow: 0 0 10px #35a86d; animation: pulseDot 1.9s var(--ease) infinite; 
}

.viz__chart {position: relative; width: 100%; height: 176px;  }
.viz__chart svg {width: 100%; height: 100%; overflow: visible;  }

.viz__grid line {stroke: rgba(255, 255, 255, 0.075); stroke-width: 1;  }

.viz__line {stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 2.1s var(--ease) 0.15s; 
}

.viz__area {opacity: 0; transition: opacity 1.1s var(--ease) 0.9s; 
}

.viz__dot {opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); 
}

.viz.is-in .viz__line,
[data-reveal].is-in .viz__line {stroke-dashoffset: 0;  }
.viz.is-in .viz__area,
[data-reveal].is-in .viz__area {opacity: 1;  }

.viz.is-in .viz__dot,
[data-reveal].is-in .viz__dot {opacity: 1; transform: scale(1);  }
.viz.is-in .viz__dot:nth-child(2),
[data-reveal].is-in .viz__dot:nth-child(2) {transition-delay: 0.85s;  }
.viz.is-in .viz__dot:nth-child(3),
[data-reveal].is-in .viz__dot:nth-child(3) {transition-delay: 1.35s;  }
.viz.is-in .viz__dot:nth-child(4),
[data-reveal].is-in .viz__dot:nth-child(4) {transition-delay: 1.75s;  }

.viz__tag {position: absolute; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); box-shadow: var(--shadow-md); font-family: var(--font-display); font-size:0.7rem; font-weight: 600; color: #12120e; white-space: nowrap; opacity: 0; transition: opacity 0.7s var(--ease) 1.5s, transform 0.7s var(--ease) 1.5s; transform: translateY(8px); 
}
.viz.is-in .viz__tag,
[data-reveal].is-in .viz__tag {opacity: 1; transform: none;  }
.viz__tag small {display: block; font-size:0.7rem; color: var(--muted); font-weight: 500; font-family: var(--font-body);  }

.viz__stages {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); 
}

.viz__stage {padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(10, 60, 130, 0.053); transition: transform 0.45s var(--ease), border-color 0.45s var(--ease); 
}
.viz__stage:hover {transform: translateY(-3px); border-color: var(--border-strong);  }
.viz__stage b {display: block; font-family: var(--font-display); font-size:0.7rem; font-weight: 700; letter-spacing: -0.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; 
}
.viz__stage span {font-size:0.7rem; color: var(--muted); line-height: 1.4; display: block; margin-top: 2px;  }

/* Animated bars */
.viz__bars {display: grid; gap: 16px;  }

.viz__bar-label {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size:0.7rem; color: var(--text-soft); margin-bottom: 8px; 
}
.viz__bar-label b {font-family: var(--font-display); color: #12120e; font-size:0.7rem;  }

.viz__bar-track {height: 9px; border-radius: 10px; background: rgba(10, 60, 130, 0.12); overflow: hidden; 
}
.viz__bar-track i {display: block; height: 100%; width: 0; border-radius: 10px; background: var(--grad-brand); transition: width 1.7s var(--ease) 0.2s; 
}
.viz.is-in .viz__bar-track i,
[data-reveal].is-in .viz__bar-track i {width: var(--w, 70%);  }

/* Radial score */
.viz__radial {display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;  }

.viz__ring {position: relative; width: 148px; height: 148px; flex: 0 0 auto;  }
.viz__ring svg {width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible;  }
.viz__ring circle {fill: none; stroke-width: 9; stroke-linecap: round;  }
.viz__ring .viz__ring-track {stroke: rgba(255, 255, 255, 0.09);  }
.viz__ring .viz__ring-prog {stroke: url(#vizRingGrad); stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 1.9s var(--ease) 0.25s; 
}
.viz.is-in .viz__ring-prog,
[data-reveal].is-in .viz__ring-prog {stroke-dashoffset: var(--offset, 70);  }

.viz__ring-label {position: absolute; inset: 0; display: grid; place-content: center; text-align: center; 
}
.viz__ring-label b {display: block; font-family: var(--font-display); font-size:0.7rem; font-weight: 700; letter-spacing: -0.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; 
}
.viz__ring-label span {font-size:0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; 
}

.viz__list {display: grid; gap: 12px;  }
.viz__list li {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size:0.7rem; color: var(--text-soft); 
}
.viz__list .viz__tick {width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 126, 67, 0.14); border: 1px solid rgba(10, 126, 67, 0.35); color: var(--green-ink); 
}
.viz__list .viz__tick svg {width: 12px; height: 12px;  }
.viz__list b {font-family: var(--font-display); color: #12120e; font-size:0.7rem;  }

/* Funnel */
.viz__funnel {display: grid; gap: 10px;  }
.viz__funnel-row {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(90deg, rgba(10, 60, 130, 0.16), rgba(124, 58, 237, 0.06)); opacity: 0; transform: translateX(-16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); 
}
.viz.is-in .viz__funnel-row,
[data-reveal].is-in .viz__funnel-row {opacity: 1; transform: none;  }
.viz.is-in .viz__funnel-row:nth-child(2),
[data-reveal].is-in .viz__funnel-row:nth-child(2) {transition-delay: 0.14s;  }
.viz.is-in .viz__funnel-row:nth-child(3),
[data-reveal].is-in .viz__funnel-row:nth-child(3) {transition-delay: 0.28s;  }
.viz.is-in .viz__funnel-row:nth-child(4),
[data-reveal].is-in .viz__funnel-row:nth-child(4) {transition-delay: 0.42s;  }

.viz__funnel-row:nth-child(1) {width: 100%;  }
.viz__funnel-row:nth-child(2) {width: 88%;  }
.viz__funnel-row:nth-child(3) {width: 76%;  }
.viz__funnel-row:nth-child(4) {width: 64%;  }

.viz__funnel-row span {font-size:0.7rem; color: #12120e; font-weight: 500;  }
.viz__funnel-row b {font-family: var(--font-display); font-size:0.7rem; color: var(--green-ink); 
}

@media (max-width: 620px) {
  .viz { padding: 20px; }
  .viz__radial { grid-template-columns: 1fr; }
  .viz__ring { margin-inline: auto; }
  .viz__stages { grid-template-columns: 1fr 1fr; }
  .viz__funnel-row:nth-child(n) { width: 100%; }
}

/* ---------- 18c. 3D process engine ---------- */
.engine {position: relative;  }

.engine__scene {position: relative; height: clamp(400px, 60vh, 580px); margin-top: clamp(28px, 4vw, 46px); border-radius: var(--r-xl); border: 1px solid var(--border-strong); overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 50% -10%, rgba(10, 60, 130, 0.2), transparent 62%),
    radial-gradient(60% 90% at 92% 112%, rgba(10, 126, 67, 0.13), transparent 66%),
    linear-gradient(160deg, #04182f, #04182f); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(10, 60, 130, 0.06); cursor: crosshair; 
}

#engine-3d {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; 
}

.engine__grid {position: absolute; left: -12%; right: -12%; bottom: -24%; height: 74%; z-index: 0; background-image: linear-gradient(rgba(10, 60, 130, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.32) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(460px) rotateX(66deg); transform-origin: bottom center; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); opacity: 0.55; pointer-events: none; 
}

.engine__scan {position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; 
}

/* The sweep is a separate layer moved with a transform: animating
   background-position forces a repaint on every frame, while a transform
   stays on the compositor thread. */
.engine__scan::before {content: ""; position: absolute; left: 0; right: 0; top: -31%; height: 31%; background-image: linear-gradient(180deg, transparent 0%, rgba(10, 60, 130, 0.14) 50%, transparent 100%); background-repeat: no-repeat; animation: scanSweep 7s ease-in-out infinite; will-change: transform; 
}

@keyframes scanSweep {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 425%, 0); }
}

.engine__tabs {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; 
}

.engine__tabs .pill {padding: 11px 20px; font-size:0.7rem; font-family: var(--font-display); font-weight: 600; cursor: pointer; 
}

.engine__tabs .pill.is-active {box-shadow: 0 14px 34px -14px rgba(10, 60, 130, 0.9); 
}

.engine__panels {position: absolute; inset: 0; z-index: 3; pointer-events: none;  }

.engine__panel {position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; 
}

.engine__panel.is-active {opacity: 1; visibility: visible;  }

.engine__label {position: absolute; top: 0; left: 0; padding: 11px 15px; border-radius: 13px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px) saturate(150%); font-family: var(--font-display); color: #12120e; white-space: nowrap; opacity: 0; transition: opacity 0.6s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease); will-change: transform; 
}

.engine__label b {display: block; font-size:0.7rem; letter-spacing: 0.22em; color: var(--brand); margin-bottom: 3px; transition: color 0.4s var(--ease); 
}

.engine__label em {display: block; font-style: normal; font-size:0.7rem; font-weight: 600; letter-spacing: -0.012em; 
}

.engine__label small {display: block; font-size:0.7rem; color: var(--muted); font-weight: 500; font-family: var(--font-body); margin-top: 3px; 
}

.engine__label.is-visible {opacity: 0.6;  }

.engine__label.is-active {opacity: 1; background: #ffffff; border-color: rgba(10, 126, 67, 0.55); box-shadow: 0 0 0 1px rgba(10, 60, 130, 0.3), 0 20px 44px -20px rgba(10, 60, 130, 0.95); 
}

.engine__label.is-active b {color: var(--green-ink);  }

.engine__rail {position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); 
}

.engine__dot {width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 60, 130, 0.22); transition: all 0.45s var(--ease); 
}
.engine__dot.is-active {background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform: scale(1.5); 
}

.engine__noscript {position: absolute; inset: 50% 0 auto; text-align: center; color: var(--muted); font-size:0.7rem; padding-inline: 20px; 
}

.engine__steps {position: relative; margin-top: clamp(24px, 3vw, 36px); 
}

.engine__steps-group {counter-reset: step; display: none; grid-template-columns: repeat(4, 1fr); gap: 16px; 
}

.engine__steps-group.is-active {display: grid; animation: groupIn 0.6s var(--ease) both;  }

.engine__steps-group.is-active .step:nth-child(1) {animation: groupIn 0.6s var(--ease) 0.05s both;  }
.engine__steps-group.is-active .step:nth-child(2) {animation: groupIn 0.6s var(--ease) 0.14s both;  }
.engine__steps-group.is-active .step:nth-child(3) {animation: groupIn 0.6s var(--ease) 0.23s both;  }
.engine__steps-group.is-active .step:nth-child(4) {animation: groupIn 0.6s var(--ease) 0.32s both;  }

@keyframes groupIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.engine__steps-group .step {grid-template-columns: 1fr; gap: 16px; padding: 26px;  }
.engine__steps-group .step:hover {transform: translateY(-5px);  }

@media (max-width: 900px) { .engine__steps-group { grid-template-columns: 1fr 1fr; } }

@media (max-width: 620px) {
  .engine__steps-group { grid-template-columns: 1fr; }
  .engine__scene { height: 360px; }
  .engine__label { padding: 9px 12px; }
  .engine__label small { display: none; }
  .engine__rail { bottom: 12px; }
  .engine__tabs .pill { padding: 9px 15px; font-size:0.7rem; }
}

/* ---------- 19. Utilities ---------- */
.center {text-align: center;  }
.mx-auto {margin-inline: auto;  }
.mt-0 {margin-top: 0;  }
.mt-1 {margin-top: 12px;  }
.mt-2 {margin-top: 22px;  }
.mt-3 {margin-top: 34px;  }
.mt-4 {margin-top: 48px;  }
.mb-2 {margin-bottom: 22px;  }
.mb-3 {margin-bottom: 34px;  }
.max-60 {max-width: 60ch;  }
.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 {position: absolute; top: -60px; left: 16px; z-index: 999; padding: 12px 20px; border-radius: 0 0 12px 12px; background: var(--brand); color: #ffffff; font-weight: 600; transition: top 0.3s var(--ease); 
}
.skip-link:focus {top: 0;  }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: block; }

  .nav.is-open {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(252, 252, 249, 0.98);
    backdrop-filter: blur(24px);
    padding: 26px 24px 60px;
    overflow-y: auto;
    z-index: 118;
    animation: navIn 0.4s var(--ease);
  }

  @keyframes navIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
  }

  .nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 6px; }
  .nav.is-open .nav__link {
    padding: 16px 18px;
    font-size:0.7rem;
    border-radius: 14px;
    justify-content: space-between;
  }
  .nav.is-open .mega {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    grid-template-columns: 1fr;
    box-shadow: none;
    background: #ffffff;
    margin-top: 8px;
    display: none;
  }
  .nav.is-open .has-mega.is-expanded .mega { display: grid; }

  .hero__inner { grid-template-columns: 1fr; }
  .float-panel { max-width: 460px; }
  .menu-cta { margin-top: 18px; }
}

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--topbar-h) + 34px); }
  .header__actions .btn { display: none; }
  .scroll-cue { display: none; }
  .card, .svc-card { padding: 24px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .badge-float--tl, .badge-float--br { display: none; }
  .to-top { right: 16px; bottom: 16px; }
  /* The horizontal reveal offsets push text past the left edge on a phone
     (the page clips horizontally, so the first characters are lost). Keep a
     small offset that still reads as motion but never leaves the viewport. */
  [data-reveal="left"] { transform: translateX(-12px); }
  [data-reveal="right"] { transform: translateX(12px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cursor-glow { display: none; }
}

/* Print */
@media print {
  .site-header, .to-top, .cursor-glow, .scroll-progress, #hero-globe { display: none !important; }
  body { background: #fff; color: #000; }
}