@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
      background-color: #050B14;
      color: #e2e8f0;
      font-family: 'Inter', sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.7;
      display: flex;
      justify-content: center;
      min-height: 100vh;
}

.container {
      max-width: 800px;
      width: 90%;
      margin: 60px 0;
      background: #0F172A;
      /* Slate 900 */
      padding: 50px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 40px rgba(0, 229, 255, 0.05);
      /* Cyan glow */
}

h1 {
      color: #fff;
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 40px;
      text-align: center;
      letter-spacing: -0.02em;
      background: linear-gradient(to right, #00E5FF, #2979FF);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

h2 {
      color: #00E5FF;
      /* Cyan accent */
      font-size: 1.5rem;
      margin-top: 40px;
      margin-bottom: 20px;
      border-left: 4px solid #00E5FF;
      padding-left: 15px;
}

h3 {
      color: #cbd5e1;
      font-size: 1.2rem;
      margin-top: 30px;
}

p,
div {
      margin-bottom: 1em;
}

a {
      color: #00E5FF;
      text-decoration: none;
      transition: all 0.2s;
      border-bottom: 1px solid transparent;
}

a:hover {
      color: #33efff;
      border-bottom-color: #33efff;
}

ul {
      padding-left: 20px;
      color: #94a3b8;
}

li {
      margin-bottom: 10px;
}

.footer-link {
      margin-top: 60px;
      display: block;
      text-align: center;
      font-size: 1rem;
      color: #64748b;
      font-weight: 600;
}

.footer-link:hover {
      color: #00E5FF;
}

/* Scrollbar */
::-webkit-scrollbar {
      width: 8px;
}

::-webkit-scrollbar-track {
      background: #050B14;
}

::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
      background: #475569;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
      .container {
            width: 100%;
            margin: 0;
            border-radius: 0;
            padding: 20px;
            box-shadow: none;
            border: none;
      }

      h1 {
            font-size: 2rem;
      }
}