/* Landing page layout (docs/index.md)
   Keep this file small and self-contained.
*/

:root {
  --landing-radius: 18px;
  --landing-border: 1px solid rgba(128, 128, 128, 0.22);
  --landing-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

/* Hero */
.landing-hero {
  margin: 8px 0 26px;
  padding: 22px;
  border: var(--landing-border);
  border-radius: var(--landing-radius);
  box-shadow: var(--landing-shadow);
  background:
    radial-gradient(1100px 520px at 16% 12%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(900px 520px at 92% 78%, rgba(34, 211, 238, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(128, 128, 128, 0.06), rgba(128, 128, 128, 0.02));
}

[data-md-color-scheme="slate"] .landing-hero {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(1100px 520px at 16% 12%, rgba(99, 102, 241, 0.24), transparent 60%),
    radial-gradient(900px 520px at 92% 78%, rgba(34, 211, 238, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.landing-hero__grid {
  display: grid;
  /* grid-template-columns: 1.25fr 0.75fr; */
  gap: 18px;
  align-items: center;
}

@media (max-width: 980px) {
  .landing-hero__grid {
    grid-template-columns: 1fr;
  }
}

.landing-kicker {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  opacity: 0.82;
  margin: 0 0 8px;
}

.landing-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05;
  margin: 0 0 12px;
}

.landing-subtitle {
  font-size: 1.05rem;
  opacity: 0.92;
  margin: 0 0 16px;
  max-width: 72ch;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.landing-cta .md-button {
  border-radius: 999px;
   padding: 3px 10px;
   margin-bottom: 5px;
  font-weight: 800;
}
.md-typeset .md-button {
       padding: 3px 10px;
   margin-bottom: 5px;
}
.landing-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.landing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  background: rgba(128, 128, 128, 0.06);
  font-weight: 700;
  font-size: 0.85rem;
}

.landing-visual {
  display: grid;
  place-items: center;
  padding: 10px;
}

.landing-visual svg {
  width: min(420px, 100%);
  height: auto;
}

/* Section blocks */
.landing-section {
  margin: 26px 0;
}

.landing-section h2 {
  margin-top: 0;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .landing-grid {
    grid-template-columns: 1fr;
  }
}

.landing-card {
  border: var(--landing-border);
  border-radius: var(--landing-radius);
  padding: 16px;
  background: rgba(128, 128, 128, 0.04);
}

[data-md-color-scheme="slate"] .landing-card {
  background: rgba(255, 255, 255, 0.03);
}

.landing-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.landing-card p {
  margin: 0;
  opacity: 0.92;
}

.landing-callout {
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
  border-radius: var(--landing-radius);
  padding: 16px;
}

[data-md-color-scheme="slate"] .landing-callout {
  background: rgba(99, 102, 241, 0.12);
}

.landing-callout strong {
  font-weight: 900;
}

.landing-mini {
  font-size: 0.92rem;
  opacity: 0.9;
}