.dsa-hero {
  position: relative;
  min-height: 100vh;
  background-image: url("../assets/images/bannerpagina.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsa-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.30), #050505 95%),
    rgba(0,0,0,0.45);
}

.dsa-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 0 20px;
}

.dsa-hero-content span {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 8px;
  font-weight: 300;
}

.dsa-hero-content h1 {
  font-family: "Old Standard TT", serif;
  font-size: clamp(100px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: 8px;
  margin: 20px 0;
}

.dsa-hero-content p {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
}

.dsa-main {
  background: #050505;
  color: white;
  padding: 90px 8%;
}

.dsa-intro {
  max-width: 850px;
  margin-bottom: 70px;
}

.section-label {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: #999;
  margin-bottom: 14px;
}

.dsa-intro h2,
.ranking-header h2 {
  font-family: "Old Standard TT", serif;
  font-size: clamp(42px, 6vw, 90px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 20px;
}

.dsa-intro p {
  font-family: "Oswald", sans-serif;
  color: #b5b5b5;
  font-size: 20px;
  line-height: 1.6;
}

.certification-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 100px;
}

.cert-card {
  border: 1px solid #242424;
  background: #0d0d0d;
  padding: 34px;
  min-height: 170px;
}

.cert-card h3 {
  font-family: "Old Standard TT", serif;
  font-size: 42px;
  margin-bottom: 12px;
}

.cert-card p {
  font-family: "Oswald", sans-serif;
  color: #aaa;
}

.cert-card.gold h3 {
  color: #d6a84f;
}

.cert-card.platinum h3 {
  color: #d8d8d8;
}

.cert-card.diamond h3 {
  color: #9de8ff;
}

.ranking-section {
  margin-bottom: 110px;
}

.ranking-header {
  margin-bottom: 36px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ranking-card {
  display: grid;
  grid-template-columns: 80px 110px 1fr auto;
  align-items: center;
  gap: 24px;
  background: #0d0d0d;
  border: 1px solid #242424;
  padding: 18px;
  transition: 0.3s ease;
}

.ranking-card:hover {
  background: #151515;
  transform: translateX(6px);
}

.ranking-position {
  font-family: "Old Standard TT", serif;
  font-size: 44px;
  color: #777;
  text-align: center;
}

.ranking-cover {
  width: 110px;
  height: 110px;
  object-fit: cover;
  background: #191919;
}

.ranking-info h3 {
  font-family: "Oswald", sans-serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 4px;
}

.ranking-info p {
  color: #999;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
}

.ranking-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cert-badge {
  padding: 7px 16px;
  border: 1px solid #333;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cert-badge.gold {
  color: #d6a84f;
  border-color: #d6a84f;
}

.cert-badge.platinum {
  color: #d8d8d8;
  border-color: #d8d8d8;
}

.cert-badge.diamond {
  color: #9de8ff;
  border-color: #9de8ff;
}

.ranking-streams {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
}

.empty-message {
  color: #888;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
}

@media (max-width: 850px) {
  .certification-grid {
    grid-template-columns: 1fr;
  }

  .ranking-card {
    grid-template-columns: 50px 82px 1fr;
  }

  .ranking-cover {
    width: 82px;
    height: 82px;
  }

  .ranking-meta {
    grid-column: 2 / 4;
    align-items: flex-start;
  }
}

/* =========================
   TOP 3 RANKING
========================= */

.ranking-card.top-1 {
  border-color: #d6a84f;
  background:
    linear-gradient(
      90deg,
      rgba(214,168,79,0.16),
      #0d0d0d 42%
    );
}

.ranking-card.top-2 {
  border-color: #d8d8d8;
  background:
    linear-gradient(
      90deg,
      rgba(216,216,216,0.12),
      #0d0d0d 42%
    );
}

.ranking-card.top-3 {
  border-color: #9a6a3a;
  background:
    linear-gradient(
      90deg,
      rgba(154,106,58,0.15),
      #0d0d0d 42%
    );
}

.top-1 .ranking-position {
  color: #d6a84f;
}

.top-2 .ranking-position {
  color: #d8d8d8;
}

.top-3 .ranking-position {
  color: #b37b4b;
}

.top-1 .ranking-cover,
.top-2 .ranking-cover,
.top-3 .ranking-cover {
  transform: scale(1.03);
}

.top-1:hover,
.top-2:hover,
.top-3:hover {
  transform: translateX(10px);
}