/* Homepage composition follows reference/homepage; cards and controls use shared recipes. */
.home-main, .home-main * { box-sizing: border-box; }
.home-main a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.home-main {
  display: flow-root;
  max-width: 1228px;
  padding: 0 var(--space-24) var(--space-48);
  margin: auto;
  font-size: var(--font-size-14);
  line-height: var(--leading-table);
}
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 440px;
  margin: var(--space-24) 0 var(--space-36);
  border-radius: var(--radius-11);
  overflow: hidden;
  background: var(--color-navy);
}
.hero-copy { position: relative; z-index: 2; min-width: 0; padding: var(--space-46) var(--space-44); max-width: 550px; color: var(--color-white); }
.hero-copy .section-label { margin-bottom: var(--space-24); display: block; color: var(--color-white); opacity: .85; }
.home-hero h1 { font-size: var(--font-size-40); font-weight: var(--weight-bold); line-height: var(--leading-hero); letter-spacing: var(--tracking-title); color: var(--color-white); margin: 0 0 var(--space-18); }
.hero-description { margin: 0; max-width: 320px; color: var(--color-hero-description); font-size: var(--font-size-14); line-height: var(--leading-prose); }
.hero-actions { margin-top: var(--space-28); display: flex; align-items: center; gap: var(--space-22); flex-wrap: wrap; }
.hero-actions .ui-button--secondary { display: inline-flex; align-items: center; gap: var(--space-26); text-decoration: none; }
.hero-actions .ui-button--link { color: var(--color-white); }
.hero-photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-photo:after { content: ""; position: absolute; inset: 0; background: var(--gradient-hero); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; display: block; }
.hero-photo figcaption { position: absolute; right: 18px; bottom: 18px; z-index: 1; font-size: var(--font-size-11); line-height: var(--leading-table); padding: var(--space-5) var(--space-9); border-radius: var(--radius-5); background: var(--color-hero-caption); color: var(--color-navy); }
.home-launches { scroll-margin-top: 24px; }
.home-section-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); margin-bottom: var(--space-20); }
.home-section-top h2 { font-size: var(--font-size-24); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-bold); color: var(--color-navy); margin: 0; }
.home-section-top .ui-button--link { white-space: nowrap; }
@media (max-width: 900px) {
  .hero-copy { padding: var(--space-36); }
}
@media (max-width: 720px) {
  .home-main { padding: 0 var(--space-16) var(--space-32); }
  .home-hero { min-height: 420px; margin: var(--space-20) 0 var(--space-28); align-items: flex-end; }
  .hero-copy { padding: var(--space-28) var(--space-22) var(--space-50); }
  .hero-copy .section-label { font-size: var(--font-size-10); margin-bottom: var(--space-18); }
  .hero-description { max-width: 320px; font-size: var(--font-size-13); }
  .home-hero h1 { font-size: var(--font-size-32); max-width: 340px; margin-bottom: var(--space-14); }
  .hero-actions { margin-top: var(--space-22); gap: var(--space-12); }
  .hero-photo img { object-position: 38% center; }
  .hero-photo:after { background: var(--gradient-hero-mobile); }
  .hero-photo figcaption { bottom: 12px; right: 12px; font-size: var(--font-size-10); }
  .home-section-top h2 { font-size: var(--font-size-22); }
  .home-section-top { gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-18); }
}