/* ═══════════════════════════════════════════════════
   Agent F Landing Page   Pixel-Perfect Figma V2
   Canvas: 1400px wide, off-white (#F9F9F0) bg
   Font stack: BIGGER (display), Inter (body)
   ═══════════════════════════════════════════════════ */

/* ── Scroll-reveal animation classes ──
   Initial state is set by JS (opacity:0 / translateY).
   .visible class defined here — never injected via style tag.
   This prevents race conditions on reload at a scrolled position. */
.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* No-JS fallback: if JS never runs, all sections remain visible */
.no-js .usp,
.no-js .for-whom-section,
.no-js .hiw-section,
.no-js .how-section,
.no-js .ecosystem-section,
.no-js .compliance-section,
.no-js .final-cta-section {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Shared CTA Button ── */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 48px;
  padding: 2px 28px 0 28px; /* Optically center all-caps text */
  background: var(--agf-off-black);
  color: var(--agf-cream);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5px; /* Slight tracking for all-caps */
  line-height: normal; /* Fix vertical centering */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.15s ease;
  white-space: nowrap;
}
.btn-cta:hover {
  filter: brightness(1.3);
}
.btn-cta:focus-visible {
  outline: 2px solid var(--agf-coral);
  outline-offset: 2px;
}

/* ── Landing Nav   Fixed overlay through hero + laptop ── */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
  container-type: inline-size;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.landing-nav > * {
  pointer-events: auto;
}
.landing-nav.is-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none !important;
}
.landing-nav.is-hidden > * {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   HERO   1400×868 bounding box (Figma "HERO" frame)
   Uses container query units (cqi) for perfect scaling
   ═══════════════════════════════════════════════════ */
.hero {
  container-type: inline-size;
  position: relative;
  width: 100vw; /* Stretch full width */
  min-height: 100svh; /* Use svh to account for mobile browser chrome */
  margin: 0 auto;
  overflow: hidden;
  background: var(--agf-off-white);
}

/* Logo: top-left, ~172px wide at 1400px canvas */
.hero-logo {
  position: absolute;
  top: 3.68%; /* 32/868 */
  left: max(20px, calc(50vw - 700px + 1.43%));
  width: 7.14%; /* ~100/1400 */
  z-index: 100;
}
.hero-logo svg {
  width: 100%;
  height: auto;
}
.hero-logo svg path {
  fill: var(--agf-off-black);
}
.hero-logo:hover svg path {
  fill: var(--agf-dark-brown);
}

/* CTA button top-right: Figma pos left:1235, top:22, w:148, h:43 */
.hero-cta-top {
  position: absolute;
  top: 2.53%; /* 22/868 */
  right: max(20px, calc(50vw - 700px + 1.43%));
  z-index: 100;
  min-width: auto;
}

/* Navigation links: Figma pos top:24, left:989, w:284 */
.agf-menu {
  position: absolute;
  top: 2.76%; /* 24/868 */
  right: max(240px, calc(50vw - 700px + 22%));
  display: flex;
  gap: 1.14cqi; /* ~16px at 1400 */
  z-index: 100;
}
.agf-menu-link {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1cqi; /* 14px at 1400 */
  letter-spacing: 0;
  color: #0f0e0b;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 22px;
  transition: opacity 0.2s ease;
  padding: 0.5cqi;
}
.agf-menu-link:hover {
  opacity: 0.6;
}
.agf-menu-link:focus-visible {
  outline: 2px solid var(--agf-coral);
  outline-offset: 2px;
}

/* ── Dropdown Modal in Outer Pages ── */
.agf-menu-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.agf-dropdown-content {
  position: absolute;
  top: 100%;
  left: -16px;
  background: #f9f9f0;
  border: 1px solid #9d937c;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 12px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.agf-menu-dropdown:hover .agf-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown link harmonious with landing page .agf-menu-link */
.agf-dropdown-content a {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  color: #0f0e0b;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 22px;
  padding: 10px 24px;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.agf-dropdown-content a:hover {
  background: #efecca;
  opacity: 0.6;
}

/* ── STRUCTURE / CREATES / FREEDOM Headlines ── */
/* Figma: font 190px Bigger-Display at 1400px canvas */

/* Centered wrapper: caps at 1400px, always horizontally centered */
.hero-headline-group {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 100%);
  height: 100%;
  pointer-events: none;
  z-index: 30;
}

.agf-headline {
  position: absolute;
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-weight: 400;
  font-size: min(13.57cqi, 190px); /* scale with viewport, cap at 1400px design size */
  line-height: 0.463; /* 88px / 190px */
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--agf-dark-brown);
  white-space: nowrap;
  z-index: 30;
}
/* STRUCTURE: left=-93px → -6.64% of 1400px container */
.agf-headline--structure {
  top: 18.55%; /* 161/868 */
  left: -6.64%;
  width: 77.86%; /* 1090/1400 */
  text-align: center;
}
/* CREATES: left=673px → 48.07% of 1400px container, shifted right ~3% for breathing room */
.agf-headline--creates {
  top: 18.55%;
  left: 51%;
  width: 50.64%; /* 709/1400 */
  text-align: center;
}
/* FREEDOM: left=368px → 26.29% of 1400px container */
.agf-headline--freedom {
  top: 77.53%; /* (161+512)/868 = 673/868 */
  left: 26.29%;
  width: 47.57%; /* 666/1400 */
  text-align: center;
}

/* ── Hero text: subtitle + CTA bottom-left ── */
/* Figma: top:628, left:20, subtitle w:323, font 26px, then CTA at top:736 */
.agf-hero-text {
  position: absolute;
  top: 72.35%; /* 628/868 */
  left: max(24px, calc(50vw - 700px + 1.43%));
  width: min(323px, 26%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.agf-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.857cqi; /* 26/1400*100 */
  line-height: 1.35; /* Comfortable multi-line reading */
  letter-spacing: -0.01em;
  color: #0f0e0b;
  text-transform: none;
}
.agf-hero-text .btn-cta {
  font-size: 1cqi;
  padding: calc(0.5cqi + 3px) 1.4cqi calc(0.5cqi - 3px) 1.4cqi;
}

/* ── Trusted By: bottom-right ── */
/* Figma: top:675, left:1275, w:107, h:54 */
.agf-trusted-by {
  position: absolute;
  top: 77.76%; /* 675/868 */
  right: max(20px, calc(50vw - 700px + 1.43%));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.57cqi;
}
.agf-trusted-label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1cqi;
  color: #0f0e0b;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: right;
  line-height: 22px;
}
.hero-trust-logo {
  height: 1.5cqi;
  width: auto;
}

/* ── Financial Cards (absolute positioned, rotated) ── */
.agf-card {
  position: absolute;
  width: 29.43cqi; /* 412/1400, strictly bound to viewport, not grid cell parent */
  aspect-ratio: 412 / 252;
  border-radius: 1.143cqi; /* 16px at 1400 */
  overflow: hidden;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.429cqi; /* 6px at 1400 */
  padding: 1.714cqi; /* 24px at 1400 */
  box-sizing: border-box;
}
.agf-card-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.agf-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.857cqi; /* 12px at 1400 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9D937C; /* Tan — always */
  z-index: 2;
  line-height: 1.4;
}
.agf-card-value {
  display: flex;
  align-items: baseline;
  gap: 0.286cqi;
  z-index: 2;
}
.agf-card-num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 2.286cqi; /* 32px at 1400 */
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 2;
}
.agf-card-cur {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 2.143cqi; /* 30/1400*100 */
  letter-spacing: -0.064cqi;
  z-index: 2;
}
.agf-card-badge {
  position: absolute;
  top: 1.071cqi; /* 15/1400*100 */
  right: auto;
  left: 19.43cqi; /* 272/1400... let's position from right */
  display: flex;
  align-items: center;
  gap: 0.143cqi;
  padding: 0 1.143cqi;
  height: 2.5cqi; /* 35px */
  border: 1px solid #42ff4d;
  border-radius: 14.286cqi;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  z-index: 3;
}
/* Re-position badge to top-right with percentage */
.agf-card-badge {
  left: auto;
  right: 1.43cqi;
  top: 1.071cqi;
}
.agf-badge-val {
  font-family: "Inter", sans-serif;
  font-size: 1.071cqi;
  font-weight: 400;
  line-height: 1;
}
.agf-badge-pct {
  font-family: "Inter", sans-serif;
  font-size: 0.714cqi;
  opacity: 0.4;
}

/* CARD 1: Cash Position | Sand bg, rotated 15.23deg */
.agf-card--cash {
  transform: rotate(15.23deg);
  top: 26.61%;
  left: calc(50vw - 700px - 4.79%);
  background: #CCC5A3; /* Sand */
  color: #171612; /* Dark Grey */
}

/* CARD 2: Monthly Burn Rate | Graphite bg, rotated -43.72deg */
.agf-card--burn {
  transform: rotate(-43.72deg);
  top: 18.2%;
  right: calc(50vw - 700px - 23.07%);
  background: #2F2D28; /* Graphite */
  color: #EFECCA; /* Cream */
}
.agf-card--burn .agf-card-title {
  position: static; /* reset old absolute bottom positioning */
}

/* CARD 3: Revenue Recognition | Cream bg, rotated -102.1deg */
.agf-card--arr {
  transform: rotate(-102.1deg);
  top: -31.91%;
  left: calc(50vw - 700px + 32.71%);
  background: #EFECCA; /* Cream */
  color: #171612; /* Dark Grey */
}

/* CARD 4: Scenario: Next Hire | Tan bg, rotated -102.47deg */
.agf-card--runway {
  transform: rotate(-102.47deg);
  top: 41.59%;
  left: calc(50vw - 700px + 37.29%);
  background: #9D937C; /* Tan */
  color: #EFECCA; /* Cream */
}

/* ── Dashboard Card Components ── */

/* Sparkline / bar chart */
.agf-card-chart {
  display: block;
  width: 100%;
  height: 2.286cqi; /* ~32px at 1400 */
  z-index: 2;
}
.agf-card-chart--bar {
  height: 0.714cqi; /* ~10px at 1400 */
}

/* Metric row: value + trend badge inline */
.agf-card-metric-row {
  display: flex;
  align-items: center;
  gap: 0.5cqi;
  z-index: 2;
}

/* Secondary metric row (muted) */
.agf-card-metric-row--muted .agf-card-num {
  font-size: 1.286cqi; /* 18px */
  font-weight: 400;
  color: #9D937C; /* Tan */
}

