@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ink: #241f3f;
  /* headline navy */
  --body-text: #333333;
  --lavender: #c8c1f0;
  /* highlight / strip fill */
  --purple: #4b34c7;
  /* handles, dots, caret */
  --cream: #f0eae4;
  --lilac: #e7dcea;
  --pink: #f2c3bd;
  --salmon: #ec9c8d;
  --deep-salmon: #e78878;
  --btn-navy: #221f46;
  --btn-plum: #55305c;
  --btn-red: #d84a58;
  --guide-blue: #2f9df4;

  /* ---- extended tokens (new sections) ---- */
  --off-white: #f5f2ec;
  --card-white: #fbf9f5;
  --muted: #948d9e;
  --card-border: rgba(36, 31, 63, 0.08);
  --icon-lavender-a: #efe9ff;
  --icon-lavender-b: #d9cffa;
  --icon-salmon-a: #fbe2dd;
  --icon-salmon-b: #f2c3bd;

  /* ---- softened tints, used where a section needs a lighter wash ---- */
  --salmon-soft: #f7dad4;
  --pink-soft: #f8e2df;
  --lilac-soft: #f0e9f2;
}

body {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 44% at 74% 46%, rgba(120, 82, 200, 0.42) 0%, rgba(120, 82, 200, 0) 70%),
    linear-gradient(178deg,
      var(--cream) 0%,
      var(--lilac) 18%,
      var(--pink) 42%,
      var(--salmon) 60%,
      var(--deep-salmon) 76%,
      var(--off-white) 96%);
  padding: 0 64px 60px;
}

/* film grain */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- top bar: logo directly on the gradient ---- */

.topbar {
  position: relative;
  z-index: 2;
  padding: 26px 0 10px;
}

.logo img {
  height: 40px;
  width: auto;
}

/* ---- layout ---- */

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.hero__left {
  flex: 1 1 52%;
  max-width: 588px;
  min-width: 588px;
  padding-top: 34px;
}

.hero__right {
  flex: 1 1 48%;
  min-width: 540px;
  position: relative;
}

/* ---- pillars nav ---- */

.pillars {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 34px;
}

.pillars .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple);
}

/* ---- headline + selection mark ---- */

.headline {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(40px, 4.1vw, 56px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  color: #333333;
  margin-bottom: 22px;
}

/* "We build and grow" must stay on one line — exactly two lines total */
.headline__line1 {
  white-space: nowrap;
}

.mark {
  position: relative;
  display: inline-block;
  padding: 0 10px 0 8px;
  z-index: 0;
}

.mark::before {
  content: "";
  position: absolute;
  inset: 4px 0 2px 0;
  background: var(--lavender);
  z-index: -1;
}

/* text cursor at the end of the selection */
.caret {
  position: absolute;
  top: 6px;
  bottom: 4px;
  width: 1.5px;
  background: var(--purple);
}

.caret--left {
  left: 0;
}

.caret--right {
  right: 0;
}

/* selection handles */
.handle {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--purple);
}

.handle--start {
  top: -4px;
  left: -5px;
}

.handle--end {
  bottom: -4px;
  right: -5px;
}

/* ---- lede ---- */

.lede {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--body-text);
  max-width: 588px;
  margin-bottom: 28px;
  font-weight: 500;
}

/* ---- CTA ---- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 13px 15px 13px 26px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--btn-navy) 0%, var(--btn-plum) 58%, var(--btn-red) 100%);
  color: #fff;
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  box-shadow:
    0 14px 30px rgba(34, 31, 70, 0.30),
    0 4px 10px rgba(34, 31, 70, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 38px;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(34, 31, 70, 0.36),
    0 6px 12px rgba(34, 31, 70, 0.2);
}

.cta__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f4f4f0;
  color: var(--btn-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta__icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* hover: the arrow changes direction (↗ → →) */
.cta:hover .cta__icon svg {
  transform: rotate(45deg);
}

/* ---- system strip ---- */

.system-label {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 13px;
}

.system {
  position: relative;
  display: inline-block;
  max-width: none;
}

