/* MuPiBox 2.4.8 homepage refinement. Loaded with its own cache version. */

body.mupibox-site .mupibox-front-page {
  --mupi-bg: #090d16;
  --mupi-bg-soft: #101625;
  --mupi-surface: #171b29;
  --mupi-surface-raised: #20263a;
  --mupi-text-muted: #d3d4de;
  --mupi-border: rgba(255,255,255,.15);
}

body.mupibox-site .mupi-home-hero__layout {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(310px,.7fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
}

body.mupibox-site .mupi-home-hero__content {
  max-width: 820px;
}

body.mupibox-site .mupi-home-hero__visual {
  position: relative;
  display: grid;
  min-height: 380px;
  margin: 0;
  padding: clamp(1.2rem,2.5vw,2rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,141,189,.22), transparent 42%),
    radial-gradient(circle at 68% 30%, rgba(255,208,120,.13), transparent 34%),
    linear-gradient(145deg, #20273a 0%, #141a27 58%, #10151f 100%);
  box-shadow: 0 28px 72px rgba(0,0,0,.34);
}

body.mupibox-site .mupi-home-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(83,191,243,.10), transparent 40%);
  pointer-events: none;
}

body.mupibox-site .mupi-home-hero__glow {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,120,.14), rgba(255,141,189,.10) 45%, transparent 68%);
  filter: blur(4px);
}

body.mupibox-site .mupi-home-hero__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(86%, 380px);
  max-height: 285px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.28));
}

body.mupibox-site .mupi-home-hero__visual figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .2rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(7,10,17,.62);
  backdrop-filter: blur(12px);
}

body.mupibox-site .mupi-home-hero__visual figcaption strong {
  color: #fffafd;
  font-size: 1rem;
}

body.mupibox-site .mupi-home-hero__visual figcaption span {
  color: #cfd3df;
  font-size: .84rem;
  line-height: 1.45;
}

body.mupibox-site .mupi-section--journey .mupi-step {
  position: relative;
  overflow: hidden;
  border-top-width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008)), #171b29;
}

body.mupibox-site .mupi-section--journey .mupi-step::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 130px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .24;
  pointer-events: none;
}

