/* Home page composition. Maps 1:1 to the plain-HTML mockup in
   reference/Design/Page_Samples_PLAINHTML/Home.html. Generic components
   live in components.css; this file handles section composition. */

/* Soft cream placeholder for images that haven't been dropped yet.
   Once Step 6 lands real files at the expected paths, the slot
   disappears behind the loaded image. */
.img-slot {
  background-color: var(--sg-cream);
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── §2 Hero ───────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  /* Pulls the hero up under the sticky nav so the navy extends behind
     the nav. Combined with the nav's transparent background and
     mix-blend-mode text, this avoids the "gray strip at top" effect
     where the nav would otherwise sit over a separate body color. */
  margin-top: calc(-1 * var(--sg-nav-height));
  overflow: hidden;
  background: var(--sg-cape-navy);
  color: var(--sg-white);
  isolation: isolate;
}

.home-hero__stage { position: absolute; inset: 0; }

.home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.home-hero__slide.is-active { opacity: 1; }

/* Slide 1: directional energy / network activation, blue-led.
   Outermost stop softened from #061640 (sample) to #18347C so the
   top-left corner reads as part of the gradient rather than a flat
   black bar behind the nav. */
.home-hero__slide--1 {
  background:
    radial-gradient(120% 80% at 80% 50%, #2E6BFF 0%, #1A56DB 35%, #1E459E 70%, #18347C 100%);
}
.home-hero__slide--1::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 35% at 78% 48%, rgba(255, 220, 180, 0.35), transparent 60%),
    radial-gradient(60% 60% at 95% 90%, rgba(200, 32, 47, 0.25), transparent 60%);
  mix-blend-mode: screen;
}
.home-hero__net {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(80% 80% at 70% 50%, #000 30%, transparent 80%);
}
.home-hero__nodes { position: absolute; inset: 0; }
.home-hero__nodes svg { width: 100%; height: 100%; display: block; }

/* Slide 2: photographic placeholder with warm-blue treatment */
.home-hero__slide--2 { background: #1c2436; }
.home-hero__photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(15,22,35,0.55), rgba(26,86,219,0.25) 55%, rgba(255,180,120,0.35)),
    repeating-linear-gradient(118deg, #2a3550 0 14px, #1f2a44 14px 28px),
    linear-gradient(180deg, #0F1623, #243557);
}
.home-hero__grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 70% 40%, rgba(255,210,170,0.18), transparent 70%),
    radial-gradient(50% 60% at 30% 80%, rgba(26,86,219,0.35), transparent 70%);
  mix-blend-mode: screen;
}
.home-hero__scaffold { position: absolute; inset: 0; }
.home-hero__scaffold svg { width: 100%; height: 100%; }

/* Slide 3: 3D-ish infrastructure, navy with blue glow */
.home-hero__slide--3 {
  background: radial-gradient(80% 60% at 70% 40%, #1c2c5a 0%, #0F1623 60%, #06090f 100%);
}
.home-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(35% 22% at 72% 48%, rgba(26,86,219,0.55), transparent 70%),
    radial-gradient(28% 18% at 60% 70%, rgba(46,107,255,0.35), transparent 70%);
  mix-blend-mode: screen;
}
.home-hero__infra { position: absolute; inset: 0; }
.home-hero__infra svg { width: 100%; height: 100%; }

/* Hero card */
.home-hero__card-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Top padding accounts for the negative margin-top on .home-hero so
     the card visually centers in the area below the nav, not in the
     full 100vh that bleeds behind the nav. */
  padding: calc(var(--sg-nav-height) + 56px) 0 72px 56px;
  z-index: 10;
}
.home-hero__card {
  width: 45%;
  min-width: 520px;
  max-width: 680px;
  height: 100%;
  max-height: 720px;
  background: rgba(250, 250, 248, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
          backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 80px -20px rgba(8, 14, 30, 0.35),
    0 8px 24px -8px rgba(8, 14, 30, 0.25);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: var(--sg-ink);
}
.home-hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,250,240,0.5), rgba(250,250,248,0.2));
  pointer-events: none;
}
.home-hero__card > * { position: relative; }

.home-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-hero__monogram {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--sg-hero-blue);
  line-height: 1;
}
.home-hero__eyebrow {
  font-size: 12px;
  font-weight: var(--sg-w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-steel);
}

