.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
}

.site-header__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-block: clamp(14px, 2vw, 20px);
  padding-inline: clamp(20px, 7vw, 100px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav: links collapse into a dropdown opened by the hamburger */
@media (max-width: 680px) {
  .nav-toggle {
    display: flex;
  }

  /* A small floating card under the hamburger button, not a full-width
     bar - so it never reaches over toward the logo on the other side. */
  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: clamp(20px, 5vw, 40px);
    left: auto;
    min-width: 170px;
    flex-direction: column;
    gap: 2px;
    background: var(--color-text-light);
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(72, 64, 64, 0.16);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav .nav-link {
    width: 100%;
    padding: 12px 16px;
    border-radius: 9px;
    text-align: left;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus-visible {
    background: rgba(168, 82, 122, 0.08);
  }
}

.hero {
  position: relative;
  background: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(60px, 9vw, 120px) clamp(70px, 11.7vw, 150px);
  overflow: hidden;
}

/* Soft background circles + two sparkle stars, floating free behind the
   content - matches the simplified Figma reference (plain washes of
   color, not icon cushions).

   Constrained to the same centered, 1280px-max box as .hero__decor
   below (not the full, unbounded .hero width): the Figma reference was
   captured on a fixed 1280px frame, so every child percentage here is
   only correct relative to that same fixed width. Spanning the full
   .hero width instead let left/top drift away from the dot-trail/
   button/illustration on wide viewports (where .hero itself keeps
   growing past 1280px) and crowd into the text column just above the
   1240px breakpoint (where .hero is only a little wider than 1280px) -
   this keeps the circles/stars pinned to the exact same 1280px frame
   the rest of the hero's decoration already uses.

   z-index: 0 (vs. .hero__content's 1 and .hero__decor's 2) - explicit,
   not left to default stacking order, so the circles always stay
   behind the headline/body text/button no matter how the browser would
   otherwise resolve a flex-item vs. position:absolute paint order. */
.hero__doodles {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-width);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  display: none;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Positions/sizes lifted straight from the Figma reference (percentages
   of the 1280x641 hero frame), recolored to our own existing palette
   tints instead of Figma's literal neutral grays. */
.hero__blob--a { left: 9.69%; top: 4.52%; width: clamp(140px, 26.56%, 340px); background: #e8f3f2; }
/* True-centered on both axes (left/top mark its CENTER, not top-left
   corner) on the dot-trail's anchor ring - so shrinking it (below)
   pulls every edge in symmetrically around that fixed point instead of
   just the far edges, which is what actually opens up a gap to the
   button above. */
.hero__blob--b { left: 50%; top: 84.3%; width: clamp(36px, 6%, 76px); background: #e8eef5; transform: translate(-50%, -50%); }
.hero__blob--c { left: 81.02%; top: 39.63%; width: clamp(74px, 11.25%, 144px); background: #f5eaef; }

/* Two sparkle stars, sized and placed right by her head - not scattered
   loosely across the whole hero. */
.hero__star {
  position: absolute;
  aspect-ratio: 1;
}

.hero__star--a { left: 84%; top: 62%; width: clamp(18px, 2.73%, 35px); color: #a8527a; }
.hero__star--b { left: 88%; top: 61%; width: clamp(11px, 1.56%, 20px); color: #83405f; }

/* Only once the hero is wide enough that these sit clear of the centered
   content column (1046px) with real margin either side. */
@media (min-width: 1240px) {
  .hero__doodles {
    display: block;
  }
}

/* ~10pt more saturated than the literal Copilot Chat mauve - still
   unmistakably the same hue, just with a bit more pop as a CTA. The
   project pages themselves keep the exact, unboosted theme color. */
.hero .btn--primary {
  --color-accent: #b54679;
  --color-accent-dark: #8d375e;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  width: 100%;
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.34vw, 30px);
  width: 100%;
}

.hero__headline .text-title {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  gap: 10px;
}

/*
 * Decorative footer: timeline line + dots + illustration.
 * This whole composition is ONE unit: every piece is positioned/sized as a
 * percentage of .hero__decor itself (which has a fixed aspect-ratio), so
 * when the box scales with the viewport, size AND position scale together
 * and the pieces never drift apart from each other.
 */
.hero__decor {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  aspect-ratio: 1280 / 230;
  pointer-events: none;
}

/* Plain CSS hairline instead of a scaled SVG stroke: an SVG line this thin
   (1 unit tall) renders at a sub-pixel height once scaled down, which makes
   it flicker between weights as the page resizes. A CSS height is always a
   crisp, exact pixel, so it now matches the illustration's line exactly. */
.hero__line {
  position: absolute;
  left: 7.03%;
  right: 7.03%;
  bottom: 41.74%;
  height: 1px;
  background: #171717;
}

.hero__dots {
  position: absolute;
  inset: 0;
}

.hero__dots img {
  position: absolute;
  bottom: 41.74%;
  transform: translateY(50%);
  display: block;
  width: clamp(6px, 0.781%, 10px);
  height: auto;
}

/* Dots 1-6 stay anchored to the left edge, same fixed spacing as the Figma
   frame (re-based so the row sits with equal 7.03% margins on both sides -
   see note below). Only the last/biggest dot is pinned under the button
   (50%), so the one gap that flexes as the viewport resizes is the one
   right before it. */
.hero__dots img:nth-child(1) { left: 7.03%; }
.hero__dots img:nth-child(2) { left: 10.00%; }
.hero__dots img:nth-child(3) { left: 12.97%; }
.hero__dots img:nth-child(4) { left: 15.94%; }
.hero__dots img:nth-child(5) { left: 18.91%; }
.hero__dots img:nth-child(6) { left: 21.88%; width: clamp(10px, 1.25%, 16px); }
.hero__dots img:nth-child(7) { left: 49.38%; width: clamp(10px, 1.25%, 16px); }

/* Dots sit still now - the only motion in the hero is the button's own
   light pulse (below), so the trail reads as a calm, static path. */

/* Mobile: the 6-tiny-dots trail doesn't read well at small sizes - simplify
   to 3 bigger, clearly-visible dots on the left, plus the anchor dot. */
@media (max-width: 680px) {
  .hero__dots img:nth-child(2),
  .hero__dots img:nth-child(3),
  .hero__dots img:nth-child(5) {
    display: none;
  }

  .hero__dots img:nth-child(1),
  .hero__dots img:nth-child(4),
  .hero__dots img:nth-child(6) {
    width: 12px;
  }
}

/* A light, slow breathing pulse on the CTA itself - the one piece of
   motion left in the hero now that the dot trail sits still. */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 70, 121, 0.35); }
  50% { box-shadow: 0 0 0 9px rgba(181, 70, 121, 0); }
}

.hero .btn--primary {
  animation: btn-pulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero .btn--primary {
    animation: none !important;
  }
}

.hero__illustration {
  position: absolute;
  left: 67.42%;
  bottom: 39.24%;
  width: clamp(100px, 21.80%, 279px);
  height: auto;
}

/* Mobile: a genuinely mobile-sized layout, not a shrunk desktop one -
   bigger wrapping headline, and the illustration recentered as a bigger
   "signature" visual below the button. No line/dots on mobile - just the
   illustration on its own reads cleaner at this size. */
@media (max-width: 680px) {
  .text-greeting {
    font-size: 20px;
  }

  .hero__headline .text-title {
    display: block;
    text-align: center;
    white-space: normal;
    font-size: 42px;
    line-height: 1.05;
  }

  .text-title span {
    display: inline;
    white-space: normal;
  }

  .text-title span:first-child {
    margin-inline-end: 0.2em;
  }

  .hero__line,
  .hero__dots {
    display: none;
  }

  .hero__decor {
    aspect-ratio: auto;
    height: 160px;
  }

  .hero__illustration {
    left: 50%;
    bottom: 10px;
    width: 220px;
    transform: translateX(-50%);
  }

  .hero {
    /* Taller mobile hero - more breathing room above the greeting and
       below the illustration, giving the doodles below real room to
       sit without crowding the bottom edge. */
    padding-top: 90px;
    padding-bottom: 190px;
  }

  /* Fixed pixel insets (not percentages): the desktop layout's left/top
     percentages assume the wide 1280px frame - on a phone those same
     percentages would land the circles on top of the text. Mobile keeps
     the motif but re-anchored to the hero's own edges (top for the
     headline circle, bottom for the illustration circle + stars, which
     track the illustration's own bottom:10px anchor) so the clearance
     stays fixed no matter how tall the content renders. */
  .hero__doodles {
    display: block;
  }

  .hero__blob--a {
    left: -36px;
    top: -18px;
    width: 170px;
  }

  .hero__blob--b {
    display: none;
  }

  .hero__blob--c {
    left: auto;
    top: auto;
    right: 20px;
    bottom: 14px;
    width: 120px;
  }

  .hero__star--a {
    left: auto;
    top: auto;
    right: 58px;
    bottom: 108px;
    width: 22px;
  }

  .hero__star--b {
    left: auto;
    top: auto;
    right: 40px;
    bottom: 128px;
    width: 14px;
  }
}