/* ==========================================================================
   Trioperspective — FintechX-structure site
   Design tokens
   ========================================================================== */

:root {
  --bg: #ffffff;
  --ink: #16181c;
  --ink-2: #3d434d;
  --muted: #6b7280;
  --muted-2: #9aa1ac;
  --surface: #eef0f2;
  --surface-2: #f6f7f8;
  --line: #e5e7eb;
  --black: #0a0a0b;
  --black-2: #17181b;

  --brand: #ff6b00;
  --brand-2: #f97316;
  --brand-soft: rgba(255, 107, 0, .12);
  --brand-glow: rgba(255, 107, 0, .45);

  --ok: #10b981;
  --bad: #ef4444;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --pill: 999px;

  --shadow-card: 0 1px 2px rgba(16, 18, 22, .04), 0 8px 24px rgba(16, 18, 22, .06);
  --shadow-float: 0 24px 60px -12px rgba(16, 18, 22, .22), 0 8px 20px rgba(16, 18, 22, .08);
  --shadow-nav: 0 1px 2px rgba(16, 18, 22, .05), 0 12px 32px rgba(16, 18, 22, .10);

  --container: 1180px;
  --nav-h: 68px;

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

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 6.4vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.028em; }
p  { margin: 0; }

::selection { background: var(--brand); color: #fff; }

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

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

.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

/* ==========================================================================
   Type helpers
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 16px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.eyebrow--light {
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(16, 18, 22, .06);
}

.eyebrow--dark { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .82); }

.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}

.lede {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.section-head { display: grid; gap: 18px; justify-items: start; }
.section-head--center { justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
.section-head--split {
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 40px;
}
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } }

.section-head--split .head-right { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 861px) { .section-head--split .head-right { justify-items: end; text-align: right; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--black);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-inline: 10px 10px;
  padding-left: 26px;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
  will-change: transform;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  flex: none;
  transition: transform .28s var(--ease);
}
.btn:hover .btn__icon { transform: translateX(2px); }
.btn__icon svg { width: 15px; height: 15px; }

/* primary — brand orange with glow */
.btn--primary {
  --btn-bg: linear-gradient(180deg, #ff8434 0%, var(--brand) 62%, #ea5f00 100%);
  box-shadow: 0 0 0 1px rgba(255, 107, 0, .5), 0 10px 24px -6px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 107, 0, .6), 0 16px 34px -8px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .34); }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .26); }

/* dark */
.btn--dark {
  --btn-bg: linear-gradient(180deg, #2b2d33 0%, var(--black) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 22px -8px rgba(0, 0, 0, .35);
}

/* light / glass */
.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 18, 22, .08), 0 10px 24px -10px rgba(16, 18, 22, .22);
}
.btn--light .btn__icon { background: var(--surface); }
.btn--light .btn__icon svg { stroke: var(--ink); }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, .10);
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
}

.btn--sm { height: 44px; padding-left: 20px; font-size: .875rem; }
.btn--sm .btn__icon { width: 28px; height: 28px; }
.btn--sm .btn__icon svg { width: 13px; height: 13px; }

.btn--plain { padding-right: 26px; }

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

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-top: 18px;
  pointer-events: none;
  transition: padding-top .3s var(--ease);
}
.nav-wrap.is-stuck { padding-top: 10px; }

.nav {
  position: relative;
  pointer-events: auto;
  width: min(100% - 32px, 1000px);
  margin-inline: auto;
  height: var(--nav-h);
  padding: 0 10px 0 20px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav-wrap.is-stuck .nav { background: rgba(255, 255, 255, .94); }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(150deg, #2c2e34, var(--black));
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.brand__mark svg { width: 19px; height: 19px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__name b { font-weight: 700; color: var(--brand); }

.nav__links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
/* Direct children only — the mega-menu's own links live deeper and must not
   inherit the nav pill's padding, radius or colour. */
.nav__links > a {
  padding: 9px 15px;
  border-radius: var(--pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav__links > a:hover { background: var(--surface); color: var(--ink); }
.nav__links > a.is-active { background: var(--surface); color: var(--ink); }

.nav__cta { flex: none; }

/* ==========================================================================
   Services mega-menu
   ========================================================================== */

/* The panel anchors to the nav pill, not to the trigger — centring it on the
   trigger pushed it out past the nav's left edge. */
.has-mega { position: static; }

.nav__links .mega-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  border-radius: var(--pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -.012em;
  white-space: nowrap;
  background: none;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav__links .mega-trigger:hover { background: var(--surface); color: var(--ink); }
.mega-trigger svg {
  width: 11px; height: 11px;
  transition: transform .3s var(--ease);
}
.has-mega.is-open .mega-trigger svg { transform: rotate(180deg); }
.has-mega.is-open .mega-trigger { background: var(--surface); color: var(--ink); }

.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(calc(100vw - 32px), 780px);
  padding: 16px;
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(16, 18, 22, .06),
    0 2px 6px rgba(16, 18, 22, .06),
    0 30px 70px -18px rgba(16, 18, 22, .34);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--ease), transform .3s var(--ease), visibility .26s;
  z-index: 95;
}
.has-mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* hover bridge so the pointer can travel from trigger to panel */
.mega::before {
  content: "";
  position: absolute;
  inset: -18px 0 auto 0;
  height: 18px;
}

.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.mega__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  align-items: center;
  transition: background .2s var(--ease);
}
.mega__item:hover { background: var(--surface-2); }

/* Needs to outrank `.mega__item span` below, which would otherwise force
   display:block and drop the icon to the top of its tile. */
.mega__item .mega__ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
}
.mega__item .mega__ico svg { width: 19px; height: 19px; stroke: var(--brand); }

.mega__item b {
  display: block;
  font-size: .875rem; font-weight: 600; letter-spacing: -.018em;
  color: var(--ink);
  margin-bottom: 2px;
}
/* text column only — scoped so it can't reach the icon tile */
.mega__item > span:last-child,
.mega__item > span:last-child > span {
  display: block;
  font-size: .78rem; line-height: 1.45; color: var(--muted);
}

.mega__foot {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--black);
  color: #fff;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.mega__foot b { font-size: .875rem; font-weight: 600; letter-spacing: -.02em; }
.mega__foot p { font-size: .78rem; color: rgba(255, 255, 255, .58); }
.mega__foot .btn { margin-left: auto; }

@media (max-width: 940px) { .mega { display: none; } }

/* drawer sub-list on mobile */
.nav-drawer__group { display: grid; gap: 2px; }
.nav-drawer__label {
  padding: 12px 16px 4px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2);
}
.nav-drawer__group a { padding-left: 28px; font-size: .9375rem; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  place-items: center;
  flex: none;
}
.nav__burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; margin-left: auto; }
  .nav__cta { display: none; }
}