.home-hero__body {
  margin-top: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.home-hero__counter {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: var(--sg-steel);
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.home-hero__counter b { color: var(--sg-ink); font-weight: var(--sg-w-bold); }

.home-hero__headline {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  /* Smaller upper bound than the sample so slide 2's longer headline
     fits inside the fixed-height card without clipping. */
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}
.home-hero__subhead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sg-steel);
  margin: 20px 0 0;
  max-width: 48ch;
  text-wrap: pretty;
}

.home-hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.home-hero__learn {
  color: var(--sg-hero-blue);
  font-weight: var(--sg-w-semibold);
  font-size: 16px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.home-hero__learn:hover { color: var(--sg-hero-blue-hover); }
.home-hero__learn .arrow { display: inline-block; transition: transform 0.25s ease; }
.home-hero__learn:hover .arrow { transform: translateX(4px); }

.home-hero__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.home-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(17,19,24,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 350ms cubic-bezier(0.4, 0.1, 0.2, 1), background-color 250ms ease;
}
.home-hero__dot.is-active {
  width: 28px;
  background: var(--sg-hero-blue);
}
.home-hero__dot:hover:not(.is-active) { background: rgba(17, 19, 24, 0.35); }

/* Slide progress bar bottom right */
.home-hero__progress {
  position: absolute;
  right: 56px;
  bottom: 40px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(250, 250, 248, 0.7);
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
}
.home-hero__progress-bar {
  width: 160px;
  height: 1px;
  background: rgba(250, 250, 248, 0.25);
  position: relative;
}
.home-hero__progress-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 33.3333%;
  background: var(--sg-white);
  transition: transform 600ms ease;
}

/* Vertical edge label. Uses writing-mode (not rotate) so the element's
   natural bounding box is already vertical — that way `left: 24px;
   top: 50%; translateY(-50%)` anchors it cleanly to the left edge of
   the hero. A prior rotate-based version centered the rotated box on
   its own midpoint and ended up rendering through the hero card. */
