.hero {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center ;
        padding: 54px 20px 110px;
        background:
          radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 30%),
          radial-gradient(circle at 80% 0%, rgba(255,255,255,0.05), transparent 25%),
          linear-gradient(135deg, var(--hero-1), var(--hero-2));
        overflow: hidden;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,0.03) 35% 38%, transparent 38% 100%);
        pointer-events: none;
      }

      .hero-inner {
        max-width: 1120px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 1;
      }

    #logoHeader {
    width: clamp(80px, 3vw, 100px);
    margin: auto;
    }

      .hero h1 {
        margin: 0;
        color: #fff;
        font-size: clamp(2.2rem, 6vw, 3.5rem);
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -0.03em;
      }

      .hero p {
        margin: 18px auto 0;
        max-width: 760px;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(1rem, 2vw, 1.35rem);
        line-height: 1.5;
      }

     @media (max-width: 560px) {
        .hero {
          padding: 44px 16px 92px;
        }
    }

  .back-to-knowledge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  background: #eef4ff;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800;
  margin: auto;
  transition: 0.2s ease;
}

.back-to-knowledge:hover {
  background: #dfeaff;
}

.back-to-knowledge svg {
  width: 18px;
  height: 18px;
}