/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: "Givonic";
  src: url("../fonts/Givonic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Givonic";
  src: url("../fonts/Givonic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Givonic";
  src: url("../fonts/Givonic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   RESET
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}

/* Custom brand cursor — orange→pink dot + soft ring that lerps behind it.
   Hidden on touch devices and on viewports that lack a fine pointer. */
@media (pointer: fine) {
  html,
  body {
    cursor: none;
  }
  a,
  button,
  [role="button"],
  .cursor-target {
    cursor: none;
  }
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: normal;
}
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
}
.cursor__dot {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #ff9933 0%, #ff3366 100%);
  box-shadow: 0 0 12px rgba(255, 80, 100, 0.55);
  transition:
    width 0.18s ease,
    height 0.18s ease,
    opacity 0.18s ease;
}
.cursor__ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    border-color 0.25s ease,
    opacity 0.25s ease;
}
.cursor.is-hover .cursor__dot {
  width: 6px;
  height: 6px;
  opacity: 0.7;
}
.cursor.is-hover .cursor__ring {
  width: 54px;
  height: 54px;
  border-color: rgba(255, 153, 51, 0.9);
}
.cursor.is-down .cursor__ring {
  width: 24px;
  height: 24px;
}
.cursor.is-hidden .cursor__dot,
.cursor.is-hidden .cursor__ring {
  opacity: 0;
}
@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* Custom scrollbar — matches the orange→pink brand gradient */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff5a40 rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9933 0%, #ff3366 100%);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffa84d 0%, #ff527a 100%);
}

body {
  background:
    radial-gradient(
      ellipse 90% 70% at 15% 25%,
      var(--color-glow-1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 85% 75%,
      var(--color-glow-2) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 50% at 100% 30%,
      var(--color-glow-3) 0%,
      transparent 70%
    ),
    var(--color-bg-deep);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  cursor: pointer;
}

/* ============================================
   HERO — sticky scroll-driven section
   ============================================ */
.hero {
  position: relative;
  height: calc(var(--scroll-section-vh) * 1vh);
  background: var(--color-bg);
}

.hero__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* Multi-layer red glow that fully covers the viewport,
     matching Figma's gradient render without any harsh black gaps */
  background:
    radial-gradient(
      ellipse 90% 70% at 15% 25%,
      var(--color-glow-1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 85% 75%,
      var(--color-glow-2) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 50% at 100% 30%,
      var(--color-glow-3) 0%,
      transparent 70%
    ),
    var(--color-bg-deep);
}

/* Figma bg-glow PNG overlaid on top for the authentic blurred render */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen; /* blends with the gradients instead of replacing */
  opacity: 0.9;
}

/* ----- STAGE: 1728x1144 Figma canvas, scaled to fit viewport ----- */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--canvas-w) * 1px);
  height: calc(var(--canvas-h) * 1px);
  /* The JS sets --stage-scale based on viewport size */
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
}

/* ============================================
   NAVBAR — fixed at top, always visible
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* let scrolling pass through bg, links re-enable below */
  background: #00000005;
  backdrop-filter: blur(21px);
  border-bottom: 1px solid #ffffff14;
}
.navbar__inner {
  width: 100%;
  max-width: 1648px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.navbar__left {
  display: flex;
  align-items: center;
  gap: 132px; /* Figma 10:8347 */
}
.navbar__logo {
  /* Figma 267:52 — 159 wide; SVG keeps its natural ratio so the art is
     not letterboxed (Figma's 43.267 box crops the top of the SVG art). */
  width: 159px;
  height: auto;
  display: block;
}
.navbar__links {
  display: flex;
  gap: 44px;
  align-items: center;
  font-weight: var(--font-weight-light);
  font-size: 18px; /* Figma 10:8360 */
  font-family: var(--font-body);
}
.navbar__links a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.navbar__links a:hover {
  opacity: 0.7;
}

.navbar__cta {
  background: rgba(255, 255, 255, 0.1); /* Figma 10:8365 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 210px;
  height: 56px;
  flex-shrink: 0;
  padding: 5.488px; /* Figma inner inset */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
  color: var(--color-text);
  font-size: 20px; /* Figma 10:8366 */
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
  transition: background 0.2s ease;
}
.navbar__cta:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ============================================
   HERO TEXT
   ============================================ */
.hero__title {
  position: absolute;
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  width: 1571px;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 125.458px;
  line-height: 0.94;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-text);
  will-change: transform, opacity;
}

.hero__scroll-hint {
  position: absolute;
  top: 674.53px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--font-weight-light);
  font-size: 28px;
  color: var(--color-text);
  white-space: nowrap;
  will-change: transform, opacity;
}
.hero__scroll-arrow {
  width: 22px;
  height: 22px;
  animation: heroScrollBounce 1.8s ease-in-out infinite;
}
@keyframes heroScrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ============================================
   PHONE — scales and translates between A and B
   ============================================ */
.phone {
  position: absolute;
  /* Frame B's natural position is the END state */
  top: 140px;
  left: 50%;
  width: 843.162px;
  height: 1745px;
  transform: translateX(-50%);
  will-change: transform;
}
.phone__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Scale/translate animated by GSAP via --phone-y and --phone-scale */
  transform: translateY(var(--phone-y, 1141px)) scale(var(--phone-scale, 1.544));
  transform-origin: center center;
  will-change: transform;
}
.phone__bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* The SVG has preserveAspectRatio="none" — lock it to the container's
     ratio (843 : 1745 = Figma's iPhone B aspect) */
  object-fit: fill;
}

/* Dynamic island — Figma canvas top 199.7, minus the phone's top:140 = 59.7px inside .phone */
.island {
  position: absolute;
  top: 59.7px;
  left: 50%;
  transform: translateX(-50%);
  width: 710px;
  height: 163.572px;
  pointer-events: none;
}
.island img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Status icons — signal bars + wifi, sitting alongside the dynamic island.
   Figma nodes 10:8410 (signal) / 10:8415 (wifi), positioned to match
   the rendered phone shell. The island vertical center sits at
   59.7 + 163.572/2 ≈ 141.5px inside .phone; the right edge of the island
   sits at (843.162 + 710)/2 ≈ 776.6px. Icons sit to the right of that. */
.phone__status {
  position: absolute;
  display: block;
  pointer-events: none;
  object-fit: contain;
}
.phone__status--signal {
  /* 48:31 SVG ratio. Sized to match Figma — small status-bar icons. */
  top: 95px;
  left: 625px;
  width: 40px;
  height: auto;
}
.phone__status--wifi {
  /* 44:31 SVG ratio. */
  top: 95px;
  left: 685px;
  width: 36px;
  height: auto;
}

/* APEX CAPITAL group — Figma canvas top 340.01, minus phone top:140 = 200px inside .phone */
.apex {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 683px;
  height: 96px;
  opacity: 0;
  will-change: opacity;
}
.apex img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   PORTFOLIO BALANCE (fades + slides in)
   ============================================ */
/* Balance — Frame 9133 final position: canvas top 520, minus phone top:140 = 380px inside .phone.
   Starts at y=250 (visually at top 630, matching Frame 9035 top:770) with opacity 0,
   animates to y=0 + opacity:1 during Phase 2 of the scroll timeline. */
.balance {
  position: absolute;
  top: 380px;
  left: 50%;
  transform: translateX(-50%);
  width: 844px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25.327px;
  opacity: 0;
  will-change: opacity, transform;
}
.balance__label {
  font-weight: var(--font-weight-light);
  font-size: 25.327px;
  color: var(--color-text);
}
.balance__amount {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 101.309px;
  color: var(--color-text);
  text-transform: capitalize;
}
.balance__growth {
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 16.885px;
  padding: 16.885px 50.655px;
  border-radius: 211px;
  font-weight: var(--font-weight-light);
  font-size: 33.77px;
  color: var(--color-text);
}
.balance__growth-icon {
  width: 42px;
  height: 42px;
}

/* ============================================
   MARKET INSIGHTS CARD (Section 3 — Frame 8653)
   Final position inside phone: canvas top 500 - phone top 140 = 360px
   ============================================ */
.insights-card {
  position: absolute;
  top: 360px;
  left: 50%;
  transform: translateX(-50%);
  width: 684px;
  padding: 29.106px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(54.665px);
  -webkit-backdrop-filter: blur(54.665px);
  border-radius: 43.66px;
  display: flex;
  flex-direction: column;
  gap: 21.83px;
  opacity: 0;
  will-change: opacity, transform;
}
.insights-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.insights-card__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 32.745px;
  color: var(--color-text);
  white-space: nowrap;
}
.insights-card__badge {
  background: linear-gradient(90deg, #ff9933 0%, #ff3366 100%);
  padding: 7.277px 29.106px;
  border-radius: 168.547px;
  font-family: var(--font-body);
  font-size: 18.191px;
  color: #fff;
  font-weight: var(--font-weight-regular);
}
.insights-card__thumb {
  width: 100%;
  height: 260.138px;
  border-radius: 36.383px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
}
.insights-card__thumb img,
.insights-card__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Play button overlay — Figma node 10:8764 (101.872px circle, glass bg) */
.insights-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 101.872px;
  height: 101.872px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.819px solid #3f3f3f;
  backdrop-filter: blur(10.915px);
  -webkit-backdrop-filter: blur(10.915px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.insights-card__play img {
  width: 43.66px;
  height: 43.66px;
  object-fit: contain;
}
.insights-card__body {
  display: flex;
  flex-direction: column;
  gap: 14.553px;
  width: 100%;
}
.insights-card__headline {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 32.745px;
  line-height: 1.15;
  color: var(--color-text);
}
.insights-card__meta {
  display: flex;
  align-items: center;
  gap: 10.915px;
}
.insights-card__dot {
  width: 5.457px;
  height: 5.457px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.insights-card__meta-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 21.83px;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   REBALANCE QUESTION CARD (Section 4 — Frame 8900)
   Final position inside phone: canvas top 514.84 - phone top 140 = 374.84px
   ============================================ */
.rebalance-card {
  position: absolute;
  top: 374.84px;
  left: 50%;
  transform: translateX(-50%);
  width: 689.114px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(86.717px);
  -webkit-backdrop-filter: blur(86.717px);
  border: 1px solid #ff9933;
  border-radius: 43.986px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29.324px;
  opacity: 0;
  will-change: opacity, transform;
}
/* Video card below the rebalance question — Figma 184:4910.
   Same width / radius as the question card, sitting just below it. */
.rebalance-video {
  position: absolute;
  top: 640px; /* sits below the question card (374.84 + ~245) */
  left: 50%;
  transform: translateX(-50%);
  width: 689.114px;
  height: 380px;
  border-radius: 43.986px;
  overflow: hidden;
  background: #000;
  opacity: 0; /* fades in with data-anim="rebalance" */
  will-change: opacity, transform;
}
.rebalance-video > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rebalance-card__question {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 32.989px;
  line-height: 1.15;
  color: var(--color-text);
  width: 619.469px;
  max-width: 100%;
}
.rebalance-card__buttons {
  display: flex;
  gap: 21.993px;
  align-items: stretch;
  width: 100%;
}
.rebalance-card__btn {
  flex: 1 0 0;
  min-width: 0;
  padding: 14.662px 43.986px;
  border-radius: 169.807px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 21.993px;
  color: #fff;
  text-align: center;
  border: 1.833px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.rebalance-card__btn:hover {
  filter: brightness(1.15);
}
.rebalance-card__btn--primary {
  background: linear-gradient(
    90deg,
    var(--color-cta-grad-start) 0%,
    var(--color-cta-grad-end) 124.8%
  );
  border-color: rgba(255, 255, 255, 0.44);
}

/* ============================================
   TRUSTED-BY HEADING (Section 5 — Frame 10730)
   Sits above the phone, fades in as the phone shrinks.
   Canvas top: 169, centered horizontally, width 954px.
   ============================================ */
.trusted-heading {
  position: absolute;
  top: 169px;
  left: 50%;
  transform: translateX(-50%);
  width: 954px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 60px;
  line-height: 0.94;
  color: var(--color-text);
  text-transform: capitalize;
  opacity: 0;
  will-change: opacity, transform;
}
.trusted-heading p {
  margin: 0;
}

/* ============================================
   FLOATING COMPANY BADGES (Section 6 — Frame 13:2)
   8 circular cards float around the phone, fading in.
   Positions are absolute in the 1728px Figma canvas.
   ============================================ */
.badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.badge {
  position: absolute;
  width: 173.244px;
  height: 173.244px;
  border-radius: 91.675px;
  /* No CSS border / background — each PNG asset already includes its own
     dark circle ring, and stacking a second one on top produced a visible
     double-ring on every badge. */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: opacity, transform;
  overflow: hidden;
}
.badge--big {
  width: 300.191px;
  height: 300.191px;
  border-radius: 158.851px;
}
.badge img {
  /* Fill the badge so the PNG's own outer ring lands at the badge's edge —
     avoids the previous double-ring look where a CSS border at the .badge
     edge and the PNG's painted ring sat at two different radii. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* First wave of 8 badges — Section 6 positions (Figma frame 13:2) */
/* Wave 1 — positions aligned to Figma 15:301 final layout so the cluster
   under the phone matches the design (and so wave 2 can overlay the same
   logos at the same spots instead of duplicating them elsewhere). */
.badge--1 {
  left: 991px;
  top: 623px;
} /* APEX, top right */
.badge--2 {
  left: 866px;
  top: 530px;
} /* VELO, upper centre (Figma 15:152) */
.badge--3 {
  left: 555px;
  top: 819px;
} /* Meridian, left */
.badge--4 {
  left: 666px;
  top: 680px;
} /* Bank Clarity, upper centre */
.badge--5 {
  left: 802px;
  top: 891px;
} /* Nimbus, centre-bottom */
.badge--6 {
  left: 845px;
  top: 718px;
} /* Forge, right of centre */
/* BIG + logo8 — kept in DOM for backward compatibility but parked
   off-stage so they don't clutter the Figma-matched cluster. */
.badge--7 {
  left: -9999px;
  top: -9999px;
}
.badge--8 {
  left: -9999px;
  top: -9999px;
}

/* Second wave of 8 badges — Section 7 positions (Figma frame 15:301) */
.badge--9 {
  left: 991px;
  top: 623px;
}
.badge--10 {
  left: 666px;
  top: 680px;
}
.badge--11 {
  left: 555px;
  top: 819px;
}
.badge--12 {
  left: 845px;
  top: 718px;
}
.badge--13 {
  left: 802px;
  top: 891px;
}
.badge--14 {
  left: 1002.21px;
  top: 798.26px;
}
.badge--15 {
  left: 955.6px;
  top: 977px;
}
.badge--16 {
  left: 643.25px;
  top: 970px;
}

/* ============================================
   AI AGENTS SECTION — Step 1 (Figma 176:523 → 184:22)
   Empty dark scene + a single centered glow orb that fades in on scroll.
   Will grow as the rings / labels / content pieces are added.
   ============================================ */
.agents {
  position: relative;
  height: 350vh; /* scroll for orb → rings → labels → content */
  background: var(--color-bg-deep);
}
.agents__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Floating feature labels orbiting the centre — Figma 184:1380 onwards.
   Container spans the sticky viewport so label translate offsets are
   relative to viewport centre, matching how Figma positions them. */
.agents__labels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.agents__label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 23.094px;
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}
/* Glowing warm dot with a soft halo behind it — Figma node 184:599/600. */
.agents__label-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f93 0%, #f36 100%);
  flex: 0 0 auto;
}
.agents__label-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 153, 51, 0.7) 0%,
    rgba(255, 51, 102, 0.7) 100%
  );
  filter: blur(12px);
  z-index: -1;
}
/* Per-label positions — translate offsets from viewport centre.
   Spread out to roughly match the Figma 184:3858 final layout:
     · top row (Personalized / Continuous) sits well above the orb
     · mid row (Video / Surveys) sits at orb's upper half, far left/right
     · bottom row (Client / Cross) sits at orb's lower half, far left/right
   These pull the labels close to viewport edges so the orb breathes in the
   middle instead of getting crowded. */