/* Dual values wrapper (Revenue Recognition) */
.agf-card-dual {
  display: flex;
  flex-direction: column;
  gap: 0.214cqi;
  z-index: 2;
}
.agf-card-num--primary {
  font-size: 2cqi; /* 28px */
  font-weight: 700;
}
.agf-card-num--secondary {
  font-size: 1.286cqi; /* 18px */
  font-weight: 400;
  color: #9D937C;
}
.agf-card-val-suffix {
  font-family: "Inter", sans-serif;
  font-size: 1cqi; /* 14px */
  font-weight: 400;
  color: #9D937C;
  align-self: baseline;
}

/* Trend badge */
.agf-card-trend {
  font-family: "Inter", sans-serif;
  font-size: 0.857cqi; /* 12px */
  font-weight: 500;
  padding: 0.286cqi 0.714cqi;
  border-radius: 0.286cqi; /* 4px */
  white-space: nowrap;
  z-index: 3;
  flex-shrink: 0;
}
.agf-card-trend--dark {
  background: #21201C; /* Dark Brown */
  color: #F9F9F0; /* Off White */
}
.agf-card-trend--tan {
  background: #9D937C; /* Tan */
  color: #171612; /* Dark Grey */
}

/* Separator line */
.agf-card-sep {
  height: 1px;
  width: 100%;
  z-index: 2;
  flex-shrink: 0;
}
.agf-card-sep--dark-brown { background: #21201C; }
.agf-card-sep--tan        { background: #9D937C; }
.agf-card-sep--sand       { background: #CCC5A3; }
.agf-card-sep--graphite   { background: #2F2D28; }

/* AI insight text */
.agf-card-insight {
  font-family: "Inter", sans-serif;
  font-size: 0.857cqi; /* 12px */
  font-weight: 400;
  color: #9D937C; /* Tan */
  line-height: 1.4;
  z-index: 2;
}

/* Card 4 Scenario layout */
.agf-card-scenario-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.agf-card-logomark {
  width: 1.143cqi; /* 16px */
  height: 1.143cqi;
  flex-shrink: 0;
  opacity: 0.6;
}
.agf-card-question {
  font-family: "Inter", sans-serif;
  font-size: 1.143cqi; /* 16px */
  font-weight: 400;
  color: #EFECCA; /* Cream */
  line-height: 1.4;
  z-index: 2;
  flex: 1;
}
.agf-card-answer {
  font-family: "Inter", sans-serif;
  font-size: 1.286cqi; /* 18px */
  font-weight: 400;
  color: #EFECCA;
  line-height: 1.4;
  z-index: 2;
}
.agf-card-answer strong {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════
   FEATURES SECTION
   Figma: starts at y:919, left side = cards 2×2,
   right side = feature descriptions stacked,
   bottom centered = tagline + CTA
   ═══════════════════════════════════════════════════ */
.features-section {
  position: relative;
  padding: 80px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Feature cards: left side, 2×2 grid */
.features-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.features-card {
  position: relative;
  background: var(--agf-cream);
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
  aspect-ratio: 1;
}
.features-card-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.features-card-label-svg {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  max-width: 80%;
  height: auto;
}

/* Feature descriptions: right side */
.features-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 24px;
}
.features-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.feature-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-title {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.571; /* 22/14 */
  color: var(--agf-dark-brown);
  letter-spacing: 0;
}
.feature-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-tan);
  letter-spacing: 0;
  max-width: 260px;
}

/* Tagline: centered, full-width row below */
.features-tagline {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px 0;
}
.features-overline {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--agf-off-black);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 22px;
  margin-bottom: 16px;
}
.features-headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 2.714vw, 38px);
  font-weight: 300;
  line-height: 1.105; /* 42/38 */
  letter-spacing: -0.02em;
  color: var(--agf-off-black);
  text-transform: none;
  margin-bottom: 32px;
  max-width: 658px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════
   USP SECTIONS (3 blocks)
   Figma: each is 1400×868, dark bg (#3D3B34),
   left = text panel, right = tilted image card
   ═══════════════════════════════════════════════════ */
.usp-snap-container {
  /* Needs at least 300vh so each sticky section has its own scroll space */
}
.usp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 72px);
  overflow: hidden;
  position: sticky;
  top: 72px;
}
.usp-snap-container > .usp:nth-child(1) { z-index: 1; }
.usp-snap-container > .usp:nth-child(2) { z-index: 2; }
.usp-snap-container > .usp:nth-child(3) { z-index: 3; }
.usp--dark {
  background: #3d3b34;
  color: var(--agf-cream);
}

/* Text panel   Figma: left column ~678px wide */
.usp-text-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 32px 48px 48px;
  height: 100%;
}
/* Circle number: Figma 95×95px circle, border 2px, number 38px light */
.usp-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--agf-cream);
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--agf-cream);
  flex-shrink: 0;
}
/* Description: Figma 18px, w:409, line-height 22px */
.usp-desc {
  font-family: "Inter", sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--agf-cream);
  max-width: 100%;
  padding-left: 0;
}
/* Title: scaled to fit 100vh */
.usp-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(48px, 9vw, 130px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--agf-cream);
  padding-left: 0;
  margin-top: 24px;
}

/* Image panel   holds the tilted accent card */
.usp-image-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
}

