/* ===== 2026 DESIGN SYSTEM — Shared across all pages ===== */

/* Design Tokens */
:root {
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bg: #fafafa;
	--bg-white: #ffffff;
	--bg-subtle: #f5f5f5;
	--border: #e5e5e5;
	--border-subtle: rgba(0,0,0,0.06);
	--text-1: #171717;
	--text-2: #525252;
	--text-3: #a3a3a3;
	--accent: #6366f1;
	--accent-hover: #4f46e5;
	--accent-subtle: rgba(99,102,241,0.08);
	--radius: 16px;
	--radius-sm: 10px;
	--radius-pill: 9999px;
}

body {
	font-family: var(--font) !important;
	color: var(--text-1);
	background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font) !important;
}

/* Floating Glass Island Nav */
.modern-header {
	position: fixed !important;
	top: 12px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: min(92vw, 1100px) !important;
	border-radius: 16px !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
	/* Default: dark glass for hero overlay */
	background: rgba(0,0,0,0.45) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
	padding: 0 20px !important;
	z-index: 1000 !important;
}

/* Scrolled state: solid light nav */
.modern-header.nav-scrolled {
	background: rgba(255,255,255,0.88) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}
/* Nav on dark hero: all text pure white */
.modern-header .nav-link,
.modern-header .nav-button { color: #fff !important; font-weight: 500 !important; font-size: 13.5px !important; font-family: var(--font) !important;  }
.modern-header .nav-link:hover,
.modern-header .nav-button:hover { color: #fff !important; background: rgba(255,255,255,0.15) !important;  }
.modern-header .logo__title { color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; font-family: var(--font) !important;  }
.modern-header .btn-login { color: #fff !important; font-weight: 500 !important; font-size: 13.5px !important; font-family: var(--font) !important;  }
.modern-header .btn-login:hover { color: #fff !important; background: rgba(255,255,255,0.15) !important;  }
.modern-header .btn-cta { background: #059669 !important; color: #fff !important; font-weight: 600 !important; font-size: 13.5px !important; font-family: var(--font) !important;  }
.modern-header .btn-cta:hover { background: #059669 !important; }

/* Nav links: dark when scrolled */
.modern-header.nav-scrolled .nav-link,
.modern-header.nav-scrolled .nav-button { color: var(--text-2) !important; }
.modern-header.nav-scrolled .nav-link:hover,
.modern-header.nav-scrolled .nav-button:hover { color: var(--text-1) !important; background: var(--bg-subtle) !important; }
.modern-header.nav-scrolled .logo__title { color: var(--text-1) !important; }
.modern-header.nav-scrolled .btn-login { color: var(--text-2) !important; }
.modern-header.nav-scrolled .btn-login:hover { color: var(--text-1) !important; background: var(--bg-subtle) !important; }
.modern-header.nav-scrolled .btn-cta { background: #059669 !important; color: #fff !important; }
.modern-header.nav-scrolled .btn-cta:hover { background: #059669 !important; }

/* Dropdown nav items */
.nav-item.dropdown { position: relative; }
.nav-item.dropdown .nav-link { cursor: pointer; border: none; background: none; }
.nav-item.dropdown .dropdown-menu {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) scale(0.95) !important;
	min-width: 180px !important;
	border-radius: 12px !important;
	padding: 6px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 0.2s !important;
	pointer-events: none !important;
}
.nav-item.dropdown.open .dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) scale(1) !important;
	pointer-events: auto !important;
}
/* Dark hero dropdown */
.modern-header:not(.nav-scrolled) .dropdown-menu {
	background: rgba(0,0,0,0.85) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}
.modern-header:not(.nav-scrolled) .dropdown-item {
	color: rgba(255,255,255,0.8) !important;
}
.modern-header:not(.nav-scrolled) .dropdown-item:hover {
	background: rgba(255,255,255,0.1) !important;
	color: #fff !important;
}
/* Light scrolled dropdown */
.modern-header.nav-scrolled .dropdown-menu {
	background: rgba(255,255,255,0.98) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
}
.modern-header.nav-scrolled .dropdown-item {
	color: var(--text-2) !important;
}
.modern-header.nav-scrolled .dropdown-item:hover {
	background: var(--bg-subtle) !important;
	color: var(--text-1) !important;
}

.header-content {
	min-height: 52px !important;
}

@media (max-width: 768px) {
	.modern-header {
		top: 8px !important;
		width: min(95vw, 100%) !important;
		border-radius: 14px !important;
		padding: 0 12px !important;
	}
}

.logo-link .logo__title {
	font-family: var(--font) !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	color: var(--text-1) !important;
}

.nav-button, .nav-link {
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-2) !important;
	border-radius: var(--radius-sm) !important;
	padding: 6px 12px !important;
}

.nav-button:hover, .nav-link:hover {
	color: var(--text-1) !important;
	background: var(--bg-subtle) !important;
}

/* Header CTA buttons */
.header-cta-secondary {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 7px 16px !important;
	color: var(--text-2) !important;
	border: none !important;
	background: transparent !important;
}
.header-cta-secondary:hover {
	color: var(--text-1) !important;
	background: var(--bg-subtle) !important;
}

.header-cta-primary {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 8px 18px !important;
	background: var(--text-1) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	transition: background 0.15s, transform 0.1s !important;
}
.header-cta-primary:hover {
	background: #333 !important;
	transform: none !important;
}
.header-cta-primary:active {
	transform: scale(0.97) !important;
}

/* Login / CTA buttons */
.btn-login {
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-2) !important;
	border-radius: var(--radius-sm) !important;
	padding: 7px 14px !important;
}
.btn-login:hover {
	color: var(--text-1) !important;
	background: var(--bg-subtle) !important;
}

.btn-cta {
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: var(--text-1) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
	padding: 8px 18px !important;
	border: none !important;
	box-shadow: none !important;
	transition: background 0.15s, transform 0.1s !important;
}
.btn-cta:hover {
	background: #333 !important;
	transform: none !important;
	box-shadow: none !important;
}
.btn-cta:active {
	transform: scale(0.97) !important;
}

/* Dropdown menus */
.dropdown-menu {
	border-radius: 12px !important;
	border: 1px solid var(--border) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
	background: var(--bg-white) !important;
	padding: 6px !important;
}

.dropdown-item {
	border-radius: 8px !important;
	font-family: var(--font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 8px 12px !important;
	color: var(--text-2) !important;
}
.dropdown-item:hover {
	background: var(--bg-subtle) !important;
	color: var(--text-1) !important;
}

/* Footer */
.footer-comprehensive {
	background: var(--text-1) !important;
	border-top: none !important;
	margin-top: 0 !important;
}

.footer-comprehensive h5,
.footer-comprehensive a,
.footer-comprehensive p {
	font-family: var(--font) !important;
}

/* Cookie consent */
.cookie-consent-banner {
	background: var(--text-1) !important;
	border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.cookie-btn-primary {
	background: var(--bg-white) !important;
	color: var(--text-1) !important;
	border-radius: var(--radius-pill) !important;
}
.cookie-btn-secondary,
.cookie-btn-tertiary {
	border-radius: var(--radius-pill) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* Smooth scroll */
html { scroll-behavior: smooth; }