.navbar,
.navbar__mobile {
	--cyan: oklch(0.859 0.097 223);
	--black: oklch(0 0 0);
	--color-primary: var(--cyan);

	--weight-regular: 400;
	--weight-semibold: 600;
	--weight-bold: 700;

	--text-label: 15px;
	--text-h2: 24px;

	font-family: "Lexend", system-ui, sans-serif;
	line-height: 1.5;
}

@media (min-width: 769px) {
	.navbar,
	.navbar__mobile {
		--text-h2: 36px;
	}
}

:where(.navbar, .navbar__mobile),
:where(.navbar, .navbar__mobile) *,
:where(.navbar, .navbar__mobile) *::before,
:where(.navbar, .navbar__mobile) *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:where(.navbar, .navbar__mobile) img,
:where(.navbar, .navbar__mobile) svg {
	display: block;
	max-width: 100%;
}

:where(.navbar, .navbar__mobile) button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

:where(.navbar, .navbar__mobile) a {
	color: inherit;
	text-decoration: none;
}

.navbar [hidden],
.navbar__mobile [hidden] {
	display: none !important;
}

.app-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-size, 1em);
	height: var(--icon-size, 1em);
	flex-shrink: 0;
}

.app-icon > svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

@keyframes navbar-scroll {
	from {
		background-color: oklch(0.957 0.026 224 / 0%);
		backdrop-filter: blur(0px);
		border-left: 4px solid oklch(1 0 0 / 0%);
		border-right: 4px solid oklch(1 0 0 / 0%);
		border-bottom: 4px solid oklch(1 0 0 / 0%);
	}
	to {
		background-color: oklch(1 0 0 / 80%);
		backdrop-filter: blur(10px);
		border-left: 4px solid oklch(1 0 0 / 100%);
		border-right: 4px solid oklch(1 0 0 / 100%);
		border-bottom: 4px solid oklch(1 0 0 / 100%);
	}
}

@keyframes navbar-scroll-overlay {
	from {
		background-color: oklch(0 0 0 / 0%);
		backdrop-filter: blur(0px);
		border-left: 4px solid oklch(1 0 0 / 0%);
		border-right: 4px solid oklch(1 0 0 / 0%);
		border-bottom: 4px solid oklch(1 0 0 / 0%);
	}
	to {
		background-color: oklch(1 0 0 / 80%);
		backdrop-filter: blur(10px);
		border-left: 4px solid oklch(1 0 0 / 100%);
		border-right: 4px solid oklch(1 0 0 / 100%);
		border-bottom: 4px solid oklch(1 0 0 / 100%);
	}
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 74px;
	animation: navbar-scroll linear both;
	animation-timeline: scroll(root);
	animation-range: 0px 80px;
}

.navbar-host {
	position: sticky;
	top: 0;
	z-index: 10;
}

.navbar .logo {
	height: 34px;
}

@media (min-width: 1020px) {
	.navbar .logo {
		height: 47px;
	}
}

.navbar-host.overlay .navbar {
	animation-name: navbar-scroll-overlay;
}

@supports not (animation-timeline: scroll(root)) {
	.navbar {
		animation: none;
		background-color: oklch(0.957 0.026 224 / 0%);
		border-left: 4px solid oklch(1 0 0 / 0%);
		border-right: 4px solid oklch(1 0 0 / 0%);
		border-bottom: 4px solid oklch(1 0 0 / 0%);
		transition:
			background-color 0.2s linear,
			backdrop-filter 0.2s linear,
			border-color 0.2s linear;
	}

	.navbar--scrolled {
		background-color: oklch(1 0 0 / 80%);
		backdrop-filter: blur(10px);
		border-left-color: oklch(1 0 0 / 100%);
		border-right-color: oklch(1 0 0 / 100%);
		border-bottom-color: oklch(1 0 0 / 100%);
	}
}

.navbar .navbar__brand {
	display: flex;
	align-items: center;
	gap: 24px;
}

.navbar .navbar__brand .navbar__logo {
	min-width: 110px;
}

.navbar .navbar__brand .navbar__logo .logo {
	min-height: 50px;
}

.navbar .navbar__toggle .navbar__toggle-icon {
	width: 16px;
	height: 16px;
}

@media (min-width: 1020px) {
	.navbar .navbar__toggle {
		display: none;
	}
}

.navbar .navbar__menu {
	display: none;
	align-items: center;
	gap: 31px;
}

@media (min-width: 1020px) {
	.navbar .navbar__menu {
		display: flex;
	}
}

.navbar .navbar__menu .navbar__nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.navbar .navbar__menu .navbar__nav a {
	position: relative;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: oklch(0 0 0);
	transition: opacity 0.2s ease;
}

.navbar .navbar__menu .navbar__nav a::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 6px;
	background-color: #000;
	opacity: 0;
	transition:
		width 0.5s ease,
		opacity 0.3s ease;
}

.navbar .navbar__menu .navbar__nav a:hover::after,
.navbar .navbar__menu .navbar__nav a.active::after {
	width: 70%;
	opacity: 1;
}

.navbar .navbar__nav .navbar__about {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.navbar .navbar__nav .navbar__about .navbar__about-trigger {
	position: relative;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: oklch(0 0 0);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.navbar .navbar__nav .navbar__about .navbar__about-trigger::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 6px;
	background-color: #000;
	opacity: 0;
	transition:
		width 0.5s ease,
		opacity 0.3s ease;
}

.navbar .navbar__nav .navbar__about .navbar__about-trigger:hover::after,
.navbar .navbar__nav .navbar__about .navbar__about-trigger.active::after {
	width: 70%;
	opacity: 1;
}

.navbar .navbar__nav .navbar__about .navbar__about-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 8px;
}