.home-hero__edge {
  position: absolute;
  z-index: 12;
  color: rgba(250, 250, 248, 0.55);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

@media (max-width: 880px) {
  .home-hero { height: auto; min-height: 0; }
  .home-hero__card-wrap {
    position: relative;
    padding: 280px 0 32px 16px;
  }
  .home-hero__card {
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 32px 28px;
  }
  .home-hero__stage { height: 360px; position: absolute; inset: 0 0 auto 0; }
  .home-hero__progress, .home-hero__edge { display: none; }
}

/* ── Hero SVG animations ─────────────────────────────────────────
   All animations use animation-direction: alternate so they play
   forward then reverse forever, no jarring jump cut. Each element
   has its own duration + negative animation-delay so the slide
   feels like ambient drift rather than synchronized blinking.
   All animations honor prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {

  /* ── Slide 1: GTM (blue network) ─────────────────────────── */

  /* Flow paths draw in then retract. stroke-dasharray needs to be
     larger than any path's actual length; 2800 covers the longest
     curve at viewBox scale. */
  .hero1-flow path {
    stroke-dasharray: 2800;
    stroke-dashoffset: 2800;
    animation: hero-flow-draw 14s ease-in-out infinite alternate;
  }
  .hero1-flow path:nth-of-type(1) { animation-delay:  -0s; }
  .hero1-flow path:nth-of-type(2) { animation-delay:  -2s; }
  .hero1-flow path:nth-of-type(3) { animation-delay:  -4s; }
  .hero1-flow path:nth-of-type(4) { animation-delay:  -6s; }
  .hero1-flow path:nth-of-type(5) { animation-delay:  -8s; }

  @keyframes hero-flow-draw {
    from { stroke-dashoffset: 2800; }
    to   { stroke-dashoffset:    0; }
  }

  /* Small network nodes pulse out of sync */
  .hero1-nodes circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-node-blink 6s ease-in-out infinite alternate;
  }
  .hero1-nodes circle:nth-of-type(2) { animation-delay: -0.8s; animation-duration: 7s; }
  .hero1-nodes circle:nth-of-type(3) { animation-delay: -1.6s; }
  .hero1-nodes circle:nth-of-type(4) { animation-delay: -2.4s; animation-duration: 8s; }
  .hero1-nodes circle:nth-of-type(5) { animation-delay: -3.2s; }
  .hero1-nodes circle:nth-of-type(6) { animation-delay: -4.0s; animation-duration: 5s; }
  .hero1-nodes circle:nth-of-type(7) { animation-delay: -4.8s; }
  .hero1-nodes circle:nth-of-type(8) { animation-delay: -1.2s; animation-duration: 7s; }
  .hero1-nodes circle:nth-of-type(9) { animation-delay: -3.6s; }
  .hero1-nodes circle:nth-of-type(10) { animation-delay: -2.0s; animation-duration: 6.5s; }

  @keyframes hero-node-blink {
    from { opacity: 0.4; transform: scale(0.8); }
    to   { opacity: 1;   transform: scale(1.1); }
  }

  /* Highlight hub: 3 stacked circles pulse together, with the outer
     halo doing the largest stretch. */
  .hero1-hub circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-hub-pulse 5s ease-in-out infinite alternate;
  }
  .hero1-hub circle:nth-of-type(1) { animation-duration: 6s; }
  .hero1-hub circle:nth-of-type(2) { animation-delay: -1.2s; }
  .hero1-hub circle:nth-of-type(3) { animation-delay: -2.4s; animation-duration: 4s; }

  @keyframes hero-hub-pulse {
    from { transform: scale(0.92); opacity: 0.7; }
    to   { transform: scale(1.14); opacity: 1; }
  }

  /* Diagonal rays fade in and out */
  .hero1-rays line {
    animation: hero-ray-fade 9s ease-in-out infinite alternate;
  }
  .hero1-rays line:nth-of-type(2) { animation-delay: -1.5s; }
  .hero1-rays line:nth-of-type(3) { animation-delay: -3.0s; }
  .hero1-rays line:nth-of-type(4) { animation-delay: -4.5s; animation-duration: 7s; }
  .hero1-rays line:nth-of-type(5) { animation-delay: -6.0s; }
  .hero1-rays line:nth-of-type(6) { animation-delay: -7.5s; animation-duration: 11s; }

  @keyframes hero-ray-fade {
    from { opacity: 0.15; }
    to   { opacity: 0.55; }
  }

  /* The grid behind the network slowly drifts diagonally so the
     whole field feels alive. 64px is the cell size, so the loop
     ends on a cell boundary (no visible reset). */
  .home-hero__slide--1 .home-hero__net {
    animation: hero-net-drift 36s linear infinite alternate;
  }

  @keyframes hero-net-drift {
    from { background-position:   0px   0px; }
    to   { background-position:  64px  64px; }
  }

  /* ── Slide 2: Product (scaffold polyline) ────────────────── */

  /* Grid lines pulse in a wave so the static scaffold feels alive
     alongside the polyline. Each line opacity oscillates with a
     staggered delay; together they read as a sweep. */
  .hero2-grid line {
    animation: hero-grid-wave 4s ease-in-out infinite alternate;
  }
  .hero2-grid line:nth-of-type(2) { animation-delay: -0.5s; }
  .hero2-grid line:nth-of-type(3) { animation-delay: -1.0s; }
  .hero2-grid line:nth-of-type(4) { animation-delay: -1.5s; animation-duration: 4.5s; }
  .hero2-grid line:nth-of-type(5) { animation-delay: -2.0s; }
  .hero2-grid line:nth-of-type(6) { animation-delay: -2.5s; animation-duration: 5s; }
  .hero2-grid line:nth-of-type(7) { animation-delay: -3.0s; }

  @keyframes hero-grid-wave {
    from { opacity: 0.4; }
    to   { opacity: 1; }
  }

  /* Scaffold path draws in then retracts. Shorter cycle than before
     so motion is consistently visible. */
  .hero2-poly path {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: hero-poly-draw 7s ease-in-out infinite alternate;
  }

  @keyframes hero-poly-draw {
    from { stroke-dashoffset: 1800; }
    to   { stroke-dashoffset:    0; }
  }

  /* The 4 polyline anchor dots breathe in the same rhythm as the
     polyline so dots and line read as one moving system. Bigger
     scale range for visibility. */
  .hero2-dots circle,
  .hero2-dots-2 circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-dot-pulse 3.5s ease-in-out infinite alternate;
  }
  .hero2-dots circle:nth-of-type(2) { animation-delay: -0.8s; }
  .hero2-dots circle:nth-of-type(3) { animation-delay: -1.6s; }
  .hero2-dots circle:nth-of-type(4) { animation-delay: -2.4s; }

  /* The second (blue) dot set runs slightly offset from the warm
     set so the two systems cross each other in time as well as
     in space. */
  .hero2-dots-2 circle:nth-of-type(1) { animation-delay: -1.0s; animation-duration: 4.2s; }
  .hero2-dots-2 circle:nth-of-type(2) { animation-delay: -2.2s; animation-duration: 4.2s; }
  .hero2-dots-2 circle:nth-of-type(3) { animation-delay: -3.0s; animation-duration: 4.2s; }
  .hero2-dots-2 circle:nth-of-type(4) { animation-delay: -0.4s; animation-duration: 4.2s; }

  @keyframes hero-dot-pulse {
    from { opacity: 0.45; transform: scale(0.6); }
    to   { opacity: 1;    transform: scale(1.6); }
  }

  /* Second polyline: draws in opposite direction (right to left) and
     on a slightly slower cycle than the warm one so the two paths
     cross each other in motion as well as in geometry. */
  .hero2-poly-2 path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: hero-poly-draw-2 9s ease-in-out infinite alternate;
  }

  @keyframes hero-poly-draw-2 {
    from { stroke-dashoffset: 2000; }
    to   { stroke-dashoffset:    0; }
  }

  /* Photo-layer grain slowly drifts so the dark fill behind the
     scaffold isn't completely static. */
  .home-hero__slide--2 .home-hero__grain {
    animation: hero-grain-drift 24s ease-in-out infinite alternate;
  }

  @keyframes hero-grain-drift {
    from { transform: translate(0, 0)   scale(1.00); }
    to   { transform: translate(-2%, 1%) scale(1.04); }
  }

  /* ── Slide 3: AI Transformation (datacenter) ────────────── */

  /* Rack bars grow / shrink in height. Each rack is a <g> containing
     the rect + its glow edge-line; the whole group is scaled on Y
     from its bottom so they move as one unit and the edge stays
     pinned to the top of the rack. Multiple racks animate at the
     same time at staggered phases so several bars are always
     mid-motion together. */
  .hero3-rack {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: hero-rack-grow 5s ease-in-out infinite alternate;
  }
  .hero3-rack:nth-of-type(1) { animation-delay: -0.0s; animation-duration: 5.0s; }
  .hero3-rack:nth-of-type(2) { animation-delay: -1.6s; animation-duration: 4.4s; }
  .hero3-rack:nth-of-type(3) { animation-delay: -0.8s; animation-duration: 5.6s; }
  .hero3-rack:nth-of-type(4) { animation-delay: -2.4s; animation-duration: 4.8s; }
  .hero3-rack:nth-of-type(5) { animation-delay: -1.2s; animation-duration: 6.2s; }
  .hero3-rack:nth-of-type(6) { animation-delay: -3.0s; animation-duration: 5.2s; }
  .hero3-rack:nth-of-type(7) { animation-delay: -0.4s; animation-duration: 4.6s; }
  .hero3-rack:nth-of-type(8) { animation-delay: -2.0s; animation-duration: 5.8s; }
  .hero3-rack:nth-of-type(9) { animation-delay: -1.8s; animation-duration: 4.2s; }

  @keyframes hero-rack-grow {
    from { transform: scaleY(0.65); }
    to   { transform: scaleY(1.10); }
  }

  /* Edge glow lines also brighten/dim independently so the top
     edges twinkle on top of the height motion. */
  .hero3-rack line {
    animation: hero-edge-shimmer 3.5s ease-in-out infinite alternate;
  }
  .hero3-rack:nth-of-type(2) line { animation-delay: -0.6s; }
  .hero3-rack:nth-of-type(3) line { animation-delay: -1.2s; }
  .hero3-rack:nth-of-type(4) line { animation-delay: -1.8s; }
  .hero3-rack:nth-of-type(5) line { animation-delay: -2.4s; }
  .hero3-rack:nth-of-type(6) line { animation-delay: -3.0s; }
  .hero3-rack:nth-of-type(7) line { animation-delay: -0.4s; }
  .hero3-rack:nth-of-type(8) line { animation-delay: -1.0s; }
  .hero3-rack:nth-of-type(9) line { animation-delay: -2.6s; }

  @keyframes hero-edge-shimmer {
    from { opacity: 0.5; }
    to   { opacity: 1; }
  }

  /* Warm pinpoints pulse like idle activity. */
  .hero3-pinpoints circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-dot-pulse 4.5s ease-in-out infinite alternate;
  }
  .hero3-pinpoints circle:nth-of-type(2) { animation-delay: -1.1s; animation-duration: 5s; }
  .hero3-pinpoints circle:nth-of-type(3) { animation-delay: -2.2s; }
  .hero3-pinpoints circle:nth-of-type(4) { animation-delay: -3.3s; animation-duration: 5.5s; }

  /* The blue glow drifts to make the data-center field feel
     atmospheric rather than frozen. */
  .home-hero__slide--3 .home-hero__glow {
    animation: hero-glow-drift 28s ease-in-out infinite alternate;
  }

  @keyframes hero-glow-drift {
    from { transform: translate(0, 0)   scale(1.00); opacity: 0.9; }
    to   { transform: translate(2%, -2%) scale(1.06); opacity: 1; }
  }

} /* end @media prefers-reduced-motion: no-preference */

/* ── §3 Editorial (The Problem) ─────────────────────────────── */

.home-editorial {
  background: var(--sg-white);
  padding: 140px 56px;
}
.home-editorial__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: start;
}
.home-editorial__left {
  margin-left: -120px;
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}
.home-editorial__line-1 {
  display: block;
  font-size: 56px;
  color: var(--sg-ink);
  margin: 0 0 24px;
  white-space: pre-line;
}
.home-editorial__line-2 {
  display: block;
  font-size: 48px;
  color: var(--sg-hero-red);
  margin: 0;
  white-space: pre-line;
}
.home-editorial__right {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 12px;
}
.home-editorial__body {
  font-size: 20px;
  line-height: 1.5;
  font-weight: var(--sg-w-regular);
  color: var(--sg-steel);
  margin: 0;
  text-wrap: pretty;
}
.home-editorial__emph {
  font-size: 20px;
  line-height: 1.45;
  font-weight: var(--sg-w-bold);
  color: var(--sg-ink);
  margin: 0;
}
.home-editorial__link {
  font-size: 15px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-hero-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
}
.home-editorial__link .arrow { display: inline-block; transition: transform 0.25s ease; }
.home-editorial__link:hover .arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  .home-editorial { padding: 96px 32px; }
  .home-editorial__inner { grid-template-columns: 1fr; gap: 40px; }
  .home-editorial__left { margin-left: 0; }
  .home-editorial__line-1 { font-size: 40px; }
  .home-editorial__line-2 { font-size: 34px; }
}

