/* ========================================================================== 
   hero.css — approved Home hero
   Original one-shot browser transformation, recolored black + gold.
   D49: depth/glow/shadow are allowed only inside this controlled Hero demo.
   ========================================================================== */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-24);
  overflow: hidden;
}

.hero__shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0 -8% auto auto;
  width: 48vw;
  height: 72vh;
  border-radius: var(--radius-xl);
  background-image: var(--gradient-glow);
  filter: blur(60px);
  opacity: .34;
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-16);
  align-items: center;
}

/* --fs-display-xl grows with the VIEWPORT (6.25vw). That was right when the
   hero was one column, but here the copy shares the row with the mock, so the
   column is far narrower than the screen: 433px at a 1280px viewport, while
   "WEBSITES" at that size wants ~540px. The word ran straight into the
   overflow:hidden on .hero__title-line — which exists for the slide-up reveal
   and cannot be removed — and got sliced.

   Sizing against the column instead of the screen makes the headline fit by
   construction at any width. The clamp keeps it inside the range design.md
   specifies for display-xl. */
.hero__copy {
  min-width: 0;
  container-type: inline-size;
}
.hero__copy .kicker { margin-bottom: var(--sp-6); }
.hero__title {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-display-xl);          /* fallback, no container queries */
  /* 15cqw, not 16: the binding word is "properly." at 9 characters, and at
     16cqw it cleared a 320px column by only 10px. */
  /* Floor is 2.5rem, not the 2.75rem design.md gives for display-xl. At
     2.75rem the headline cleared a 265px column by 10px — 4% — and that
     floor was written when the hero ran full width, before the mock took
     half the row. */
  font-size: clamp(2.5rem, 15cqw, 8rem);
}
.hero__title-line { display: block; overflow: hidden; }
.hero__title-word { display: block; }
.hero__lede { margin-bottom: var(--sp-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--hero-stage-min);
  perspective: var(--hero-perspective);
  perspective-origin: 50% 45%;
}

.hero__glow {
  position: absolute;
  width: 72%;
  height: 58%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hero-demo-gold) 18%, transparent);
  filter: blur(76px);
  opacity: .58;
  pointer-events: none;
}

.hero-demo {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 1.36 / 1;
  transform-style: preserve-3d;
}

.hero-demo__browser {
  position: absolute;
  inset: 6% 0 5% 3%;
  overflow: hidden;
  border: var(--border-w) solid var(--hero-browser-border);
  border-radius: var(--hero-browser-radius);
  background: linear-gradient(145deg, var(--hero-demo-bg-soft), var(--hero-demo-bg));
  box-shadow: var(--hero-browser-shadow), 0 0 0 1px color-mix(in srgb, var(--hero-demo-gold) 10%, transparent);
  transform: rotateY(-6deg) rotateX(3deg);
  transform-style: preserve-3d;
}

.hero-demo__chrome {
  position: relative;
  z-index: 20;
  height: var(--hero-browser-chrome-h);
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  padding-inline: var(--sp-4);
  border-bottom: var(--border-w) solid var(--hero-browser-border);
  background: var(--hero-browser-chrome);
}

.hero-demo__dots { display: flex; gap: var(--sp-2); }
.hero-demo__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hero-browser-dot); }
.hero-demo__dot:first-child { background: var(--hero-demo-gold-dark); }
.hero-demo__dot:nth-child(2) { background: var(--hero-demo-gold); }

.hero-demo__address {
  justify-self: center;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--hero-browser-muted);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
}

.hero-demo__menu { justify-self: end; display: flex; gap: var(--sp-1); }
.hero-demo__menu-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hero-browser-muted); }

/* The two fake sites live inside a frame whose width is fluid but whose
   ratio is fixed (~1.6:1). Sizing their type in rem made them agree with the
   frame at exactly one width and overflow everywhere else — at 320px, at
   640px and worst at 1024px, where eight elements spilled out the bottom.

   Making this a container lets everything inside be expressed in cqw, so the
   mock scales as one piece at any width. Each rule below declares a rem
   fallback first for browsers without container queries. */
.hero-demo__viewport {
  position: absolute;
  inset: var(--hero-browser-chrome-h) 0 0;
  overflow: hidden;
  background: var(--hero-demo-bg);
  container-type: inline-size;
  container-name: mock;
}


