/* Trooit landing page — desktop, 1440px fixed-width */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  color: #0e0e0e;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* full-bleed page: sections span 100% of the viewport; each section's __inner caps content at 1440px */
.page { width: 100%; }
.section { width: 100%; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 60px; }

/* ===== Floating navbar (Figma "Navigation", node 1:915) ===== */
.navbar {
  position: fixed;
  left: 50%;
  bottom: 30px;                       /* floats 30px above the viewport bottom */
  transform: translateX(-50%);
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 8px 8px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);
}
.navbar__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 22.475px;
  display: flex;
}
.navbar__logo img { width: 100%; height: 100%; object-fit: contain; }
.navbar__right { display: flex; align-items: center; gap: 16px; }
.navbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar__links a {
  display: inline-block;
  padding: 2px 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(23, 23, 23, 0.6);
  white-space: nowrap;
  transition: color 160ms ease;
}
.navbar__links a:hover { color: #171717; }
/* the CTA reuses the hero's blue button (.btn.btn--primary) — same shadows,
   shimmer animation and hover lift — just sized to fit the navbar pill */
.navbar__cta {
  height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .navbar__links { gap: 2px; }
  .navbar__links a { font-size: 14px; padding: 2px; }
  .navbar__inner { gap: 10px; padding: 6px 6px 6px 12px; }
  .navbar__cta { padding: 8px 10px; font-size: 14px; }
}

/* per-section styles appended below as we build */

/* ===== Reusable atoms ===== */
.pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 7px 13px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 30px;
  font-size: 14px;
  line-height: 20px;
  color: #0a0a0a;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border: 1px solid transparent;
  transition: filter 120ms ease, background 120ms ease;
}
.btn--primary {
  background: #155dfc;
  color: #ffffff;
  box-shadow:
    inset 0 4px 30px 0 rgba(255,255,255,0.6),
    0 6px 16px -4px rgba(21,93,252,0.45);
}
.btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 4px 30px 0 rgba(255,255,255,0.6),
    0 10px 24px -6px rgba(21,93,252,0.5);
}
.btn--ghost {
  background: #ffffff;
  color: #0f172b;
  border-color: #e2e8f0;
  padding: 13px 17px;
}
.btn--ghost:hover { background: #f8fafc; }

/* ===== Hero ===== */
.hero {
  height: 100vh;
  height: 100dvh;   /* accounts for mobile browser chrome where supported */
  background: #ffffff;
}
.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}
.hero__copy {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 660px;
}
.hero__headline-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero__headline {
  margin: 0;
  width: 600px;
  font-size: 48px;
  font-weight: 500;
  line-height: 52.8px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.hero__headline--muted { color: #45556c; }
.hero__headline--brand { color: #155dfc; }
.hero__sub {
  margin: 0;
  width: 440px;
  font-size: 16px;
  line-height: 24px;
  color: #45556c;
}
.hero__cta {
  display: flex;
  gap: 16px;
  align-items: center;
}
.hero__cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 100%;
}
.hero__logos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.hero__logos-label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #62748e;
}
.logo-marquee {
  width: 100%;
  /* Keeps the strip from ever growing wider than the CTA block above it:
     `contain: inline-size` makes the marquee contribute nothing to its
     ancestors' intrinsic width, so .hero__cta-block sizes to the buttons. */
  contain: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee 22s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track .logo-strip__item {
  flex: 0 0 auto;
  margin-right: 44px;
}
.logo-strip__item { object-fit: contain; }

.hero__visual {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  overflow: visible;
  container-type: size;
}
/* The right-hand email mock-up is composed at the Figma frame's 660 x 900 box,
   then scaled down so it always sits fully inside the 100vh hero — fitted to the
   viewport height and the column width, never blown up past 1:1. */
.hero__stage {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 660px;
  height: 900px;
  transform: scale(0.8);                                                  /* fallback */
  transform: scale(min(1, calc(100cqh / 780px), calc(100cqw / 660px)));
}
.email-card {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 -4px 20px 0 rgba(0,0,0,0.25),
    0 18px 30px -10px rgba(15,23,43,0.18);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
/* Show the full Figma artwork — no cropping; card height follows the image. */
.email-card img { display: block; width: 100%; height: auto; }
.email-card--1 {
  left: 170px; top: 104px;  width: 466.49px;
  z-index: 3;
}
.email-card--2 {
  left:   0px; top: 319.13px; width: 436.05px;
  z-index: 2;
}
.email-card--3 {
  left: 170px; top: 554px;  width: 465.54px;
  z-index: 3;
}
.email-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 -4px 20px 0 rgba(0,0,0,0.25),
    0 28px 40px -12px rgba(15,23,43,0.22);
}
.hero__doodle {
  position: absolute;
  left: 10.3%;
  bottom: 13%;
  width: 64px;
  height: 60px;
  transform: rotate(9deg);
  opacity: 0.9;
  pointer-events: none;
}

.t-red { color: #e7000b; }

/* ===== Section "Here's what we actually do" (1:64) ===== */
.actually { padding: 0 60px; background: #ffffff; }
.actually__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.actually__heading {
  margin: 0;
  text-align: center;
  font-size: 44px;
  font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.actually__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: end;
}
.actually-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  opacity: 0.8;
}
.actually-tab__label {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: rgba(23,23,23,0.5);
}
.actually-tab__bar {
  width: 100%;
  height: 4px;
  background: rgba(23,23,23,0.3);
  border-radius: 30px;
  overflow: hidden;
}
.actually-tab__fill {
  width: 90%;
  height: 100%;
  background: #d27a3b;
  border-radius: 30px;
}
.actually-tab--active .actually-tab__label { color: #d27a3b; }

/* Tab buttons */
.actually-tab {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.actually-tab .actually-tab__fill { width: 0; transition: width 350ms ease, background 200ms ease; }
.actually-tab.is-active .actually-tab__label,
.actually-tab.is-done .actually-tab__label { color: var(--tab-color, #d27a3b); }
/* tabs already passed in the cycle (or before the one you clicked) stay filled in their colour */
.actually-tab.is-done .actually-tab__fill {
  width: 100%;
  background: var(--tab-color, #d27a3b);
}
.actually-tab.is-active .actually-tab__fill {
  background: var(--tab-color, #d27a3b);
  /* progress bar for the auto-cycle: fills left -> right over 8s, then holds */
  animation: actually-tab-progress 8000ms linear forwards;
}
@keyframes actually-tab-progress {
  from { width: 0; }
  to   { width: 100%; }
}

/* Panels — only one visible at a time */
.actually__panel {
  position: relative;
  height: 607px;
  border-radius: 32px;
  overflow: hidden;
  display: none;
}
.actually__panel.is-active { display: flex; }

.actually__panel--complexity {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 33%,
      rgba(255,255,255,0.4) 53%,
      #c5efe1 69%,
      #81e6f2 83%,
      #015ec3 98%),
    #f5f5f5;
}
.actually-mail {
  width: 800px;
  height: 553px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 24px 28px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}
.actually-mail__head {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.actually-mail__head > div { display: flex; }
.actually-mail__head .actually-mail__from {
  display: flex;
  align-items: center;
  gap: 8px;
}
.actually-mail__avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(180deg,#5219ff 0%,#c301b6 100%);
  display: inline-block;
}
.actually-mail__addr {
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.5px; color: #000000;
}
.actually-mail__meta {
  position: absolute;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  right: 28px;
}
.actually-mail__head { position: relative; }
.actually-mail__icons { display: flex; gap: 8px; align-items: center; }
.actually-mail__date { font-size: 14px; font-weight: 500; color: rgba(0,0,0,0.6); letter-spacing: -0.5px; }

.actually-mail__lines { display: flex; flex-direction: column; gap: 8px; }
.actually-mail__lines p {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.actually-mail__lbl { color: rgba(0,0,0,0.6); }
.actually-mail__val { color: #000000; }

.actually-mail__pricecard {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}
.actually-mail__pricecard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.actually-mail__quote-block { display: flex; flex-direction: column; gap: 24px; }
.actually-mail__lead {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
  color: #171717;
}
.actually-mail__quote {
  margin: 0;
  width: 703px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: rgba(23,23,23,0.7);
  background-image: linear-gradient(rgba(252,21,21,0.2) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: 0 0;
  padding: 0 4px;
}
.actually-mail__row { display: flex; justify-content: space-between; align-items: flex-start; }

/* === Tab 2: The Problem === */
/* Background = the Figma "Frame 45" export (gradient + the faded "?" mark baked
   in). The CSS gradient + #f5f5f5 stay underneath purely as a load fallback. */
.actually__panel--problem {
  background:
    url('assets/problem-bg.png') center / cover no-repeat,
    linear-gradient(180deg,
      rgba(255,255,255,0) 33%,
      rgba(255,255,255,0.4) 53%,
      #ffcaca 69%,
      #f16060 83%,
      #fe3838 98%),
    #f5f5f5;
}
.memo-card {
  position: absolute;
  width: 395px;
  padding: 20px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.memo-card__text {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: rgba(23,23,23,0.7);
}
.memo-card__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba(23,23,23,0.6);
}
.memo-card__bar::before {
  content: "";
  height: 8px;
  background: rgba(23,23,23,0.3);
  border-radius: 30px;
  position: relative;
}
.memo-card__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 30px;
  background: #fe3838;
  pointer-events: none;
}

.memo-card--a { left: 209px; top: 66px; }
.memo-card--b { left: 773px; top: 97px; }
.memo-card--c { left: 244px; top: 386px; }
.memo-card--d { left: 710px; top: 304px; height: 112px; }

/* === Tab 3: What Trooit Does === */
/* Background = the Figma "Frame 108" export (2640x1214 — the spectacles, baked
   in). Gradient + #f5f5f5 kept underneath only as a load fallback. The step row
   lives in the top 144px (Figma y=108) so it never covers the specs below. */
.actually__panel--trooit {
  background:
    url('assets/trooit-bg.jpg') center / cover no-repeat,
    linear-gradient(180deg,
      rgba(255,255,255,0) 33%,
      rgba(255,255,255,0.4) 53%,
      #c5efe1 69%,
      #81e6f2 83%,
      #4aa1ff 98%),
    #f5f5f5;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 108px;
}
.trooit-row {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.trooit-step {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.06);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.trooit-step__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* keep each icon at its native Figma aspect ratio inside the 60px slot */
.trooit-step__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.trooit-step span {
  font-size: 20px;
  font-weight: 500;
  color: rgba(23,23,23,0.6);
  line-height: 1.4;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* === Tab 4: Outcome === */
.actually__panel--outcome {
  flex-direction: row;
  background: #f5f5f5;
}
.outcome-pane {
  flex: 1 1 0;
  height: 100%;
  padding: 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  color: #ffffff;
}
.outcome-pane--bad {
  background: linear-gradient(180deg, rgba(245,245,245,0) 0%, rgba(240,91,91,0.46) 0%, #f68f8f 66%, #f57f7f 100%);
}
.outcome-pane--good {
  background: linear-gradient(180deg, rgba(245,245,245,0) 0%, rgba(56,163,56,0.46) 0%, #7dde7d 66%, #8aee8a 100%);
}
.outcome-pane__badge {
  display: inline-flex;
  padding: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.5px;
  border-radius: 8px;
  color: #ffffff;
}
.outcome-pane__badge--bad { background: #f85858; }
.outcome-pane__badge--good { background: #56be56; }
.outcome-pane__lead {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #ffffff;
}
.outcome-pane__big {
  margin: 0;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -2px;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.outcome-mark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  opacity: 0.95;
}
/* Bang: container holds the teardrop + dot */
.outcome-mark--bang {
  width: 13.33%;
  height: 65.9%;
  right: 19.55%;
  bottom: -2%;
  background: transparent;
}
.outcome-bang__teardrop {
  position: absolute;
  inset: 0 0 28% 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.outcome-bang__dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
/* Check: 88.46% wide, vertically centered offset, rotated -2deg */
.outcome-mark--check {
  width: 88.46%;
  aspect-ratio: 583.858 / 446.827;
  left: 20.15%;
  top: calc(50% + 191.91px);
  transform: translateY(-50%) rotate(-2.06deg);
  transform-origin: center;
}
.outcome-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  background: #ffffff;
  border: 0;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.outcome-arrow img { width: 44px; height: 44px; }
.btn--sm { height: 48px; }

/* ===== Section 2: Quotes ===== */
.quotes {
  padding: 100px 60px;
  background: linear-gradient(180deg,#ffffff 0%,#fdfdfe 33%,#fafcfd 66%,#f8fafc 100%);
}
.quotes__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.quotes__heading {
  margin: 0;
  text-align: center;
  font-size: 44px;
  line-height: 48.4px;
  font-weight: 500;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.quote-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  height: 291.17px;
  padding: 17px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quote-card__body { display: flex; flex-direction: column; gap: 14px; }
.quote-card__quote {
  margin: 0;
  font-size: 22px;
  line-height: 30.8px;
  color: #0a0a0a;
  letter-spacing: -0.5px;
}
.quote-card__sub {
  margin: 0;
  font-size: 16px;
  line-height: 22.4px;
  color: #45556c;
}
.quote-card__sub strong { font-weight: 600; }
.quote-card__attr {
  margin: 0;
  font-size: 16px;
  line-height: 16px;
  color: #90a1b9;
  letter-spacing: -0.2px;
}
.quote-card__num {
  text-align: right;
  font-size: 60px;
  line-height: 60px;
  font-weight: 300;
  color: #f1f5f9;
}
.quotes__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 80px;
}
.quotes__tag {
  margin: 0;
  text-align: center;
  font-size: 28px;
  line-height: 37.5px;
  color: #0a0a0a;
}
.quotes__tag-hl {
  display: inline-block;
  background: rgba(252,206,21,0.2);
  padding: 0 4px;
}

.hl-yellow { background: rgba(252,206,21,0.2); padding: 2px 8px; }

/* ===== Section 3: ERP ===== */
.erp {
  padding: 100px 60px;
  background: linear-gradient(180deg,#f9fbfc 0%,#ffffff 100%);
}
.erp__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}
.erp__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.erp__heading {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.erp__subheading {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  color: #45556c;
}
.erp__line {
  margin: 0;
  font-size: 18px;
  line-height: 32.5px;
  color: #314158;
  max-width: 928px;
}
.erp__line--lg { font-size: 20px; }
.erp__cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
}
.erp-card {
  width: 448px;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
}
.erp-card--problem {
  background: #f8fafc;
  border: 1px dashed rgba(23,23,23,0.1);
  height: 297.5px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 3D question mark — two layered images inside a 440x440 box, shifted left so
   most of the "?" sits inside the card (the glow halo still bleeds off the right
   edge, which the card's overflow:hidden clips). No motion. */
.erp-card__qmark {
  position: absolute;
  width: 440px;
  height: 440px;
  top: -66px;
  left: 50%;
  transform: translateX(calc(-50% + 100px));
  pointer-events: none;
  overflow: hidden;
}
.erp-card__qmark-img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
}
.erp-card__qmark-img--main {
  top: 12.5%;
  left: 27.25%;
  width: 45.51%;
  height: 79.17%;
}
.erp-card__qmark-img--glow {
  width: 280px;
  height: 428px;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 1px), -50%);
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
  filter: blur(6px);
}
.erp-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #0a0a0a;
}
.erp-card__title--white { color: #ffffff; }
.erp-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.erp-card__list li {
  font-size: 18px;
  line-height: 29.25px;
  color: #314158;
  padding-left: 20px;
  position: relative;
}
.erp-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cad5e2;
}
.erp-card--trooit {
  height: 400px;
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-end;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(80% 60% at 95% 5%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(225deg,#ffffff 7%,#c5efe1 25%,#81e6f2 43%,#015ec3 78%);
  /* Figma: Inner shadow Y4 / blur40 / #ffffff 60%  +  Drop shadow Y20 / blur20 / #0064F9 40% */
  box-shadow:
    inset 0 4px 40px 0 rgba(255, 255, 255, 0.6),
    0 20px 20px 0 rgba(0, 100, 249, 0.4);
  color: #ffffff;
  transform: perspective(1200px) rotateX(2deg);
  transition: transform 300ms ease;
}
.erp-card--trooit:hover { transform: perspective(1200px) rotateX(0deg) translateY(-4px); }
.erp-card__logo {
  position: absolute;
  right: 14px;
  top: -18px;
  width: 141px;
  height: 141px;
  object-fit: contain;
  pointer-events: none;
}
.erp-card__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #ffffff;
  max-width: 398px;
}
.erp__footnote {
  width: 920px;
  background: rgba(35,85,251,0.06);
  border: 1px solid rgba(35,85,251,0.2);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.erp__footnote p { margin: 0; font-size: 16px; line-height: 1.4; color: #314158; }
.erp__footnote-sub { color: #45556c; }

/* ===== Section 4: Models grid ===== */
.models { padding: 100px 60px; background: #ffffff; }
.models__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.models__head { text-align: center; display: flex; flex-direction: column; gap: 16px; }
.models__heading {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.models__sub {
  margin: 0 auto;
  max-width: 768px;
  font-size: 18px;
  line-height: 28px;
  color: #45556c;
}
.models__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.model-card {
  background: #ffffff;
  border: 2px solid #f1f5f9;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 178px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.model-card:hover { border-color: #cbd5e1; transform: translateY(-2px); }
.model-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.model-card__icon svg,
.model-card__icon img { width: 24px; height: 24px; object-fit: contain; }
.model-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #0a0a0a;
}
.model-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 22.75px;
  color: #45556c;
}
.models__cta { display: flex; justify-content: center; }

/* ===== Section 5: Revenue leakage ===== */
.leakage { padding: 100px 60px; background: #0f172b; color: #ffffff; }
.leakage__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.leakage__intro { display: flex; gap: 60px; align-items: flex-start; }
.leakage__heading {
  margin: 0;
  flex: 0 0 625px;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.8px;
  color: #ffffff;
}
.leakage__copy { width: 600px; display: flex; flex-direction: column; gap: 4px; }
.leakage__copy p {
  margin: 0;
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(255,255,255,0.9);
}
.leakage__inline-mark {
  display: inline-block;
  background: #ffffff;
  color: #314158;
  padding: 0 4px;
  font-size: 20px;
  line-height: 28px;
}
.leakage__visual { display: flex; flex-direction: column; align-items: center; }
.leakage__glasses {
  position: relative;
  width: 854px;
  aspect-ratio: 1708 / 978;   /* Figma "Frame 61" export (glow halo included) */
  margin-top: 50px;           /* nudge the specs down (was 20px, +30px) */
  margin-bottom: -200px;
}
.leakage__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.leakage__card {
  width: 100%;
  background: rgba(23,23,23,0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}
.leakage__brand { display: flex; flex-direction: column; gap: 14px; }
.leakage__brand-logo {
  width: 121px;
  height: 38px;
  object-fit: contain;
  /* static glow — no animation */
  filter: drop-shadow(0 0 18px rgba(94, 234, 212, 0.35))
          drop-shadow(0 0 36px rgba(21, 93, 252, 0.3));
}
.leakage__brand-line {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.5px;
}
.leakage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.leakage__list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 20px;
  font-size: 18px;
  line-height: 29.25px;
  color: #ffffff;
}
.leakage__warn { flex: 0 0 20px; color: #f59e0b; font-size: 18px; line-height: 1; padding-top: 4px; }
.leakage__list strong { font-weight: 700; }
.leakage__note {
  margin: 20px 0 0;
  background: rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 12px;
  font-size: 18px;
  line-height: 29.25px;
  color: #ffffff;
}

/* shared headings */
.section-heading {
  margin: 0;
  text-align: center;
  font-size: 44px;
  font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.section-sub {
  margin: 0 auto;
  max-width: 768px;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: #45556c;
}

/* ===== Section 6: Persona tabs (1:385) ===== */
.persona { padding: 100px 60px; background: #ffffff; }
.persona__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 80px;
}
.persona__intro { display: flex; flex-direction: column; gap: 16px; }
.persona__heading {
  margin: 0;
  font-size: 44px; font-weight: 500;
  line-height: 48.4px; letter-spacing: -1.8px;
  color: #0a0a0a;
}
.persona__lede {
  margin: 0;
  width: 503px; max-width: 100%;
  font-size: 18px; line-height: 28px;
  color: #45556c;
}
.persona__grid { display: flex; gap: 60px; align-items: flex-start; }
.persona__tabs {
  flex: 0 0 420px;
  display: flex; flex-direction: column; gap: 16px;
}
.persona-tab {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: flex; align-items: center; gap: 12px;
  padding: 0;
  text-align: left;
  width: 420px;
  color: #45556c;
}
.persona-tab img { width: 20px; height: 20px; object-fit: contain; }
.persona-tab span { font-size: 18px; font-weight: 500; line-height: 24px; color: #45556c; }
.persona-tab.is-active span,
.persona-tab.is-active .persona-tab__hl {
  font-size: 36px; font-weight: 600; line-height: 1.2;
  letter-spacing: -1px;
  background-image: linear-gradient(180deg, #81e6f2 0%, #155dfc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.persona-tab.is-active img { width: 28px; height: 28px; align-self: flex-start; margin-top: 8px; }
.persona-tab:hover:not(.is-active) span { color: #0a0a0a; }

.persona__panels { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.persona-panel { display: none; flex-direction: column; gap: 20px; }
.persona-panel.is-active { display: flex; }
.persona-panel__art {
  height: 500px;
  width: 100%;
  border-radius: 32px;
  background: linear-gradient(216.65deg, #ffffff 7.56%, #c5efe1 25.46%, #81e6f2 43.49%, #015ec3 78.08%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.persona-panel__art img {
  width: 300px; height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,40,120,0.3));
}
.persona-panel__title {
  margin: 0;
  font-size: 30px; font-weight: 500;
  line-height: 36px;
  color: #0a0a0a;
}
.persona-panel__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.persona-panel__list li {
  position: relative;
  padding-left: 20px;
  font-size: 18px; line-height: 28px;
  color: #314158;
}
.persona-panel__list li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #155dfc;
}

/* ===== Section 7: 40 hours (1:464) ===== */
.forty { padding: 100px 60px; background: #ffffff; }
.forty__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 53px; align-items: center;
}
.forty__heading {
  margin: 0;
  width: 100%;
  font-size: 44px; font-weight: 500;
  line-height: 1.2; letter-spacing: -1.8px;
  color: #0a0a0a;
}
.forty__heading {
  width: 600px;
  align-self: stretch;
}
.forty__grid {
  display: flex; gap: 53px;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
}
.forty__chat {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 34px 34px;
  display: flex; flex-direction: column; gap: 30px;
}
.forty__chat-lead {
  margin: 0;
  font-size: 24px; line-height: 32px; color: #0a0a0a;
}

.forty-bubbles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  overflow: visible;
}
.forty-bubble {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: 12px;
  border-radius: 20px;
  font-size: 18px; line-height: 28px;
  width: 320px;
}
.forty-bubble--in {
  align-self: flex-start;
  background: #f5f5f5;
  color: #171717;
}
.forty-bubble--out {
  align-self: flex-end;
  background: #0c7df8;
  color: #ffffff;
}
.forty-bubble__tail {
  position: absolute;
  width: 40.58px;
  height: 43.86px;
  top: 46.26px;
  pointer-events: none;
  z-index: -1;
}
.forty-bubble__tail--gray { left: -7px; }
.forty-bubble__tail--blue { right: -6.08px; transform: scaleX(-1); }

/* Chat reveal — once the widget is in view the messages arrive one by one,
   each taking 0.3s to land. The "type a message" row stays put the whole time. */
.forty__chat:not(.is-chatting) .forty-bubble {
  opacity: 0;
}
.forty__chat.is-chatting .forty-bubble {
  animation: chat-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.forty__chat.is-chatting .forty-bubble:nth-child(1) { animation-delay: 0s; }
.forty__chat.is-chatting .forty-bubble:nth-child(2) { animation-delay: 0.3s; }
.forty__chat.is-chatting .forty-bubble:nth-child(3) { animation-delay: 0.6s; }
.forty__chat.is-chatting .forty-bubble:nth-child(4) { animation-delay: 0.9s; }
.forty__chat.is-chatting .forty-bubble:nth-child(5) { animation-delay: 1.2s; }
@keyframes chat-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.forty-input {
  display: flex;
  gap: 12px;
  align-items: center;
}
.forty-input__field {
  flex: 1 1 0;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 14px 12px;
  font-size: 18px; font-weight: 500;
  color: rgba(23,23,23,0.6);
  line-height: 1.2;
}
.forty-input__send {
  width: 50px; height: 50px;
  background: #0c7df8;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
}
.forty-input__send img { width: 24px; height: 24px; }

.forty-callout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.forty-callout__pill {
  align-self: flex-start;
  background: #fef2f2;
  border: 1px solid rgba(251,44,54,0.1);
  border-radius: 10px;
  padding: 12px;
  font-size: 20px; font-weight: 500;
  color: #fb2c36;
  line-height: 1.2;
}
.forty-callout__body {
  margin: 0;
  font-size: 18px; line-height: 29.25px;
  color: #314158;
}
.forty-callout__arrow {
  position: absolute;
  left: 212px;
  top: 5px;
  width: 90.57px;
  height: 52.6px;
  transform: rotate(12.53deg);
  pointer-events: none;
}

/* Right column — answer card with big "1" watermark */
.forty__answer {
  position: sticky;
  top: 100px;            /* stays pinned 100px below the top while you scroll the section */
  align-self: flex-start;
  width: 633.5px;
  flex: 0 0 auto;
}
.forty-card {
  position: relative;
  width: 100%;
  border-radius: 32px;
  border: 1px solid rgba(21,93,252,0.1);
  background: linear-gradient(180deg, #0f172b 0%, #334e91 100%);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.forty-card__bg {
  position: absolute;
  right: 79px;
  top: 42px;
  width: 122.91px;
  height: 310px;
  object-fit: contain;
  object-position: center;
  transform: scale(1.2);          /* the "1" — 1.2x bigger */
  mix-blend-mode: overlay;        /* blended into the card gradient */
  pointer-events: none;
  user-select: none;
}
.forty-card__sparkle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* recolour the sparkle to white + white glow (still blinks via sparkle-twinkle) */
  filter: brightness(0) invert(1)
          drop-shadow(0 0 8px rgba(255, 255, 255, 0.65))
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.4));
}
.forty-card__sparkle--a {
  right: 50px;
  top: 30px;
  width: 30px;
  height: 30px;
  transform: rotate(-12deg);
}
.forty-card__sparkle--b {
  right: 24px;
  top: 100px;
  width: 22px;
  height: 22px;
  transform: rotate(18deg);
}
.forty-card__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.forty-card__title {
  margin: 0;
  font-size: 24px; font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}
.forty-card__body {
  margin: 0;
  font-size: 18px; font-weight: 500;
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
}
.forty__doodle {
  position: absolute;
  right: 4%;
  top: calc(100% + 16px);   /* sits just below the "four questions" card */
  bottom: auto;
  width: 97.5px;            /* Figma "Layer_x0020_1" (node 1:513) size */
  height: 72.5586px;
  object-fit: contain;
  pointer-events: none;
}

/* ===== Section 8: Recognition (1:517) ===== */
.recog { padding: 100px 60px; background: #ffffff; }
.recog__inner {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 64px;
  align-items: center;
}
.recog__heading {
  margin: 0;
  width: 600px;
  font-size: 44px; font-weight: 500;
  line-height: 1.2; letter-spacing: -1.8px;
  text-align: center;
  color: #0a0a0a;
}

.recog__row { display: flex; gap: 32px; align-items: stretch; width: 100%; }

/* both cards fill the row's height — grey and yellow always match */
.recog-card { border-radius: 20px; padding: 24px; align-self: stretch; }
.recog-card--example {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 24px;
  flex: 0 0 auto;
  width: 460px;
}
.recog-card__lead {
  margin: 0;
  font-size: 18px; line-height: 1.4;
  color: #0a0a0a;
  width: 396px;
}
.recog-card__lead strong { font-weight: 700; }

/* the red + green UI pills sit 12px apart */
.recog-pills { display: flex; flex-direction: column; gap: 12px; }
.recog-pill {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
}
.recog-pill--bad {
  background: #fef2f2;
  border: 1px solid rgba(231,0,11,0.2);
}
.recog-pill--good {
  background: #f0fdf4;
  border: 1px solid rgba(0,166,62,0.2);
}
.recog-pill__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.recog-pill__copy { display: flex; flex-direction: column; gap: 8px; }
.recog-pill__top { margin: 0; font-size: 16px; line-height: 1.1; color: #0a0a0a; }
.recog-pill__bot { margin: 0; font-size: 16px; line-height: 1.4; color: #0a0a0a; }
.recog-pill__bot strong { font-weight: 700; }

.recog-card--multiply {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: #fefce8;
  border: 1px solid #fff085;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
/* headache figure (Figma "healthicons:headache-outline-24px", node 38:2) —
   placed bottom-right of the yellow card at its exact Figma size with the
   aspect ratio locked; it overflows the card edge so only the head + torso
   stay visible (legs/feet clipped by the card's overflow:hidden) */
.recog-card__bg {
  position: absolute;
  right: 34px;
  bottom: -45px;
  width: 161.125px;
  height: 250.017px;
  aspect-ratio: 161.125 / 250.017;
  opacity: 0.3;
  pointer-events: none;
}
.recog-card__title {
  margin: 0;
  font-size: 20px; font-weight: 600;
  line-height: 28px;
  color: #0a0a0a;
  position: relative;
  z-index: 1;
}
.recog-list {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.recog-list li {
  font-size: 16px; line-height: 28px;
  color: #314158;
  padding-left: 18px;
  position: relative;
}
.recog-list li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: #dbc840;
  font-size: 18px;
  line-height: 28px;
}

.recog__quote {
  margin: 0;
  width: 700px;
  font-size: 20px; line-height: 1.4;
  color: #0a0a0a;
  text-align: center;
}
.recog__quote-hl {
  background: rgba(252,206,21,0.2);
  padding: 0 4px;
}

.recog__cta {
  width: 100%;
  background: linear-gradient(180deg, #0f172b 0%, #334e91 100%);
  border: 1px solid #bedbff;
  border-radius: 32px;
  padding: 30px;
  display: flex; flex-direction: column;
  gap: 32px;
}
.recog__cta-row { display: flex; gap: 60px; align-items: stretch; }
.recog__cta-left {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.recog__cta-logo { width: 128px; height: 40px; object-fit: contain; }
.recog__cta-title {
  margin: 0;
  font-size: 36px; font-weight: 500;
  line-height: 1.1; letter-spacing: -1px;
  color: #ffffff;
}
.recog__cta-card {
  position: relative;
  flex: 1 1 0;
  border-radius: 28px;
  padding: 24px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  overflow: hidden;
  /* exported straight from Figma (node 39:11) — gradient + rupee glyph baked in */
  background: url('assets/contract-value-bg.jpg') center / cover no-repeat;
}
.recog__cta-label { margin: 0; font-size: 14px; line-height: 20px; color: #ffffff; }
.recog__cta-amount {
  margin: 0;
  font-size: 36px; line-height: 40px;
  color: #ffffff;
  font-weight: 400;
}

.recog-checks {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.recog-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 12px;
  font-size: 18px; line-height: 28px;
  color: #ffffff;
}
.recog-check__dot {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #00c950;
  color: #ffffff;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}

.recog__cta-foot {
  margin: 0;
  font-size: 20px; font-weight: 500;
  line-height: 32px;
  color: #ffffff;
}

/* ===== Section 9: Numbers (1:621) ===== */
.numbers { padding: 100px 60px; background: #ffffff; }
.numbers__inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.numbers__heading {
  margin: 0; text-align: center;
  font-size: 44px; font-weight: 500; line-height: 48.4px;
  letter-spacing: -1.8px; color: #0a0a0a;
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 315px);
  gap: 20px;
  justify-content: center;
}
.num-card {
  width: 315px;
  height: 278px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.num-card__value {
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 66px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(114deg, #2b7fff 0%, #155dfc 100%);
}
.num-card__value--blue   { background-image: linear-gradient(114deg, #2b7fff 0%, #155dfc 100%); }
.num-card__value--purple { background-image: linear-gradient(140deg, #ad46ff 0%, #9810fa 100%); }
.num-card__value--green  { background-image: linear-gradient(147deg, #00c950 0%, #00a63e 100%); }
.num-card__value--orange { background-image: linear-gradient(104deg, #ff6900 0%, #f54900 100%); }
.num-card__label {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  color: #0a0a0a;
}
.num-card__body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: #45556c;
  flex: 1 1 0;
}
.numbers__foot {
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  color: rgba(23,23,23,0.8);
  max-width: 770px;
}

/* ===== Section: Comparison (1:655) ===== */
.vs { padding: 100px 0; background: #f8fafc; }
.vs__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.vs__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vs__heading {
  margin: 0;
  font-size: 44px; font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.vs__sub-1 { margin: 0; font-size: 20px; line-height: 28px; color: #45556c; }
.vs__sub-2 { margin: 0; font-size: 18px; line-height: 28px; color: #62748e; }
.vs__sub-3 { margin: 0; font-size: 20px; line-height: 28px; color: #0a0a0a; }
.vs__sub-3 strong { font-weight: 500; }

.vs__table {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
}
.vs__row {
  display: grid;
  grid-template-columns: 518.64fr 120.66fr 227.28fr 155.42fr;
  border-bottom: 1px solid #f1f5f9;
}
.vs__row:last-child { border-bottom: 0; }
.vs__row--head {
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(238deg, #FFF -14.54%, #C5EFE1 -7.62%, #81E6F2 23.65%, #015EC3 55.62%),
              linear-gradient(90deg, #155DFC 0%, #F98A8C 103.77%);
  box-shadow: 0 4px 40px 0 rgba(255, 255, 255, 0.60) inset;
}
.vs__cell {
  padding: 24px;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  color: #0a0a0a;
}
.vs__cell--cap { color: #0a0a0a; }
.vs__cell--center { justify-content: center; text-align: center; }

.vs__row--head .vs__cell {
  font-size: 18px; font-weight: 600;
  line-height: 28px;
  color: #ffffff;
  padding: 24px;
}

.vs-icon { width: 24px; height: 24px; object-fit: contain; }
.vs-green  { color: #00a63e; font-weight: 500; }
.vs-orange { color: #d08700; }
.vs-grey   { color: #45556c; }

.vs__honest {
  background: #eff6ff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
}
.vs__honest-lead {
  margin: 0;
  font-size: 20px; font-weight: 500;
  line-height: 28px;
  color: #0a0a0a;
}
.vs__honest-body {
  margin: 0;
  font-size: 16px;
  line-height: 29.25px;
  color: #314158;
}
.vs__honest-foot {
  margin: 0;
  font-size: 18px;
  line-height: 29.25px;
  letter-spacing: -0.5px;
  color: #171717;
}
.vs__honest-foot strong { font-weight: 700; }

/* ===== Section 11: Timeline (1:757) ===== */
.golive { padding: 100px 60px; background: #ffffff; }
.golive__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 64px;
}
.golive__head { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.golive__heading {
  margin: 0;
  font-size: 44px; font-weight: 500;
  line-height: 48.4px; letter-spacing: -1.8px;
  color: #0a0a0a;
}
.golive__sub {
  margin: 0;
  font-size: 20px; line-height: 28px;
  color: #45556c;
}
.timeline {
  position: relative;
  padding: 0 32px;
  width: 100%;
}
.timeline__line {
  position: absolute;
  /* anchored exactly on dot 1's centre and dot 4's centre (4 equal grid
     columns, 32px side padding, 24px gaps) so it never spills past the end dots */
  left: calc(12.5% + 15px);
  right: calc(12.5% + 15px);
  top: 24px;
  height: 2px;
  background: #155dfc;
  z-index: 0;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.timeline__step {
  position: relative;
  z-index: 1;
}
.timeline__dot {
  width: 48px; height: 48px;
  margin: 0 auto;
  border-radius: 100px;
  background: #155dfc;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  line-height: 28px;
  box-shadow: inset 0 4px 30px 0 rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
}
.timeline__card {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  height: 227.75px;
}
.timeline__week {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 400;
  line-height: 16px;
  color: #155dfc;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.timeline__title {
  margin: 0 0 16px;
  font-size: 20px; font-weight: 500;
  line-height: 28px;
  color: #0a0a0a;
}
.timeline__body {
  margin: 0;
  font-size: 14px;
  line-height: 22.75px;
  color: #45556c;
}
.golive__cta { display: flex; justify-content: center; }

/* ===== Section 12: FAQ (1:801) ===== */
.faq {
  padding: 100px 200px;
  background: #f8fafc;
}
.faq__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.faq__heading {
  margin: 0;
  text-align: center;
  font-size: 44px; font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #0a0a0a;
}
.faq__list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.faq-item__sum {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
}
.faq-item__sum::-webkit-details-marker { display: none; }
.faq-item__toggle {
  background: rgba(21,93,252,0.1);
  border-radius: 4px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faq-item__icon { width: 16px; height: 16px; display: block; }
.faq-item__icon--open { display: none; }
.faq-item__icon--closed { display: block; }
.faq-item[open] .faq-item__icon--open { display: block; }
.faq-item[open] .faq-item__icon--closed { display: none; }
.faq-item__q {
  font-size: 18px;
  line-height: 28px;
  color: #0a0a0a;
}
.faq-item__a {
  border-top: 1px solid #f1f5f9;
  padding: 8px 24px 25px;
}
.faq-item__a p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: #314158;
}

/* ===== Section 14: Final CTA / Footer ===== */
.final {
  position: relative;
  background: #0f172b;
  color: #ffffff;
  padding: 100px 60px;
  overflow: hidden;
  isolation: isolate;
}
.final__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.final__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  max-width: 720px;
}
.final__heading {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 48.4px;
  letter-spacing: -1.8px;
  color: #ffffff;
}
.final__sub {
  margin: 0;
  font-size: 20px;
  line-height: 39px;
  color: #ffffff;
  width: 703px;
  max-width: 100%;
}
.final__line {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.final__coffee {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.final__disclaimer {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  opacity: 0.85;
}
.final__cta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 0;
}

/* Glowing rings on the right — Figma "Frame 109" (node 41:19), exported as a PNG,
   rotated 30deg. Opacity matches the Figma frame (70%). No animation. */
.final__rings {
  position: absolute;
  right: -300px;
  top: -180px;
  width: 1180px;
  height: 980px;          /* 1180 × 1163/1400 to keep the export's ratio */
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}
.final__rings-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* the Figma "Frame 109" export already has its 30° rotation baked in —
     don't re-rotate it here or it ends up doubled */
  mix-blend-mode: plus-lighter;
  /* lift the glow + saturation so the rings read clearly on the dark CTA */
  filter: drop-shadow(0 0 60px rgba(43, 127, 255, 0.7))
          drop-shadow(0 0 22px rgba(94, 234, 212, 0.55))
          saturate(1.2) brightness(1.18);
  pointer-events: none;
}

/* ===== Page footer (1:886) ===== */
.page-footer {
  position: relative;
  width: 100%;
  height: 800px;
  padding: 80px 60px 0;
  background: linear-gradient(180deg, #ffffff 0%, #155dfc 60.353%);
  overflow: hidden;
  isolation: isolate;
}
/* Figma "Ellipse 2": 1781×410 ellipse, fill #81E6F2, Layer blur 200.
   Figma layer-blur 200 == SVG feGaussianBlur stdDeviation 100 == CSS blur(100px). */
.page-footer__ellipse {
  position: absolute;
  bottom: -165.41px;
  left: 50%;
  transform: translateX(-50%);
  width: 1781px;
  max-width: 200%;
  height: 410px;
  border-radius: 50%;
  background: #81E6F2;
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}
.page-footer__brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-footer__logo {
  width: 121.74px;
  height: 38px;
  object-fit: contain;
}
.page-footer__tagline {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: rgba(23,23,23,0.7);
}
/* Trooit watermark — full-width along the bottom edge of the footer.
   SVG already has opacity 0.4 baked in. Anchored to the visible content area
   so the wordmark covers about the lower half of the footer. */
.page-footer__watermark {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 0;
  width: calc(100% - 120px);
  height: auto;
  aspect-ratio: 1320 / 412.033;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   ANIMATIONS & HOVER EFFECTS
   ============================================================ */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* show the chat messages immediately rather than staggering */
  .forty__chat .forty-bubble {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ---------- Keyframes ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes float-y-rotate {
  0%, 100% { transform: rotate(-30deg) translateY(0); }
  50%      { transform: rotate(-30deg) translateY(-10px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(21,93,252,0.45),
                     inset 0 4px 30px 0 rgba(255,255,255,0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(21,93,252,0),
                     inset 0 4px 30px 0 rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(21,93,252,0),
                     inset 0 4px 30px 0 rgba(255,255,255,0.6); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink-caret {
  0%, 50% { opacity: 1; }
  51%,100% { opacity: 0; }
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Scroll-triggered fade-in ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1),
              transform 700ms cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* ---------- Global card transitions ---------- */
.model-card,
.num-card,
.quote-card,
.persona-tab,
.faq-item,
.timeline__card,
.memo-card,
.recog-checks li,
.leakage__list li {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms ease,
              background-color 200ms ease;
}

/* Card hover lifts */
.model-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 28px -10px rgba(15,23,43,0.14);
}
.num-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(15,23,43,0.1);
}
.quote-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px -10px rgba(15,23,43,0.1);
}
.timeline__card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 22px -8px rgba(21,93,252,0.12);
}
.memo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.18);
}

/* FAQ items */
.faq-item:hover { border-color: #cbd5e1; }
.faq-item__sum { transition: background-color 180ms ease; }
.faq-item__sum:hover { background-color: #fafbfc; }
.faq-item[open] .faq-item__sum { background-color: transparent; }
.faq-item__a {
  animation: fade-up 280ms cubic-bezier(0.16,1,0.3,1);
}

/* Comparison table rows */
.vs__row { transition: background-color 180ms ease; }
.vs__row:not(.vs__row--head):hover { background-color: #f8fafc; }

/* ---------- Buttons ---------- */
.btn { transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
                  filter 180ms ease,
                  box-shadow 180ms ease,
                  background 200ms ease; }
.btn:active { transform: translateY(0) scale(0.98); }

/* Primary button shimmer + lift */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Ghost button — fill from corner */
.btn--ghost {
  position: relative;
  overflow: hidden;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f1f5f9;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
  z-index: -1;
}
.btn--ghost:hover::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero__copy > * { animation: fade-up 600ms cubic-bezier(0.16,1,0.3,1) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.hero__copy > *:nth-child(4) { animation-delay: 300ms; }

.hero__visual { animation: fade-up 800ms cubic-bezier(0.16,1,0.3,1) 200ms backwards; }
.email-card { transition: transform 280ms cubic-bezier(0.4,0,0.2,1),
                          box-shadow 280ms cubic-bezier(0.4,0,0.2,1); }
.email-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 -4px 20px 0 rgba(0,0,0,0.25),
    0 36px 50px -12px rgba(15,23,43,0.25);
  z-index: 10;
}

/* ---------- "Here's what we actually do" ---------- */
.actually-tab__label { transition: color 220ms ease; }
.actually-tab:hover:not(.is-active) .actually-tab__label { color: #0a0a0a; }
.actually-tab__fill { transition: width 380ms cubic-bezier(0.4,0,0.2,1),
                                 background 220ms ease; }


/* Outcome arrow rotate on hover */
.outcome-arrow {
  transition: transform 240ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 240ms ease;
}
.outcome-arrow:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 20px rgba(0,0,0,0.18);
}

/* ---------- Persona tabs ---------- */
.persona-tab {
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              color 200ms ease;
}
.persona-tab:not(.is-active):hover {
  transform: translateX(6px);
}
.persona-tab img { transition: transform 200ms ease; }
.persona-tab:hover img { transform: scale(1.1); }

/* ---------- ERP card ---------- */
.erp-card--problem {
  transition: transform 260ms cubic-bezier(0.4,0,0.2,1),
              border-color 200ms ease;
}
.erp-card--problem:hover {
  transform: translateY(-3px);
  border-color: rgba(23,23,23,0.2);
}

.erp-card--trooit {
  transition: transform 260ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 260ms ease;
}
.erp-card--trooit:hover {
  transform: perspective(1200px) rotateX(0deg) translateY(-6px);
}

/* ---------- Revenue leakage glasses ---------- */
.leakage__glasses {
  animation: float-y 6.5s ease-in-out infinite;
}
.leakage__list li:hover {
  background: rgba(255,255,255,0.16);
}

/* ---------- 40-hours card ---------- */
.forty-card__sparkle--a { animation: twinkle 2.4s ease-in-out infinite; }
.forty-card__sparkle--b { animation: twinkle 2.4s ease-in-out 1.2s infinite; }
.forty-bubble { transition: transform 220ms ease; }
.forty-bubble:hover { transform: translateX(2px); }

.forty-card { transition: transform 260ms cubic-bezier(0.4,0,0.2,1),
                          box-shadow 260ms ease; }
.forty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -12px rgba(15,23,43,0.4);
}

/* ---------- Recognition section ---------- */
/* (red/green UI pills and the yellow card are static — no hover motion) */
.recog__cta-card { transition: transform 280ms cubic-bezier(0.4,0,0.2,1),
                              box-shadow 280ms ease; }
.recog__cta-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 4px 40px 0 rgba(255,255,255,0.6),
              0 16px 30px -10px rgba(0,100,249,0.4);
}
.recog-checks li { transition: transform 200ms ease, background 200ms ease; }
.recog-checks li:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.16);
}

/* ---------- Numbers section ---------- */
.num-card__value { transition: transform 280ms cubic-bezier(0.4,0,0.2,1); }
.num-card:hover .num-card__value { transform: scale(1.04); }

/* ---------- Timeline ---------- */
.timeline__dot {
  transition: transform 240ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 240ms ease;
}
.timeline__step:hover .timeline__dot {
  transform: scale(1.12);
  animation: pulse-ring 1.5s ease-out infinite;
}
.timeline__line {
  background: linear-gradient(90deg, #155dfc, #5eead4, #155dfc);
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
}

/* ---------- Go-live roadmap reveal ---------- */
/* the connector rests collapsed on dot 1, then advances one segment per step
   (dot 1 → 2 → 3 → 4) and stops dead on dot 4 — it's only ever as long as the
   steps revealed so far */
.timeline__line {
  transform: scaleX(0);
  transform-origin: left center;
}
.timeline.is-rolling .timeline__line {
  animation: shimmer 8s linear infinite,
             timeline-line-grow 2000ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes timeline-line-grow {
  0%      { transform: scaleX(0); }       /* step 1 visible — line sits on dot 1 */
  33.333% { transform: scaleX(0.3333); }  /* step 2 — line reaches dot 2 */
  66.667% { transform: scaleX(0.6667); }  /* step 3 — line reaches dot 3 */
  100%    { transform: scaleX(1); }        /* step 4 — line reaches dot 4, stops */
}
/* each step (dot + card) waits its turn, then fades up — in sync with the line */
.timeline__step {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline.is-rolling .timeline__step {
  opacity: 1;
  transform: translateY(0);
}
.timeline.is-rolling .timeline__step:nth-child(2) { transition-delay: 0ms; }
.timeline.is-rolling .timeline__step:nth-child(3) { transition-delay: 667ms; }
.timeline.is-rolling .timeline__step:nth-child(4) { transition-delay: 1333ms; }
.timeline.is-rolling .timeline__step:nth-child(5) { transition-delay: 2000ms; }

/* ---------- CTA / Footer ---------- */
.page-footer__watermark { animation: fade-up 1s cubic-bezier(0.16,1,0.3,1); }

/* ---------- Reveal helpers (sections) ---------- */
.section,
.page-footer { will-change: auto; }

/* ============================================================
   RESPONSIVE
   Breakpoints:
     1280px and below → tablet-large (collapse some 4-col grids to 2-col)
     1024px and below → tablet
      768px and below → mobile
   Strategy: keep desktop layout intact > 1280px. Below that, fluid widths,
   stack side-by-side blocks, scale down typography.
   ============================================================ */

/* ---------- Tablet large: <= 1280px ---------- */
@media (max-width: 1280px) {
  .hero__inner { padding: 0 32px; gap: 32px; }
  .hero__visual { display: none; }   /* email stack only fits at full desktop width */
  .hero__copy { max-width: 720px; }

  .quotes__inner,
  .erp__inner,
  .models__inner,
  .leakage__inner,
  .persona__inner,
  .actually__inner,
  .forty__inner,
  .recog__inner,
  .numbers__inner,
  .vs__inner,
  .golive__inner,
  .faq__inner,
  .final__inner,
  .page-footer { padding-left: 32px; padding-right: 32px; }

  .models__grid { grid-template-columns: repeat(3, 1fr); }
  .numbers__grid { grid-template-columns: repeat(4, 1fr); justify-content: stretch; }
  .num-card { width: 100%; }

  /* Comparison table — allow horizontal scroll */
  .vs__table { overflow-x: auto; }
  .vs__row { min-width: 720px; }

  /* Timeline tighten */
  .timeline { padding: 0 16px; }
  .timeline__line { left: calc(12.5% + 3px); right: calc(12.5% + 3px); }

  /* Recognition card sizes */
  .recog-card--example { width: 420px; }
}

/* ---------- Tablet: <= 1024px ---------- */
@media (max-width: 1024px) {
  /* Section padding */
  .section { padding-left: 24px; padding-right: 24px; }
  .quotes,
  .erp,
  .models,
  .leakage,
  .dual,
  .persona,
  .forty,
  .recog,
  .numbers,
  .vs,
  .golive,
  .faq,
  .final { padding-left: 24px; padding-right: 24px; padding-top: 64px; padding-bottom: 64px; }
  .actually__inner { padding: 64px 0; }
  .actually { padding: 0 24px; }

  /* Hero — column */
  .hero { height: auto; padding: 80px 0; }
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px;
    gap: 48px;
    max-width: 100%;
  }
  .hero__copy { max-width: 100%; gap: 20px; }
  .hero__headline { width: 100%; font-size: 40px; line-height: 44px; }
  .hero__sub { width: 100%; }
  .hero__visual { display: none; }

  /* Generic headings scale */
  .quotes__heading,
  .erp__heading,
  .models__heading,
  .actually__heading,
  .leakage__heading,
  .persona__heading,
  .dual__heading,
  .forty__heading,
  .recog__heading,
  .numbers__heading,
  .vs__heading,
  .golive__heading,
  .faq__heading,
  .final__heading {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -1.2px;
  }

  /* Quotes grid: 3 → 1 columns */
  .quotes__grid { grid-template-columns: 1fr; gap: 16px; }
  .quote-card { height: auto; min-height: 240px; }

  /* ERP — stack two cards */
  .erp__inner { gap: 32px; }
  .erp__cards { flex-direction: column; align-items: stretch; gap: 16px; }
  .erp-card { width: 100% !important; }
  .erp-card__qmark { width: 280px; height: 280px; right: -40px; left: auto; top: -20px; transform: none; }
  .erp__footnote { width: 100%; }
  .erp__line { width: 100%; max-width: 100%; }

  /* Models grid: 4 → 2 */
  .models__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Revenue leakage — stack intro */
  .leakage__intro { flex-direction: column; gap: 24px; }
  .leakage__heading { flex: 1 1 auto; font-size: 36px; }
  .leakage__copy { width: 100%; }
  .leakage__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .leakage__glasses { width: 100%; max-width: 700px; height: auto; aspect-ratio: 1708 / 978; margin-bottom: -60px; }

  /* Persona tabs — stack */
  .persona__grid { flex-direction: column; gap: 32px; }
  .persona__tabs { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .persona-tab { width: auto; }
  .persona-tab.is-active span,
  .persona-tab.is-active .persona-tab__hl { font-size: 28px; }
  .persona__panels { width: 100%; }
  .persona-panel__art { height: 360px; }
  .persona-panel__art img { width: 220px; height: 220px; }

  /* "What we actually do" tabs */
  .actually__tabs { gap: 12px; }
  .actually-tab__label { font-size: 18px; }
  .actually__panel { height: auto; min-height: 480px; }
  .actually__panel--problem { padding: 24px; min-height: 560px; }
  .memo-card { position: static; width: 100%; }
  .actually__panel--problem { display: flex !important; flex-direction: column; gap: 12px; }
  .actually__panel--problem.is-active { display: flex !important; }
  .actually__panel:not(.is-active) { display: none !important; }
  .actually__panel--trooit { padding-top: 24px; }
  .trooit-row { flex-wrap: wrap; gap: 16px; }
  .actually-mail { width: 100%; max-width: 720px; }
  .actually-mail__quote { width: 100%; }
  .outcome-pane { padding: 20px; }
  .outcome-pane__big { font-size: 36px; letter-spacing: -1.2px; }

  /* 40-hours — stack columns */
  .forty__grid { flex-direction: column; gap: 32px; }
  .forty__chat { padding: 0; }
  .forty__answer { width: 100%; position: relative; top: auto; }
  .forty-card { padding: 24px; }
  .forty-bubble { width: 100%; max-width: 360px; }
  .forty-callout__arrow { display: none; }

  /* Recognition — stack */
  .recog__inner { width: 100%; }
  .recog__heading { width: 100%; max-width: 100%; }
  .recog__row { flex-direction: column; gap: 16px; }
  .recog-card--example { width: 100%; }
  .recog-card__lead { width: 100%; }
  .recog__quote { width: 100%; max-width: 720px; }
  .recog__cta-row { flex-direction: column; gap: 24px; }
  .recog-checks { grid-template-columns: 1fr; }

  /* Numbers — 4 → 2 */
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .num-card { width: 100%; height: auto; min-height: 220px; }

  /* Comparison table */
  .vs__inner { padding: 0 24px; }
  .vs__row { font-size: 14px; }

  /* Timeline — stack vertically */
  .timeline { grid-template-columns: 1fr; gap: 16px; padding: 0; }
  .timeline__line { display: none; }
  .timeline__step { display: flex; gap: 16px; align-items: flex-start; }
  .timeline__dot { margin: 0; flex: 0 0 48px; }
  .timeline__card { margin-top: 0; height: auto; flex: 1 1 0; min-width: 0; }

  /* FAQ */
  .faq { padding-left: 24px; padding-right: 24px; }
  .faq__inner { max-width: 100%; }

  /* CTA */
  .final__rings { right: -380px; opacity: 0.8; }
  .final__inner { z-index: 2; position: relative; }
  .final__heading { font-size: 32px; }
  .final__sub { font-size: 18px; line-height: 30px; width: 100%; }

  /* Page footer */
  .page-footer { height: auto; padding: 60px 24px; }
  .page-footer__watermark { left: 24px; right: 24px; width: calc(100% - 48px); }
  .page-footer__brand { margin-bottom: 200px; }
}

/* ---------- Mobile: <= 768px ---------- */
@media (max-width: 768px) {
  /* Tighter section padding */
  .section,
  .quotes,
  .erp,
  .models,
  .leakage,
  .dual,
  .persona,
  .forty,
  .recog,
  .numbers,
  .vs,
  .golive,
  .faq,
  .final { padding-left: 16px; padding-right: 16px; padding-top: 48px; padding-bottom: 48px; }
  .actually { padding: 0 16px; }
  .actually__inner { padding: 48px 0; gap: 32px; }

  /* Headings */
  .hero__headline { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .hero__headline span { font-size: 32px !important; line-height: 36px !important; }
  .hero__sub { font-size: 15px; line-height: 22px; }
  .pill { font-size: 12px; }

  .quotes__heading,
  .erp__heading,
  .models__heading,
  .actually__heading,
  .leakage__heading,
  .persona__heading,
  .forty__heading,
  .recog__heading,
  .numbers__heading,
  .vs__heading,
  .golive__heading,
  .faq__heading,
  .final__heading {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.8px;
  }

  /* CTA buttons */
  .hero__cta { flex-wrap: wrap; }
  .btn { font-size: 15px; height: 46px; }
  .btn--lg { height: 50px; }

  /* Logo marquee — tighter spacing on mobile */
  .logo-marquee__track .logo-strip__item { margin-right: 32px; }

  /* Models grid: 2 → 1 */
  .models__grid { grid-template-columns: 1fr; }

  /* Numbers: 2 → 1 */
  .numbers__grid { grid-template-columns: 1fr; }

  /* Revenue leakage list — single column */
  .leakage__list { grid-template-columns: 1fr; }
  .leakage__heading { font-size: 28px; }
  .leakage__inline-mark { font-size: 16px; line-height: 22px; }

  /* Persona tabs — vertical stack */
  .persona__tabs { flex-direction: column; gap: 14px; }
  .persona-tab.is-active span,
  .persona-tab.is-active .persona-tab__hl { font-size: 22px; }
  .persona-panel__art { height: 280px; }
  .persona-panel__art img { width: 160px; height: 160px; }
  .persona-panel__title { font-size: 24px; }

  /* "What we do" tabs — collapse labels */
  .actually__tabs { grid-template-columns: repeat(2, 1fr); display: grid; }
  .actually-tab { padding-top: 8px; }
  .actually-tab__label { font-size: 14px; }
  .actually__panel { min-height: auto; }
  .actually__panel--problem { min-height: 480px; }
  .actually-mail { padding: 16px; }
  .actually-mail__addr { font-size: 14px; }
  .actually-mail__lines p { font-size: 14px; flex-wrap: wrap; }
  .actually-mail__lead { font-size: 16px; }
  .actually-mail__quote { font-size: 16px; line-height: 22px; }
  .actually-mail__row { flex-direction: column; gap: 12px; align-items: flex-start; }
  .actually-mail__meta { position: static !important; align-items: flex-start; }
  .trooit-step { padding: 14px; gap: 10px; }
  .trooit-step span { font-size: 14px; }
  .trooit-step__icon { width: 44px; height: 44px; }
  .outcome-pane__lead { font-size: 22px; }
  .outcome-pane__big { font-size: 26px; line-height: 1.15; letter-spacing: -0.6px; }
  .outcome-pane__badge { font-size: 12px; padding: 6px 10px; }
  .outcome-mark--bang { width: 60px; }
  .outcome-mark--check { width: 80%; }

  /* Quotes */
  .quotes__inner { gap: 32px; }
  .quote-card { height: auto; min-height: auto; padding: 16px 18px; }
  .quote-card__quote { font-size: 18px; line-height: 26px; }
  .quote-card__num { font-size: 48px; line-height: 48px; }
  .quotes__cta { padding: 0; }
  .quotes__tag { font-size: 22px; line-height: 30px; }

  /* ERP */
  .erp-card--problem { height: auto; padding: 20px; }
  .erp-card__qmark { width: 200px; height: 200px; right: -20px; }
  .erp-card--trooit { height: auto; min-height: 280px; padding: 20px; }
  .erp-card__logo { width: 96px; height: 96px; right: 8px; top: -12px; }
  .erp-card__title { font-size: 20px; line-height: 26px; }
  .erp-card__list li { font-size: 16px; line-height: 24px; }
  .erp__line { font-size: 15px; line-height: 24px; }
  .erp__line--lg { font-size: 17px; }

  /* 40-hours card */
  .forty-card { padding: 20px; }
  .forty-card__title { font-size: 20px; }
  .forty-card__body { font-size: 15px; line-height: 22px; }
  .forty-bubble { font-size: 16px; line-height: 22px; padding: 10px; }
  .forty-callout__pill { font-size: 16px; padding: 8px 12px; }
  .forty-callout__body { font-size: 15px; line-height: 24px; }
  .forty__doodle { width: 97.5px; height: 72.5586px; }

  /* Recognition */
  .recog-card { padding: 18px; }
  .recog-card__lead { font-size: 16px; }
  .recog-pill__top, .recog-pill__bot { font-size: 14px; }
  .recog-card__title { font-size: 18px; }
  .recog-list li { font-size: 14px; line-height: 22px; }
  .recog__quote { font-size: 17px; line-height: 1.35; }
  .recog__cta { padding: 20px; gap: 20px; }
  .recog__cta-title { font-size: 24px; }
  .recog__cta-amount { font-size: 28px; line-height: 32px; }
  .recog__cta-foot { font-size: 16px; line-height: 24px; }
  .recog-checks li { font-size: 15px; line-height: 22px; padding: 10px; }

  /* Numbers */
  .num-card__value { font-size: 36px; line-height: 48px; }
  .num-card__label { font-size: 20px; line-height: 26px; }
  .num-card__body { font-size: 14px; line-height: 22px; }

  /* Comparison */
  .vs__cell { padding: 12px; font-size: 13px; }
  .vs__row--head .vs__cell { padding: 12px; font-size: 14px; }
  .vs__honest { padding: 16px; }
  .vs__honest-body { font-size: 14px; line-height: 22px; }
  .vs__honest-foot { font-size: 16px; line-height: 22px; }

  /* Timeline */
  .timeline__title { font-size: 18px; }
  .timeline__body { font-size: 13px; line-height: 20px; }
  .timeline__week { font-size: 11px; }

  /* FAQ */
  .faq-item__sum { padding: 16px; gap: 8px; }
  .faq-item__q { font-size: 16px; line-height: 22px; }
  .faq-item__a { padding: 8px 16px 16px; }
  .faq-item__a p { font-size: 14px; line-height: 22px; }

  /* CTA */
  .final__inner { padding: 40px 0; }
  .final__cta { flex-wrap: wrap; }
  .final__heading { font-size: 26px; line-height: 32px; }
  .final__sub { font-size: 16px; line-height: 26px; }
  .final__line { font-size: 15px; line-height: 22px; }
  .final__disclaimer { font-size: 12px; line-height: 18px; }
  .final__rings { display: none; }
  .final__doodle { display: none; }

  /* Footer */
  .page-footer__brand { margin-bottom: 120px; }
  .page-footer__logo { width: 100px; height: 32px; }
  .page-footer__tagline { font-size: 15px; line-height: 22px; }
  .page-footer { padding: 40px 16px; }
  .page-footer__watermark { left: 16px; right: 16px; width: calc(100% - 32px); }
}

/* ---------- Tiny phones: <= 380px ---------- */
@media (max-width: 380px) {
  .hero__headline { font-size: 28px; line-height: 32px; }
  .quotes__heading,
  .recog__heading,
  .models__heading,
  .leakage__heading,
  .actually__heading,
  .persona__heading,
  .vs__heading,
  .faq__heading,
  .golive__heading,
  .final__heading,
  .numbers__heading,
  .erp__heading,
  .forty__heading { font-size: 24px; line-height: 28px; }
  .btn { font-size: 14px; height: 42px; padding: 0 16px; }
  .actually__tabs { grid-template-columns: 1fr; }
}

/* ============================================================
   POLISH PASS
   ============================================================ */

/* Smooth scroll & better text rendering globally */
html { scroll-behavior: smooth; }

/* Brand-coloured text selection */
::selection { background: rgba(21, 93, 252, 0.2); color: #0a0a0a; }
::-moz-selection { background: rgba(21, 93, 252, 0.2); color: #0a0a0a; }

/* Subtle, brand-aware scrollbar (Chromium) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(21, 93, 252, 0.18);
  border-radius: 999px;
  border: 3px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover { background: rgba(21, 93, 252, 0.32); }

/* Visible focus ring for keyboard users (not on click) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid #155dfc;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Sparkle keyframes that preserve their rotation via CSS var --r */
.forty-card__sparkle {
  transform: rotate(var(--r, 0deg)) scale(1);
}
.forty-card__sparkle--a { --r: -12deg; animation: sparkle-twinkle 2.4s ease-in-out infinite; }
.forty-card__sparkle--b { --r:  18deg; animation: sparkle-twinkle 2.4s ease-in-out 1.2s infinite; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.95; transform: rotate(var(--r, 0deg)) scale(1); }
  50%      { opacity: 0.4;  transform: rotate(var(--r, 0deg)) scale(0.78); }
}

/* Hero headline — gradient sheen on the brand line */
.hero__headline--brand {
  background: linear-gradient(120deg, #155dfc 0%, #4aa1ff 40%, #155dfc 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-brand-sheen 9s ease-in-out infinite;
}
@keyframes hero-brand-sheen {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}

/* Snappier card hover for problem-card visuals */
.erp-card { transition: transform 220ms cubic-bezier(0.4,0,0.2,1), border-color 200ms ease, box-shadow 220ms ease; }

/* Quote-card subtle gradient overlay on hover */
.quote-card { position: relative; overflow: hidden; }
.quote-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 100%, rgba(21,93,252,0.06) 0%, transparent 60%);
  opacity: 0; transition: opacity 280ms ease;
  pointer-events: none;
  border-radius: inherit;
}
.quote-card:hover::after { opacity: 1; }


/* CTA recognition card — calendar floats */

/* Outcome arrow icon spin slightly on hover */
.outcome-arrow img { transition: transform 240ms cubic-bezier(0.4,0,0.2,1); }
.outcome-arrow:hover img { transform: translateX(2px); }

/* FAQ item — slight scale on the toggle icon */
.faq-item__toggle { transition: transform 200ms ease, background 200ms ease; }
.faq-item__sum:hover .faq-item__toggle {
  background: rgba(21,93,252,0.16);
  transform: scale(1.06);
}

/* Buttons — slightly tighter focus ring */
.btn:focus-visible { outline-offset: 3px; }

/* Footer polish — page-footer brand logo gentle lift */
.page-footer__brand:hover .page-footer__logo {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(21,93,252,0.18));
}
.page-footer__logo { transition: transform 220ms ease, filter 220ms ease; }

.num-card { position: relative; overflow: hidden; }

/* Better link / button transition uniformity */
a, button, [role="button"], .btn { transition-property: color, background-color, border-color, transform, box-shadow, filter, opacity; transition-duration: 220ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }