:root {
     --primary-blue: #1A5F7A;
     --secondary-blue: #57C5B6;
     --accent-orange: #FF7A3D;
     --accent-purple: #8A2BE2;
     --light-bg: #F8FAFC;
     --dark-text: #2D3748;
     --light-text: #718096;
     --white: #FFFFFF;
     --header-bg: #FFFFFF;
     --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     --radius: 10px;
     --transition: all 0.3s ease;
 }

 body {
     font-family: 'Poppins', sans-serif;
     background-color: var(--light-bg);
     color: var(--dark-text);
     margin: 0;
     padding-top: 80px;
     overflow-x: hidden;
     position: relative;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }

 .container {
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header & Navigation */
 header {
     background-color: var(--header-bg);
     box-shadow: var(--shadow);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     padding: 10px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     transition: var(--transition);
     z-index: 1002;
 }

 .logo:hover {
     transform: scale(1.05);
 }

 /* Mobile Menu Button */
 .mobile-menu-btn {
     display: none;
     background: transparent;
     border: none;
     color: var(--primary-blue);
     width: 44px;
     height: 44px;
     border-radius: var(--radius);
     font-size: 24px;
     cursor: pointer;
     transition: var(--transition);
     z-index: 1002;
 }

 /* Main Navigation - Desktop */
 nav {
     display: flex;
     align-items: center;
     gap: 30px;
     transition: all 0.3s ease;
 }

 .nav-menu {
     display: flex;
     list-style: none;
     gap: 10px;
     align-items: center;
     margin: 0;
     padding: 0;
 }

 .nav-item {
     position: relative;
 }

 .nav-link {
     text-decoration: none;
     color: var(--dark-text);
     font-weight: 500;
     font-size: 16px;
     padding: 12px 18px;
     border-radius: var(--radius);
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .nav-link:hover {
     background: rgba(26, 95, 122, 0.05);
     color: var(--primary-blue);
     transform: translateY(-2px);
 }

 .nav-link.active {
     background: rgba(87, 197, 182, 0.1);
     color: var(--secondary-blue);
     font-weight: 600;
 }

 /* Dropdown Menus - DESKTOP */
 .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     background: var(--white);
     min-width: 280px;
     border-radius: var(--radius);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: var(--transition);
     z-index: 1000;
     padding: 15px 0;
     border: 1px solid rgba(0, 0, 0, 0.05);
     max-height: 420px;
     overflow-y: auto;
 }

 .dropdown::before {
     content: '';
     position: absolute;
     top: -8px;
     left: 30px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 8px solid var(--white);
 }

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

 .dropdown-header {
     padding: 0 20px 10px;
     border-bottom: 1px solid #e2e8f0;
     margin-bottom: 10px;
 }

 .dropdown-header h4 {
     color: var(--primary-blue);
     font-size: 16px;
     margin: 0;
     text-align: left;
 }

 .dropdown-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 15px;
     padding: 0 20px;
 }

 .dropdown-section {
     margin-bottom: 15px;
 }

 .dropdown-section h5 {
     color: var(--primary-blue);
     font-size: 14px;
     margin-bottom: 8px;
     font-weight: 600;
     text-align: left;
 }

 .dropdown-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
     color: var(--dark-text);
     text-decoration: none;
     transition: var(--transition);
     border-radius: 6px;
     text-align: left;
 }

 .dropdown-link:hover {
     background: rgba(26, 95, 122, 0.05);
     color: var(--primary-blue);
     padding-left: 15px;
 }

 .dropdown-link i {
     color: var(--secondary-blue);
     width: 20px;
     text-align: center;
 }

 /* CTA Buttons */
 .cta-buttons {
     display: flex;
     gap: 10px;
     align-items: center;
     margin-left: 20px;
 }

 .btn-login {
     background: transparent;
     border: 2px solid rgba(26, 95, 122, 0.2);
     color: var(--primary-blue);
     padding: 10px 24px;
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     text-decoration: none;
     display: inline-block;
 }

 .btn-login:hover {
     background: rgba(26, 95, 122, 0.05);
     border-color: var(--secondary-blue);
     transform: translateY(-2px);
 }

 .btn-signup {
     background: linear-gradient(135deg, var(--accent-orange), #FF5722);
     color: var(--white);
     border: none;
     padding: 12px 28px;
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     box-shadow: 0 4px 15px rgba(255, 122, 61, 0.3);
     text-decoration: none;
     display: inline-block;
 }

 .btn-signup:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 122, 61, 0.4);
     background: linear-gradient(135deg, #FF8A3D, #FF5722);
 }

 /* ============ MOBILE STYLES - FIXED ============ */
 @media (max-width: 992px) {
     .mobile-menu-btn {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     nav {
         position: fixed;
         top: 0;
         left: -100%;
         width: 85%;
         max-width: 380px;
         height: 100vh;
         background: var(--white);
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         padding: 100px 20px 40px;
         transition: left 0.3s ease;
         overflow-y: auto;
         z-index: 999;
         box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
         gap: 20px;
     }

     nav.active {
         left: 0;
     }

     /* Simple overlay - no color issues */
     .menu-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.5);
         z-index: 998;
         cursor: pointer;
     }

     .menu-overlay.active {
         display: block;
     }

     .nav-menu {
         flex-direction: column;
         gap: 5px;
         width: 100%;
         align-items: flex-start;
         margin: 0;
         padding: 0;
     }

     .nav-item {
         width: 100%;
         margin: 0;
         padding: 0;
     }

     .nav-link {
         padding: 15px 0;
         font-size: 17px;
         color: var(--dark-text);
         justify-content: flex-start;
         border: none;
         width: 100%;
         border-radius: 0;
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }

     .nav-link i:first-child {
         width: 24px;
         margin-right: 10px;
         color: var(--secondary-blue);
     }

     .nav-link .fa-chevron-down {
         margin-left: auto;
         margin-right: 0;
         transition: transform 0.3s ease;
         font-size: 14px;
         color: var(--primary-blue);
     }

     /* Mobile Dropdown */
     .dropdown {
         position: static;
         background: rgba(26, 95, 122, 0.03);
         box-shadow: none;
         padding: 0;
         margin: 0;
         max-height: 0;
         opacity: 0;
         visibility: visible;
         display: none;
         border-radius: 0;
         border: none;
         border-left: 3px solid var(--secondary-blue);
         margin-left: 15px;
         margin-top: 5px;
         margin-bottom: 5px;
         width: calc(100% - 15px);
         transition: max-height 0.3s ease;
         overflow: hidden;
     }

     .dropdown.active {
         display: block;
         max-height: 800px;
         opacity: 1;
         padding: 10px 0;
     }

     .dropdown::before {
         display: none;
     }

     .dropdown-header {
         padding: 10px 15px;
         margin-bottom: 5px;
         border-bottom: 1px solid rgba(26, 95, 122, 0.1);
         text-align: left;
     }

     .dropdown-header h4 {
         color: var(--primary-blue);
         font-size: 15px;
         font-weight: 700;
         text-align: left;
         margin: 0;
     }

     .dropdown-grid {
         grid-template-columns: 1fr;
         padding: 0;
         margin: 0;
         gap: 10px;
     }

     .dropdown-section {
         margin: 0;
         padding: 0 15px;
         width: 100%;
     }

     .dropdown-section h5 {
         color: var(--primary-blue);
         font-size: 14px;
         margin: 12px 0 8px;
         font-weight: 600;
         text-align: left;
         padding-left: 0;
         border-bottom: 1px dashed rgba(26, 95, 122, 0.1);
         padding-bottom: 5px;
     }

     .dropdown-link {
         padding: 12px 10px;
         font-size: 15px;
         color: var(--dark-text);
         width: 100%;
         text-align: left;
         justify-content: flex-start;
         border-radius: 6px;
         margin: 2px 0;
     }

     .dropdown-link i {
         width: 22px;
         margin-right: 12px;
         color: var(--secondary-blue);
         text-align: center;
     }

     .dropdown-link:hover {
         background: rgba(26, 95, 122, 0.08);
         padding-left: 15px;
     }

     /* CTA Buttons in mobile */
     .cta-buttons {
         margin-left: 0;
         margin-top: 30px;
         width: 100%;
         flex-direction: column;
         gap: 15px;
         align-items: stretch;
     }

     .btn-login,
     .btn-signup {
         width: 100%;
         text-align: center;
         padding: 14px 20px;
         font-size: 16px;
     }

     img[style*="height:60px"] {
         height: 50px !important;
     }
 }

 @media (max-width: 768px) {
     body {
         padding-top: 70px;
     }

     nav {
         width: 90%;
         padding: 90px 20px 30px;
     }

     .nav-link {
         padding: 14px 0;
         font-size: 16px;
     }

     .dropdown-link {
         padding: 11px 10px;
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     img[style*="height:60px"] {
         height: 45px !important;
     }

     nav {
         width: 100%;
         max-width: 100%;
         padding: 80px 15px 30px;
     }

     .dropdown-section {
         padding: 0 10px;
     }
 }

 /* Demo Content */
 .demo-content {
     padding: 40px 20px;
     max-width: 1200px;
     margin: 0 auto;
     text-align: center;
 }

 .demo-content h1 {
     color: var(--primary-blue);
     margin-bottom: 20px;
     font-size: 2.5rem;
 }

 .demo-content p {
     color: var(--light-text);
     font-size: 1.1rem;
     max-width: 800px;
     margin: 0 auto 30px;
     line-height: 1.8;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .feature-card {
     background: var(--white);
     padding: 30px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     text-align: left;
     transition: var(--transition);
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .feature-icon {
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     font-size: 24px;
     margin-bottom: 20px;
 }

 .feature-card h3 {
     color: var(--primary-blue);
     margin-bottom: 15px;
     font-size: 1.3rem;
 }

 .feature-card p {
     color: var(--light-text);
     margin-bottom: 0;
     text-align: left;
 }