/* zumaleto.com — единственный файл стилей.
   Значения (высоты секций, размеры шрифтов, углы, прозрачности) сняты
   измерением с оригинального WordPress-сайта: см. tools/README в репозитории. */

:root {
	--bg: #000;
	--bar: #0c0f0a;
	--purple: #6146d7;
	--orange: #f95723;
	--band: #252525;
	--footer: #1a1a1a;
	--muted: #777;
	--marquee: #e6e6e6;
	--bar-h: 80px;
}

@font-face { font-family: Poppins; font-style: normal; font-weight: 100; font-display: swap; src: url(/assets/fonts/poppins-100.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto-400.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto-700.woff2) format('woff2'); }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--muted);
	font: 400 14px/1.7 Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- шапка ---------- */

.topbar {
	position: fixed;
	inset: 0 0 auto;
	height: var(--bar-h);
	background: var(--bar);
	display: flex;
	align-items: stretch;
	z-index: 100;
}

.brand {
	width: var(--bar-h);
	flex: 0 0 var(--bar-h);
	background: var(--purple);
	display: grid;
	place-items: center;
}
.brand img { width: 46px; height: 46px; }

.nav { margin-left: 34px; display: flex; align-items: stretch; }
.nav-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}
.nav-menu a {
	display: grid;
	place-items: center;
	height: var(--bar-h);
	padding: 0 18px;
	background: var(--purple);
	color: #fff;
	font: 500 11px/1 Poppins, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
}
.nav-toggle { display: none; }

/* Блок с лупой — декорация. На статическом одностраничнике искать нечего,
   поэтому поиск не работает; квадрат оставлен, потому что он часть облика. */
.search-deco {
	margin-left: auto;
	width: var(--bar-h);
	flex: 0 0 var(--bar-h);
	background: var(--purple);
	display: grid;
	place-items: center;
	color: #fff;
}
.search-deco svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- герой ---------- */

.hero {
	position: relative;
	height: 900px;
	max-height: 100vh;
	overflow: hidden;
}
.hero-media, .hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-photo { display: none; }
/* Затемнение с точечной текстурой поверх видео — ровно как в оригинале
   (.custom-header-media::before: чёрный 50% + повтор pattern-overlay.png). */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .5) url(/assets/pattern-overlay.png) repeat;
}
.hero-inner {
	position: absolute;
	left: 130px;
	bottom: 32px;
	z-index: 2;
}
.hero h1 {
	margin: 0;
	font: 700 70px/1.2 Poppins, Arial, sans-serif;
	color: #fff;
}
.hero-excerpt {
	margin: 20px 0 0;
	font: 700 18px/1.6 Roboto, Arial, sans-serif;
	color: #fff;
}
.hero-toggle {
	position: absolute;
	right: 30px;
	bottom: 40px;
	width: 45px;
	height: 45px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
}
.hero-toggle svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- секции с фото ---------- */

/* Фоны секций заданы КЛАССАМИ, а не инлайновым style="--bg:url(...)":
   заголовок CSP на проде содержит style-src 'self', и инлайновый атрибут
   там просто не применяется — секции остаются чёрными. */
.bg-experience { background-image: url(/assets/bg-experience.webp); }
.bg-cta-1 { background-image: url(/assets/bg-cta-1.webp); }
.bg-what { background-image: url(/assets/bg-what.webp); }
.bg-cta-2 { background-image: url(/assets/bg-cta-2.webp); }

.band {
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
	/* фон закреплён — эффект параллакса оригинала */
	background-attachment: fixed;
}

.band-photo { height: 456px; }
.band-overlay {
	height: 100%;
	background: rgba(0, 0, 0, .67);
	padding: 120px 15px;
	text-align: center;
}
.band-title {
	margin: 0;
	font: 500 42px/1.5 Poppins, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}
.band-title::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin: 47px auto 0;
	background: #fff;
}
.v-divider {
	display: block;
	width: 22px;
	height: 86px;
	margin: 16px auto 0;
	background: url(/assets/v-divider.png) no-repeat 50% 100%;
}

/* ---------- секции с оранжевым блоком ---------- */

.band-cta {
	/* 539.594 — фактическая высота секции на оригинале. Округление до 540
	   уводит вниз всё, что ниже по странице, и ломает попиксельную сверку. */
	height: 539.594px;
	overflow: hidden;
}
/* Косой оранжевый параллелограмм: 55% ширины, вдвое выше секции, повёрнут
   на 15°, прозрачность 0.8 — фото под ним просвечивает. */
.band-cta::before {
	content: "";
	position: absolute;
	left: 10%;
	top: -58%;
	width: 55%;
	height: 200%;
	background: var(--orange);
	opacity: .8;
	transform: rotate(15deg);
}
.cta-title {
	position: relative;
	z-index: 2;
	margin: 0 0 0 15.35%;
	padding-top: 180px;
	max-width: 766px;
	font: 700 42px/1.5 Poppins, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}
.cta-title::after {
	content: "";
	display: block;
	width: 100px;
	height: 2px;
	margin-top: 37px;
	background: #fff;
}

/* ---------- бегущая строка ---------- */

