/* landing.css — marketing page layout. */
body.landing-page { overflow: auto; }
main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.kicker { letter-spacing: 0.32em; font-size: 0.72rem; color: var(--dew); }
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 3vw, 36px);
  align-items: center; padding: clamp(24px, 5vw, 64px) 0;
}
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1.02; letter-spacing: 0.06em;
  margin: 0.25em 0 0.35em;
  background: linear-gradient(120deg, var(--spore), var(--dew) 55%, var(--crystal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(54, 224, 176, 0.35));
}
.tagline { font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--ink); line-height: 1.55; max-width: 34em; }
.hero-links { margin-top: 1.6em; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ghost {
  padding: 0.8em 1.8em; border-radius: 999px; border: 1px solid var(--edge);
  color: var(--ink); letter-spacing: 0.06em; font-size: 0.95rem;
}
.ghost:hover { border-color: var(--dew); color: var(--dew); }
.hero-stage { position: relative; }
#hero-preview {
  width: 100%; aspect-ratio: 16 / 10; display: block;
  border: 1px solid var(--edge); border-radius: 18px;
  background: #0a1220; box-shadow: 0 0 60px rgba(54, 224, 176, 0.18);
}
.stage-cap { font-size: 0.72rem; color: var(--ink-dim); margin-top: 6px; text-align: right; }
section { padding: clamp(24px, 4vw, 48px) 0; }
h2 {
  font-size: clamp(1.4rem, 3.5vw, 2.1rem); letter-spacing: 0.1em; color: var(--spore);
  margin-bottom: 1em;
}
#features {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
#features li {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
  padding: 16px 18px; line-height: 1.5; font-size: 0.95rem;
}
#features b { color: var(--spore); }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
#gallery figure { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
#gallery img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
#gallery figcaption { padding: 10px 14px; font-size: 0.8rem; color: var(--ink-dim); }
#controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
#controls div { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 16px 18px; }
#controls h3 { color: var(--dew); font-size: 0.9rem; letter-spacing: 0.14em; margin-bottom: 0.5em; }
#controls p { font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
footer { border-top: 1px solid var(--edge); padding: 28px 0 40px; text-align: center; color: var(--ink-dim); }
footer .cta { margin-top: 14px; font-size: 0.9rem; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stage { order: -1; }
  .stage-cap { text-align: left; }
}