.hero-demo__premium {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-8);
  padding: 4cqw 5cqw;
  color: var(--hero-demo-title);
  background:
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--hero-demo-gold) 14%, transparent), transparent 30%),
    linear-gradient(150deg, var(--hero-demo-bg), var(--hero-demo-bg-soft) 57%, var(--hero-demo-bg));
  opacity: 0;
  transform: scale(.96);
  filter: blur(8px);
}

.hero-demo__premium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero-demo-gold) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-demo-gold) 5%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(90deg, transparent, #000 44%, #000);
}

.hero-demo__premium::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  right: -150px;
  top: -145px;
  border: var(--border-w) solid color-mix(in srgb, var(--hero-demo-gold) 24%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 70px color-mix(in srgb, var(--hero-demo-gold-dark) 10%, transparent), inset 0 0 70px color-mix(in srgb, var(--hero-demo-gold) 6%, transparent);
}

.hero-demo__premium-nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.hero-demo__client-name { color: var(--hero-demo-title); font-family: var(--font-mono); font-size: .75rem; font-size: 2.4cqw; font-weight: 600; letter-spacing: .18em; }
.hero-demo__client-name span { color: var(--hero-demo-gold); }
.hero-demo__links { display: flex; gap: var(--sp-4); gap: 3cqw; color: var(--hero-demo-muted); font-family: var(--font-mono); font-size: .5rem; font-size: 1.8cqw; letter-spacing: .08em; text-transform: uppercase; }

.hero-demo__premium-copy { position: relative; z-index: 4; width: 62%; padding-top: var(--sp-12); padding-top: 3cqw; }
.hero-demo__eyebrow { margin-bottom: var(--sp-4); margin-bottom: 1.5cqw; color: var(--hero-demo-gold-dark); font-family: var(--font-mono); font-size: .5rem; font-size: 1.8cqw; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* line-height was .93 — below 1, so lines physically overlapped once the
   type got small. Never go under 1 here.
   The measure is wide on purpose: at a narrower max-width this headline
   wrapped to four lines and the block stopped fitting the frame. */
.hero-demo__premium-title { max-width: 16ch; margin: 0; color: var(--hero-demo-title); font-family: var(--hero-demo-serif); font-size: 2rem; font-size: 5.5cqw; font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.hero-demo__premium-title em { color: var(--hero-demo-gold-lift); font-weight: 500; }
.hero-demo__premium-copy p { max-width: 36ch; margin-top: var(--sp-4); margin-top: 2.5cqw; color: var(--hero-demo-body); font-size: .625rem; font-size: 2.2cqw; line-height: 1.6; }
.hero-demo__premium-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); gap: 1.5cqw; margin-top: var(--sp-4); margin-top: 3cqw; }
.hero-demo__mini-button { padding: var(--sp-2) var(--sp-3); padding: 1.5cqw 2.5cqw; border: var(--border-w) solid var(--hero-demo-border); border-radius: var(--radius-pill); color: var(--hero-demo-title); font-size: .5rem; font-size: 1.8cqw; font-weight: 700; }
.hero-demo__mini-button--gold { border-color: transparent; color: var(--hero-demo-bg); background: linear-gradient(100deg, var(--hero-demo-gold-dark), var(--hero-demo-gold-lift)); }

.hero-demo__planet {
  position: absolute;
  z-index: 2;
  top: 17%;
  right: 7%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--hero-demo-title) 96%, transparent) 0 1%, color-mix(in srgb, var(--hero-demo-gold-lift) 30%, transparent) 2%, transparent 7%),
    radial-gradient(circle at 42% 36%, var(--hero-demo-gold-lift) 0, var(--hero-demo-gold) 27%, var(--hero-demo-gold-deep) 58%, var(--hero-demo-bg) 78%);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--hero-demo-gold) 34%, transparent),
    0 0 75px color-mix(in srgb, var(--hero-demo-gold-dark) 22%, transparent),
    inset -28px -26px 50px color-mix(in srgb, var(--hero-demo-bg) 62%, transparent);
}
.hero-demo__planet::before {
  content: '';
  position: absolute;
  inset: -9%;
  border: var(--border-w) solid color-mix(in srgb, var(--hero-demo-gold-lift) 64%, transparent);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(.28);
  box-shadow: 0 0 16px color-mix(in srgb, var(--hero-demo-gold) 24%, transparent);
}
.hero-demo__planet::after {
  content: '';
  position: absolute;
  inset: -2%;
  border: var(--border-w) solid color-mix(in srgb, var(--hero-demo-gold-dark) 44%, transparent);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(.38);
}