.agents__label--personalized {
  transform: translate(-310px, -310px);
} /* top-left */
.agents__label--optim {
  transform: translate(30px, -310px);
} /* top-right */
.agents__label--video {
  transform: translate(-380px, -150px);
} /* mid-left */
.agents__label--surveys {
  transform: translate(190px, -150px);
} /* mid-right */
.agents__label--client {
  transform: translate(-450px, -30px);
} /* bottom-left */
.agents__label--cross {
  transform: translate(205px, -30px);
} /* bottom-right */

/* Bottom content stack — pill + heading + description (Figma 184:3858).
   Sits well below the orb so the heading doesn't collide with the bottom
   row of labels (Client Communications / Cross-Sell Automation). */
.agents__content {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  opacity: 0;
  z-index: 3;
  will-change: opacity, transform;
}
.agents__pill {
  background: rgba(255, 255, 255, 0.02);
  height: 50px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 18px;
  color: var(--color-text);
}
.agents__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--color-text);
  max-width: 879px;
}
.agents__description {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  max-width: 775px;
}

/* Concentric rings radiating from the orb (Figma 184:628).
   Sized larger than the viewport so multiple ring bands frame the orb. */
.agents__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: min(2200px, 160vw);
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen; /* drops the SVG's near-black background */
  will-change: opacity, transform;
}

/* Centered glow orb — a single heavily-blurred gradient SVG.
   Figma 184:22 places this at viewport centre as a clean warm bloom
   (no visible outline ring). */
.agents__glow {
  position: absolute;
  /* Centred slightly above viewport mid so labels can flank it AND the
     content stack can sit below without overlapping. */
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Smaller than before so the labels around the orb breathe and aren't
     eaten by its dark halo — matches the Figma 184:3858 proportion. */
  width: clamp(360px, 28vw, 540px);
  aspect-ratio: 1;
  pointer-events: none;
}
/* Figma orb PNG — fills the .agents__glow container. The exported asset
   has a near-black (2,2,2) square backdrop baked in, which doesn't quite
   match the section's #050507 so a faint square would otherwise show
   through. A radial mask fades the square corners to transparent and
   keeps only the round orb visible. */
.agents__glow-orb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 42%,
    transparent 55%
  );
  mask-image: radial-gradient(circle at center, #000 42%, transparent 55%);
  opacity: 0;
  will-change: opacity, transform;
}

/* ============================================
   THE PROBLEM SECTION
   ============================================ */
.problem {
  position: relative;
  height: 700vh; /* A→F: title → circles → float up → descend → 8-10x fade → 1.2x fade → E-2 disclaimer rise → framework */
  /* Figma 38:179 background: rgb(10, 10, 11) */
  background: var(--color-bg);
}
.problem__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle radial glow in the background — also gives the glass circles
   something with edges/colour to visibly blur */
.problem__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 65% 50%,
      rgba(122, 31, 31, 0.35) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 40% at 20% 80%,
      rgba(74, 20, 20, 0.25) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle 14vw at 38% 56%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 12vw at 50% 80%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}

/* ----- Phase A: Big centred titles ----- */
/*
  Figma canvas (1728 × 1144 px):
    "The Problem" heading → top 165 px  (14.4 vh), font 125.458 px
    subtitle              → top 348 px  (30.4 vh), font 60 px
*/
.problem__titles {
  position: absolute;
  top: 19.4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vh, 24px);
  will-change: opacity, transform;
  white-space: nowrap;
}
.problem__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  /* Figma 125.458 px / 1728 px canvas = 7.26vw; min raised so it stays large */
  font-size: clamp(80px, 6.26vw, 125px);
  line-height: 0.94;
  text-transform: capitalize;
  color: var(--color-text);
}
.problem__subtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  /* Figma 60 px / 1728 px canvas = 3.47vw */
  font-size: clamp(32px, 2.47vw, 60px);
  line-height: 1.1;
  text-transform: capitalize;
  color: rgb(255, 255, 255);
  text-align: center;
  white-space: normal;
}

/* ----- Phase B: Figma-accurate stat circles ----- */
/*
  Figma canvas 1728 × 1144 px. Diameter = 462 px = 26.7 vw.
  Positions are 1:1 from canvas (px → vw/vh).
  Circles overlap each other — intentional per screenshot / Figma.

  1.2x  → left 25.3vw, top 49.7vh
  8-10x → left 48vw,   top 50.1vh   (right of 1.2x, overlap ~4vw)
  6-8x  → left 36.1vw, top 78.9vh   (centre-low, bleeds off-bottom)
*/
/* Stage caps to the Figma canvas width (1728px) so circle size/spacing
   stays proportional instead of drifting apart on wide screens */
.problem__stats-stage {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: min(100vw, 1728px);
  transform: translateX(-50%);
  z-index: 1;
}

.problem__stat {
  position: absolute;
  /* 462 px on 1728 px canvas = 26.74% of the (capped) stage width */
  width: max(180px, 20%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 51, 102, 0.07),
    0 8px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  /* side/bottom inset keeps text inside the circle arc */
  padding-left: clamp(32px, 3.5vw, 56px);
  padding-right: clamp(32px, 3.5vw, 56px);
  opacity: 0;
  overflow: hidden;
  will-change: opacity, transform;
  text-align: left;
}

/* Positions scaled to keep the same Figma overlap ratio at the smaller 20% circle size */
.problem__stat--1 {
  left: 30%;
  top: 53vh;
  z-index: 3;
} /* 1.2x  — front */
.problem__stat--2 {
  left: 39%;
  top: 79vh;
  z-index: 2;
} /* 6-8x  — middle, bleeds off bottom */
.problem__stat--3 {
  left: 47%;
  top: 53.3vh;
  z-index: 1;
} /* 8-10x — back */

.problem__stat-num {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(36px, 3.4vw, 58px);
  line-height: 1;
  background: linear-gradient(
    89.85deg,
    var(--color-cta-grad-start) 0%,
    var(--color-cta-grad-end) 34%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.problem__stat-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 0.97vw, 14px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  /* narrow enough that wrapped lines stay in the circle's wider chord zone */
  max-width: clamp(110px, 10vw, 160px);
}

/* Disclaimer */
.problem__disclaimer {
  position: absolute;
  /* Figma: canvas top 811px / 1144px ≈ 70.9vh — starting position before E-2 rise */
  top: 71vh;
  /* Figma 38:348: left = 50% - 270px (of 1728px canvas) = 50% - 15.625% */
  left: calc(50% - 15.625%);
  width: min(540px, 31.4vw);
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  /* Figma 38:348: 20px / 1728px canvas ≈ 1.16vw */
  font-size: clamp(14px, 1.16vw, 20px);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  will-change: opacity, transform;
  white-space: normal;
}

/* ----- Phase D-pre: Glow orb ----- */
.problem__orb {
  position: absolute;
  left: 50%;
  top: 52vh;
  transform: translateX(-50%);
  width: clamp(220px, 19.5vw, 337px);
  height: clamp(220px, 19.5vw, 337px);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 1;
  pointer-events: none;
}
.problem__orb-blob {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   PRICING SECTION
   Pill + headline + subtext, 4-tier card grid,
   small carry-over orb, disclaimer note
   ============================================ */
.pricing {
  position: relative;
  height: 420vh;
  background: var(--color-bg);
  z-index: 2;
}
.pricing__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 125vh;
  overflow: visible;
  clip-path: inset(96px 0 0 0);
}

/* Small orb carried over from the statement section — sits to the upper right */
.pricing__orb {
  position: absolute;
  right: 8%;
  /* Level with the centered two-line headline: the header content is centered
     within (116px..100vh), so its midline sits at 50% of viewport + 58px.
     Use margin (not transform) to center the orb on that line — GSAP owns
     `transform` for the fade/scale animation, so translateY would conflict. */
  top: calc(50% + 58px);
  margin-top: calc(clamp(90px, 10vw, 190px) / -2);
  width: clamp(90px, 10vw, 190px);
  aspect-ratio: 1;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.pricing__orb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Header — sits centered in the frame; fades OUT as the cards fade IN over it */
.pricing__header {
  position: absolute;
  inset: 0;
  z-index: 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.6vh, 18px);
  max-width: min(1080px, 90vw);
  margin: 0 auto;
  /* Sit just 5px below the fixed navbar (96px tall) */
  padding: 101px max(24px, 5vw) 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Cards block — overlaps the header, centered in the same frame; fades IN over it */
.pricing__cards-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2vh, 26px);
  padding: 108px max(24px, 5vw) 24px;
  opacity: 0;
  will-change: opacity, transform;
}

/* Disclaimer — overlays the same centered frame as the cards; the cards
   fade OUT while this fades IN over the very same spot (crossfade), so
   the disclaimer reads as the natural "closing note" of the pricing block */
.pricing-disclaimer {
  position: relative;
  background: var(--color-bg);
  z-index: 2;
}
.pricing__disclaimer-wrap {
  display: flex;
  justify-content: center;
  padding: 32px max(24px, 5vw) 64px;
  opacity: 0;
  will-change: opacity;
}
.pricing__disclaimer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: min(1100px, 94vw);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 31px;
  padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3vw, 44px);
  margin-top: 24px;
}

.pricing__disclaimer-box {
  display: flex;
  justify-content: center;
  padding: 32px max(24px, 5vw) 64px;
}

.pricing__disclaimer-nested {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: min(1100px, 94vw);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 31px;
  padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3vw, 44px);
}

.pricing__disclaimer-icon {
  flex: none;
  display: flex;
  padding-top: 2px;
}
.pricing__disclaimer-icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}
.pricing__disclaimer p {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 1.1vw, 20px);
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pricing-disclaimer-box {
  display: flex;
  justify-content: center;
  padding: 32px max(24px, 5vw) 48px;
}

.pricing-disclaimer-nested {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 31px;
  padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3vw, 44px);
}

.pricing__pill {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  height: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgb(255, 255, 255);
}
.pricing__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 3.4vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--color-text);
  max-width: clamp(500px, 75vw, 1100px);
}
.pricing__subtext {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.982);
  max-width: 80ch;
}

/* 4-column grid */
.pricing__grid {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: min(1480px, 94vw);
}

/* Tier cards */
.pricing__card {
  flex: 1 1 0;
  background: rgba(64, 64, 64, 0.06);
  border: 1px solid transparent;
  border-radius: 28px;
  padding: clamp(16px, 1.8vw, 30px) clamp(16px, 1.6vw, 28px)
    clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  position: relative;
  transition: border-color 0.3s ease;
}
.pricing__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0.35) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pricing__card--featured {
  background: linear-gradient(
    160deg,
    rgba(255, 153, 51, 0.12) 0%,
    rgba(255, 51, 102, 0.05) 100%
  );
  border: 1px solid rgba(255, 153, 51, 0.5);
  box-shadow: 0 0 50px rgba(255, 153, 51, 0.1);
}
/* "Most Popular" badge — sits inline at the end of the icon+name row (Figma: top-right of card head) */
.pricing__card-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  color: var(--color-text);
  white-space: nowrap;
  align-self: flex-start;
}
.pricing__card-top {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
}
/* Icon + plan name share one row (Figma: 56px square badge beside the title) */
.pricing__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pricing__card-icon {
  width: clamp(38px, 4.6vh, 50px);
  height: clamp(38px, 4.6vh, 50px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    134deg,
    var(--color-cta-grad-start) 0%,
    var(--color-cta-grad-end) 100%
  );
  flex-shrink: 0;
}
.pricing__card-icon svg {
  width: 22px;
  height: 22px;
}
.pricing__card-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(18px, 1.5vw, 26px);
  color: var(--color-text);
}
/* Price + "Per month" sit on one baseline-aligned row (Figma: items-end) */
.pricing__card-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.pricing__card-price {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 2.6vw, 48px);
  line-height: 1.1;
  color: var(--color-text);
}
.pricing__card-period {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.984);
  padding-bottom: 0.2em;
}
/* "Up to X MAUs" / "Unlimited" bold capsule line (Figma: bold capitalized) */
.pricing__card-mau {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 1vw, 16px);
  text-transform: capitalize;
  color: var(--color-text);
}
/* Long-form description paragraph */
.pricing__card-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(11px, 0.78vw, 13px);
  line-height: 1.5;
  color: rgb(255, 255, 255);
  /* Clamp to a fixed line count so the long Figma copy can't blow out the
     card height unpredictably — keeps the grid (and the disclaimer below it)
     inside the pinned viewport across breakpoints. */
}
/* Card 4: "Contact Us" link sits inline beside "Custom" in the price row */
.pricing__card-price-row .pricing__card-link {
  margin-left: auto;
  align-self: center;
}
.pricing__divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.pricing__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vh, 13px);
  flex: 1;
  margin-top: auto;
}
.pricing__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(12.5px, 0.95vw, 15.5px);
  line-height: 1.4;
  color: rgb(255, 255, 255);
}
.pricing__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: url("../assets/pricetick.svg") center / contain no-repeat;
}
.pricing__card-link {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.932);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.pricing__card-link:hover {
  color: rgba(255, 255, 255, 0.8);
}
.pricing__btn {
  width: 100%;
  height: clamp(38px, 5.5vh, 46px);
  border-radius: 40px;
  padding-bottom: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}