/* Accent card: constrained to viewport height */
.usp-image-accent {
  position: relative;
  height: calc(100vh - 152px);
  max-height: 680px;
  width: auto;
  aspect-ratio: 480 / 715;
  border-radius: 10px;
  overflow: hidden;
}
.usp-image-accent--mint {
  background: #d5fad3;
}
.usp-image-accent--coral {
  background: #fe805c;
}
.usp-image-accent--baby-blue {
  background: #badbee;
}

/* Photo inside accent card */
.usp-photo {
  position: absolute;
  width: 85%;
  height: auto;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  object-fit: contain;
}
.usp-overlay {
  position: absolute;
  width: 80%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Overlay words on image cards: Figma 140px Bigger-Display */
.usp-image-word {
  position: absolute;
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 29.167%, 140px);
  font-size: min(140px, 29.167cqi);
  /* Fallback for browsers without cqi in this context: */
  font-size: clamp(48px, 10vw, 140px);
  text-align: center;
  letter-spacing: 0;
  line-height: 0.629; /* 88/140 */
  z-index: 3;
  width: 100%;
  left: 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.usp-image-word--top {
  top: 15%;
  color: #3d3b34;
}
.usp-image-word--bottom {
  bottom: 10%;
  color: #3d3b34;
}
.usp-image-word--light {
  color: var(--agf-cream);
}

/* ═══════════════════════════════════════════════════
   HOW IT WORKS + SYSTEM LEVEL RESULTS title
   Figma: y:4843, left:20, grid 2-col
   Left col: overline + headline + body + CTA
   Right col: "SYSTEM LEVEL RESULTS" in 190px Bigger
   ═══════════════════════════════════════════════════ */
.how-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 100px 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
.how-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.how-overline {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 22px;
  color: var(--agf-off-black);
  margin-bottom: 0;
}
.how-headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 2.714vw, 38px);
  font-weight: 300;
  line-height: 1.105;
  letter-spacing: -0.02em;
  color: var(--agf-off-black);
  text-transform: none;
  margin-bottom: 0;
  max-width: 557px;
}
.how-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--agf-dark-grey);
  max-width: 100%;
  margin-top: auto;
}
.how-col .btn-cta {
  margin-top: 13px;
  align-self: flex-start;
}
.how-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100%;
}
/* Figma: 190px Bigger-Display, line-height 168px */
.how-results-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(56px, 13.571vw, 190px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.884; /* 168/190 */
  color: var(--agf-dark-brown);
}

/* ═══════════════════════════════════════════════════
   SYSTEM LEVEL RESULTS   4 full-bleed cards
   Figma: each 1400×873, left=image (883px), right=content
   ═══════════════════════════════════════════════════ */
.staircase-section {
  display: flex;
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #d5fad3; /* Default to first step */
}

/* Left: Static image — never moves, section is pinned by GSAP */
.staircase-image-area {
  width: 63.07%; /* 883/1400 */
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.result-image.staircase-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
/* Only show first image — second is unused */
.result-image.staircase-bg-img:not(:first-child) {
  display: none;
}

/* Right: Stacked panels — GSAP slides them */
.staircase-content-area {
  width: 36.93%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Each step stacks absolutely inside the content area */
.staircase-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 37px 40px 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Scale metric numbers to fit the right panel at all viewport widths.
   Inline styles use 96px — clamp + !important overrides them. */
.staircase-content-area .result-num,
.staircase-content-area .result-unit {
  font-size: clamp(40px, 7.5vw, 96px) !important;
  line-height: 0.85 !important;
}

/* Background color variants - used by GSAP to sync left side */
.staircase-step--mint {
  background-color: #d5fad3;
}
.staircase-step--sand {
  background-color: #ccc5a3;
}
.staircase-step--cream {
  background-color: var(--agf-cream);
}
.staircase-step--tan {
  background-color: #9d987d;
}

/* Label: Figma 14px, top-right, uppercase */
.result-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 22px;
  color: var(--agf-off-black);
  text-align: right;
  margin-bottom: auto;
}

/* Metric group: big number + unit + detail */
.result-metric-group {
  margin-top: auto;
}
.result-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
/* Figma: 196px GT Walsheim Thin, we'll use Inter thin/200 */
.result-num {
  font-family: "Inter", sans-serif;
  font-weight: 100;
  font-size: 96px !important;
  letter-spacing: -0.02em;
  line-height: 0.75;
  color: var(--agf-off-black);
}
.result-unit-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 0;
}
/* Figma: unit is 26px or 46px depending on context */
.result-unit {
  font-family: "Inter", sans-serif;
  font-weight: 100;
  font-size: 96px !important;
  letter-spacing: 0;
  line-height: 0.75;
  color: var(--agf-off-black);
}
.result-detail {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.857vw, 26px);
  letter-spacing: 0;
  line-height: 1.077; /* 28/26 */
  color: var(--agf-off-black);
}

/* Body text: Figma 15px, bottom of panel */
.result-body {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--agf-dark-grey);
  max-width: 100%;
  margin-top: 40px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════
   SECTION 5: RESULTS INTRO — dark palette cleanser
   ═══════════════════════════════════════════════════ */