.navbar .navbar__nav .navbar__about .navbar__about-dropdown .navbar__about-menu {
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background-color: oklch(1 0 0 / 90%);
	border: 4px solid oklch(1 0 0);
	border-radius: 10px;
	backdrop-filter: blur(2px);
	min-width: 224px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.navbar
	.navbar__nav
	.navbar__about
	.navbar__about-dropdown.navbar__about-dropdown--visible
	.navbar__about-menu {
	display: flex;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.navbar .navbar__nav .navbar__about .navbar__about-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: var(--weight-semibold);
	color: oklch(0.2 0 0);
	white-space: nowrap;
	width: 100%;
	transition: background-color 0.1s ease;
}

.navbar .navbar__nav .navbar__about .navbar__about-option::after {
	content: none;
}

.navbar .navbar__nav .navbar__about .navbar__about-option:hover {
	background-color: oklch(0.82 0.1 220);
}

.navbar
	.navbar__nav
	.navbar__about
	.navbar__about-option:hover
	.navbar__about-option-icon--default {
	opacity: 0;
}

.navbar
	.navbar__nav
	.navbar__about
	.navbar__about-option:hover
	.navbar__about-option-icon--hover {
	opacity: 1;
}

.navbar .navbar__nav .navbar__about .navbar__about-option-icon-stack {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.navbar .navbar__nav .navbar__about .navbar__about-option-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.navbar .navbar__nav .navbar__about .navbar__about-option-icon.navbar__about-option-icon--hover {
	opacity: 0;
}

.navbar .navbar__menu .navbar__actions {
	display: flex;
	align-items: center;
	gap: 32px;
}

.navbar .navbar__actions[data-session="pending"] {
	visibility: hidden;
}

.navbar .navbar__actions .navbar__profile {
	position: relative;
	display: inline-block;
	z-index: 999;
}

.navbar .navbar__actions .navbar__profile-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	padding-top: 8px;
}

.navbar .navbar__actions .navbar__profile-dropdown > div {
	display: none;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background-color: oklch(1 0 0 / 90%);
	border: 4px solid oklch(1 0 0);
	border-radius: 10px;
	backdrop-filter: blur(2px);
	min-width: 160px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.navbar .navbar__actions .navbar__profile-dropdown > div.navbar__profile-dropdown--visible {
	display: flex;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.navbar .navbar__actions .navbar__profile-option {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	border: none;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: var(--weight-semibold);
	color: oklch(0.2 0 0);
	white-space: nowrap;
	width: 100%;
	text-align: left;
	transition: background-color 0.1s ease;
}

.navbar .navbar__actions .navbar__profile-option:hover {
	background-color: oklch(0.95 0.04 220 / 40%);
}

.navbar .navbar__actions .profile {
	display: flex;
	align-items: center;
	gap: 24px;
}

.navbar .navbar__actions .profile .initials {
	position: relative;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid oklch(0 0 0);
	font-weight: var(--weight-bold);
}

.navbar .navbar__actions .profile .square {
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 40px;
	height: 40px;
	background-color: var(--color-primary);
	z-index: -1;
}

.navbar .navbar__actions .profile .app-icon {
	width: 16px;
	height: auto;
}

.navbar__login {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: oklch(0 0 0);
}

.navbar__login span {
	font-size: inherit;
	font-weight: inherit;
}

.navbar__login-icon {
	width: 24px;
	height: 24px;
}

.navbar .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding: 10px 35px;
	border-radius: 100px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.5s ease;
}

.navbar .btn--black {
	background-color: var(--black);
	color: oklch(1 0 0);
}

@media (hover: hover) {
	.navbar .btn--black:hover:not(:disabled) {
		background-color: oklch(0 0 0 / 90%);
	}
}

.navbar .role-picker__wrapper {
	position: relative;
	display: inline-block;
	z-index: 9;
}

.navbar .role-picker__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 8px;
}

.navbar .role-picker__dropdown .wrapper {
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background-color: oklch(1 0 0 / 96%);
	border: 4px solid oklch(1 0 0);
	border-radius: 10px;
	backdrop-filter: blur(20px);
	box-shadow: 0 3px 15px oklch(0 0 0 / 7%);
	min-width: 224px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.navbar .role-picker__dropdown .wrapper.role-picker__dropdown--visible {
	opacity: 1;
	display: flex;
	pointer-events: auto;
	transform: translateY(0);
}

.navbar .role-picker__dropdown.role-picker__dropdown--above {
	top: auto;
	bottom: calc(100% + 8px);
}

.navbar .role-picker__dropdown.role-picker__dropdown--right {
	left: auto;
	right: 0;
}

.navbar .role-picker__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: none;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: var(--weight-semibold);
	color: oklch(0.2 0 0);
	white-space: nowrap;
	width: 100%;
	text-align: left;
	transition: background-color 0.1s ease;
}

.navbar .role-picker__option:hover {
	background-color: oklch(0.82 0.1 220);
}

.navbar .role-picker__option:hover .role-picker__option-icon--default {
	opacity: 0;
}

.navbar .role-picker__option:hover .role-picker__option-icon--hover {
	opacity: 1;
}

.navbar .role-picker__option .role-picker__option-icon--hover {
	opacity: 0;
}

.navbar .role-picker__option-icon-stack {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.navbar .role-picker__option-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.navbar__mobile {
	position: fixed;
	inset: 0;
	z-index: 999999999;
	display: flex;
	flex-direction: column;
	padding: 14px 20px;
	background-color: var(--color-primary);
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__mobile.navbar__mobile--open {
	transform: translate3d(0, 0, 0);
}

@media (min-width: 1020px) {
	.navbar__mobile {
		display: none;
	}
}

.navbar__mobile-header {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 48px;
}

.navbar__mobile-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: oklch(0 0 0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.navbar__mobile-close-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.navbar__mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 1;
}

.navbar__mobile-link {
	font-size: var(--text-h2);
	font-weight: var(--weight-semibold);
	color: oklch(0 0 0);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-align: left;
	width: fit-content;
	position: relative;
}

.navbar__mobile-link::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 32px;
	height: 3px;
	background-color: oklch(0 0 0);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.navbar__mobile-link.navbar__mobile-link--active::after {
	opacity: 1;
}

.navbar__mobile-sub {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-left: 16px;
}

.navbar__mobile-sublink {
	position: relative;
	font-size: 24px;
	font-weight: var(--weight-semibold);
	color: oklch(0 0 0);
	text-decoration: none;
	width: fit-content;
}

.navbar__mobile-sublink::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 32px;
	height: 3px;
	background-color: oklch(0 0 0);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.navbar__mobile-sublink.navbar__mobile-link--active::after {
	opacity: 1;
}

.navbar__mobile-footer {
	padding-top: 32px;
}