/* ==========================================================================
   LeapForce — token + component layer
   Values transcribed verbatim from LeapForce.fig. Order:
   1 tokens · 2 base · 3 layout · 4 type · 5 components · 6 motion
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */
:root {
  /* ground & surfaces */
  --z-bg: rgb(13, 13, 13);
  --z-ink: rgb(0, 0, 4);
  --z-surface: rgb(21, 20, 22);
  --z-raised: rgb(23, 22, 29);
  --z-glass: rgba(255, 255, 255, 0.08);
  --z-glass-soft: rgba(255, 255, 255, 0.05);

  /* text */
  --z-text: rgb(255, 255, 255);
  --z-text-2: rgb(211, 211, 211);
  --z-body: rgb(163, 168, 184);
  --z-nav: rgb(182, 189, 208);
  --z-dim: rgb(135, 134, 147);

  /* accents */
  --z-blue: rgb(77, 95, 248);
  --z-coral: rgb(238, 107, 96);
  --z-rose: rgb(227, 128, 138);
  --z-violet: rgb(149, 39, 249);
  --z-magenta: rgb(190, 69, 185);
  --z-orchid: rgb(225, 141, 245);
  --z-plum: rgb(106, 59, 138);
  --z-amber: rgb(255, 179, 31);
  --z-ember: rgb(238, 112, 45);
  --z-ice: rgb(212, 227, 255);

  /* lines */
  --z-line: rgba(75, 75, 75, 0.47);
  --z-line-soft: rgba(75, 75, 75, 0.25);
  --z-line-panel: rgba(75, 75, 75, 0.3);
  --z-line-glass: rgba(255, 255, 255, 0.15);
  --z-line-control: rgba(255, 255, 255, 0.44);

  /* gradients — accent pair, swap the two stops to retheme */
  --z-grad-a: var(--z-blue);
  --z-grad-b: var(--z-orchid);
  --z-grad-mark: linear-gradient(131.309deg, var(--z-grad-a) 23.8%, var(--z-grad-b) 59.93%);
  --z-grad-sweep: linear-gradient(90deg, var(--z-grad-b) 0%, var(--z-grad-a) 100%);

  /* radius */
  --z-r-xs: 4px;
  --z-r-sm: 6px;
  --z-r-md: 10px;
  --z-r-lg: 20px;
  --z-r-xl: 30px;
  --z-r-pill: 100px;

  /* spacing */
  --z-s-1: 10px;
  --z-s-16: 16px;
  --z-s-2: 20px;
  --z-s-3: 23px;
  --z-s-4: 30px;
  --z-s-5: 40px;
  --z-s-6: 60px;
  --z-s-7: 120px;

  /* type */
  /* Type stack copied verbatim from siliconprime.ai — every page on this
     site now resolves to the same one. Satoshi is self-hosted by
     src/css/components/site-chrome.css; the rest are fallbacks. */
  --z-font: Satoshi, "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --z-shell: 1450px;
}

/* 2 · BASE -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--z-bg);
  color: var(--z-text);
  font: 400 16px/24px var(--z-font);
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Keep this page family on its own dark ground (near-black --z-bg + the .glow
   backdrop). The shared site-chrome bundle — loaded AFTER this file — paints a
   navy #000220 base + corner flare via a fixed .lf-bg; override it in dark mode
   only. The chrome header/footer and light mode are left untouched. */
.lf-bg { display: none !important; }
html:not([data-theme="light"]) { background-color: var(--z-bg) !important; }
html:not([data-theme="light"]) body { background: var(--z-bg) !important; }

a { color: var(--z-text); text-decoration: none; }
a:hover { color: var(--z-coral); }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
::selection { background: rgba(77, 95, 248, 0.45); color: var(--z-text); }
:focus-visible { outline: 2px solid var(--z-blue); outline-offset: 2px; }

/* 3 · LAYOUT ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--z-shell); margin: 0 auto; padding: 0 var(--z-s-5); }
.section { position: relative; padding: var(--z-s-7) 0 0; }
.section--tight { padding-top: var(--z-s-6); }
.section--foot { padding-bottom: var(--z-s-6); }

/* stack: vertical rhythm · cluster: wrapping row · grid: equal cells */
.stack { display: flex; flex-direction: column; gap: var(--z-s-5); min-width: 0; }
.stack--lg { gap: var(--z-s-5); }
.stack--center { align-items: center; text-align: center; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-s-2); }
.cluster--center { justify-content: center; width: 100%; }
.grid { display: grid; gap: var(--z-s-2); grid-template-columns: repeat(auto-fit, minmax(var(--min, 260px), 1fr)); }
.grid--split { --min: 300px; gap: var(--z-s-6); align-items: center; }
.grid--wide { --min: 320px; }
.grid--narrow { --min: 160px; }
.hr { height: 1px; background: var(--z-line); }
.measure { max-width: min(645px, 100%); }
.measure--wide { max-width: min(810px, 100%); }
.measure--display { max-width: min(1000px, 100%); }

/* backdrop glow + modular grid, faded at the tail */
.glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1400px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.glow__a, .glow__b, .glow__c { position: absolute; border-radius: 50%; }
.glow__a { left: 58%; top: 120px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(149, 39, 249, 0.32) 0%, rgba(13, 13, 13, 0) 70%); }
.glow__b { left: -180px; top: 420px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(238, 107, 96, 0.16) 0%, rgba(13, 13, 13, 0) 70%); }
.glow__c { display: none; }
/* light-mode-only hero backdrop (self-hosted wave/accent SVGs + literal
   corner washes); hidden here so dark mode never renders them */
.glow__hero-orbs, .glow__hero-wave, .glow__hero-coral, .glow__hero-accent { display: none; position: absolute; }

/* 4 · TYPE -------------------------------------------------------------- */
.display    { font: 600 60px/68px var(--z-font); letter-spacing: -0.003em; text-wrap: pretty; }
.statement  { font: italic 600 41px/52px var(--z-font); text-wrap: pretty; }
.h2         { font: 500 40px/48px var(--z-font); letter-spacing: -0.003em; text-wrap: pretty; }
.feature    { font: 600 22px/30px var(--z-font); text-wrap: pretty; }
.card-title { font: 500 20px/28px var(--z-font); }
.stat       { font: 500 40px/48px var(--z-font); letter-spacing: -0.003em; }
.lead       { font: 400 16px/24px var(--z-font); letter-spacing: 0.001em; color: var(--z-body); }
.meta       { font: 400 14px/20px var(--z-font); color: var(--z-body); }
.micro      { font: 400 12px/18px var(--z-font); color: var(--z-dim); }
.label      { font: 500 12px/18px var(--z-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--z-dim); }
.eyebrow    { font: 600 12px/18px var(--z-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--z-body); }
.kicker     { font: 600 10px/14px var(--z-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--z-body); }
.accent     { color: var(--z-coral); }
.accent-num { color: var(--z-coral); letter-spacing: 0.12em; font-weight: 600; }
.italic     { font-style: italic; }
.strong     { font-weight: 600; color: var(--z-text); }
.on-dark    { color: var(--z-text); }

/* 5 · COMPONENTS -------------------------------------------------------- */

/* brand */
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand--sm .brand__mark { width: 28px; height: 28px; }
.brand--xs .brand__mark { width: 22px; height: 22px; }
/* Icon-only mark (.brand__mark, still used by the comparison table) keeps its
   own sizing above. The combined icon+wordmark artwork (.lf-logo, used by
   01-topbar.html / 12-footer.html) is sized by height only, aspect ratio
   711:121 baked into its viewBox. Values chosen so the wordmark reads at
   roughly the old .brand__word's size at each step — verify against the
   rendered page, not derived by formula. */
/* Full lockup (icon + wordmark + tagline). Heights bumped up from the
   no-tagline version (45/35/28) to 59/46/37 so the wordmark's own ink size
   stays put — it's now a smaller fraction of a taller total box. */
.lf-logo { display: block; height: 59px; width: auto; flex-shrink: 0; color: var(--z-text); }
.brand--sm .lf-logo { height: 46px; }
.brand--xs .lf-logo { height: 37px; }

/* topbar */
.nav { position: sticky; top: 0; z-index: 30; padding: var(--z-s-4) 0; transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; }
.nav.is-stuck { padding: 16px 0; background: rgba(13, 13, 13, 0.72); backdrop-filter: blur(18px); box-shadow: inset 0 -1px 0 var(--z-line); }
.nav__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; max-width: 1760px; padding-inline: 28px; }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 44px; margin: 0 auto; }
.nav__link { font: 400 15px/24px var(--z-font); letter-spacing: 0.001em; text-transform: uppercase; color: var(--z-nav); display: inline-flex; align-items: center; gap: 8px; }
.nav__link.is-active { color: var(--z-text); }

/* freeze the page behind the open mobile menu so touch-scrolling stays in the panel */
html.nav-locked, html.nav-locked body { overflow: hidden; }

/* mobile hamburger — hidden on desktop */
.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: 2px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav__toggle-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--z-text); transition: transform 0.25s ease, opacity 0.2s ease; }

/* ---- Solutions mega menu -------------------------------------------- */
/* static so the wide panel anchors to .nav__inner (the container), not the link */
.nav__item { position: static; display: inline-flex; align-items: center; }
.nav__link--drop { cursor: pointer; }
.nav__chev { transition: transform 0.25s ease; }
/* match the coral hover the other nav links get from the base `a:hover` */
.nav__item--mega:hover > .nav__link--drop,
.nav__item--mega.is-open > .nav__link--drop { color: var(--z-coral); }
.nav__item--mega:hover .nav__chev,
.nav__item--mega.is-open .nav__chev { transform: rotate(180deg); }

.nav__mega {
  --mega-panel: #131317;
  --mega-border: var(--z-line-glass);
  --mega-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --mega-head: var(--z-dim);
  --mega-link: var(--z-text-2);
  --mega-link-hover: var(--z-coral);
  --mega-hover-bg: rgba(255, 255, 255, 0.06);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 40;
  width: min(1200px, calc(100vw - 48px));
  transform: translate(-50%, -8px);
  padding: 30px 26px 26px;
  border-radius: 20px;
  background: var(--mega-panel);
  box-shadow: inset 0 0 0 1px var(--mega-border), var(--mega-shadow);
  /* overflow stays on the inner grid — clipping here would eat the hover bridge */
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
html[data-theme="light"] .nav__mega {
  --mega-panel: #ffffff;
  --mega-border: rgba(20, 21, 46, 0.1);
  --mega-shadow: 0 34px 80px -28px rgba(20, 21, 46, 0.28);
  --mega-head: rgb(120, 124, 138);
  --mega-link: rgb(20, 21, 26);
  --mega-link-hover: var(--z-coral);
  --mega-hover-bg: rgba(20, 21, 46, 0.05);
}
/* Bridge the gap between trigger and panel by growing the trigger's own hit box
   downward (negative margin keeps the layout identical). It has to live on the
   trigger, not the panel: a hidden panel is `pointer-events: none`, so a bridge
   there can never be re-entered once hover is lost. */
@media (min-width: 901px) {
  .nav__link--drop { padding-bottom: 34px; margin-bottom: -34px; }
}
.nav__item--mega:hover > .nav__mega,
.nav__item--mega:focus-within > .nav__mega,
.nav__item--mega.is-open > .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  /* 7 groups can outgrow the viewport — scroll here, not down the page */
  max-height: min(70vh, 580px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__mega-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nav__mega-head {
  margin: 0 0 8px;
  padding: 0 10px;
  font: 500 13px/20px var(--z-font);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mega-head);
}
.nav__mega-link {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  font: 600 14.5px/21px var(--z-font);
  letter-spacing: -0.001em;
  text-transform: none;
  color: var(--mega-link);
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__mega-link:hover { background: var(--mega-hover-bg); color: var(--mega-link-hover); }
.nav__mega-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  font: 400 13.5px/20px var(--z-font);
  text-transform: none;
  color: var(--mega-head);
  transition: color 0.18s ease, gap 0.18s ease;
}
.nav__mega-all:hover { color: var(--mega-link-hover); gap: 11px; }
.nav__mega-all svg { flex-shrink: 0; }


@media (max-width: 900px) {
  .nav__inner { flex-wrap: nowrap; justify-content: space-between; gap: 12px; position: relative; }
  .nav__toggle { display: flex; }
  .nav__inner .nav__cta { display: none; }
  /* fixed, not absolute: an absolutely-positioned panel inside the sticky
     header can't take touch-scroll — the gesture falls through to the page */
  .nav__links {
    position: fixed;
    top: 92px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px;
    background: var(--z-bg);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--z-line-soft);
    /* scroll inside the panel; `contain` stops the scroll chaining to <body> */
    max-height: calc(100dvh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .nav.is-stuck .nav__links { top: 70px; max-height: calc(100dvh - 86px); }
  /* While open: pin the bar itself. The body scroll-lock sets overflow:hidden,
     which kills `position: sticky` and would drop the header off-screen.
     backdrop-filter also has to go — it makes .nav a containing block for the
     fixed panel, stranding it thousands of px away once the nav sticks. */
  .nav.is-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--z-bg);
  }
  [data-nav].is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__link { width: 100%; padding: 13px 14px; border-radius: 10px; font-size: 15px; }
  .nav__link:hover, .nav__link.is-active { background: var(--z-glass); color: var(--z-text); }

  /* mega menu becomes an inline accordion inside the mobile panel */
  .nav__item { display: block; width: 100%; }
  .nav__link--drop { display: flex; justify-content: space-between; }
  /* `display` toggle, not max-height: an inner `overflow:hidden` box swallows
     the touch-scroll chain and the gesture ends up panning the page instead */
  .nav__mega {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    transform: none;
    padding: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: none;
  }
  .nav__mega::before { display: none; }
  /* hover must not open it on touch — only the explicit toggle does */
  .nav__item--mega:hover > .nav__mega,
  .nav__item--mega:focus-within > .nav__mega { display: none; }
  .nav__item--mega.is-open > .nav__mega {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    padding: 6px 0 10px;
  }
  /* the panel itself scrolls on mobile — the grid must not trap the gesture */
  .nav__mega-grid { grid-template-columns: 1fr; gap: 18px; max-height: none; overflow: visible; }
  .nav__mega-head { padding-inline: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
  .nav__mega-link { padding: 10px 14px; font-size: 14px; }
  .nav__mega-all { padding-inline: 14px; font-size: 13px; }
  [data-nav].is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-nav].is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
  [data-nav].is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* buttons — white is primary */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 var(--z-s-4);
  border: 0;
  border-radius: var(--z-r-sm);
  font: 600 16px/24px var(--z-font);
  letter-spacing: 0.001em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--sm { height: 45px; padding: 0 var(--z-s-3); }
.btn--fixed { width: 180px; }
.btn--primary { background: var(--z-text); color: var(--z-bg); }
.btn--primary:hover { background: var(--z-ice); color: var(--z-bg); }
.btn--primary:active { background: var(--z-nav); }
.btn--outline { border-radius: var(--z-r-md); background: transparent; color: var(--z-text); box-shadow: inset 0 0 0 1px var(--z-line-control); }
.btn--outline:hover { background: var(--z-glass); color: var(--z-text); }
.btn--outline:active { background: var(--z-line-glass); }
.btn--blue { background: var(--z-blue); color: var(--z-text); }
.btn--blue:hover { background: rgb(97, 113, 250); color: var(--z-text); }
.btn--dark { background: var(--z-ink); color: var(--z-text); box-shadow: inset 0 0 0 1px var(--z-line-glass); }
.btn--dark:hover { background: var(--z-glass); color: var(--z-text); }
.btn--glass { border-radius: var(--z-r-pill); background: var(--z-glass); color: var(--z-text); box-shadow: inset 0 0 0 1px var(--z-line-glass); font-size: 14px; }
.btn--glass:hover { background: var(--z-line-glass); color: var(--z-text); }
.btn--icon { width: 45px; height: 45px; padding: 0; border-radius: 50%; background: var(--z-glass); color: var(--z-text); box-shadow: inset 0 0 0 1px var(--z-line-glass); }
.btn--icon:hover { background: var(--z-line-glass); }
.btn--start { align-self: flex-start; }

/* link with trailing arrow */
.link-arrow { display: inline-flex; align-items: center; gap: var(--z-s-1); font: 600 16px/24px var(--z-font); color: var(--z-coral); }

/* tags */
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--z-r-pill); font: 600 12px/18px var(--z-font); letter-spacing: 0.04em; color: var(--z-text); }
.tag--coral { background: rgba(238, 107, 96, 0.16); color: var(--z-coral); }
.tag--blue { background: rgba(77, 95, 248, 0.25); }
.tag--rose { background: rgba(227, 128, 138, 0.25); }
.tag--glass { background: var(--z-glass); box-shadow: inset 0 0 0 1px var(--z-line-glass); }
.tag--outline { border-radius: var(--z-r-sm); color: var(--z-body); box-shadow: inset 0 0 0 1px var(--z-line); }
.tag--amber { background: var(--z-amber); color: var(--z-ink); }

