/* Konstellar — landing page only (index.html).
   Layers a calm, premium hero treatment on top of shared.css. Loaded AFTER
   shared.css; every rule is scoped under `.landing` so it can never reach the
   legal / account / checkout pages. No scroll or entrance animation by request —
   the only motion is ambient and gated behind prefers-reduced-motion. */

/* ---- hero ---- */
.landing .hero {
  position: relative;
  text-align: center;
  padding-top: 14px;
  margin-bottom: 8px;
}
/* soft celestial glow behind the title — the focal point */
.landing .hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -34px;
  transform: translateX(-50%);
  width: min(560px, 96vw); height: 340px;
  background: radial-gradient(50% 50% at 50% 45%,
              rgba(155,134,196,.30), rgba(205,182,126,.10) 46%, transparent 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}
.landing .hero .kicker { margin-bottom: 14px; }
.landing .hero .lede {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- wordmark ---- */
.landing .wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 11vw, 4.6rem);
  letter-spacing: .5px;
  line-height: 1.04;
  margin: .06em 0 .34em;
  color: var(--gold); /* fallback if background-clip:text is unsupported */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .landing .wordmark {
    background: linear-gradient(100deg,
      #b9965c 0%, #e9d29c 28%, #cdb67e 52%, #f0dca6 72%, #bd9a5f 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .landing .wordmark { animation: konstellar-shimmer 11s ease-in-out infinite; }
  }
}
@keyframes konstellar-shimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* ---- primary CTA card ---- */
.landing .cta {
  max-width: 460px;
  margin: 22px auto 8px;
}

/* ---- "Was dich erwartet" ---- */
.landing .features-section { margin-top: 40px; }
.landing .features-section h2 {
  text-align: center;
  margin: 0 0 .2em;
}
.landing .features {
  gap: 16px;
  margin-top: 16px;
}
/* four cards since the Synastrie-first repositioning — 2×2 reads calmer
   than a cramped 4-across row */
@media (min-width: 560px) {
  .landing .features { grid-template-columns: repeat(2, 1fr); }
}
.landing .feature {
  background: linear-gradient(180deg, rgba(27,24,28,.88), rgba(19,17,26,.88));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.landing .feature:hover {
  border-color: rgba(205,182,126,.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.85);
}
.landing .feature-glyph {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 10px;
}
.landing .feature h3 {
  margin: 0 0 6px;
  font-size: 1.18rem;
  color: var(--text); /* parchment heading; the gold glyph is the accent */
}
.landing .feature p {
  margin: 0;
  color: var(--text-2);
  font-size: .98rem;
  line-height: 1.55;
}

/* closing disclaimer reads as a centred coda under the centred sections */
.landing .disclaimer { text-align: center; }

/* ---- ambient drifting stars (landing only, gentle, motion-safe) ---- */
@media (prefers-reduced-motion: no-preference) {
  body::after {
    content: "";
    position: fixed;
    inset: -10% 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(1px   1px   at 22% 16%, rgba(236,230,218,.40), transparent 60%),
      radial-gradient(1.3px 1.3px at 67% 24%, rgba(205,182,126,.34), transparent 60%),
      radial-gradient(1px   1px   at 41% 44%, rgba(236,230,218,.30), transparent 60%),
      radial-gradient(1px   1px   at 84% 52%, rgba(236,230,218,.30), transparent 60%),
      radial-gradient(1px   1px   at 14% 68%, rgba(236,230,218,.26), transparent 60%),
      radial-gradient(1.2px 1.2px at 58% 78%, rgba(155,134,196,.30), transparent 60%);
    opacity: .8;
    animation: konstellar-drift 140s linear infinite alternate;
  }
}
@keyframes konstellar-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-46px); }
}