/* =========================================================
   1TROOPER — GLASSMORPHISM HEADER
   ========================================================= */

:root {
	--ot-blue-1:#4A96F6 !important;
	--ot-blue-2:#5BA5FF !important;
	--ot-accent:#4D9BFE !important;
	--ot-ink:#0B1030 !important;
	--ot-glass-bg:rgba(10, 14, 36, 0.42) !important;
	--ot-glass-bg-scrolled:rgba(9, 13, 32, 0.72) !important;
	--ot-border:rgba(255, 255, 255, 0.14) !important;
	--ot-text:#ffffff !important;
	--ot-text-dim:rgba(255, 255, 255, 0.72) !important;
	--ot-gutter:clamp(20px, 4vw, 64px) !important;
}

body {
	padding-top: 0 !important;
}

.onetrooper-header {
	position:fixed !important;
	top:0 !important;
	left:0 !important;
	right:0 !important;
	z-index:9999 !important;
	font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.onetrooper-header::before {
	content:"" !important;
	position:absolute !important;
	inset:0 !important;
	z-index:0 !important;
	background:linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
		var(--ot-glass-bg) !important;
	backdrop-filter:blur(18px) saturate(1.4) !important;
	-webkit-backdrop-filter:blur(18px) saturate(1.4) !important;
	border-bottom:1px solid var(--ot-border) !important;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.12) !important;
	transition:background 300ms ease, box-shadow 300ms ease !important;
}

.onetrooper-header.is-scrolled::before {
	background:linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
		var(--ot-glass-bg-scrolled) !important;
	box-shadow:0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

.onetrooper-header__inner {
	position:relative !important;
	z-index:2 !important;
	max-width:1440px !important;
	margin:0 auto !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:24px !important;
	padding:16px var(--ot-gutter) !important;
	transition:padding 300ms ease !important;
}

.onetrooper-header.is-scrolled .onetrooper-header__inner {
	padding-top:11px !important;
	padding-bottom:11px !important;
}

/* ---------- Brand ---------- */

.onetrooper-brand {
	display:inline-flex !important;
	align-items:center !important;
	gap:10px !important;
	text-decoration: none !important;
	flex-shrink:0 !important;
}

.onetrooper-brand__mark {
	width:34px !important;
	height:34px !important;
	display:block !important;
	border-radius:9px !important;
	transition:transform 250ms ease !important;
}

.onetrooper-header.is-scrolled .onetrooper-brand__mark {
	width:30px !important;
	height:30px !important;
}

.onetrooper-brand:hover .onetrooper-brand__mark {
	transform:rotate(-6deg) scale(1.05) !important;
}

.onetrooper-brand__text {
	font-size:20px !important;
	font-weight:800 !important;
	letter-spacing:-0.02em !important;
	color: var(--ot-text) !important;
	line-height:1 !important;
}

/* ---------- Primary nav ---------- */

.onetrooper-nav {
	flex:1 !important;
	display:flex !important;
	justify-content:center !important;
}

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

.onetrooper-nav__item {
	position:relative !important;
}

.onetrooper-nav__link {
	display:inline-flex !important;
	align-items:center !important;
	gap:6px !important;
	background:none !important;
	border:0 !important;
	cursor:pointer !important;
	padding:10px 14px !important;
	border-radius:8px !important;
	font-size:14.5px !important;
	font-weight:600 !important;
	color: var(--ot-text) !important;
	text-decoration: none !important;
	white-space:nowrap !important;
	transition:background 180ms ease, color 180ms ease !important;
}

.onetrooper-nav__link:hover,
.onetrooper-nav__item.is-open .onetrooper-nav__link {
	background:rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

.onetrooper-caret {
	transition:transform 200ms ease !important;
	opacity:0.75 !important;
}

.onetrooper-nav__item.is-open .onetrooper-caret {
	transform:rotate(180deg) !important;
}

/* ---------- Dropdowns ---------- */

.onetrooper-dropdown {
	position:absolute !important;
	top:calc(100% + 14px) !important;
	left:50% !important;
	transform:translateX(-50%) translateY(6px) scale(0.98) !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 30%),
		rgba(13, 17, 38, 0.99) !important;
	border:1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius:18px !important;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.06) inset,
		0 2px 6px rgba(0,0,0,0.2),
		0 16px 40px rgba(0,0,0,0.35),
		0 32px 80px rgba(3,6,20,0.45) !important;
	padding:10px !important;
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none !important;
	transition:opacity 180ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1), visibility 220ms !important;
	transform-origin:top center !important;
	z-index:5 !important;
}

