html {
  scroll-behavior: smooth;
}

.homePage {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(14,15,22,.94), rgba(14,15,22,.70) 44%, rgba(14,15,22,.96)),
    linear-gradient(180deg, rgba(14,15,22,.72), rgba(14,15,22,.92)),
    url("images/home/archytheon-bg.png") center top / cover fixed;
}

.homeShell {
  --home-gap: 18px;
  width: min(1344px, calc(100% - 96px));
  margin: 0 auto;
  padding: 18px 0 120px;
}

.homeHero,
.homeProduct,
.homeInfoBlock {
  border: 1px solid rgba(177, 140, 255, .22);
  border-radius: 16px;
  background: rgba(18, 21, 33, .88);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}

.homeHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .44fr);
  gap: 28px;
  align-items: center;
  min-height: 220px;
  padding: 18px 28px;
}

.homeKicker,
.homeProductType {
  margin: 0;
  color: #b18cff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.homeHeroText h1 {
  margin: 0 0 10px;
  color: #f1f1f7;
  font-size: clamp(38px, 4vw, 58px);
  line-height: .94;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.homeHeroText p:not(.homeKicker) {
  max-width: 900px;
  margin: 0;
  color: #d7d5e6;
  font-size: 16px;
  line-height: 1.42;
}

.homeStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.homeStats span {
  display: grid;
  align-content: center;
  min-height: 64px;
  padding: 0 14px;
  border: 1px solid rgba(123, 76, 255, .52);
  border-radius: 10px;
  background: rgba(13, 18, 32, .78);
  color: #c6c6d8;
  font-size: 13px;
}

.homeStats strong {
  display: block;
  color: #b18cff;
  font-size: 24px;
  line-height: 1;
}

.homeProducts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--home-gap);
  margin-top: var(--home-gap);
}

.homeProduct {
  display: grid;
  grid-template-columns: minmax(270px, .46fr) minmax(0, .54fr);
  overflow: hidden;
}

.homeProductImage {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 52px 28px 44px;
  background: rgba(8, 12, 23, .74);
}

.homeProductImage img {
  width: min(86%, 350px);
  height: auto;
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .52));
}

.homeProduct:nth-child(2) .homeProductImage img {
  width: min(84%, 330px);
}

.homeProductInfo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 42px 28px 26px;
}

.homeProductInfo h2 {
  margin: 8px 0 10px;
  color: #f1f1f7;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
}

.homeProductInfo p {
  margin: 0 0 16px;
  color: #c6c6d8;
  font-size: 15px;
  line-height: 1.5;
}

.homeBuyRow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.homeBuyRow strong {
  color: #f1f1f7;
  font-size: 30px;
  line-height: 1;
}

.homeBuyRow a,
.homeMore a,
.homeBackTop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  border: 1px solid #7b4cff;
  border-radius: 10px;
  background: #7b4cff;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .36);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.homeBuyRow a:hover,
.homeMore a:hover,
.homeBackTop a:hover {
  background: #9168ff;
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(123, 76, 255, .26);
}

.homeDetails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.homeDetails span {
  min-height: 60px;
  padding: 10px;
  border: 1px solid #2a2f3e;
  border-radius: 10px;
  background: rgba(13, 18, 32, .78);
  color: #c6c6d8;
  font-size: 13px;
  line-height: 1.35;
}

.homeDetails b {
  display: block;
  margin-bottom: 2px;
  color: #b18cff;
  font-size: 15px;
}

.homeMore,
.homeBackTop {
  display: flex;
  justify-content: center;
}

.homeMore {
  grid-column: 1 / -1;
}

.homeInfoBlock {
  display: block;
  overflow: hidden;
  margin-top: var(--home-gap);
}

.homeInfoText {
  padding: 42px;
}

.homeInfoText h2 {
  margin: 14px 0 14px;
  color: #f1f1f7;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.02;
}

.homeInfoText p:not(.homeKicker) {
  max-width: 760px;
  margin: 0;
  color: #d7d5e6;
  font-size: 16px;
  line-height: 1.55;
}

.homeList,
.homeRoleLine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.homeList span,
.homeRoleLine span {
  min-height: 58px;
  padding: 14px;
  border: 1px solid rgba(177, 140, 255, .16);
  border-radius: 10px;
  background: rgba(13, 18, 32, .72);
  color: #d7d5e6;
  font-size: 15px;
  line-height: 1.35;
}

.homeList b {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.homeRoleLine span {
  min-height: auto;
  color: #b18cff;
  font-weight: 800;
  text-align: center;
}

.homeInfoVisual {
  display: block;
  margin: 0;
  padding: 28px;
  border-top: 1px solid rgba(177, 140, 255, .16);
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 76, 255, .14), transparent 42%),
    rgba(8, 12, 23, .54);
}

.homeInfoVisual img {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
}

#heroes .homeInfoVisual img {
  width: min(100%, 900px);
}

.homeBackTop {
  margin-top: var(--home-gap);
  padding: 30px 0 0;
}

@media (max-width: 1100px) {
  .homeShell {
    width: min(100% - 32px, 900px);
  }

  .homeHero,
  .homeProducts,
  .homeProduct {
    grid-template-columns: 1fr;
  }

  .homeProductImage {
    padding: 42px 28px 20px;
  }

  .homeProductInfo {
    padding: 28px;
  }
}

@media (max-width: 760px) {
  .homeShell {
    width: calc(100% - 28px);
    padding-top: 14px;
  }

  .homeHero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .homeStats,
  .homeDetails,
  .homeList,
  .homeRoleLine {
    grid-template-columns: 1fr;
  }

  .homeHeroText h1 {
    font-size: 36px;
  }

  .homeProductInfo h2 {
    font-size: 32px;
  }

  .homeBuyRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .homeInfoText {
    padding: 28px 22px;
  }

  .homeInfoVisual {
    padding: 16px;
  }
}