.nav-drawer {
  pointer-events: auto;
  width: min(100% - 32px, 1000px);
  margin: 10px auto 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-nav);
  padding: 12px;
  display: none;
  gap: 4px;
  flex-direction: column;
}
.nav-drawer.is-open { display: flex; animation: drawerIn .32s var(--ease); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } }
.nav-drawer a {
  padding: 13px 16px; border-radius: 14px;
  font-weight: 500; color: var(--ink-2);
}
.nav-drawer a:hover { background: var(--surface); color: var(--ink); }
.nav-drawer .btn { margin-top: 6px; justify-content: center; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 68px);
  padding-bottom: clamp(170px, 20vw, 330px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Bottom-anchored and scaled up so the two framing hills read large enough to
   actually flank the mockup — at 1:1 the valley sits too low and reads as a
   distant horizon rather than as mountains the dashboard emerges from. */
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.08);
  transform-origin: center bottom;
}
/* Soft scrim at the top for headline legibility; long tail at the bottom so the
   meadow dissolves into the page instead of ending on a hard horizontal edge. */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 24%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,.30) 76%,
      rgba(255,255,255,.72) 88%,
      rgba(255,255,255,.95) 96%,
      #fff 100%);
}

/* Cut-out hills layered ABOVE the mockup (z-index 2 vs the stage's 1), so the
   dashboard reads as rising out from between them rather than sitting on top. */
/* Cut from hero-hills.jpg itself and laid over the top with IDENTICAL sizing, so
   the two layers register pixel-for-pixel and read as one scene. The mockup sits
   between them (stage z-index 1, this z-index 2) and so rises out of the grass. */
.hero__fg {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero__fg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.08);
  transform-origin: center bottom;
}

.hero__inner { display: grid; gap: 21px; justify-items: center; }

.hero h1 { max-width: 21ch; }
/* let the headline wrap naturally on phones instead of honouring the desktop break */
@media (max-width: 620px) { .hero h1 br, .pagehero h1 br { display: none; } }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand) 10%, #ff9a4d 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__lede { max-width: 60ch; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.1875rem); }

/* inline trust row with hairline dividers, as in the reference */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 10px;
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.hero__trust-item svg { width: 18px; height: 18px; flex: none; }
.hero__trust-sep { width: 1px; height: 20px; background: rgba(16, 18, 22, .16); }
@media (max-width: 720px) { .hero__trust-sep { display: none; } }

/* The mockup breaks out of the text container and runs nearly edge-to-edge, so it
   reads as a wide product surface embedded in the landscape (FintechX runs its
   equivalent at ~123% of viewport; ours stops at 94% because this dashboard is
   live HTML and must not clip its own content). */
.hero__stage {
  margin-top: clamp(12px, 1.5vw, 26px);
  position: relative;
  z-index: 1;
  max-width: min(1120px, 66vw);
  padding-inline: 0;
}

/* ==========================================================================
   Stats bar
   ========================================================================== */

.statsbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statsbar__label { text-align: center; color: var(--muted); font-size: .9375rem; margin-bottom: 34px; }
.statsbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .statsbar__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }

.stat { text-align: center; display: grid; gap: 6px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.stat__num span { color: var(--brand); }
.stat__label { font-size: .875rem; color: var(--muted); line-height: 1.4; }

/* ==========================================================================
   Before / After compare
   ========================================================================== */

.compare { display: grid; justify-items: center; gap: 34px; }

.compare__switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 420px);
  border-bottom: 1px solid var(--line);
}
.compare__switch button {
  padding: 14px 8px 18px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted-2);
  transition: color .3s var(--ease);
}
.compare__switch button.is-active { color: var(--ink); font-weight: 600; }
.compare__switch::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 50%; height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: transform .42s var(--ease);
}
.compare__switch[data-state="after"]::after { transform: translateX(100%); }