.onetrooper-nav__item.is-open .onetrooper-dropdown {
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
	transform:translateX(-50%) translateY(0) scale(1) !important;
}

.onetrooper-dropdown--simple {
	min-width:240px !important;
	display:flex !important;
	flex-direction:column !important;
	gap:1px !important;
}

.onetrooper-dropdown--simple a,
.onetrooper-dropdown__col a {
	position:relative !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:10px !important;
	padding:11px 12px !important;
	border-radius:10px !important;
	color: var(--ot-text-dim) !important;
	text-decoration: none !important;
	font-size:14px !important;
	font-weight:500 !important;
	transition:background 150ms ease, color 150ms ease !important;
}

.onetrooper-dropdown--simple a::after,
.onetrooper-dropdown__col a::after {
	content:"" !important;
	flex-shrink:0 !important;
	width:6px !important;
	height:6px !important;
	border-top:1.5px solid currentColor !important;
	border-right:1.5px solid currentColor !important;
	transform:translateX(-4px) rotate(45deg) !important;
	opacity:0 !important;
	transition:transform 180ms ease, opacity 180ms ease !important;
}

.onetrooper-dropdown--simple a:hover,
.onetrooper-dropdown__col a:hover {
	background:rgba(255, 255, 255, 0.07) !important;
	color: #fff !important;
}

.onetrooper-dropdown--simple a:hover::after,
.onetrooper-dropdown__col a:hover::after {
	transform:translateX(0) rotate(45deg) !important;
	opacity:0.7 !important;
}

.onetrooper-dropdown--mega {
	left:0 !important;
	right:auto !important;
	transform:translateX(var(--ot-shift, 0px)) translateY(6px) scale(0.98) !important;
	display:grid !important;
	gap:4px !important;
	padding:14px !important;
}

.onetrooper-nav__item.is-open .onetrooper-dropdown--mega {
	transform:translateX(var(--ot-shift, 0px)) translateY(0) scale(1) !important;
}

.onetrooper-dropdown--cols-1 {
	width:min(560px, 84vw) !important;
	grid-template-columns:248px 1fr !important;
}

.onetrooper-dropdown--cols-2 {
	width:min(740px, 86vw) !important;
	grid-template-columns:248px 1fr 1fr !important;
}

.onetrooper-dropdown__promo {
	position:relative !important;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(91,165,255,0.24), transparent 55%),
		linear-gradient(165deg, rgba(74,150,246,0.16), rgba(255,255,255,0.02)) !important;
	border:1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius:14px !important;
	padding:20px !important;
	display:flex !important;
	flex-direction:column !important;
	gap:9px !important;
	overflow:hidden !important;
}

.onetrooper-dropdown__badge {
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:32px !important;
	height:32px !important;
	border-radius:9px !important;
	background:linear-gradient(135deg, var(--ot-blue-1), var(--ot-blue-2)) !important;
	color:#fff !important;
	box-shadow:0 6px 14px rgba(74,150,246,0.35) !important;
	margin-bottom:2px !important;
}

.onetrooper-dropdown__eyebrow {
	margin:0 !important;
	font-size:11px !important;
	font-weight:700 !important;
	letter-spacing:0.11em !important;
	text-transform:uppercase !important;
	color:var(--ot-accent) !important;
}

.onetrooper-dropdown__promo h4 {
	margin:0 !important;
	font-size:16px !important;
	font-weight:700 !important;
	color:#fff !important;
	line-height:1.3 !important;
}

.onetrooper-dropdown__promo p {
	margin:0 !important;
	font-size:13px !important;
	line-height:1.62 !important;
	color:var(--ot-text-dim) !important;
	flex:1 !important;
}