/* cards & surfaces */
.card { border-radius: var(--z-r-lg); background: var(--z-glass-soft); padding: var(--z-s-4); display: flex; flex-direction: column; gap: var(--z-s-2); min-width: 0; }
.card--ruled { box-shadow: inset 0 0 0 1px var(--z-line-soft); }
.card--glass { background: var(--z-glass); backdrop-filter: blur(53px); box-shadow: inset 0 0 0 1px var(--z-line-glass); }
.card--raised { background: var(--z-raised); box-shadow: inset 0 0 0 1px var(--z-line); }
.card--ink { background: var(--z-ink); box-shadow: inset 0 0 0 1px var(--z-line-panel); }
.card--frame { padding: var(--z-s-2); }
.card__rule { height: 1px; background: var(--z-line-soft); }

.panel { border-radius: var(--z-r-md); background: var(--z-surface); box-shadow: inset 0 0 0 1px var(--z-line-panel); }
.panel--ink { background: var(--z-ink); box-shadow: inset 0 0 0 1px var(--z-line-soft); }
.panel--fill { flex: 1; min-height: 140px; }
.panel--pad { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.panel--blue { background-image: radial-gradient(120% 100% at 8% 0%, rgba(77, 95, 248, 0.35) 0%, rgba(13, 13, 13, 0) 62%), radial-gradient(90% 90% at 92% 100%, rgba(238, 107, 96, 0.28) 0%, rgba(13, 13, 13, 0) 62%); }
.panel--coral { background-image: radial-gradient(70% 70% at 30% 80%, rgba(238, 107, 96, 0.24) 0%, rgba(13, 13, 13, 0) 70%); }
.panel--magenta { background-image: radial-gradient(70% 70% at 70% 30%, rgba(190, 69, 185, 0.24) 0%, rgba(13, 13, 13, 0) 70%); }
.panel--soft { background-image: radial-gradient(80% 60% at 50% 40%, rgba(255, 255, 255, 0.06) 0%, rgba(13, 13, 13, 0) 70%); }
.panel--tall { min-height: 300px; }

/* skeleton bars for placeholder UI */
.bar { height: 8px; border-radius: var(--z-r-xs); background: var(--z-glass); }
.bar--strong { background: var(--z-line-glass); }

/* integration tile */
.tile { width: 122px; height: 122px; border-radius: var(--z-r-lg); background: var(--z-glass); backdrop-filter: blur(53px); box-shadow: inset 0 0 0 1px var(--z-line-glass); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--z-s-1); }
.tile__name { font: 500 12px/18px var(--z-font); letter-spacing: 0.04em; text-align: center; color: var(--z-text-2); padding: 0 10px; }
/* icons are masked so the file's own colors survive (source SVGs use currentColor) */
.ico { -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ico--flux { width: 40px; height: 42px; background-color: var(--z-ember); -webkit-mask-image: url(../assets/icon-vector-4.svg); mask-image: url(../assets/icon-vector-4.svg); }
.ico--verge { width: 42px; height: 42px; background-color: rgb(14, 110, 110); -webkit-mask-image: url(../assets/icon-vector-2.svg); mask-image: url(../assets/icon-vector-2.svg); }
.ico--relay { width: 48px; height: 28px; background-color: rgb(239, 43, 36); -webkit-mask-image: url(../assets/icon-vector-3.svg); mask-image: url(../assets/icon-vector-3.svg); }

/* avatar stack */
.faces { display: flex; align-items: center; gap: var(--z-s-1); }
.faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--z-bg); }
.faces img + img { margin-left: -18px; }

/* rows (capability / accordion) */
.row { border-radius: 19px; background: var(--z-glass-soft); box-shadow: inset 0 0 0 1px var(--z-line-soft); padding: 26px var(--z-s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--z-s-2); align-items: center; transition: background-color 0.2s ease; }
.row:hover { background: var(--z-glass); }
.row.is-open { background: rgba(77, 95, 248, 0.16); box-shadow: inset 0 0 0 1px var(--z-line-glass); }

/* form controls */
.field { display: flex; flex-direction: column; gap: var(--z-s-1); }
.input { height: 50px; padding: 0 var(--z-s-2); border: 0; border-radius: var(--z-r-md); background: var(--z-glass-soft); box-shadow: inset 0 0 0 1px var(--z-line); font: 400 16px/24px var(--z-font); color: var(--z-text); }
.input::placeholder { color: var(--z-dim); }
.seg { display: flex; gap: 4px; height: 50px; padding: 4px; border-radius: var(--z-r-md); background: var(--z-glass-soft); box-shadow: inset 0 0 0 1px var(--z-line); }
.seg__opt { flex: 1; border: 0; border-radius: var(--z-r-sm); background: transparent; font: 500 14px/20px var(--z-font); color: var(--z-body); cursor: pointer; }
.seg__opt.is-on { background: var(--z-text); color: var(--z-bg); font-weight: 600; }
.seg__opt:hover:not(.is-on) { background: var(--z-glass); color: var(--z-text); }

/* table */
.table { border-radius: var(--z-r-lg); background: var(--z-glass-soft); overflow: hidden; }
.table__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--z-s-2); padding: 22px var(--z-s-4); box-shadow: inset 0 1px 0 var(--z-line-soft); font: 400 16px/24px var(--z-font); }
.table__row--head { padding: var(--z-s-2) var(--z-s-4); background: var(--z-glass-soft); box-shadow: none; font: 600 12px/18px var(--z-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--z-body); }
.table__row span:not(:first-child) { color: var(--z-body); }
.table__row span:last-child { color: var(--z-text); }

/* CTA banner — gradient on the edge, never behind the type */
.banner { border-radius: var(--z-r-xl); padding: 1px; background: var(--z-grad-sweep); }
.banner__inner { border-radius: 29px; background: var(--z-bg); padding: var(--z-s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--z-s-5); }

/* footer — theme-aware gradient ground with the CTA nested on top */
.sec-footer {
  --foot-base: #060609;
  --foot-line: rgba(255, 255, 255, 0.1);
  --foot-label: #d8b072;
  --foot-social-bg: rgba(255, 255, 255, 0.1);
  --foot-social-hover: rgba(255, 255, 255, 0.2);
  --foot-social-ink: #fff;
  --foot-cta-bg: var(--z-ink);
  --foot-cta-border: rgba(255, 255, 255, 0.15);
  --foot-glow-blue: rgba(56, 78, 205, 0.3);
  --foot-glow-warm: rgba(196, 104, 96, 0.16);
  --foot-glow-violet: rgba(112, 78, 184, 0.16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--z-text);
  /* smooth blend from the page ground into the footer base as you scroll in */
  background:
    linear-gradient(180deg, var(--z-bg) 0%, transparent 200px),
    var(--foot-base);
}
html[data-theme="light"] .sec-footer {
  --foot-base: #f4f2ee;
  --foot-line: rgba(20, 21, 46, 0.12);
  --foot-label: #9a7636;
  --foot-social-bg: rgba(20, 21, 46, 0.06);
  --foot-social-hover: rgba(20, 21, 46, 0.12);
  --foot-social-ink: #23242e;
  --foot-cta-bg: #ffffff;
  --foot-cta-border: rgba(20, 21, 46, 0.1);
  --foot-glow-blue: rgba(56, 78, 205, 0.1);
  --foot-glow-warm: rgba(196, 104, 96, 0.08);
  --foot-glow-violet: rgba(112, 78, 184, 0.08);
}
/* gradient glows — blue center, warm right, violet lower-left */
.sec-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 46% at 44% 54%, var(--foot-glow-blue) 0%, transparent 72%),
    radial-gradient(42% 46% at 86% 40%, var(--foot-glow-warm) 0%, transparent 62%),
    radial-gradient(48% 52% at 12% 82%, var(--foot-glow-violet) 0%, transparent 64%);
}
/* nested CTA card picks up the theme */
.sec-footer .sec-cta__banner { background: var(--foot-cta-bg); box-shadow: inset 0 0 0 1px var(--foot-cta-border); }
/* keep the CTA button consistent — the generic `.sec-footer a` rule must not
   hijack its inverse text colour (or turn it coral on hover) */
.sec-footer .sec-cta__btn { color: var(--z-bg); }
.sec-footer .sec-cta__btn:hover { color: var(--z-bg); }
.sec-cta { padding-bottom: var(--z-s-5); }
/* align footer content with the header (nav__inner) width */
.sec-footer__wrap { max-width: 1760px; padding-inline: 28px; }
.sec-footer a { color: var(--z-body); transition: color 0.2s ease; }
.sec-footer a:hover { color: var(--z-coral); }

.sec-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--z-s-6); padding: var(--z-s-6) 0 var(--z-s-5); border-top: 1px solid var(--foot-line); border-bottom: 1px solid var(--foot-line); }
.sec-footer__brand { flex: 0 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sec-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
.sec-footer__cols a { font: 400 15px/20px var(--z-font); }
.sec-footer__cols .strong { font-size: 15px; }

/* offices — a stacked accordion; each location collapses via native <details> */
.sec-footer__offices { display: flex; flex-direction: column; width: 200px; }
.foot-offices__label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--z-text); }
.foot-office { padding-bottom: 16px; }
.foot-office__city {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font: 400 15px/1.3 var(--z-font);
  color: var(--z-text);
}
.foot-office__city::-webkit-details-marker { display: none; }
.foot-office__city::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform 0.25s ease;
}
/* collapsible body — animate height via grid-template-rows (0fr↔1fr) */
.foot-office__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s ease, opacity 0.28s ease;
}
.foot-office__inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
/* no-JS: all offices are [open]; chevron points up */
.foot-office[open] .foot-office__city::after { transform: translateY(1px) rotate(-135deg); }
/* JS-enhanced (single-open accordion): drive visuals off .is-open instead */
.sec-footer__offices.is-live .foot-office:not(.is-open) .foot-office__body { grid-template-rows: 0fr; opacity: 0; }
.sec-footer__offices.is-live .foot-office .foot-office__city::after { transform: translateY(-2px) rotate(45deg); }
.sec-footer__offices.is-live .foot-office.is-open .foot-office__city::after { transform: translateY(1px) rotate(-135deg); }
.foot-office__addr { margin-top: 12px; font: 400 15px/24px var(--z-font); color: var(--z-body); }
.foot-office__tel { font: 500 16px/24px var(--z-font); color: var(--z-text); margin-top: 14px; }
.foot-office__tel:hover { color: var(--z-coral); }
.foot-office__mail { font: 400 15px/24px var(--z-font); margin-top: 12px; }

.sec-footer__bar { padding-top: var(--z-s-16); padding-bottom: var(--z-s-16); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.foot-copy { font: 400 13px/18px var(--z-font); color: var(--z-dim); }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 40px); }
.foot-mail { font: 400 13px/18px var(--z-font); color: var(--z-body); }
.foot-social { display: flex; align-items: center; gap: 10px; }
.s-platform { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--foot-social-bg); color: var(--foot-social-ink); transition: background 0.2s ease, transform 0.2s ease; }
.s-platform:hover { background: var(--foot-social-hover); transform: translateY(-2px); }
.s-platform span { font: 600 12px/1 var(--z-font); letter-spacing: -0.01em; }
.s-platform svg { display: block; width: 16px; height: 16px; fill: currentColor; }

/* swatches (design-system page) */
.swatch { display: flex; flex-direction: column; gap: var(--z-s-1); }
.swatch__chip { height: 96px; border-radius: var(--z-r-md); box-shadow: inset 0 0 0 1px var(--z-line); }
.swatch__name { font: 500 12px/18px var(--z-font); color: var(--z-text); }
.spec { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px var(--z-s-5); align-items: baseline; }
.radius-demo { width: 76px; height: 76px; background: var(--z-glass); box-shadow: inset 0 0 0 1px var(--z-line-glass); }
.space-bar { height: 14px; background: var(--z-coral); }

/* 6 · MOTION ------------------------------------------------------------ */
/* Reveal-on-scroll. The transition lives on .is-in (NOT the base) so that when
   JS removes the .no-js fallback the items snap to hidden instead of animating
   *out* on load — only the reveal itself animates. Text slides up (slideInUp);
   images / boxes zoom in. */
[data-reveal] { opacity: 0; transform: translateY(46px); will-change: opacity, transform; }
[data-reveal="scale"] { transform: scale(0.9); transform-origin: center; }
[data-reveal="left"] { transform: translateX(-52px); }         /* slides in from the left */
/* harder entrance — snappier easing + shorter duration (was a soft 0.7s ease) */
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.no-js [data-reveal], .no-motion [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .nav { transition: none; }
}

/* 7 · RESPONSIVE -------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --z-s-7: 80px; --z-s-6: 40px; }
  .container { padding: 0 24px; }
  .display { font-size: 40px; line-height: 48px; }
  .statement { font-size: 28px; line-height: 38px; }
  .h2 { font-size: 30px; line-height: 38px; }
  .banner__inner { padding: var(--z-s-5) var(--z-s-4); }
  .brand__word { font-size: 32px; line-height: 36px; }
}

/* 8 · SECTION: HERO (Figma 830:9174) ------------------------------------ */
.sec-hero {
  padding: 90px 0 40px;
}
/* coral/indigo wash sits behind the content and fades out before the section
   edge, so it dissolves smoothly into the page ground instead of hard-cutting */
.sec-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(55% 50% at 68% 112%, rgba(126, 87, 234, 0.42) 0%, rgba(13, 13, 13, 0) 66%),
    radial-gradient(42% 42% at 10% 96%, rgba(238, 107, 96, 0.15) 0%, rgba(13, 13, 13, 0) 70%);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