.results-intro-section {
  background: #21201c;
  padding: 120px 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.results-intro-headline {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  color: #efecca;
  margin-bottom: 0;
}
.results-intro-sub {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #9d937c;
  max-width: 100%;
  margin: 24px auto 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   CTA SECTION
   Figma: cream bg (#ECE9C6), overline + headline + CTA
   ═══════════════════════════════════════════════════ */
.cta-footer-wrap {
  position: relative;
  min-height: 100vh;
  background: var(--agf-cream);
}

.cta-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
  background: var(--agf-cream);
}
.cta-content {
  flex: 1;
  padding: 80px 4% 80px 10%;
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.cta-overline {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 22px;
  color: var(--agf-off-black);
  margin-bottom: 32px;
}
.cta-headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 2.714vw, 38px);
  font-weight: 300;
  line-height: 1.105;
  letter-spacing: -0.02em;
  color: var(--agf-off-black);
  text-transform: none;
  max-width: 100%;
  margin-bottom: 40px;
}
.cta-content .btn-cta {
  display: inline-flex;
}
.cta-video-wrapper {
  flex: 1;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Assumes video matches the cream background perfectly */
}

/* ═══════════════════════════════════════════════════
   FOOTER
   Figma: cream bg, large AGENT*F text (logo),
   then bottom row: CTA left, nav + legal right
   Total height ~734px at 1400 canvas
   ═══════════════════════════════════════════════════ */
.footer {
  background: var(--agf-cream);
  min-height: auto;
  display: flex;
  flex-direction: column;
  padding: 80px 4% 48px;
}

/* Large AGENT*F brand text   mimics the massive footer logo */
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent massive font from causing page horizontal scroll */
  max-width: 100vw;
  margin-bottom: 64px;
}
.footer-logo-img {
  width: clamp(200px, 62vw, 960px);
  height: auto;
  display: block;
}

.footer-nav-row {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 48px;
  padding: 0 20px;
}

.footer-nav {
  display: flex;
  gap: 32px;
}
.footer-nav-link {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--agf-off-black);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-nav-link:hover {
  opacity: 0.6;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 20px;
}

