:root {
            --primary: #0A192F;
            --background: #F8F9FA;
            --accent-1: #488F83;			/* original: 64B5A6, lighter alternative: 519C8F */
            --accent-2: #6B7280;
            --cta-highlight: #F59E0B;
            --success: #10B981;
            --error: #EF4444;
            --white: #FFFFFF;
            --spacing-xs: 8px;
            --spacing-sm: 16px;
            --spacing-md: 24px;
            --spacing-lg: 32px;
            --spacing-xl: 48px;
            --spacing-2xl: 64px;
            --border-radius-sm: 4px;
            --border-radius-md: 8px;
            --border-radius-full: 999px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
            --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
            --transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

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

        html {
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--primary);
            background-color: var(--background);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: var(--spacing-md);
        }

        h1 {
            font-size: 3.5rem;
            letter-spacing: -0.02em;
        }

        h2 {
            font-size: 2.5rem;
            font-weight: 600;
        }

        h3 {
            font-size: 1.75rem;
            font-weight: 600;
        }

        p {
            margin-bottom: var(--spacing-md);
            color: var(--accent-2);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition);
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .container {
            width: 100%;
			max-width: none;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .section {
            padding: var(--spacing-2xl) 0;
        }

        .section--light {
            background-color: var(--white);
        }

        .section--gradient {
            background: linear-gradient(135deg, #0A192F 0%, #1E3A8A 100%);
            color: var(--white);
        }
		
		.dropdown-toggle {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			white-space: nowrap;
		}

        .dropdown-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .badge-new {
            background-color: var(--primary); /* pink like screenshot */
            color: white;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 4px 6px;
            border-radius: 4px;
            line-height: 1;
        }

        /* Header */
        header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			background-color: transparent;
			backdrop-filter: none;
			padding: var(--spacing-sm) 0;
			border-bottom: none;
			transition: var(--transition);
		}

        header.scrolled {
			background-color: var(--primary);
			border-bottom: 1px solid rgba(0,0,0,0.05);
			box-shadow: var(--shadow-md);
		}
		
        .header-container {
			max-width: 100%;
			margin: 0 auto;
			padding: 0 var(--spacing-lg);
			display: flex;
			align-items: center;
			width: 100%;
		}
		
		.nav-container {
			display: flex;
			align-items: center;
			gap: var(--spacing-lg);
		}
		
		.nav-item {
			position: relative;
		}
		
		.nav-item.active .dropdown-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.nav-item.active .dropdown-icon {
			transform: rotate(180deg);
		}

		.dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			margin-top: 20px;
			width: auto;
			min-width: 280px;
			background: #D1D5DB;
			border-radius: var(--border-radius-md);
			box-shadow: var(--shadow-xl);
			padding: 14px 18px;
			opacity: 0;
			visibility: hidden;
			transform: translateY(10px);
			transition: all 0.25s ease;
			z-index: 1000;
		}

		.dropdown-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 16px;
		}

		.dropdown-column h4 {
			font-size: 1rem;
			margin-bottom: 2px;
			color: var(--accent-1);
		}

		.dropdown-column p {
			font-size: 0.9rem;
			margin-bottom: 14px;
			color: #111827;
		}
		
		.dropdown-item {
			display: block;
			padding: 10px 12px;
			border-radius: 8px;
			text-decoration: none;
			color: #1f2937;
		}

		.dropdown-item:hover {
			background: rgba(34, 197, 94, 0.08);
		}

		.dropdown-item h4 {
			margin: 0 0 4px 0;
			font-size: 0.95rem;
		}

		.dropdown-item p {
			margin: 0;
			font-size: 0.85rem;
			color: #111827;
		}

        .logo {
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--white);
        }

        .logo-black {
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--primary);
        }

        .p,
        .logo span,
        .logo-black span {
            color: var(--accent-1);
        }
		
		.auth-container {
			display: flex;
			align-items: center;
			margin-left: auto;
			gap: var(--spacing-md);
		}

        .nav-links {
            display: flex;
			margin-left: var(--spacing-lg);
			gap: var(--spacing-lg);
        }

        .nav-links a {
            font-weight: 10;
            color: var(--white);
			font-size: 0.95rem;
            position: relative;
            padding: var(--spacing-xs) 0;
        }

        .nav-links a:hover,
		.sign-in-link:hover {
            color: var(--accent-1);
        }

        .nav-links a::after,
		.sign-in-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--accent-1);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        .nav-links a:hover::after,
		.sign-in-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
		
		.sign-in-link {
			font-weight: 10;
            color: var(--white);
			font-size: 0.95rem;
            position: relative;
            padding: var(--spacing-xs) 0;
		}

        .cta-button {
			background-color: var(--accent-1);
			color: var(--white);
			padding: 8px 20px; /* Smaller padding */
			border-radius: 6px; /* Less rounded (was 999px for pill shape) */
			font-weight: 100;
			font-size: 0.95rem; /* Smaller font */
			border: none;
			cursor: pointer;
			transition: var(--transition);
        }

        .cta-button:hover {
			transform: scale(1.03); /* Less scaling */
        }

        .cta-button--secondary {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

        .cta-button--secondary:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        .cta-button--outline {
            background-color: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

        .cta-button--outline:hover {
            background-color: var(--white);
            color: var(--primary);
        }
		
		.has-dropdown {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		.dropdown-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 0;           /* removes baseline offset */
			transform: translateY(1px); /* micro optical correction */
			transition: transform 0.2s ease;
		}

                /* Footer */
        footer {
            background-color: var(--primary);
            color: rgba(255, 255, 255, 0.8);
            padding: var(--spacing-2xl) 0 var(--spacing-xl);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-xl);
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-col .logo {
            font-size: 1.25rem !important;
            margin-bottom: var(--spacing-lg) !important;
            line-height: 1;
            display: block;
        }

        .footer-mission {
            margin: 0 0 var(--spacing-lg) 0 !important;
            padding: 0 !important;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .footer-col h3 {
            color: var(--white);
            font-size: 1.25rem;
            margin-bottom: var(--spacing-lg);
            line-height: 1.2;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--white);
            transform: translateX(4px);
        }

        .footer-mission {
            line-height: 1.8;
            margin-bottom: var(--spacing-md);
        }

        .social-links {
            display: flex;
            gap: 16px;
            margin-top: var(--spacing-md);
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .social-link:hover {
            background-color: var(--accent-1);
            transform: translateY(-2px);
        }

        .copyright {
            text-align: center;
            padding-top: var(--spacing-xl);
            margin-top: var(--spacing-xl);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }

        /* ===== Mobile Header ===== */
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            margin-left: auto;
        }

        .hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--white);
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        header.nav-open { background-color: var(--primary); border-bottom: 1px solid rgba(0,0,0,0.05); }
        header.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        header.nav-open .hamburger span:nth-child(2) { opacity: 0; }
        header.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        .mobile-menu {
            display: none;
            flex-direction: column;
            gap: var(--spacing-md);
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .mobile-nav {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .mobile-nav a {
            color: var(--white);
            font-size: 1rem;
            padding: var(--spacing-xs) 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }

        .mobile-nav a:hover { color: var(--accent-1); }

        .mobile-auth {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding-top: var(--spacing-xs);
        }

        @media (max-width: 768px) {
            .nav-links,
            .auth-container { display: none; }

            .hamburger { display: flex; }

            header.nav-open .mobile-menu { display: flex; }

            header {
                flex-direction: column;
                align-items: stretch;
                height: auto;
            }

            .header-container {
                height: 64px;
            }
        }