.landing-body { min-height: 100vh; display: flex; flex-direction: column; }
.landing-wrap { flex: 1; display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; width: 100%; padding: 0 16px; }

.hero { text-align: center; padding: 64px 0 48px; }
.hero-logo { font-size: 3.5rem; margin-bottom: 16px; }
.hero-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 12px; }
.hero-sub { font-size: 1.05rem; color: #94a3b8; margin-bottom: 36px; line-height: 1.6; max-width: 420px; margin-left: auto; margin-right: auto; }

.room-form { display: flex; gap: 8px; width: 100%; max-width: 380px; margin: 0 auto 12px; }
.room-form input {
  flex: 1; min-height: 52px; padding: 12px 16px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: var(--radius); color: #f1f5f9;
  font-size: 1rem; font-family: var(--font);
  text-transform: lowercase; letter-spacing: 0.01em;
}
.room-form input:focus { outline: none; border-color: #3b82f6; }
.room-form button { min-height: 52px; padding: 12px 20px; font-size: 1rem; flex-shrink: 0; }

.room-error { color: #fca5a5; font-size: 0.85rem; margin-top: 4px; }
.hero-hint { font-size: 0.8rem; color: #475569; margin-top: 0; }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 0 32px; }
@media (min-width: 480px) { .features { grid-template-columns: repeat(4, 1fr); } }

.feature-card {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 12px; padding: 20px 16px; text-align: center;
}
.feature-icon { font-size: 1.8rem; margin-bottom: 10px; }
.feature-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
.feature-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.4; }

.landing-footer {
  padding: 20px 0 32px; text-align: center;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  font-size: 0.85rem; color: #475569; flex-wrap: wrap;
}
.landing-footer a { color: #3b82f6; text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }