html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .hero-bg {
      background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.22), transparent 32%),
        radial-gradient(circle at bottom right, rgba(217, 164, 65, 0.22), transparent 28%),
        linear-gradient(135deg, #071527 0%, #0B1F3A 48%, #12345A 100%);
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(14px);
    }

    .tab-active {
      background: #071527;
      color: #ffffff;
      border-color: #071527;
    }

    .tab-inactive {
      background: #ffffff;
      color: #334155;
      border-color: #e2e8f0;
    }

    .modal-panel {
      animation: modalIn 0.25s ease-out;
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .step-dot-active {
      background: #071527;
      color: #ffffff;
      border-color: #071527;
    }

    .step-dot-muted {
      background: #ffffff;
      color: #64748b;
      border-color: #cbd5e1;
    }


    @media (max-width: 640px) {
      #processModal .modal-panel {
        border-radius: 1.25rem;
      }

      .payment-panel input,
      .payment-panel button,
      .payment-panel p {
        max-width: 100%;
      }

      .payment-panel {
        overflow-wrap: anywhere;
      }
    }

    
  .certificate-paper {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%),
      repeating-linear-gradient(
        0deg,
        rgba(15,23,42,0.015) 0px,
        rgba(15,23,42,0.015) 1px,
        transparent 1px,
        transparent 24px
      );
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  }


/* Mobile/layout hardening */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0;
}

main,
section,
header,
footer {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 767px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .payment-tab {
    justify-content: flex-start;
  }
}