/* Arveon Homepage — floating glass nav, structurally modeled on pieterkoopt.nl's header */

:root {
	--av-cream: #ecd3c9;
	--av-rose: #c6896e;
	--av-rose-dark: #aa6551;
	--av-ink: #1a1512;
	--av-nav-bg: rgba(17, 15, 13, 0.1);
	--av-nav-border: rgba(255, 255, 255, 0.28);
	--av-nav-chip-bg: rgba(255, 255, 255, 0.05);
	--av-nav-text: #000;

	/* --- DERMORIGIN 2.0 palette -------------------------------------
	   Rose gold above is retained as brand equity but now reads as
	   "Warm Technology" rather than pure luxury. The tokens below are
	   the rest of the 2.0 system. Declared here because this file is
	   the design-token source for every other page. */

	/* Tech, premium */
	--av-black: #0c0b0a;
	--av-graphite: #2a2724;
	--av-graphite-soft: #46403b;

	/* Medical, clean, trust */
	--av-white: #ffffff;
	--av-white-warm: #faf6f3;

	/* Data, AI - transparency over any ground */
	--av-glass: rgba(255, 255, 255, 0.08);
	--av-glass-strong: rgba(255, 255, 255, 0.16);
	--av-glass-border: rgba(255, 255, 255, 0.22);
	--av-glass-dark: rgba(12, 11, 10, 0.22);

	/* Human, hope */
	--av-soft-light: #f6e9e0;
	--av-soft-glow: rgba(246, 233, 224, 0.55);
}

html.arveon-home,
body.arveon-home {
	margin: 0;
	padding: 0;
	background: #faf6f3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.arveon-home * {
	box-sizing: border-box;
}

/* ---------- Floating nav wrapper ---------- */

.av-nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 18px 20px 0;
	transition: padding 0.45s cubic-bezier(.4, 0, .2, 1);
}

.av-nav-wrap.is-expanded {
	padding: 0;
}

.av-nav {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 12px;
	background: var(--av-nav-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--av-nav-border);
	border-radius: 14px;
	padding: 16px 28px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	transition: border-radius 0.45s cubic-bezier(.4, 0, .2, 1);
}

.av-nav-wrap.is-expanded .av-nav {
	border-radius: 0;
}

.av-nav__col {
	display: flex;
	align-items: center;
}

.av-nav__col--left {
	justify-content: flex-start;
	gap: 16px;
}

.av-nav__divider {
	width: 1px;
	align-self: stretch;
	margin: -16px 0;
	background: rgba(255, 255, 255, 0.16);
	flex: 0 0 auto;
}

.av-nav__col--center {
	justify-content: center;
}

.av-nav__col--right {
	justify-content: flex-end;
	gap: 10px;
}

/* ---------- Logo ---------- */

.av-nav__logo {
	display: flex;
	align-items: center;
	line-height: 0;
}

.av-nav__logo img {
	height: 28px;
	width: auto;
	display: block;
	/* The logo file is rose-gold, so paint its solid pixels black to match the
	   nav text. Transparent areas stay transparent. Over the dark plate,
	   scroll.css replaces this filter to keep the logo light. */
	filter: brightness(0);
}

/* ---------- Icon buttons (sound, whatsapp) ---------- */

.av-nav__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--av-nav-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	padding: 0;
}

.av-nav__icon-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--av-rose);
}

.av-sound-toggle .av-icon--sound-off {
	display: none;
}

.av-sound-toggle.is-muted .av-icon--sound-on {
	display: none;
}

.av-sound-toggle.is-muted .av-icon--sound-off {
	display: block;
}

/* ---------- Language switch ---------- */

.av-nav__lang {
	position: relative;
}

.av-lang-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--av-nav-text);
	transition: color 0.2s ease;
}

.av-lang-toggle:hover {
	color: var(--av-rose);
}

.av-nav__lang-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 92px;
	background: var(--av-nav-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--av-nav-border);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 10;
}

.av-nav__lang:hover .av-nav__lang-menu,
.av-nav__lang:focus-within .av-nav__lang-menu,
.av-nav__lang.is-open .av-nav__lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.av-lang-option {
	display: block;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 16px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--av-nav-text);
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Only the non-current language is offered as an option to switch to. */
.av-lang-option.is-active {
	display: none;
}

.av-lang-option:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--av-rose);
}

/* ---------- Center nav menu ---------- */

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

.av-nav__menu a {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--av-nav-text);
	text-decoration: none;
	padding: 12px 20px;
	background: var(--av-nav-chip-bg);
	border: none;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.av-nav__menu a:hover {
	color: var(--av-rose);
	background: rgba(255, 255, 255, 0.1);
}

/* ---------- CTA + burger ---------- */

.av-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--av-cream);
	color: var(--av-ink);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 8px 8px 8px 20px;
	border-radius: 5px;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.av-nav__cta:hover {
	background: #fff;
	transform: translateY(-1px);
}

.av-nav__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--av-rose-dark);
	color: var(--av-cream);
	flex: 0 0 auto;
}

.av-nav__cta--mobile .av-nav__cta-icon {
	background: rgba(26, 21, 18, 0.7);
	color: var(--av-cream);
}

.av-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.av-nav__burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--av-nav-text);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.av-nav-wrap.is-menu-open .av-nav__burger span:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.av-nav-wrap.is-menu-open .av-nav__burger span:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- Mobile dropdown menu ---------- */

.av-mobile-menu {
	width: 100%;
	margin-top: 8px;
	background: var(--av-nav-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--av-nav-border);
	border-radius: 14px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, border-radius 0.45s ease, margin-top 0.45s ease;
	display: none;
}

.av-nav-wrap.is-expanded .av-mobile-menu {
	margin-top: 0;
	border-radius: 0;
}

.av-nav-wrap.is-menu-open .av-mobile-menu {
	max-height: 420px;
	opacity: 1;
}

.av-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 14px 18px 4px;
}

.av-mobile-menu__list li + li {
	margin-top: 2px;
}

.av-mobile-menu__list a {
	display: block;
	padding: 12px 4px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--av-nav-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.av-nav__cta--mobile {
	display: flex;
	margin: 14px 18px 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.av-nav {
		grid-template-columns: auto 1fr auto;
	}

	.av-nav__col--center {
		display: none;
	}

	.av-nav__lang {
		display: none;
	}

	.av-nav__burger {
		display: inline-flex;
	}

	.av-mobile-menu {
		display: block;
	}
}

@media (max-width: 480px) {
	.av-nav__col--left {
		gap: 8px;
	}

	.av-nav__cta {
		padding: 9px 14px;
	}
}