body.mupibox-site .mupi-step--choose { border-top-color: rgba(126,211,255,.60); }
body.mupibox-site .mupi-step--choose::after { background: #53bff3; }
body.mupibox-site .mupi-step--hardware { border-top-color: rgba(255,208,120,.62); }
body.mupibox-site .mupi-step--hardware::after { background: #ffc159; }
body.mupibox-site .mupi-step--build { border-top-color: rgba(255,141,189,.62); }
body.mupibox-site .mupi-step--build::after { background: #ff8dbd; }

body.mupibox-site .mupi-step--choose .mupi-icon {
  color: #9cddff;
  border-color: rgba(83,191,243,.34);
  background: rgba(83,191,243,.10);
}

body.mupibox-site .mupi-step--hardware .mupi-icon {
  color: #ffd88f;
  border-color: rgba(255,193,89,.36);
  background: rgba(255,193,89,.11);
}

body.mupibox-site .mupi-step--build .mupi-icon {
  color: #ffacd0;
  border-color: rgba(255,111,174,.34);
  background: rgba(255,111,174,.10);
}

body.mupibox-site .mupi-help-band--home {
  border-color: rgba(83,191,243,.28);
  background:
    radial-gradient(circle at 88% 20%, rgba(83,191,243,.16), transparent 21rem),
    linear-gradient(135deg, #182333, #111925);
  box-shadow: 0 20px 52px rgba(0,0,0,.24);
}

body.mupibox-site .mupi-section--showcase {
  background:
    radial-gradient(circle at 12% 4%, rgba(255,193,89,.055), transparent 22rem),
    linear-gradient(180deg, #0c111c 0%, #080c14 100%);
}

body.mupibox-site .mupi-realbox--wide {
  border-color: rgba(255,208,120,.24);
}

body.mupibox-site .mupi-realbox span {
  font-size: .92rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

body.mupibox-site .mupi-section--accessibility {
  background:
    radial-gradient(circle at 12% 90%, rgba(83,191,243,.045), transparent 24rem),
    #090e17;
}

body.mupibox-site .mupi-section--accessibility .mupi-grid--4 {
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.09);
}

body.mupibox-site .mupi-section--accessibility .mupi-access-card {
  min-height: 100%;
  padding: 1.4rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #131a26;
}

body.mupibox-site .mupi-section--accessibility .mupi-access-card:nth-child(even) {
  background: #161d2b;
}

body.mupibox-site .mupi-access-card--play .mupi-icon { color: #9cddff; }
body.mupibox-site .mupi-access-card--tts .mupi-icon { color: #ffd88f; }
body.mupibox-site .mupi-access-card--simple .mupi-icon { color: #a9e9b5; }
body.mupibox-site .mupi-access-card--input .mupi-icon { color: #ffacd0; }

body.mupibox-site .mupi-section--accessibility .mupi-callout {
  margin-top: 1.5rem;
  border: 1px solid rgba(255,193,89,.20);
  border-left: 4px solid #ffd078;
  border-radius: 14px;
  background: #161b24;
}

body.mupibox-site .mupi-section--generations {
  background:
    radial-gradient(circle at 14% 18%, rgba(83,191,243,.055), transparent 25rem),
    radial-gradient(circle at 88% 78%, rgba(255,111,174,.055), transparent 26rem),
    linear-gradient(180deg, #101623 0%, #0d1320 100%);
}

body.mupibox-site .mupi-generation-grid {
  gap: 1.4rem;
}

body.mupibox-site .mupi-generation-grid > .mupi-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem,3vw,2.25rem);
  border-width: 1px;
  border-top-width: 3px;
}

body.mupibox-site .mupi-generation-grid > .mupi-card::after {
  content: "";
  position: absolute;
  width: 220px;
  aspect-ratio: 1;
  right: -80px;
  bottom: -100px;
  border-radius: 50%;
  opacity: .16;
  pointer-events: none;
}

body.mupibox-site .mupi-generation-grid > .mupi-card--classic::after { background: #53bff3; }
body.mupibox-site .mupi-generation-grid > .mupi-card--ng::after { background: #ff6fae; }

body.mupibox-site .mupi-generation-grid h2 {
  font-size: clamp(2rem,3.4vw,3rem);
  letter-spacing: -.035em;
}

body.mupibox-site .mupi-section--community {
  background: #090d15;
}

body.mupibox-site .mupi-community-grid {
  gap: 1rem !important;
  border: 0 !important;
}

body.mupibox-site .mupi-section--community .mupi-community-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 260px;
  padding: 1.45rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  background: #141a26 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.18) !important;
}

body.mupibox-site .mupi-section--community .mupi-community-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--community-accent, #7ed3ff);
}

body.mupibox-site .mupi-community-card--discord { --community-accent: #8ca5ff; }
body.mupibox-site .mupi-community-card--showroom { --community-accent: #ffd078; }
body.mupibox-site .mupi-community-card--github { --community-accent: #ff8dbd; }

body.mupibox-site .mupi-community-card__symbol {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: .8rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: var(--community-accent);
  font-family: 'MuPi Space Grotesk', 'MuPi Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

body.mupibox-site .mupi-section--community .mupi-community-card h3 {
  margin: .25rem 0 .55rem;
}

body.mupibox-site .mupi-section--community .mupi-community-card a {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: .8rem;
  text-decoration: none;
}

body.mupibox-site .mupi-section--community .mupi-community-card a::after {
  content: "→";
  margin-left: .45rem;
  transition: transform .18s ease;
}

body.mupibox-site .mupi-section--community .mupi-community-card:hover a::after,
body.mupibox-site .mupi-section--community .mupi-community-card:focus-within a::after {
  transform: translateX(4px);
}

body.mupibox-site .mupibox-front-page .mupi-section-heading h2 {
  max-width: 17ch;
}

body.mupibox-site .mupibox-front-page .mupi-section-heading--split h2 {
  max-width: 14ch;
}

body.mupibox-site .mupibox-front-page .mupi-section-heading p {
  max-width: 720px;
}

@media (max-width: 1050px) {
  body.mupibox-site .mupi-home-hero__layout {
    grid-template-columns: minmax(0,1fr) minmax(280px,.58fr);
  }

  body.mupibox-site .mupi-home-hero__visual {
    min-height: 340px;
  }
}

@media (max-width: 921px) {
  body.mupibox-site .mupi-home-hero__layout {
    grid-template-columns: 1fr;
  }

  body.mupibox-site .mupi-home-hero__visual {
    width: min(100%, 620px);
    min-height: 320px;
    margin-inline: auto;
  }

  body.mupibox-site .mupi-section--accessibility .mupi-grid--4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  body.mupibox-site .mupi-community-grid {
    grid-template-columns: 1fr;
  }

  body.mupibox-site .mupi-section--community .mupi-community-card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  body.mupibox-site .mupi-home-hero__layout {
    gap: 1.6rem;
  }

  body.mupibox-site .mupi-home-hero__visual {
    min-height: 280px;
    padding: 1rem;
    border-radius: 22px;
  }

  body.mupibox-site .mupi-home-hero__visual img {
    max-height: 210px;
  }

  body.mupibox-site .mupi-home-hero__visual figcaption {
    padding: .72rem .8rem;
  }

  body.mupibox-site .mupi-section--accessibility .mupi-grid--4 {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  body.mupibox-site .mupi-section--accessibility .mupi-access-card {
    padding: 1.15rem;
  }

  body.mupibox-site .mupi-generation-grid {
    gap: .9rem;
  }

  body.mupibox-site .mupi-section--community .mupi-community-card {
    padding: 1.15rem;
    border-radius: 18px !important;
  }
}


/* 2.5.5 mobile readability pass */
@media (max-width: 640px) {
  body.mupibox-site .mupi-hero--home-compact .mupi-hero__lead {
    color: #f0edf3;
    font-size: 1.08rem;
    font-weight: 520;
    line-height: 1.62;
    text-shadow: 0 1px 8px rgba(0,0,0,.32);
  }

  body.mupibox-site .mupi-hero--home-compact .mupi-eyebrow {
    color: #ffd78c;
  }
}


/* 2.5.6 showcase creator crops */
body.mupibox-site .mupi-realbox--maik img {
  object-position: center 52%;
}

body.mupibox-site .mupi-realbox--jannine img {
  object-position: center 46%;
}

body.mupibox-site .mupi-realbox--marhias img {
  object-position: center 50%;
}