.landing { position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(180deg, #e3eefc 0%, #e8f0fa 48%, #fbf8f2 100%); }
.hero { text-align: center; }
.hero-copy { position: relative; z-index: 3; padding: 47px 24px 0; }
.hero h1 { margin: 0; font-size: clamp(49px, 5.18vw, 74.2px); font-weight: 750; letter-spacing: -6.4px; line-height: .99; }
.intro { margin: 27px auto 0; max-width: 690px; color: var(--muted); font-size: 21px; line-height: 1.54; letter-spacing: -.4px; }
.download { display: inline-flex; align-items: center; gap: 13px; margin-top: 27px; padding: 17px 25px; background: #202228; color: #fff; border-radius: 99px; font-size: 17px; font-weight: 500; box-shadow: 0 2px 3px #18213509; transition: transform .2s, background .2s; }
.download:hover { transform: translateY(-2px); background: #34383e; color: #fff; }
.download .arrow { margin-left: 2px; }
.compatibility { font-size: 12px; color: #7b8085; margin: 13px 0 0; letter-spacing: .1px; }
.product-visual { position: relative; margin: -3px auto 0; height: 715px; width: 100%; overflow: hidden; z-index: 2; }
.hero-devices { position: relative; width: 630px; max-width: 92vw; aspect-ratio: 1176/1337; margin: 22px auto 0; filter: drop-shadow(13px 23px 17px #34465a1a); }
.hero-devices img { display: block; position: absolute; height: auto; }
.hero-phone { left: 3%; top: 0; width: 56%; }
.hero-watch { left: 48%; top: 44%; width: 46%; z-index: 1; }
.fade { position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; background: linear-gradient(transparent, var(--paper) 93%); pointer-events: none; }
.landing .footer { background: #fbf8f2; }

@media (min-width: 1550px) {
  .hero-copy { padding-top: 53px; }
  .hero h1 { font-size: 77px; }
  .product-visual { height: 775px; }
  .hero-devices { width: 680px; }
}

@media (max-width: 900px) {
  .hero-copy { padding-top: 45px; }
  .hero h1 { font-size: 60.2px; letter-spacing: -5px; }
  .intro { font-size: 19px; }
  .product-visual { height: 650px; }
  .hero-devices { width: 565px; }
}

@media (max-width: 600px) {
  .hero-copy { padding: 43px 24px 0; }
  .hero h1 { font-size: 47.6px; line-height: 1.01; letter-spacing: -4.5px; }
  .intro { font-size: 17px; letter-spacing: -.25px; line-height: 1.5; max-width: 370px; margin-top: 23px; }
  .desktop-break { display: none; }
  .download { font-size: 16px; margin-top: 24px; padding: 16px 24px; }
  .compatibility { font-size: 11px; margin-top: 12px; }
  .product-visual { height: 495px; margin-top: 7px; }
  .hero-devices { width: 410px; margin-top: 16px; }
  .fade { height: 100px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 42.7px; }
  .intro { font-size: 16px; }
  .hero-devices { width: 365px; }
  .product-visual { height: 450px; }
}