.hero-demo__metric {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 5cqw;
  width: 22cqw;
  padding: 2.5cqw;
  border: var(--border-w) solid var(--hero-demo-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--hero-demo-bg-soft) 82%, transparent);
}
.hero-demo__metric small { display: block; color: var(--hero-demo-muted); font-family: var(--font-mono); font-size: .4375rem; font-size: 1.5cqw; letter-spacing: .12em; text-transform: uppercase; }
.hero-demo__metric strong { display: block; margin-top: var(--sp-2); margin-top: 1.5cqw; color: var(--hero-demo-gold); font-size: .875rem; font-size: 3cqw; }

.hero-demo__chart-card {
  position: absolute;
  z-index: 5;
  right: 5cqw;
  bottom: 5cqw;
  width: 44%;
  padding: 2.5cqw;
  border: var(--border-w) solid var(--hero-demo-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-demo-bg-soft) 78%, transparent), color-mix(in srgb, var(--hero-demo-bg) 82%, transparent));
}
.hero-demo__chart-label { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--hero-demo-muted); font-family: var(--font-mono); font-size: .4375rem; font-size: 1.5cqw; letter-spacing: .1em; text-transform: uppercase; }
.hero-demo__chart { height: 42px; height: 9cqw; margin-top: var(--sp-2); margin-top: 1.5cqw; color: var(--hero-demo-gold); }
.hero-demo__chart svg { width: 100%; height: 100%; }

.hero-demo__strip { position: absolute; z-index: 5; left: 5cqw; bottom: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); width: 36%; }
.hero-demo__strip-card { min-height: 44px; min-height: 9cqw; padding: var(--sp-2); padding: 1.5cqw; border: var(--border-w) solid color-mix(in srgb, var(--hero-demo-gold) 10%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--hero-demo-gold) 2%, transparent); }
.hero-demo__strip-card i { display: block; width: 42%; height: 4px; border-radius: var(--radius-pill); background: var(--hero-demo-gold); }
.hero-demo__strip-card::after { content: ''; display: block; width: 70%; height: 3px; margin-top: var(--sp-2); background: color-mix(in srgb, var(--hero-demo-gold-deep) 55%, transparent); box-shadow: 0 8px 0 color-mix(in srgb, var(--hero-demo-gold-deep) 42%, transparent); }


.hero-demo__tagline {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 6;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-demo__tagline strong { display: block; margin-top: var(--sp-2); color: var(--text-title); font-family: var(--font-body); font-size: .875rem; letter-spacing: .16em; }

/* One-shot animation. No hover or pointer handlers. */
.hero--play .hero__copy .kicker { animation: hero-copy-in var(--dur-reveal) var(--hero-ease) .1s both; }
.hero--play .hero__title-line:nth-child(1) .hero__title-word { animation: hero-title-in 700ms var(--hero-ease) .35s both; }
.hero--play .hero__title-line:nth-child(2) .hero__title-word { animation: hero-title-in 700ms var(--hero-ease) .52s both; }
.hero--play .hero__title-line:nth-child(3) .hero__title-word { animation: hero-title-in 700ms var(--hero-ease) .69s both; }
.hero--play .hero__lede { animation: hero-copy-in 620ms var(--hero-ease) .9s both; }
.hero--play .hero__actions { animation: hero-copy-in 620ms var(--hero-ease) 1.05s both; }

.hero--play .hero__copy .kicker,
.hero--play .hero__lede,
.hero--play .hero__actions { opacity: 0; transform: translateY(var(--sp-4)); }
.hero--play .hero__title-word { opacity: 0; transform: translateY(110%); }

/* Retimed after the "before" site was removed. It used to play from 2.25s
   and the premium only arrived at 2.4s — that wait existed solely to let the
   old site exit. With nothing to replace, the content now builds while the
   browser is still settling into place. */
.hero-demo--play .hero-demo__browser { animation: hero-browser-arrive var(--hero-dur-arrive) var(--hero-ease) both; }
.hero-demo--play .hero-demo__premium { animation: hero-premium-in var(--hero-dur-build) var(--hero-ease) .75s forwards; }
.hero-demo--play .hero-demo__planet { animation: hero-planet-settle 1050ms var(--hero-ease) .95s both; }

@keyframes hero-copy-in { to { opacity: 1; transform: none; } }
@keyframes hero-title-in { to { opacity: 1; transform: none; } }
@keyframes hero-browser-arrive {
  0% { opacity: 0; transform: translateZ(-680px) translateX(150px) rotateY(-34deg) rotateX(17deg) rotateZ(-6deg) scale(.52); }
  42% { opacity: 1; }
  78% { transform: translateZ(28px) translateX(-6px) rotateY(-8deg) rotateX(4deg) scale(1.02); }
  100% { opacity: 1; transform: translateZ(0) rotateY(-6deg) rotateX(3deg) scale(1); }
}
@keyframes hero-premium-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes hero-planet-settle { 0% { transform: scale(.88) rotate(-5deg); opacity: .25; } 100% { transform: none; opacity: 1; } }

@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--header-h) + var(--sp-24)); padding-bottom: var(--sp-24); }
  .hero__layout { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-12); }
  .hero__copy { max-width: 620px; }
}

