/* === TOOL LANDSCAPE (Stackbox Ecosystem) === */
.tool-landscape {
  position: relative;
  background: #F8FBFC;
  padding: 4rem 2rem 6rem;
  text-align: center;
  color: #0A0E14;
  font-family: 'Poppins', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

/* === HEADER === */
.tool-header {
  max-width: 900px;
  margin: 0 auto 3rem auto;
}
.tool-title {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: .8rem;
}
.tool-subtitle {
  font-size: 1.05rem;
  color: #3B3F44;
  line-height: 1.6;
}
/* === STACKBOX BACKGROUND CORE === */
.stackbox-bg-core {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 920px;
  height: 920px;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  /* Weicher, transparenter Gradient-Ring */
  background: radial-gradient(
    circle at center,
    rgba(0, 232, 255, 0.00) 0%,   /* fast klar in der Mitte */
    rgba(0, 245, 181, 0.30) 40%,  /* leicht mintfarbener Verlauf */
    rgba(0, 255, 136, 0.40) 60%,  /* sanfter Emerald-Rand */
    rgba(0, 232, 255, 0.50) 80%,  /* dezente Außenleuchte */
    transparent 100%
  );

  /* sichtbarer, feiner Rand */
  border: 5px solid rgba(0, 232, 255, 0.9);

  /* sanfte Tiefenwirkung */
  box-shadow:
    0 0 40px rgba(0, 232, 255, 0.15),
    inset 0 0 60px rgba(0, 245, 181, 0.12);

  opacity: 0.35; /* weicher Gesamteindruck */
  z-index: 1;
  pointer-events: none;
}

/* === STACKBOX LOGO === */
.stackbox-bg-core img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230px;
  transform: translate(-50%, -50%);

}
/* === TOOL GRID === */
.tool-grid {
  position: relative;
  z-index: 3;
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 100px);
  gap: 1.6rem;
  align-items: center;
  justify-items: center;
}

.card-1  { grid-column: 4 / 5; grid-row: 1 / 2; }
.card-2  { grid-column: 6 / 7; grid-row: 2 / 3; }
.card-3  { grid-column: 7 / 8; grid-row: 4 / 5; }
.card-4  { grid-column: 6 / 7; grid-row: 6 / 7; }
.card-5  { grid-column: 4 / 5; grid-row: 8 / 9; }
.card-6  { grid-column: 2 / 3; grid-row: 6 / 7; }
.card-7  { grid-column: 1 / 2; grid-row: 4 / 5; }
.card-8  { grid-column: 2 / 3; grid-row: 2 / 3; }
.card-9  { grid-column: 5 / 6; grid-row: 4 / 5; }
.card-10 { grid-column: 3 / 4; grid-row: 5 / 6; }

/* === TOOL CARDS === */
.tool-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 6px 24px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 340px;
  height: 140px;
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .35s ease;
}
.tool-card:nth-child(odd) { transform: translateY(10px); }
.tool-card:nth-child(even) { transform: translateX(8px); }

.tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 207, 230, 0.35);
  box-shadow:
    0 8px 24px rgba(0, 207, 230, 0.25),
    0 2px 10px rgba(0, 224, 162, 0.15);
}
.tool-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0A0E14;
  margin: .4rem;
}

.tool-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  opacity: .9;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .stackbox-bg-core {
    width: 520px;
    height: 520px;
    top: 58%;
  }
  .stackbox-bg-core img {
    width: 160px;
  }
}