.footer-legal-links {
  display: flex;
  gap: 16px;
}
.footer-legal-link {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--agf-dark-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.footer-legal-link:hover {
  color: var(--agf-off-black);
}

.footer-copyright {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--agf-dark-grey);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .hero {
    min-height: 100svh;
    overflow: hidden;
  }
  .hero-cta-top {
    display: none;
  }
  .agf-menu {
    right: 5%;
  }
  /* Headlines fill the top band of hero, offset from top to clear the nav */
  .hero-headline-group {
    width: 100%;
    left: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 100px;
    height: calc(58% - 50px);
    gap: 0.5em;
  }
  .agf-headline {
    position: relative;
    font-size: 11vw;
    top: auto;
    left: auto;
    width: auto;
    text-align: center;
    line-height: 1;
  }
  .agf-headline--structure,
  .agf-headline--creates,
  .agf-headline--freedom {
    top: auto;
    left: auto;
    width: auto;
  }
  /* Subtitle + CTA sit below the headline band */
  .agf-hero-text {
    top: 62%;
    left: 20%;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Retain GSAP Flip compatibility: cards stay position: absolute and keep original transforms */
  .agf-card {
    width: 25vw;
    padding: 1.5vw;
    border-radius: 1vw;
    gap: 0.4vw;
  }
  .agf-card-title {
    font-size: 1vw;
  }
  .agf-card-num {
    font-size: 2vw;
    letter-spacing: -0.01em;
  }
  .agf-card-chart {
    height: 1.8vw;
  }
  .agf-card-chart--bar {
    height: 0.6vw;
  }
  .agf-card-trend {
    font-size: 0.8vw;
    padding: 0.2vw 0.5vw;
  }
  .agf-card-insight {
    font-size: 0.8vw;
  }
  .agf-card-question {
    font-size: 1vw;
  }
  .agf-card-answer {
    font-size: 1.1vw;
  }
  .agf-card-val-suffix {
    font-size: 0.8vw;
  }
  .agf-card-num--primary { font-size: 1.8vw; }
  .agf-card-num--secondary { font-size: 1.1vw; }
  .agf-card-metric-row--muted .agf-card-num { font-size: 1.1vw; }

  .agf-card--cash {
    top: 68%;
    left: -2%;
  }
  .agf-card--burn {
    top: 73%;
    right: -2%;
  }
  .agf-card--arr {
    top: 2%;
    left: 66%;
  }
  .agf-card--runway {
    top: 80%;
    left: 42%;
    right: auto;
  }

  .agf-trusted-by {
    top: auto;
    bottom: 20px;
    right: 5%;
  }

  .features-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .features-col {
    padding-left: 0;
  }
  .feature-desc {
    max-width: 100%;
  }
  .usp {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
    position: relative; /* Disable sticky stacking — 3 sticky USPs would overlap on tablet/mobile */
    top: auto;
  }
  .usp-snap-container {
    height: auto;
  }
  .usp-text-panel {
    padding: 48px 20px;
    min-height: 400px;
  }
  .usp-title {
    font-size: clamp(48px, 12vw, 120px);
  }
  .usp-image-panel {
    padding: 40px 20px;
  }
  .usp-image-accent {
    max-width: 360px;
    width: 80%;
    height: auto;
    max-height: 500px;
    aspect-ratio: 4 / 5; /* Relaxed from 480/715 — less portrait on tablet */
  }
  .how-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .how-right {
    min-height: auto;
  }
  .how-results-title {
    font-size: clamp(48px, 10vw, 100px);
  }
  .staircase-section {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .staircase-image-area {
    width: 100%;
    height: 50vh;
  }
  .staircase-content-area {
    width: 100%;
    height: auto;
    overflow: visible;
    position: static;
  }
  .staircase-step {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 60px 20px;
  }
  .result-body {
    margin-left: 0;
    max-width: 100%;
  }
  .cta-footer-wrap {
    min-height: auto;
  }
  .cta-section {
    position: relative;
    flex-direction: column;
    min-height: auto;
  }
  .cta-content {
    max-width: 100%;
    padding: 60px 20px;
  }
  .cta-video-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .footer-bottom-row {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .footer-legal-links {
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
    overflow: hidden;
  }
  .agf-menu {
    display: none;
  }
  /* Headlines fill the top 55% of hero, offset below nav */
  .hero-headline-group {
    width: 100%;
    left: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 72px;
    height: calc(55% - 36px);
    gap: 0.4em;
  }
  .agf-headline {
    position: relative;
    font-size: 15vw;
    top: auto;
    left: auto;
    width: auto;
    text-align: center;
    line-height: 1;
  }
  .agf-headline--structure,
  .agf-headline--creates,
  .agf-headline--freedom {
    top: auto;
    left: auto;
    width: auto;
  }

  /* Subtitle + CTA sit below the headline band */
  .agf-hero-text {
    top: 58%;
    left: 5%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .agf-subtitle {
    font-size: 4vw;
  }

  .agf-hero-text .btn-cta {
    font-size: 3.5vw;
    padding: 3vw 6vw;
  }

  /* Cards: larger on mobile but still scattered */
  .agf-card {
    width: 35vw;
    padding: 2vw;
    border-radius: 1.5vw;
    gap: 0.6vw;
  }
  .agf-card-title {
    font-size: 1.5vw;
  }
  .agf-card-num {
    font-size: 2.8vw;
    letter-spacing: -0.01em;
  }
  .agf-card-chart {
    height: 2.5vw;
  }
  .agf-card-chart--bar {
    height: 0.8vw;
  }
  .agf-card-trend {
    font-size: 1.2vw;
    padding: 0.3vw 0.7vw;
  }
  .agf-card-insight {
    font-size: 1.2vw;
  }
  .agf-card-question {
    font-size: 1.4vw;
  }
  .agf-card-answer {
    font-size: 1.6vw;
  }
  .agf-card-val-suffix {
    font-size: 1.2vw;
  }
  .agf-card-num--primary { font-size: 2.5vw; }
  .agf-card-num--secondary { font-size: 1.6vw; }
  .agf-card-metric-row--muted .agf-card-num { font-size: 1.6vw; }

  .agf-card--cash {
    top: 62%;
    left: -4%;
  }
  .agf-card--burn {
    top: 67%;
    right: -4%;
  }
  .agf-card--arr {
    top: 2%;
    left: 58%;
  }
  .agf-card--runway {
    top: 78%;
    left: auto;
    right: -2%;
  }
  .agf-trusted-by {
    top: auto;
    bottom: 20px;
    right: 5%;
  }

  .features-cards {
    grid-template-columns: 1fr;
  }
  .usp-text-panel {
    min-height: auto;
    padding: 40px 20px;
  }
  .usp-image-panel {
    padding: 24px 20px;
  }
  .usp-image-accent {
    max-width: 280px;
    width: 70%;
    max-height: 380px;
    aspect-ratio: 3 / 4;
  }
  .usp-number {
    width: 60px;
    height: 60px;
    font-size: 24px;
    line-height: 1;
  }
  .usp-desc {
    max-width: 100%;
  }
  .usp-image-word {
    font-size: clamp(36px, 8vw, 80px);
  }
  .result-num {
    font-size: 60px !important;
  }
  .result-unit {
    font-size: 60px !important;
  }
  .footer-logo-img {
    width: clamp(150px, 75vw, 700px);
  }
  .cta-headline {
    font-size: clamp(22px, 5vw, 30px);
  }
  .footer-nav-row {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .footer-nav {
    flex-direction: column;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════════════
   LAPTOP SCROLL SECTION
   ═══════════════════════════════════════════════ */
.laptop-section {
  width: 100vw;
  background: var(--agf-off-white);
  position: relative;
  z-index: 10;
  padding: 100px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  container-type: inline-size;
}

.laptop-container {
  position: relative;
  width: 100%;
}

.laptop-image-wrapper {
  position: relative;
  width: 100%;
}

.laptop-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
  position: relative;
}

.laptop-section .features-col {
  position: absolute;
  top: 22%;
  right: 0;
  width: 320px;
  z-index: 10;
}

.laptop-screen {
  position: absolute;
  /* Screen boundaries inside laptop.png — tuned to land exactly inside the blank monitor area */
  top: 11.5%;
  left: 17.5%;
  width: 65%;
  height: 60%;
  z-index: 5;
  transform: scale(0.8);

  /* Container for the 4 animated cards */
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: max-content max-content;
  place-content: center;
  column-gap: 0;
  row-gap: 2cqi;
}

/* Medium + Tablet: stack features below laptop (1025px–1380px) */
@media (max-width: 1380px) {
  .laptop-section {
    padding: 60px 0 0;
    overflow: visible; /* Must stay visible — GSAP Flip animates cards from hero position */
  }
  .laptop-image-wrapper {
    overflow: visible; /* GSAP Flip proxy cards animate through this element */
  }
  .laptop-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 60px); /* ensure full sofa visible within viewport */
    margin: 0 auto;
  }
  .laptop-image-wrapper {
    display: flex;
    justify-content: center;
  }
  .laptop-screen {
    transform: scale(0.75);
  }
  .laptop-container {
    display: flex;
    flex-direction: column;
  }
  .laptop-section .features-col {
    position: static;
    width: 100%;
    padding: 0;
  }
  .laptop-section .features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .laptop-section .feature-item {
    padding: 20px 24px;
    border-top: 1px solid rgba(15, 14, 11, 0.08);
  }
  .laptop-section .feature-item:nth-child(odd) {
    border-right: 1px solid rgba(15, 14, 11, 0.08);
  }
  .laptop-section .feature-desc {
    max-width: 100%;
    font-size: 13px;
  }
}

/* Mobile LAPTOP SECTION modifications */
@media (max-width: 767px) {
  .laptop-section {
    padding: 20px 0 0;
    overflow-x: clip; /* prevent cards overflowing right edge of screen */
  }
  .laptop-image-wrapper {
    max-height: none;    /* show full laptop including bottom */
    overflow: visible;   /* GSAP Flip must animate through this element */
  }
  .laptop-screen {
    top: 26%;  /* push down to align with actual screen glass area on mobile */
    transform: scale(0.55);
    transform-origin: top center;
  }
  .laptop-section .feature-item {
    padding: 12px 14px;
  }
  .laptop-section .feature-title {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .laptop-section .feature-desc {
    font-size: 11px;
    line-height: 1.45;
    max-width: 100%;
  }
}

/* Modifier class added by GSAP when inside laptop */
.agf-card.in-laptop {
  position: relative;
  inset: auto;
  transform: none;
  margin: -1.5cqi;
  /* width is naturally maintained from `.agf-card` explicit `cqi` assignment */
}

/* ═══════════════════════════════════════════════════
   SECONDARY BUTTON
   ═══════════════════════════════════════════════════ */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 2px 32px 0;
  background: transparent;
  color: var(--agf-off-black);
  border: 1.5px solid var(--agf-off-black);
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--agf-off-black);
  color: var(--agf-cream);
}
.btn-secondary--light {
  color: var(--agf-cream);
  border-color: rgba(236, 233, 198, 0.5);
}
.btn-secondary--light:hover {
  background: var(--agf-cream);
  color: var(--agf-off-black);
}
.btn-cta--cream {
  background: var(--agf-cream);
  color: var(--agf-off-black);
}
.btn-cta--cream:hover {
  filter: brightness(1.05);
}

/* ═══════════════════════════════════════════════════
   SECTION 2: FOR WHOM?
   ═══════════════════════════════════════════════════ */
.for-whom-section {
  background: var(--agf-cream);
  padding: 120px 24px;
}
.for-whom-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.for-whom-header {
  text-align: center;
  margin-bottom: 64px;
}
.for-whom-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--agf-off-black);
  margin-bottom: 24px;
}
.for-whom-sub {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-tan);
  max-width: 600px;
  margin: 0 auto;
}
.for-whom-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.for-whom-card {
  background: var(--agf-sand);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.for-whom-card-image {
  aspect-ratio: 16 / 10;
  background: var(--agf-graphite);
  overflow: hidden;
}
.for-whom-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.for-whom-card-body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.for-whom-card-title {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--agf-dark-grey);
  margin-bottom: 8px;
}
.for-whom-card-tagline {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--agf-dark-grey);
  margin-bottom: 12px;
}
.for-whom-card-tags {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--agf-tan);
  margin-bottom: 16px;
}
.for-whom-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-dark-grey);
}
.for-whom-cta {
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   USP LIGHT VARIANT + REVERSED LAYOUT
   ═══════════════════════════════════════════════════ */
.usp--light {
  background: var(--agf-cream);
  color: var(--agf-graphite);
}
.usp--reversed {
  direction: rtl;
}
.usp--reversed > * {
  direction: ltr;
}
.usp-number--dark {
  color: var(--agf-graphite);
  border-color: var(--agf-graphite);
}
.usp-desc--dark {
  color: var(--agf-graphite);
}
.usp-title--dark {
  color: var(--agf-off-black);
}
.usp-cta {
  display: inline-block;
  margin-top: 32px;
  align-self: flex-start;
  color: var(--agf-cream);
  font-family: var(--agf-font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.usp-cta:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   SECTION 4: HOW IT WORKS   4 Steps
   ═══════════════════════════════════════════════════ */
.hiw-section {
  background: var(--agf-off-white);
  padding: 120px 24px;
}
.hiw-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hiw-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--agf-off-black);
  text-align: center;
  margin-bottom: 80px;
}
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  margin-bottom: 64px;
}
/* Connecting line */
.hiw-steps::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(12.5% + 6px);
  right: calc(12.5% + 6px);
  height: 1px;
  background: var(--agf-tan);
}
.hiw-step {
  text-align: center;
  position: relative;
}
.hiw-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--agf-coral);
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}
.hiw-step-content {
  max-width: 280px;
  margin: 0 auto;
}
.hiw-step-label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--agf-tan);
  margin-bottom: 8px;
}
.hiw-step-name {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--agf-off-black);
  margin-bottom: 16px;
}
.hiw-step-desc {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-graphite);
}
.hiw-cta {
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   SECTION 5: SYSTEM LEVEL RESULTS
   ═══════════════════════════════════════════════════ */
.results-section {
  background: var(--agf-off-white);
  padding: 120px 24px;
}
.results-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.results-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--agf-off-black);
  margin-bottom: 64px;
}
.results-layout {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 48px;
  align-items: start;
}
.results-visual {
  position: sticky;
  top: 120px;
}
.results-staircase-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.results-metrics {
  display: flex;
  flex-direction: column;
}
.results-metric {
  padding: 56px 0;
}
.results-metric:first-child {
  padding-top: 0;
}
.results-separator {
  border: none;
  border-top: 1px solid var(--agf-sand);
  margin: 0;
}
.results-metric-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.results-num-before {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--agf-tan);
  line-height: 1;
}
.results-num-arrow {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--agf-tan);
  line-height: 1;
}
.results-num-after {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 5vw, 72px);
  color: var(--agf-off-black);
  line-height: 1;
}
.results-metric-unit {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--agf-tan);
  margin-bottom: 16px;
}
.results-metric-body {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-graphite);
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   SECTION 6: INTEGRATION ECOSYSTEM
   ═══════════════════════════════════════════════════ */
