.setup-hero {
  padding-block: 5rem 3rem;
}

.setup-hero h1 {
  margin-bottom: 1rem;

  font-size: clamp(2.5rem,8vw,5rem);
}

.setup-hero-text {
  max-width: 650px;

  font-size: 1.05rem;
}

.setup-section {
  padding-bottom: 4rem;
}

/* =========================
   GRID
========================= */

.setup-grid,
.tools-grid,
.software-grid {
  display: grid;
  gap: 1rem;
}


/* =========================
   SOFTWARE
========================= */

.software-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  padding: 1.2rem;

  background: var(--background-second-dark);

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.software-card:hover {
  transform: translateY(-3px);

  border-color: rgba(255,255,255,0.12);
}

.software-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 54px;
  height: 54px;

  background: rgba(255,255,255,0.06);

  border-radius: 16px;

  font-size: 1.3rem;
  padding: 13px;
}

.software-icon img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.software-card h3 {
  margin-bottom: 0.5rem;

  font-size: 1rem;
}

.tool-card {
  background: var(--background-second-dark);

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.tool-card:hover {
  transform: translateY(-4px);

  border-color: rgba(255,255,255,0.12);
}

.tool-card a {
  display: block;

  padding: 1.25rem;
  color: var(--text-color-dark);
  text-decoration: none;
}

.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin-bottom: 1rem;

  background: rgba(255,255,255,0.06);

  border-radius: 18px;

  font-size: 1.4rem;
}

.tool-card h3 {
  margin-bottom: 0.75rem;

  font-size: 1.05rem;
  text-decoration: underline;
}

.tool-card p {
  font-size: 0.95rem;
}

/* =========================
   RESPONSIVE
========================= */

@media (min-width: 768px) {

  .setup-grid,
  .tools-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .software-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media (min-width: 1100px) {

  .setup-grid,
  .tools-grid {
    grid-template-columns: repeat(3,1fr);
  }
}