.onetrooper-mini-cta {
	position:relative !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:8px !important;
	align-self:flex-start !important;
	margin-top:6px !important;
	padding:10px 15px !important;
	border-radius:9px !important;
	background:linear-gradient(135deg, var(--ot-blue-1), var(--ot-blue-2)) !important;
	border:1px solid rgba(255,255,255,0.22) !important;
	color: #fff !important;
	font-size:13px !important;
	font-weight:700 !important;
	text-decoration: none !important;
	overflow:hidden !important;
	box-shadow:0 6px 16px rgba(55,137,238,0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	transition:transform 180ms ease, box-shadow 180ms ease !important;
}

.onetrooper-mini-cta:hover {
	transform:translateY(-1px) !important;
	box-shadow:0 10px 22px rgba(74, 150, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.onetrooper-dropdown__col {
	display:flex !important;
	flex-direction:column !important;
	gap:1px !important;
	padding:6px 4px 6px 18px !important;
	border-left:1px solid rgba(255, 255, 255, 0.08) !important;
}

.onetrooper-dropdown__col-heading {
	font-weight: 700 !important;
	color: #fff !important;
	font-size: 13.5px !important;
	letter-spacing:0.01em !important;
	margin-bottom:4px !important;
}

.onetrooper-dropdown__col-heading + a {
	margin-top:0 !important;
}

/* ---------- Header actions ---------- */

.onetrooper-header__actions {
	display:flex !important;
	align-items:center !important;
	gap:14px !important;
	flex-shrink:0 !important;
}

/* ---------- CTA (shine button) ---------- */

.onetrooper-cta {
	--blue-1:var(--ot-blue-1) !important;
	--blue-2:var(--ot-blue-2) !important;

	position:relative !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:14px !important;

	height:46px !important;
	padding:0 10px 0 20px !important;

	border-radius:9px !important;

	background:linear-gradient(135deg, var(--blue-1) 0%, var(--blue-2) 100%) !important;
	border:1px solid rgba(255, 255, 255, 0.22) !important;

	color: #fff !important;
	font-family:inherit !important;
	font-size:14.5px !important;
	font-weight:600 !important;
	letter-spacing:-0.1px !important;
	line-height:1 !important;

	text-decoration: none !important;

	box-shadow:0 6px 16px rgba(55, 137, 238, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 60, 150, 0.08) !important;

	overflow:hidden !important;
	transform:translateZ(0) !important;

	transition:transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, filter 220ms ease !important;
}

.onetrooper-cta::after {
	content:"" !important;
	position:absolute !important;
	top:0 !important;
	left:10% !important;
	right:10% !important;
	height:1px !important;
	background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent) !important;
	pointer-events:none !important;
}

.onetrooper-cta__text {
	position:relative !important;
	z-index:3 !important;
	white-space:nowrap !important;
}

.onetrooper-cta__arrow {
	position:relative !important;
	z-index:3 !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:27px !important;
	height:27px !important;
	border-radius:7px !important;
	background:rgba(255, 255, 255, 0.16) !important;
	border:1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
	transition:transform 220ms ease, background 220ms ease !important;
}

.onetrooper-cta__arrow svg {
	width:14px !important;
	height:14px !important;
	stroke:#fff !important;
	stroke-width:2 !important;
	transition:transform 220ms ease !important;
}

.onetrooper-cta__shine {
	position:absolute !important;
	top:0 !important;
	left:-100% !important;
	width:45% !important;
	height:100% !important;
	background:linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.04) 70%, transparent 100%) !important;
	transform:skewX(-20deg) !important;
	animation:onetrooperShine 5s ease-in-out infinite !important;
	pointer-events:none !important;
}