.compare__stage { position: relative; width: 100%; }

/* Rendered dial (generated art) straddling the top edge of the panel. The steel
   knob crossfades to the brand-lit one when the panel flips to "after". */
.compare__knob {
  position: absolute;
  top: -46px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 92px;
  display: grid;
  place-items: center;
  z-index: 3;
  filter: drop-shadow(0 14px 26px rgba(16, 18, 22, .34));
  transition: filter .55s var(--ease);
}
.compare__knob-img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .5s var(--ease);
}
.compare__knob-img--on { opacity: 0; }

.compare.is-after .compare__knob { filter: drop-shadow(0 14px 30px rgba(255, 107, 0, .5)); }
.compare.is-after .compare__knob-img--off { opacity: 0; }
.compare.is-after .compare__knob-img--on { opacity: 1; }

.compare__panels { position: relative; }
.compare__panel {
  border-radius: var(--r-lg);
  padding: clamp(34px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
@media (max-width: 820px) { .compare__panel { grid-template-columns: 1fr; } }

/* Outgoing panel clears out before the incoming one arrives, so the two sets of
   copy never sit on top of each other mid-transition. */
.compare__panel--before {
  background: var(--surface);
  transition: opacity .26s var(--ease);
}
.compare__panel--after {
  position: absolute; inset: 0;
  background: var(--black);
  color: #fff;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .2s;
}
.compare.is-after .compare__panel--before { transition: opacity .3s var(--ease); }
.compare__panel--after .compare__bg {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
}
.compare__panel--after .compare__bg img { width: 100%; height: 100%; object-fit: cover; }
.compare__panel--after > * { position: relative; z-index: 1; }

.compare.is-after .compare__panel--before { opacity: 0; }
.compare.is-after .compare__panel--after { opacity: 1; pointer-events: auto; }

.compare__panel h3 { font-size: clamp(1.4rem, 2.3vw, 1.9rem); margin-bottom: 22px; max-width: 18ch; }
.compare__list { display: grid; gap: 14px; }
.compare__list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px;
  font-size: .9375rem; line-height: 1.5; color: var(--ink-2);
}
.compare__panel--after .compare__list li { color: rgba(255,255,255,.72); }
.compare__list svg { width: 15px; height: 15px; margin-top: 4px; }

.compare__metrics { display: grid; gap: 14px; align-content: start; }
.compare__metric {
  border-radius: var(--r-sm);
  padding: 18px 20px;
  background: #fdeaea;
}
.compare__panel--after .compare__metric {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.compare__metric b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1;
}
.compare__metric span { font-size: .875rem; color: var(--muted); }
.compare__panel--after .compare__metric span { color: rgba(255,255,255,.6); }
.compare__panel--after .compare__metric b { color: #fff; }

/* ==========================================================================
   Bento feature grid
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 52px;
}
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  min-height: 340px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.tile__head { text-align: center; display: grid; gap: 8px; }
.tile__head h3 { font-size: 1.25rem; }
.tile__head p { font-size: .9rem; color: var(--muted); line-height: 1.5; max-width: 34ch; margin-inline: auto; }

.tile--dark { background: var(--black); color: #fff; }
.tile--dark .tile__head p { color: rgba(255, 255, 255, .6); }

.tile--img { padding: 30px; }
.tile__bg { position: absolute; inset: 0; z-index: -1; }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; }
.tile__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.36) 36%, rgba(255,255,255,0) 60%),
    linear-gradient(0deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.5) 12%, rgba(255,255,255,0) 26%);
}

.tile--wide { grid-column: span 2; }
@media (max-width: 620px) { .tile--wide { grid-column: span 1; } }

.tile__body { margin-top: auto; padding-top: 26px; display: grid; place-items: center; }

.tile__link {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--brand);
  align-self: center;
}
.tile__link svg { width: 13px; height: 13px; transition: transform .28s var(--ease); }
.tile:hover .tile__link svg { transform: translateX(3px); }

/* Stretch the card's single link over the whole tile so the entire box is
   clickable, without nesting extra anchors (keeps one link per card for a11y). */
.tile:has(.tile__link) { cursor: pointer; }
.tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.tile__link:focus-visible::after {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
  border-radius: var(--r-lg);
}

.tile__icon {
  width: 152px; height: 152px;
  margin-inline: auto;
  filter: drop-shadow(0 16px 30px rgba(255, 107, 0, .3));
  transition: transform .5s var(--ease);
}
.tile:hover .tile__icon { transform: translateY(-5px) scale(1.03); }

/* mini widgets inside tiles */
.widget {
  width: 100%;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(16,18,22,.06), 0 12px 28px -14px rgba(16,18,22,.3);
  padding: 16px;
}

.widget__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding-inline: 9px;
  border-radius: var(--pill);
  font-size: .6875rem; font-weight: 600; letter-spacing: -.01em;
}
.chip--live { background: var(--ok); color: #fff; }
.chip--pos { background: #e7f8f0; color: #0d9268; }
.chip--dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

.spark { width: 100%; height: 92px; display: block; }

.axis { display: flex; justify-content: space-between; margin-top: 8px; }
.axis span { font-size: .625rem; color: var(--muted-2); letter-spacing: .02em; }

/* big word tile (BUY-style) */
.tile__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  letter-spacing: -.05em;
  line-height: .9;
  text-align: center;
  background: linear-gradient(180deg, #ff8434 8%, var(--brand) 52%, rgba(255,107,0,.28) 116%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-block: auto;
}

/* alert rows */
.alert-stack { display: grid; gap: 9px; width: 100%; }
.alert {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,18,22,.06), 0 10px 22px -14px rgba(16,18,22,.3);
}
.alert__dot {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface);
}
.alert__dot svg { width: 15px; height: 15px; }
.alert__txt { display: grid; gap: 1px; min-width: 0; }
.alert__txt small { font-size: .6875rem; color: var(--muted); }
.alert__txt b { font-size: .8125rem; font-weight: 600; letter-spacing: -.012em; }

.alert--ghost { opacity: .5; transform: scale(.95); }
.alert--ghost2 { opacity: .25; transform: scale(.9); }

/* donut */
.donut-wrap { display: grid; place-items: center; gap: 10px; }
.donut { width: 132px; height: 132px; }
.donut__hole { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.legend div { display: grid; justify-items: center; gap: 2px; }
.legend b { font-size: .9375rem; font-family: var(--font-display); letter-spacing: -.03em; }
.legend span { font-size: .6875rem; color: var(--muted); }
.legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* ==========================================================================
   Showcase (full-bleed image section)
   ========================================================================== */

.showcase {
  position: relative;
  padding-top: clamp(80px, 9vw, 130px);
  padding-bottom: clamp(170px, 20vw, 330px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.showcase__bg { position: absolute; inset: 0; z-index: -2; }
.showcase__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.showcase__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.72) 12%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,.32) 77%,
      rgba(255,255,255,.74) 88%,
      rgba(255,255,255,.95) 96%,
      #fff 100%);
}
.showcase__inner { display: grid; gap: 22px; justify-items: center; }
.showcase h2 { max-width: 16ch; }
.showcase .lede { max-width: 54ch; color: var(--ink-2); }
.showcase__stage {
  margin-top: clamp(40px, 5vw, 66px);
  max-width: min(1240px, 74vw);
  padding-inline: 0;
}

/* ==========================================================================
   Dashboard mockup (pure CSS/SVG)
   ========================================================================== */

.dash {
  width: 100%;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  display: grid;
  grid-template-columns: 216px 1fr;
  text-align: left;
  font-size: 13px;
  border: 1px solid rgba(16,18,22,.06);
}
/* Responsive strategy: the dashboard is a product mockup, not a live UI, so on
   small screens it keeps its true desktop composition and is scaled down as a
   whole (see the `zoom` steps at the end of this section). Reflowing it into a
   single column made the page enormously tall and stopped reading as a product. */

.dash__side {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 22px;
}
.dash__brand { display: flex; align-items: center; gap: 9px; padding-inline: 6px; }
.dash__brand .brand__mark { width: 28px; height: 28px; border-radius: 9px; }
.dash__brand .brand__mark svg { width: 15px; height: 15px; }
.dash__brand span { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: -.03em; }

.dash__nav { display: grid; gap: 2px; }
.dash__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  font-size: .8125rem; color: var(--muted); font-weight: 500;
}
.dash__nav a.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.dash__nav svg { width: 15px; height: 15px; flex: none; }

