/* =========================================================
   IMPORTANT LINKS SECTION - PREMIUM GLASSY
========================================================= */
      .important-links-section {
        position: relative;
        margin-top: 160px;
        margin-bottom: 80px;
        padding: 80px 0 60px 0;
        display: flex;
        justify-content: center;
        color: var(--text-main);
        overflow: hidden;
      }

      /* Floating blurred shapes behind panel */
      .important-links-shapes .blur-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.35;
        z-index: 0;
      }

      .important-links-shapes .shape1 {
        width: 400px;
        height: 400px;
        background: #cf333e;
        top: -120px;
        left: -140px;
      }

      .important-links-shapes .shape2 {
        width: 350px;
        height: 350px;
        background: #490064;
        bottom: -100px;
        right: -100px;
      }

      /* Inner blurred panel */
      .important-links-inner {
        position: relative;
        z-index: 1;
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        /* border-radius: var(--radius-xl); */
        border-radius: 28px 28px 28px 28px / 28px 28px 0% 0%;
        max-width: 1200px;
        width: 100%;
        padding: 80px 60px;
        text-align: center;
        box-shadow:
          0 28px 60px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: all 0.3s ease;
      }

      .important-links-inner:hover {
        transform: translateY(-4px);
        box-shadow:
          0 36px 80px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }

      /* Section heading */
      .important-links-inner h2 {
        font-size: clamp(36px, 5vw, 50px);
        font-family: "Orbitron", sans-serif;
        font-weight: 900;
        margin-bottom: 12px;
        color: var(--brand);
        letter-spacing: 1px;
      }

      /* Subtitle */
      .section-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        margin-bottom: 48px;
      }

      /* GRID */
      .important-links-grid {
        display: flex;
        gap: 64px;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* Link Groups */
      .link-group {
        text-align: left;
        min-width: 180px;
      }

      .link-group h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #cf333e;
        border-bottom: 2px solid var(--brand);
        padding-bottom: 6px;
      }

      /* Links */
      .link-group ul {
        list-style: none;
        padding: 0;
      }

      .link-group li {
        margin-bottom: 16px;
      }

      .link-group a {
        font-size: 15px;
        font-weight: 500;
        color: #000;
        text-decoration: none;
        position: relative;
        transition: all 0.3s ease;
      }

      /* Hover effect with subtle glow */
      .link-group a:hover {
        color: #cf333e;
      }

      .link-group a::after {
        content: "→";
        margin-left: 6px;
        opacity: 0;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
        transform: translateX(-4px);
        color: var(--brand);
      }

      .link-group a:hover::after {
        opacity: 1;
        transform: translateX(0);
      }

      /* =========================================================
   RESPONSIVE DESIGN
========================================================= */
      @media (max-width: 1024px) {
        .important-links-inner {
          padding: 60px 36px;
        }

        .important-links-grid {
          gap: 32px;
        }
      }

      @media (max-width: 768px) {
        .important-links-inner {
          padding: 50px 24px;
        }

        .link-group {
          text-align: center;
        }
        .important-links-grid span {
          width: 90%;
          height: 2px;
          background-color: #cf333e;
          display: block;
          margin: 0 auto 0 auto;
        }

        .link-group h3 {
          border-bottom: none;
          text-decoration: underline #cf333e;
        }

        .important-links-grid {
          flex-direction: column;
          gap: 40px;
        }

        .important-links-shapes .shape1 {
          top: -100px;
          left: -100px;
          width: 300px;
          height: 300px;
        }

        .important-links-shapes .shape2 {
          bottom: -80px;
          right: -80px;
          width: 250px;
          height: 250px;
        }
      }

      @media (max-width: 480px) {
        .important-links-inner {
          padding: 40px 16px;
        }
      }