body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: 'Inter', sans-serif;
  background: radial-gradient(ellipse at 22% 42%, #18213e 0, transparent 65%), #0a0a14;
}
body > main { display: flex; flex-direction: column; flex: 1; padding-top: 88px; }
body > .site-footer { flex-shrink: 0; }
.macos-hero {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1600px;
  min-height: min(900px, calc(100svh - 88px));
  margin: 0 auto;
  padding: 64px 32px;
}
.macos-preview { position: relative; margin: 0; isolation: isolate; }
.macos-preview::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  bottom: -34px;
  height: 24px;
  border-radius: 50%;
  background: #02030b;
  filter: blur(14px);
  opacity: .8;
  animation: macos-float-shadow 6s ease-in-out infinite;
}
.macos-preview > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .5));
  animation: macos-float 6s ease-in-out infinite;
}
@keyframes macos-float {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(-6px); }
}
@keyframes macos-float-shadow {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50% { transform: scaleX(.92); opacity: .6; }
}
.macos-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -.035em;
}
.macos-features {
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 32px 0 36px;
  list-style: none;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.4;
}
.macos-features li { display: flex; align-items: center; gap: 14px; }
.macos-features li > :first-child { width: 28px; height: 28px; flex: none; }
.macos-copy .hero-macos-cta { min-height: 52px; padding: 14px 24px; gap: 10px; }
.macos-copy .hero-macos-cta span { font-size: 1rem; }
.macos-copy .hero-macos-cta svg { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .macos-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; max-width: 760px; gap: 56px; padding: 48px 24px 64px; }
  .macos-copy { max-width: 520px; }
  .macos-copy h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
}
@media (max-width: 640px) {
  body > main { padding-top: 80px; }
  .macos-hero { gap: 44px; padding: 28px 20px 48px; }
  .macos-features { margin: 28px 0 32px; gap: 20px; }
  .macos-copy .hero-macos-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .macos-preview > img, .macos-preview::after { animation: none; }
}