/* accent line: coral -> indigo, clipped to the glyphs */
.sec-hero__accent {
  background: linear-gradient(90deg, rgb(233, 107, 100) 0%, rgb(71, 83, 208) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; white-space: nowrap; }
.sec-hero__actions { margin-top: 12px; }
/* hero CTAs — solid gradient (left) + white (right); text only, no icons */
.sec-hero__actions .btn {
  width: auto;                 /* cancel .btn--fixed 180px */
  height: auto;                /* let the padding size it */
  padding: var(--z-s-16) 32px; /* 16px 32px */
  border: 0;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 30, 77, 0.16); /* lift both off the light ground */
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.sec-hero__actions .btn--primary:hover { box-shadow: 0 8px 22px rgba(31, 30, 77, 0.22); }
.sec-hero__actions .sec-hero__btn--grad {
  background: linear-gradient(46deg, #fc6da3, #4867ff);
  color: #fff;
}
/* "Book a Demo" — no hover state */
.sec-hero__actions .btn--primary {
  background: #fff;
  color: #1f1e4d; /* brand heading ink (Figma #1F1E4D) — stays dark on white in both themes */
}
.sec-hero__actions .btn--primary:hover { background: #f1f3ff; color: #1f1e4d; }

@media (max-width: 900px) {
  .sec-hero { padding: 72px 0 84px; }
}
@media (max-width: 760px) {
  .sec-hero .stack { gap: var(--z-s-2); }      /* tighter vertical rhythm (was 40px) */
  .sec-hero { padding-bottom: 24px; }           /* trim the gap under the hero */
  .sec-hero__showcase-wrap { display: none; }   /* hide the wide diagram on phones */
  .sec-hero__actions { flex-wrap: nowrap; }      /* keep the CTAs on one row */
  .sec-hero__actions .btn {
    width: min(200px, 100%);
    min-width: 0;                                /* let them shrink to share the row */
    padding: var(--z-s-16) 12px;                 /* tighter so both fit */
  }

  /* hide just the phone mockup — the 6 specialist callouts still show. The
     pinned scroll is desktop-only, so the phone is dead weight on phones. */
  .sec-workforce .wf2__stage { display: none; }

  /* centre the lone "Explore Platform" CTA in the keep-running column */
  .sec-keep .sec-keep__btn { align-self: center; }

  /* breathing room below the cost-control card before the next section */
  .sec-cost { padding-bottom: 48px; }

  /* centre only the section-head text (eyebrow · title · sub) of the two-column
     feature sections — the feature lists stay left-aligned. align-self:stretch
     overrides the column's flex-start so short items (the eyebrow) centre too. */
  .sec-cost__badge, .sec-cost__title, .sec-cost__lead,
  .sec-keep__title {
    align-self: stretch;
    text-align: center;
  }
}

/* --- hero product showcase (Figma 830:8803) --- */
.sec-hero__showcase-wrap { padding-top: 56px; }

/* AI-automation showcase, composed from SVG parts on a dark glowing ground.
   Canvas keeps the artwork's 1640×421 aspect; every piece is absolutely
   placed by % so the whole thing scales fluidly with the width. */
@property --hs-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.hs {
  position: relative;
  width: 100%;
  aspect-ratio: 1640 / 526; /* ~25% taller than the diagram for breathing room */
  border-radius: clamp(16px, 1.6vw, 24px);
  /* radial purple → indigo panel */
  background: radial-gradient(circle, rgb(75 32 88) 0%, rgb(31 30 77) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* decorative background layers */
.hs__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}
.hs__dots {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: auto;
  z-index: 0;
  opacity: 0.9;
  transform: scaleX(-1); /* flip so the dense corner points bottom-left */
  pointer-events: none;
}

/* holds the diagram at its native 1640×421 aspect, centred in the panel */
.hs__stage {
  position: relative;
  left: 8px;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1640 / 421;
}

/* ── choreographed reveal ─────────────────────────────────────────
   The panel itself only fades (background + connectors + dots come in
   together with the hero heading). Its pieces then animate off
   .hs.is-in: phase 1 — hub zooms in while the cards slide out to their
   sides; phase 2 — the four hexes zoom in once the cards/hub have
   settled. Opacity for the cards/hub rides the panel fade; only the
   hexes carry their own (delayed) fade so they arrive last. */
.hs[data-reveal]         { transform: none; }   /* fade only, no slide/scale */
.hs[data-reveal].is-in   { transform: none; }

.hs__card,
.hs__hub,
.hs__hex {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
/* phase 2 — once the background has faded, the hub zooms in while the cards
   slide out to their sides */
.hs__hub         { transform: scale(0.82); transform-origin: center; transition-delay: 0.45s; }
.hs__card        { transition-delay: 0.45s; }
.hs__card--left  { transform: translateX(-56px); }  /* slideInLeft — enters from the left */
.hs__card--right { transform: translateX(56px); }   /* slideInRight — enters from the right */
/* phase 3 — the four hexes zoom in after the cards/hub have settled */
.hs__hex         { transform: scale(0.55); transition-delay: 1.05s; }
.hs__hex--lb     { transition-delay: 1.13s; }
.hs__hex--rt     { transition-delay: 1.21s; }
.hs__hex--rb     { transition-delay: 1.29s; }

.hs.is-in .hs__card,
.hs.is-in .hs__hub { opacity: 1; transform: none; }
.hs.is-in .hs__hex { opacity: 1; transform: scale(1); }

.no-js .hs__card, .no-js .hs__hub, .no-js .hs__hex,
.no-motion .hs__card, .no-motion .hs__hub, .no-motion .hs__hex { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hs__card, .hs__hub, .hs__hex { opacity: 1; transform: none; transition: none; }
}

/* connectors sit behind everything */
.hs__line {
  position: absolute;
  z-index: 0;
  opacity: 0.9;
}
/* native aspect + placed so outer ends meet the hex/card edges exactly
   (no run-under the translucent tiles) and inner ends tuck under the hub */
.hs__line--left  { left: 26.3%;  top: 13.2%; width: 24.15%; height: 75.5%; }
.hs__line--right { left: 50%;    top: 13.2%; width: 24.15%; height: 75.5%; }

/* cards */
.hs__card {
  position: absolute;
  z-index: 2;
  border-radius: clamp(9px, 1vw, 15px);
  background: rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.hs__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.hs__card--left  { left: 1.4%;  top: 19.6%; width: 24.94%; }
.hs__card--right { left: 73.7%; top: 21.4%; width: 23.78%; }

/* running gradient border — a bright highlight sweeps around each card */
.hs__ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--hs-angle),
    rgba(255, 255, 255, 0.06) 0deg,
    rgba(255, 255, 255, 0.06) 250deg,
    rgba(169, 184, 255, 0.85) 312deg,
    #ffffff 336deg,
    rgba(169, 184, 255, 0.85) 356deg,
    rgba(255, 255, 255, 0.06) 360deg);
  -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;
  animation: hs-rotate 5.4s linear infinite;
  pointer-events: none;
}
.hs__card--right .hs__ring { animation-delay: -2.7s; }
@keyframes hs-rotate { to { --hs-angle: 360deg; } }

/* icon hexes */
.hs__hex {
  position: absolute;
  z-index: 2;
  height: auto;
  width: 5.91%;
}
.hs__hex--lt { left: 28.7%; top: 4.8%; }
.hs__hex--lb { left: 29%;   top: 72.4%; }
.hs__hex--rt { left: 66%; top: 4.8%; }
.hs__hex--rb { left: 65.7%; top: 72.4%; }

/* center hub */
.hs__hub {
  position: absolute;
  z-index: 4;
  left: 44.4%;
  top: 25.8%;
  width: 11.2%;
  display: grid;
  place-items: center;
}
.hs__hub-bg { display: block; width: 100%; height: auto; }
.hs__hub-text {
  position: absolute;
  color: #fff;
  font-weight: 600;
  font-size: clamp(12px, 1.12vw, 18px);
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .hs__ring { animation: none; }
}

/* ── AI automation showcase — recreated diagram ─────────────────────── */
.sec-hero__auto {
  position: relative;
  width: 100%;
  aspect-ratio: 1560 / 500;
  --auto-line: rgba(255, 255, 255, 0.16);
  --auto-line-dim: rgba(255, 255, 255, 0.08);
  --auto-hex: #14131a;
  --auto-hex-bd: rgba(255, 255, 255, 0.16);
  --auto-node-ico: rgba(255, 255, 255, 0.72);
  --auto-card-bg: rgba(255, 255, 255, 0.05);
  --auto-card-bd: rgba(255, 255, 255, 0.1);
  --auto-grid: rgba(150, 150, 160, 0.16);
}
/* ambient glow behind the core */
.sec-hero__auto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 80, 220, 0.4), transparent 65%);
  filter: blur(34px);
  pointer-events: none;
}

/* circuit traces */
.auto-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.auto-net__line path { fill: none; stroke: var(--auto-line); stroke-width: 1.3; }
.auto-net__line--dash path { stroke: var(--auto-line-dim); stroke-dasharray: 4 5; }
.auto-net__trace { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 42 258; }
.auto-net__trace--a { stroke: #ee6b60; animation: auto-flow 3.8s linear infinite; }
.auto-net__trace--b { stroke: #4d5ff8; animation: auto-flow 3.8s linear infinite reverse; }
@keyframes auto-flow { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

/* hexagon nodes */
.auto-node {
  position: absolute;
  width: 5.4%;
  aspect-ratio: 1 / 1.08;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: var(--auto-node-ico);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--auto-hex-bd);
}
.auto-node::before {
  content: "";
  position: absolute;
  inset: 1.3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--auto-hex);
}
.auto-node svg { position: relative; width: 42%; height: 42%; }
.auto-node--tl { left: 31.4%; top: 19%; }
.auto-node--tr { left: 68.6%; top: 19%; }
.auto-node--bl { left: 31.4%; top: 81%; }
.auto-node--br { left: 68.6%; top: 81%; }

/* central core */
.auto-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10%;
  aspect-ratio: 1 / 1.08;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(152deg, #7b5cff 0%, #b44bd0 56%, #e0607f 100%);
  color: #fff;
  text-align: center;
}
.auto-core__a { font: 700 clamp(11px, 1.05vw, 18px)/1 var(--z-font); }
.auto-core__b { font: 700 clamp(8px, 0.8vw, 13px)/1 var(--z-font); letter-spacing: 0.04em; }

/* glass data cards */
.auto-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--auto-card-bd);
  background: var(--auto-card-bg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.auto-card--rev { left: 0; width: 26%; }
.auto-card--score { right: 0; width: 26%; }

/* revenue card */
.auto-rev__title { color: var(--z-text); font: 500 clamp(11px, 1vw, 15px)/1 var(--z-font); }
.auto-rev__plot { display: flex; gap: 8px; margin-top: 14px; }
.auto-rev__yaxis { display: flex; flex-direction: column; justify-content: space-between; color: var(--z-dim); font: 400 clamp(7px, 0.7vw, 10px)/1 var(--z-font); }
.auto-rev__chart { position: relative; flex: 1 1 auto; height: clamp(80px, 11vw, 150px); }
.auto-rev__svg { width: 100%; height: 100%; display: block; }
.auto-rev__grid { stroke: var(--auto-grid); stroke-width: 1; stroke-dasharray: 3 4; }
.auto-rev__line { stroke: #ee6b60; stroke-width: 2; fill: none; }
.auto-rev__tip {
  position: absolute; left: 36%; top: 26%; transform: translate(-50%, -50%);
  padding: 3px 8px; border-radius: 6px; background: #7c3aed; color: #fff;
  font: 600 clamp(8px, 0.75vw, 11px)/1 var(--z-font); white-space: nowrap;
}
.auto-rev__xaxis { display: flex; justify-content: space-between; margin-top: 8px; padding-left: 26px; color: var(--z-dim); font: 400 clamp(7px, 0.7vw, 10px)/1 var(--z-font); }

/* score card */
.auto-score__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auto-score__amt { color: var(--z-text); font: 600 clamp(15px, 1.7vw, 27px)/1 var(--z-font); }
.auto-score__date { color: var(--z-dim); font: 400 clamp(8px, 0.9vw, 13px)/1 var(--z-font); }
.auto-score__body { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.auto-score__rows { display: flex; flex-direction: column; gap: 15px; flex: 1 1 auto; }
.auto-score__row { display: flex; align-items: center; gap: 9px; }
.auto-score__ico { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; color: var(--z-dim); }
.auto-score__ico svg { width: 15px; height: 15px; }
.auto-score__pair { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auto-score__label { color: var(--z-dim); font: 400 clamp(8px, 0.82vw, 12px)/1 var(--z-font); }
.auto-score__val { color: var(--z-text); font: 500 clamp(10px, 1vw, 15px)/1 var(--z-font); }
.auto-score__gauge { position: relative; width: 40%; flex: 0 0 auto; }
.auto-score__gauge svg { width: 100%; display: block; overflow: visible; }
.auto-gauge__track { stroke: var(--auto-grid); stroke-width: 6; fill: none; stroke-linecap: round; }
.auto-gauge__fill { stroke: url(#auto-gauge); stroke-width: 6; fill: none; stroke-linecap: round; }
.auto-gauge__ticks path { stroke: var(--z-dim); stroke-width: 1.4; }
.auto-score__num { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: #f0a03c; font: 700 clamp(12px, 1.2vw, 19px)/1 var(--z-font); }
.auto-score__cap { position: absolute; top: 88%; left: 50%; transform: translateX(-50%); color: var(--z-dim); font: 600 clamp(6px, 0.6vw, 9px)/1 var(--z-font); letter-spacing: 0.04em; white-space: nowrap; }
.auto-score__foot { display: block; margin-top: 12px; text-align: right; color: var(--z-dim); font: 400 clamp(8px, 0.82vw, 12px)/1 var(--z-font); }

@media (prefers-reduced-motion: reduce) {
  .auto-net__trace--a, .auto-net__trace--b { animation: none; }
}
@media (max-width: 860px) {
  .sec-hero__auto { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
  .sec-hero__auto::before, .auto-net, .auto-node, .auto-core { display: none; }
  .auto-card { position: static; transform: none; width: 100%; }
}
.sec-hero__showcase {
  display: grid;
  gap: 20px;
  grid-template-columns: 30fr 32fr 30fr;
  grid-template-areas:
    "left big  big"
    "left mid  right";
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  text-align: left;
  /* theme-scoped surfaces so the whole mockup flips with the theme */
  --sh-card: #000;
  --sh-panel: #0e0d12;
  --sh-chip: rgba(255, 255, 255, 0.06);
  --sh-line: rgba(255, 255, 255, 0.1);
  --sh-bar: rgba(217, 217, 217, 0.18);
  --sh-neutral: #e6e6e6;
}
.sec-hero__card {
  background: var(--sh-card);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--sh-line);
}
.sh-left  { grid-area: left;  padding: 28px 22px; display: flex; flex-direction: column; gap: 16px; }
.sh-big   { grid-area: big;   padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.sh-mid   { grid-area: mid;   padding: 22px 24px; display: flex; flex-direction: column; }
.sh-right { grid-area: right; padding: 22px; display: flex; }

/* left · menu items */
.sh-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--sh-card);
  box-shadow: inset 0 0 0 1px var(--sh-line);
}
.sh-item--active {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--sh-card), var(--sh-card)) padding-box,
    linear-gradient(83deg, #e3808a 0%, #35086b 12%, #070111 34%, #e3808a 78%, #fffafa 100%) border-box;
  box-shadow: 0 8px 30px rgba(238, 107, 96, 0.12);
}
.sh-item__label { font: 500 14px/1.2 var(--z-font); color: var(--z-text); }
.sh-bar { height: 8px; border-radius: 5px; background: var(--sh-bar); }

/* left · feature block */
.sh-feature { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; text-align: center; }
.sh-feature__title { font: 500 20px/28px var(--z-font); color: var(--z-text); }
.sh-feature__text  { font: 400 14px/22px var(--z-font); color: var(--z-body); }
.sh-feature__btn {
  height: 44px;
  padding: 0 26px;
  border-radius: 6px;
  background: transparent;
  color: var(--z-text);
  box-shadow: inset 0 0 0 1px var(--z-line-control);
}
.sh-feature__btn:hover { background: var(--z-glass); }

/* big · streamline operations */
.sh-big__title { font: 500 24px/32px var(--z-font); color: var(--z-text); }
.sh-big__body { display: flex; gap: 18px; align-items: center; }
.sh-diagram { flex: 1; min-width: 0; }
.sh-router { display: block; width: 100%; height: auto; color: var(--sh-neutral); }
.sh-tags { flex-shrink: 0; width: 172px; display: flex; flex-direction: column; gap: 10px; }
.sh-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--sh-card);
  box-shadow: inset 0 0 0 1px var(--sh-line);
  font: 500 13px/1 var(--z-font);
  color: var(--z-text);
}
.sh-tag__dot { position: relative; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--z-line-control); }
.sh-tag__dot::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--z-text); }
.sh-tag__ico { width: 16px; height: 16px; margin-left: auto; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--sh-line); }
.sh-big__text { max-width: 62%; font: 400 15px/24px var(--z-font); color: var(--z-body); }