.system__strip {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 9px;
  background: var(--lavender);
  border-left: 1.5px solid var(--purple);
  border-right: 1.5px solid var(--purple);
  padding: 9px 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: #333333;
}

.system__strip .arrow {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.handle--sys-start {
  bottom: -5px;
  left: -5px;
}

.handle--sys-end {
  top: -5px;
  right: -5px;
}

/* ============ Phones ============ */

.phones {
  position: relative;
  height: 578px;
}

.phones__glow {
  position: absolute;
  inset: -8% -12%;
  background: radial-gradient(ellipse 52% 46% at 50% 46%, rgba(112, 74, 196, 0.42) 0%, rgba(112, 74, 196, 0) 70%);
  pointer-events: none;
}

.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 319px;
  /* front phone renders at 319 × 578, scaled to match the 517-wide Figma group bounding box */
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0s 0.45s;
  will-change: transform;
}

.phone img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(24, 16, 48, 0.38));
}

/* back phones sit slightly darker under the front one */
.pos-left img,
.pos-right img {
  filter: drop-shadow(0 22px 40px rgba(24, 16, 48, 0.3));
}

/* three positions in the stack */

.pos-front {
  z-index: 3;
  transform: translate(-50%, -50%) scale(1);
}

.pos-left {
  z-index: 1;
  transform: translate(-88%, -46%) scale(0.86);
}

.pos-right {
  z-index: 2;
  transform: translate(-12%, -46%) scale(0.86);
}

/* ============ Dashed guide line + crosshair ============ */

.guide {
  display: none;
  position: absolute;
  z-index: 2;
  top: 51.5%;
  left: 240px;
  right: 90px;
  align-items: center;
  pointer-events: none;
}

.guide__line {
  flex: 1;
  height: 0;
  border-top: 1.5px dashed var(--guide-blue);
  opacity: 0.85;
}

.guide__x {
  width: 20px;
  height: 20px;
  margin: 0 6px;
  color: var(--guide-blue);
}

.guide__x svg {
  width: 100%;
  height: 100%;
}

/* ============ Explore ============ */

.explore {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.explore__btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-navy) 0%, var(--btn-plum) 55%, var(--btn-red) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(34, 31, 70, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: explore-bob 1.8s ease-in-out infinite;
}

@keyframes explore-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

.explore__btn:hover {
  animation-play-state: paused;
  transform: translateY(3px);
  box-shadow: 0 6px 14px rgba(34, 31, 70, 0.38);
}