/* ── §4 Proof ──────────────────────────────────────────────── */

.home-proof {
  position: relative;
  background: var(--sg-cape-navy);
  color: var(--sg-white);
  padding: 140px 56px 160px;
  overflow: hidden;
  isolation: isolate;
}
.home-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 700px at 18% 30%, rgba(26,86,219,0.32), transparent 65%),
    radial-gradient(900px 600px at 82% 78%, rgba(26,86,219,0.18), transparent 70%),
    radial-gradient(1400px 900px at 50% -10%, rgba(255,255,255,0.04), transparent 70%);
  z-index: -1;
}
.home-proof::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 64px);
  z-index: -1;
  pointer-events: none;
}
.home-proof__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.home-proof__eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 24px;
}
.home-proof__tagline {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--sg-white);
  margin: 0 0 88px;
  max-width: 28ch;
  text-wrap: balance;
}

/* Red accent on the second line of the proof tagline. */
.home-proof__tagline-accent {
  color: var(--sg-hero-red);
}
.home-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.home-proof__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 36px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.home-proof__card:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.home-proof__num {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sg-white);
  margin: 0;
}
.home-proof__rule {
  width: 32px;
  height: 3px;
  background: var(--sg-hero-red);
  border-radius: 2px;
  margin: 0;
  display: block;
}
.home-proof__desc {
  font-size: 15px;
  font-weight: var(--sg-w-regular);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 1080px) {
  .home-proof__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .home-proof { padding: 96px 28px 112px; }
  .home-proof__tagline { margin-bottom: 56px; }
  .home-proof__grid { grid-template-columns: 1fr; gap: 14px; }
  .home-proof__card { padding: 28px; }
  .home-proof__num { font-size: 44px; }
}