.dash__promo {
  margin-top: auto;
  background: linear-gradient(160deg, #26282e, var(--black));
  border-radius: 14px; padding: 16px; text-align: center;
  color: #fff;
}
.dash__promo b { display: block; font-size: .75rem; font-weight: 600; margin-bottom: 3px; }
.dash__promo p { font-size: .6875rem; color: rgba(255,255,255,.6); line-height: 1.4; margin-bottom: 11px; }
.dash__promo a {
  display: block; background: var(--brand); color: #fff;
  border-radius: var(--pill); padding: 7px; font-size: .6875rem; font-weight: 600;
}

.dash__main { min-width: 0; }

.dash__top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.dash__top h4 { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.dash__search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding-inline: 12px;
  background: var(--surface-2);
  border-radius: var(--pill);
  min-width: 180px;
  color: var(--muted-2); font-size: .75rem;
}
.dash__search svg { width: 13px; height: 13px; }
.dash__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--brand), #ffb27a);
  display: grid; place-items: center; color: #fff;
  font-size: .6875rem; font-weight: 700;
}

.dash__body { padding: 20px; display: grid; gap: 16px; }

.dash__title { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dash__title h5 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.dash__title small { color: var(--muted); font-size: .75rem; }
.dash__title .dash__actions { margin-left: auto; display: flex; gap: 7px; }
.dash__actions button {
  height: 28px; padding-inline: 12px; border-radius: 8px;
  font-size: .6875rem; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dash__actions button.is-primary { background: var(--brand); color: #fff; box-shadow: none; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi {
  border-radius: 12px; padding: 13px 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: 5px;
}
.kpi__top { display: flex; align-items: center; justify-content: space-between; }
.kpi__ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-soft); }
.kpi__ico svg { width: 13px; height: 13px; }
.kpi__delta { font-size: .625rem; font-weight: 700; color: #0d9268; }
.kpi__delta.is-down { color: var(--bad); }
.kpi small { font-size: .6875rem; color: var(--muted); }
.kpi b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.035em; }