.ecosystem-section {
  background: var(--agf-dark-brown);
  padding: 120px 24px;
}
.ecosystem-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.ecosystem-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--agf-tan);
  display: block;
  margin-bottom: 24px;
}
.ecosystem-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--agf-cream);
  margin-bottom: 24px;
}
.ecosystem-sub {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-tan);
  max-width: 600px;
  margin: 0 auto 80px;
}
.ecosystem-orbit {
  position: relative;
  margin-bottom: 64px;
}
.ecosystem-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}
.ecosystem-hub-logo {
  width: 60px;
  height: auto;
  opacity: 0.7;
}
.ecosystem-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}
.ecosystem-category {
  padding: 24px;
}
.ecosystem-cat-name {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--agf-cream);
  margin-bottom: 16px;
}
.ecosystem-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ecosystem-pill {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--agf-cream);
  background: var(--agf-graphite);
  border-radius: 6px;
  padding: 10px 14px;
  white-space: nowrap;
}
.ecosystem-pill--soon {
  background: transparent;
  border: 1px dashed var(--agf-tan);
  color: var(--agf-tan);
}
.ecosystem-callouts {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.ecosystem-callout {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--agf-tan);
}
.ecosystem-cta {
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   SECTION 7: COMPLIANCE AND TRUST
   ═══════════════════════════════════════════════════ */
.compliance-section {
  background: var(--agf-cream);
  padding: 120px 24px;
}
.compliance-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.compliance-title {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--agf-off-black);
  margin-bottom: 24px;
}
.compliance-sub {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-graphite);
  max-width: 100%;
  margin-bottom: 64px;
}
.compliance-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
.compliance-col-header {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--agf-tan);
  margin-bottom: 24px;
}
.compliance-items {
  display: flex;
  flex-direction: column;
}
.compliance-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--agf-sand);
}
.compliance-item:first-child {
  padding-top: 0;
}
.compliance-item strong {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--agf-off-black);
  display: block;
  margin-bottom: 6px;
}
.compliance-item p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--agf-tan);
  line-height: 1.5;
}
.compliance-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.compliance-item-header strong {
  margin-bottom: 0;
}
.compliance-pill-progress {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--agf-tan);
  background: var(--agf-sand);
  border-radius: 4px;
  padding: 6px 10px;
  white-space: nowrap;
}
.compliance-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  overflow: hidden;
}
.compliance-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════
   SECTION 8: FINAL CTA
   ═══════════════════════════════════════════════════ */
