body.public-site:has(.landing-hero) { background: #000; }
.landing-hero { display: grid; width: min(1024px, 100%); height: calc(100svh - 64px); min-height: 600px; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(48px, 8vw, 110px); margin: 0 auto; padding: 0; overflow: hidden; }
.landing-hero__scene { position: relative; width: min(420px, 100%); aspect-ratio: 494 / 610; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; isolation: isolate; overflow: hidden; }
.landing-hero__scene::after { position: absolute; z-index: 2; inset: auto 1px 0; height: 22%; background: linear-gradient(transparent, #000 85%); content: ""; pointer-events: none; }
.landing-phone { height: 115%; padding: 10% 4.3% 0; border: 1px solid #bcbcbc; border-radius: 19% 19% 0 0 / 13.5% 13.5% 0 0; background: radial-gradient(ellipse at 50% 65%, #262626, #101010 65%, #000); }
.landing-phone__status { display: flex; justify-content: space-between; align-items: center; margin: 0 11% 14%; color: #fff; font-size: clamp(15px, 4vw, 21px); font-weight: 700; line-height: 1; }
.landing-phone__battery { position: relative; width: 26px; height: 16px; border: 2px solid #fff; border-radius: 3px; }
.landing-phone__battery::before { position: absolute; inset: 2px; background: #fff; content: ""; }
.landing-phone__battery::after { position: absolute; top: 3px; right: -5px; width: 2px; height: 6px; border-radius: 1px; background: #fff; content: ""; }
.landing-phone__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.landing-phone__widget { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; overflow: hidden; border-radius: 21%; }
.landing-phone__widget img { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-phone__landscape { width: 100%; height: 100%; background: radial-gradient(circle at 70% 32%, #ffd9a4 0 10%, transparent 11%), linear-gradient(155deg, transparent 55%, #3a5656 56% 68%, #243c41 69%), linear-gradient(#677d9c, #d6a19d 65%, #596877); }
.landing-phone__app { aspect-ratio: 1; border-radius: 24%; background: #d9d9d9; }
.landing-hero__copy { position: relative; z-index: 3; display: flex; grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; }
.landing-hero h1 { max-width: 520px; margin: 0; color: #fff; font-size: clamp(34px, 4vw, 50px); font-weight: 700; line-height: 1.35; letter-spacing: -.035em; }
.landing-hero__store-badges { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.landing-hero__store-badge { display: inline-flex; height: 48px; flex: 0 0 auto; align-items: center; justify-content: center; }
.landing-hero__store-art { display: block; width: auto; height: 48px; }
.landing-section-label { margin: 0 0 18px; color: #999; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
#talents, #how-title { scroll-margin-top: 90px; }
@media (max-width: 820px) {
  .landing-hero { display: grid; width: 100%; height: calc(100svh - 64px); min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 0; text-align: center; }
  .landing-hero__scene { width: min(494px, 100%); grid-column: 1; grid-row: 2; align-self: end; justify-self: center; }
  .landing-hero__copy { grid-column: 1; grid-row: 1; align-items: center; justify-content: center; margin: 0; }
  .landing-hero h1 { font-size: clamp(15px, 4.3vw, 18px); font-weight: 500; line-height: 1.4; white-space: nowrap; }
  .landing-hero__store-badges { justify-content: center; gap: 8px; margin-top: 16px; }
  .landing-hero__store-badge,
  .landing-hero__store-art { height: 40px; }
}
@media (max-width: 520px) {
  .landing-phone__grid { gap: 5vw; }
}