.explore__icon {
  position: absolute;
  width: 22px;
  height: 22px;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.explore__icon--cross {
  opacity: 0;
  transform: rotate(-45deg);
}

.explore__btn:hover .explore__icon--arrow {
  opacity: 1;
  transform: rotate(0deg);
}

.explore__btn:hover .explore__icon--cross {
  opacity: 0;
  transform: rotate(-45deg);
}

/* ============ Responsive (hero) ============ */

@media (max-width: 1320px) {
  .hero {
    padding: 0 28px 24px;
  }

  .headline {
    font-size: clamp(28px, 8vw, 40px);
  }

  .hero__inner {
    flex-direction: column;
    align-items: center;
  }

  .hero__left {
    max-width: 100%;
    min-width: 0;
    padding-top: 20px;
    text-align: center;
  }

  .pillars {
    justify-content: center;
  }

  .hero__right {
    width: 100%;
    min-width: 0;
  }

  .phones {
    height: 520px;
    width: 100%;
  }

  .phone {
    width: 260px;
  }

  .guide {
    display: none;
  }
}

@media (max-width: 600px) {
  .headline {
    font-size: clamp(26px, 9vw, 34px);
  }

  .lede {
    font-size: 16px;
  }

  .system__strip {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    font-size: 13px;
    gap: 6px;
    padding: 10px 12px;
  }

  .system__strip .arrow {
    width: 16px;
    height: 16px;
  }

  .system {
    max-width: 100%;
  }

  .cta {
    gap: 12px;
    padding: 11px 11px 11px 22px;
    font-size: 18px;
  }

  .cta__icon {
    width: 38px;
    height: 38px;
  }

  .cta__icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ======================================================================
   SECTION 2 — Stats marquee ("Today, our work spans...")
   The divider above this section is a soft inset shadow (not a color
   gradient, not a hard line) — hero (section 1) is untouched, and this
   section's own background stays flat off-white throughout.
   ====================================================================== */

.stats {
  position: relative;
  background: var(--off-white);
  padding: 80px 0 90px;
  overflow: hidden;
}

.logos-row {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.logos-row--top {
  margin-bottom: 72px;
}

.logos-row--bottom {
  margin-top: 72px;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 100px;
  width: max-content;
  animation: scroll-left 34s linear infinite;
}

.logos-track--reverse {
  animation-name: scroll-right;
}

.logos-track img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  /* replace src on each <img> below with your own logo files */
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.stats__text {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.9;
  letter-spacing: 0;
  font-weight: 700;
  color: #333333;
}

/* inline highlight chips reused across sections */
.hl {
  position: relative;
  display: inline-block;
  padding: 1px 5px 1px;
  font-weight: 700;
  line-height: 0.9;
}

.work__heading .hl,
.section-heading .hl {
  font-weight: 700;
}

.hl.hl--inactive {
  background: none;
}

.hl--inactive .handle,
.hl--inactive .caret {
  display: none;
}

.hl--lavender {
  background: var(--lavender);
  color: #333333;
}

.hl--salmon {
  background: var(--salmon);
  color: #333333;
}

.hl--salmon .handle,
.hl--audience .handle {
  background: var(--btn-red);
}

.hl--salmon .caret,
.hl--audience .caret {
  background: var(--btn-red);
}

/* ======================================================================
   SECTION 3 — "This is the kind of infrastructure we build"
   ====================================================================== */

.build {
  position: relative;
  overflow: hidden;
  padding: 88px 24px 96px;
  background: linear-gradient(180deg, var(--off-white) 0%, #f2edf3 28%, var(--lilac) 55%, #efd9d4 78%, var(--pink) 100%);
}

.eyebrow {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #808080;
  margin-bottom: 18px;
}

.section-heading {
  text-align: center;
  font-size: 38px;
  line-height: 125%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333333;
  margin-bottom: 16px;
}

.section-sub {
  max-width: 620px;
  margin: 0 auto 52px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--body-text);
}

.build__grid {
  max-width: 900px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.build__grid--image {
  display: block;
}

.build__grid--image img {
  display: block;
  width: 100%;
  height: auto;
}

.info-card {
  position: relative;
}

.info-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease;
}

.info-card:hover img {
  transform: translateY(-6px);
}

.build__cta-wrap {
  display: flex;
  justify-content: center;
}

/* ======================================================================
   SECTION 4 — "It is infrastructure we operate every day." + collage
   ====================================================================== */

.operate {
  position: relative;
  background: linear-gradient(180deg, var(--pink) 0, var(--off-white) 90px, var(--off-white) 100%);
  padding: 88px 24px 56px;
}

.collage {
  position: relative;
  max-width: 1280px;
  margin: 56px auto 0;
}

.collage img,
.collage video {
  width: 100%;
  height: auto;
  display: block;
  /* swap this src with your single collage gif/video */
}

/* ======================================================================
   SECTION 5 — "More Than Reach."
   ====================================================================== */

.reach {
  position: relative;
  overflow: hidden;
  padding: 44px 24px 76px;
  background:
    radial-gradient(ellipse 46% 44% at 50% 40%, rgba(120, 82, 200, 0.18) 0%, rgba(120, 82, 200, 0) 70%),
    linear-gradient(180deg, var(--off-white) 0, var(--lilac) 90px, var(--pink) 55%, var(--off-white) 100%);
  text-align: center;
}

.reach__heading {
  font-size: 38px;
  line-height: 125%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333333;
  margin-bottom: 14px;
}

.mark--outline {
  position: relative;
  display: inline-block;
  padding: 2px 12px;
  color: var(--ink);
  z-index: 0;
}

.mark--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(236, 156, 141, 0.4);
  z-index: -1;
}

.mark--outline .handle {
  background: var(--btn-red);
}

.mark--outline .caret {
  background: var(--btn-red);
}

.reach__sub {
  font-size: 16px;
  color: var(--body-text);
  margin-bottom: 44px;
}

.reach__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 64px;
}

.reach__pillars .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple);
}

