.site-home {
  --home-border: color-mix(in srgb, var(--color-base-content) 12%, transparent);
  --home-border-soft: color-mix(in srgb, var(--color-base-content) 10%, transparent);
  --home-soft-bg: color-mix(in srgb, var(--color-base-content) 4%, transparent);
  --home-pill-bg: color-mix(in srgb, var(--color-base-content) 5%, transparent);
  --home-chip-bg: color-mix(in srgb, var(--color-base-content) 6%, transparent);
  --home-surface-bg: color-mix(in srgb, var(--color-base-100) 84%, transparent);
  --home-panel-base: color-mix(in srgb, var(--color-base-100) 94%, transparent);
  --home-panel-shade: color-mix(in srgb, var(--color-base-content) 2%, var(--color-base-100));
  --home-grid-gap: clamp(1rem, 1.8vw, 1.5rem);
  --home-shadow: 0 24px 80px color-mix(in srgb, black 18%, transparent);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 26rem),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-base-200) 85%, black 15%) 0%, var(--color-base-200) 100%);
}

.site-home .app-shell {
  overflow: clip;
}

.site-home .app-shell__inner {
  width: calc(100% - clamp(1rem, 3vw, 2.5rem));
  max-width: none;
  padding: clamp(0.75rem, 1.5vw, 1.5rem) 0 clamp(1.5rem, 3vw, 3rem);
}

.site-home .app-shell::before,
.site-home .app-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.55;
  pointer-events: none;
}

.site-home .app-shell::before {
  top: 7rem;
  right: -8rem;
  width: 22rem;
  height: 22rem;
  background: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

.site-home .app-shell::after {
  left: -5rem;
  bottom: 14rem;
  width: 18rem;
  height: 18rem;
  background: color-mix(in srgb, var(--color-secondary) 28%, transparent);
}

.site-home .surface {
  background: var(--home-surface-bg);
  border-color: var(--home-border);
  box-shadow: var(--home-shadow);
}

.site-home .surface .card-body,
.site-home .card .card-body {
  padding: clamp(1.25rem, 1.7vw, 2rem);
}

.site-home .headline-xl,
.site-home .headline-lg,
.site-home .headline-md,
.site-home .home-brand__title {
  font-family: "Space Grotesk", "Instrument Sans", sans-serif;
  letter-spacing: -0.04em;
}

.site-home code,
.site-home .font-mono,
.site-home .home-console__prompt,
.site-home .home-chip,
.site-home .home-proof-pill__label,
.site-home .home-results-intro__signal,
.site-home .home-flow-rail span {
  font-family: "IBM Plex Mono", monospace;
}

.home-main { gap: clamp(1.5rem, 2.4vw, 3rem); }
.home-flow-section { gap: 1rem; }

.app-navbar .navbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

:is(.app-navbar .navbar-start, .app-navbar .navbar-center, .app-navbar .navbar-end) {
  min-width: 0;
  width: auto;
}

.app-navbar .navbar-center {
  justify-content: center;
}

.app-navbar .navbar-end {
  justify-content: flex-end;
}

.navbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.navbar-actions .theme-picker {
  flex: 0 0 11rem;
}

.navbar-actions .quick-links {
  justify-content: flex-end;
  min-width: 0;
}

.navbar-actions .badge {
  max-width: min(100%, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-brand,
.home-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.home-brand {
  color: inherit;
  text-decoration: none;
}

.home-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 1rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-primary) 30%, transparent),
      color-mix(in srgb, var(--color-secondary) 28%, transparent)
    );
  color: var(--color-base-content);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.home-brand__copy { display: flex; flex-direction: column; gap: 0.1rem; }

.home-brand__title { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.home-brand__meta { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.68; }

.home-nav__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

.home-hero-grid,
.home-results-grid,
.home-flow-grid,
.home-use-grid {
  display: grid;
  gap: var(--home-grid-gap);
}

.home-hero-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, 0.85fr);
}

.home-results-grid,
.home-flow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-use-grid {
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
}

.home-hero-card,
.home-flow-lead,
.home-console-card,
.home-flow-card,
.home-use-card,
.home-results-card,
.home-cta {
  position: relative;
  overflow: hidden;
}

.home-hero-card::before,
.home-console-card::before,
.home-cta::before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

.home-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.home-chip {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-chip,
.home-nav__tag,
.home-flow-rail span,
.home-cta__rail span {
  border: 1px solid var(--home-border);
  border-radius: 999px;
}

.home-chip,
.home-nav__tag {
  padding: 0.45rem 0.8rem;
}

.home-chip,
.home-flow-rail span,
.home-cta__rail span {
  background: var(--home-pill-bg);
}

.home-chip {
  background: var(--home-chip-bg);
}

.home-hero__title {
  max-width: 11ch;
  font-size: clamp(2.8rem, 5.1vw, 6rem);
}

.home-hero__lede { max-width: 54rem; font-size: 1.08rem; }

.home-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.home-proof-pill {
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid var(--home-border-soft);
  background: var(--home-soft-bg);
}

.home-proof-pill__label {
  display: inline-block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.home-console__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.home-console__lights {
  display: inline-flex;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.home-console__lights span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-base-content) 22%, transparent);
}

.home-console__frame {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem;
  border-radius: 1.4rem;
  border: 1px solid var(--home-border-soft);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-base-300) 58%, transparent),
      color-mix(in srgb, var(--color-base-100) 80%, transparent)
    );
}

.home-console__line,
.home-console__reply {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, black 12%, var(--color-base-100));
  border: 1px solid var(--home-border-soft);
}

