/* German Dominion · landing page layout. Tokens + topbar come from
   /_shared.css + /assets/topbar.css. */

.hero {
  max-width:820px;
  margin:0 auto;
  padding:clamp(56px, 9vw, 120px) 24px clamp(40px, 6vw, 72px);
  text-align:center;
}
.hero .eyebrow { margin-bottom:14px; }
.hero-title {
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(38px, 7vw, 72px);
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--bone);
}
.hero-title span { color:var(--accent); }
.hero-lede {
  max-width:56ch;
  margin:22px auto 0;
  color:var(--bone-62);
  font-size:clamp(14px, 1.6vw, 17px);
  line-height:1.6;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:32px;
}

.status-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:40px;
}
.status-chip {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone-62);
}
.status-chip-value {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--bone-80);
  font-weight:600;
}
.status-chip-value::before {
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--amber);
}
.status-chip-value.live { color:var(--accent); }
.status-chip-value.live::before {
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}

.features {
  max-width:1100px;
  margin:0 auto;
  padding:clamp(48px, 8vw, 96px) 24px;
}
/* Exactly four feature cards: force a balanced 2x2 at wide widths (the
   shared auto-fill grid left a 3+1 orphan row around 1400px), single
   column on narrow screens. */
.features .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .features .grid { grid-template-columns:1fr; }
}
.section-title {
  margin:0 0 28px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 4vw, 40px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--bone);
  text-align:center;
}

.site-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  max-width:1100px;
  margin:0 auto;
  padding:28px 24px 48px;
  color:var(--bone-34);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width: 600px) {
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { justify-content:center; }
  .site-footer { justify-content:center; text-align:center; }
}