.dash__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }

.panel {
  border-radius: 12px; padding: 15px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
}
.panel__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.panel__head b { font-family: var(--font-display); font-size: .875rem; font-weight: 700; letter-spacing: -.028em; display: block; }
.panel__head small { font-size: .6875rem; color: var(--muted); }
.panel__tabs { margin-left: auto; display: flex; gap: 3px; }
.panel__tabs span { font-size: .625rem; padding: 4px 8px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.panel__tabs span.is-active { background: var(--brand-soft); color: var(--brand); }

.table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.table th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: .6875rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.table td { padding: 9px 0; border-bottom: 1px solid var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table b { font-weight: 600; letter-spacing: -.01em; }
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font-size: .625rem; font-weight: 700;
}
.tag--up { background: #e7f8f0; color: #0d9268; }
.tag--warn { background: #fff2e3; color: #c25b06; }

/* ---- mockup scaling ----
   Below the container width the dashboard is pinned to its desktop width and
   shrunk with `zoom`, which (unlike `transform: scale`) also shrinks the layout
   box, so the surrounding section collapses to match. Steps are chosen to sit
   just inside the container's inner width at each breakpoint. */
@media (max-width: 1080px) { .dash { width: 1020px; zoom: .96; } }
@media (max-width: 980px)  { .dash { zoom: .89; } }
@media (max-width: 900px)  { .dash { zoom: .82; } }
@media (max-width: 800px)  { .dash { zoom: .73; } }
@media (max-width: 700px)  { .dash { zoom: .64; } }
@media (max-width: 620px)  { .dash { zoom: .56; } }
@media (max-width: 540px)  { .dash { zoom: .49; } }
@media (max-width: 480px)  { .dash { zoom: .43; } }
@media (max-width: 420px)  { .dash { zoom: .38; } }
@media (max-width: 380px)  { .dash { zoom: .34; } }

/* ==========================================================================
   Trust / how-it-works
   ========================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 52px;
}
@media (max-width: 980px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-card {
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 28px;
  display: grid;
  gap: 12px;
  align-content: start;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.trust-card:hover { transform: translateY(-4px); background: #e8ebee; }
.trust-card__n {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: #fff; color: var(--brand);
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  box-shadow: 0 1px 2px rgba(16,18,22,.07);
}
.trust-card h3 { font-size: 1.0625rem; letter-spacing: -.028em; }
.trust-card p { font-size: .9rem; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   How it works — stepped tabs
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.steps__aside { display: grid; gap: 20px; align-content: start; justify-items: start; }
.steps__aside h2 { max-width: 13ch; }
.steps__aside .lede { max-width: 40ch; }

.steps__figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 14px;
  max-width: 420px;
}
.steps__figure b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: 6px;
}
.steps__figure span { font-size: .875rem; color: var(--muted); line-height: 1.45; }

.steps__panel { position: relative; }

.steps__tabs {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: -22px;
  position: relative;
  z-index: 2;
  padding-right: 22px;
}
.steps__tabs button {
  height: 40px;
  padding-inline: 20px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.012em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.steps__tabs button.is-active { background: var(--black); color: #fff; }

.steps__stage {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 420px;
  overflow: hidden;
}

.steps__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 56px 34px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .5s var(--ease), visibility .45s;
}
.steps__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.steps__slide h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.steps__slide p { font-size: .9375rem; color: var(--muted); max-width: 42ch; line-height: 1.55; }

.steps__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  width: 100%;
}
.steps__pill {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(16,18,22,.08), 0 14px 30px -14px rgba(16,18,22,.3);
  flex: none;
}
.steps__pill svg { width: 30px; height: 30px; stroke: var(--ink-2); }
.steps__dash { flex: 1; max-width: 96px; border-top: 2px dashed #c9ced6; }
.steps__hero-ico {
  width: 118px; height: 118px;
  flex: none;
  margin-inline: 6px;
  filter: drop-shadow(0 16px 30px rgba(255, 107, 0, .34));
}

@media (max-width: 560px) {
  .steps__dash { max-width: 40px; }
  .steps__pill { width: 58px; height: 58px; }
  .steps__hero-ico { width: 92px; height: 92px; }
  .steps__tabs { justify-content: center; padding-right: 0; }
}

/* ==========================================================================
   Personas marquee
   ========================================================================== */

.marquee { overflow: hidden; margin-top: 52px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.persona {
  width: 306px; height: 348px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  flex: none;
  isolation: isolate;
}
.persona__bg { position: absolute; inset: 0; z-index: -1; }
.persona__bg img { width: 100%; height: 100%; object-fit: cover; }

.persona--text { padding: 26px; display: flex; flex-direction: column; }
.persona--text::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(170deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.18) 100%);
}
.persona--text h3 { font-size: 1.3rem; margin-bottom: 8px; }
.persona--text p { font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.persona__foot { margin-top: auto; }
.persona__foot b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.04em; line-height: 1;
  color: var(--ink);
}
.persona__foot span { font-size: .8125rem; color: var(--ink-2); }

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Full-bleed landscape band with a left-aligned head, an inline stat row and a
   horizontally scrolling wall of quote cards floating over the meadow. */
.reviews {
  position: relative;
  padding-block: clamp(80px, 9vw, 130px) 0;
  overflow: hidden;
  isolation: isolate;
}
.reviews__bg { position: absolute; inset: 0; z-index: -2; }
.reviews__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.reviews__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.78) 12%, rgba(255,255,255,.12) 32%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,255,255,0) 76%, rgba(255,255,255,.55) 90%, rgba(255,255,255,.92) 98%, #fff 100%);
}

