/* HOME — apenas layout e componentes exclusivos da página inicial. */
.home-page {
  --home-hero-height: var(--hero-height);
  --home-hero-height-tablet: var(--hero-height-tablet);
  --home-hero-height-mobile: var(--hero-height-mobile);
  --home-hero-subtitle-size: var(--font-size-body);
  --solutions-max-width: 1500px;
  --solutions-card-height: 530px;
  --protocol-banner-height: 600px;
  --protocol-banner-height-tablet: 455px;
  --protocol-banner-height-mobile: 430px;
  --featured-assets-max-width: 1500px;
  --featured-assets-card-height: 450px;
  --featured-assets-card-gap: 10px;
  --featured-assets-logo-size: 70px;
  --featured-assets-brand-size: var(--font-size-card-title);
  --featured-assets-hover-scale: 1.08;
}

/* Hero carousel */
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-slide {
  height: var(--home-hero-height);
}

.hero-carousel {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  background: var(--color-card-dark);
}

.hero-slide {
  position: relative;
  overflow: hidden;
}

.hero-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 35%, rgba(0, 0, 0, .20));
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100% - 48px));
  color: var(--color-white);
  text-align: center;
  transform: translate(-50%, -39%);
}

.hero-content .hero-title {
  margin-bottom: var(--space-5);
}

.hero-content p {
  margin: 0 0 var(--space-5);
  color: rgba(255, 255, 255, .88);
  font-size: var(--home-hero-subtitle-size);
}

.hero-marketplaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 230px));
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero-marketplaces--single {
  grid-template-columns: minmax(160px, 230px);
}

.market-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  text-transform: uppercase;
}

.market-card:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 24px rgba(0, 0, 0, .28);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.025);
}

.market-card small {
  color: rgba(255, 255, 255, .66);
  font-family: var(--font-nav);
  font-size: var(--font-size-tiny);
  letter-spacing: .08em;
}

.market-card strong {
  font-family: var(--font-title);
  font-size: var(--font-size-card-title);
  font-weight: 700;
}

.market-card span {
  position: absolute;
  top: 10px;
  right: 14px;
  color: rgba(255, 255, 255, .75);
}

.hero-indicators {
  bottom: 22px;
  margin-bottom: 0;
}

.hero-indicators [data-bs-target] {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: #6c717d;
  opacity: .80;
}

.hero-indicators .active {
  background: var(--color-red);
  opacity: 1;
}

/* Studio expertise */
.solutions-section {
  background: var(--color-section);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: var(--solutions-max-width);
  margin: 0 auto;
}

.solution-card {
  position: relative;
  height: var(--solutions-card-height);
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-card-dark);
}

.solution-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .55) 48%, rgba(0, 0, 0, .94) 100%);
}

.solution-info {
  position: absolute;
  right: 26px;
  bottom: 30px;
  left: 26px;
}

.solution-info .card-title {
  font-size: var(--font-size-card-title);
}

.red-line {
  width: 100%;
  height: 1px;
  margin: 18px 0 34px;
  background: var(--color-red-bright);
  opacity: .65;
}

.solution-info p {
  color: rgba(255, 255, 255, .54);
  font-size: var(--font-size-card-text);
}

/* Featured game */
.featured-game-section {
  padding-bottom: 0;
  background: #101010;
}

.featured-game-banner {
  position: relative;
  height: var(--protocol-banner-height);
  overflow: hidden;
  background: var(--color-card-dark);
}

.featured-game-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

.game-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .82) 34%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .82) 100%);
}

.game-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.game-content .feature-title {
  margin-bottom: var(--space-3);
}

.game-content p {
  max-width: 520px;
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, .74);
}

/* Featured assets */
.featured-assets-section,
.featured-projects-section,
.about-strip-section {
  background: var(--color-section);
}

.featured-projects-section {
  border-top: 1px solid var(--color-line);
}

.featured-assets-section .section-head-row,
.featured-assets-section .content-carousel {
  max-width: var(--featured-assets-max-width);
}

.content-carousel {
  overflow: hidden;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  gap: var(--featured-assets-card-gap);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.asset-poster {
  position: relative;
  flex: 0 0 calc((100% - (var(--featured-assets-card-gap) * 3)) / 4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  background: #080808;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .34);
}

.asset-poster-link {
  position: relative;
  display: block;
  min-height: var(--featured-assets-card-height);
  overflow: hidden;
  color: var(--color-white);
}

.asset-poster-img,
.asset-poster-overlay {
  position: absolute;
  inset: 0;
}

.asset-poster-img {
  overflow: hidden;
  background: var(--color-card-dark);
}

.asset-poster-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .34s ease;
}

.asset-poster:hover .asset-poster-img img {
  transform: scale(var(--featured-assets-hover-scale));
}

.asset-poster-overlay {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .10) 33%, rgba(0, 0, 0, .16) 62%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 58%);
}

.asset-poster-copy {
  position: absolute;
  top: 22px;
  right: 20px;
  left: 20px;
  z-index: 2;
  pointer-events: none;
}

.asset-poster-copy .card-title {
  margin-bottom: 6px;
  font-family: var(--font-special);
  font-size: clamp(19px, 1.55vw, var(--font-size-card-title-large));
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .45);
  text-transform: uppercase;
}

.asset-poster-copy p {
  color: var(--color-red-bright);
  font-family: var(--font-special);
  font-size: var(--font-size-caption);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .50);
  text-transform: uppercase;
}

.asset-poster-brand {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--color-white);
  font-family: var(--font-logo);
  font-size: var(--featured-assets-brand-size);
  line-height: 1;
  letter-spacing: .06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .64);
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%);
}

.asset-poster-brand img {
  width: var(--featured-assets-logo-size);
  height: var(--featured-assets-logo-size);
  object-fit: contain;
}

/* Featured projects */
.projects-carousel {
  max-width: 1030px;
}

.projects-carousel .carousel-track {
  gap: 120px;
}

.project-card-home {
  display: block;
  flex: 0 0 calc((100% - 120px) / 2);
  overflow: hidden;
  border-radius: var(--card-radius);
  padding-bottom: 26px;
  background: var(--color-card-dark);
  color: inherit;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}


.project-card-home .project-thumb {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: #120709;
}

.project-card-home .project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: 0;
  transition: opacity .28s ease;
}

.project-card-home .project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .34s ease, filter .34s ease;
}

.project-card-home:hover .project-thumb img {
  transform: scale(1.07);
}

.project-card-home:hover .project-thumb::after {
  opacity: 1;
}

.project-card-home .card-title {
  margin: var(--space-3) 0 10px;
  padding-inline: 22px;
  font-size: var(--font-size-card-title-large);
}

.project-card-home p {
  margin-bottom: 22px;
  padding-inline: 22px;
  color: var(--color-white);
  font-size: var(--font-size-small);
}

.project-status-home {
  display: inline-flex;
  margin: -2px 22px 13px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-nav);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

/* About strip */
.about-strip-section {
  padding-bottom: 0;
}

.about-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  height: 320px;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .33);
  background: rgba(255, 255, 255, .10);
}

.about-strip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .52) 45%, rgba(0, 0, 0, .88) 100%);
}

.about-text-left {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 430px;
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: clamp(30px, 3vw, var(--font-size-home-callout));
  font-weight: 700;
  line-height: 1.08;
  transform: translateY(-50%);
}

.about-text-right {
  position: absolute;
  top: 50%;
  right: 12%;
  width: 350px;
  transform: translateY(-50%);
}

.about-text-right p {
  margin-bottom: var(--space-4);
  color: rgba(255, 255, 255, .78);
}

.engine-icons {
  position: absolute;
  right: 7%;
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: .85;
}

.engine-icons img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

/* O card da Home usa exatamente o componente global. */
.contact-cta-section {
  padding-block: var(--section-padding-block);
  margin-top: 7rem;
  background: var(--color-section);
}

@media (max-width: 1200px) and (min-width: 992px) {
  .home-page {
    --home-hero-height: 760px;
    --solutions-max-width: 1040px;
    --solutions-card-height: 405px;
  }

  .asset-poster {
    flex-basis: calc((100% - var(--featured-assets-card-gap)) / 2);
  }
}

@media (max-width: 991.98px) {
  .home-page {
    --home-hero-height: var(--home-hero-height-tablet);
    --solutions-max-width: 760px;
    --solutions-card-height: 390px;
    --protocol-banner-height: var(--protocol-banner-height-tablet);
    --featured-assets-card-height: 440px;
  }

  .hero-content {
    transform: translate(-50%, -34%);
  }

  .hero-marketplaces {
    grid-template-columns: 1fr;
  }

  .hero-marketplaces--single {
    grid-template-columns: minmax(180px, 270px);
  }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }

  .asset-poster {
    flex-basis: 100%;
  }

  .projects-carousel .carousel-track {
    gap: var(--space-4);
  }

  .project-card-home {
    flex-basis: 100%;
  }

  .about-strip {
    grid-template-columns: repeat(3, 1fr);
    height: 560px;
  }

  .about-text-left,
  .about-text-right {
    right: 28px;
    left: 28px;
    width: auto;
    transform: none;
  }

  .about-text-left {
    top: 95px;
  }

  .about-text-right {
    top: 260px;
  }
}

@media (max-width: 575.98px) {
  .home-page {
    --home-hero-height: var(--home-hero-height-mobile);
    --solutions-card-height: 380px;
    --protocol-banner-height: var(--protocol-banner-height-mobile);
    --featured-assets-card-height: 390px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .asset-poster-copy {
    top: var(--space-3);
    right: 15px;
    left: 15px;
  }

  .about-strip {
    height: 640px;
  }

  .about-text-left {
    top: 86px;
    font-size: var(--font-size-section-subtitle);
  }

  .about-text-right {
    top: 250px;
  }

  .engine-icons {
    right: var(--space-4);
    bottom: 18px;
  }
}