.onetrooper-cta:hover {
	color: #fff !important;
	transform:translateY(-2px) !important;
	filter:brightness(1.035) !important;
	box-shadow:0 10px 25px rgba(55, 137, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.onetrooper-cta:hover .onetrooper-cta__arrow {
	background:rgba(255, 255, 255, 0.23) !important;
	transform:translateX(2px) !important;
}

.onetrooper-cta:hover .onetrooper-cta__arrow svg {
	transform:translateX(2px) !important;
}

.onetrooper-cta:active {
	transform:translateY(0) !important;
	box-shadow:0 4px 10px rgba(55, 137, 238, 0.18) !important;
}

.onetrooper-cta:focus-visible {
	outline:3px solid rgba(91, 165, 255, 0.35) !important;
	outline-offset:3px !important;
}

@keyframes onetrooperShine {
	0% { left:-100% !important; }
	28% { left:145% !important; }
	100% { left:145% !important; }
}

.onetrooper-cta--mobile {
	width:100% !important;
	justify-content:center !important;
	margin-top:18px !important;
}

/* ---------- Burger ---------- */

.onetrooper-burger {
	display:none !important;
	flex-direction:column !important;
	justify-content:center !important;
	gap:5px !important;
	width:40px !important;
	height:40px !important;
	border-radius:9px !important;
	background:rgba(255, 255, 255, 0.08) !important;
	border:1px solid rgba(255, 255, 255, 0.14) !important;
	cursor:pointer !important;
	padding:0 !important;
}

.onetrooper-burger span {
	display:block !important;
	height:2px !important;
	width:18px !important;
	margin:0 auto !important;
	background:#fff !important;
	border-radius:2px !important;
	transition:transform 220ms ease, opacity 220ms ease !important;
}

.onetrooper-burger[aria-expanded="true"] span:nth-child(1) {
	transform:translateY(7px) rotate(45deg) !important;
}

.onetrooper-burger[aria-expanded="true"] span:nth-child(2) {
	opacity:0 !important;
}

.onetrooper-burger[aria-expanded="true"] span:nth-child(3) {
	transform:translateY(-7px) rotate(-45deg) !important;
}

/* ---------- Mobile panel ---------- */

.onetrooper-mobile {
	position:fixed !important;
	inset:0 !important;
	z-index:1 !important;
	top:0 !important;
	background:rgba(8, 11, 28, 0.98) !important;
	backdrop-filter:blur(20px) !important;
	-webkit-backdrop-filter:blur(20px) !important;
	overflow-y:auto !important;
	padding-top:82px !important;
}

.onetrooper-mobile[hidden] {
	display:none !important;
}

.onetrooper-mobile__inner {
	padding:20px var(--ot-gutter) 60px !important;
	display:flex !important;
	flex-direction:column !important;
	gap:4px !important;
}

.onetrooper-mobile__link {
	padding:16px 4px !important;
	border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size:17px !important;
	font-weight:600 !important;
}

.onetrooper-mobile__group {
	border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;
}

.onetrooper-mobile__group-toggle {
	width:100% !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	background:none !important;
	border:0 !important;
	padding:16px 4px !important;
	color:#fff !important;
	font-size:17px !important;
	font-weight:600 !important;
	cursor:pointer !important;
}

.onetrooper-mobile__group-toggle .onetrooper-caret {
	transition:transform 200ms ease !important;
}

.onetrooper-mobile__group.is-open .onetrooper-caret {
	transform:rotate(180deg) !important;
}

.onetrooper-mobile__panel {
	display:none !important;
	flex-direction:column !important;
	padding:0 4px 16px 12px !important;
	gap:2px !important;
}

.onetrooper-mobile__group.is-open .onetrooper-mobile__panel {
	display:flex !important;
}

.onetrooper-mobile__panel a {
	padding:10px 8px !important;
	border-radius:8px !important;
	color: var(--ot-text-dim) !important;
	text-decoration: none !important;
	font-size:14.5px !important;
	font-weight:500 !important;
}

.onetrooper-mobile__panel a:hover {
	background:rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
}

.onetrooper-mobile__heading {
	font-weight: 700 !important;
	color: #fff !important;
	margin-top:6px !important;
}

.onetrooper-mobile__promo-link {
	font-weight: 700 !important;
	color: var(--ot-accent) !important;
	margin-bottom:4px !important;
}

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

@media (max-width: 1100px) {
	.onetrooper-nav,
	.onetrooper-header__actions .onetrooper-cta {
		display:none !important;
	}
	.onetrooper-burger {
		display:flex !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onetrooper-cta__shine {
		animation:none !important;
	}
}