.pricing__btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.2),
    0 0 6px rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}
.pricing__btn--primary {
  background: linear-gradient(
    90deg,
    var(--color-cta-grad-start) 0%,
    var(--color-cta-grad-end) 100%
  );
  border-color: rgba(255, 255, 255, 0.3);
}
.pricing__btn--primary:hover {
  filter: brightness(1.15);
  box-shadow:
    0 0 30px rgba(255, 100, 60, 0.7),
    0 0 12px rgba(255, 60, 100, 0.55);
  border-color: rgba(255, 120, 60, 0.6);
  background: linear-gradient(
    90deg,
    var(--color-cta-grad-start) 0%,
    var(--color-cta-grad-end) 100%
  );
  transform: scale(1.02);
}

/* ============================================
   HOW IT WORKS
   Figma 60:5358 — two-column layout: left is the
   "[01] Shared First Step → Track A → Track B" copy
   (crossfading in place, like .inpractice__steps),
   right is an iPhone mockup whose floating status
   cards crossfade in lockstep with the active track.
   ============================================ */
.howitworks {
  position: relative;
  height: 460vh;
  background: var(--color-bg-deep);
}
.howitworks__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Anchor the heading / [01] stack to the top-left, just below the fixed
     navbar (96px tall) — not vertically centered — per the reference shot. */
  justify-content: flex-start;
  padding: clamp(116px, 14vh, 160px) max(40px, 6vw) clamp(40px, 6vh, 80px);
}

/* Header and the [01] column overlap in the same grid cell — the heading
   dissolves up and out while "[ 01 ] Shared First Step" rises from below
   into its place (mirrors the .howitworks__block crossfade pattern). */
.howitworks__stack {
  display: grid;
  margin-bottom: clamp(28px, 5vh, 64px);
}
.howitworks__stack > * {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
}

/* Phase A — header */
.howitworks__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.2vh, 28px);
  max-width: min(720px, 56vw);
  opacity: 0;
  will-change: opacity, transform;
}
.howitworks__pill {
  background: var(--color-pill-bg-soft);
  border-radius: 24px;
  height: 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(14px, 1.05vw, 18px);
  color: var(--color-text);
}
.howitworks__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 0.92;
  letter-spacing: 1px;
  text-transform: capitalize;
  color: var(--color-text);
}
.howitworks__subtext {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(14px, 1.25vw, 22px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
}

/* Phase B+ — left column: index + crossfading track blocks */
.howitworks__col {
  display: flex;
  gap: clamp(20px, 3vw, 56px);
  align-items: flex-start;
  width: min(640px, 42vw);
  opacity: 0;
  will-change: opacity, transform;
}
.howitworks__index {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(14px, 1.05vw, 18px);
  color: var(--color-text);
  flex: none;
}
.howitworks__track-title .howitworks__index {
  margin-right: 0.4em;
}
.howitworks__tracks {
  display: grid;
  flex: 1;
  min-width: 0;
}
.howitworks__block {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vh, 26px);
  opacity: 0;
  will-change: opacity, transform;
}
.howitworks__block-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 1.85vw, 30px);
  color: var(--color-text);
}
.howitworks__block-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(14px, 1.35vw, 22px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
.howitworks__track-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(18px, 1.85vw, 28px);
  color: var(--color-text);
}
.howitworks__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
}
.howitworks__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 1.15vw, 19px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}
.howitworks__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-cta-grad-end),
    var(--color-cta-grad-start)
  );
}

/* Phase B+ — iPhone mockup with crossfading floating status cards */
/* Positioning shell — centers the phone vertically via flexbox and is never
   touched by GSAP, so it can safely own layout/centering concerns. */
.howitworks__phone-stage {
  position: absolute;
  right: max(40px, 7vw);
  /* Span from just below the fixed navbar (96px tall) down to the bottom of
     the section — the phone is bottom-anchored within this full range, and
     its own size is driven by width + aspect-ratio (see .howitworks__phone-wrap)
     so the visible artwork always exactly fills its frame (no letterboxing,
     which is what made the floating cards drift off the artwork). */
  top: 96px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
/* Animated shell — GSAP drives this element's opacity/y/scale (which write
   to `transform`), so it must carry NO competing CSS `transform` of its own.
   Sized by width (responsive clamp) with height derived from --phone-ar, so
   the rendered box always matches the image's true aspect ratio exactly —
   the image fills it edge-to-edge and the floating cards (positioned as % of
   this box) line up with the artwork at every point in the crossfade. */
.howitworks__phone-wrap {
  position: relative;
  width: clamp(320px, 34vw, 560px);
  transform-origin: bottom center;
  /* --phone-ar starts at the cropped graphic's ratio (835/519 ≈ 1.609) and is
     tweened by GSAP to the full graphic's ratio (835/935 ≈ 0.893) as the two
     images crossfade — so the frame morphs in step with the artwork. */
  --phone-ar: 1.6088631984585742;
  aspect-ratio: var(--phone-ar);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: auto;
}
.howitworks__phone-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
/* Full (uncropped) graphic — fades in on top of the cropped one once
   "Shared First Step" appears, and remains for the rest of the section. */
.howitworks__phone-bezel--full {
  opacity: 0;
  z-index: 2;
}
.howitworks__phone-bezel--cardab {
  opacity: 0;
  z-index: 3;
}

.howitworks__float {
  position: absolute;
  left: 15%;
  width: 70%;
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.09);
  border-radius: 18px;
}

/* SDK-Active / Connected pill */
.howitworks__float--sdk {
  top: 12%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: clamp(8px, 1.1vw, 14px);
}
.howitworks__sdk-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.howitworks__sdk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 2.4vw, 34px);
  height: clamp(24px, 2.4vw, 34px);
  border-radius: 50%;
  background: #000;
}
.howitworks__sdk-icon svg {
  width: 55%;
  height: 55%;
}
.howitworks__sdk-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(11px, 1vw, 15px);
  color: var(--color-text);
}
.howitworks__sdk-badge {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(8px, 0.7vw, 10px);
  color: var(--color-text);
  padding: clamp(3px, 0.5vw, 6px) clamp(10px, 1.1vw, 15px);
  border-radius: 100px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06))
      padding-box,
    linear-gradient(
      90deg,
      var(--color-cta-grad-end),
      var(--color-cta-grad-start)
    );
  background: linear-gradient(
    90deg,
    var(--color-cta-grad-end) 0%,
    var(--color-cta-grad-start) 100%
  );
}

/* Self-Serve — Autumn Collection Launch card. Shifted toward the right edge
   of the phone (overflowing slightly past it), mirroring the reference
   composition where the two cards sit on opposite sides and overlap. */
.howitworks__float--selfserve {
  /* top nudged down from 24% so it clears the SDK-Active card with a visible
     gap instead of crowding right beneath it ("dono card ko sdk active sy
     padding do"). */
  top: 30%;
  left: auto;
  right: 6%;
  width: calc(48% + 50px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.9vh, 11px);
  padding: clamp(10px, 1.2vw, 14px);
}
.howitworks__ss-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 165;
  border-radius: 14px;
  overflow: hidden;
}
.howitworks__ss-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.howitworks__ss-tag {
  position: absolute;
  left: clamp(6px, 0.8vw, 11px);
  top: clamp(5px, 0.7vw, 9px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: clamp(3px, 0.45vw, 6px) clamp(8px, 0.95vw, 13px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(7px, 0.62vw, 9.5px);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.howitworks__ss-tag svg {
  width: clamp(9px, 0.8vw, 12px);
  height: clamp(9px, 0.8vw, 12px);
}
.howitworks__ss-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(11px, 1.1vw, 16px);
  color: var(--color-text);
}
.howitworks__ss-chips {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.65vw, 8px);
}
.howitworks__chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: clamp(3px, 0.48vw, 6px) clamp(8px, 0.95vw, 12px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(7px, 0.64vw, 10.5px);
}
.howitworks__chip svg {
  width: clamp(9px, 0.8vw, 12px);
  height: clamp(9px, 0.8vw, 12px);
}
.howitworks__chip--white {
  background: #fff;
  color: #000;
}
.howitworks__chip--dark {
  background: #000;
  color: var(--color-text);
}
.howitworks__chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

/* Full-Serve — end-to-end optimization card. Both this and the Self-Serve
   card stay visible together at the end (last phase) as a stacked,
   overlapping pair leaning toward opposite sides of the phone — Self-Serve
   toward the right (top:30%, right:-12%, intentionally overflowing), while
   Full-Serve leans left but stays fully WITHIN the phone/integrate01full
   artwork bounds (left:2% + width:70% = 72%, no overflow past either edge).
   top nudged from 46% → 52% to track Self-Serve's downward shift, keeping
   the same overlap relationship and clearance below the SDK-Active card. */
.howitworks__float--fullserve {
  top: 52%;
  left: 3%;
  width: calc(48% + 68px);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 11px);
  padding: clamp(10px, 1.2vw, 14px);
  padding-bottom: 10px;
}
.howitworks__fs-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 145;
  border-radius: 12px;
  overflow: hidden;
}
.howitworks__fs-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.howitworks__fs-tag {
  position: absolute;
  left: clamp(6px, 0.8vw, 11px);
  top: clamp(5px, 0.7vw, 9px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: clamp(3px, 0.45vw, 6px) clamp(8px, 0.95vw, 13px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(7px, 0.62vw, 9.5px);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.howitworks__fs-tag svg {
  width: clamp(9px, 0.8vw, 12px);
  height: clamp(9px, 0.8vw, 12px);
}
.howitworks__fs-chips {
  position: absolute;
  left: clamp(6px, 0.8vw, 11px);
  bottom: clamp(5px, 0.7vw, 9px);
  display: flex;
  align-items: center;
  gap: 4px;
}
.howitworks__fs-chips span {
  padding: clamp(2px, 0.38vw, 4px) clamp(6px, 0.85vw, 10px);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(6.5px, 0.55vw, 9px);
  color: rgba(255, 255, 255, 0.6);
}
.howitworks__fs-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--color-text);
}
.howitworks__fs-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium, var(--font-weight-regular));
  font-size: clamp(11px, 1.15vw, 17px);
  text-transform: capitalize;
}
.howitworks__fs-sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(9px, 0.82vw, 11.5px);
  color: rgba(255, 255, 255, 0.7);
}
.howitworks__fs-cta {
  width: 100%;
  border: none;
  cursor: pointer;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: clamp(10px, 0.95vw, 14px);
  padding: clamp(8px, 1.05vw, 14px);
  border-radius: 100px;
}

@media (max-width: 980px) {
  .howitworks__sticky {
    padding-top: 132px;
  }
  .howitworks__header,
  .howitworks__col {
    max-width: 100%;
    width: 100%;
  }
  .howitworks__phone-wrap {
    display: none;
  }
}

/* ============================================
   COMPLIANCE ENGINE SECTION
   Figma: 60:9175 → 60:9566
   The orb that bloomed at the end of "How It Works" carries straight on
   into this section — it starts at roughly the spot the previous section
   left it, then drifts into its resting place on the right while the
   pill / heading / copy fade up into view.
   ============================================ */
.compliance {
  position: relative;
  height: 280vh;
  background: var(--color-bg-deep);
}
.compliance__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The single orb shared across both sections — it starts here, dead-center
   of the screen (so it appears right in the middle exactly as the Full-Serve
   card finishes its scroll up to the navbar), then drifts into its resting
   place on the right as this section's content fades in. */
.compliance__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(90px, 11vw, 190px);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  will-change: top, left, transform;
  padding-bottom: 10px;
  padding-top: 10px;
}
.compliance__orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.compliance__orb-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered pill / heading / copy stack — fades up into view */
.compliance__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vh, 32px);
  text-align: center;
  max-width: 1080px;
  padding: 0 clamp(24px, 5vw, 64px);
  opacity: 0;
  will-change: opacity, transform;
}
.compliance__pill {
  background: var(--color-pill-bg-soft);
  border-radius: 24px;
  height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(14px, 1.05vw, 18px);
  color: var(--color-text);
}
.compliance__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--color-text);
}
.compliance__text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.6;
  color: #fff;
  max-width: 862px;
  margin: 0;
}

/* Regulatory badge row — pill-shaped outlined chips, each housing one
   compliance-body logo. They reveal one by one (staggered, see JS) once
   the heading/copy above has settled into view. */
