:root {
    --bg-dark: #030419;
    --card-bg: #101127;
    --primary-blue: #295BFF;
    --text-light: #FFFFFF;
    --text-secondary: #adb5bd;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Manrope', sans-serif;
    /* background-color: var(--bg-dark); */
    background-color: #00021f;
    color: var(--text-light);
    line-height: 1.6;
  }
  .container { 
      max-width: 1140px;
      margin: auto; 
      padding: 0 1.5rem; 
    }

  /* Header */
  .main-header { padding: 1.5rem 0; position: relative; }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .nav-brand { 
      width: 20%; 
      display: flex; 
      align-items: center; 
    }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .nav-links a {
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .nav-links a:hover, 
  .nav-links a.active { 
      color: var(--text-light); 
  }

  .language-box { 
      display: flex; gap: 
      0.5rem; 
  }
  .nav-action {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .login-btn, 
  .register-btn 
  {
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding: 6px 14px; border-radius: 8px;
    font-weight: 600; font-size: 0.9rem;
    text-decoration: none;
  }
  .login-btn {
    border: 1px solid #1a3a7b;
    color: #62adff !important;
    font-weight: 200 !important;
  }

  .login-btn:hover { 
      background: var(--primary-blue); 
      color: #fff !important; 
  }
  .register-btn { 
    border: 1px solid #1a3a7b;
    color: #62adff !important;
    font-weight: 200 !important;
  }
  .register-btn:hover { 
    background: var(--primary-blue); 
    color: #fff !important; 
  }

  /* Mobile Toggle */
  .mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .nav-links {
      display: none;
      flex-direction: column;
      /* background: var(--card-bg); */
      background: #090b25;
      position: absolute;
      top: 70px;
      right: 0;
      width: 50%;
      padding: 2rem 0;
      text-align: center;
      z-index: 1000;
    }
    .nav-links.show { display: flex; }
    .mobile-menu-toggle { display: block; }
    .nav-action { flex-direction: column; gap: 0.8rem; }
    .nav-links {
        display: flex;
        align-items: stretch !important;
    }
    .login-btn {
        width: 80%;
    }
    .register-btn { 
        width: 80%;
    }
    .hero-image img {
        width: 100% !important;
    }
    .my-acount-dropdown-btn {
        padding: 10px 14px !important;
        width: 80% !important;
    }
    .my-acount-dropdown {
        width: 100% !important;
    }
    .my-acount-dropdown-content a {
        text-align: start !important;
        padding: 8px 20px !important;
    }
  }
  @media (min-width: 220px) and (max-width: 430px) {
    .nav-brand {
        width: 48%;
    }
    .language-box {
        display: flex;
        gap: 0.1rem;
    }
    .language-box img {
        width: 25px !important;
        height: 25px !important;
    }
  }
  @media (min-width: 431px) and (max-width: 500px) {
    .nav-brand {
        width: 48%;
    }
  }
  @media (min-width: 501px) and (max-width: 768px) {
    .nav-brand {
        width: 40%;
    }
  }


        /* --- 3. Hero Section --- */
        .hero {
            padding: 6rem 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 3rem;
        }

        .hero-text h1 {
            font-size: 3.75rem;
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }

        .hero-text p {
            font-size: 1.1rem;
            margin-bottom: 2.5rem;
            max-width: 450px;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            font-size: 1rem;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
        }
        .get-started-btn {
            background: #1954c2;
            color: white;
            border: 1px solid #050210;
            border-radius: 14px;
            text-decoration: none;
            padding: 2% 8%;
            font-size: 1.2rem;
        }

        .btn-primary {
            background-color: var(--primary-blue);
            color: var(--text-light);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(41, 91, 255, 0.2);
        }

        .hero-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-image img {
            width: 34rem;
            -webkit-mask-image: radial-gradient(black, transparent);
        }
        .btn.btn-primary {
            background: #1b2f72;
            color: white;
            border: 1px solid #050210;
            border-radius: 14px;
        }
        .btn.btn-bronze {
            background: #492928;
            color: white;
            border: 1px solid #050210;
            border-radius: 14px;
        }
        .btn.btn-dark {
            background: #272a42;
            color: white;
            border: 1px solid #050210;
            border-radius: 14px;
        }
        .hero-image svg {
            max-width: 450px;
            width: 100%;
            height: auto;
            color: var(--primary-blue);
            filter: drop-shadow(0 0 25px rgba(41, 91, 255, 0.6));
        }

        /* --- 4. Tiers Section --- */
        .tiers-section {
            padding: 3rem 0;
        }
        
        .tiers-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .tier-card {
            /* background-color: var(--card-bg); */
            background-color: #090b25;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            display: flex;
            flex-direction: column;
            border: 1px solid #101e58;
        }

        .tier-card h3 {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
        }

        .tier-card p {
            /* color: var(--text-secondary); */
            color: #ffffff;
            margin-bottom: 2rem;
            flex-grow: 1; /* Pushes button to the bottom */
            font-size: 1.2rem;
        }

        .tier-card .btn {
            width: 100%;
            padding-top: 0.9rem;
            padding-bottom: 0.9rem;
            text-decoration: none;
        }

        .btn-bronze { background-color: var(--accent-bronze); color: var(--text-light); }
        .btn-bronze:hover { box-shadow: 0 10px 20px rgba(100, 66, 42, 0.2); }

        .btn-dark { background-color: var(--btn-dark); color: var(--text-light); }
        /* .btn-dark:hover { background-color: var(--primary-blue); box-shadow: 0 10px 20px rgba(41, 91, 255, 0.2); } */

        /* --- 5. How It Works Section --- */
        .how-it-works {
            padding: 6rem 0;
            text-align: center;
        }

        .how-it-works .section-header {
            max-width: 650px;
            margin: 0 auto 4rem auto;
        }

        .how-it-works h2 {
            font-size: 2.75rem;
            margin-bottom: 1rem;
        }
        .how-it-works .section-header p {           
           color: white;
           font-size: 1.1rem;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .step-card {
            /* background-color: var(--card-bg); */
            background-color: #080b25;
            padding: 3rem 2rem;
            border-radius: 12px;
            border: 1px solid #0e163b;
        }

        .step-card .icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 72px;
            height: 72px;
            margin-bottom: 1.5rem;
            background-color: rgba(41, 91, 255, 0.1);
            border-radius: 12px;
        }

        .step-card svg {
            width: 36px;
            height: 36px;
            color: var(--primary-blue);
        }

        .step-card h3 {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
        }

        /* --- 6. Footer --- */
        .main-footer {
            padding: 2.5rem 0;
            margin-top: 3rem;
            border-top: 1px solid var(--btn-dark);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .footer-links {
            display: flex;
            gap: 1.5rem;
        }

        .footer-links a {
            color: var(--text-secondary);
        }
        
        .footer-links a:hover {
            color: var(--text-light);
        }


        /* --- 7. Responsive Design --- */
        @media (max-width: 992px) {
            .hero {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 4rem 0;
            }
            .hero-text p {
                margin-left: auto;
                margin-right: auto;
            }
            .hero-image {
                grid-row: 1; /* Move image to the top on smaller screens */
                margin-bottom: 2rem;
            }
            .hero-image svg {
                max-width: 350px;
            }

            .tiers-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                display: none; /* Simple hiding for this example; a real site would use JS for a hamburger menu */
            }
            .mobile-menu-toggle {
                display: block;
            }
            
            .hero h1 { font-size: 3rem; }
            .how-it-works h2 { font-size: 2.25rem; }

            .steps-grid {
                grid-template-columns: 1fr;
            }

            .footer-content {
                flex-direction: column;
                gap: 1rem;
            }
        }

        @media (max-width: 576px) {
            .hero h1 { font-size: 2.5rem; }

            .tiers-grid {
                grid-template-columns: 1fr;
            }
            
        }
        .my-acount-dropdown {
            position: relative;
            display: inline-block;
          }
      
          .my-acount-dropdown-btn {
              background: transparent;
              color: #37a2f1;
              padding: 10px 35px;
              font-size: 0.9rem;
              border: none;
              border-radius: 8px;
              cursor: pointer;
              border: 1px solid #1a3a7b;
          }
      
          .my-acount-dropdown-content {
            display: none;
            position: absolute;
            background: #00021f;
            min-width: 100%;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            border-radius: 6px;
            z-index: 1;
            border: 1px solid #1a3a7b;
          }
      
          .my-acount-dropdown-content a {
            color: #62adff;
            padding: 8px 6px;
            text-decoration: none;
            display: block;
            font-size: 0.9rem !important;
            font-weight: 200;
          }
      
          .my-acount-dropdown-content a:hover {
            border-radius: 6px;
            background-color: #234eda;
          }
      
          .my-acount-dropdown:hover .my-acount-dropdown-content {
            display: block;
          }