/* ========================================
   LEGAL HERO
======================================== */

.legal-hero {
  position: relative;

  overflow: hidden;

  padding: 180px 7% 110px;

  color: white;

  background:
    radial-gradient(circle at 78% 24%, rgba(60,155,70,0.22), transparent 34%),
    radial-gradient(circle at 20% 78%, rgba(59,130,246,0.10), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07111f 44%, #0f172a 100%);
}

.legal-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 44px 44px;

  mask-image:
    radial-gradient(circle at center, black 18%, transparent 72%);

  pointer-events: none;
}

.legal-hero-inner {
  position: relative;
  z-index: 2;

  max-width: 980px;
}

.legal-hero h1 {
  margin: 24px 0 28px;

  font-size: clamp(52px, 5.5vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.07em;

  color: white;
}

.legal-hero p {
  max-width: 820px;

  color: #cbd5e1;

  font-size: 20px;
  line-height: 1.85;
}

/* ========================================
   LEGAL CONTENT
======================================== */

.legal-content {
  padding: 100px 7%;

  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.legal-card {
  max-width: 1100px;

  margin: 0 auto;

  padding: 70px;

  border-radius: 42px;

  background: white;

  border:
    1px solid rgba(148,163,184,0.14);

  box-shadow:
    0 28px 80px rgba(15,23,42,0.06);
}

.legal-card h2 {
  margin:
    60px 0 20px;

  color: var(--navy);

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.legal-card h2:first-of-type {
  margin-top: 20px;
}

.legal-card p {
  margin: 0 0 24px;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.9;
}

.legal-card strong {
  color: var(--navy);
}

.legal-card ul {
  margin:
    0 0 28px 24px;

  padding: 0;
}

.legal-card li {
  margin-bottom: 12px;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.8;
}

.legal-card a {
  color: var(--green);

  text-decoration: none;

  transition: opacity 0.3s ease;
}

.legal-card a:hover {
  opacity: 0.75;
}

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

@media (max-width: 768px) {

  .legal-hero {
    padding:
      150px 24px 90px;
  }

  .legal-content {
    padding:
      70px 24px;
  }

  .legal-card {
    padding: 36px;
    border-radius: 28px;
  }

  .legal-hero h1 {
    font-size: clamp(40px, 10vw, 60px);

    line-height: 1;
  }

  .legal-hero p,
  .legal-card p,
  .legal-card li {
    font-size: 16px;
    line-height: 1.8;
  }

}