/* mid · digital transformation */
.sh-mid__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
.sh-mid__title { font: 500 15px/1 var(--z-font); color: var(--z-text); }
.sh-mid__more { font-size: 11px; letter-spacing: 1px; color: var(--z-dim); }
.sh-txn { display: flex; align-items: center; gap: 14px; padding: 16px 0; box-shadow: inset 0 1px 0 var(--sh-line); }
.sh-txn:first-of-type { box-shadow: none; }
.sh-txn__ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--sh-chip); box-shadow: inset 0 0 0 1px var(--sh-line); color: var(--z-body); }
.sh-txn__ico svg { width: 17px; height: 17px; }
.sh-txn__main { display: flex; flex-direction: column; gap: 3px; }
.sh-txn__name { font: 500 14px/1.2 var(--z-font); color: var(--z-text); }
.sh-txn__date { font: 400 11px/1 var(--z-font); color: var(--z-dim); }
.sh-txn__amt { margin-left: auto; font: 500 13px/1 var(--z-font); color: var(--z-text); }

/* right · tax-saving chart */
.sh-right { align-items: stretch; }
.sh-chart { position: relative; flex: 1; overflow: hidden; padding: 20px; border-radius: 16px; background: var(--sh-panel); box-shadow: inset 0 0 0 1px var(--sh-line); }
.sh-chart__labels { display: flex; flex-direction: column; gap: 4px; }
.sh-chart__labels span { font: 500 12px/1.4 var(--z-font); color: var(--z-text); }
.sh-chart__labels span + span { font-weight: 400; color: var(--z-body); }
.sh-chart__svg { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 60%; }
.sh-chart__pill { position: absolute; z-index: 2; padding: 4px 10px; border-radius: 20px; font: 600 10px/1 var(--z-font); color: #fff; background: linear-gradient(90deg, #121017 0%, #4d5ff8 100%); }
.sh-chart__pill--a { left: 18px; bottom: 60px; }
.sh-chart__pill--b { right: 18px; top: 78px; }

@media (max-width: 1024px) {
  .sec-hero__showcase { grid-template-columns: 1fr 1fr; grid-template-areas: "left big" "mid right"; }
  .sh-big__text { max-width: 100%; }
}
@media (max-width: 760px) {
  .sec-hero__showcase-wrap { padding-top: 36px; }
  .sec-hero__showcase { grid-template-columns: 1fr; grid-template-areas: "big" "left" "mid" "right"; }
  .sh-big__body { flex-direction: column; align-items: stretch; }
  .sh-tags { width: 100%; }
}

/* --- hero clients (Azlytics "clients" component, node 4025:3962) ---
   Centred column: caption over a single row of brand logos split by thin
   vertical dividers. Design frame is 1042px wide with a 50px caption→row gap. */
/* Full-bleed so the marquee scrolls across the whole viewport; the caption
   stays centred in a constrained band. Everything sizes off the viewport so it
   scales smoothly rather than snapping at breakpoints. */
.sec-hero__clients { margin: clamp(48px, 6vw, 72px) 0 0; }
.sec-hero__clients-caption {
  max-width: var(--z-shell);
  margin: 0 auto clamp(32px, 4vw, 50px);
  padding: 0 var(--z-s-5);
  text-align: center;
  font: 400 clamp(15px, 1.2vw, 17px)/1.7 var(--z-font);
  color: var(--z-text);
}
html[data-theme="light"] .sec-hero__clients-caption { color: var(--z-body); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* two identical logo sets; -50% shift loops seamlessly (right-to-left) */
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-rtl 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__logo {
  height: 34px;
  width: auto;
  margin-right: 96px;
  opacity: 0.72;
  -webkit-user-drag: none;
  user-select: none;
}
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* integration-logo marquee — scrolling behaviour kept; restyled to the Azlytics
   "clients" look (node 4025:3962): bare logos on the page ground separated by
   thin vertical dividers, no tiles. JS renders .int-row/.int-track/.int-logo. */
.int-strip {
  position: relative;
  overflow: hidden;
  --int-divider: rgba(255, 255, 255, 0.18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
html[data-theme="light"] .int-strip { --int-divider: #d1d1d1; }
.int-row { overflow: hidden; }
.int-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  animation: int-scroll 60s linear infinite;
}
.int-strip:hover .int-track { animation-play-state: paused; }
.int-logo {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* symmetric padding = the design's 40px each side of the divider */
  padding-inline: clamp(20px, 2.6vw, 40px);
}
/* thin vertical divider between logos (Figma: 28px tall, #D1D1D1, 0.5px) */
.int-logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--int-divider);
}
/* brand glyph — enlarged so it reads prominently next to the name */
.int-logo__icon { width: 40px; height: 40px; max-width: none; object-fit: contain; display: block; flex-shrink: 0; }
/* brand name shown next to the logo */
.int-logo__label { color: var(--z-text); font: 500 20px/1 var(--z-font); white-space: nowrap; }
@keyframes int-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .int-track { animation: none; }
}

/* 9 · SECTION: WHAT WE DO (Figma 830:10491) ----------------------------- */
/* tighten the gap from the hero's integration marquee above */
.sec-what-we-do { padding-top: 56px; }
/* centred heading block (Azlytics "Heading" node 8072:5085) */
.sec-what-we-do__head { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
/* plain uppercase eyebrow — the design's "tag font" (no pill) */
.sec-what-we-do__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z-text);
}
.sec-what-we-do__quote {
  max-width: 790px;
  font: 500 43px/54px var(--z-font);
  letter-spacing: -0.06em;
  color: var(--z-text);
  text-wrap: balance;
}
/* orange → blue gradient on the highlighted phrase (design ts1) */
.sec-what-we-do__accent {
  background: linear-gradient(90deg, #ff7236 42%, #4563ff 84%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* full-width hairline under the heading */
.sec-what-we-do__divider {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 20px 0 0;
  background: #e5e5e5;
}
/* laurel-flanked pull quote (design node 8072:5090) */
.sec-what-we-do__pullquote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 20px 0 0;
  max-width: 560px;
  font: 400 16px/26px var(--z-font);
  color: var(--z-body);
}
.sec-what-we-do__pullquote u { text-decoration: underline; color: var(--z-text); }
.sec-what-we-do__laurel { flex: none; width: auto; height: 52px; }

.sec-what-we-do__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 64px;
}
/* image-on-top card (design node 8072:3415): white surface, soft shadow.
   Base = dark-mode (subtle border, since a drop shadow is invisible on the
   near-black ground); light mode swaps in the design's soft drop shadow. */
.sec-what-we-do__card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 15px;
  background: var(--z-raised);
  box-shadow: inset 0 0 0 1px var(--z-line-soft);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.sec-what-we-do__card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--z-line);
}
.sec-what-we-do__card-media {
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 349 / 208;
  box-shadow: inset 0 0 0 1px var(--z-line-soft);
}
.sec-what-we-do__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* card 6 — inline-SVG "AI Adoption" banner: a launch bump that decays back to
   the old-way baseline (illustrates "no training/support, people left behind") */