.reviews__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 40px;
}
@media (max-width: 820px) { .reviews__head { grid-template-columns: 1fr; } }
.reviews__head h2 { max-width: 14ch; margin-bottom: 18px; }

.statline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.statline__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.statline__item svg { width: 17px; height: 17px; flex: none; }
.statline__sep { width: 1px; height: 18px; background: rgba(16, 18, 22, .16); }
@media (max-width: 560px) { .statline__sep { display: none; } }

.reviews__wall { margin-top: clamp(40px, 5vw, 64px); }
.reviews__row + .reviews__row { margin-top: 16px; }
.reviews__row .marquee__track { animation-duration: 64s; }
.reviews__row--rev .marquee__track { animation-direction: reverse; animation-duration: 76s; }
.quote-lead blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  letter-spacing: -.03em;
  line-height: 1.32;
  text-wrap: balance;
}
.quote-lead cite { font-style: normal; font-size: .875rem; color: var(--muted); }

.tcard {
  flex: none;
  width: 372px;
  border-radius: var(--r-lg);
  background: #fff;
  padding: 26px;
  display: grid; gap: 18px;
  align-content: start;
  box-shadow: 0 1px 2px rgba(16, 18, 22, .05), 0 18px 40px -20px rgba(16, 18, 22, .3);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tcard:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(16,18,22,.06), 0 26px 54px -20px rgba(16,18,22,.36); }
@media (max-width: 520px) { .tcard { width: 300px; padding: 22px; } }
.tcard__stars { display: flex; gap: 2px; }
.tcard__stars svg { width: 14px; height: 14px; }
.tcard p { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.tcard__who { display: flex; align-items: center; gap: 11px; }
.tcard__av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), #ffb27a);
  color: #fff; font-weight: 700; font-size: .8125rem;
}
.tcard__who b { display: block; font-size: .875rem; font-weight: 600; letter-spacing: -.015em; }
.tcard__who span { font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   Integrations
   ========================================================================== */

.integrations {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #f4f6f7 0%, var(--surface) 40%);
  padding: clamp(48px, 6vw, 84px) 24px clamp(200px, 24vw, 320px);
  text-align: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
/* Hills occupy the bottom band of the panel with a crisp top edge, exactly as in
   the reference — the grey surface meets the photograph, it does not fade into it. */
.integrations__bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(200px, 24vw, 320px);
  z-index: -1;
}
.integrations__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.integrations__inner { display: grid; gap: 20px; justify-items: center; max-width: 640px; margin-inline: auto; }
.integrations h2 { max-width: 15ch; }

.orbit {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 316px;
  margin: 44px auto 0;
}
.orbit__center {
  position: absolute; left: 50%; top: 150px; transform: translate(-50%, -50%);
  width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(160deg, #2b2d33, var(--black));
  display: grid; place-items: center;
  box-shadow: 0 20px 46px -10px rgba(0,0,0,.5);
  z-index: 3;
}
.orbit__center svg { width: 46px; height: 46px; }

.orbit__caption {
  position: absolute;
  left: 50%; top: 240px;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.375rem);
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--ink);
  z-index: 3;
}

.orbit__node {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(16,18,22,.08), 0 14px 30px -12px rgba(16,18,22,.3);
  font-weight: 800; font-size: .8125rem; letter-spacing: -.03em;
  animation: bob 5s ease-in-out infinite;
}
.orbit__node img { width: 30px; height: 30px; object-fit: contain; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 9px)); }
}

/* Six nodes on one circle around the hub (centre 50%/150px), mirrored in pairs
   at 195/150/105 deg and their reflections, so the arc reads as balanced. */
.orbit__node { transform: translate(-50%, -50%); }
.orbit__node--n1 { left: 17.8%; top: 184px; animation-delay: 0s; }
.orbit__node--n2 { left: 18.9%; top: 103px; animation-delay: .7s; }
.orbit__node--n3 { left: 31.8%; top: 41px; animation-delay: 1.4s; }
.orbit__node--n4 { left: 68.2%; top: 41px; animation-delay: .35s; }
.orbit__node--n5 { left: 81.1%; top: 103px; animation-delay: 1.05s; }
.orbit__node--n6 { left: 82.2%; top: 184px; animation-delay: 1.75s; }
@media (max-width: 860px) {
  .orbit { height: 250px; }
  .orbit__node { width: 54px; height: 54px; font-size: .6875rem; }
  .orbit__node img { width: 24px; height: 24px; }
}

