/* Better One — opening statement + priorities band */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: 100svh;
  padding: calc(var(--nav-h) + .25rem) var(--gutter) 1.1rem;
  /* shown only if WebGL is unavailable */
  background:
    linear-gradient(118deg, transparent 0 28%, rgba(255, 75, 31, .55) 42%, transparent 56%),
    linear-gradient(118deg, transparent 0 56%, rgba(255, 120, 70, .32) 70%, transparent 84%),
    linear-gradient(160deg, #2a0906, #7a1a0c 45%, #1a0604);
}
.hero__silk { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 10, 9, .5) 0, rgba(11, 10, 9, .04) 20%, rgba(11, 10, 9, 0) 44%, rgba(11, 10, 9, .78) 78%, rgba(11, 10, 9, .94) 100%);
}

.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.hero__tools { display: flex; align-items: center; gap: 1rem; }
.hero__frame { font: 500 .62rem/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(237, 230, 215, .78); }
.soon { display: inline-flex; align-items: center; gap: .7em; padding: .6em .85em; font: 500 .66rem/1 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(237, 230, 215, .45); }
.soon__dot { width: .55em; height: .55em; border-radius: 50%; background: var(--bone); animation: soon 2.4s var(--ease-io) infinite; }
@keyframes soon { 50% { opacity: .2; } }

/* stage: BETTER / (headline + One) / (lede + CTAs) */
.hero__stage {
  margin-top: auto; display: grid; align-items: end; column-gap: var(--gutter);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "better better" "lead one" "side side";
}
.hero__better {
  grid-area: better; overflow: hidden; padding-block: .04em; margin-block: -.04em; user-select: none;
  font: 900 21vw/.76 var(--f-wide); font-stretch: 125%; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap;
}
.hero__better .fit { display: inline-block; padding-right: .045em; }
.hero__better b { --i: 0; display: inline-block; font-weight: inherit; }
.hero__one {
  grid-area: one; margin-top: .13em; text-align: right; user-select: none; padding-right: .03em;
  font: italic 400 25.5vw/.7 var(--f-serif); letter-spacing: -.035em;
}
.hero__one span { display: inline-block; }
.hero__lead { grid-area: lead; padding-bottom: clamp(.6rem, 1.6vw, 1.6rem); }
.hero__lead h1 { margin-top: 1.1rem; max-width: 12.5ch; font: 400 clamp(2.5rem, 4.5vw, 4.9rem)/.98 var(--f-serif); letter-spacing: -.022em; text-wrap: balance; }
.hero__side { grid-area: side; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding-top: clamp(1rem, 2vw, 1.75rem); }
.hero__side .lede { max-width: 38ch; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem;
  margin-top: clamp(1rem, 2vw, 1.6rem); padding-top: .85rem; border-top: 1px solid rgba(237, 230, 215, .24);
  font: 500 .62rem/1.3 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(237, 230, 215, .8);
}

/* intro */
.js .hero__silk { opacity: 0; transform: scale(1.08); transition: opacity 1.8s var(--ease), transform 2.6s var(--ease); }
.js .hero__better b { transform: translateY(108%); transition: transform 1.25s var(--ease) calc(var(--i) * 65ms + .15s); }
.hero__better b:nth-child(2) { --i: 1; } .hero__better b:nth-child(3) { --i: 2; } .hero__better b:nth-child(4) { --i: 3; }
.hero__better b:nth-child(5) { --i: 4; } .hero__better b:nth-child(6) { --i: 5; }
.js .hero__one span { opacity: 0; transform: translateY(22%); transition: opacity 1.2s var(--ease) .6s, transform 1.4s var(--ease) .6s; }
.js .hero__top, .js .hero__lead, .js .hero__side, .js .hero__meta { opacity: 0; transform: translateY(1.2rem); transition: opacity 1s var(--ease) var(--d), transform 1s var(--ease) var(--d); }
.hero__top { --d: .3s; } .hero__lead { --d: .85s; } .hero__side { --d: 1s; } .hero__meta { --d: 1.15s; }
.js.is-ready .hero__silk, .js.is-ready .hero__one span,
.js.is-ready .hero__top, .js.is-ready .hero__lead, .js.is-ready .hero__side, .js.is-ready .hero__meta { opacity: 1; transform: none; }
.js.is-ready .hero__better b { transform: none; }

@media (max-width: 900px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "better" "one" "lead" "side"; }
  .hero__one { font-size: 38vw; line-height: .66; margin-top: .13em; }
  .hero__lead { padding: 1.4rem 0 0; }
  .hero__lead h1 { max-width: 14ch; font-size: clamp(2.3rem, 9.6vw, 3.6rem); }
  .hero__side { flex-direction: column; align-items: stretch; }
  .cta .btn { flex: 1 1 auto; }
  .hero__frame { display: none; }
  .hero__meta { justify-content: flex-start; }
}

/* ---------- band ---------- */
.band { overflow: hidden; padding-block: clamp(.9rem, 1.7vw, 1.5rem); }
.band__track { display: flex; width: max-content; animation: band 38s linear infinite; }
.band:hover .band__track { animation-play-state: paused; }
.band__set {
  display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); padding-right: clamp(1.1rem, 2.4vw, 2.4rem);
  font: 900 clamp(1.5rem, 3.3vw, 3.1rem)/1 var(--f-wide); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap;
}
.band__set .s { font: italic 400 clamp(2rem, 4.4vw, 4.1rem)/.8 var(--f-serif); letter-spacing: -.02em; text-transform: none; }
.band__set i { flex: none; width: .42em; height: .42em; background: var(--accent); }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band__track { animation: none; } }