*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body 
{
  width: 100%;
  font-family:var(--font-sans);
  background-color: color-mix(in oklch, oklch(0.68 0.21 35) 4%, white);
  color:var(--foreground);
  scroll-behavior: smooth;
}

body::before 
{
  content:"";
  position:fixed;
  inset:0;
  background-image: linear-gradient(rgba(7,17,45,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(7,17,45,0.018) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(circle at center, var(--foreground) 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at center, var(--foreground) 40%, transparent 95%);
  z-index:-2;
}

body::after 
{
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at left center, color-mix(in oklch, var(--lime-glow) 18%, transparent), transparent 55%);
  z-index: -1;
}













.container 
{
  width: 100%;
  max-width: 1280px;
  padding-inline: 16px;
  margin: auto;
}














.header-wrapper 
{
  position:fixed;
  width:100%;
  top:0;
  z-index:100;
  background: rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  box-shadow:var(--header-shadow);
  border-bottom: 1px solid var(--border);
}

header 
{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo 
{
  width:120px;
  height:40px;
  display:flex;
  cursor:pointer;
  align-items:center;
}

.logo img 
{
  width:100%;
  height:100%;
  object-fit:contain;
}

nav 
{
  display:flex;
  align-items:center;
  gap:20px;
}

nav a 
{
  text-decoration:none;
  color:var(--muted-foreground);
  font-size:14px;
  font-weight:500;
  transition:0.3s;
}

nav a:hover 
{
  color:var(--navy);
}

.dropdown 
{
  position: relative;
  display: flex;
  align-items: center;
}

.dropbtn 
{
  display:flex;
  align-items:center;
  gap:5px;
}

.dropdown-content 
{
  position: absolute;
  top: 2em;
  left: -2em;
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;
  z-index: 999;
  overflow: hidden;
}

.dropdown-content a 
{
  display:block;
  padding:12px 14px;
  font-size:14px;
  color:var(--muted-foreground);
  text-decoration:none;
}

.dropdown-content a:hover 
{
  color: var(--color-navy);
}

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

.header-right 
{
  display:flex;
  align-items:center;
  gap:14px;
}

.driver-btn 
{
  height:44px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.driver-btn:hover 
{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}

.download-btn 
{
  height:44px;
  padding:0 24px;
  border:none;
  border-radius:999px;
  background:var(--navy);
  color:var(--accent-foreground);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
  box-shadow:var(--shadow-glow);
}

.download-btn:hover 
{
  transform:translateY(-2px);
  opacity:0.95;
}

.menu-toggle 
{
  display:none;
  font-size:28px;
  cursor:pointer;
  color:var(--foreground);
}





















.mobile-menu 
{
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: var(--card);
  z-index: 2000;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: left 0.35s ease;
  box-shadow: var(--shadow-card);
}

.mobile-menu.active 
{
  left: 0;
}

.mobile-menu-top 
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}

.menu-logo 
{
  width:80px;
  cursor:pointer;
}

.menu-logo img 
{
  width:100%;
}

.close-menu 
{
  font-size:22px;
  cursor:pointer;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  transition:0.2s ease;
}

.close-menu:hover 
{
  background: var(--muted);
}

.mobile-links 
{
  display:flex;
  flex-direction:column;
  margin-top:10px;
}

.mobile-links li 
{
  list-style:none;
}

.mobile-links a 
{
  display:flex;
  align-items:center;
  padding:10px 16px;
  border-radius:var(--radius-lg);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  color:var(--muted-foreground);
  transition:0.2s ease;
}

.mobile-links a:hover 
{
  background: var(--secondary);
  color: var(--navy);
}

.mobile-dropdown 
{
  display:flex;
  flex-direction:column;
}

.mobile-dropbtn 
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px;
  cursor:pointer;
}

.mobile-submenu 
{
  display:none;
  flex-direction:column;
  padding-left:20px;
}

.mobile-submenu a 
{
  padding:8px 0;
  font-size:14px;
  text-decoration:none;
  color:var(--muted-foreground);
}

.mobile-dropdown.active .mobile-submenu 
{
  display:flex;
}

.mobile-btns 
{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mobile-btns button 
{
  height:48px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.nav-overlay 
{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1500;
  backdrop-filter: blur(2px);
}

.nav-overlay.active 
{
  opacity: 1;
  visibility: visible;
}