.final-cta-section {
  background: var(--agf-dark-grey);
  padding: 120px 24px;
}
.final-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.final-cta-headline {
  font-family: "BIGGER", "Anton", "Impact", sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--agf-cream);
  margin-bottom: 24px;
}
.final-cta-sub {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--agf-tan);
  max-width: 100%;
  margin-bottom: 40px;
}
.final-cta-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-cta-video {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 16px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE: NEW SECTIONS
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .for-whom-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .hiw-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .hiw-steps::before {
    display: none;
  }
  .results-layout {
    grid-template-columns: 1fr;
  }
  .results-visual {
    position: static;
  }
  .results-staircase-img {
    max-height: 400px;
    aspect-ratio: auto;
  }
  .ecosystem-categories {
    grid-template-columns: repeat(2, 1fr);
  }
  .compliance-columns {
    grid-template-columns: 1fr;
  }
  .final-cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .final-cta-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .usp--reversed {
    direction: ltr;
  }
}

@media (max-width: 767px) {
  .for-whom-section,
  .hiw-section,
  .results-section,
  .ecosystem-section,
  .compliance-section,
  .final-cta-section {
    padding: 80px 20px;
  }
  .hiw-steps {
    grid-template-columns: 1fr;
  }
  .ecosystem-categories {
    grid-template-columns: 1fr;
  }
  .ecosystem-callouts {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .final-cta-visual {
    display: none;
  }
}