.compliance__badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 18px);
  margin-top: clamp(40px, 5vh, 70px);
  max-width: 100%;
}
.compliance__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: clamp(62px, 8.6vw, 92px);
  padding: 0 clamp(20px, 2.2vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.compliance__badge {
  padding: 0;
  overflow: hidden;
}
.compliance__badge img {
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

@media (max-width: 1440px) {
  .compliance__badge {
    height: 60px;
  }
}

.compliance__badge:nth-child(3) img {
  filter: invert(1);
  opacity: 1;
}

/* ============================================
   GROWTH / PARTNERSHIP STATEMENT
   A quiet held beat: the brand wordmark glows faintly behind a centered
   quote, with a small warm orb blooming in above it. Wordmark, orb and
   quote each fade up in sequence as the section pins.
   ============================================ */
.growth {
  position: relative;
  height: 220vh;
  background: var(--color-bg-deep);
}
.growth__sticky {
  position: sticky;
  top: 20px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Giant faint wordmark — sits behind the quote as a quiet brand watermark */
.growth__wordmark {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: clamp(600px, 95vw, 1900px);
  aspect-ratio: 1701 / 435;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  display: block;
  background-color: rgb(211, 211, 211);
  -webkit-mask: url("../assets/Group 23.svg") no-repeat center / contain;
  mask: url("../assets/Group 23.svg") no-repeat center / contain;
}

/* Small warm orb — blooms in first, sitting just above the quote, nudged
   a touch right of dead-center so it isn't perfectly stacked over the text */
.growth__orb {
  position: absolute;
  left: 30%;
  top: 15%;
  transform: translate(-50%, -50%);
  width: clamp(100px, 12vw, 200px);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
.growth__orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.growth__orb-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered quote — sits over the wordmark; its lines reveal one by one
   (see .growth__line), with key promises picked out in the brand accent */
.growth__quote {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--color-text);
  text-align: center;
  max-width: 720px;
  padding: 0 clamp(24px, 5vw, 64px);
  margin: 0;
  top: 24%;
}

/* Each line of the quote fades/settles up on its own, staggered in
   sequence — line 1, then 2, then 3, then 4, then 5 */
.growth__line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
/* Gradient-filled text — same warm orange → accent-red gradient as the
   site's CTA buttons, clipped to the highlighted phrases */
.growth__highlight {
  background: linear-gradient(
    90deg,
    var(--color-cta-grad-end) 0%,
    var(--color-cta-grad-start) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================
   COMPLIANCE FLOW
   A quiet establishing beat: the title settles into place top-left,
   then a large warm-glow orb blooms in centered below it.
   ============================================ */
.complianceflow {
  position: relative;
  height: 300vh;
  background: var(--color-bg-deep);
}
.complianceflow__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.complianceflow__title {
  position: absolute;
  top: clamp(64px, 15vh, 120px);
  left: clamp(24px, 5.5vw, 96px);
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* Four overlapping step circles — the content's journey from creation
   through the compliance engine to the live feed. Each one overlaps
   the next (stacked so earlier circles sit in front), and they reveal
   one by one, staggered, sliding gently in from the right. */
.complianceflow__steps {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  z-index: 2;
}
.complianceflow__step {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 18vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0 clamp(24px, 2.6vw, 38px) 0 clamp(28px, 3vw, 44px);
  opacity: 0;
  transform: translateX(28px);
  will-change: opacity, transform;
}
.complianceflow__step:not(:first-child) {
  /* Subtle overlap — just enough for circles to kiss edges, not swallow content */
  margin-left: clamp(-32px, -2.4vw, -20px);
}
.complianceflow__step:nth-child(1) {
  z-index: 1;
}
.complianceflow__step:nth-child(2) {
  z-index: 2;
}
.complianceflow__step:nth-child(3) {
  z-index: 3;
}
.complianceflow__step:nth-child(4) {
  z-index: 4;
}

/* The first step is picked out with a soft warm-gradient ring, anchoring
   the sequence (drawn via the dual-background border trick so it stays
   circular) */
.complianceflow__step--active {
  border: 1px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(
        from 200deg,
        var(--color-cta-grad-end),
        var(--color-cta-grad-start) 32%,
        rgba(255, 255, 255, 0.06) 68%,
        rgba(255, 255, 255, 0.06) 360deg
      )
      border-box;
  backdrop-filter: blur(20px);
}

.complianceflow__step-index {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(12px, 1.05vw, 15px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: clamp(2px, 2vh, 10px);
}
.complianceflow__step-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 clamp(4px, 0.8vh, 8px);
  max-width: 100%;
}
.complianceflow__step-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  max-width: 100%;
  margin: 0;
}

/* Large warm-glow orb — blooms in centered below the title as a calm
   visual anchor for the section */
.complianceflow__orb {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%) scale(0.6);
  width: clamp(220px, 28vw, 460px);
  aspect-ratio: 1;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform, top;
}
.complianceflow__orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
}
.complianceflow__orb-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   VERTICALS SECTION
   ============================================ */
.verticals {
  position: relative;
  background: var(--color-bg-deep);
  padding: clamp(80px, 10vh, 140px) 0 clamp(80px, 10vh, 120px);
  overflow: hidden;
}
.verticals__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vh, 56px);
}
.verticals__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 24px);
  text-align: center;
}
.verticals__pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 15px);
  color: var(--color-text);
}
.verticals__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin: 0;
}
.verticals__sub {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 17px);
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── Carousel ── */
.verticals__carousel-wrap {
  width: 100%;
}
.verticals__carousel {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(24px, 5vw, 80px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.verticals__carousel::-webkit-scrollbar {
  display: none;
}
.verticals__carousel {
  cursor: grab;
}
.verticals__carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.verticals__card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: clamp(200px, 18vw, 280px);
  min-height: clamp(250px, 26vw, 350px);
  border-radius: clamp(16px, 1.6vw, 24px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  cursor: pointer;
  transition:
    transform 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease;
  will-change: transform;
}
.verticals__card--active {
  width: clamp(205px, 18.5vw, 285px);
  min-height: clamp(250px, 26vw, 350px);
  background: linear-gradient(
    180deg,
    rgba(255, 153, 51, 0.8) 0%,
    rgba(255, 51, 102, 0.8) 100%
  );
  border-color: transparent;
}
.verticals__card-icon {
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  color: rgba(255, 255, 255, 0.7);
}
.verticals__card--active .verticals__card-icon {
  color: rgba(255, 255, 255, 0.9);
}
.verticals__card-icon svg,
.verticals__card-icon img {
  width: 100%;
  height: 100%;
}
.verticals__card-icon--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.verticals__card-icon--circle svg {
  width: 55%;
  height: 55%;
}
.verticals__card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(14px, 1.3vw, 19px);
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}
.verticals__card-desc {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  flex: 1;
}
.verticals__card--active .verticals__card-desc {
  color: rgba(255, 255, 255, 0.8);
}
.verticals__card-num {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.9vw, 13px);
  color: rgba(255, 255, 255, 0.3);
  align-self: flex-end;
}
.verticals__card--active .verticals__card-num {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Nav arrows ── */
.verticals__nav {
  display: flex;
  gap: 16px;
}
.verticals__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.verticals__nav-btn svg {
  width: 16px;
  height: 16px;
}
.verticals__nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   CTA FINAL SECTION
   ============================================ */
.ctafinal {
  position: relative;
  background: #000;
  height: 300vh;
}
.ctafinal__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 96px;
}
.ctafinal__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Get Started button ── */
.ctafinal__top {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.ctafinal__btn {
  display: inline-flex;
  align-items: center;
  height: clamp(46px, 4.6vh, 60px);
  padding: 0 clamp(32px, 3.2vw, 52px);
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.4px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.ctafinal__btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Stage: left heading | sphere | right heading ── */
.ctafinal__stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ctafinal__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 44px);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  z-index: 2;
  flex: 1;
  align-self: center;
}
.ctafinal__heading--left {
  text-align: left;
  align-self: flex-start;
  flex: 0 0 auto;
  padding-right: clamp(16px, 2vw, 36px);
  margin-top: 40px;
  margin-left: 60px;
  max-width: 14ch;
}
.ctafinal__heading--right {
  text-align: left;
  align-self: flex-start;
  flex: 0 0 auto;
  padding-left: clamp(16px, 2vw, 36px);
  margin-top: 40px;
  margin-right: 60px;
  max-width: 14ch;
}

/* ── Sphere — fills the stage, no overflow ── */
.ctafinal__sphere-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(650px, 125vh, 1400px);
  aspect-ratio: 1;
  z-index: 1;
  align-self: flex-start;
  margin-top: -200px;
}
.ctafinal__sphere-img {
  width: 100%;
  height: 90%;
  object-fit: contain;
  display: block;
  padding-top: 200px;
}

/* ============================================
   CONTACT / WAITLIST SECTION
   ============================================ */
.contact {
  position: relative;
  height: 420vh;
  background: #000;
}

.contact__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  padding: clamp(60px, 8vh, 120px) clamp(24px, 6vw, 120px);
}

.contact__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 100px);
}

/* ── Left headline ── */
.contact__left {
  flex: 0 0 auto;
  width: clamp(240px, 32vw, 520px);
}

.contact__headline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 46px);
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

/* ── Right: card-wrap holds orb + card ── */
.contact__card-wrap {
  flex: 1;
  position: relative;
  z-index: 2;
}

/* Orb behind the card */
.contact__orb {
  position: absolute;
  /* sits BEHIND the card initially */
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 15vw, 240px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 transparent;
}
.contact__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  border-radius: 50%;
  transform: rotate(90deg);
}

/* ── Right form card ── */
.contact__card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.03);
  border-radius: clamp(24px, 3.5vw, 80px);
  padding: clamp(28px, 4vw, 80px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 44px);
}

/* Two-column row */
.contact__row {
  display: flex;
  gap: clamp(20px, 3vw, 56px);
}

/* Individual field */
.contact__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 18px);
  position: relative;
}

.contact__field--full {
  flex: none;
  width: 100%;
}

.contact__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(11px, 0.9vw, 16px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.contact__input,
.contact__textarea {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1vw, 18px);
  color: #fff;
  padding: clamp(4px, 0.6vh, 10px) 0;
  resize: none;
  caret-color: #ff9933;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Select */
.contact__field--select {
  position: relative;
}
.contact__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.contact__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1vw, 18px);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(4px, 0.6vh, 10px) 0;
  cursor: pointer;
}
.contact__select option {
  background: #111;
  color: #fff;
}
.contact__select-arrow {
  position: absolute;
  right: 0;
  width: clamp(16px, 1.2vw, 22px);
  height: clamp(16px, 1.2vw, 22px);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  flex-shrink: 0;
}

/* Underline */
.contact__underline {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
  transition: background 0.25s ease;
}
.contact__field:focus-within .contact__underline {
  background: rgba(255, 255, 255, 0.5);
}

/* Submit row */
.contact__submit-row {
  display: flex;
  align-items: center;
}

/* Outer dark pill wrapper */
.contact__btn-wrap {
  display: inline-flex;
  align-items: center;
  border: none;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s;
}
.contact__btn-wrap:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Inner row: gradient pill + white circle */
.contact__btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Gradient text pill */
.contact__btn-text {
  display: inline-flex;
  align-items: center;
  height: clamp(44px, 4.6vh, 58px);
  padding: 0 clamp(22px, 2.2vw, 36px);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 100%);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.contact__btn-wrap:hover .contact__btn-text {
  opacity: 0.88;
}

/* White circle arrow */
.contact__btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4.6vh, 58px);
  height: clamp(44px, 4.6vh, 58px);
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  transition: background 0.2s;
}
.contact__btn-arrow svg {
  width: clamp(16px, 1.3vw, 20px);
  height: clamp(16px, 1.3vw, 20px);
  stroke: #111;
}
.contact__btn-wrap:hover .contact__btn-arrow {
  background: #f0f0f0;
}

/* Footer note */
.contact__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(12px, 0.95vw, 18px);
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  line-height: 1.5;
}

/* Marquee inside contact sticky — runs over the orb */
.contact__marquee {
  position: absolute;
  top: calc(50% + 150px);
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.contact__marquee-track {
  display: inline-flex;
  animation: marqueeScroll 18s linear infinite;
  will-change: transform;
}
.contact__marquee-text {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6vw, 110px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.07);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  background: var(--color-bg-deep);
  overflow: visible;
  padding: clamp(60px, 8vh, 120px) clamp(24px, 5vw, 100px)
    clamp(24px, 4vh, 48px);
}

/* Background div for footer — extends up over the marquee/orb area so it
   acts as a single shared background instead of cutting off sharply */
.footer__bg {
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 120% 70% at 50% 100%,
      var(--color-glow-1) 0%,
      transparent 90%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(70, 20, 25, 0.1) 25%,
      rgba(70, 20, 25, 0.22) 50%,
      rgba(70, 20, 25, 0.35) 75%,
      rgba(70, 20, 25, 0.45) 100%
    );
}

/* Background glow */
.footer__glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: clamp(400px, 65vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.footer__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.65;
  transform: rotate(90deg);
}

/* Inner: logo + columns */
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 160px);
  margin-bottom: clamp(48px, 7vh, 100px);
}
.footer__logo {
  flex-shrink: 0;
}
.footer__logo img {
  height: clamp(42px, 4.6vw, 74px);
  width: auto;
  display: block;
}

/* Columns */
.footer__cols {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 100px);
  flex-wrap: wrap;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
}
.footer__col-head {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 400;
  color: #fff;
  margin: 0 0 clamp(6px, 1vh, 14px);
}
.footer__link {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.6;
}
.footer__link:hover {
  color: #fff;
}

/* Socials */
.footer__socials {
  display: flex;
  gap: clamp(12px, 1.2vw, 18px);
  align-items: center;
  margin-top: clamp(4px, 0.8vh, 10px);
}
.footer__social-icon {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
  display: flex;
}
.footer__social-icon img {
  width: clamp(20px, 1.8vw, 28px);
  height: clamp(20px, 1.8vw, 28px);
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.footer__social-icon:hover img {
  opacity: 1;
}
.footer__social-icon:hover {
  color: #fff;
}

/* Bottom bar */
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(20px, 3vh, 36px);
}
.footer__copy,
.footer__credit {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 16px);
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ============================================
   IN PRACTICE SECTION
   ============================================ */
.inpractice {
  position: relative;
  height: 2400vh; /* 01 (820vh) + 02 Neobank (780vh) + 03 Credit Union (800vh) */
  background: var(--color-bg-deep);
}
.inpractice__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Decorative glow circle — small contained orb on the right, same
   dark-circle + inner pink-blob style as the problem section orb */
.inpractice__glow {
  position: absolute;
  right: 5vw;
  top: 85%;
  transform: translateY(-50%);
  width: clamp(160px, 13vw, 220px);
  height: clamp(160px, 13vw, 220px);
  background: url("../assets/Group 68.png") center center / cover no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  z-index: 0;
}

/* Section heading — Figma: top:142px/1117px=12.7vh, width:1260px/1728px=72.9vw, font:125px/1728px=7.26vw */
.inpractice__heading {
  position: absolute;
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1260px, 73vw);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(32px, 5.2vw, 92px);
  line-height: 0.94;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-text);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}

/* -----------------------------------------------
   Left panel: case study
   ----------------------------------------------- */
.inpractice__case {
  position: absolute;
  left: 70px;
  top: 42vh;
  width: min(611px, 35.4vw);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}
.inpractice__num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(95px, 13vw, 175px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  user-select: none;
  margin-bottom: -0.12em;
}
.inpractice__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 1.9vw, 32px);
  color: var(--color-text);
  margin-bottom: 3vh;
}
.inpractice__steps {
  display: grid;
}
.inpractice__step {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  will-change: opacity, transform;
}
.inpractice__dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background: #fff;
  margin-top: 6px;
  flex-shrink: 0;
}
.inpractice__step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inpractice__step-name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(14px, 1.3vw, 22px);
  color: var(--color-text);
}
.inpractice__step-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(12px, 1.04vw, 18px);
  line-height: 1.5;
  color: #fff;
  max-width: 380px;
}

/* -----------------------------------------------
   Right panel: iPhone mockup
   ----------------------------------------------- */
.inpractice__phone-wrap {
  position: absolute;
  right: max(20px, 6vw);
  top: 28vh;
  width: clamp(200px, 29.4vw, 440px);
  aspect-ratio: 445 / 699;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
  border-radius: 9.5% / 3.8%;
}
.inpractice__phone-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
}
.inpractice__screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #05050c;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
/* Top overlay — sits above float card (z-index > 4) */
.inpractice__top-overlay {
  position: absolute;
  top: 2%;
  left: 6%;
  right: 6%;
  z-index: 5;
  pointer-events: none;
  background: #0a0a0b;
  border-radius: 10% 10% 0 0;
}
.inpractice__island {
  flex-shrink: 0;
  width: 58%;
  pointer-events: none;
}
.inpractice__island img {
  width: 100%;
  object-fit: contain;
}

