/* ── Hero ───────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 48px 16px 32px;
}
.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.hero h1 .accent { color: #60a5fa; }
.hero .tagline {
  font-size: 1.15rem;
  opacity: .8;
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-row a {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.cta-primary {
  background: #1d4ed8;
  color: #e8eefc;
  border: 1px solid #1d4ed8;
}
.cta-primary:hover { background: #2563eb; }
.cta-secondary {
  background: transparent;
  color: #93c5fd;
  border: 1px solid #1f2a44;
}
.cta-secondary:hover { background: #0f1b33; }

/* ── Screenshots ────────────────────────────────────────── */
.screenshots {
  margin: 0 auto 40px;
  max-width: 960px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  padding: 0 16px;
}
.screenshots .shot {
  border-radius: 10px;
  border: 1px solid #1f2a44;
  overflow: hidden;
  background: #0f1b33;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.shots-wide {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.screenshots .shot img {
  width: 100%;
  display: block;
  aspect-ratio: 18 / 10;
  object-fit: cover;
  object-position: top left;
}
.screenshots .shot .placeholder {
  padding: 80px 24px;
  opacity: .35;
  font-size: 0.9rem;
}
.screenshots .shot figcaption {
  padding: 10px;
  font-size: 0.85rem;
  opacity: .7;
}
@media (max-width: 640px) {
  .screenshots { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
}

/* ── Features ───────────────────────────────────────────── */
.features {
  max-width: 960px;
  margin: 0 auto 40px;
  padding: 0 16px;
}
.features h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.features-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-card {
  background: #0f1b33;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  padding: 18px;
}
.feature-card .icon { font-size: 1.6rem; margin-bottom: 6px; }
.feature-card h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}
.feature-card p {
  font-size: 0.9rem;
  opacity: .75;
  margin: 0;
  line-height: 1.45;
}

/* ── How-it-works ───────────────────────────────────────── */
.how-it-works {
  max-width: 700px;
  margin: 0 auto 48px;
  padding: 0 16px;
  text-align: center;
}
.how-it-works h2 { font-size: 1.5rem; margin-bottom: 20px; }
.steps {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.step {
  flex: 1;
  min-width: 160px;
  max-width: 200px;
}
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1d4ed8;
  font-weight: 700;
  margin-bottom: 8px;
}
.step p { font-size: 0.9rem; opacity: .8; margin: 0; }

/* ── Early-access notice ─────────────────────────────────── */
.notice {
  max-width: 700px;
  margin: 0 auto 40px;
  padding: 0 16px;
}
.notice-card {
  background: #0f1b33;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  padding: 20px 24px;
  text-align: center;
}
.notice-card h2 { font-size: 1.2rem; margin: 0 0 10px; }
.notice-card p {
  font-size: 0.9rem;
  opacity: .8;
  margin: 0;
  line-height: 1.55;
}

/* ── Footer CTA ─────────────────────────────────────────── */
.footer-cta {
  text-align: center;
  padding: 0 16px 48px;
}
.footer-cta p {
  opacity: .7;
  margin-bottom: 16px;
}