/* Layout rules scoped to this page; the generated utility sheet stays intact. */
body { font-family: var(--font-geist-sans), Arial, sans-serif; }
#main-content { position: relative; }
.dark .bg-black { background-color: #fff !important; }
.dark .hero > .bg-gradient-to-b { background-image: linear-gradient(to bottom, transparent, transparent, rgba(10, 10, 10, .8)); }

.site-nav { background: rgba(255, 255, 255, .96); }
.nav-row { min-height: 80px; height: auto; gap: 16px; }
.desktop-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-menu-btn { display: none; }
#theme-toggle, #action-menu, .mobile-menu-btn { width: 44px; height: 44px; flex-shrink: 0; }
.site-nav a:focus-visible, button:focus-visible, .btn-group > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 112px 88px;
}
.hero-content {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  translate: none;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.hero-content > *, .hero-copy > *, .stats-group > * { min-width: 0; }
.hero-copy { width: 100%; max-width: 600px; justify-self: center; }
.hero-copy .text-5xl { font-size: clamp(2rem, 8vw, 3rem); }
.hero-copy p { overflow-wrap: anywhere; }
.btn-group { flex-wrap: wrap; gap: 16px; }
.btn-group > .group { flex: 0 0 auto; max-width: 100%; }
.btn-group > .group > div { width: clamp(24px, 3vw, 32px); height: 44px; }
.stats-group { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: clamp(12px, 2vw, 32px); }
.stats-group .text-3xl { font-size: clamp(1.5rem, 2.5vw, 1.875rem); line-height: 1.2; }

.hero-art { width: 100%; max-width: 560px; min-height: 320px; justify-self: center; }
.cpu-frame { width: min(100%, 450px); height: auto; aspect-ratio: 3 / 2; }
.hero-art > button { top: 8px; }
.hero-art .decorative-circle { height: auto; aspect-ratio: 1; max-width: 100%; }
.hero-art .decorative-circle:nth-child(1) { width: min(90%, 500px); }
.hero-art .decorative-circle:nth-child(2) { width: min(72%, 400px); }
.hero-art .decorative-circle:nth-child(3) { width: min(54%, 300px); }
.action-menu-container {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
}
.splash-screen { padding: 16px; }
.splash-screen span { letter-spacing: clamp(.15em, 1vw, .5em); }

@media (min-width: 48rem) {
  .hero-art { min-height: 440px; }
}
@media (min-width: 64rem) {
  .hero-content { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 48px; gap: 40px; }
  .hero-art { min-height: 460px; }
}
@media (max-width: 47.999rem) {
  .site-nav:not(.menu-ready) { position: relative; }
  .nav-row { flex-wrap: wrap; padding-block: 16px; }
  .desktop-nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-block: 8px; max-height: calc(100svh - 80px); overflow-y: auto; }
  .site-nav.menu-ready .desktop-nav:not(.is-open) { display: none; }
  .site-nav.menu-ready .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .hero-copy { max-width: 520px; }
}
@media (max-width: 29.999rem) {
  .hero-content { gap: 32px; }
  .stats-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .stats-group > :first-child { grid-column: 1 / -1; }
  .hero-art { min-height: 280px; }
}
@media (hover: none) {
  .title-hover { cursor: default; }
  .title-hover .title-circle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #main-content *, .splash-screen, .splash-screen span {
    animation: none !important;
    transition: none !important;
  }
  .splash-screen { display: none; }
}