/* Below ~640px there isn't room to scatter the nodes without them colliding with
   the hub, so the constellation becomes a plain centred grid. */
@media (max-width: 640px) {
  .orbit {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 16px 10px;
    max-width: 290px;
    margin: 30px auto 0;
  }
  .orbit__center {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: 78px; height: 78px;
    margin-bottom: 6px;
  }
  .orbit__center svg { width: 34px; height: 34px; }
  .orbit__node {
    position: static;
    width: 60px; height: 60px;
    font-size: .75rem;
  }
  .orbit__node img { width: 26px; height: 26px; }
  .orbit__caption {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    order: 1;
    margin-top: 12px;
  }
}

.integrations__note { font-size: .875rem; color: var(--muted); }

/* ==========================================================================
   Big stats
   ========================================================================== */

.bigstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
@media (max-width: 900px) { .bigstats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bigstats { grid-template-columns: 1fr; } }

.bigstat {
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 30px;
  display: grid; gap: 8px; align-content: start;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.bigstat:hover { transform: translateY(-4px); background: #e8ebee; }
.bigstat--brand {
  background: linear-gradient(160deg, #ff8434, var(--brand));
  color: #fff;
}
.bigstat--brand:hover { background: linear-gradient(160deg, #ff8f45, #ff7413); }
.bigstat--dark { background: var(--black); color: #fff; }
.bigstat--dark:hover { background: #17181b; }

.bigstat small { font-size: .8125rem; color: var(--muted); font-weight: 500; }
.bigstat--brand small { color: rgba(255,255,255,.8); }
.bigstat--dark small { color: rgba(255,255,255,.55); }
.bigstat b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); letter-spacing: -.045em; line-height: 1;
}
.bigstat p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.bigstat--brand p { color: rgba(255,255,255,.85); }
.bigstat--dark p { color: rgba(255,255,255,.6); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }

.faq-aside { display: grid; gap: 22px; align-content: start; justify-items: start; }
.faq-aside h2 { max-width: 12ch; }
.faq-aside .lede { max-width: 40ch; }

.faq-cta {
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 28px;
  display: grid; gap: 8px; justify-items: start;
  margin-top: 12px;
}
.faq-cta__avatars { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.faq-cta__stack { display: flex; }
.faq-cta__stack span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--surface);
  display: grid; place-items: center;
  color: #fff; font-size: .6875rem; font-weight: 700;
  margin-left: -9px;
}
.faq-cta__stack span:first-child { margin-left: 0; }
.faq-cta__plus { color: var(--muted); font-size: .875rem; }
.faq-cta__you {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 700;
}
.faq-cta b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.03em; }
.faq-cta p { font-size: .875rem; color: var(--muted); margin-bottom: 10px; }

.faq-list { display: grid; gap: 10px; }

.faq-item {
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: background .34s var(--ease), box-shadow .34s var(--ease);
}
.faq-item.is-open { background: var(--surface); box-shadow: inset 0 0 0 1px transparent; }

.faq-item__q {
  width: 100%;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  text-align: left;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.018em;
  color: var(--ink);
}
.faq-item__ico {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(16,18,22,.08);
  transition: background .34s var(--ease), transform .34s var(--ease);
}
.faq-item.is-open .faq-item__ico { background: var(--black); transform: rotate(180deg); }
.faq-item__ico svg { width: 13px; height: 13px; stroke: var(--ink); transition: stroke .34s var(--ease); }
.faq-item.is-open .faq-item__ico svg { stroke: #fff; }

.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  padding: 0 60px 22px 22px;
  font-size: .9rem; line-height: 1.6; color: var(--muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.finale {
  position: relative;
  min-height: 620px;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding-top: clamp(80px, 9vw, 130px);
  overflow: hidden;
  isolation: isolate;
}
.finale__bg { position: absolute; inset: 0; z-index: -2; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.finale__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.8) 16%, rgba(255,255,255,.16) 40%, rgba(255,255,255,0) 60%);
}
.finale__inner { display: grid; gap: 22px; justify-items: center; max-width: 640px; }
.finale h2 { max-width: 16ch; }
.finale .lede { color: var(--ink-2); max-width: 46ch; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--black);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* warm brand bloom bleeding up from the base of the footer */
.footer::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -340px;
  width: min(1100px, 130vw); height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 107, 0, .26) 0%, rgba(255, 107, 0, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---- contact strip ---- */
.footer__top {
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: 28px;
  align-items: center;
  padding-block: clamp(44px, 5vw, 68px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; } }

.footer__top h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 16ch;
  margin-bottom: 10px;
}
.footer__top p { font-size: .9375rem; color: rgba(255, 255, 255, .55); max-width: 44ch; }

.footer__contacts { display: grid; gap: 12px; }
@media (min-width: 821px) { .footer__contacts { justify-items: end; } }

.footer__contact {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .9375rem; font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .24s var(--ease);
}
.footer__contact:hover { color: var(--brand); }
.footer__contact span {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  transition: background .24s var(--ease);
}
.footer__contact:hover span { background: var(--brand-soft); }
.footer__contact svg { width: 15px; height: 15px; }

/* ---- link columns ---- */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1.05fr .78fr .78fr 1.2fr;
  gap: 40px 34px;
  padding-block: clamp(46px, 5vw, 68px);
}
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } .footer__news { grid-column: 1 / -1; } }
@media (max-width: 780px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px)  { .footer__grid { grid-template-columns: 1fr; } }

