:root {
	--bg-dark: #141414;
	--text: #f4f4f4;
	--muted: #9aa0a6;
	--accent: #d9d9d9;
	--panel-gap: 10px;
	--panel-radius: 18px;
	--transition: 350ms ease;
}

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

html, body { 
	height: 100%; 
}

body { 
	margin: 0; 
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; 
	color: var(--text); 
	background: #0e0e0e; 
}

a { 
	color: inherit; 
	text-decoration: none; 
}
img { 
	max-width: 100%; 
	display: block; 
}

.preloader {
	position: fixed; inset: 0; z-index: 9999;
	background: var(--bg-dark);
	display: grid; place-items: center;
	transition: transform 700ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease;
}
.preloader.out { 
	transform: translateY(-100%); 
	opacity: 0; 
	pointer-events: none; 
}

.preloader__box { 
	width: min(560px, 86vw); 
	text-align: center; 
}

.brand { 
	font-size: clamp(28px, 4vw, 42px); 
	letter-spacing: 0.02em; 
	font-weight: 700; 
	color: #ffffff; 
	margin: 0 0 24px; 
}

.progress {
	position: relative;
	height: 1px;
	width: 100%; 
	background: #2a2a2a; 
	overflow: visible;
}

.progress__bar { 
	height: 100%; 
	width: 0%; 
	background: #ffffff; 
	transition: width 600ms cubic-bezier(.22,.61,.36,1); 
}

.progress__pct { 
	display: block; 
	margin-top: 10px; 
	font-size: 12px; 
	color: var(--muted); 
}

header {
	background: var(--bg-dark);
	padding: 24px 16px 18px;
	position: sticky; top: 0; z-index: 30;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.header__title { 
	text-align: center; 
	font-weight: 800; 
	font-size: clamp(22px, 3.2vw, 32px); 
	margin: 0 0 14px; 
}

.header__socials { 
	display: flex; 
	justify-content: center; 
	gap: 14px; 
}

.social-btn { 
	width: 44px; 
	height: 44px; 
	border-radius: 12px; 
	display: inline-grid; 
	place-items: center; 
	background: #1d1d1d; 
	border: 1px solid rgba(255,255,255,.08); 
	transition: transform var(--transition), background var(--transition), border-color var(--transition); 
}

.social-btn:hover { 
	transform: translateY(-2px);
	background: #222; 
	border-color: rgba(255,255,255,.18); 
}

.social-btn svg { 
	width: 22px; 
	height: 22px; 
	fill: #ffffff; 
}

.section {
	min-height: 100vh; 
	display: flex; 
	align-items: stretch; 
	justify-content: center;
	padding: 18px;
}

.accordion {
	flex: 1;
	display: flex;
	gap: var(--panel-gap);
	height: calc(100vh - 18px*2 - 0px);
	opacity: 0; transform: translateY(12px);
	transition: opacity 700ms ease 100ms, transform 700ms ease 100ms;
}
.accordion.show { 
	opacity: 1; 
	transform: none; 
}

.panel {
	position: relative;
	flex: 1 1 0;
	height:550px;
	border-radius: var(--panel-radius);
	overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.08);
	display: grid; place-items: center;
	isolation: isolate;
	cursor: pointer;
	transition: flex var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.panel:hover { 
	transform: translateY(-2px); 
	border-color: rgba(255,255,255,.18); 
	box-shadow: 0 8px 24px rgba(0,0,0,.35); 
}
	
.accordion:hover .panel { 
	flex: 1 1 0; 
}
.accordion .panel:hover { 
	flex: 1.45 1 0; 
}

.panel__title {
	position: absolute;
	right: 16px; bottom: 16px; left: auto; top: auto;
	margin: 0;
	z-index: 3;
	font-weight: 800; letter-spacing: .04em; line-height: 1.1;
	font-size: clamp(14px, 2.6vw, 22px);
	color: rgba(255,255,255,.92);
	text-align: right;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.panel__link { 
	position: absolute; 
	inset: 0; 
	z-index: 4; 
}

.panel__bg { 
	position: absolute; 
	inset: 0; 
	z-index: 1; 
	background-size: cover; 
	background-position: center; 
	filter: saturate(0.9) contrast(1.05); 
	opacity: .18; 
	transition: opacity var(--transition), transform var(--transition); 
}

.panel:hover .panel__bg {
	opacity: .26; 
	transform: scale(1.03); 
}

footer { 
	background: var(--bg-dark); 
	padding: 18px; 
	border-top: 1px solid rgba(255,255,255,.06); 
	text-align: center; 
	color: #bdbdbd; 
}

@media (max-width: 640px) {
	.header__socials { 
		gap: 10px; 
	}
	.social-btn { 
		width: 40px; 
		height: 40px; 
	}
	.panel__title { 
		font-size: clamp(12px, 3.4vw, 18px); 
	}
}

.accordion .panel.active { 
	flex: 1.45 1 0; 
}

.panel__title { 
	text-shadow: 0 1px 2px rgba(0,0,0,.35); 
}

@media (max-width: 900px) {
	:root { 
		--panel-gap: 8px; 
	}
	
	.section { 
		padding: 12px; 
	}
}
@media (max-width: 640px) {
	.accordion { 
		overflow-x: auto; 
		scroll-snap-type: x mandatory; 
		height: calc(100vh - 12px*2); 
	}

	.panel { 
		scroll-snap-align: center; 
		flex: 0 0 78vw; 
		min-width: 78vw; 
	}

	.accordion:hover .panel { 
		flex: 0 0 78vw; 
	}

	.accordion .panel:hover, .accordion .panel.active { 
		flex: 0 0 84vw; 
	}
}
@media (prefers-reduced-motion: reduce) {
	* { 
		transition: none !important; 
		animation: none !important; 
	}
}