.hero {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 46px 20px 70px;
        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;
      }

      .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: 16px auto 0;
        max-width: 760px;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(1rem, 2vw, 1.35rem);
      }

      .navBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }

      .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;
      }

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

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