.reach__statement {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
}

/* "disappears" — "dis" stays fully dark, "sappea" goes light through the
   middle, and the closing "rs" keeps thinning until it's almost gone, so
   the word literally disappears. Percentage stops, so it lands the same
   at every viewport width. */
.reach__statement .fade {
  font-weight: 700;
  background: linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 22%,
      rgba(36, 31, 63, 0.20) 50%,
      rgba(36, 31, 63, 0.12) 76%,
      rgba(36, 31, 63, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ======================================================================
   SECTION 6 — "Building an audience changes that."

   The five pillars are real text + <img> icons, not PNG card exports.
   Each card is a fixed 235 × 213 Figma frame with an xl radius.
   ====================================================================== */

.audience {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  padding: 96px 24px 110px;
  text-align: center;
}

.audience__watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  background-image: url("Inbo-Logo-v2 1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

.audience__inner {
  position: relative;
  z-index: 1;
}

.hl--audience {
  background: var(--salmon);
  color: #333333;
}

.audience__grid {
  max-width: 1240px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: repeat(5, 235px);
  justify-content: center;
  gap: 20px;
  text-align: left;
}

/* fixed Figma frame: 235 × 213, xl radius, flat white */
.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 235px;
  height: 213px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.pillar:hover {
  transform: translateY(-6px);
}

.pillar__title {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.pillar__text {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--body-text);
}

/* margin-top:auto pins every icon to the same baseline even though the
   five blurbs run to different lengths */
.pillar__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: auto;
  flex-shrink: 0;
}

.pillar__icon img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.audience__closing {
  font-size: 15px;
  font-weight: 500;
  color: var(--body-text);
  margin-bottom: 6px;
}

.audience__closing strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  color: var(--ink);
}

/* ======================================================================
   Responsive — new sections
   ====================================================================== */

@media (max-width: 1240px) {
  .audience__grid {
    grid-template-columns: repeat(3, 235px);
  }
}

@media (max-width: 980px) {
  .audience__grid {
    grid-template-columns: repeat(2, 235px);
    gap: 20px;
  }

  .collage {
    height: auto;
  }
}

@media (max-width: 980px) {
  .build {
    padding: 64px 20px 72px;
  }

  .build__grid {
    max-width: 640px;
  }
}

@media (max-width: 600px) {
  .stats {
    padding: 48px 0 56px;
  }

  .logos-row--top {
    margin-bottom: 36px;
  }

  .logos-row--bottom {
    margin-top: 36px;
  }

  .logos-track {
    gap: 48px;
  }

  .logos-track img {
    height: 28px;
  }

  .stats__text {
    text-align: center;
    font-size: 26px;
    line-height: 1.4;
  }

  .audience {
    padding: 64px 20px 76px;
  }

  .audience__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 320px;
  }

  /* release the fixed frame on mobile so long blurbs never clip */
  .pillar {
    width: 100%;
    height: auto;
    min-height: 213px;
  }

  .reach__pillars {
    gap: 12px;
    font-size: 13px;
  }

  .collage {
    max-width: 100%;
  }

  .build {
    padding: 48px 16px 56px;
  }

  .build__grid {
    max-width: 100%;
    margin-bottom: 32px;
  }
}

/* ======================================================================
   SECTION 7 — "Build the Growth System. Build the Audience Around It."
   ====================================================================== */

.work {
  position: relative;
  overflow: hidden;
  padding: 88px 24px 96px;
  background:
    radial-gradient(ellipse 46% 44% at 50% 42%, rgba(120, 82, 200, 0.18) 0%, rgba(120, 82, 200, 0) 70%),
    linear-gradient(180deg, var(--off-white) 0%, var(--lilac) 32%, var(--pink) 58%, var(--salmon) 78%, var(--off-white) 96%);
  text-align: center;
}

