.nnb {
	isolation: isolate;
	--nnb-accent: #8FFF7D;
	--nnb-glass: rgba(255, 255, 255, 0.35);
	--nnb-border: rgba(255, 255, 255, 0.6);
	--nnb-blur: 18px;
	--nnb-radius: 20px;
	--nnb-link: #0b2540;
	--nnb-link-hover: #0b2540;
	position: relative;
	width: 100%;
	z-index: 999;
	font-family: inherit;
	box-sizing: border-box;
}

.nnb *,
.nnb *::before,
.nnb *::after {
	box-sizing: border-box;
}

.nnb__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 22px;
	border-radius: var(--nnb-radius);
	overflow: visible;
}

/* Glass layer lives on a pseudo-element so child panels (mobile menu)
   can use their own backdrop-filter. Nested backdrop-filter on a parent
   and child breaks blur in browsers, so the parent must not have it. */
.nnb__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(60% 140% at 85% 120%, rgba(143, 255, 125, 0.35), transparent 70%),
		var(--nnb-glass);
	-webkit-backdrop-filter: blur(var(--nnb-blur)) saturate(160%);
	backdrop-filter: blur(var(--nnb-blur)) saturate(160%);
	border: 1px solid var(--nnb-border);
	box-shadow:
		0 8px 32px rgba(11, 37, 64, 0.08),
		0 0 0 1px rgba(143, 255, 125, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	pointer-events: none;
	z-index: -1;
	transition: box-shadow .3s ease;
}

/* sticky behaviour */
.nnb.is-sticky {
	position: fixed;
	top: 14px;
	left: 0;
	right: 0;
	width: min(1200px, calc(100% - 28px));
	margin: 0 auto;
	animation: nnb-drop .35s ease;
}

.nnb.is-sticky .nnb__inner::before {
	box-shadow:
		0 12px 40px rgba(11, 37, 64, 0.14),
		0 0 0 1px rgba(143, 255, 125, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* transform only: opacity on an ancestor would break the backdrop blur */
@keyframes nnb-drop {
	from { transform: translateY(-20px); }
	to   { transform: translateY(0); }
}

/* logo */
.nnb__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.nnb__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.nnb__logo-text {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0b2540;
	line-height: 1;
}

/* nav */
.nnb__nav {
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.nnb__menu {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nnb__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nnb__link {
	position: relative;
	display: inline-block;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--nnb-link);
	text-decoration: none;
	border-radius: 12px;
	transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}

.nnb__link:hover,
.nnb__link:focus-visible,
.nnb__link.is-active {
	color: var(--nnb-link-hover);
	background: rgba(143, 255, 125, 0.55);
	box-shadow: 0 4px 18px rgba(143, 255, 125, 0.35);
	outline: none;
}

/* CTA button */
.nnb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #0b2540;
	background: #8FFF7D;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(143, 255, 125, 0.5);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.nnb__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(143, 255, 125, 0.7);
	filter: brightness(1.03);
}

.nnb__btn--mobile {
	display: none;
}

/* toggle (hamburger) */
.nnb__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: rgba(143, 255, 125, 0.55);
	border: 1px solid var(--nnb-border);
	border-radius: 12px;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.nnb__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: #0b2540;
	border-radius: 2px;
	transition: transform .3s ease, opacity .3s ease;
}

.nnb.is-open .nnb__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nnb.is-open .nnb__toggle span:nth-child(2) { opacity: 0; }
.nnb.is-open .nnb__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive: tablet (<=1024) ---------- */
@media (max-width: 1024px) {
	.nnb[data-breakpoint="1024"] .nnb__toggle { display: flex; }
	.nnb[data-breakpoint="1024"] .nnb__btn--desktop { display: none; }
	.nnb[data-breakpoint="1024"] .nnb__btn--mobile { display: inline-flex; margin-top: 8px; }

	.nnb[data-breakpoint="1024"] .nnb__nav {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
		background: rgba(255, 255, 255, 0.55);
		-webkit-backdrop-filter: blur(calc(var(--nnb-blur) + 6px)) saturate(170%);
		backdrop-filter: blur(calc(var(--nnb-blur) + 6px)) saturate(170%);
		border: 1px solid var(--nnb-border);
		border-radius: var(--nnb-radius);
		box-shadow: 0 16px 40px rgba(11, 37, 64, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .3s ease, transform .3s ease, visibility .3s;
	}

	.nnb[data-breakpoint="1024"].is-open .nnb__nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nnb[data-breakpoint="1024"] .nnb__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.nnb[data-breakpoint="1024"] .nnb__link {
		display: block;
		text-align: center;
	}
}

/* ---------- Responsive: mobile (<=767) ---------- */
@media (max-width: 767px) {
	.nnb[data-breakpoint="767"] .nnb__toggle { display: flex; }
	.nnb[data-breakpoint="767"] .nnb__btn--desktop { display: none; }
	.nnb[data-breakpoint="767"] .nnb__btn--mobile { display: inline-flex; margin-top: 8px; }

	.nnb[data-breakpoint="767"] .nnb__nav {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
		background: rgba(255, 255, 255, 0.55);
		-webkit-backdrop-filter: blur(calc(var(--nnb-blur) + 6px)) saturate(170%);
		backdrop-filter: blur(calc(var(--nnb-blur) + 6px)) saturate(170%);
		border: 1px solid var(--nnb-border);
		border-radius: var(--nnb-radius);
		box-shadow: 0 16px 40px rgba(11, 37, 64, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .3s ease, transform .3s ease, visibility .3s;
	}

	.nnb[data-breakpoint="767"].is-open .nnb__nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nnb[data-breakpoint="767"] .nnb__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.nnb[data-breakpoint="767"] .nnb__link {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nnb *, .nnb.is-sticky { animation: none !important; transition: none !important; }
}