/* ── §5 Differentiation ────────────────────────────────────── */

.home-diff {
  background: var(--sg-white);
  padding: 140px 56px;
}
.home-diff__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 96px;
  align-items: start;
}
.home-diff__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.home-diff__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}
.home-diff__body {
  font-size: 17px;
  font-weight: var(--sg-w-regular);
  line-height: 1.6;
  color: var(--sg-steel);
  margin: 0;
  text-wrap: pretty;
}
.home-diff__link {
  font-size: 15px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-hero-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
}
.home-diff__link .arrow { display: inline-block; transition: transform 0.25s ease; }
.home-diff__link:hover .arrow { transform: translateX(4px); }

.home-diff__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sg-rule);
}
.home-diff__row { border-bottom: 1px solid var(--sg-rule); }
.home-diff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.home-diff__label {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  transition: color 0.2s ease;
}
.home-diff__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  position: relative;
  color: var(--sg-ink);
  transition: color 0.2s ease, transform 0.3s ease;
}
.home-diff__icon::before,
.home-diff__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease;
}
.home-diff__icon::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.home-diff__icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
.home-diff__row.is-open .home-diff__label { color: var(--sg-hero-red); }
.home-diff__row.is-open .home-diff__icon {
  color: var(--sg-hero-red);
  transform: rotate(45deg);
}

.home-diff__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 4px;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}
.home-diff__row.is-open .home-diff__panel {
  max-height: 320px;
  opacity: 1;
  padding: 0 4px 28px;
}
.home-diff__panel-inner {
  font-size: 15px;
  line-height: 1.6;
  font-weight: var(--sg-w-regular);
  color: var(--sg-steel);
  max-width: 56ch;
  text-wrap: pretty;
}

@media (max-width: 980px) {
  .home-diff { padding: 96px 32px; }
  .home-diff__inner { grid-template-columns: 1fr; gap: 48px; }
  .home-diff__h2 { font-size: 36px; }
}

/* ── §6 Domains ────────────────────────────────────────────── */

.home-domains {
  background: var(--sg-cape-navy);
  color: var(--sg-white);
  padding: 140px 56px;
}
.home-domains__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.home-domains__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 72px;
}
.home-domains__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-white);
  margin: 0;
  text-wrap: balance;
}
.home-domains__sub {
  font-size: 17px;
  line-height: 1.55;
  font-weight: var(--sg-w-regular);
  color: rgba(255, 255, 255, 0.70);
  margin: 0;
  text-wrap: pretty;
}
.home-domains__grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.home-domains__card {
  position: relative;
  flex: 0.85 1 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 36px 32px 32px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--sg-white);
  transition: flex 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.home-domains__card.is-active { flex: 1.55 1 0; }
.home-domains__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #1A56DB 0%, #0F3D9E 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.home-domains__card::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(120, 160, 255, 0.45) 0%, rgba(26, 86, 219, 0) 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}
.home-domains__card > * { position: relative; z-index: 1; }
.home-domains__card:hover { text-decoration: none; }

.home-domains__num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 56px;
  transition: color 0.35s ease;
}
.home-domains__title {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sg-white);
  margin: 0 0 16px;
  text-wrap: balance;
}
.home-domains__problem {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  text-wrap: pretty;
  transition: color 0.3s ease;
}
.home-domains__learn {
  margin-top: auto;
  padding-top: 32px;
  font-size: 14px;
  font-weight: var(--sg-w-bold);
  color: var(--sg-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.home-domains__learn .arrow { display: inline-block; transition: transform 0.25s ease; }

/* Default: GTM (.is-active) shows the gradient + revealed copy */
.home-domains__card.is-active::before,
.home-domains__card.is-active::after { opacity: 1; }
.home-domains__card.is-active .home-domains__problem { color: var(--sg-white); }
.home-domains__card.is-active .home-domains__num { color: rgba(255, 255, 255, 0.7); }
.home-domains__card.is-active .home-domains__learn { opacity: 1; transform: translateY(0); }

/* Hover ANY card: that card expands; siblings reset to default narrow */
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) {
  flex: 0.85 1 0;
}
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover)::before,
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover)::after {
  opacity: 0;
}
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) .home-domains__problem {
  color: rgba(255, 255, 255, 0.62);
}
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) .home-domains__num {
  color: rgba(255, 255, 255, 0.45);
}
.home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) .home-domains__learn {
  opacity: 0;
  transform: translateY(8px);
}