@media (max-width: 1199px) and (min-width: 1024px) {
  .hero__layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--sp-8); }
  /* No font-size override here any more. It sized against the viewport (6vw)
     and fought the container-based rule, landing on 62px in a 376px column —
     4% of clearance where every other width has 13%. */
  .hero__stage { min-height: 500px; }
}

@media (max-width: 1023px) {
  .hero__copy { text-align: center; }
  .hero__copy .kicker, .hero__actions { justify-content: center; }
  .hero__lede { margin-inline: auto; }
  .hero__stage { min-height: 480px; }
  .hero__shape { width: 90vw; height: 52vh; right: -30%; }
}

/* --- Phone -----------------------------------------------------------------
   The browser mock is a fixed 1.36:1 frame, so on a phone the inner viewport
   is only ~175px tall. The fake sites inside it are laid out for a wide frame
   and needed ~360px — twice the room. The overflow spilled out the bottom and
   the lines collided.

   Two separate faults were doing that:

   1. line-height below font-size. The premium title carries line-height .93,
      which is deliberate display tightness at 3.4rem but collapses at 1.8rem:
      28.8px of type on 26.8px of line. Successive lines physically overlap.
      Anything under 1 needs a floor once the type gets small.

   2. Spacing and type that never scaled down. sp-16 of padding and a 2rem
      heading are fine in a 500px frame and impossible in a 175px one.

   The fix keeps both fake sites recognisable — nav, eyebrow, headline — and
   drops the parts that were illegible anyway. Body copy at 10px inside a mock
   scaled to .88 is texture, not information.
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .hero { padding-top: calc(var(--header-h) + var(--sp-12)); }
  .hero__layout { gap: var(--sp-8); }
  .hero__stage { min-height: 380px; }
  .hero-demo { width: 112%; transform: scale(.88); }
  .hero-demo__links { display: none; }

  /* Sizes now come from cqw, so nothing needs re-tuning here. What does need
     handling: at a 259px frame the smaller text lands around 5px, which is
     mush rather than texture. Those elements come out; the nav, the eyebrow
     and the headline carry the idea on their own. */

  .hero-demo__premium-copy { width: 66%; }
  .hero-demo__premium-copy p,
  .hero-demo__premium-actions { display: none; }

  .hero-demo__planet { width: 31%; right: 5%; top: 20%; }
  .hero-demo__metric { right: var(--sp-4); }
  .hero-demo__chart-card { width: 45%; right: var(--sp-4); bottom: var(--sp-4); }
  .hero-demo__strip { left: var(--sp-4); bottom: var(--sp-4); width: 38%; }
  .hero-demo__tagline { font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--play .hero__copy .kicker,
  .hero--play .hero__lede,
  .hero--play .hero__actions,
  .hero--play .hero__title-word,
  .hero-demo--play .hero-demo__browser,
  .hero-demo--play .hero-demo__premium,
  .hero-demo--play .hero-demo__planet {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
  /* The premium panel starts at opacity 0 in its base rule, waiting for the
     animation. With motion off there is no animation to arrive, so it has to
     be reset here or the mock renders empty. */
  .hero-demo__premium { opacity: 1; transform: none; filter: none; }
}