*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: linear-gradient(to bottom, #0a0f1f, #0a0d16);
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
  }
  
  .image-gradient {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    opacity: 0.5;
    z-index: -1;
  }
  
  .layer-blur {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30rem;
    border-radius: 50%;
    box-shadow: 0 0 700px 15px white;
    z-index: 1;
    pointer-events: none;
  }
  
  .stars {
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
      50px 80px white,
      120px 200px white,
      200px 150px white,
      350px 300px white,
      600px 400px white,
      1000px 225px white,
      1200px 435px white,
      1400px 100px white,
      1300px 350px white,
      1600px 500px white,
      1570px 250px white,
      800px 250px white,
      1790px 210px white,
      1910px 320px white,
      2300px 250px white,
      2100px 210px white,
      1910px 320px white;
  
    animation: twinkle 2s infinite alternate;
    position: absolute;
  }
  
  @keyframes twinkle {
    from { opacity: 0.2; }
    to { opacity: 1; }
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29px 40px;
    position: sticky;
    top: 0;
    background: rgba(10, 15, 30, 0.4); 
    backdrop-filter: blur(12px);        
    -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    z-index: 999;
  }
  
  .navbar nav a {
    margin: 0 15px;
    color: #5e5e5e;
    text-decoration: none;
    transition: color 0.3s;
  }
  .navbar nav a:hover {
    color: #fff;
  }
  
  .navbar-container .navbar-menu {
    display: flex;
    text-align: center;
    grid: 1.5rem;
    list-style: none; 
  }
  
  .navbar-container .navbar-menu li a { 
    text-decoration: none;
    color: #fff; 
    font-size: 1.3rem; 
    font-weight: 500; 
    padding: 3px 20px; 
    border-radius: 20px;
    border: 2px solid transparent;
    transition: all 0.7s ease; 
    white-space: nowrap;
 }
  
  .navbar-container .navbar-menu li a:hover {
    background: #0d47a1;
    border: 2px solid #0d47a1;
    color: #fff;
  }

  

  .basket-btn {
    display: flex;
    transform: translateX(725px);
  }
  
  .navbar-toggle {
    display: none;
    background: transparent;
    padding: 10px;
    border: none;
    cursor: pointer;
  }
  
  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background: #fff;
    transition: all 0.3s ease-in-out;
  }
  .navbar nav {
    flex: 1;  
    justify-content: center;
    display: flex;
    gap: 30px;
  }
  
  .login-btn {
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 100px;
    z-index: 1000;
    transition: all 0.3s ease;
  }

  .register-btn {
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    transition: all 0.3s ease;
  }

  /* Profile Icon Styles */
  .profile-container {
    position: absolute;
    top: 7px;
    right: 25px;
    z-index: 1000;
    display: none; /* Hidden by default, shown when logged in */
  }

  .profile-container.active {
    display: block;
  }

  .profile-icon {
    position: relative;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .profile-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
  }

  .profile-icon i {
    font-size: 20px;
  }

  .profile-dropdown {
    position: absolute;
    top: 55px;
    right: 0;
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
  }

  .profile-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .profile-dropdown-header {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .profile-dropdown-header .profile-name {
    font-weight: bold;
    color: white;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .profile-dropdown-header .profile-email {
    color: #999;
    font-size: 12px;
  }

  .profile-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .profile-dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .profile-dropdown-menu li:last-child {
    border-bottom: none;
  }

  .profile-dropdown-menu a {
    display: block;
    padding: 12px 15px;
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .profile-dropdown-menu a:hover {
    background: rgba(102, 126, 234, 0.2);
    color: white;
  }

  .profile-dropdown-menu a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
  }

  .logout-btn {
    color: #ff6b6b !important;
  }

  .logout-btn:hover {
    background: rgba(255, 107, 107, 0.2) !important;
    color: #ff6b6b !important;
  }

  /* Hide login/register when profile is shown */
  .navbar:has(.profile-container.active) .login-btn,
  .navbar:has(.profile-container.active) .register-btn {
    display: none;
  }

  /* Mobile menu profile styles */
  @media (max-width: 880px) {
    .profile-container {
      position: relative;
      top: 0;
      right: 0;
      margin: 10px 0;
    }

    .profile-dropdown {
      position: fixed;
      top: auto;
      right: 20px;
      left: 20px;
      width: auto;
    }

    .navbar-menu .profile-container {
      display: block !important;
      width: 100%;
      margin: 10px 0;
    }
  }

  .Shop-btn {
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    top: 10px;
    transform: translateX(-100px);
    z-index: 1000;
    transition: all 0.3s ease;
  }

  .support-btn {    
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    top: 10px;
    transform: translateX(50px);
    z-index: 1000;
    transition: all 0.3s ease;
  }

  .navbar-container .navbar-menu {
    display: none; /* hidden by default */
  }
  
  @media (max-width: 880px) {
    .navbar {
      backdrop-filter: none;
    }
  
    .navbar nav {
      display: none; /* hide desktop menu */
    }
  
    .navbar-container .navbar-menu {
      display: none;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.7rem !important;
      position: absolute;
      height: 100vh;
      width: 250px;
      top: 0;
      right: 0;
      padding: 5rem 1.5rem;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      z-index: 1100;
    }
  
    .navbar-toggle {
      display: block;
      background: transparent;
      padding: 10px;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 3000;
    }
  
    .navbar-container .navbar-menu.active {
      display: flex;
    }
  
    .navbar-toggle.active .bar:nth-child(2) {
      opacity: 0;
    }
  
    .navbar-toggle.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
  
    .navbar-toggle.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  }
  
  .icons i {
    margin-left: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
  }
  
  .icons i:hover {
    color: #2f6fd6;
  }
  
  .icons b {
    margin-left: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
  }
  .icons b:hover {
      color: #008000;
  }
  
  
  .hero {
    text-align: center;
    padding: 100px 20px;
  }
  
  .hero h1 {
    font-size: 3rem;
    margin: 20px 0;
  }
  
  .hero p {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .hero .users {
    font-size: 1rem;
    margin-bottom: 15px;
    opacity: 0.8;
  }
  
  .users {
    background: radial-gradient(circle at top center, #0d47a1, #000428);
    padding: 10px 20px;
    border-radius: 50px;
    margin: 0 auto 50px;
    letter-spacing: 2px;
    box-shadow: 0px 0px 30px rgba(0, 0, 50, 0.6);
    display: inline-block;
  }
  
  
  .hero .users span {
    color: #4cafef;
    font-weight: bold;
  }
  
  .version {
    margin: 20px 0;
    font-size: 1.1rem;
    opacity: 0.9;
  }
  
  .buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  .btn {
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }
  
  .btn.primary {
    background: #0d47a1;
    color: white;
  }
  
  .btn.primary:hover {
    background: #1565c0;
  }
  
  .btn.secondary {
    background: transparent;
    border: 2px solid #0d47a1;
    color: #0d47a1;
  }
  
  .btn.secondary:hover {
    background: #0d47a1;
    color: white;
  }
  
  
  .atlas-section {
    text-align: center;
    padding: 100px 20px 50px;
  }
  
  .atlas-card {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 250px;
    border-radius: 50px;
    background: linear-gradient(to left, #4cafef, #7f42a7, #6600c5, #5300e0, #2f6fd6, #4cafef);
    background-size: 200%;
    animation: animationGradient 5s linear infinite;
    box-shadow: 0 0 15px rgba(0, 0, 50, 0.6);
    margin: 0 auto 50px;
    padding: 5px;
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
  }
  
  @keyframes animationGradient {
    to {
        background-position: -200%;
    }
  }
  
  .atlas-card .atlas-text {
    position: absolute;
    inset: 5px;
    background: linear-gradient(to bottom, #0a0f1f, #0a0d16);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease;
    font-size: 2rem;
    padding: 20px;
  }
  .logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    color: #555;
    font-size: 1.2rem;
    font-weight: bold;
  }
  
  .logos span {
    opacity: 0.7;
    transition: opacity 0.3s;
  }
  
  .logos span:hover {
    opacity: 1;
  }
  
  /* Media queries for responsive design */
  @media (max-width: 768px) {
    .navbar nav {
      display: none;
    }
    
    .menu-toggle {
      display: block;
    }
    
    .hero h1 {
      font-size: 2.2rem;
    }
    
    .buttons {
      flex-direction: column;
      align-items: center;
    }
  }

  /* Policy section */
  .policy-section {
    padding: 80px 20px 100px;
    max-width: 1200px;
    margin: 0 auto;
    color: #e8ecff;
  }

  .policy-section h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
    color: #8bd3ff;
  }

  .policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
  }

  .policy-card {
    background: linear-gradient(145deg, rgba(21, 33, 66, 0.9), rgba(15, 24, 48, 0.9));
    border: 1px solid rgba(139, 211, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(6px);
  }

  .policy-card h3 {
    color: #9ad8ff;
    font-size: 1.15rem;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .policy-card p,
  .policy-card li {
    color: #d8e2ff;
    font-weight: 500;
    line-height: 1.6;
  }

  .policy-card ul {
    margin: 10px 0 0 18px;
    padding: 0;
  }

  .policy-card li + li {
    margin-top: 6px;
  }

  @media (max-width: 600px) {
    .policy-section {
      padding: 50px 16px 70px;
    }

    .policy-section h2 {
      font-size: 1.8rem;
    }
  }