.inpractice__app-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  height: clamp(30px, 3.15vw, 31px);
  margin-top: 2%;
}
.inpractice__app-close {
  font-size: clamp(9px, 1vw, 14px);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  user-select: none;
}
.inpractice__app-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(10px, 1.9vw, 26px);
  color: var(--color-text);
  letter-spacing: 0.13em;
}
/* Island row — Dynamic Island centered, signal+wifi pinned to the right, same line */
.inpractice__island-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1% 5% 0;
}
.inpractice__status-icons {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.35vw, 5px);
}
.inpractice__status-icon {
  width: clamp(12px, 1.25vw, 18px);
  height: auto;
  display: block;
  opacity: 0.9;
  fill: white;
}
.inpractice__status-icon rect,
.inpractice__status-icon path,
.inpractice__status-icon circle {
  fill: white;
}

.inpractice__app-avatar {
  width: clamp(20px, 2.15vw, 31px);
  height: clamp(20px, 3.15vw, 31px);
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}
.inpractice__app-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inpractice__feed-bg {
  flex: 1;
}

/* -----------------------------------------------
   Phone-screen cards (Survey + Rebalancing)
   ----------------------------------------------- */
.inpractice__phone-card {
  position: absolute;
  top: 13%;
  left: 5%;
  right: 5%;
  padding: 40px 6% 5%;
  border-radius: 7%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  will-change: opacity, transform;
}

/* Educate card — Tapfeed card style */
.inpractice__phone-card--educate {
  display: none;
}
.inpractice__ec-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5%;
}
.inpractice__ec-icon {
  width: clamp(14px, 1.6vw, 24px);
  height: clamp(14px, 1.6vw, 24px);
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.inpractice__ec-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
}
.inpractice__ec-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(7px, 0.85vw, 13px);
  color: var(--color-text);
  flex: 1;
}
.inpractice__ec-badge {
  background: linear-gradient(90deg, #ff9933 0%, #ff3366 100%);
  border-radius: 100px;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: clamp(5px, 0.55vw, 8px);
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}
.inpractice__ec-thumb {
  position: relative;
  width: 100%;
  height: clamp(45px, 5vw, 82px);
  border-radius: 5%;
  overflow: hidden;
  margin-bottom: 4%;
  background: #1a1015;
}
.inpractice__ec-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 33%;
  display: block;
}
.inpractice__ec-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inpractice__ec-play img {
  width: clamp(18px, 2vw, 30px);
  height: clamp(18px, 2vw, 30px);
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.7));
}
.inpractice__ec-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(8px, 0.95vw, 15px);
  line-height: 1.35;
  color: #fff;
  margin-bottom: 3%;
}
.inpractice__ec-sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(6px, 0.62vw, 9px);
  color: #fff;
}

/* Survey float card — matches Figma: floats outside phone overlapping left edge */
.inpractice__float-survey {
  position: absolute;
  pointer-events: none;
  right: max(100px, 14.1vw);
  top: 47vh;
  width: clamp(160px, 21vw, 370px);
  padding: clamp(12px, 1.2vw, 20px);
  border-radius: clamp(12px, 1.2vw, 20px);
  background: rgba(12, 12, 15, 0.82);
  backdrop-filter: blur(55px);
  -webkit-backdrop-filter: blur(55px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
  overflow: visible;
}
.inpractice__survey-q {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 1.1vw, 18px);
  line-height: 1.35;
  color: #fff;
  margin-bottom: clamp(10px, 1vw, 16px);
}
.inpractice__survey-btns {
  display: flex;
  gap: clamp(6px, 0.6vw, 10px);
  position: relative;
}
.inpractice__survey-btn {
  flex: 1;
  padding: clamp(6px, 0.55vw, 10px) clamp(10px, 1vw, 16px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: clamp(7px, 0.78vw, 12px);
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  white-space: nowrap;
}
.inpractice__survey-btn--yes {
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 124.8%);
  border-color: rgba(255, 255, 255, 0.25);
}
.inpractice__survey-glow {
  position: absolute;
  bottom: -50%;
  left: 10%;
  right: 10%;
  height: 80%;
  background: radial-gradient(
    ellipse 80% 60% at 40% 50%,
    rgba(180, 30, 100, 0.55) 0%,
    transparent 70%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}
/* 02 inside-phone survey card — 3 vertical radio options (Figma 51:7259) */
.inpractice__phone-survey {
  position: absolute;
  top: 40%;
  left: 5%;
  right: 5%;
  transform: translateY(-50%);
  padding: clamp(12px, 1.5vw, 20px);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: 3;
  will-change: opacity, transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.inpractice__phone-survey-q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(11px, 1.25vw, 18px);
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: clamp(10px, 1.1vw, 16px);
}
.inpractice__phone-survey-opts {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.75vw, 11px);
  position: relative;
}
.inpractice__phone-survey-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(11px, 1.1vw, 16px) clamp(12px, 1.2vw, 18px);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  gap: 8px;
}
.inpractice__phone-survey-opt--selected {
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 110%);
  border-color: rgba(255, 255, 255, 0.3);
}
.inpractice__phone-survey-opt-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(9px, 1vw, 14px);
  color: #ffffff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.inpractice__phone-survey-opt-label--dim {
  font-weight: 500;
  color: #ffffff;
  opacity: 1;
}
.inpractice__phone-survey-radio {
  flex-shrink: 0;
  width: clamp(16px, 1.6vw, 22px);
  height: clamp(16px, 1.6vw, 22px);
}
.inpractice__phone-survey-glow {
  display: none;
}

/* 02 High-Yield Savings Account card (Figma 51:8012) */
.inpractice__savings-card {
  top: 33% !important;
  background: #100c1a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 14px);
  padding: clamp(10px, 1.2vw, 16px);
  z-index: 3;
}
.inpractice__savings-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.inpractice__savings-left {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 7px);
}
.inpractice__savings-fdic {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.3vw, 5px);
  background: rgba(111, 221, 105, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 100px;
  padding: clamp(2px, 0.25vw, 4px) clamp(5px, 0.55vw, 8px);
  width: fit-content;
}
.inpractice__savings-verified {
  width: clamp(10px, 1.1vw, 14px);
  height: clamp(10px, 1.1vw, 14px);
  flex-shrink: 0;
}
.inpractice__savings-fdic span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(6px, 0.65vw, 9px);
  color: #7eff78;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.inpractice__savings-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(9px, 1vw, 14px);
  color: #ffffff;
  line-height: 1.3;
}
.inpractice__savings-apy {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 20px);
  color: #ffffff;
  text-align: right;
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}
.inpractice__savings-apy span {
  font-size: clamp(8px, 0.85vw, 12px);
  color: #ffffff;
  opacity: 1;
}
.inpractice__savings-btn {
  width: 100%;
  padding: clamp(7px, 0.75vw, 11px) clamp(12px, 1.2vw, 18px);
  border-radius: 100px;
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 100%);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(8px, 0.9vw, 13px);
  color: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(255, 80, 80, 0.4);
}

/* Rebalancing card — matches Figma 42:5339 */
.inpractice__rebalance-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 17px);
}
.inpractice__rebalance-icon {
  width: clamp(12px, 1.4vw, 22px);
  height: clamp(12px, 1.4vw, 22px);
  flex-shrink: 0;
}
.inpractice__rebalance-icon svg {
  width: 100%;
  height: 100%;
}

.inpractice__rebalance-icon-wrap {
  width: clamp(32px, 3.6vw, 50px);
  height: clamp(32px, 3.6vw, 50px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inpractice__rebalance-icon-wrap svg,
.inpractice__rebalance-icon-wrap img {
  width: 100%;
  height: 100%;
}
.inpractice__rebalance-info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.inpractice__rebalance-name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(11px, 1.2vw, 16px);
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.95);
  -webkit-font-smoothing: antialiased;
}
.inpractice__rebalance-sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(6px, 0.65vw, 10px);
  color: rgba(255, 255, 255, 0.35);
}
.inpractice__rebalance-badge {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.4vw, 6px);
  padding: clamp(5px, 0.6vw, 9px) clamp(10px, 1.2vw, 17px);
  border-radius: 100px;
  border: 1px solid #ff9933;
  background: linear-gradient(
    90deg,
    rgba(255, 153, 51, 0.07) 0%,
    rgba(255, 51, 102, 0.07) 100%
  );
  font-family: var(--font-body);
  font-size: clamp(8px, 0.9vw, 13px);
  font-weight: var(--font-weight-regular);
  color: #ff9933;
  flex-shrink: 0;
  white-space: nowrap;
}
.inpractice__rebalance-arrow {
  width: clamp(6px, 0.6vw, 9px);
  height: auto;
  flex-shrink: 0;
}

/* Phase E: dark cover hides the purple screen gradient */
.inpractice__screen-cover {
  position: absolute;
  inset: 0;
  background: #05050c;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}

/* Phase E: image blob behind rebalance card */
.inpractice__convert-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../assets/SCREEN COLOR (BLUR).png") center 65% / 100% 100%
    no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
[data-anim="practice-convert-glow"] {
  background-position: center 20%;
  background-size: 100% 140%;
  will-change: opacity;
}
/* Rebalance card — glassmorphism effect */
.inpractice__phone-card--rebalance {
  top: 35%;
  padding: 4% 4%;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 4;
}
[data-anim="practice2-card-rebalance"] {
  top: auto !important;
  bottom: 5%;
}
[data-anim="practice2-convert-glow"] {
  background-position: center 25%;
  background-size: 140% 140%;
  will-change: opacity;
}
/* -----------------------------------------------
   Tapfeed floating card — overlaps phone left edge
   Figma: card left ≈ 58% canvas, phone ≈ 67% canvas
   ----------------------------------------------- */
.inpractice__float-card-glow {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  bottom: 4%;
  overflow: hidden;
  background: url("../assets/SCREEN COLOR (BLUR).png") 50% 15% / 130% 130%
    no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.inpractice__float-card {
  position: absolute;
  pointer-events: none;
  /* Overlap phone's left edge: phone is at right:4vw wide 432px,
     so phone left edge = 4vw + 432.676px from right.
     Place card right edge 90px inside phone from its left edge. */
  /* Figma: left=63vw, width=22.9vw → right=14.1vw at 1728px canvas */
  right: max(100px, 14.1vw);
  top: 47vh;
  width: clamp(170px, 22.9vw, 395px); /* Figma: 395px / 1728px = 22.9vw */
  padding: clamp(12px, 1.2vw, 20px);
  border-radius: clamp(14px, 1.4vw, 22px);
  background: rgba(12, 12, 15, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  z-index: 4;
  will-change: opacity, transform;
}
.inpractice__tapfeed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 1vw, 16px);
}
.inpractice__tapfeed-icon-wrap {
  width: clamp(26px, 2.4vw, 40px);
  height: clamp(26px, 2.4vw, 40px);
  border-radius: 50%;
  background: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.inpractice__tapfeed-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
}
.inpractice__tapfeed-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(12px, 1.1vw, 18px);
  color: var(--color-text);
  flex: 1;
}
.inpractice__tapfeed-badge {
  font-family: var(--font-body);
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 500;
  color: #fff;
  padding: 3px 10px;
  border-radius: 100px;
  background: linear-gradient(90deg, #ff9933 0%, #ff3366 100%);
  flex-shrink: 0;
}
.inpractice__tapfeed-thumb {
  position: relative;
  width: 100%;
  height: clamp(80px, 8vw, 130px);
  border-radius: clamp(8px, 0.8vw, 12px);
  overflow: hidden;
  margin-bottom: clamp(8px, 0.8vw, 14px);
  background: rgba(255, 255, 255, 0.04);
}
.inpractice__tapfeed-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inpractice__tapfeed-video {
  object-position: center 33%;
}
.inpractice__tapfeed-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inpractice__tapfeed-play img {
  width: clamp(28px, 2.8vw, 46px);
  height: clamp(28px, 2.8vw, 46px);
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
}
.inpractice__tapfeed-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(12px, 1.1vw, 18px);
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 6px;
}
.inpractice__tapfeed-sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: clamp(10px, 0.75vw, 12px);
  color: #fff;
}

/* -----------------------------------------------
   03 Credit Union survey — Yes / Not Yet (Figma 51:9219)
   ----------------------------------------------- */
