
    :root {
      --bg-dark: #0B1524;
      --bg-dark-alt: #1A2233;
      --accent: #29B6F6;
      --accent-light: #42A5F5;
      --text-primary: #FFFFFF;
      --text-secondary: #B0BEC5;
    }
    body {
      background: linear-gradient(180deg, var(--bg-dark), var(--bg-dark-alt));
      color: var(--text-primary);
      font-family: "Segoe UI", sans-serif;
    }
    a {
      text-decoration: none;
    }
    .navbar {
      background: var(--bg-dark);
    }
    .navbar-brand {
      color: var(--accent);
      font-weight: bold;
      font-size: 1.5rem;
    }
    .nav-link, .dropdown-item {
      color: var(--text-primary) !important;
    }
    .nav-link:hover, .dropdown-item:hover {
      color: var(--accent) !important;
    }
    .btn-login {
      background: var(--accent);
      color: var(--text-primary);
      border-radius: 20px;
      padding: 6px 18px;
      border: none;
    }
    .btn-login:hover {
      background: var(--accent-light);
    }
    .hero {
      text-align: center;
      padding: 100px 20px;
    }
    .hero h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .hero p {
      font-size: 1.2rem;
      color: var(--text-secondary);
      max-width: 600px;
      margin: auto;
    }
    .features {
      padding: 80px 20px;
    }
    .feature-box {
      background: var(--bg-dark-alt);
      border-radius: 8px;
      padding: 30px;
      transition: background 0.3s;
    }
    .feature-box:hover {
      background: var(--bg-dark);
    }
    .feature-box h3 {
      color: var(--accent);
      margin-bottom: 15px;
    }
    .feature-box p {
      color: var(--text-secondary);
    }
    .stats {
      padding: 60px 20px;
      text-align: center;
    }
    .stats .stat {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--accent);
    }
    .stats p {
      color: var(--text-primary);
    }
    .footer {
      background: var(--bg-dark);
      padding: 30px 0;
      text-align: center;
      color: var(--text-secondary);
    }
    .footer a {
      color: var(--accent);
    }
