/* ── HERO ── */
    .hero {
      position: relative;
      min-height: 100px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-color: #577AD5; 
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;

      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 860px;
      padding: 96px 80px;
    }

    .hero h1 {
      font-weight: 800;
      font-size: 4.4em;
      color: #fff;
      letter-spacing: -0.02em;
      max-width: 720px;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .hero-content { padding: 64px 24px; }
      .hero h1 { font-weight: 800; font-size: 2.4em; color: #fff; letter-spacing: -0.01em; max-width: 720px; }
      .section-data { padding: 64px 24px; }
    }