.inpractice__cu-survey {
  position: absolute;
  top: 35%;
  left: 5%;
  right: 5%;
  padding: clamp(12px, 1.5vw, 20px);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 0;
  z-index: 3;
  will-change: opacity, transform;
}
.inpractice__cu-survey-q {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 1.15vw, 17px);
  line-height: 1.4;
  color: #fff;
  margin-bottom: clamp(10px, 1.1vw, 15px);
}
.inpractice__cu-survey-btns {
  position: relative;
  display: flex;
  gap: clamp(6px, 0.7vw, 11px);
}
.inpractice__cu-survey-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 51, 102, 0.6) 0%,
    rgba(255, 153, 51, 0.6) 124.8%
  );
  filter: blur(4px);
  border-radius: 100px;
  pointer-events: none;
}
.inpractice__cu-survey-btn {
  flex: 1;
  padding: clamp(6px, 0.65vw, 10px) clamp(10px, 1.5vw, 22px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(9px, 0.9vw, 13px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.inpractice__cu-survey-btn--yes {
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 124.8%);
  border-color: rgba(255, 255, 255, 0.44);
}

/* -----------------------------------------------
   03 Mortgage Pre-Approval card (Figma 51:9979)
   ----------------------------------------------- */
.inpractice__mortgage-card {
  position: absolute;
  bottom: 40%;
  left: 5%;
  right: 5%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 14px);
  padding: clamp(10px, 1.35vw, 16px);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 5;
}
.inpractice__mortgage-header {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
  flex-wrap: wrap;
}
.inpractice__mortgage-header .inpractice__rebalance-icon-wrap {
  margin-right: 0;
}
.inpractice__mortgage-header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.3vw, 5px);
}
.inpractice__mortgage-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(8px, 0.95vw, 14px);
  color: #fff;
  white-space: nowrap;
}
.inpractice__mortgage-rec {
  background: rgba(111, 221, 105, 0.1);
  border-radius: 100px;
  padding: clamp(2px, 0.25vw, 4px) clamp(5px, 0.6vw, 9px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(5px, 0.58vw, 9px);
  color: #6fdd69;
  white-space: nowrap;
}
.inpractice__mortgage-subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(7px, 0.85vw, 13px);
  color: #fff;
}
.inpractice__mortgage-checks {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.65vw, 10px);
}
.inpractice__mortgage-check {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.55vw, 9px);
}
.inpractice__mortgage-check-icon {
  width: clamp(10px, 1.05vw, 15px);
  height: clamp(10px, 1.05vw, 15px);
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9933 0%, #ff3366 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inpractice__mortgage-check-icon svg {
  width: 70%;
  height: 70%;
}
.inpractice__mortgage-check span {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(7px, 0.8vw, 12px);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.inpractice__mortgage-btn {
  width: 100%;
  padding: clamp(7px, 0.75vw, 11px) clamp(12px, 1.5vw, 21px);
  border-radius: 100px;
  background: linear-gradient(90deg, #ff3366 0%, #ff9933 124.8%);
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(8px, 0.95vw, 14px);
  color: #fff;
  text-align: center;
  cursor: pointer;
}

/* =============================================
   SHOWCASE — Figma 52:10760
   Dark background, small pink/magenta sphere
   ============================================= */

.showcase {
  position: relative;
  height: 1600vh; /* 400vh orb + 300vh text + 500vh images + 200vh text out + 200vh images out */
  background: var(--color-bg-deep);
}

.showcase__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* ── Orb — circle container clips image, box-shadow draws the ring ── */
.showcase__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(130px, 19.5vw, 337px);
  height: clamp(130px, 19.5vw, 337px);
  border-radius: 50%;
  overflow: hidden; /* clips img to circle */
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}

/* Image fills and is cropped to the circle */
.showcase__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =============================================
   SHOWCASE — Content Strategy phase (merged)
   Phone slides in from RIGHT. Text rises from BELOW.
   Orb shrinks and drifts DOWN.
   ============================================= */

/* Phone — RIGHT side; JS sets top to align center with heading center */
.showcase__cs-phone {
  position: absolute;
  right: max(40px, 8vw);
  top: 20%; /* fallback — JS overrides this precisely */
  width: clamp(120px, 14vw, 250px);
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 3;
}

.showcase__cs-phone img {
  width: 100%;
  height: auto;
  display: block;
}

/* Left image — placed below the Content Strategy description, JS centers it */
.showcase__cs-left {
  position: absolute;
  left: 355px;
  top: 500px;
  width: clamp(105px, 12.5vw, 225px);
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 3;
}

.showcase__cs-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right image — JS places it 5px right of the orb, at orb's vertical center */
.showcase__cs-right {
  position: absolute;
  left: 55%; /* fallback — JS overrides precisely */
  top: 70%; /* fallback — JS overrides precisely */
  width: clamp(95px, 11.5vw, 205px);
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 3;
}

.showcase__cs-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text block — centered */
.showcase__cs-text {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 2vw, 36px);
  width: clamp(280px, 46vw, 800px);
  z-index: 3;
}

/* Pill */
.showcase__cs-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 0 clamp(16px, 1.6vw, 28px);
  height: clamp(44px, 5.6vh, 64px);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 1.16vw, 20px);
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}

/* Heading */
.showcase__cs-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 3.7vw, 64px);
  line-height: 0.9;
  letter-spacing: clamp(1px, 0.148vw, 2.56px);
  text-transform: capitalize;
  color: var(--color-text);
  opacity: 0;
  will-change: opacity, transform;
}

/* Description — back in the centered text block */
.showcase__cs-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 1.2vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-width: clamp(260px, 38vw, 640px);
  opacity: 0;
  will-change: opacity, transform;
}

/* ============================================
   PILLARS — Section 03 / Content Pillars
   Figma node 55:6787 (exact match)
   ============================================ */
.pillars {
  position: relative;
  height: 1200vh;
  background: #000;
}

.pillars__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* ── Heading: large "03" + "Content Pillars" stacked — top-left ── */
/* Figma: 61px on 1728px canvas = 3.54vw */
.pillars__heading {
  position: absolute;
  top: calc(96px + 10px);
  left: clamp(40px, 4.3vw, 76px);
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
}

.pillars__num,
.pillars__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 3vw, 52px);
  line-height: 0.9;
  color: var(--color-text);
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

/* ── Hero image — full width, leaves bottom space for /01 row ── */
.pillars__visual {
  position: absolute;
  top: calc(
    96px + 10px + clamp(60px, 7vw, 110px)
  ); /* navbar + gap + heading height */
  left: clamp(40px, 4.3vw, 76px);
  right: clamp(40px, 4.3vw, 76px);
  bottom: clamp(120px, 16vh, 180px);
  opacity: 1;
  z-index: 3;
  overflow: hidden;
  background: #000;
}

.pillars__visual img,
.pillars__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Video play/pause + mute controls — bottom-left of the hero video */
.pillars__video-controls {
  position: absolute;
  left: clamp(14px, 1.6vw, 28px);
  bottom: clamp(14px, 1.6vw, 28px);
  display: flex;
  gap: clamp(8px, 0.9vw, 14px);
  z-index: 4;
}

.pillars__video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3vw, 44px);
  height: clamp(32px, 3vw, 44px);
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pillars__video-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

.pillars__video-btn svg {
  display: none;
}

/* Play button: shows "play" icon when paused, "pause" icon when playing */
.pillars__video-btn--play .icon-pause {
  display: block;
}
.pillars__video-btn--play.is-paused .icon-pause {
  display: none;
}
.pillars__video-btn--play.is-paused .icon-play {
  display: block;
}

/* Mute button: shows "volume" icon when unmuted, "mute" icon when muted */
.pillars__video-btn--mute .icon-mute {
  display: block;
}
.pillars__video-btn--mute.is-unmuted .icon-mute {
  display: none;
}
.pillars__video-btn--mute.is-unmuted .icon-volume {
  display: block;
}

/* /02 Understand image — same position as visual-1 after it repositions */
.pillars__visual--2 {
  top: 96px;
  bottom: 120px;
  opacity: 0;
  pointer-events: none;
}
.pillars__visual--2.is-active {
  pointer-events: auto;
}

/* /03 Convert image — same fixed position */
.pillars__visual--3 {
  top: 96px;
  bottom: 120px;
  opacity: 0;
  pointer-events: none;
}
.pillars__visual--3.is-active {
  pointer-events: auto;
}

/* Orb — below convert text, bottom edge */
.pillars__orb {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(180px, 20vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  z-index: 2;
  will-change: opacity, transform;
  pointer-events: none;
}
.pillars__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  display: block;
}

/* ── /01 Educate row — sits below image ── */
.pillars__row {
  position: absolute;
  bottom: clamp(16px, 2.5vh, 32px);
  left: clamp(40px, 4.3vw, 76px);
  right: clamp(40px, 4.3vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  z-index: 5;
  opacity: 0;
  will-change: opacity, transform;
}

.pillars__row-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: clamp(80px, 8vw, 140px);
}

/* Figma: 30.6px light */
.pillars__row-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(14px, 1.77vw, 30px);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

/* Figma: 34.4px semibold */
.pillars__row-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(16px, 1.99vw, 34px);
  color: var(--color-text);
  line-height: 1;
}

/* Figma: 22.9px regular, max-width ~966px / 1728 = 55.9vw */
.pillars__row-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: clamp(12px, 1.1vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: clamp(260px, 55vw, 966px);
  margin-top: clamp(8px, 1.2vh, 16px);
}

/* ============================================
   04 SELF-SERVE / FULL-SERVICE SECTION
   ============================================ */
.selfserve {
  position: relative;
  height: 500vh;
  background: var(--color-bg);
}

.selfserve__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

.selfserve__bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: 55vw;
  height: 65vh;
  background: radial-gradient(
    ellipse at center,
    rgba(55, 6, 10, 0.98) 0%,
    rgba(30, 4, 7, 0.6) 45%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Left notes ── */
.selfserve__notes {
  position: absolute;
  left: clamp(40px, 4.3vw, 76px);
  top: calc(96px + clamp(20px, 3vh, 48px));
  display: grid;
  z-index: 3;
  width: clamp(220px, 24.7vw, 428px);
}

.selfserve__notes .selfserve__note {
  grid-area: 1 / 1;
}

.selfserve__note-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(18px, 2.3vw, 40px);
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-transform: capitalize;
  line-height: 0.9;
  margin: 0 0 clamp(10px, 1.5vh, 20px);
}

.selfserve__note-body {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, 24px);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.selfserve__note--2 .selfserve__note-title,
.selfserve__note--2 .selfserve__note-body {
  color: rgba(255, 255, 255, 0.4);
}

/* ── iPhone ── */
.selfserve__phone {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100vh - 96px);
  width: auto;
  aspect-ratio: 1302 / 2696;
  z-index: 2;
}

.selfserve__phone-frame {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.selfserve__phone-details {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 4;
  pointer-events: none;
}

.selfserve__status-bar {
  position: absolute;
  top: 4%;
  left: 5.4%;
  right: 5.4%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.selfserve__island {
  grid-column: 2;
  height: clamp(20px, 2.2vw, 36px);
  width: auto;
  justify-self: center;
}
.selfserve__status-icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 8px);
}
.selfserve__status-icons img {
  width: clamp(10px, 1.1vw, 18px);
  height: auto;
  display: block;
}

.selfserve__phone-screen {
  position: absolute;
  top: 11.2%;
  left: 5.4%;
  right: 5.4%;
  bottom: 2.4%;
  background: #0f0204;
  border-radius: 11.5% / 5.5%;
  overflow: hidden;
  z-index: 2;
}

.selfserve__phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px clamp(10px, 1.3vw, 18px) clamp(6px, 0.8vw, 10px);
}

.selfserve__screen-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: clamp(9px, 1.05vw, 18px);
  color: white;
}

.selfserve__phone-topbar svg {
  width: clamp(9px, 1.05vw, 18px);
  height: clamp(9px, 1.05vw, 18px);
}

.selfserve__phone-search {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.6vw, 10px);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50px;
  padding: calc(clamp(5px, 0.65vw, 11px) + 4px) clamp(8px, 1vw, 16px)
    clamp(5px, 0.65vw, 11px);
  margin: 0 clamp(8px, 1vw, 16px) clamp(6px, 0.8vw, 12px);
  font-family: var(--font-body);
  font-size: clamp(9px, 0.93vw, 16px);
  color: #a6a6a6;
}

/* ── Feed cards — float over phone as absolute siblings ── */
.selfserve__card {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: clamp(16px, 2.3vw, 40px);
  padding: clamp(10px, 1.2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 16px);
  overflow: hidden;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 5;
  width: clamp(180px, 20vw, 340px);
}

/* Card A: below search bar, overlaps phone right side */
.selfserve__card--a {
  left: calc(50% + 1vw);
  z-index: 7;
  /* top is set dynamically in JS to align with the search bar's bottom edge — no gap */
  height: clamp(200px, 38vh, 430px);
  padding-top: 0;
}

/* Card B: lower-center — sits in lower phone area, overlaps card A */
.selfserve__card--b {
  left: calc(50% - 13vw);
  bottom: clamp(40px, 8vh, 90px);
  height: clamp(180px, 35vh, 400px);
  z-index: 8;
}

.selfserve__card-header {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.75vw, 13px);
  flex-shrink: 0;
}

.selfserve__card-avatar {
  width: clamp(20px, 2.4vw, 52px);
  height: clamp(20px, 2.4vw, 52px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.selfserve__card-meta {
  flex: 1;
  min-width: 0;
}

.selfserve__card-name {
  font-family: var(--font-body);
  font-size: clamp(8px, 0.96vw, 16px);
  color: white;
  margin: 0;
  line-height: 1.3;
}

.selfserve__card-time {
  font-family: var(--font-body);
  font-size: clamp(7px, 0.8vw, 14px);
  color: #a6a6a6;
  margin: 0;
  line-height: 1.3;
}

.selfserve__card-more {
  font-size: clamp(9px, 1vw, 16px);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 2px;
  flex-shrink: 0;
}

.selfserve__card-text {
  font-family: var(--font-body);
  font-size: clamp(7px, 0.78vw, 13px);
  color: white;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.selfserve__card-thumb {
  flex: 1;
  min-height: 0;
  border-radius: clamp(8px, 1vw, 18px);
  overflow: hidden;
}

.selfserve__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selfserve__card-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.selfserve__card-actions-icons {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1px;
}

/* ── Right: small side orb ── */
.selfserve__side-orb {
  position: absolute;
  right: clamp(20px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 5vw, 80px);
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
}

.selfserve__side-orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.selfserve__side-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  display: block;
}

/* Bright companion orb — overlaps the side orb's edge (eclipse pair) when Card A appears */
.selfserve__side-orb-glow {
  position: absolute;
  right: -16%;
  top: 34%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ff7a4d 0%,
    #ff3366 45%,
    rgba(255, 51, 102, 0) 75%
  );
  z-index: 6;
  opacity: 0;
  transform: scale(0.4);
  will-change: opacity, transform;
  pointer-events: none;
}

/* ── Right: gradient dot ── */
.selfserve__dot {
  position: absolute;
  left: 50%;
  bottom: -14%;
  transform: translateX(-50%);
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ff7a4d 0%,
    #ff3366 60%,
    #ff3366 100%
  );
  opacity: 0;
  z-index: 7;
  will-change: opacity, transform;
}

/* ── Outro: lone glowing orb that blooms at the page center as everything else fades ── */
.selfserve__outro-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  width: clamp(110px, 13vw, 230px);
  aspect-ratio: 1;
  opacity: 0;
  z-index: 9;
  pointer-events: none;
  will-change: opacity, transform;
}

.selfserve__outro-orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.selfserve__outro-orb-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Right: stat text ── */
.selfserve__stat {
  position: absolute;
  right: clamp(40px, 4.3vw, 76px);
  bottom: clamp(50px, 7vh, 110px);
  width: clamp(160px, 19vw, 330px);
  font-family: var(--font-body);
  font-size: clamp(10px, 1.15vw, 19px);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  opacity: 0;
  z-index: 3;
  will-change: opacity, transform;
  margin: 0;
}

/* ============================================
   THE REVENUE STATEMENT SECTION
   Figma: 60:1692 → 60:1851
   ============================================ */
.statement {
  position: relative;
  height: 420vh;
  background: var(--color-bg);
}
.statement__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  /* Clip everything above the navbar's lower edge so the rising/exiting card
     disappears right at that line instead of sliding up behind the navbar */
  clip-path: inset(96px 0 0 0);
}