.home-console__line {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.home-console__line code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.home-console__line--muted,
.home-console__reply {
  color: color-mix(in srgb, var(--color-base-content) 82%, transparent);
}

.home-console__prompt { opacity: 0.6; }

.home-console__note {
  background: color-mix(in srgb, var(--color-base-100) 72%, transparent);
}

.home-flow-lead {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 18rem),
    linear-gradient(
      145deg,
      var(--home-panel-base),
      color-mix(in srgb, var(--color-secondary) 8%, var(--color-base-100))
    );
}

.home-results-intro {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 16rem),
    linear-gradient(
      145deg,
      var(--home-panel-base),
      color-mix(in srgb, var(--color-secondary) 9%, var(--color-base-100))
    );
}

.home-results-card {
  min-height: 15rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-base-100) 92%, transparent),
      var(--home-panel-shade)
    );
}

.home-results-card .card-body,
.home-flow-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.home-results-card .card-body {
  gap: 0.85rem;
}

.home-results-card__glow {
  position: absolute;
  inset: 1rem auto auto 1rem;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 24%, transparent);
  filter: blur(24px);
  opacity: 0.85;
  pointer-events: none;
}

.home-results-card .card-body > :not(.home-results-card__glow) {
  position: relative;
  z-index: 1;
}

.home-results-intro__signal {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--home-border-soft);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
}

.home-results-card:nth-child(3) .home-results-card__glow {
  background: color-mix(in srgb, var(--color-secondary) 24%, transparent);
}

.home-results-card:nth-child(4) .home-results-card__glow {
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.home-flow-heading {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 72rem;
}

.home-flow-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-start;
  align-items: center;
}

.home-flow-rail span {
  position: relative;
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-flow-rail span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.25rem);
  width: 0.4rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-base-content) 28%, transparent);
}

.home-flow-card {
  min-height: 14rem;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 11rem),
    linear-gradient(
      180deg,
      var(--home-panel-base),
      color-mix(in srgb, var(--color-secondary) 4%, var(--color-base-100))
    );
}

.home-flow-card:nth-child(2n) {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 11rem),
    linear-gradient(
      180deg,
      var(--home-panel-base),
      color-mix(in srgb, var(--color-primary) 4%, var(--color-base-100))
    );
}

.home-flow-card .card-body {
  gap: 1.2rem;
}

.home-flow-card__index,
.home-use-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-flow-card__bar {
  width: clamp(4rem, 18vw, 7rem);
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent);
  opacity: 0.85;
}

.home-flow-card:nth-child(2n) .home-flow-card__bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-secondary) 70%, transparent), transparent);
}

.home-use-card {
  min-height: 11rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-base-100) 92%, transparent),
      color-mix(in srgb, var(--color-secondary) 8%, var(--color-base-100))
    );
}

.home-use-card__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.home-use-card:nth-child(2) .home-use-card__dot {
  background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-secondary) 45%, transparent);
}

.home-use-card:nth-child(3) .home-use-card__dot {
  background: color-mix(in srgb, var(--color-accent) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.home-flow-card .eyebrow,
.home-use-card .eyebrow,
.home-results-card .eyebrow {
  opacity: 0.6;
}

.home-cta {
  color: var(--color-base-content);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 32%, transparent), transparent 16rem),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-base-100) 92%, transparent),
      color-mix(in srgb, var(--color-secondary) 10%, var(--color-base-100))
    );
  border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
}

.home-cta__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
}

.home-cta__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-cta__rail span {
  padding: 0.55rem 0.85rem;
  font-size: 0.86rem;
}

.home-footer__brand .headline-md { margin: 0; }
.skeleton-block--nav { height: 5.75rem; }
.skeleton-block--hero { height: 31rem; }
.skeleton-block--stats { height: 10rem; }
.skeleton-block--features { height: 18rem; }
.skeleton-block--cta { height: 14rem; }
.skeleton-block--footer { height: 8rem; }

@media (min-width: 1281px) {
  .home-flow-card:nth-child(2n) {
    margin-top: 1.25rem;
  }

  .home-use-card:nth-child(2) {
    margin-top: 1rem;
  }
}

@media (max-width: 1280px) {
  .home-flow-card:nth-child(2n),
  .home-use-card:nth-child(2) { margin-top: 0; }
}

@media (max-width: 1360px) {
  .home-results-grid,
  .home-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-results-intro {
    grid-column: span 2;
  }
}

@media (max-width: 1120px) {
  .app-navbar .navbar {
    grid-template-columns: 1fr;
  }

  :is(.app-navbar .navbar-start, .app-navbar .navbar-center, .app-navbar .navbar-end),
  .navbar-actions,
  .navbar-actions .quick-links {
    justify-content: flex-start;
  }

  .home-hero-grid,
  .home-cta__top {
    grid-template-columns: 1fr;
  }

  .home-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .app-navbar .navbar {
    align-items: flex-start;
    flex-direction: column;
  }

  :is(.app-navbar .navbar-start, .app-navbar .navbar-center, .app-navbar .navbar-end) {
    width: 100%;
    justify-content: flex-start;
  }

  .home-results-grid,
  .home-flow-grid,
  .home-use-grid,
  .home-proof-row {
    grid-template-columns: 1fr;
  }

  .home-results-intro {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .navbar-actions .theme-picker {
    flex-basis: 100%;
  }

  .home-brand__mark {
    min-width: 2.7rem;
    min-height: 2.7rem;
  }

  .home-nav__tag {
    width: 100%;
    justify-content: center;
  }

  .home-kicker-row,
  .home-console__header {
    flex-direction: column;
  }

  .home-console__line {
    gap: 0.5rem;
  }

  .site-home .app-shell__inner {
    width: calc(100% - 1rem);
  }
}