.home-domains__card:hover { flex: 1.55 1 0; }
.home-domains__card:hover::before,
.home-domains__card:hover::after { opacity: 1; }
.home-domains__card:hover .home-domains__problem { color: var(--sg-white); }
.home-domains__card:hover .home-domains__num { color: rgba(255, 255, 255, 0.7); }
.home-domains__card:hover .home-domains__learn { opacity: 1; transform: translateY(0); }
.home-domains__card:hover .home-domains__learn .arrow { transform: translateX(4px); }

.home-domains__footer {
  margin-top: 56px;
  display: flex;
  justify-content: flex-start;
}
.home-domains__foot-link {
  font-size: 15px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.25s ease;
}
.home-domains__foot-link:hover { opacity: 0.82; text-decoration: none; }
.home-domains__foot-link .arrow { display: inline-block; transition: transform 0.25s ease; }
.home-domains__foot-link:hover .arrow { transform: translateX(4px); }

@media (max-width: 1080px) {
  .home-domains__grid { flex-wrap: wrap; }
  .home-domains__card,
  .home-domains__card.is-active,
  .home-domains__card:hover,
  .home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) { flex: 1 1 calc(50% - 8px); }
  .home-domains__header { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
@media (max-width: 640px) {
  .home-domains { padding: 96px 28px; }
  .home-domains__card,
  .home-domains__card.is-active,
  .home-domains__card:hover,
  .home-domains__grid:has(.home-domains__card:hover) .home-domains__card:not(:hover) { flex: 1 1 100%; }
  .home-domains__h2 { font-size: 36px; }
  .home-domains__card { min-height: 280px; }
}

/* ── §7 Buyers (Who This Is For) ───────────────────────────── */

.home-buyers-header {
  background: var(--sg-white);
  /* ~25% less vertical padding than the sample's 140px / 96px. */
  padding: 105px 56px 72px;
  text-align: center;
}
.home-buyers-h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}
.buyer-row {
  display: grid;
  /* 30/70: more room for the text per user ask. */
  grid-template-columns: 30% 70%;
  /* ~40% less than sample's 620px, per user feedback. */
  min-height: 372px;
  background: var(--sg-cream);
  width: 100%;
}
.buyer-row__media {
  position: relative;
  overflow: hidden;
  background: #1A1F2A;
}
.buyer-row__media .img-slot {
  background-color: #1A1F2A;
}
.buyer-row__text {
  background: var(--sg-cream);
  /* Vertical padding trimmed ~40%; horizontal kept. */
  padding: 29px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.buyer-row__eyebrow {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0 0 24px;
}
.buyer-row__title {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0 0 20px;
  max-width: 32ch;
  text-wrap: balance;
}
.buyer-row__body {
  font-size: 17px;
  font-weight: var(--sg-w-regular);
  line-height: 1.6;
  color: var(--sg-steel);
  margin: 0 0 24px;
  max-width: 64ch;
  text-wrap: pretty;
}
.buyer-row__link {
  font-size: 15px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-hero-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.buyer-row__link .arrow { display: inline-block; transition: transform 0.25s ease; }
.buyer-row__link:hover .arrow { transform: translateX(4px); }

.buyer-row--reverse { grid-template-columns: 70% 30%; }
.buyer-row--reverse .buyer-row__media { order: 2; }
.buyer-row--reverse .buyer-row__text  { order: 1; }

@media (max-width: 960px) {
  .home-buyers-header { padding: 96px 28px 64px; }
  .home-buyers-h2 { font-size: 36px; }
  .buyer-row,
  .buyer-row--reverse { grid-template-columns: 1fr; min-height: 0; }
  .buyer-row__media { aspect-ratio: 4 / 3; }
  .buyer-row--reverse .buyer-row__media { order: 0; }
  .buyer-row--reverse .buyer-row__text  { order: 0; }
  .buyer-row__text { padding: 48px 32px; }
  .buyer-row__title { font-size: 28px; }
}

/* ── §8 Letter ─────────────────────────────────────────────── */

.home-letter-section {
  background: var(--sg-white);
  padding: 120px 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.home-letter-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0;
  width: 90%;
  max-width: 1320px;
  text-align: left;
}
.home-letter {
  position: relative;
  width: 90%;
  max-width: 1320px;
  background: var(--sg-cream);
  border-radius: 8px;
  box-shadow: var(--sg-shadow-letter);
  display: grid;
  grid-template-columns: 75% 25%;
  overflow: hidden;
}
.home-letter__body-col {
  padding: 72px 88px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.home-letter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.home-letter__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.home-letter__mark {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sg-hero-blue);
}
/* Same visual weight as the S> mark so brand reads as one unit. */
.home-letter__name {
  font-family: var(--sg-font-display);
  font-size: 22px;
  font-weight: var(--sg-w-black);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--sg-ink);
}
.home-letter__date {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sg-steel);
  text-transform: uppercase;
}
.home-letter__rule {
  height: 1px;
  background: var(--sg-rule);
  margin: 4px 0 12px;
  border: 0;
}
.home-letter__salutation {
  font-family: var(--sg-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--sg-ink);
  margin: 0;
  line-height: 1.4;
}
.home-letter__body {
  font-family: var(--sg-font-display);
  font-size: 17px;
  font-weight: var(--sg-w-regular);
  line-height: 1.65;
  color: var(--sg-ink);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.home-letter__link {
  font-family: var(--sg-font-display);
  font-size: 17px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-hero-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.home-letter__link .arrow { display: inline-block; transition: transform 0.25s ease; }
.home-letter__link:hover .arrow { transform: translateX(4px); }
.home-letter__signature {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.home-letter__sign-name {
  font-family: var(--sg-font-display);
  font-size: 22px;
  font-weight: var(--sg-w-semibold);
  color: var(--sg-ink);
  letter-spacing: -0.01em;
  line-height: 1;
  font-style: italic;
}
.home-letter__flourish {
  width: 32px;
  height: 2px;
  background: var(--sg-hero-blue);
  border-radius: 2px;
}

.home-letter__portrait-col {
  position: relative;
  background: var(--sg-cream);
  overflow: hidden;
}
.home-letter__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26, 86, 219, 0.22) 0%, rgba(26, 86, 219, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.home-letter__portrait-col .img-slot {
  background-color: transparent;
  position: relative;
  z-index: 1;
  height: 100%;
}

/* Top-align the portrait so when the container is shorter than the
   image (especially mobile, where the portrait col is 4:3 wide and
   the photo is 2:3 tall), the head stays visible instead of being
   cropped to the middle of the figure. */
.home-letter__portrait-col .img-slot img {
  object-position: center top;
}

@media (max-width: 880px) {
  .home-letter-section { padding: 96px 0 112px; }
  .home-letter { grid-template-columns: 1fr; }
  .home-letter__body-col { padding: 48px 36px 56px; }
  .home-letter__portrait-col { aspect-ratio: 4 / 3; order: -1; }
}

/* ── §9 Closing CTA ────────────────────────────────────────── */

.home-closing {
  /* Image is the dominant visual; the cream gradient sits as a
     softening veil so the headline + buttons stay legible. Center-
     anchored so the busiest part of the image lands behind the
     centered content. Tunable via the two rgba alphas below. */
  background-color: var(--sg-cream);
  background-image:
    linear-gradient(rgba(243, 240, 234, 0.40), rgba(243, 240, 234, 0.55)),
    url('/img/home-cta-bg.webp');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  /* Position the section as a relative ancestor in case we ever add
     overlays. */
  position: relative;
  /* ~30% off the sample's 180px vertical pad. */
  padding: 126px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-closing__inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.home-closing__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}
.home-closing__actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .home-closing { padding: 120px 24px; }
  .home-closing__h2 { font-size: 34px; }
}