.sec-what-we-do__card-media--chart { box-shadow: none; }
.rta { display: block; width: 100%; height: 100%; font-family: var(--z-font); }
.rta__title { fill: #1f1e4d; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.rta__badge-bg { fill: #fdeceb; }
.rta__badge-tri { fill: #e5484d; }
.rta__badge { fill: #e5484d; font-size: 12.5px; font-weight: 600; }
.rta__kpi { fill: #1f1e4d; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.rta__kpi-sub { fill: #8b8fa3; font-size: 13px; }
.rta__base { stroke: #c9cbd6; stroke-width: 1.5; stroke-dasharray: 3 4; }
.rta__base-label { fill: #a7aab8; font-size: 11px; }
/* card 5 — inline-SVG "Team workflows" banner: three departments each rebuilding
   the identical pipeline (illustrates "teams rebuild the same workflows") */
.sec-what-we-do__card-media--flow { box-shadow: none; }
.rbw { display: block; width: 100%; height: 100%; font-family: var(--z-font); }
.rbw__title { fill: #1f1e4d; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rbw__tag-bg { fill: #fdf1dc; }
.rbw__tag { fill: #c9820a; font-size: 11px; font-weight: 600; }
.rbw__dept { font-size: 11.5px; font-weight: 600; }
.rbw__wire { stroke: #cdd5dd; stroke-width: 2; }
.rbw__node circle { fill: #fff; stroke: #b7bfc9; stroke-width: 2; }
/* card 4's insights widget is a wide 3:1 crop — anchor left so its label/value
   stay in frame instead of the centre getting cropped out */
.sec-what-we-do__card:nth-child(4) .sec-what-we-do__card-media img { object-position: left center; }
.sec-what-we-do__card-body { display: flex; flex-direction: column; }
.sec-what-we-do__card-title { font: 500 22px/28px var(--z-font); letter-spacing: -0.01em; color: var(--z-text); }
.sec-what-we-do__card-text { margin-top: 14px; font: 400 15px/24px var(--z-font); color: var(--z-body); }

@media (max-width: 980px) {
  .sec-what-we-do__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .sec-what-we-do__quote { font-size: 30px; line-height: 40px; }
  .sec-what-we-do__pullquote { gap: 16px; }
}

/* ============================================================
   · WHAT WE PROMISE  — icon boxes on a dark band (Azlytics node 8072:5166).
   This is a full-width dark #1C1C2F feature band in BOTH themes, so every
   value below is fixed (white / #B7B7B7 / #222234), not theme-tokened.
   ============================================================ */
.sec-promise {
  background: #1c1c2f;
  /* breathing room between the light What-we-do cards and this dark band */
  margin-top: clamp(56px, 7vw, 104px);
  padding-bottom: var(--z-s-7);
}
.sec-promise__head { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; max-width: 826px; margin: 0 auto; }
/* plain uppercase eyebrow (design "tag font") */
.sec-promise__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.sec-promise__title { margin: 0; max-width: 720px; font: 500 43px/54px var(--z-font); letter-spacing: -0.06em; color: #fff; text-wrap: balance; }
/* orange → blue gradient on "human potential" (design ts1) */
.sec-promise__accent {
  background: linear-gradient(90deg, #ff7236 55%, #4563ff 77%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sec-promise__sub { margin: 10px 0 0; max-width: 560px; font: 400 16px/26px var(--z-font); color: #b7b7b7; }

.sec-promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
/* flat dark box; the gradient border only appears on hover (no default active) */
.sec-promise__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 50px;
  border-radius: 15px;
  background: #222234;
  transition: background 0.35s ease;
}
/* gradient border, faded in on hover (masked pseudo — orange→blue like the
   design's "active" stroke, fading out toward the bottom-right) */
.sec-promise__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(60deg, #f8723d 0%, rgba(72, 103, 255, 0.5) 56%, rgba(72, 103, 255, 0) 88%);
  -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;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sec-promise__card:hover { background: #29293f; }
.sec-promise__card:hover::after { opacity: 1; }
.sec-promise__icon { display: block; }
.sec-promise__icon img { width: auto; height: 50px; display: block; }
.sec-promise__card-body { display: flex; flex-direction: column; gap: 25px; }
.sec-promise__card-title { margin: 0; font: 500 20px/30px var(--z-font); letter-spacing: -0.03em; color: #fff; }
.sec-promise__card-text { margin: 0; font: 400 16px/26px var(--z-font); color: #b7b7b7; }

@media (max-width: 980px) {
  .sec-promise__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .sec-promise__title { font-size: 32px; line-height: 40px; }
  .sec-promise__card { padding: 40px 32px; gap: 36px; }
}

/* ============================================================
   10 · FLUID — enterprise feature list + panel (Azlytics node 8072:5211)
   Two-column: left = feature list with hover gradient-rule, right = panel.
   Theme-tokened text/dividers; the panel box is a fixed design colour.
   ============================================================ */
.sec-fluid { --fl-divider: #e5e5e5; overflow: hidden; }
html:not([data-theme="light"]) .sec-fluid { --fl-divider: rgba(255, 255, 255, 0.1); }

/* centred heading — same treatment as the other section heads */
.sec-fluid__head { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; max-width: 826px; margin: 0 auto; }
.sec-fluid__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z-text);
}
.sec-fluid__title { margin: 0; max-width: 760px; font: 500 43px/54px var(--z-font); letter-spacing: -0.06em; color: var(--z-text); text-wrap: balance; }
.sec-fluid__accent {
  background: linear-gradient(90deg, #ff6726 24%, #4563ff 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* two-column body */
.sec-fluid__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-top: clamp(48px, 5vw, 72px);
}

/* ── LEFT · feature list ─────────────────────────────────────────── */
.sec-fluid__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--fl-divider); }
.sec-fluid__item {
  position: relative;
  display: flex;
  gap: 30px;
  padding: clamp(24px, 2.4vw, 32px) 0 clamp(24px, 2.4vw, 32px) clamp(24px, 2.2vw, 33px);
}
.sec-fluid__item + .sec-fluid__item { border-top: 1px solid var(--fl-divider); }
/* left gradient rule — hidden by default, fades in on hover (no default active) */
.sec-fluid__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #4359b0 20%, #bb64fa 72%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sec-fluid__item:hover::before { opacity: 1; }
.sec-fluid__icon { flex: 0 0 auto; }
.sec-fluid__icon img { display: block; width: 40px; height: auto; }
/* design icon strokes are dark (#4B4A6C) — lift them to light on the dark theme */
html:not([data-theme="light"]) .sec-fluid__icon img { filter: brightness(0) invert(0.82); }
.sec-fluid__item-body { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.sec-fluid__item-title { margin: 0; font: 500 20px/30px var(--z-font); letter-spacing: -0.03em; color: var(--z-text); }
.sec-fluid__item-text { margin: 0; font: 400 16px/26px var(--z-font); color: var(--z-body); }

/* ── RIGHT · bg box + dashboard image ────────────────────────────── */
.sec-fluid__panel {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: clamp(32px, 4vw, 64px);
  border-radius: 15px;
  background: #ece7f4;
}
.sec-fluid__panel-img { position: relative; z-index: 1; display: block; width: 100%; max-width: 422px; height: auto; }
/* decorative orbs that overflow the box, as in the design */
.sec-fluid__panel-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.sec-fluid__panel-orb--blue {
  width: clamp(64px, 8%, 100px);
  aspect-ratio: 1;
  left: -3%;
  top: 42%;
  background: #146cf0;
}
.sec-fluid__panel-orb--grad {
  width: clamp(48px, 6%, 70px);
  aspect-ratio: 1;
  right: -4%;
  bottom: 20%;
  background: linear-gradient(46deg, #ff6726 0%, #4563ff 99%);
  box-shadow: 0 15px 25px 0 rgba(136, 102, 240, 0.55);
}

@media (max-width: 900px) {
  .sec-fluid__title { font-size: 32px; line-height: 40px; }
  .sec-fluid__body { grid-template-columns: 1fr; gap: 48px; }
  .sec-fluid__panel { order: -1; }
}


@media (max-width: 560px) {
  .sec-footer__offices { min-width: 0; width: 100%; }
  /* tighten the section rhythm on phones (was 80px top + up to 80px bottom,
     giving ~160px seams). --z-s-7 drives .section top padding and the
     matching bottoms; --z-s-6 trims the airier in-section gaps. */
  :root { --z-s-7: 56px; --z-s-6: 34px; }
}

/* ============================================================
   11 · COST CONTROL  (Figma 5724:2174)
   ============================================================ */
/* reusable eyebrow pill — gradient border on the page ground */
.badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: 19px;
  background:
    linear-gradient(var(--z-bg), var(--z-bg)) padding-box,
    linear-gradient(-78deg, #000 0%, #ee6b60 9%, #4d5ff8 47%, #000 100%) border-box;
  font: 600 12px/1 var(--z-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--z-text);
}
.badge-pill--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--z-text);
}

/* Cost Control is a self-contained LIGHT card in BOTH themes (Azlytics node
   8072:5653), so every inner colour is fixed dark, not theme-tokened. */
.sec-cost__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
  padding: clamp(44px, 6vw, 96px) clamp(28px, 7vw, 128px);
  border-radius: 15px;
  background: #eff1f3;
}
.sec-cost__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.sec-cost__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f1e4d;
}
.sec-cost__title {
  margin: 0;
  color: #1f1e4d;
  font: 500 43px/54px var(--z-font);
  letter-spacing: -0.06em;
}
.sec-cost__accent {
  background: linear-gradient(90deg, #ff7236 37%, #4563ff 68%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* shared inline gradient accents for section titles — same treatment as the
   Cost-control title accent, reused across sections for a consistent look */
.accent-grad,
.accent-grad--rose,
.accent-grad--iris {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.accent-grad { background-image: linear-gradient(90deg, #e96b64 0%, #4753d0 100%); }
.accent-grad--rose { background-image: linear-gradient(90deg, #c67d8a 0%, #8071e6 100%); }
.accent-grad--iris { background-image: linear-gradient(90deg, #8071e6 0%, #c67d8a 100%); }
.accent-coral { color: #e96b64; }

.sec-cost__lead { margin: 0; max-width: 520px; color: #4b4a6c; font: 400 16px/26px var(--z-font); }

.sec-cost__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sec-cost__item { display: flex; gap: 25px; align-items: flex-start; }
.sec-cost__check { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 2px; color: #1c1c2f; }
.sec-cost__check svg { display: block; width: 100%; height: 100%; }
.sec-cost__item-body { display: flex; flex-direction: column; gap: 12px; }
.sec-cost__item-title { margin: 0; color: #1f1e4d; font: 500 20px/30px var(--z-font); letter-spacing: -0.03em; }
.sec-cost__item-text {
  margin: 0;
  max-width: 490px;
  color: #4b4a6c;
  font: 400 16px/26px var(--z-font);
}

/* solid dark pill button (design instance 8072:5836) */
.sec-cost__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 18px 35px;
  border-radius: 6px;
  background: #1c1c2f;
  color: #fff;
  font: 500 15px/1 var(--z-font);
  transition: background 0.25s ease, transform 0.25s ease;
}
.sec-cost__btn:hover { background: #29293f; transform: translateY(-2px); }
.sec-cost__btn svg { display: block; width: 14px; height: 14px; }

/* LEFT visual — light #ECE7F4 box holding the dashboard image + orbs */
.sec-cost__visual { display: flex; justify-content: center; }
.sec-cost__panel {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(30px, 4vw, 56px);
  border-radius: 15px;
  background: #ece7f4;
}
.sec-cost__img { position: relative; z-index: 1; width: 100%; max-width: 456px; height: auto; display: block; }
.sec-cost__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.sec-cost__orb--blue { z-index: 0; width: clamp(90px, 21%, 131px); aspect-ratio: 1; left: -4%; bottom: 7%; background: #146cf0; }
.sec-cost__orb--grad {
  z-index: 2;
  width: clamp(48px, 11%, 62px);
  aspect-ratio: 1;
  right: 13%;
  top: -3%;
  background: linear-gradient(46deg, #ff6726 0%, #4563ff 99%);
  box-shadow: 0 15px 25px 0 rgba(136, 102, 240, 0.6);
}

@media (max-width: 900px) {
  .sec-cost__title { font-size: 32px; line-height: 40px; }
  .sec-cost__card { grid-template-columns: 1fr; gap: 48px; }
  .sec-cost__visual { order: -1; }
}

/* ---- Keep them running — closes the dark #1C1C2F block below How-it-works
   (Azlytics 8072:6021). Fixed dark-band colours in both themes; image left,
   copy right. ---- */
.sec-keep { background: #1c1c2f; padding-bottom: var(--z-s-7); }
.sec-keep__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.sec-keep__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.sec-keep__title {
  margin: 0;
  max-width: 482px;
  color: #fff;
  font: 500 43px/54px var(--z-font);
  letter-spacing: -0.06em;
}
.sec-keep__accent {
  background: linear-gradient(90deg, #ff6726 26%, #4563ff 57%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sec-keep__features {
  width: 100%;
  max-width: 482px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sec-keep__item { display: flex; gap: 14px; align-items: center; }
.sec-keep__check { flex: 0 0 auto; width: 20px; height: 20px; color: #b7b7b7; }
.sec-keep__check svg { display: block; width: 100%; height: 100%; }
.sec-keep__item-title { margin: 0; color: #fff; font: 500 18px/26px var(--z-font); letter-spacing: -0.02em; }
.sec-keep__item-text {
  margin: 0;
  color: #b7b7b7;
  font: 400 18px/30px var(--z-font);
  letter-spacing: 0.01em;
}
/* extra breathing room before the second feature block */
.sec-keep__item + .sec-keep__item-text { margin-top: 0; }
.sec-keep__features > .sec-keep__item:nth-of-type(2) { margin-top: 30px; }

/* solid blue button (design instance 8072:6037) */
.sec-keep__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 25px;
  border-radius: 5px;
  background: #fff;
  color: #1f1e4d;
  font: 500 15px/1 var(--z-font);
  transition: background 0.25s ease, transform 0.25s ease;
}
.sec-keep__btn:hover { background: #f1f3ff; transform: translateY(-2px); }
.sec-keep__btn svg { display: block; width: 14px; height: 14px; }

.sec-keep__visual { display: flex; justify-content: center; }
.sec-keep__img { width: 100%; max-width: 568px; height: auto; }

@media (max-width: 900px) {
  .sec-keep__title { font-size: 32px; line-height: 40px; }
  .sec-keep__grid { grid-template-columns: 1fr; gap: 48px; }
  .sec-keep__visual { order: -1; }
}

/* ---- Make AI knowledge reusable (bento grid + copy) ---- */
/* bento sits at its natural width on the left; copy fills the rest and centres within it */
.sec-reuse__grid { display: flex; align-items: center; gap: clamp(32px, 4vw, 72px); }
.reuse__bento {
  order: 1;
  flex: 0 0 auto;
  width: min(620px, 52%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  /* vertical-marquee viewport: clip the two auto-scrolling tracks and fade the
     top/bottom edges */
  height: 560px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.reuse__copy { order: 2; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
/* each column is a track; content is duplicated (JS) so translateY(-50%) loops
   seamlessly. margin-bottom (not gap) keeps the last card's spacing so the wrap
   is perfectly continuous. */
.reuse__col { display: flex; flex-direction: column; will-change: transform; animation: reuse-scroll-up 26s linear infinite; }
.reuse__col > .reuse-card { margin-bottom: 20px; }
.reuse__col--offset { animation: reuse-scroll-down 26s linear infinite; }
.reuse__bento:hover .reuse__col { animation-play-state: paused; }
@keyframes reuse-scroll-up   { from { transform: translateY(0); }      to { transform: translateY(-50%); } }
@keyframes reuse-scroll-down { from { transform: translateY(-50%); }   to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .reuse__bento { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .reuse__col { animation: none; }
  .reuse-card--clone { display: none; }
}

.reuse__title { margin: 0; max-width: 480px; color: var(--z-text); font: 500 40px/48px var(--z-font); letter-spacing: -0.0025em; }
.reuse__eyebrow { margin-top: 4px; color: var(--z-text); font: 500 20px/1.2 var(--z-font); }
.reuse__lead { margin: 0; max-width: 430px; }
.reuse__btn {
  margin-top: 6px;
  width: auto;              /* cancel .btn--fixed */
  height: auto;
  padding: 16px 32px;
  border: 0;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  background: linear-gradient(46deg, #fc6da3, #4867ff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(31, 30, 77, 0.16);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.reuse__btn:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 8px 22px rgba(31, 30, 77, 0.22); }

/* card surface tokens — flip with the theme */
.sec-reuse {
  --card-bg: #0d0d12;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-ink: #fff;
  --card-body: #a3a8b8;
  --card-icon-bg: rgba(255, 255, 255, 0.05);
}
.reuse-card {
  position: relative;
  min-height: 262px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
}
.reuse-card--text { justify-content: space-between; gap: 24px; }
.reuse-card--art { align-items: center; justify-content: center; }
.reuse-card--art img { display: block; width: 100%; max-width: 236px; height: auto; }
.reuse-card--chart { gap: 14px; }
.reuse-card--chart img { display: block; width: 100%; height: auto; margin-top: auto; }

.reuse-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--card-icon-bg);
  border: 1px solid var(--card-border);
  color: var(--card-ink);
}
.reuse-card__icon svg { width: 24px; height: 24px; }
.reuse-card__body { display: flex; flex-direction: column; gap: 10px; }
.reuse-card__title { margin: 0; color: var(--card-ink); font: 500 20px/1.3 var(--z-font); }
.reuse-card__title--top { margin-bottom: 2px; }
.reuse-card__text { margin: 0; max-width: 240px; color: var(--card-body); font: 400 16px/24px var(--z-font); }

/* light theme: cards flip to a light surface with a soft lift */
html[data-theme="light"] .sec-reuse {
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --card-ink: #1f1e4d;
  --card-body: #4b4a6c;
  --card-icon-bg: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .reuse-card {
  box-shadow: 0 20px 44px -28px rgba(20, 21, 46, 0.16);
}

@media (max-width: 900px) {
  .sec-reuse__grid { flex-direction: column; gap: 40px; }
  .reuse__bento, .reuse__copy { flex: 1 1 auto; width: 100%; max-width: 620px; }
  .reuse__copy { order: -1; }
  /* no marquee on narrow screens — stack the original cards statically */
  .reuse__bento { grid-template-columns: 1fr; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .reuse__col { animation: none; }
  .reuse-card--clone { display: none; }
  .reuse__title { font-size: 32px; line-height: 40px; }
  .reuse-card { min-height: 230px; }
}

/* ---- Services hover-expand list (theme-aware; ambient gradient on the section bg) ---- */
.sec-services {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--z-s-7);
  --svc-bg: #000;
  --svc-row-bg: #000;
  --svc-row-border: rgba(75, 75, 75, 0.3);
  --svc-row-hover-bg: rgba(255, 255, 255, 0.05);
  --svc-row-hover-border: rgba(255, 255, 255, 0.12);
  --svc-hover-shadow: none;
  --svc-ink: #fff;
  --svc-body: #a3a8b8;
  --svc-divider: rgba(255, 255, 255, 0.2);
  --svc-arrow-border: rgba(255, 255, 255, 0.2);
  --svc-glow-opacity: 1;
  background: var(--svc-bg);
  color: var(--svc-ink);
}
html[data-theme="light"] .sec-services {
  --svc-bg: #f3f4f7;
  --svc-row-bg: #ffffff;
  --svc-row-border: rgba(0, 0, 0, 0.10);
  --svc-row-hover-bg: #ffffff;
  --svc-row-hover-border: rgba(0, 0, 0, 0.12);
  --svc-hover-shadow: 0 22px 48px -28px rgba(20, 21, 46, 0.22);
  --svc-ink: #1f1e4d;
  --svc-body: #4b4a6c;
  --svc-divider: rgba(0, 0, 0, 0.12);
  --svc-arrow-border: rgba(0, 0, 0, 0.18);
  --svc-glow-opacity: 0.45;
}

/* one colourful ambient glow — lives on the section background only */
.sec-services__glow {
  position: absolute;
  top: 62%;
  left: 50%;
  width: min(1290px, 92%);
  height: 460px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(52% 60% at 30% 50%, rgba(96, 74, 196, 0.4) 0%, transparent 72%),
    radial-gradient(52% 60% at 70% 52%, rgba(210, 96, 92, 0.36) 0%, transparent 72%);
  filter: blur(46px);
  opacity: var(--svc-glow-opacity);
  pointer-events: none;
}
.sec-services > .container { position: relative; z-index: 1; }

.sec-services__title {
  margin: 0 auto 64px;
  max-width: 980px;
  text-align: center;
  color: var(--svc-ink);
  font: 500 40px/48px var(--z-font);
  letter-spacing: -0.0025em;
}
.sec-services__accent {
  background: linear-gradient(90deg, #e96b64 0%, #4753d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.svc-list { max-width: 1290px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.svc-row {
  position: relative;
  margin-inline: 56px;
  border: 1px solid var(--svc-row-border);
  border-radius: 10px;
  background: var(--svc-row-bg);
  transition: margin 0.4s ease, background 0.4s ease, border-color 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
}
.svc-row__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 120px;
  padding: 0 44px;
  transition: opacity 0.4s ease;
}
.svc-row__lead { flex: 1 1 0; display: flex; align-items: center; gap: 24px; min-width: 0; }
.svc-row__icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--svc-ink); }
.svc-row__icon svg { display: block; width: 100%; height: 100%; }
.svc-row__title { margin: 0; color: var(--svc-ink); font: 500 22px/32px var(--z-font); letter-spacing: 0.001em; }
.svc-row__div { flex: 0 0 auto; width: 1px; height: 76px; margin-inline: 44px; background: var(--svc-divider); }
.svc-row__right { flex: 1 1 0; display: flex; align-items: center; gap: 24px; min-width: 0; }
.svc-row__desc { flex: 1 1 auto; margin: 0; max-width: 400px; color: var(--svc-body); font: 400 16px/24px var(--z-font); }
.svc-row__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--svc-arrow-border);
  border-radius: 12px;
  color: var(--svc-ink);
}
.svc-row__arrow svg { width: 20px; height: 20px; }

/* hovered row expands full-width with a plain glass/elevated highlight (no per-item colour) */
.svc-row:hover {
  margin-inline: 0;
  background: var(--svc-row-hover-bg);
  border-color: var(--svc-row-hover-border);
  border-radius: 20px;
  backdrop-filter: blur(2px);
  box-shadow: var(--svc-hover-shadow);
}
/* fade the siblings only while the list is actively hovered */
.svc-list:hover .svc-row:not(:hover) .svc-row__inner { opacity: 0.5; }

@media (max-width: 900px) {
  .sec-services__title { font-size: 30px; line-height: 38px; margin-bottom: 44px; }
  .svc-row, .svc-row:hover { margin-inline: 0; }
  .svc-row__inner { flex-wrap: wrap; padding: 24px; min-height: 0; gap: 14px 24px; }
  .svc-row__div { display: none; }
  .svc-row__right { flex: 1 1 100%; }
  .svc-row__desc { max-width: none; }
}

/* ---- Comparison table: personal vs enterprise (theme-aware) ---- */
.sec-compare {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--z-s-7);
  --cmp-bg: #08080c;
  --cmp-panel: rgba(255, 255, 255, 0.015);
  --cmp-border: rgba(255, 255, 255, 0.08);
  --cmp-ink: #fff;
  --cmp-muted: #a3a8b8;
  --cmp-head: rgba(255, 255, 255, 0.5);
  --cmp-accent: #7f8dff;
  --cmp-hi-bg: rgba(77, 95, 248, 0.09);
  --cmp-row-hover: rgba(255, 255, 255, 0.03);
  --cmp-glow-op: 1;
  --cmp-lf-bg: linear-gradient(180deg, rgba(77, 95, 248, 0.16) 0%, rgba(77, 95, 248, 0.05) 100%);
  --cmp-lf-glow: 0 0 46px -6px rgba(77, 95, 248, 0.5);
  --cmp-menu-bg: #14141a;
  background: var(--cmp-bg);
  color: var(--cmp-ink);
}
html[data-theme="light"] .sec-compare {
  --cmp-bg: #f3f4f7;
  --cmp-panel: #ffffff;
  --cmp-border: rgba(0, 0, 0, 0.09);
  --cmp-ink: #1f1e4d;
  --cmp-muted: #4b4a6c;
  --cmp-head: rgba(0, 0, 0, 0.45);
  --cmp-accent: #4453d8;
  --cmp-hi-bg: rgba(77, 95, 248, 0.06);
  --cmp-row-hover: rgba(0, 0, 0, 0.02);
  --cmp-glow-op: 0.5;
  --cmp-lf-bg: linear-gradient(180deg, rgba(77, 95, 248, 0.1) 0%, rgba(77, 95, 248, 0.03) 100%);
  --cmp-lf-glow: 0 0 40px -8px rgba(77, 95, 248, 0.28);
  --cmp-menu-bg: #ffffff;
}

/* soft corner glows — blue top-left, warm top-right */
.sec-compare__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--cmp-glow-op);
  background:
    radial-gradient(560px 420px at -4% -10%, rgba(60, 82, 235, 0.22) 0%, transparent 62%),
    radial-gradient(600px 460px at 104% 2%, rgba(210, 96, 92, 0.16) 0%, transparent 60%);
}
.sec-compare > .container { position: relative; z-index: 1; }

.sec-compare__title {
  margin: 0 auto 48px;
  max-width: 900px;
  text-align: center;
  color: var(--cmp-ink);
  font: 500 40px/48px var(--z-font);
  letter-spacing: -0.0025em;
}

.cmp-wrap { max-width: 1180px; margin: 0 auto; position: relative; }

/* 4-column grid table (question · Personal · LeapForce · switchable competitor) */
.cmp {
  --cmp-cols: minmax(190px, 1.02fr) minmax(210px, 1.3fr) minmax(210px, 1.3fr) minmax(210px, 1.3fr);
  position: relative;
  display: grid;
  grid-template-columns: var(--cmp-cols);
  border: 1px solid var(--cmp-border);
  border-radius: 16px;
  background: var(--cmp-panel);
}

/* LeapForce column highlight — an overlay grid sitting BEHIND the (transparent)
   cells so column 3 reads as a glowing, gradient-bordered card */
.cmp__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: var(--cmp-cols);
  pointer-events: none;
}
.cmp__hilite {
  position: relative;
  grid-column: 3 / 4;
  border-radius: 15px;
  background: var(--cmp-lf-bg);
  box-shadow: var(--cmp-lf-glow);
}
.cmp__hilite::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(238, 107, 96, 0.65) 0%, rgba(77, 95, 248, 0.75) 50%, rgba(128, 113, 230, 0.65) 100%);
  -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;
}

.cmp__cell {
  position: relative;
  z-index: 1;
  padding: 20px 26px;
  border-top: 1px solid var(--cmp-border);
  color: var(--cmp-muted);
  font: 400 14.5px/1.5 var(--z-font);
}
.cmp__cell--head {
  border-top: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: 22px;
  color: var(--cmp-ink);
  font: 600 16px/1.3 var(--z-font);
}
.cmp__cell--q { color: var(--cmp-ink); font-weight: 500; }
.cmp__cell--head.cmp__cell--q { font-size: 17px; }
.cmp__cell--lf { color: var(--cmp-ink); font-weight: 500; }
.cmp__cell--lf:not(.cmp__cell--head) { display: flex; gap: 11px; align-items: flex-start; }
.cmp__cell--cc { display: flex; gap: 11px; align-items: flex-start; }

/* LeapForce answers each carry an accent tick (always a "yes") */
.cmp__tick {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(77, 95, 248, 0.18);
  color: var(--cmp-accent);
}
.cmp__tick svg { width: 12px; height: 12px; }

/* header brand icon + name */
.cmp__brand-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--cmp-muted); display: inline-flex; }
.cmp__brand-ico svg { width: 100%; height: 100%; }
.cmp__brand-ico--lf { color: var(--cmp-accent); width: 20px; height: 20px; }
.cmp__brand-ico[data-cc-ico] { color: var(--cmp-ink); }
.cmp__brand-name { flex: 1 1 auto; min-width: 0; }

/* competitor answer markers */
.cmp__mk {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp__mk svg { width: 12px; height: 12px; }
.cmp__mk--y { background: rgba(52, 199, 123, 0.16); color: #35c77b; }
.cmp__mk--n { background: rgba(240, 160, 60, 0.16); color: #eb9d3c; }
.cmp__cc-text { flex: 1 1 auto; }

/* competitor dropdown — header cell sits above the other cells so its menu,
   which drops down over the table, isn't covered by later same-z-index cells */
.cmp__cell--cc { position: relative; }
.cmp__cell--head.cmp__cell--cc { z-index: 30; }
.cmp__dd-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--cmp-border);
  background: var(--cmp-row-hover);
  color: var(--cmp-ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cmp__dd-btn:hover { background: var(--cmp-hi-bg); }
.cmp__dd-chev { width: 16px; height: 16px; transition: transform 0.25s ease; }
.cmp__dd-btn[aria-expanded="true"] .cmp__dd-chev { transform: rotate(180deg); }
.cmp__dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 264px;
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--cmp-border);
  background: var(--cmp-menu-bg);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.cmp__dd-menu.is-open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cmp__dd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%; text-align: left;
  padding: 11px 13px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--cmp-ink);
  font: 500 14px/1.35 var(--z-font);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cmp__dd-ico { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; color: var(--cmp-ink); }
.cmp__dd-ico svg { width: 100%; height: 100%; }
.cmp__dd-item:hover { background: var(--cmp-hi-bg); }
.cmp__dd-item.is-active { color: var(--cmp-accent); background: var(--cmp-hi-bg); }

@media (max-width: 900px) {
  .sec-compare__title { font-size: 28px; line-height: 36px; margin-bottom: 32px; }
  .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* min-width must cover the columns' own mins (190+210+210+210 = 820px) — a
     smaller value lets the last column overflow the rounded/clipped .cmp box
     and its text gets cut. */
  .cmp, .cmp__overlay { min-width: 840px; }
  .cmp__cell { padding: 14px 14px; }
}

/* ============================================================
   12 · THEME: LIGHT   (activated by html[data-theme="light"])
   The page chrome (ground, text, nav, footer, buttons, headings)
   flips to light. The dark product-mockup cards stay dark — their
   on-card token values are pinned below so text keeps light-on-dark
   contrast regardless of the active theme.
   ============================================================ */
html[data-theme="light"] {
  /* ground & surfaces */
  --z-bg: #fff;
  --z-ink: rgb(255, 255, 255);
  --z-surface: rgb(255, 255, 255);
  --z-raised: rgb(255, 255, 255);
  --z-glass: rgba(0, 0, 0, 0.05);
  --z-glass-soft: rgba(0, 0, 0, 0.035);

  /* text — title/body ink matched to Azlytics Figma (node 1490:2353): H1's
     "font color" #1F1E4D for headings, "body font color" #4B4A6C for copy */
  --z-text: #1f1e4d;
  --z-text-2: rgb(58, 61, 68);
  --z-body: #4b4a6c;
  --z-nav: rgb(58, 61, 68);
  --z-dim: rgb(107, 114, 128);

  /* lines */
  --z-line: rgba(0, 0, 0, 0.14);
  --z-line-soft: rgba(0, 0, 0, 0.08);
  --z-line-panel: rgba(0, 0, 0, 0.1);
  --z-line-glass: rgba(0, 0, 0, 0.12);
  --z-line-control: rgba(0, 0, 0, 0.32);
}

/* (the hero showcase used to be pinned dark here; it now themes via its own
   --sh-* surface variables, defined on .sec-hero__showcase) */

/* Type scale matched to the Azlytics Figma (H1–H6 + body/tag styles, node
   1490:2353). Size/weight/line-height only — font-family stays var(--z-font)
   for now, and dark mode is untouched. */
html[data-theme="light"] .display { line-height: 64px; }
@media (max-width: 900px) { html[data-theme="light"] .display { line-height: 48px; } }
html[data-theme="light"] .feature { font-size: 24px; line-height: 33px; font-weight: 500; }
html[data-theme="light"] .card-title { line-height: 30px; }
html[data-theme="light"] .lead { line-height: 26px; }
html[data-theme="light"] .meta { line-height: 24px; }
html[data-theme="light"] .tag {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}
html[data-theme="light"] .sec-what-we-do__card-title,
html[data-theme="light"] .sec-promise__card-title {
  font-weight: 500;
}

/* Section header (badge + title) — 1:1 with the Azlytics Figma "Heading"
   component (node 4033:1062): every section's eyebrow pill and its title
   converge on the same two type styles, font-family aside. */
html[data-theme="light"] .h2,
html[data-theme="light"] .reuse__title,
html[data-theme="light"] .sec-fluid__title,
html[data-theme="light"] .sec-cost__title,
html[data-theme="light"] .sec-keep__title,
html[data-theme="light"] .sec-services__title,
html[data-theme="light"] .sec-compare__title,
html[data-theme="light"] .sec-faq__title,
html[data-theme="light"] .sec-hiw__title,
html[data-theme="light"] .sec-promise__title,
html[data-theme="light"] .sec-cta__title {
  font-size: 43px;
  line-height: 54px;
  font-weight: 500;
  letter-spacing: -0.06em;
}
@media (max-width: 900px) {
  html[data-theme="light"] .sec-fluid__title,
  html[data-theme="light"] .sec-cost__title,
  html[data-theme="light"] .sec-keep__title,
  html[data-theme="light"] .sec-services__title,
  html[data-theme="light"] .sec-compare__title,
  html[data-theme="light"] .sec-faq__title,
  html[data-theme="light"] .sec-hiw__title,
  html[data-theme="light"] .sec-promise__title,
  html[data-theme="light"] .sec-cta__title { line-height: 48px; }
}
/* gradient-clipped accents lose descenders / side-bearings to the text-clip box;
   extra bottom padding (offset by horizontal margin) keeps the glyphs whole.
   box-decoration-break:clone applies the padding to every wrapped line. */
[class*="__accent"], [class*="accent-grad"] {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding: 0.02em 0.08em 0.22em;
  margin: 0 -0.08em;
}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .sec-what-we-do__badge,
html[data-theme="light"] .badge-pill {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #1a194d;
}

/* chrome spots that were hardcoded dark */
html[data-theme="light"] .nav.is-stuck {
  background: rgba(245, 246, 248, 0.8);
  box-shadow: inset 0 -1px 0 var(--z-line);
}
html[data-theme="light"] .sec-hero__showcase {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --sh-card: #fff;
  --sh-panel: #eef0f3;
  --sh-chip: rgba(0, 0, 0, 0.05);
  --sh-line: rgba(0, 0, 0, 0.1);
  --sh-bar: rgba(0, 0, 0, 0.09);
  --sh-neutral: #33363d;
}
html[data-theme="light"] .sec-hero__auto {
  --auto-line: rgba(0, 0, 0, 0.14);
  --auto-line-dim: rgba(0, 0, 0, 0.07);
  --auto-hex: #eceef3;
  --auto-hex-bd: rgba(0, 0, 0, 0.12);
  --auto-node-ico: rgba(0, 0, 0, 0.5);
  --auto-card-bg: rgba(255, 255, 255, 0.6);
  --auto-card-bd: rgba(0, 0, 0, 0.08);
  --auto-grid: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .sec-hero__auto::before { opacity: 0.6; }
/* Light-mode hero backdrop — 1:1 port of the reference site's .rt-hero-v1
   component (background wash + two positioned glow SVGs). Superseded the
   earlier CSS-only attempts; the old aurora-blob .glow__a/b/c are hidden here
   in favour of this. Dark mode is untouched — this is all light-theme-scoped. */
html[data-theme="light"] .glow__a,
html[data-theme="light"] .glow__b,
html[data-theme="light"] .glow__c { display: none; }
html[data-theme="light"] .glow__hero-orbs,
html[data-theme="light"] .glow__hero-wave,
html[data-theme="light"] .glow__hero-coral,
html[data-theme="light"] .glow__hero-accent { display: none; }

/* The wash lives on its own box pulled up by the header's floating-pill band
   (same technique as .ri-sec-bg on /research-insight) so it runs unbroken from
   y=0, showing through the header's transparent shell instead of stopping at
   the hero's own top edge — z-index -1 keeps it behind the section's normal
   content while the header (z-index 200) still paints on top of everything. */
html[data-theme="light"] .sec-hero::after {
  content: "";
  --hero-hd-band: calc(var(--lf-header-h) + var(--lf-header-gap) * 2);
  position: absolute;
  top: calc(-1 * var(--hero-hd-band));
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + var(--hero-hd-band));
  z-index: -1;
  pointer-events: none;
  background-color: rgb(254, 253, 255);
  background-image:
    url("../assets/hero-bg/glow-accent.svg"),
    radial-gradient(circle at 65% 0px, rgba(133, 153, 254, 0.3), rgba(255, 255, 255, 0) 19%),
    radial-gradient(circle at 35% 0px, rgb(246, 255, 224), rgba(242, 217, 225, 0) 19%);
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, auto, auto;
  background-position: 80% 15%, 0px 0px, 0px 0px;
}
.rt-hero-v1-glow-one,
.rt-hero-v1-glow-two {
  display: none;
  object-fit: cover;
  max-width: 100%;
}
html[data-theme="light"] .rt-hero-v1-glow-one {
  display: inline-block;
  position: absolute;
  inset: 20% auto 0 0;
}
html[data-theme="light"] .rt-hero-v1-glow-two {
  display: inline-block;
  position: absolute;
  inset: 20% 10% auto auto;
}
/* How-it-works, Keep-them-running and AI-Workforce are now fixed bands
   (dark / dark / light per design), so they need no light-theme overrides. */
/* keep client logos legible on a light ground */
html[data-theme="light"] .marquee__logo { filter: invert(1) brightness(0.55); }

/* smooth the flip */
body { transition: background-color 0.35s ease, color 0.35s ease; }

/* --- theme toggle (sun in dark → switch to light · moon in light → switch to dark) --- */
/* pill toggle — dark: light track + crescent-moon knob (left)
   ·         light: dark track + plain circle knob (right) */
.theme-switch {
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #dcdcde;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}
.theme-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1b1b1f;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), background-color 0.3s ease;
}
/* carve a crescent out of the knob with a track-coloured overlay */
.theme-switch__knob::after {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcde;
  transition: opacity 0.2s ease, background-color 0.3s ease;
}
html[data-theme="light"] .theme-switch { background: #4b4b50; }
html[data-theme="light"] .theme-switch__knob {
  transform: translateX(20px);
  background: #ffffff;
}
html[data-theme="light"] .theme-switch__knob::after { opacity: 0; }

/* ---- light-mode refinements for the two dark-card sections ---- */
/* What we do — flip the #000 cards to light surfaces (text tokens already
   theme now that the pin was lifted) */
html[data-theme="light"] .sec-what-we-do__card {
  background: var(--z-surface);
  box-shadow: 5px 10px 40px 0 rgba(43, 42, 92, 0.1);
}
html[data-theme="light"] .sec-what-we-do__card:hover {
  box-shadow: 5px 18px 54px 0 rgba(43, 42, 92, 0.16);
}

/* Fluid marquee — glass cards; the inner media panels stay dark "screens" in
   both themes, so only the card chrome adapts to the light ground. */
html[data-theme="light"] .sec-fluid__card {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.035);
}
html[data-theme="light"] .sec-fluid__glow { opacity: 0.7; }

/* ============================================================
   13 · FAQ — centred flat accordion (Azlytics 4047:1769)
   Flat list of the current Q&A; nothing open by default; one item open at
   a time (JS). The open header inverts to the text colour (= #1F1E4D in
   light, matching the design) with a white label. Theme-aware.
   ============================================================ */
/* bottom padding to match the other content sections (services, compare, …) */
.sec-faq { padding-bottom: var(--z-s-7); }
.sec-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  max-width: 750px;
  margin: 0 auto clamp(36px, 4vw, 52px);
}
.sec-faq__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z-text);
}
.sec-faq__title {
  margin: 0;
  color: var(--z-text);
  font: 500 43px/54px var(--z-font);
  letter-spacing: -0.06em;
  text-wrap: balance;
}
.sec-faq__accent {
  background: linear-gradient(46deg, #ff6726 0%, #4563ff 99%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sec-faq__accordion {
  max-width: 909px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sec-faq__item { border-bottom: 1px solid var(--z-line-soft); }
.sec-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--z-text);
  font: 500 18px/26px var(--z-font);
  letter-spacing: -0.02em;
  transition: background 0.25s ease, color 0.25s ease;
}
.sec-faq__q::-webkit-details-marker { display: none; }
/* open item: inverted header bar (design's dark #1F1E4D fill + white label) */
.sec-faq__item[open] .sec-faq__q { background: var(--z-text); color: var(--z-bg); }
.sec-faq__a {
  padding: 30px 20px;
  max-width: 770px;
  color: var(--z-body);
  font: 400 16px/28px var(--z-font);
}

/* +/− mark: two bars; the vertical one hides when open. Inherits the header
   colour, so it flips to white on the open (dark) bar. */
.sec-faq__mark { position: relative; flex-shrink: 0; width: 12px; height: 12px; color: currentColor; }
.sec-faq__mark::before,
.sec-faq__mark::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.sec-faq__mark::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.sec-faq__mark::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); transition: opacity 0.2s ease; }
.sec-faq__item[open] .sec-faq__mark::after { opacity: 0; }

@media (max-width: 900px) {
  .sec-faq__title { font-size: 30px; line-height: 38px; }
  .sec-faq__q { font-size: 17px; padding: 18px 16px; }
  .sec-faq__a { padding: 24px 16px; }
}

/* ============================================================
   14 · FINAL CTA  (Figma 830:10865)
   ============================================================ */
.sec-cta__banner {
  position: relative;
  overflow: hidden;
  /* constrained, centred banner width */
  max-width: 1126px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 62px 65px;
  border-radius: 20px;
  /* same background as sec-workforce: light gradient + soft green→blue glow.
     Fixed in both themes, so the foreground below is fixed dark. */
  background: linear-gradient(0deg, #fefdff 0%, #f1edf8 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 30, 77, 0.08);
}
.sec-cta__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 150% at 12% 118%, rgba(249, 255, 235, 0.9) 0%, rgba(249, 255, 235, 0) 55%),
    radial-gradient(78% 180% at 34% 24%, rgba(69, 99, 255, 0.28) 0%, rgba(69, 99, 255, 0) 60%);
}
.sec-cta__banner > * { position: relative; z-index: 1; }
.sec-cta__icon {
  flex-shrink: 0;
  width: 106px;
  height: 100px;
  color: #1f1e4d;
}
.sec-cta__copy { flex: 1 1 auto; min-width: 0; }
.sec-cta__title { margin: 0; color: #1f1e4d; font: 500 40px/52px var(--z-font); letter-spacing: -0.0025em; }
.sec-cta__sub { margin: 4px 0 0; color: #4b4a6c; font: 500 24px/34px var(--z-font); letter-spacing: -0.0025em; }
.sec-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font: 500 16px/24px var(--z-font);
  letter-spacing: 0.001em;
  cursor: pointer;
  background:
    linear-gradient(#1c1c2f, #1c1c2f) padding-box,
    linear-gradient(90deg, rgba(75, 75, 75, 0.47) 14%, #fff 34%, rgba(75, 75, 75, 0.25) 100%) border-box;
  transition: opacity 0.2s ease;
}
.sec-cta__btn:hover { opacity: 0.9; }

@media (max-width: 860px) {
  .sec-cta__banner { flex-wrap: wrap; gap: 24px; padding: 40px 32px; }
  .sec-cta__icon { width: 72px; height: 68px; }
  .sec-cta__title { font-size: 28px; line-height: 36px; }
  .sec-cta__sub { font-size: 18px; line-height: 26px; }
  .sec-cta__btn { flex: 1 1 100%; }
}

/* ============================================================
   15 · AI WORKFORCE — specialist-agent orbit (Azlytics 8091:2671)
   Fixed LIGHT band in both themes (design gradient + blurred glow):
   heading, phone-on-circle centre, 6 callouts (3 per side), CTA.
   sec-reuse is appended AFTER this band and keeps its own background.
   ============================================================ */
.sec-workforce { padding: 0; }
.sec-workforce__band {
  position: relative;
  overflow: hidden;
  /* tighter than the default band padding so the whole composition (title +
     callouts + phone) fits in one viewport while the section is pinned */
  padding: clamp(56px, 6vw, 88px) 0;
  background: linear-gradient(0deg, #fefdff 0%, #f1edf8 100%);
}
.sec-workforce__glow {
  position: absolute;
  top: -80px;
  left: -180px;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.sec-workforce__glow svg { display: block; max-width: none; }
.sec-workforce .container { position: relative; z-index: 1; }

.sec-workforce__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.sec-workforce__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f1e4d;
}
.sec-workforce__title {
  margin: 0;
  max-width: 820px;
  color: #1f1e4d;
  font: 500 clamp(34px, 4.4vw, 48px)/1.12 var(--z-font);
  letter-spacing: -0.05em;
  margin-bottom: 24px;
}
.sec-workforce__accent {
  background: linear-gradient(90deg, #ff6726 19%, #4563ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* orbit: [left callouts] [phone stage] [right callouts] */
.sec-workforce__orbit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(36px, 4.5vw, 68px);
}
.wf2__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
}
.wf2__feat { display: flex; align-items: flex-start; gap: 18px; max-width: 340px; }
.wf2__col--left { align-items: flex-end; text-align: right; }
.wf2__col--left .wf2__feat { flex-direction: row; }        /* text then dot */
.wf2__col--right { align-items: flex-start; text-align: left; }
.wf2__text { display: flex; flex-direction: column; gap: 8px; }
.wf2__feat-title { margin: 0; color: #1f1e4d; font: 500 18px/26px var(--z-font); letter-spacing: -0.02em; }
.wf2__feat-desc { margin: 0; color: #4b4a6c; font: 400 16px/26px var(--z-font); }

/* target icon — gradient ring + inner gradient dot (design ellipses) */
.wf2__dot {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(46deg, #ff6726 0%, #4563ff 99%) border-box;
}
.wf2__dot i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(46deg, #ff6726 0%, #4563ff 99%) border-box;
}

/* centre phone on stacked soft circles */
.wf2__stage {
  position: relative;
  z-index: 0;
  justify-self: center;
  align-self: center;
  /* slightly smaller so the taller title gap still fits the pinned viewport */
  width: clamp(260px, 28vw, 320px);
}
.wf2__stage::before,
.wf2__stage::after {
  content: "";
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
}
.wf2__stage::before { width: 216%; aspect-ratio: 1; background: rgba(255, 255, 255, 0.6); }
.wf2__stage::after { width: 152%; aspect-ratio: 1; background: #f4f4ff; }
/* phone: the frame image overlays a clipped screen viewport; the screen holds
   a vertical strip of dashboards translated by JS. Screen-window insets come
   from the transparent hole in wf-frame.webp (640×1294): 5.31% / 2.32%. */
.wf2__phone { position: relative; z-index: 1; width: 100%; aspect-ratio: 640 / 1294; }
.wf2__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.wf2__screen {
  position: absolute;
  left: 5.31%; top: 2.32%;
  width: 89.38%; height: 95.21%;
  z-index: 1;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}
/* both screens fill the window, stacked; the base is fixed and the "next" one
   starts just below the window and slides up over it (cover transition, JS) */
.wf2__screen-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
/* each next layer starts below the window; DOM order stacks them (screen 3 over
   screen 2 over the fixed base) so each slides up over the previous one */
.wf2__screen-img--next { transform: translateY(100%); will-change: transform; }

/* CTA — solid dark button (design instance 8091:2610) */
.sec-workforce__cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 84px); }
.wf2__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 35px;
  border-radius: 6px;
  background: #1c1c2f;
  color: #fff;
  font: 500 15px/1 var(--z-font);
  transition: background 0.25s ease, transform 0.25s ease;
}
.wf2__btn:hover { background: #29293f; transform: translateY(-2px); }
.wf2__btn svg { display: block; width: 14px; height: 14px; }

@media (max-width: 960px) {
  .sec-workforce__orbit { grid-template-columns: 1fr; gap: 44px; justify-items: center; }
  .wf2__stage { order: -1; width: clamp(240px, 60vw, 320px); }
  .wf2__stage::before, .wf2__stage::after { display: none; }
  .wf2__col { width: 100%; max-width: 420px; align-items: stretch !important; text-align: left !important; }
  .wf2__col--left .wf2__feat { flex-direction: row-reverse; justify-content: flex-end; }
  .wf2__feat { max-width: none; }
}

/* ============================================================
   16 · HOW IT WORKS — graduated-autonomy steps (Azlytics 8072:5981)
   Dark #1C1C2F band, fixed in both themes. sec-keep continues the same
   band directly below, so the two sections read as one block.
   ============================================================ */
.sec-hiw { background: #1c1c2f; }
.sec-hiw__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  max-width: 751px;
  margin: 0 auto;
}
.sec-hiw__badge {
  font: 500 14px/16px var(--z-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.sec-hiw__title {
  margin: 0;
  max-width: 720px;
  color: #fff;
  font: 500 43px/54px var(--z-font);
  letter-spacing: -0.06em;
  text-wrap: balance;
}
.sec-hiw__accent {
  background: linear-gradient(90deg, #ff6726 32%, #4563ff 79%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sec-hiw__sub { margin: 0; max-width: 560px; color: #b7b7b7; font: 400 16px/26px var(--z-font); }
.sec-hiw__badge, .sec-hiw__title, .sec-hiw__sub { text-align: center; }

/* stepped hexagons connected by a rule at hex-centre height */
.sec-hiw__steps {
  list-style: none;
  margin: clamp(48px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hiw-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
/* connector line — sits behind the hexes and is hidden under each hex box,
   leaving a clean segment between neighbours */
.hiw-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 35px;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 20px;
  /* bright fill grows left→right in lockstep with scroll (--fill 0→1, set by
     the ScrollTrigger onUpdate) — a linear wipe, not a discrete on/off */
  background: linear-gradient(90deg,
    #dbdbdb 0,
    #dbdbdb calc(var(--fill, 0) * 100%),
    rgba(183, 183, 183, 0.4) calc(var(--fill, 0) * 100%));
  transform: translateY(-50%);
}
.hiw-step__hex {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #1c1c2f;
  line-height: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hiw-step__hex img { display: block; width: 64px; height: auto; }
/* the lit (filled) hex sits over the idle outline and fades in on activation */
.hiw-step__hex-on { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.hiw-step.is-on .hiw-step__hex { transform: scale(1.18); }
.hiw-step.is-on .hiw-step__hex-on {
  opacity: 1;
  filter: drop-shadow(0 6px 20px rgba(120, 150, 255, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .hiw-step__hex, .hiw-step__hex-on { transition: none; }
}
.hiw-step__num { color: #fff; font: 500 20px/1 var(--z-font); letter-spacing: -0.03em; }
.hiw-step__body { display: flex; flex-direction: column; gap: 10px; max-width: 258px; }
.hiw-step__title { margin: 0; color: #8c8c8c; font: 500 clamp(26px, 2.4vw, 35px)/1.2 var(--z-font); letter-spacing: -0.05em; }
.hiw-step__desc { margin: 0; color: #b7b7b7; font: 400 16px/26px var(--z-font); }

@media (max-width: 900px) {
  .sec-hiw__title { font-size: 32px; line-height: 40px; }
  .sec-hiw__steps { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
  .hiw-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  /* vertical stepper — a node rail on the left, copy on the right */
  .sec-hiw__steps {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 400px;
    margin-inline: auto;
    padding-left: 2px;
  }
  .hiw-step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 4px 16px;
    align-items: start;
    justify-items: start;
    text-align: left;
    padding-bottom: 30px;
  }
  .hiw-step:last-child { padding-bottom: 0; }
  .hiw-step__hex { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .hiw-step__hex img { width: 46px; }
  .hiw-step.is-on .hiw-step__hex { transform: scale(1.08); }
  .hiw-step__num { grid-column: 2; grid-row: 1; font-size: 13px; color: #7c7c8f; letter-spacing: 0.04em; }
  .hiw-step__body { grid-column: 2; grid-row: 2; gap: 8px; max-width: none; }
  .hiw-step__title { font-size: 21px; line-height: 1.25; }
  .hiw-step.is-on .hiw-step__title { color: #fff; }
  .hiw-step__desc { font-size: 14.5px; line-height: 23px; }
  /* connector becomes a vertical rail between consecutive nodes */
  .hiw-step:not(:last-child)::after {
    display: block !important;
    content: "";
    position: absolute;
    left: 22px;
    top: 54px;
    bottom: 8px;
    width: 2px;
    height: auto;
    border-radius: 20px;
    transform: none;
    background: linear-gradient(180deg,
      #dbdbdb 0,
      #dbdbdb calc(var(--fill, 0) * 100%),
      rgba(183, 183, 183, 0.4) calc(var(--fill, 0) * 100%));
  }
}

/* ============================================================
   17 · FINAL CTA v2 — the brand gradient at full strength
   Replaces the pale #fefdff→#f1edf8 wash of §14. Every gradient stop is an
   existing brand value, not a new colour:
     #ff6726  accent-gradient start (used by every section title)
     #be45b9  --z-magenta
     #732cff  --lf-purple   ← declared as "primry coor", previously unused here
     #4563ff  accent-gradient end
   So this is the accent arc — currently only ever clipped to three words of a
   headline — finally rendered as a surface. Fixed in BOTH themes, like §14 and
   the other fixed bands.
   ============================================================ */
/* Placed IN FLOW between .sec-services and .sec-compare, both of which paint
   their own ground (--svc-bg / --cmp-bg). A default transparent section here
   would cut a page-white strip across two tinted bands, so .cta2 adopts the
   compare ground — in light mode both neighbours are #f3f4f7, so the run reads
   as one continuous field; in dark the only seam is the #000→#08080c one that
   already existed at the services/compare boundary.
   Padding 0: the neighbours' own 120px bottom/top supply all the air. */
/* full-bleed design band (Azlytics 4065:1619): the gradient paints the whole
   section edge-to-edge — no card, no radius — while the copy stays gutter-aligned
   via .container. Fixed in BOTH themes, like the other design bands. */
.cta2 {
  padding: 0;
  overflow: hidden;                 /* clips the ring halos + panel bleed */
  background: linear-gradient(46deg,
    rgb(255, 103, 38) 0%, rgb(69, 99, 255) 99%);
}
/* faint white concentric halos — the rgba(255,255,255,0.05) ellipses from the
   design, clustered lower-left and upper-right; overlapping bands read brighter
   toward each centre */
.cta2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 616px at 0% 118%,
      rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.13) 321px,
      rgba(255, 255, 255, 0.09) 321px, rgba(255, 255, 255, 0.09) 474px,
      rgba(255, 255, 255, 0.05) 474px, rgba(255, 255, 255, 0.05) 616px,
      transparent 616px),
    radial-gradient(circle 433px at 100% -30%,
      rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 329px,
      rgba(255, 255, 255, 0.05) 329px, rgba(255, 255, 255, 0.05) 433px,
      transparent 433px);
}

.cta2__banner {
  position: relative;
  z-index: 1;                       /* above the section gradient + halos */
  overflow: hidden;                 /* clips the panel's right-hand bleed */
  padding: 64px 0;                  /* horizontal gutter comes from .container */
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 48px;
}

/* ---- copy ---- */
.cta2__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 470px;
}
/* 600, deliberately — Satoshi ships only 500 and 700, so an authored 500 would
   render IDENTICALLY to the body copy below it. 600 resolves up to the 700 face
   and is the only way to get a real weight step in this typeface. */
.cta2__title {
  margin: 0;
  color: #fff;
  font: 600 clamp(32px, 3.1vw, 44px)/1.14 var(--z-font);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cta2__sub {
  margin: 0;
  max-width: 430px;
  color: rgba(255, 255, 255, 0.88);
  font: 400 17px/28px var(--z-font);
}
.cta2__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* match the hero CTAs — gradient (primary) + white (ghost), text only */
.cta2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 0;
  border-radius: 5px;
  font: 500 15px/24px var(--z-font);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 30, 77, 0.16);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.cta2__btn svg { display: none; }                /* no icon, like the hero */
.cta2__btn--primary { background: linear-gradient(46deg, #fc6da3, #4867ff); color: #fff; }
/* keep the label white on hover — override the global coral a:hover */
.cta2__btn--primary:hover { color: #fff; box-shadow: 0 8px 22px rgba(31, 30, 77, 0.22); }
.cta2__btn--ghost { background: #fff; color: #1f1e4d; }
.cta2__btn--ghost:hover { background: #f1f0fb; color: #1f1e4d; box-shadow: 0 8px 22px rgba(31, 30, 77, 0.22); }

/* ---- device cluster — desktop behind, iPad in front-right; both rise from
   the band's bottom edge and are cropped there (banner overflow:hidden). The
   stage stretches the band's content height; devices are absolutely placed and
   bleed right (-124px) + below the 64px bottom padding so they meet the crop. */
.cta2__devices {
  position: relative;
  align-self: stretch;
  justify-self: stretch;            /* fill the column — children are all absolute */
  min-height: 340px;
  /* NO horizontal bleed: both devices stay fully inside the band so they are
     only cropped at the bottom (never sliced on the side by the viewport). */
  margin: 0 0 -64px 0;
}
.dev { position: absolute; --p-ink: #1f1e4d; --p-label: #8e93a8; }

/* Desktop — browser chrome + analytics screen */
.dev--desktop {
  left: 0;
  bottom: -64px;                    /* cropped flush with the band bottom */
  width: 560px;
  border-radius: 14px 14px 0 0;
  background: #fff;
  box-shadow: 0 44px 90px -44px rgba(20, 10, 60, 0.5);
  overflow: hidden;
}
.dev-desk__bar {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  background: #f1f2f6; border-bottom: 1px solid #e6e7ee;
}
.dev-desk__dot { width: 10px; height: 10px; border-radius: 50%; background: #d3d5de; flex: none; }
.dev-desk__dot:nth-child(1) { background: #ff5f57; }
.dev-desk__dot:nth-child(2) { background: #febc2e; }
.dev-desk__dot:nth-child(3) { background: #28c840; }
.dev-desk__url {
  margin-left: 12px; padding: 5px 14px; border-radius: 7px;
  background: #fff; color: #9aa0b4;
  font: 500 11px/1 var(--z-font); letter-spacing: 0.01em;
}
.dev-desk__screen { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 18px; }

/* iPad — tablet body: wide, thin uniform bezel, camera dot on the top bezel */
.dev--ipad {
  right: 0;
  bottom: -64px;
  z-index: 2;                       /* in front of the desktop */
  width: 468px;
  padding: 16px 16px 0;             /* even bezel; bottom is off-screen (cropped) */
  border-radius: 34px 34px 0 0;
  background: #14151d;
  /* light-gray metallic rim around the black body + soft drop shadow */
  box-shadow:
    0 0 0 2.5px #c7cad6,
    0 44px 90px -34px rgba(12, 6, 40, 0.6);
}
.dev-ipad__cam {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #2c2e3a; box-shadow: inset 0 0 0 1.5px #0c0d13;
}
.dev-ipad__screen {
  border-radius: 18px 18px 0 0; overflow: hidden;
  background: #fff; padding: 20px 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
/* ---- builder mockup (desktop screen) — replaces the old billing dashboard.
   The screens now show the product itself: the workflow canvas and the Build
   with AI panel. Everything here is decorative; the cluster is aria-hidden. */
.bld__toolbar { display: flex; align-items: center; gap: 8px; }
.bld__spacer { flex: 1; }
.bld__model {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 8px; background: #f2f3f8; color: #4a4f63;
  font: 600 10px/1 var(--z-font);
}
.bld__model svg { width: 8px; height: 5px; }
.bld__run, .bld__publish {
  padding: 6px 12px; border-radius: 8px; font: 600 10px/1 var(--z-font);
}
.bld__run { background: #eef0fb; color: #4a4f63; }
.bld__publish { background: linear-gradient(46deg, #fc6da3, #4867ff); color: #fff; }

.bld { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
.bld__palette {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px; border-radius: 12px; background: #f7f8fc;
  border: 1px solid #eceef6;
}
.bld__tool {
  display: flex; align-items: center; gap: 7px;
  color: var(--p-ink); font: 600 9.5px/1 var(--z-font);
}
.bld__ico {
  display: grid; place-items: center; flex: none;
  width: 17px; height: 17px; border-radius: 5px;
  color: #fff; font: 700 8px/1 var(--z-font); font-style: normal;
}
.bld__ico--fn    { background: #8b5cf6; }
.bld__ico--var   { background: #6366f1; }
.bld__ico--if    { background: #f59e0b; }
.bld__ico--agent { background: #3b9fe0; }
.bld__ico--out   { background: #22b573; }
.bld__ico--loop  { background: #f97316; }

/* Canvas height is fixed at 186px so it matches the edge SVG's viewBox height:
   that lets nodes be positioned in raw px vertically and % horizontally, and
   the two stay in register at any canvas width. */
.bld__canvas {
  position: relative; height: 186px;
  border-radius: 12px; border: 1px solid #eceef6;
  background:
    radial-gradient(circle, #dfe2ee 1px, transparent 1px) 0 0 / 14px 14px,
    #fbfbfe;
}
.bld__edges { position: absolute; inset: 0; width: 100%; height: 186px; }
.bld__node {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px;
  border-radius: 7px; background: #fff;
  font: 600 8.5px/1 var(--z-font); color: var(--p-ink);
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 2px 6px -2px rgba(20, 10, 60, 0.22);
}
.bld__node i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.bld__node--green { border: 1.5px solid #22b573; }
.bld__node--green i { background: #22b573; }
.bld__node--blue  { border: 1.5px solid #7cc6e8; }
.bld__node--blue i { background: #3b9fe0; }
.bld__node--red   { border: 1.5px solid #f0a0a8; }
.bld__node--red i { background: #ec6b7a; }
.bld__node--amber { border: 1.5px solid #f5c464; }
.bld__node--amber i { background: #f59e0b; }

/* ---- Build with AI panel (iPad screen) ---- */
.pad__spark { color: #6d5cff; font-weight: 400; }
.bai__diff { display: flex; align-items: center; justify-content: space-between; }
.bai__counts { color: var(--p-label); font: 600 10px/1 var(--z-font); }
.bai__applied { color: #1c8a4e; font: 700 9px/1 var(--z-font); letter-spacing: 0.06em; }
.bai__steps { display: flex; flex-direction: column; gap: 9px; }
.bai__step b { display: block; color: var(--p-ink); font: 600 10.5px/1.25 var(--z-font); }
.bai__step span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px; color: var(--p-label); font: 500 9.5px/1.35 var(--z-font);
}
.bai__reply {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; padding: 9px 10px 9px 12px;
  border-radius: 10px; border: 1px solid #e8eaf3; background: #fafbff;
  color: var(--p-label); font: 500 10px/1 var(--z-font);
}
.bai__send {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #6d5cff; color: #fff; font: 700 10px/1 var(--z-font); font-style: normal;
}

/* iPad panel header */
.pad__top { display: flex; align-items: center; justify-content: space-between; }
.pad__title { color: var(--p-ink); font: 600 15px/1 var(--z-font); }
.pad__badge {
  padding: 4px 9px; border-radius: 6px; background: #f2f3f8;
  color: #7c8196; font: 600 10px/1 var(--z-font); letter-spacing: 0.06em;
}

/* ---- §18 · latest research rail — homepage link path into /research-insight.
   Cards are baked at build time by bakeResearchRail (build/build.mjs). ---- */
.sec-research__head { max-width: 720px; margin: 0 auto var(--z-s-6); text-align: center; }
.sec-research__eyebrow {
  margin: 0 0 14px; color: var(--z-violet);
  font: 700 13px/1 var(--z-font); letter-spacing: 0.12em; text-transform: uppercase;
}
.sec-research__title { margin: 0 0 14px; font: 500 40px/1.15 var(--z-font); letter-spacing: -0.03em; color: var(--z-text); text-wrap: pretty; }
.sec-research__accent { background: linear-gradient(46deg, #fc6da3, #4867ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-research__lead { margin: 0; color: var(--z-body); font: 400 17px/1.65 var(--z-font); text-wrap: pretty; }
.sec-research__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sec-research__card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px 24px; border-radius: 16px;
  background: var(--z-surface); box-shadow: rgba(24, 22, 105, 0.08) 0 15px 25px 0;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sec-research__card:hover { transform: translateY(-3px); box-shadow: rgba(24, 22, 105, 0.15) 0 24px 40px -4px; }
.sec-research__date { color: var(--z-dim); font: 600 12px/1 var(--z-font); letter-spacing: 0.04em; }
.sec-research__name {
  flex: 1; color: var(--z-text); font: 500 19px/1.35 var(--z-font); letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sec-research__go { color: var(--z-violet); font: 600 14px/1 var(--z-font); }
.sec-research__more { margin-top: 28px; text-align: center; }
.sec-research__all {
  display: inline-block; padding: 14px 28px; border-radius: 5px;
  background: var(--z-surface); color: var(--z-text); text-decoration: none;
  font: 500 15px/1 var(--z-font); box-shadow: rgba(0, 0, 0, 0.10) 0 0 0 1px inset;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sec-research__all:hover { transform: translateY(-1px); box-shadow: rgba(0,0,0,0.10) 0 0 0 1px inset, rgba(24,22,105,0.12) 0 12px 24px -10px; }
@media (max-width: 1000px) { .sec-research__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) {
  .sec-research__grid { grid-template-columns: 1fr; }
  .sec-research__title { font-size: 30px; }
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .cta2__banner { grid-template-columns: 1fr; gap: 40px; padding: 52px 44px 0; }
  .cta2__copy { max-width: none; }
  .cta2__sub { max-width: 560px; }
  /* stacked: devices become a centered, bottom-cropped stage */
  .cta2__devices { margin: 0 auto 0; min-height: 300px; width: min(620px, 100%); }
  .dev--desktop { bottom: 0; left: 50%; transform: translateX(-58%); }
  .dev--ipad { bottom: 0; right: 0; transform: translateX(6%); }
}
@media (max-width: 620px) {
  .cta2__banner { padding: 44px 22px 48px; }  /* devices gone → add bottom spacing */
  .cta2__title { letter-spacing: -0.03em; }
  .cta2__copy { align-items: center; text-align: center; } /* centre the content */
  .cta2__actions { width: 100%; }
  .cta2__devices { display: none; }            /* hide the device mockups */
  .cta2__btn { flex: 1 1 100%; }               /* stack full-width */
}
@media (prefers-reduced-motion: reduce) {
  .cta2__btn { transition: none; }
  .cta2__btn:hover { transform: none; }
}