/* =====================================================================
   Otter Solutions — header.css
   Nagłówek, nawigacja, menu mobilne
   ===================================================================== */

.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 80;
	height: var(--header-h);
	background: rgba(11,18,32,.55);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
	background: rgba(11,18,32,.92);
	border-bottom-color: rgba(255,255,255,.12);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}

.header-inner {
	height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.brand-name {
	font-family: var(--font-display); font-weight: 800; font-size: 1.18rem;
	color: #fff; letter-spacing: -.02em;
}
.brand-accent { color: var(--brand-2); }

/* Nav desktop */
.nav-desktop { display: flex; align-items: center; gap: 6px; }
.nav-desktop a {
	color: rgba(255,255,255,.82); font-weight: 500; font-size: .98rem;
	padding: 9px 15px; border-radius: 999px;
	transition: color .2s, background .2s;
}
.nav-desktop a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-desktop .nav-cta {
	background: var(--grad); color: #fff; font-weight: 600;
	box-shadow: 0 8px 20px -6px rgba(79,70,229,.6);
}
.nav-desktop .nav-cta:hover { transform: translateY(-1px); }

/* Mobile toggle */
.nav-toggle {
	display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
	align-items: center; justify-content: center; border-radius: 10px;
}
.nav-toggle span {
	width: 24px; height: 2.5px; background: #fff; border-radius: 2px;
	transition: transform .3s, opacity .3s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav */
.nav-mobile {
	position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 79;
	background: var(--navy-2);
	border-bottom: 1px solid rgba(255,255,255,.1);
	display: flex; flex-direction: column; padding: 12px 18px 22px; gap: 4px;
	max-height: 0; overflow: hidden; opacity: 0;
	transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
}
.nav-mobile.open { max-height: 360px; opacity: 1; }
.nav-mobile a {
	color: rgba(255,255,255,.9); font-weight: 500; font-size: 1.05rem;
	padding: 13px 14px; border-radius: 10px;
}
.nav-mobile a:hover { background: rgba(255,255,255,.08); }

/* Body offset for fixed header */
main { padding-top: var(--header-h); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.nav-desktop { display: none; }
	.nav-toggle { display: flex; }
}