/* Continuing orb — starts low (where the previous section left it) and drifts up
   above the rising panel as the user scrolls */
.statement__orb {
  position: absolute;
  left: 50%;
  top: 69%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 14vw, 260px);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  will-change: top, transform;
}
.statement__orb-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.statement__orb-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Large warm-gradient panel — climbs up from below the viewport, fades in,
   then reveals its centered logo + quote content */
.statement__panel {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 96px;
  height: 78vh;
  border-radius: clamp(28px, 3.7vw, 64px);
  background: url("../assets/Subtract.svg") no-repeat center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 0 clamp(24px, 6vw, 120px) 0;
  will-change: opacity, transform;
  z-index: 1;
}

/* Once the panel shrinks into the centered card, swap to the cutout artwork
   whose notch lines up with the orb resting on its bottom edge */
.statement__panel.is-card {
  background: url("../assets/Subtract.svg") no-repeat center / 100% 100%;
}

.statement__panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vh, 40px);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}

.statement__logo {
  height: clamp(26px, 2.6vw, 42px);
  width: auto;
  display: block;
}

.statement__quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, 54px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--color-text);
  max-width: 1100px;
  margin: 0;
}

/* ============================================================
   RESPONSIVE — hamburger nav, tablet, mobile
   ============================================================ */
