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

    body {
      font-family: 'Inter', 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f8f9fc;
      padding-top: 90px; /* Prevent content jump */
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { max-width: 100%; display: block; }

    /* Header */
    .main-header {
		
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 90px;
       background: linear-gradient(70deg, 
               color-mix(in srgb, var(--primary) 30%, transparent), 
               color-mix(in srgb, var(--primary) 90%, transparent));
	  backdrop-filter: blur(12px);
	  box-shadow: 0 8px 32px rgba(var(--primary), 0.30);
	  border-bottom: 1px solid rgba(var(--primary), 0.25);
      z-index: 1000;
      transition: all 0.4s ease;
      box-shadow: 0 4px 20px rgba(94, 114, 235, 0.15);
    }
    .main-header.scrolled {
      height: 70px;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(15px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }

    .nav-wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      transition: all 0.4s ease;
    }

    .site-logo img {
      height: 52px;
      width: auto;
      transition: all 0.4s ease;
    }
    .main-header.scrolled .site-logo img {
      height: 42px;
    }

    /* Navigation */
    .main-nav > ul {
      display: flex;
      gap: 2.1rem;
      align-items: center;
    }
    .main-nav > ul > li > a {
      font-weight: 600;
      color: #ffffff;
      position: relative;
      transition: color 0.3s ease;
    }
    .main-header.scrolled .main-nav > ul > li > a {
      color: #444;
    }
    .main-nav > ul > li > a:hover {
      color: #ffffff;
    }
    .main-header.scrolled .main-nav > ul > li > a:hover {
      color: color-mix(in srgb, var(--primary) 90%, transparent);
    }
    .main-nav > ul > li > a::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 0;
      height: 2px;
      background: #ffffff;
      transition: width 0.3s ease;
    }
    .main-header.scrolled .main-nav > ul > li > a::after {
      background: color-mix(in srgb, var(--primary) 90%, transparent);
    }
    .main-nav > ul > li > a:hover::after {
      width: 100%;
    }

    /* CTA Button */
    .btn-primary {
      padding: 11px 28px;
      background: rgba(255,255,255,0.25);
      color: white;
      border: 2px solid rgba(255,255,255,0.4);
      border-radius: 50px;
      font-weight: 600;
      transition: all 0.3s ease;
      backdrop-filter: blur(8px);
    }
    .main-header.scrolled .btn-primary {
      background: color-mix(in srgb, var(--primary) 90%, transparent);
      border: none;
      color: white;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(255,255,255,0.3);
    }
    .main-header.scrolled .btn-primary:hover {
      color: white !important;
    }

    /* Dropdown */
    .dropdown {
      position: relative;
    }
    .dropdown-content {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      background: white;
      min-width: 620px;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateX(-50%) translateY(10px);
    }
    .dropdown::before {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
    }
    .dropdown:hover .dropdown-content {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .mega-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.8rem;
    }
    .mega-item a {
      font-weight: 700;
      color: #2c3e50;
      font-size: 1.00rem;
      display: block;
      margin-bottom: 0.4rem;
      transition: color 0.3s;
    }
    .mega-item a:hover { color: color-mix(in srgb, var(--primary) 90%, transparent); }
    .mega-item p {
      font-size: 0.92rem;
      color: #666;
      line-height: 1.5;
    }

    /* Mobile Toggle */
    .mobile-toggle {
      display: none;
      font-size: 26px;
      cursor: pointer;
      color: white;
    }
    .main-header.scrolled .mobile-toggle {
      color: #333;
    }

    /* Mobile Menu */
    .mobile-nav {
      position: fixed;
      top: 90px;
      left: 0;
      width: 100%;
      background: white;
      max-height: calc(100vh - 90px);
      overflow-y: auto;
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .main-header.scrolled ~ .mobile-nav {
      top: 70px;
    }
    .mobile-nav.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }
    .mobile-nav ul { padding: 1.5rem 2rem; }
    .mobile-nav li { padding: 0.9rem 0; border-bottom: 1px solid #eee; }
    .mobile-nav .btn-primary { 
      display: inline-block; 
      margin: 1.5rem 2rem; 
      background: color-mix(in srgb, var(--primary) 90%, transparent);
      border: none;
    }
    .mobile-dropdown { padding-left: 1.5rem; display: none; margin-top: 10px; }
    .mobile-dropdown.open { display: block; }

    /* Responsive */
    @media (max-width: 1024px) {
      .main-nav { display: none; }
      .mobile-toggle { display: block; }
      .nav-wrapper { padding: 0 1.5rem; }
    }