/* ---- newsletter ---- */
.footer__news { display: grid; gap: 12px; align-content: start; }
.footer__news p { font-size: .875rem; color: rgba(255, 255, 255, .55); line-height: 1.55; }

.footer__form { display: flex; gap: 8px; }
.footer__form input {
  flex: 1; min-width: 0;
  height: 46px;
  padding-inline: 16px;
  border-radius: var(--pill);
  border: 0;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  transition: box-shadow .24s var(--ease), background .24s var(--ease);
}
.footer__form input::placeholder { color: rgba(255, 255, 255, .38); }
.footer__form input:focus {
  outline: none;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px rgba(255, 107, 0, .18);
}
.footer__form button {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff8434, var(--brand));
  display: grid; place-items: center;
  box-shadow: 0 6px 18px -6px var(--brand-glow);
  transition: transform .24s var(--ease);
}
.footer__form button:hover { transform: translateY(-2px); }
.footer__form button svg { width: 16px; height: 16px; }

.footer__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.footer__badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 11px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .07);
  font-size: .6875rem; font-weight: 600;
  color: rgba(255, 255, 255, .7);
}
.footer__badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

/* ---- giant wordmark ----
   Rendered as SVG with textLength so the word always spans the container exactly,
   at any viewport width, and can never overflow or clip. */
.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  user-select: none;
  pointer-events: none;
  margin-top: 4px;
  margin-bottom: -2px;
}

.footer__brand { display: grid; gap: 16px; align-content: start; max-width: 34ch; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__mark { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.footer__brand p { font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.6; }

.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  transition: background .26s var(--ease), transform .26s var(--ease);
}
.footer__social a:hover { background: var(--brand); transform: translateY(-2px); }
.footer__social svg { width: 15px; height: 15px; }

.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__col h4 {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.footer__col a { font-size: .9rem; color: rgba(255,255,255,.68); transition: color .22s var(--ease); }
.footer__col a:hover { color: var(--brand); }

.footer__bar {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 26px; flex-wrap: wrap;
  font-size: .8125rem; color: rgba(255,255,255,.42);
}
.footer__bar a { transition: color .22s var(--ease); }
.footer__bar a:hover { color: var(--brand); }
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

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

/* ==========================================================================
   Inner page hero (service pages)
   ========================================================================== */

.pagehero {
  position: relative;
  padding-top: calc(var(--nav-h) + 90px);
  padding-bottom: clamp(56px, 6vw, 84px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.pagehero__bg { position: absolute; inset: 0; z-index: -2; }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pagehero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 30%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.92) 88%, #fff 100%);
}
.pagehero__inner { display: grid; gap: 22px; justify-items: center; }
.pagehero h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); max-width: 17ch; }
.pagehero .lede { max-width: 58ch; color: var(--ink-2); }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs svg { width: 11px; height: 11px; opacity: .5; }

/* service feature list */
.slist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
@media (max-width: 980px) { .slist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .slist { grid-template-columns: 1fr; } }

.scard {
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 28px;
  display: grid; gap: 12px; align-content: start;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.scard:hover { transform: translateY(-4px); background: #e8ebee; }
.scard__ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(16,18,22,.08);
}
.scard__ico svg { width: 19px; height: 19px; stroke: var(--brand); }
.scard h3 { font-size: 1.0625rem; }
.scard p { font-size: .9rem; color: var(--muted); line-height: 1.55; text-wrap: pretty; }

/* prose band */
.band {
  border-radius: var(--r-lg);
  background: var(--black);
  color: #fff;
  padding: clamp(36px, 5vw, 64px);
  display: grid; gap: 18px;
  position: relative; overflow: hidden; isolation: isolate;
}
.band__bg { position: absolute; inset: 0; z-index: -1; opacity: .42; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band h2 { max-width: 18ch; }
.band p { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.65; max-width: 62ch; text-wrap: pretty; }
.band__pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }

.band__icon {
  position: absolute;
  right: clamp(28px, 5vw, 70px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 15vw, 190px);
  filter: drop-shadow(0 22px 44px rgba(255, 107, 0, .4));
  pointer-events: none;
  animation: bob 6s ease-in-out infinite;
}
@media (max-width: 1000px) { .band__icon { display: none; } }

/* related links */
.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 620px) { .related { grid-template-columns: 1fr; } }
.related a {
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 22px 24px;
  display: flex; align-items: center; gap: 14px;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.related a:hover { transform: translateY(-3px); background: #e8ebee; }
.related b { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -.028em; display: block; }
.related span { font-size: .8125rem; color: var(--muted); }
.related svg { margin-left: auto; width: 16px; height: 16px; stroke: var(--brand); flex: none; }