.marquee {
	height: 188.797px;
	background: var(--band);
	overflow: hidden;
	display: flex;
	align-items: center;
}
.marquee-track {
	display: flex;
	flex: none;
	gap: 60px;
	padding-left: 60px;
	animation: marquee 26s linear infinite;
}
.marquee-item {
	font: 100 118px/1.6 Poppins, Arial, sans-serif;
	letter-spacing: 1px;
	color: var(--marquee);
	white-space: nowrap;
}
.marquee-item.is-bold { font-weight: 700; }
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
}

/* ---------- подвал ---------- */

.site-footer { background: var(--footer); }
.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 60px 30px 22px;
}
.footer-col p { margin: 0 0 14px; }
.footer-col p:last-child { margin-bottom: 0; }
/* третья колонка нужна только сетке десктопа; на мобильном она пустая и
   давала бы лишний отступ строки грида */
.footer-col:empty { display: none; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-col strong { color: #999; }
.footer-title {
	margin: 0 0 56px;
	font: 500 18px/1.5 Poppins, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}
.footer-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	margin-top: 20px;
	background: #fff;
}
.copyright {
	height: 67px;
	background: #000;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0 15px;
}
.copyright p {
	margin: 0;
	font: 500 12px/1.5 Poppins, Arial, sans-serif;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- кнопка наверх ---------- */

.scroll-up {
	position: fixed;
	right: 15px;
	bottom: 45px;
	width: 48px;
	height: 48px;
	border: 0;
	background: var(--orange);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	z-index: 90;
}
.scroll-up.is-visible { opacity: 1; visibility: visible; }
.scroll-up svg { width: 24px; height: 24px; }

/* ---------- мобильные ---------- */

@media (max-width: 900px) {
	:root { --bar-h: 50px; }

	/* На узких экранах шапка НЕ фиксированная — на оригинале она уезжает
	   вместе со страницей, и её 112px входят в высоту документа. */
	.topbar { position: static; flex-wrap: wrap; height: 112px; }
	.brand { width: 50px; flex: 0 0 50px; }
	.brand img { width: 30px; height: 30px; }
	.search-deco { width: 50px; flex: 0 0 50px; }
	.search-deco svg { width: 20px; height: 20px; }

	.nav {
		order: 3;
		width: 100%;
		margin: 0;
		height: 62px;
		display: block;
		position: relative;
	}
	.nav-toggle {
		display: block;
		width: 100%;
		height: 62px;
		border: 0;
		background: none;
		cursor: pointer;
		padding: 0;
	}
	.nav-toggle span {
		display: block;
		width: 26px;
		height: 2px;
		margin: 5px auto;
		background: #fff;
	}
	.nav-menu {
		display: none;
		position: absolute;
		top: 62px;
		left: 0;
		right: 0;
		background: var(--bar);
	}
	.nav-menu.is-open { display: block; }
	.nav-menu a { height: 50px; background: none; justify-items: center; }

	/* На мобильном оригинал показывает не видео, а кадр-постер, и герой
	   сдвинут вправо на ширину боковой полосы. */
	.hero { height: 633px; max-height: none; }
	.hero-media { display: none; }
	/* Кадрирование как в оригинале: фото занимает ВЕСЬ экран (100vw × 100vh),
	   а затемнение ложится только правее 50px. Левая полоса поэтому светлая —
	   там видно неприкрытое фото, и это не артефакт, а вид оригинала. */
	/* Смещение вверх на высоту шапки: в оригинале картинка привязана к верху
	   ДОКУМЕНТА, а не к началу героя, и уходит под шапку. */
	.hero-photo { display: block; left: 0; top: -112px; width: 100vw; height: 100vh; }
	/* затемнение лежит только на фото, левая полоса остаётся чёрной */
	.hero::before { left: 50px; }
	.hero-inner { left: 60px; bottom: 52px; }
	.hero h1 { font-size: 28px; }
	.hero-excerpt { display: none; }
	.hero-toggle { display: none; }

	/* background-attachment: fixed на мобильных ломает прокрутку в iOS */
	.band { background-attachment: scroll; }

	.band-photo { height: 411px; }
	.band-overlay { padding: 120px 15px; }
	.band-title { font-size: 14px; line-height: 22.4px; }
	/* на узких экранах подчёркивание отстоит дальше, чем на десктопе */
	.band-title::after { margin-top: 44px; }

	.band-cta { height: auto; padding-bottom: 65px; }
	/* на мобильном оранжевый блок не косой, а сплошной во всю ширину */
	.band-cta::before { left: 0; top: 0; width: 100%; height: 200%; transform: none; }
	.cta-title { margin-left: 15px; padding-top: 50px; font-size: 14px; line-height: 19.6px; max-width: 360px; }
	.cta-title::after { margin-top: 45px; }

	.marquee { height: 78px; }
	.marquee-item { font-size: 48px; }

	.footer-cols { grid-template-columns: 1fr; padding: 74px 15px 38px; gap: 20px; }
	.footer-title { font-size: 14px; margin-bottom: 15px; }
	.footer-title::after { margin-top: 44px; }
	.copyright { height: 84px; }
}