.work__heading {
  font-size: 38px;
  line-height: 125%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333333;
  margin-bottom: 30px;
}

.work__heading .hl--audience,
.work__heading .hl--lavender {
  padding: 1px 10px 2px;
}

.work__tabs {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  margin-bottom: 26px;
}

.work__tab {
  position: relative;
  padding: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.work__tab:hover {
  color: var(--ink);
}

.work__tab--active {
  color: #333333;
}

.work__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--btn-navy) 0%, var(--btn-red) 100%);
}

.work__panel[hidden] {
  display: none;
}

.work__sub {
  max-width: 560px;
  margin: 0 auto 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--body-text);
}

.work__label {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 26px 0 34px;
}

.work-grid {
  max-width: 1180px;
  margin: 0 auto 40px;
}

.work-grid--image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.work-grid__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.work-grid__row--top {
  justify-content: center;
  margin-bottom: 6px;
}

.work-grid__row--bottom {
  justify-content: center;
}

.work-card {
  width: 190px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.work-card:hover {
  transform: translateY(-4px);
}

.work-card img {
  display: block;
  width: 100%;
  height: auto;
}

.work__footnote {
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body-text);
}

/* ======================================================================
   SECTION 8 — "What Could This Look Like for Your Business?"
   ====================================================================== */

.fit {
  position: relative;
  overflow: hidden;
  padding: 88px 24px 90px;
  background:
    radial-gradient(ellipse 46% 44% at 50% 40%, rgba(120, 82, 200, 0.18) 0%, rgba(120, 82, 200, 0) 70%),
    linear-gradient(180deg, var(--off-white) 0%, var(--off-white) 10%, var(--lilac) 38%, var(--pink) 65%, var(--off-white) 100%);
  text-align: center;
}

.fit__heading {
  font-size: 38px;
  line-height: 125%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333333;
  margin-bottom: 12px;
}

.fit__sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--body-text);
  margin-bottom: 54px;
}

.fit-grid {
  max-width: 780px;
  margin: 0 auto 46px;
}

.fit-grid--image img {
  display: block;
  width: 100%;
  height: auto;
}

.fit-grid__row {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.fit-grid__row--top {
  margin-bottom: 34px;
}

.fit-grid__row--bottom {
  gap: 64px;
  margin-top: 4px;
}

.sticky {
  width: 230px;
  border-radius: 14px;
  overflow: hidden;
}

.sticky img {
  display: block;
  width: 100%;
  height: auto;
}

.fit__text {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--body-text);
}

.fit__footnote {
  margin-top: -20px;
  font-size: 13px;
  font-weight: 600;
  color: #808080;
}

/* ======================================================================
   SECTION 9 — Footer
   ====================================================================== */

.footer {
  background: var(--off-white);
  padding: 40px 64px 44px;
}

.footer__rule {
  border: none;
  height: 1px;
  margin-bottom: 26px;
  background: transparent;
  box-shadow: 0 1px 0 rgba(36, 31, 63, 0.16), 0 8px 16px -8px rgba(36, 31, 63, 0.18);
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__logo img {
  height: 30px;
  width: auto;
}

.footer__copy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
}

.footer__links a:hover {
  background: linear-gradient(90deg, #a78bfa 0%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ======================================================================
   Responsive — sections 7–9
   ====================================================================== */

@media (max-width: 980px) {

  .work-grid__row,
  .work-grid__row--top,
  .work-grid__row--bottom {
    justify-content: center;
    gap: 18px !important;
  }

  .work-grid__row--top {
    margin-bottom: 20px;
  }

  .fit-grid__row {
    flex-wrap: wrap;
  }

  .footer {
    padding: 32px 24px 36px;
  }

  /* stacked footer reads better centred than left-ragged */
  .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .footer {
    padding: 28px 20px 34px;
  }

  .footer__rule {
    margin-bottom: 22px;
  }

  .footer__logo img {
    height: 26px;
  }

  .footer__copy {
    font-size: 14px;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    font-size: 14px;
  }
}