/* landing.css — the first thing a friend sees. Bold, calm, luminous. */

.landing-shell {
  max-width: 580px;
  margin: 12vh auto 6vh;
  padding: 0 24px;
  text-align: center;
  animation: rise-in var(--motion-slow) var(--ease-out) backwards;
}

.landing-brand {
  font-family: var(--display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-headline {
  font-family: var(--display);
  font-size: 36px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.025em;
  margin: 6px 0 16px;
  color: var(--text-1);
}

.landing-sub {
  font-family: var(--body);
  color: var(--text-2);
  font-size: var(--t-base);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 440px;
}

.landing-cta {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  max-width: 320px; margin: 0 auto;
}
.landing-cta .btn { width: 100%; }
.landing-cta .btn.primary { padding: 15px 32px; font-size: var(--t-sm); }

.landing-foot {
  margin-top: 28px;
  font-family: var(--body);
  font-size: var(--t-xs);
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.landing-foot a { color: var(--text-2); text-decoration: none; }
.landing-foot a:hover { color: var(--accent-1); }

.landing-feels {
  margin: 40px auto 0;
  max-width: 460px;
  font-family: var(--body);
  font-size: var(--t-xs);
  color: var(--text-3);
  text-align: left;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.landing-feels span {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.landing-feels span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 8px var(--accent-1-glow);
  flex: 0 0 auto;
}

@media (min-width: 480px) {
  .landing-headline { font-size: 46px; }
  .landing-brand    { font-size: 40px; }
  .landing-feels { grid-template-columns: 1fr 1fr; }
}