#main-content > .hero .hero-tools {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  border: 1px solid rgba(253, 252, 248, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.82), transparent 32%),
    linear-gradient(145deg, #faf0df 0%, #f1dfc2 54%, #ead1aa 100%);
  box-shadow: 0 32px 75px rgba(8, 9, 32, 0.38);
}

#main-content > .hero .hero-tools::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(119, 73, 31, 0.08));
  content: "";
  pointer-events: none;
}

#main-content > .hero .hero-tool {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  border: 1px solid rgba(39, 39, 86, 0.1);
  border-radius: 2px;
  filter: drop-shadow(0 18px 18px rgba(72, 45, 20, 0.2));
  transform-origin: center;
}

#main-content > .hero .hero-tool--meeting {
  top: 4%;
  left: 4%;
  z-index: 1;
  width: 51%;
  transform: rotate(-3.5deg);
}

#main-content > .hero .hero-tool--standards {
  top: 5%;
  right: 3%;
  z-index: 2;
  width: 51%;
  transform: rotate(4deg);
}

#main-content > .hero .hero-tool--scoreboard {
  left: 3%;
  bottom: 3%;
  z-index: 3;
  width: 94%;
  transform: rotate(-0.8deg);
}

#flagship-system .split-card-media--toolkit-flatlay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, #f9edda 0%, #f3dfbf 52%, #eed5ae 100%);
}

#flagship-system .split-card-media--toolkit-flatlay::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(151, 97, 43, 0.08));
  content: "";
  pointer-events: none;
}

#flagship-system .toolkit-flatlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  margin: 0;
}

#flagship-system .toolkit-flatlay-mobile {
  display: none;
}

#flagship-system .toolkit-flatlay-sheet {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  border: 1px solid rgba(39, 39, 86, 0.08);
  border-radius: 2px;
  object-fit: contain;
  filter: drop-shadow(0 18px 19px rgba(82, 52, 24, 0.18));
  transform-origin: center;
}

#flagship-system .toolkit-flatlay-sheet--tracker {
  top: 37%;
  left: 15%;
  z-index: 1;
  width: 76%;
  transform: rotate(2.5deg);
}

#flagship-system .toolkit-flatlay-sheet--scoreboard {
  top: 6%;
  left: 10%;
  z-index: 3;
  width: 78%;
  transform: rotate(-2deg);
}

#flagship-system .toolkit-flatlay-sheet--register {
  top: 68%;
  left: 8%;
  z-index: 4;
  width: 80%;
  transform: rotate(-0.65deg);
}

@media (max-width: 820px) {
  #main-content > .hero .hero-tools {
    min-height: clamp(390px, 78vw, 520px);
  }

  #flagship-system .split-card-media--toolkit-flatlay {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  #flagship-system .toolkit-flatlay {
    display: none;
  }

  #flagship-system .toolkit-flatlay-mobile {
    display: block;
  }
}

@media (max-width: 580px) {
  #main-content > .hero .hero-tools {
    min-height: 360px;
    border-radius: 18px;
  }

  #main-content > .hero .hero-tool--meeting,
  #main-content > .hero .hero-tool--standards {
    width: 49%;
  }

  #main-content > .hero .hero-tool--scoreboard {
    left: 4%;
    bottom: 4%;
    width: 92%;
  }

  .hero .image-panel img {
    min-height: 280px;
  }

}