.navbar__burger {
  display: none;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background 0.2s;
}
.navbar__burger:hover {
  background: rgba(255, 255, 255, 0.1);
}
.navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.navbar__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar__mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(10, 10, 11, 0.98);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 8px max(20px, 5vw) 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
  animation: navMobileSlideIn 0.25s ease-out;
}
@keyframes navMobileSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.navbar__mobile[hidden] {
  display: none;
}
.navbar__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navbar__mobile-links a {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.navbar__mobile-links a::after {
  content: "→";
  color: rgba(255, 255, 255, 0.32);
  font-size: 18px;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.navbar__mobile-links a:hover,
.navbar__mobile-links a:active {
  color: #fff;
  padding-left: 8px;
}
.navbar__mobile-links a:hover::after,
.navbar__mobile-links a:active::after {
  color: #ff7a4c;
  transform: translateX(4px);
}
.navbar__mobile-links a:last-child {
  border-bottom: none;
}

.navbar__mobile-cta {
  display: block;
  text-align: center;
  background: linear-gradient(90deg, #ff9933 0%, #ff3366 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 16px 24px;
  border-radius: 100px;
  text-decoration: none;
  margin-top: 4px;
  box-shadow: 0 10px 30px rgba(255, 51, 102, 0.28);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.navbar__mobile-cta:active {
  transform: scale(0.98);
  box-shadow: 0 6px 18px rgba(255, 51, 102, 0.22);
}

@media (max-width: 1440px) {
  .ctafinal__stage .ctafinal__sphere-wrap {
    width: 785px !important;
  }
}

@media (max-width: 1024px) {
  /* Force pricing tables visible — strip GSAP fade-in opacity:0
     initial states so the cards/header/disclaimer don't depend on
     the sticky timeline reaching its keyframe to show. */
  [data-anim="pricing-header"],
  [data-anim="pricing-cards-wrap"],
  [data-anim="pricing-disclaimer-wrap"],
  [data-anim="pricing-card"],
  .pricing__header,
  .pricing__cards-wrap,
  .pricing__disclaimer-wrap,
  .pricing__card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  /* Stop the absolute-overlay collision — flow header above cards. */
  .pricing__sticky {
    position: relative;
    height: auto;
    clip-path: none;
    overflow: visible;
  }
  .pricing__header {
    position: relative;
    inset: auto;
    padding: 96px max(20px, 4vw) 24px;
  }
  .pricing__cards-wrap {
    position: relative;
    inset: auto;
    padding: 24px max(20px, 4vw) 48px;
  }
  .pricing {
    height: auto;
    min-height: 0;
  }

  .navbar__links {
    gap: 24px;
  }
  .navbar__left {
    gap: 40px;
  }
  .navbar__inner {
    padding: 0 24px;
  }
  .navbar__logo {
    width: 130px;
  }
  .navbar__cta {
    padding: 12px 20px;
    font-size: 14px;
  }

  .pricing__grid {
    flex-wrap: wrap;
    gap: 16px;
  }
  .pricing__grid > .pricing__card {
    flex: 1 1 calc(50% - 8px);
    min-width: 280px;
  }
  .pricing__sticky {
    clip-path: none;
  }
  .pricing {
    height: auto;
    min-height: 100vh;
  }

  .verticals__card {
    width: clamp(180px, 30vw, 240px);
    min-height: clamp(220px, 35vw, 300px);
  }
  .verticals__card--active {
    width: clamp(190px, 32vw, 250px);
    min-height: clamp(230px, 37vw, 310px);
  }
  .verticals__title {
    font-size: clamp(36px, 6vw, 56px);
  }
  .verticals {
    height: auto;
  }

  .statement__quote {
    font-size: clamp(20px, 4vw, 38px);
    padding: 0 20px;
  }
  .statement__panel {
    left: 4%;
    right: 4%;
  }

  .footer__cols {
    gap: 32px;
    flex-wrap: wrap;
  }
  .footer__col {
    flex: 1 1 calc(50% - 16px);
    min-width: 140px;
  }
  .pricing__orb {
    display: none;
  }
  .ctafinal__stage .ctafinal__sphere-wrap {
    width: 52% !important;
  }
  footer .footer__bottom a {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
  }
}

@media (max-width: 768px) {
  /* Lock the phone's scale on scroll (no shrink) but keep GSAP's translateY
     driven by --phone-y so it still slides into and out of view. */
  #phoneInner,
  .phone__inner {
    transform: translateY(var(--phone-y, 1141px)) scale(1) !important;
  }

  /* Self-Serve / Full Service section — release the 500vh sticky pin and
     stack notes → phone → stat in a single readable column. */
  .selfserve {
    height: auto !important;
    min-height: 0 !important;
  }
  .selfserve__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 80px 20px 60px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .selfserve__bg-glow {
    display: none;
  }
  .selfserve__notes,
  .selfserve__note,
  [data-anim="ss-note-1"],
  [data-anim="ss-note-2"],
  [data-anim="ss-stat"],
  [data-anim="ss-pill"],
  [data-anim="ss-phone"],
  [data-anim="ss-side-orb"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .selfserve__notes {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
  }
  .selfserve__note {
    grid-area: auto !important;
  }
  .selfserve__note-title {
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.15;
  }
  .selfserve__note-body {
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.5;
  }

  .selfserve__phone {
    width: 50vw !important;
    max-width: 220px;
    height: auto !important;
    max-height: 50vh;
    aspect-ratio: 1302 / 2696;
    order: 2;
    margin: 0 auto;
  }
  /* Hide overlay floating cards on mobile — phone alone is enough */
  .selfserve__card,
  [data-anim="ss-card-a"],
  [data-anim="ss-card-b"],
  [data-anim="ss-card-c"] {
    display: none !important;
  }
  /* Drop any trailing empty space after the stat */
  .selfserve__sticky {
    padding-bottom: 40px !important;
  }

  .selfserve__stat {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.5;
    text-align: left;
    order: 3;
  }

  .selfserve__side-orb,
  .selfserve__outro-orb,
  .selfserve__dot,
  .selfserve__side-orb-glow {
    display: none;
  }

  /* Contact form — single column on mobile (one field per row). */
  .contact__row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .contact__field {
    width: 100% !important;
  }

  /* Compliance flow circles — release the absolute row, lay out as a
     2-column grid so all 4 circles fit inside the viewport. */
  .complianceflow {
    height: auto !important;
    min-height: 0 !important;
  }
  .complianceflow__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 60px 20px 60px !important;
  }
  .complianceflow__title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    text-align: center;
    font-size: clamp(22px, 6vw, 30px) !important;
    margin: 0 0 32px !important;
  }
  .complianceflow__steps {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 20px !important;
    align-items: center;
    width: 100%;
  }
  .complianceflow__step {
    width: 220px !important;
    max-width: 220px;
    margin-left: 0 !important;
    padding: 24px !important;
    opacity: 1 !important;
    transform: none !important;
    align-items: center !important;
    text-align: center !important;
  }
  .complianceflow__step-index {
    font-size: 13px !important;
  }
  .complianceflow__step-title {
    font-size: 14px !important;
  }
  .complianceflow__step-text {
    font-size: 12px !important;
  }
  .complianceflow__orb {
    display: none !important;
  }

  /* Compliance badges — wrap to two rows so logos don't overflow the right
     edge on narrow phones. */
  .compliance__badges {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 16px;
  }
  .compliance__badge {
    flex: 0 0 calc(50% - 8px) !important;
    height: clamp(40px, 10vw, 56px) !important;
    max-width: calc(50% - 8px);
  }
  .compliance__badge img {
    width: auto !important;
    height: 98% !important;
    margin: 0 auto;
    object-fit: contain;
  }

  /* Statement / TapFeed quote section — release the 420vh sticky pin,
     give it a clean static layout: panel with quote, orb tucked in the
     notch at the bottom edge. */
  .statement {
    height: auto !important;
    min-height: 0 !important;
  }
  .statement__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    padding: 80px 20px 100px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg) !important;
  }
  .statement__panel {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 40px 24px 56px !important;
    border-radius: 24px !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* True CSS gradient (overrides GSAP's inline background:none) so the
       panel reads as one solid warm card on mobile. */
    background-image:
      radial-gradient(
        ellipse 100% 80% at 50% 50%,
        rgba(255, 200, 160, 0.35) 0%,
        transparent 70%
      ),
      linear-gradient(135deg, #ff7a3f 0%, #ff6688 50%, #ff5077 100%) !important;
    background-color: #ff5077 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  .statement__panel.is-card,
  .statement__panel.is-card {
    background-image:
      radial-gradient(
        ellipse 100% 80% at 50% 50%,
        rgba(255, 200, 160, 0.35) 0%,
        transparent 70%
      ),
      linear-gradient(135deg, #ff7a3f 0%, #ff6688 50%, #ff5077 100%) !important;
    background-color: #ff5077 !important;
  }
  .statement__panel-content {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    gap: 16px !important;
    width: 100%;
    text-align: center;
  }
  .statement__logo {
    height: 20px !important;
  }
  .statement__quote {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .statement__orb {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 84px !important;
    height: 84px !important;
    margin: -42px auto 0 !important;
    opacity: 1 !important;
    transform: none !important;
    order: 2;
    align-self: center;
  }
  .statement__panel {
    order: 1;
  }

  /* Content Pillars — release the sticky pin, stack heading + each
     video with its /num + name + description below it, single column. */
  .pillars {
    height: auto !important;
    min-height: 0 !important;
  }
  .pillars__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 80px 20px 60px !important;
    display: flex !important;
    flex-direction: column;
    gap: 32px;
  }
  .pillars__heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 8px;
    opacity: 1 !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 12px;
  }
  .pillars__num {
    font-size: clamp(28px, 8vw, 36px) !important;
  }
  .pillars__title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }

  .pillars__visual,
  .pillars__visual--2,
  .pillars__visual--3 {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11;
    max-height: 44vh;
    margin: 0;
    border-radius: 16px;
    opacity: 1 !important;
    transform: none !important;
  }
  .pillars__visual img,
  .pillars__visual video {
    height: 100% !important;
    object-fit: cover;
  }
  .pillars__video-controls {
    left: 12px !important;
    bottom: 12px !important;
  }

  .pillars__row {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    opacity: 1 !important;
    transform: none !important;
    margin: -16px 0 16px;
    width: 100%;
  }

  /* Interleave visual + row pairs: V1 → R1 → V2 → R2 → V3 → R3 */
  .pillars__heading {
    order: 0;
  }
  .pillars__visual {
    order: 1;
  }
  [data-anim="pillars-row-1"] {
    order: 2;
  }
  .pillars__visual--2 {
    order: 3;
  }
  [data-anim="pillars-row-2"] {
    order: 4;
  }
  .pillars__visual--3 {
    order: 5;
  }
  [data-anim="pillars-row-3"] {
    order: 6;
  }
  .pillars__row-meta {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .pillars__row-num {
    font-size: 16px !important;
  }
  .pillars__row-name {
    font-size: 20px !important;
  }
  .pillars__row-desc {
    font-size: 14px !important;
    line-height: 1.5;
    max-width: 100% !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72);
  }

  /* In-Practice ("Here's What It Looks Like In Practice") — release the
     sticky pin, stack heading → case (01 + steps) → phone as one column. */
  .inpractice {
    height: auto !important;
    min-height: 0 !important;
  }
  .inpractice__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 80px 20px 60px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .inpractice__glow {
    display: none;
  }
  .inpractice__heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    font-size: clamp(26px, 7vw, 36px) !important;
    text-align: center;
    opacity: 1 !important;
    margin: 0;
  }
  .inpractice__case,
  [data-anim*="practice"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .inpractice__case {
    width: 100% !important;
    max-width: 100% !important;
  }
  .inpractice__num {
    font-size: clamp(64px, 16vw, 96px) !important;
    margin-bottom: -0.08em;
  }
  .inpractice__label {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    margin-bottom: 16px;
  }
  .inpractice__step-name {
    font-size: 16px;
  }
  .inpractice__step-desc {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.5;
  }
  .inpractice__steps {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
  .inpractice__step {
    opacity: 1 !important;
    transform: none !important;
  }
  .inpractice__phone-wrap {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 70vw !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    opacity: 1 !important;
  }
  /* Hide ALL the floating overlay cards / survey / mortgage / savings UI
     that GSAP normally crossfades through. With opacity:1 forced on mobile,
     they all show at once — keep just the phone frame + Smart Rebalancing
     card so each step shows a clean, single phone state. */
  .inpractice__phone-card,
  .inpractice__phone-survey,
  .inpractice__savings-card,
  .inpractice__mortgage-card,
  .inpractice__float-survey,
  .inpractice__float-card,
  .inpractice__float,
  .inpractice__screen-cover,
  .inpractice__convert-glow,
  [data-anim*="practice-card"],
  [data-anim*="practice2-card"],
  [data-anim*="practice3-card"],
  [data-anim*="practice-screen-cover"],
  [data-anim*="practice-convert-glow"] {
    display: none !important;
  }
  /* Bring back only the rebalance card so each phone has one clean card,
     properly inset within the phone screen (not flush to the bezel). */
  .inpractice__phone-card--rebalance,
  [data-anim="practice-card-rebalance"] {
    display: block !important;
    position: absolute !important;
    width: 78% !important;
    left: 11% !important;
    right: auto !important;
    top: 38% !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  /* Content Strategy / showcase — release the 1600vh sticky pin, stack
     text above a tidy phone row below. */
  .showcase {
    height: auto !important;
    min-height: 0 !important;
  }
  .showcase__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 80px 20px 60px;
  }
  .showcase__orb {
    display: none;
  }
  .showcase__cs-text,
  .showcase__cs-text *,
  [data-anim="cs-pill"],
  [data-anim="cs-heading"],
  [data-anim="cs-desc"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  .showcase__cs-text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 32px;
  }
  .showcase__cs-heading {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.15;
  }
  .showcase__cs-desc {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.5;
  }
  .showcase__cs-phone,
  .showcase__cs-left,
  .showcase__cs-right {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Row of three phones below the text */
  .showcase__sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .showcase__cs-phone {
    width: 38vw !important;
    max-width: 200px;
    order: 2;
  }
  .showcase__cs-left {
    width: 34vw !important;
    max-width: 180px;
    order: 3;
  }
  .showcase__cs-right {
    width: 34vw !important;
    max-width: 180px;
    order: 4;
  }
  .showcase__cs-text {
    order: 1;
  }

  /* Problem section — release the 700vh sticky-pinned animation on mobile,
     let everything flow as a normal content section, no overlap. */
  .problem {
    height: auto !important;
    min-height: 0 !important;
  }
  .problem__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    padding: 80px 20px 60px;
  }
  .problem__glow {
    display: none;
  }
  .problem__titles {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 32px;
    white-space: normal;
    opacity: 1 !important;
  }
  .problem__title {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.05;
  }
  .problem__subtitle {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.2;
    padding: 0 16px;
  }
  .problem__titles {
    gap: 14px;
  }

  .problem__stats-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 16px 0 0;
  }
  .problem__stat {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 240px !important;
    max-width: 240px;
    height: 240px !important;
    min-height: 240px !important;
    aspect-ratio: 1 / 1;
    opacity: 1 !important;
    transform: none !important;
    padding: 24px !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .problem__stat-num {
    font-size: 42px;
    line-height: 1;
  }
  .problem__stat-label {
    font-size: 12px;
    line-height: 1.4;
    max-width: 180px;
    text-align: center;
  }

  /* Section-bottom orb and disclaimer — keep out of the flow column above. */
  .problem__disclaimer,
  .problem__orb,
  .problem__orb-blob {
    display: none;
  }

  /* Agents labels — fit within the narrow viewport. Smaller type, smaller
     dots, and translate offsets scaled down so the row spread matches the
     mobile orb size. */
  .agents__label {
    font-size: 12px !important;
    gap: 6px !important;
    white-space: nowrap;
  }
  .agents__label-dot {
    width: 7px !important;
    height: 7px !important;
  }
  .agents__label-dot::before {
    inset: -4px !important;
    filter: blur(7px) !important;
  }

  .agents__label--personalized {
    transform: translate(-150px, -200px) !important;
  }
  .agents__label--optim {
    transform: translate(10px, -200px) !important;
  }
  .agents__label--video {
    transform: translate(-170px, -90px) !important;
  }
  .agents__label--surveys {
    transform: translate(60px, -90px) !important;
  }
  .agents__label--client {
    transform: translate(-185px, 20px) !important;
  }
  .agents__label--cross {
    transform: translate(60px, 20px) !important;
  }

  .navbar__links {
    display: none;
  }
  .navbar__cta-link {
    display: none;
  }
  .navbar__burger {
    display: flex;
  }
  .navbar {
    height: 72px;
  }
  .navbar__inner {
    padding: 0 20px;
    height: 100%;
  }
  .navbar__logo {
    width: 110px;
  }
  .navbar__left {
    gap: 0;
  }

  .hero__title {
    top: 0px;
    font-size: 78px;
    line-height: 1.2;
    width: calc((100vw - 40px) / var(--stage-scale, 1));
    max-width: calc((100vw - 40px) / var(--stage-scale, 1));
    padding: 0;
    text-align: center;
    transform: translate(-50%, 0) scale(calc(0.32 / var(--stage-scale, 1)));
    transform-origin: 50% 0;
  }
  .hero__scroll-hint {
    top: 470px;
    font-size: 34px;
    gap: 8px;
    transform: translate(-50%, 0) scale(calc(0.42 / var(--stage-scale, 1)));
    transform-origin: 50% 0;
  }
  .hero__scroll-arrow {
    width: 26px;
    height: 26px;
  }

  .verticals,
  .pricing,
  .contact,
  .ctafinal {
    height: auto;
  }

  .verticals__inner {
    padding: 80px 20px 60px;
  }
  .verticals__header {
    margin-bottom: 32px;
  }
  .verticals__title {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.1;
  }
  .verticals__sub {
    font-size: 14px;
    padding: 0 12px;
  }
  .verticals__carousel-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .verticals__carousel {
    gap: 12px;
    padding: 0 20px;
  }
  .verticals__card,
  .verticals__card--active {
    width: 72vw !important;
    min-height: 0 !important;
    height: auto !important;
    flex-shrink: 0;
    padding: 20px;
    scroll-snap-align: center;
  }
  .verticals__card-title {
    font-size: 18px;
  }
  .verticals__card-desc {
    font-size: 13px;
  }
  .verticals__card-num {
    font-size: 12px;
  }
  .verticals__carousel {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
  }
  .verticals__nav {
    margin-top: 24px;
  }

  .pricing__sticky {
    position: relative;
    height: auto;
    top: auto;
    clip-path: none;
  }
  .pricing__header {
    position: relative;
    padding: 96px 20px 32px;
    max-width: 100%;
    inset: auto;
    opacity: 1;
  }
  .pricing__cards-wrap {
    position: relative;
    padding: 32px 20px;
    height: auto;
    inset: auto;
    opacity: 1;
  }
  .pricing__grid {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .pricing__grid > .pricing__card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .pricing__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .pricing__subtext {
    font-size: 15px;
  }
  .pricing__orb {
    display: none;
  }
  .pricing-disclaimer .pricing__disclaimer-wrap {
    padding: 16px 20px 48px;
    opacity: 1;
  }
  .pricing__disclaimer {
    padding: 16px 20px;
    border-radius: 18px;
  }
  .pricing__disclaimer p {
    font-size: 12px;
  }

  .statement__quote {
    font-size: clamp(16px, 4.2vw, 24px);
    padding: 0 24px;
    line-height: 1.3;
  }
  .statement__panel {
    left: 4%;
    right: 4%;
    height: 70vh;
  }
  .statement__logo {
    height: 22px;
  }
  .statement__orb {
    width: 80px;
  }

  .contact__sticky {
    position: relative;
    height: auto;
    padding: 96px 20px 64px;
    flex-direction: column;
    gap: 32px;
  }
  .contact__inner {
    flex-direction: column;
    gap: 32px;
  }
  .contact__heading {
    font-size: clamp(28px, 7vw, 36px);
  }
  .contact__card-wrap {
    width: 100%;
  }
  .contact__form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .contact__orb {
    display: none;
  }

  .footer {
    padding: 60px 20px 32px;
  }
  .footer__inner {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .footer__cols {
    width: 100%;
    flex-direction: column;
    gap: 20px;
  }
  .footer__col {
    width: 100%;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .ctafinal__sticky {
    position: relative;
    height: auto;
    padding: 96px 20px 64px;
  }
  .ctafinal__sticky {
    padding: 96px 20px 64px !important;
  }
  .ctafinal__stage {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .ctafinal__top {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }
  .ctafinal__heading {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    line-height: 1.2;
  }
  .ctafinal__heading--left,
  .ctafinal__heading--right {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ctafinal__sphere-wrap {
    width: 80vw !important;
    max-width: 360px !important;
    aspect-ratio: 1;
    margin: 8px auto 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
  }
  .ctafinal__sphere-img {
    padding-top: 0 !important;
    height: 100% !important;
  }

  /* Contact section — force everything visible (no fade-in/out animations
     so the title, copy, form fields, and CTA are clearly readable). */
  .contact__left,
  .contact__card,
  .contact__card-wrap,
  .contact__headline,
  .contact__heading,
  .contact__copy,
  .contact__form,
  .contact__field,
  .contact__label,
  .contact__input,
  .contact__textarea,
  .contact__btn,
  .contact__marquee,
  [data-anim="contact-left"],
  [data-anim="contact-card"],
  [data-anim*="contact"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Place the marquee below the form with equal vertical breathing room
     instead of absolutely centered over it. */
  .contact__marquee {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 56px 0 56px !important;
    width: 100%;
    z-index: 1;
  }
  .contact__marquee-text {
    font-size: clamp(28px, 9vw, 48px);
  }

  .agents__heading {
    font-size: clamp(24px, 6vw, 36px);
    padding: 0 20px;
  }
  .agents__description {
    font-size: 14px;
    padding: 0 20px;
  }
  .agents__pill {
    font-size: 14px;
    height: 40px;
    padding: 0 20px;
  }

  .trusted-heading p {
    font-size: clamp(20px, 5vw, 28px);
  }

  .hero__scroll-hint {
    top: 380px;
  }

  .hero__title {
    font-size: 142px;
    line-height: 1;
  }

  .trusted-heading {
    top: -30px;
  }

  .trusted-heading p {
    font-size: 60px;
  }

  .badge {
    width: 238.244px;
    height: 238.244px;
  }

  .problem__title {
    font-size: 36px;
  }

  .problem__subtitle {
    font-size: 18px;
    line-height: 1.5;
  }

  .showcase__cs-text .showcase__cs-desc {
    max-width: 100%;
  }

  .selfserve .selfserve__sticky .selfserve__stat {
    margin-top: 80px;
  }

  .compliance__badge {
    height: 40px;
  }

  .ctafinal .ctafinal__top .ctafinal__btn {
    margin-bottom: 25px;
  }

  .contact .contact__left {
    width: 100%;
  }
}

/* Shorter viewports (small laptops / browser chrome eats into height):
   compress the stack so nothing clips top/bottom of the pinned 100vh frame */
@media (max-height: 760px) {
  .pricing__sticky {
    gap: clamp(6px, 1.2vh, 14px);
    /* Anchor to the top of the sub-navbar area instead of centering — guarantees
       the header always clears the fixed navbar even if content runs tall */
    justify-content: flex-start;
    padding: 112px max(24px, 5vw) clamp(8px, 2vh, 20px);
  }
  .pricing__header {
    gap: clamp(5px, 0.9vh, 10px);
  }
  .pricing__title {
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.08;
  }
  .pricing__subtext {
    font-size: clamp(12.5px, 1.1vw, 16px);
  }
  .pricing__pill {
    height: 32px;
    font-size: 12.5px;
  }
  .pricing__card {
    gap: clamp(6px, 1vh, 10px);
    padding: clamp(10px, 1.2vw, 18px);
  }
  .pricing__card-top {
    gap: clamp(3px, 0.6vh, 6px);
  }
  .pricing__card-icon {
    width: 30px;
    height: 30px;
  }
  .pricing__card-icon svg {
    width: 16px;
    height: 16px;
  }
  .pricing__card-desc {
    font-size: clamp(11px, 0.85vw, 13px);
    line-height: 1.35;
  }
  .pricing__card-mau {
    font-size: clamp(11.5px, 0.9vw, 14px);
  }
  .pricing__list {
    gap: clamp(4px, 0.7vh, 7px);
  }
  .pricing__list li {
    font-size: clamp(11px, 0.85vw, 13.5px);
  }
  .pricing__btn {
    height: 36px;
    font-size: 12.5px;
  }
  .pricing__disclaimer {
    padding: 8px 20px;
  }
  .pricing__disclaimer p {
    font-size: clamp(10.5px, 0.85vw, 13px);
  }
}

/* Very short viewports — squeeze once more so nothing clips the bottom edge */
@media (max-height: 720px) {
  .pricing__sticky {
    gap: clamp(5px, 1vh, 10px);
    padding-top: 108px;
  }
  .pricing__header {
    gap: clamp(4px, 0.7vh, 7px);
  }
  .pricing__title {
    font-size: clamp(22px, 2.7vw, 36px);
  }
  .pricing__subtext {
    font-size: clamp(11.5px, 1vw, 14px);
  }
  /* Keep the description visible (it's core to the Figma card design) but
     clamp it to 2 lines so short viewports don't overflow */
  .pricing__card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
    font-size: clamp(11px, 0.85vw, 12.5px);
    line-height: 1.35;
  }
  .pricing__card {
    gap: clamp(5px, 0.8vh, 8px);
    padding: clamp(8px, 1vw, 14px);
  }
  .pricing__list {
    gap: clamp(3px, 0.6vh, 6px);
  }
}

@media (max-width: 760px) {
  .agents__content {
    transform: none !important;
    left: 0 !important;
  }
}

@media (max-width: 632px) {
  .hero__scroll-hint {
    top: 525px;
  }

  .hero__title {
    font-size: 120px;
  }
}

@media (max-width: 600px) {
  .hero .hero__sticky .phone {
    transform: scale(1.5);
    left: 26%;
  }
  .trusted-heading p {
    font-size: 100px;
  }

  .trusted-heading {
    top: -893px;
  }

  .hero .hero__sticky .badges {
    transform: scale(1.7);
    margin-left: -35px;
  }
}

@media (max-width: 524px) {
  .hero .hero__sticky .stage {
    margin-top: -90px;
  }

  .hero__title {
    font-size: 88px;
  }
}

@media (max-width: 470px) {
  .hero__title {
    font-size: 68px;
    padding: 0 60px;
  }
}

@media (max-width: 420px) {
  .navbar {
    height: 64px;
  }
  .navbar__logo {
    width: 96px;
  }
  .navbar__burger {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .pricing__title {
    font-size: 26px;
  }
  .verticals__title {
    font-size: 28px;
  }
  .statement__quote {
    font-size: 16px;
  }

  /* Agents labels — tighter spread for very narrow phones so nothing
     clips off the right edge. */
  .agents__label {
    font-size: 11px !important;
    gap: 5px !important;
  }
  .agents__label-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .agents__label--personalized {
    transform: translate(-145px, -180px) !important;
  }
  .agents__label--optim {
    transform: translate(20px, -180px) !important;
  }
  .agents__label--video {
    transform: translate(-130px, -90px) !important;
  }
  .agents__label--surveys {
    transform: translate(35px, -90px) !important;
  }
  .agents__label--client {
    transform: translate(-140px, 10px) !important;
  }
  .agents__label--cross {
    transform: translate(35px, 10px) !important;
  }
}

@media (max-width: 366px) {
  .hero__title {
    font-size: 59px;
    width: 50%;
  }
}