/* ---------- fonts ---------- */
@font-face {
	font-family: "Bounded";
	src: url("/wp-content/themes/autolight-land/fonts/bounded-extralight.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bounded";
	src: url("/wp-content/themes/autolight-land/fonts/bounded-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bounded";
	src: url("/wp-content/themes/autolight-land/fonts/bounded-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--c-dark: #1A1A1A;
	--c-light: #F7F7F7;
	--c-gray: #E5E7EA;
	--c-white: #FFFFFF;
	--c-yellow: #F4DB1C;
	--c-yellow-hover: #FFE53D;
	--c-green: #04E300;

	--glass: rgba(255, 255, 255, .15);
	--glass-weak: rgba(255, 255, 255, .05);
	--glass-border: rgba(255, 255, 255, .15);
	--blur: blur(25px);

	--font-accent: "Bounded", sans-serif;
	--font-main: "Manrope", sans-serif;
	--font-inter: "Inter", sans-serif;

	--gutter: 50px;
	--section-gap: 130px;
	--head-gap: 40px;
	--transition: .3s ease;
}

.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

body {
	margin: 0;
	min-width: 320px;
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1.3;
	color: var(--c-dark);
	background: var(--c-light);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* =========================================================
   ICONS  (<i class="icon icon-*">)
   ========================================================= */
.icon {
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	font-style: normal;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.icon-arrow-right {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.icon-arrow-left {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.icon-arrow-up-right {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");
}

.icon-check-double {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 12.5 4.5 4.5L16 7.5M11.5 16.5l.5.5L21.5 7.5'/%3E%3C/svg%3E");
}

.icon-plus {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
}

.icon-close {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='m5 5 10 10M15 5 5 15'/%3E%3C/svg%3E");
}

.icon-menu {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3Ccircle cx='8' cy='2' r='2'/%3E%3Ccircle cx='14' cy='2' r='2'/%3E%3Ccircle cx='2' cy='8' r='2'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Ccircle cx='14' cy='8' r='2'/%3E%3Ccircle cx='2' cy='14' r='2'/%3E%3Ccircle cx='8' cy='14' r='2'/%3E%3Ccircle cx='14' cy='14' r='2'/%3E%3C/svg%3E");
}

.icon-star {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 1.8 3.1 6.6 7.2.8-5.4 5 1.5 7.1L12 17.7l-6.4 3.6 1.5-7.1-5.4-5 7.2-.8z'/%3E%3C/svg%3E");
}

.icon-touch {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 11.2V5.5a1.5 1.5 0 0 1 3 0v4.6l.4-.1a1.6 1.6 0 0 1 2 1 1.6 1.6 0 0 1 2.6.9 1.6 1.6 0 0 1 2.5 1.3v3.6c0 2.9-2.3 5.2-5.2 5.2h-1.6c-1.7 0-3.2-.8-4.1-2.2l-3.2-4.8a1.4 1.4 0 0 1 2.1-1.8L9 14.6z'/%3E%3Cpath d='M10.5 1a5 5 0 0 1 5 5h-1.6a3.4 3.4 0 0 0-6.8 0H5.5a5 5 0 0 1 5-5z' opacity='.5'/%3E%3C/svg%3E");
}

.icon-sun {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='%23000'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M1.5 12H4M20 12h2.5M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-road {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M8.2 4h7.6l5.7 16h-19zM11.2 7.2h1.6l.3 3.6h-2.2zm-.5 6h2.6l.4 4.3h-3.4z'/%3E%3C/svg%3E");
}

.icon-contrast {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm0 2.6v12.8a6.4 6.4 0 0 0 0-12.8z'/%3E%3C/svg%3E");
}

.icon-headlight {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11.5 5.5C6.9 5.5 3 8.4 3 12s3.9 6.5 8.5 6.5z'/%3E%3Crect x='13.5' y='6.5' width='8' height='2' rx='1'/%3E%3Crect x='13.5' y='11' width='8' height='2' rx='1'/%3E%3Crect x='13.5' y='15.5' width='8' height='2' rx='1'/%3E%3C/svg%3E");
}

.icon-target {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.5A8.5 8.5 0 1 1 12.5 4.5'/%3E%3Cpath d='M15.6 12.3a4.6 4.6 0 1 1-4-4.6'/%3E%3Cpath d='m11 13 7.5-7.5M16 3v3.2h3.3'/%3E%3C/svg%3E");
}

.icon-gauge {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12 4.5a10 10 0 0 1 10 10c0 1.4-.3 2.8-.8 4H2.8a10 10 0 0 1-.8-4 10 10 0 0 1 10-10zm4.6 4.2-5.5 4.2a1.9 1.9 0 1 0 2.4 2.8z'/%3E%3C/svg%3E");
}

/* =========================================================
   UI COMPONENTS
   ========================================================= */

/* --- buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 50px;
	padding: 10px 30px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}

.btn--white {
	background: var(--c-white);
	color: var(--c-dark);
}

.btn--white:hover {
	background: var(--c-yellow);
}

.btn--yellow {
	background: var(--c-yellow);
	color: var(--c-dark);
}

.btn--yellow:hover {
	background: var(--c-yellow-hover);
}

.btn--lg {
	height: 70px;
	padding: 15px 30px;
	border-radius: 20px;
}

.btn--square {
	width: 70px;
	padding: 0;
}

.btn--square .icon {
	width: 20px;
	height: 20px;
	transition: transform var(--transition);
}

.btn-group {
	display: inline-flex;
	gap: 3px;
	max-width: 100%;
}

.btn-group .btn {
	flex-shrink: 1;
}

.btn-group .btn--square {
	flex-shrink: 0;
}

.btn-group:hover .btn {
	background: var(--c-yellow-hover);
}

.btn-group:hover .btn--square .icon {
	transform: translate(2px, -2px);
}

/* --- cta (кнопки + подпись) --- */
.cta__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.3;
}

.cta__note.cta__note--white {
	color: var(--c-white);
}

.cta__note .icon {
	color: var(--c-yellow);
}

/* --- slider buttons --- */
.swiper-button-prev, .swiper-button-next {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}

.swiper-button-prev.hero__prev,
.swiper-button-next.hero__next {
	position: static;
	background-color: var(--c-white);
}
.swiper-button-prev svg,
.swiper-button-next svg {
	width: 20px;
	height: 20px;
}
.swiper-button-prev svg path,
.swiper-button-next svg path {
	color: var(--c-dark);
}
.swiper-button-prev.work-gallery__prev svg path,
.swiper-button-next.work-gallery__next svg path {
	color: var(--c-white);
}

.swiper-button-next.work-gallery__next,
.swiper-button-prev.work-gallery__prev {
	background-color: #FFFFFF0D;
	backdrop-filter: blur(50px);
}

.swiper-pagination {
	display: flex;
	position: static;
}
.swiper-pagination .swiper-pagination-bullet {
	width: 100%;
	height: 2px;
	border-radius: 0;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--c-yellow);
}

.swiper-pagination.work-gallery__pagination {
	position: relative;
}

/* --- labels / badges / tags --- */
.label {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 7px;
	height: 31px;
	padding: 5px 15px;
	border-radius: 10px;
	background: var(--c-white);
	font-size: 16px;
	line-height: 1.3;
	white-space: nowrap;
}

.label::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-yellow);
}

.label--dark {
	background: var(--glass-weak);
	color: var(--c-white);
	backdrop-filter: var(--blur);
}

.badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 41px;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.badge--glass {
	background: var(--glass);
	color: var(--c-white);
	backdrop-filter: var(--blur);
}

.badge--white {
	background: var(--c-white);
	color: var(--c-dark);
}

.badge--gray {
	height: 28px;
	padding: 5px 10px;
	background: var(--c-gray);
	color: var(--c-dark);
	font-size: 14px;
	font-weight: 400;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 10px;
	background: var(--glass-weak);
	backdrop-filter: var(--blur);
	color: var(--c-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color var(--transition), color var(--transition);
}

.tag:hover {
	background: var(--c-yellow);
	color: var(--c-dark);
}

.icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	background: var(--c-white);
	color: var(--c-yellow);
}

.icon-box .icon {
	width: 20px;
	height: 20px;
}

.icon-box--sm {
	width: 50px;
	height: 50px;
}

.dot-list li {
	position: relative;
	padding-left: 14px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.dot-list li+li {
	margin-top: 10px;
}

.dot-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-yellow);
}

/* --- rating (Яндекс) --- */
.rating {

}


/* --- counter 4000+ --- */
.counter {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
	height: 50px;
	padding: 0 10px;
	border-radius: 10px;
	background: var(--glass);
	border: 1px solid #000;
	backdrop-filter: var(--blur);
}

.counter__value {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-yellow);
}

.counter__text {
	font-size: 12px;
	line-height: 1.4;
}

.counter--light {
	background: var(--c-light);
	border: 0;
	color: var(--c-dark);
}

.counter--light .counter__value {
	font-size: 26px;
}

/* --- branch (филиал) --- */
.branch {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.branch+.branch {
	margin-top: 30px;
}

.branch__label {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.branch__address,
.branch__phone {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.branch__phone {
	transition: color var(--transition);
}

.branch__phone:hover {
	color: var(--c-yellow);
}

/* =========================================================
   TYPOGRAPHY / SECTION HEAD
   ========================================================= */
.h2 {
	font-family: var(--font-accent);
	font-size: 36px;
	font-weight: 200;
	line-height: 1.3;
	text-transform: uppercase;
}

.section-head__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.section-head__line {
	position: relative;
	height: 1px;
	margin-top: 20px;
	background: linear-gradient(90deg, var(--c-yellow), rgba(244, 219, 28, 0));
}

.section-head__line::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-yellow);
}

.section-head__desc {
	width: fit-content;
	margin: 20px 0 0 auto;
	font-size: 20px;
	line-height: 1.3;
	text-align: right;
}

.section-head--dark {
	color: var(--c-white);
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	color: var(--c-white);
}

.header__container {
	display: flex;
	align-items: center;
	height: 90px;
}

.header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.header__logo img {
	width: 107px;
	height: 50px;
}

.header__tagline {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-height: 50px;
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid rgba(255, 255, 255, .1);
	font-size: 10px;
	line-height: 1.4;
}

.header__rating {
	margin-left: 30px;
}

.header__counter {
	margin-left: 30px;
}

.header__contacts {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.header__item {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header__phones,
.header__addresses {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 50px;
	white-space: nowrap;
}

.header__phones a {
	transition: color var(--transition);
}

.header__phones a:hover {
	color: var(--c-yellow);
}

.header__callback {
	width: 198px;
	margin-left: 30px;
}

.burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	margin-left: auto;
	border-radius: 10px;
	background: var(--glass);
	backdrop-filter: var(--blur);
	color: var(--c-yellow);
	transition: background-color var(--transition);
}

.burger .icon {
	width: 16px;
	height: 16px;
}

.burger:hover {
	background: rgba(255, 255, 255, .25);
}

/* --- mobile menu --- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .4s;
}

.mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, .45);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .35s ease;
}

.mobile-menu.is-open .mobile-menu__overlay {
	opacity: 1;
}

.mobile-menu__panel {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	width: 462px;
	max-width: calc(100% - 40px);
	border-radius: 20px;
	background: var(--c-gray);
	color: var(--c-dark);
	overflow: hidden auto;
	overscroll-behavior: contain;
	transform: translateX(calc(100% + 40px));
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.mobile-menu.is-open .mobile-menu__panel {
	transform: none;
}

.mobile-menu__container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	padding: 0 20px 20px;
}

.mobile-menu__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid rgba(26, 26, 26, .1);
}

.mobile-menu__logo img {
	width: 107px;
	height: 50px;
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: var(--c-light);
	transition: background-color var(--transition);
}

.mobile-menu__close .icon {
	width: 20px;
	height: 20px;
	opacity: .5;
}

.mobile-menu__close:hover {
	background: var(--c-yellow);
}

.mobile-menu__tagline {
	margin-top: 20px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.mobile-menu__counter {
	align-self: flex-start;
	margin-top: 20px;
}

.mobile-menu__card {
	margin-top: 20px;
	padding: 20px;
	border-radius: 20px;
	background: var(--c-white);
}

.mobile-menu__callback {
	width: 189px;
	margin-top: 30px;
}

.mobile-menu__bottom {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-grow: 1;
	min-height: 150px;
	margin-top: 20px;
}

.mobile-menu__bottom .rating {
	position: relative;
	z-index: 1;
}

.mobile-menu__car {
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 259px;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
	position: relative;
	padding-top: 150px;
	padding-bottom: 60px;
	color: var(--c-white);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.hero__container {
	position: relative;
	z-index: 1;
}

.hero__top {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.hero__tags li {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	background-color: #FFFFFF0D;
	backdrop-filter: blur(50px);
	border-radius: 10px;
}

.h1 {
	font-family: var(--font-accent);
	font-size: 50px;
	font-weight: 200;
	line-height: 1.3;
	text-transform: uppercase;
}

.hero__subtitle {
	font-family: var(--font-accent);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.3;
}

.hero__text {
	margin-top: 40px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.hero__cta {
	margin-top: 40px;
}

.hero__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}

.hero__info {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero__lenses {
	display: inline-block;
	width: 270px;
	height: 110px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.hero__info-text {
	position: relative;
	padding-left: 21px;
	font-size: 16px;
	line-height: 1.3;
}

.hero__info-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 110px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .2);
}

.hero__slider-wrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 547px;
	min-width: 0;
}

.hero__nav {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	margin-bottom: 30px;
}

.hero__nav--bottom {
	display: none;
	margin: 0;
}

.hero-slider {
	width: 100%;
}

.swiper.hero-slider .swiper-slide {
	opacity: .3;
}
.swiper.hero-slider .swiper-slide.swiper-slide-active {
	opacity: 1;
}

.hero-card {
	display: flex;
	gap: 20px;
	height: auto;
	padding: 15px;
	border-radius: 20px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: var(--blur);
	transition: opacity .4s ease;
}

.hero-card__img {
	width: 131px;
	height: 148px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	object-position: 62% center;
}

.hero-card__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.hero-card__title {
	font-size: 20px;
	line-height: 1.3;
}

.hero-card__text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.hero__controls {
	margin-top: 30px;
}

.hero__pagination {
	width: 100%;
}

/* =========================================================
   QUIZ
   ========================================================= */
.quiz {
	padding-top: 60px;
	padding-bottom: 50px;
	background-color: var(--c-dark);
	border-radius: 0 0 30px 30px;
}

.quiz__box {
	padding: 40px;
	border-radius: 30px;
	background: var(--c-light);
	color: var(--c-dark);
}

.quiz__body {
	display: flex;
	gap: 20px;
	margin-top: var(--head-gap);
}

/* Контейнер под виджет квиза */
.quiz__widget {
	flex: 1;
	border-radius: 20px;
	background: var(--c-white);
	box-shadow: 0 10px 20px rgba(26, 26, 26, .15);
	overflow: hidden;
}

.benefits {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	width: 320px;
	flex-shrink: 0;
	min-height: 500px;
	padding: 20px;
	border-radius: 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--c-white);
	overflow: hidden;
}

.benefits__title {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

.benefits__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.benefit {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 100px;
	padding: 15px;
	border-radius: 10px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: var(--blur);
}

.benefit__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.benefit__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.benefit__text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.benefit .icon {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
}

/* =========================================================
   COMPARE (до / после)
   ========================================================= */
.compare {
	padding-block: var(--section-gap);
}

.compare__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: var(--head-gap);
}

.compare__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	grid-row: span 2;
}

.compare__photo {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding: 20px;
	background: #111;
	color: var(--c-white);
	overflow: hidden;
}

.compare__photo:first-child {
	border-radius: 20px 0 0 20px;
}

.compare__photo:last-child {
	border-radius: 0 20px 20px 0;
}

.compare__photo img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.compare__caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.compare__caption-text {
	font-size: 14px;
	line-height: 1.3;
}

.compare__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* реглоскоп */
.measure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 284px;
	grid-template-areas:
		"title stat"
		"features features";
	gap: 20px;
	min-height: 360px;
	padding: 20px;
	border-radius: 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--c-white);
}

.measure__title {
	grid-area: title;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.measure__panel {
	display: contents;
}

.measure__stat {
	grid-area: stat;
	padding: 15px;
	border-radius: 10px;
	background: var(--c-white);
	color: var(--c-dark);
}

.measure__value span {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-yellow);
}

.measure__value-text {
	position: relative;
	margin-top: 5px;
	padding-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.measure__value-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 1px;
	background: var(--c-yellow);
}

.measure__note {
	margin-top: 20px;
	font-size: 12px;
	line-height: 1.4;
}

.measure__features {
	grid-area: features;
	align-self: end;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.feature {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 128px;
	padding: 10px;
	border-radius: 10px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: var(--blur);
}

.feature__text {
	font-size: 14px;
	line-height: 1.3;
}

.feature .icon {
	width: 50px;
	height: 50px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
}

/* диагностика */
.promo {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex-grow: 1;
	padding: 30px;
	border-radius: 20px;
	background: #0E0E0E url("../img/diagnostics-bg.jpg") right center / cover no-repeat;
	color: var(--c-white);
}

.promo__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.promo__title {
	font-family: var(--font-accent);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}

.promo__text {
	font-size: 14px;
	line-height: 1.3;
}

/* =========================================================
   WORKS
   ========================================================= */
.works {
	padding: 50px 0;
	background-color: var(--c-dark);
	border-radius: 30px 30px 0 0;
	overflow: hidden;
}

.works__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"cars controls"
		"slider slider"
		"hint hint";
	align-items: center;
	column-gap: 40px;
	margin-top: var(--head-gap);
}

.works__cars {
	grid-area: cars;
	min-width: 0;
}

.works__controls {
	grid-area: controls;
}

.works-slider {
	grid-area: slider;
}

.works__hint {
	grid-area: hint;
	color: var(--c-white);
}

.works-cars {
	overflow: hidden;
}

.car-card {
	display: flex;
	gap: 10px;
	width: 207px;
	height: 100px;
	padding: 10px;
	border-radius: 10px;
	background: var(--glass-weak);
	border: 1px solid transparent;
	backdrop-filter: var(--blur);
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
}

.car-card:hover {
	background: rgba(255, 255, 255, .1);
}

.car-card.swiper-slide-thumb-active {
	background: var(--glass);
	border-color: var(--glass-border);
}

.car-card__img {
	width: 127px;
	height: 100%;
	flex-shrink: 0;
	border-radius: 5px;
	object-fit: cover;
}

.car-card__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--c-white);
}

.car-card__name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.car-card__year {
	font-size: 10px;
	font-weight: 300;
	line-height: 1.4;
}

.works__controls {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* на десктопе: ← 01 → */
.works__arrows {
	display: contents;
}

.works__prev {
	order: 1;
}

.works__counter {
	order: 2;
}

.works__next {
	order: 3;
}

.works__counter {
	min-width: 43px;
	font-family: var(--font-accent);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.works-slider {
	min-width: 0;
	width: 100%;
	margin-top: 40px;
	overflow: visible;
	clip-path: inset(-10px -100vw -10px 0);
}

.work {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 450px minmax(0, 1fr) 384px;
	grid-template-areas: "gallery info aside";
	gap: 30px;
	width: calc(100% - 113px);
	height: auto;
	padding: 30px;
	border-radius: 20px;
	background: var(--c-white);
	color: var(--c-dark);
	overflow: hidden;
}

/* водяной знак */
.work::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -479px;
	left: 377px;
	width: 1163px;
	height: 1163px;
	background: url("../img/logo-mark.png") center / contain no-repeat;
	opacity: .04;
	pointer-events: none;
}

.work__gallery {
	grid-area: gallery;
	min-width: 0;
}

.work__info {
	grid-area: info;
	min-width: 0;
}

.work__aside {
	grid-area: aside;
	min-width: 0;
}

.work__main {
	position: relative;
}

.work-gallery {
	height: 517px;
	border-radius: 10px;
	background: #111;
}

.work-gallery .swiper-slide {
	height: auto;
}

.work-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-gallery__prev,
.work-gallery__next {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
}

.work-gallery__prev {
	left: -15px;
}

.work-gallery__next {
	right: -15px;
}

/* до/после внутри галереи */
.ba {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 100%;
	background: var(--c-white);
}

.ba__item {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
	overflow: hidden;
}

.ba__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ba__item .badge {
	position: relative;
}

.work-thumbs {
	margin-top: 20px;
}

.work-thumbs .swiper-slide {
	height: 87px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: opacity var(--transition);
}

.work-thumbs .swiper-slide-thumb-active {
	opacity: .3;
}

.work-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.work__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

.work__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.work__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.work__detail {
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(26, 26, 26, .2);
}

.work__detail:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.work__detail dt {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.work__detail dd {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.work__detail:last-child dd {
	margin-top: 10px;
}

.work__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.work__photo {
	width: 100%;
	height: 500px;
	border-radius: 10px;
	object-fit: cover;
}

.works__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 20px;
	line-height: 1.3;
}

.works__hint .icon {
	color: var(--c-yellow);
}

/* CTA внизу секции */
.works-cta {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 300px;
	padding-bottom: 50px;
	background-color: var(--c-dark);
	background-size: cover;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	border-radius: 0 0 30px 30px;
}

.works-cta__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.works-cta__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 16px;
	line-height: 1.3;
}

.works-cta__label::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-yellow);
}

.works-cta__text {
	margin-top: 40px;
	font-size: 20px;
	line-height: 1.3;
	color: var(--c-white);
}

.works-cta .cta {
	margin-top: 40px;
}

/* =========================================================
   STEPS
   ========================================================= */
.steps {
	padding-block: var(--section-gap);
}

.steps__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: var(--head-gap);
}

.steps__list {
	--line-gap: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-left: calc(32px + var(--line-gap));
}

.steps__list::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: repeating-linear-gradient(to bottom, rgba(26, 26, 26, .2) 0 10px, transparent 10px 20px);
}

.step {
	position: relative;
	display: flex;
	gap: 10px;
}

.step::before {
	content: "";
	position: absolute;
	left: calc(-32px - var(--line-gap));
	top: 50%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: radial-gradient(circle, var(--c-yellow) 0 5px, rgba(244, 219, 28, .15) 5.5px);
}

.step--cta::before {
	background: radial-gradient(circle, var(--c-green) 0 5px, rgba(4, 227, 0, .15) 5.5px);
}

.step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 156px;
	height: 156px;
	border-radius: 20px;
	background: var(--c-dark);
	color: var(--c-white);
	font-size: 68px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
}

.step__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	min-width: 0;
	padding: 20px;
	border-radius: 20px;
	background: var(--c-white);
}

.step__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.step__title {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

.step__text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.step--cta {
	display: block;
}

.steps-cta {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	min-height: 152px;
	padding: 20px;
	border-radius: 20px;
	background: var(--c-yellow);
	color: var(--c-dark);
	overflow: hidden;
}

.steps-cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	align-self: stretch;
}

.steps-cta__title {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

.steps-cta .cta__note {
	margin-top: 0;
}

.steps-cta .cta__note .icon {
	color: var(--c-white);
}

.steps-cta__car {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: 100%;
	max-width: none;
}

.steps-cta__btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border-radius: 20px;
	background: var(--c-white);
	transition: transform var(--transition);
}

.steps-cta__btn .icon {
	width: 20px;
	height: 20px;
}

.steps-cta:hover .steps-cta__btn {
	transform: scale(1.06);
}

.steps__photo {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	min-height: 100%;
	padding: 30px;
	border-radius: 20px;
	background: #0b1020;
	overflow: hidden;
}

.steps__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.steps__photo-text {
	position: relative;
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	text-align: right;
	color: var(--c-white);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
	padding-top: 50px;
	border-radius: 30px 30px 0 0;
	background: var(--c-dark);
}

.faq__box {
	padding: 30px;
	border-radius: 30px;
	background: var(--c-light);
}

.faq__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: var(--head-gap);
}

.faq__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.faq-item {
	border-radius: 15px;
	background: var(--c-white);
	box-shadow: 0 10px 15px rgba(26, 26, 26, .1);
}

.faq-item__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 70px;
	padding: 10px 10px 10px 20px;
	text-align: left;
}

.faq-item__question {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.faq-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: var(--c-yellow);
	transition: background-color var(--transition);
}

.faq-item__head:hover .faq-item__icon {
	background: var(--c-yellow-hover);
}

.faq-item__icon .icon {
	width: 20px;
	height: 20px;
	transition: transform var(--transition);
}

.faq-item.is-open .faq-item__icon .icon {
	transform: rotate(45deg);
}

.faq-item__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
}

.faq-item.is-open .faq-item__body {
	grid-template-rows: 1fr;
}

.faq-item__inner {
	overflow: hidden;
}

.faq-item__inner p {
	padding: 0 80px 20px 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer__main {
	position: relative;
	padding: 390px 0 50px;
	border-radius: 0 0 30px 30px;
	background-color: var(--c-dark);
	background-size: cover;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	color: var(--c-white);
	overflow: hidden;
}

.footer__card {
	display: grid;
	grid-template-columns: 278px 405px minmax(0, 1fr);
	grid-template-areas:
		"branches logo callback"
		"branches logo about";
	column-gap: 170px;
	row-gap: 20px;
	padding: 20px;
	border-radius: 20px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	backdrop-filter: var(--blur);
}

.footer__left {
	display: contents;
}

.footer__branches {
	grid-area: branches;
}

.footer__logo {
	grid-area: logo;
	align-self: center;
}

.footer__logo img {
	width: 100%;
}

.footer__callback {
	grid-area: callback;
	justify-self: end;
	align-self: start;
	width: 198px;
	margin-top: 5px;
}

.footer__about {
	grid-area: about;
	align-self: end;
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 5px;
}

.footer__tagline {
	font-size: 14px;
	line-height: 1.3;
	text-align: right;
}

.footer__bottom {
	padding: 40px 0 20px;
	font-size: 14px;
	line-height: 1.3;
}

.footer__bottom-container {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.footer__legal,
.footer__docs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer__docs {
	align-items: flex-end;
	text-align: right;
}

.footer__docs a {
	transition: opacity var(--transition);
}

.footer__docs a:hover {
	opacity: .6;
}

@media (max-width: 1400px) {
	.header__contacts {
		font-size: 14px;
	}
	
	.header__tagline {
		display: none;
	}
}

/* =========================================================
   ≤ 1200px  (макет 1024)
   ========================================================= */
@media (max-width: 1200px) {
	:root {
		--gutter: 40px;
		--section-gap: 110px;
		--head-gap: 30px;
	}

	.h2 {
		font-size: 28px;
	}

	.subtitle {
		font-size: 24px;
	}

	.section-head__desc {
		font-size: 16px;
	}

	/* header */
	.header__tagline {
		font-weight: 300;
	}

	.header__rating,
	.header__counter {
		display: none;
	}

	/* hero */
	.dark-block--top {
		padding-bottom: 40px;
	}

	.hero {
		padding-top: 130px;
	}

	.hero__tags {
		gap: 15px;
	}

	.h1 {
		font-size: 38px;
	}

	.hero__subtitle {
		font-size: 24px;
	}

	.hero__text {
		margin-top: 30px;
		font-size: 16px;
	}

	.hero__cta {
		margin-top: 30px;
	}

	.btn--lg {
		height: 60px;
		border-radius: 15px;
	}

	.btn--square {
		width: 60px;
	}

	.hero__info {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		width: 275px;
	}

	.hero__lenses img {
		width: 80px;
		height: 80px;
	}

	.hero__info-text {
		padding: 15px 0 0;
		border-top: 1px solid rgba(255, 255, 255, .2);
		font-size: 14px;
	}

	.hero__info-text::before {
		content: none;
	}

	.hero__slider-wrap {
		width: 462px;
	}

	.hero__nav {
		margin-bottom: 20px;
	}

	.hero-card__img {
		height: 128px;
	}

	.hero-card__title {
		font-size: 16px;
		font-weight: 500;
	}

	.hero__controls {
		margin-top: 20px;
	}

	/* quiz */
	.quiz__box {
		padding: 30px;
		border-radius: 20px;
	}

	.benefits__title {
		font-size: 18px;
	}

	/* compare */
	.compare__grid {
		grid-template-columns: 100%;
	}

	.compare__photos {
		min-height: 400px;
	}

	.compare__side {
		gap: 40px;
		padding: 30px;
		border-radius: 20px;
		background: var(--c-dark) url("../img/diagnostics-bg.jpg") right bottom / auto 300px no-repeat;
	}

	.measure {
		grid-template-columns: minmax(0, 1fr) 268px;
		min-height: 0;
	}

	.feature {
		flex-direction: row;
		align-items: center;
		min-height: 72px;
	}

	/* works */
	.works {
		padding: 40px 0;
		border-radius: 20px 20px 0 0;
	}

	.works__body {
		grid-template-areas:
			"hint hint"
			"cars controls"
			"slider slider";
		column-gap: 30px;
	}

	.works__hint {
		margin: 0 0 20px;
		font-size: 16px;
	}

	.works-slider {
		margin-top: 30px;
	}

	.work {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas:
			"gallery info"
			"aside aside";
		column-gap: 20px;
		row-gap: 30px;
		width: 100%;
	}

	.work-gallery {
		height: 400px;
	}

	.work-thumbs {
		margin-top: 10px;
	}

	.work-thumbs .swiper-slide {
		height: 70px;
	}

	.work__info {
		justify-content: flex-start;
	}

	.work__aside {
		position: relative;
		justify-content: flex-end;
		align-items: flex-end;
		min-height: 300px;
		padding: 20px;
		border-radius: 20px;
		overflow: hidden;
	}

	.work__aside::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(to top, rgba(26, 26, 26, .85) 0%, rgba(26, 26, 26, 0) 62%);
	}

	.work__photo {
		position: absolute;
		inset: 0;
		height: 100%;
		border-radius: 0;
		object-position: center 75%;
	}

	.work__cta {
		position: relative;
		z-index: 2;
		color: var(--c-white);
	}

	.works-cta__text {
		margin-top: 30px;
		font-size: 16px;
	}

	.works-cta .cta {
		margin-top: 30px;
	}

	/* steps */
	.steps__grid {
		grid-template-columns: minmax(0, 1fr) 301px;
	}

	.step__num {
		width: 150px;
		height: 150px;
		font-size: 56px;
	}

	.step__title,
	.steps-cta__title {
		font-size: 20px;
	}

	.steps-cta {
		min-height: 150px;
	}

	.steps__photo {
		padding: 20px;
	}

	.steps__photo-text {
		font-size: 18px;
	}

	/* faq */
	.faq {
		padding-top: 40px;
	}

	/* footer */
	.footer__main {
		padding-top: 200px;
		padding-bottom: 40px;
	}

	.footer__bg {
		height: 280px;
	}

	.footer__card {
		grid-template-columns: 278px 255px minmax(0, 1fr);
		column-gap: 50px;
	}

	.footer__bottom {
		padding-top: 30px;
	}
}

/* =========================================================
   ≤ 991px  (макет 768)
   ========================================================= */
@media (max-width: 991px) {
	:root {
		--gutter: 20px;
		--section-gap: 100px;
	}

	.h2 {
		font-size: 24px;
	}

	.subtitle {
		font-size: 20px;
	}

	.section-head__top {
		flex-direction: column;
		gap: 20px;
	}

	.section-head .label {
		order: -1;
	}

	/* header */
	.header__contacts,
	.header__callback {
		display: none;
	}

	.burger {
		display: inline-flex;
	}

	/* hero */
	.dark-block--top {
		padding-bottom: 20px;
	}

	.hero {
		padding-top: 120px;
	}

	.tag {
		font-size: 12px;
		line-height: 1.4;
	}

	.h1 {
		font-size: 36px;
	}

	.hero__subtitle {
		font-size: 20px;
	}

	.hero__bottom {
		gap: 60px;
		margin-top: 30px;
	}

	.hero__slider-wrap {
		width: 392px;
	}

	.hero-card__img {
		width: 89px;
	}
	
	.hero__lenses {
		width: 180px;
  		height: 80px;
	}

	/* quiz */
	.quiz__box {
		padding: 20px;
	}

	.quiz__body {
		flex-direction: column;
	}

	.benefits {
		width: 100%;
		min-height: 0;
	}

	.benefits__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.benefit {
		flex-direction: column;
		align-items: flex-start;
		min-height: 180px;
	}

	/* compare */
	.compare__side {
		padding: 20px;
	}

	.feature {
		flex-direction: column;
		align-items: flex-start;
		min-height: 128px;
	}

	.promo__title {
		font-size: 18px;
	}

	/* works */
	.works {
		padding: 20px 0;
	}

	.works__bg {
		height: 600px;
	}

	.works__hint {
		font-size: 14px;
	}

	.works__hint .icon {
		width: 20px;
		height: 20px;
	}

	.work {
		grid-template-columns: minmax(0, 1fr) 264px;
		padding: 20px;
	}

	.work::before {
		top: -300px;
		left: 357px;
		width: 702px;
		height: 702px;
	}

	/* steps */
	.steps__grid {
		grid-template-columns: 100%;
	}

	.steps__photo {
		min-height: 248px;
	}

	.steps__photo img {
		object-position: center 70%;
	}

	.step__num {
		width: 124px;
		height: auto;
		min-height: 124px;
		font-size: 48px;
	}

	.steps-cta {
		min-height: 124px;
	}

	.steps-cta__content {
		gap: 10px;
	}

	/* faq */
	.faq {
		padding-top: 20px;
		border-radius: 20px 20px 0 0;
	}

	.faq__box {
		padding: 20px;
		border-radius: 20px;
	}

	/* footer */
	.footer__main {
		padding-bottom: 20px;
		border-radius: 0 0 20px 20px;
		background-position: 50% -85px;
	}

	.footer__card {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"logo callback"
			"logo branches"
			"about branches";
		column-gap: 20px;
		row-gap: 0;
	}

	.footer__logo {
		align-self: start;
		width: 260px;
	}

	.footer__callback {
		margin: 0 0 30px;
	}

	.footer__branches {
		align-self: end;
	}

	.footer__branches {
		text-align: right;
	}

	.footer__branches .branch {
		align-items: flex-end;
	}

	.footer__branches .branch+.branch {
		margin-top: 20px;
	}

	.footer__about {
		flex-direction: row-reverse;
		align-items: center;
		justify-self: start;
		margin: 0;
	}

	.footer__tagline {
		text-align: left;
	}

	.footer__bottom {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* =========================================================
   ≤ 767px  (макет 480)
   ========================================================= */
@media (max-width: 767px) {
	:root {
		--section-gap: 90px;
	}

	/* section head — по центру */
	.section-head {
		text-align: center;
	}

	.section-head__top {
		align-items: center;
	}

	.subtitle {
		font-size: 18px;
		font-weight: 500;
	}

	.section-head__line {
		width: 100%;
		background: linear-gradient(90deg, rgba(244, 219, 28, 0) 0%, rgba(244, 219, 28, .8) 47%, rgba(244, 219, 28, .8) 53%, rgba(244, 219, 28, 0) 100%);
	}

	.section-head__line::before,
	.section-head__line::after {
		content: "";
		position: absolute;
		top: -2px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--c-yellow);
	}

	.section-head__line::before {
		left: calc(50% - 20px);
	}

	.section-head__line::after {
		left: calc(50% + 15px);
	}

	.section-head__desc {
		margin: 20px auto 0;
		text-align: center;
	}

	/* menu */
	.mobile-menu__panel {
		left: 20px;
		width: auto;
		max-width: none;
	}

	/* hero */
	.hero {
		text-align: center;
	}

	.hero__top {
		align-items: center;
	}

	.hero__tags {
		justify-content: center;
		gap: 10px;
	}

	.h1 {
		font-size: 34px;
	}

	.hero__cta {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hero__bottom {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		margin-top: 60px;
	}

	.hero__info {
		align-items: center;
		width: 100%;
	}

	.hero__info-text {
		width: 100%;
	}

	.hero__slider-wrap {
		width: 100%;
		text-align: left;
	}

	.hero-card {
		width: 100%;
	}

	.hero-card__img {
		width: 131px;
	}
	
	.hero__tags li {
		padding: 10px 15px;
  		font-size: 12px;
	}

	/* quiz */
	.quiz {
		padding-top: 30px;
  		padding-bottom: 20px;
	}
	
	.benefits__list {
		grid-template-columns: 100%;
	}

	.benefit {
		flex-direction: row;
		align-items: center;
		min-height: 100px;
	}

	/* compare */
	.badge {
		height: 38px;
		font-size: 14px;
		font-weight: 500;
	}

	.badge--gray {
		height: 28px;
		font-weight: 400;
	}

	.compare__list li {
		font-size: 14px;
	}

	.compare__list li::before {
		top: 7px;
	}

	.measure {
		grid-template-columns: 100%;
		grid-template-areas:
			"title"
			"panel";
		gap: 250px;
		background-position: 30% center;
	}

	.measure__panel {
		display: block;
		grid-area: panel;
		padding: 15px;
		border-radius: 10px;
		background: var(--c-white);
		color: var(--c-dark);
	}

	.measure__stat {
		padding: 0;
	}

	.measure__features {
		grid-template-columns: 100%;
		gap: 15px;
		margin-top: 20px;
	}

	.feature {
		flex-direction: row;
		align-items: center;
		min-height: 70px;
		background: var(--c-gray);
		border: 0;
		color: var(--c-dark);
	}

	/* works */
	.works-cta {
		padding-top: 160px;
		padding-bottom: 20px;
		background-position: 30% 100%;
	}
	
	.works__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"cars"
			"hint"
			"controls"
			"slider";
	}

	.works__hint {
		margin: 10px 0 0;
		font-size: 12px;
		line-height: 1.4;
	}

	.works__hint .icon {
		width: 16px;
		height: 16px;
	}

	/* на мобиле: 01 ........ ← → */
	.works__controls {
		justify-content: space-between;
		margin-top: 20px;
	}

	.works__counter {
		order: 0;
		text-align: left;
	}

	.works__arrows {
		display: flex;
		order: 1;
		gap: 22px;
	}

	.car-card {
		width: 209px;
	}

	.works-slider {
		clip-path: none;
		overflow: hidden;
	}

	.work {
		grid-template-columns: 100%;
		grid-template-areas:
			"gallery"
			"info"
			"aside";
		gap: 20px;
	}

	.work::before {
		top: 167px;
		left: -63px;
	}

	.work__info {
		gap: 100px;
	}

	.work__aside {
		margin-top: 10px;
	}

	.works__bg {
		height: 520px;
	}

	/* steps */
	.steps__list {
		--line-gap: 15px;
	}

	.step {
		flex-direction: column;
		gap: 20px;
		padding: 20px;
		border-radius: 20px;
		background: var(--c-white);
	}

	.step--cta {
		padding: 0;
		background: none;
	}

	.step__num {
		width: 50px;
		height: 50px;
		min-height: 0;
		border-radius: 10px;
		font-size: 24px;
	}

	.step__body {
		padding: 0;
		border-radius: 0;
	}

	.step__title,
	.steps-cta__title {
		font-size: 18px;
	}

	.step__head .badge {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.steps-cta {
		min-height: 189px;
		gap: 0;
	}

	.steps-cta__content {
		justify-content: flex-start;
		gap: 20px;
	}

	.steps-cta__car {
		height: 124px;
	}

	.steps-cta__btn {
		width: 60px;
		height: 60px;
		border-radius: 15px;
	}

	.steps__photo {
		min-height: 382px;
	}

	.steps__photo img {
		object-position: 25% 85%;
	}

	/* faq */
	.faq__list {
		grid-template-columns: 100%;
	}

	/* footer */
	.footer__card {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"logo callback"
			"branches branches"
			"about about";
		row-gap: 40px;
	}

	.footer__logo {
		align-self: center;
		width: 107px;
	}

	.footer__callback {
		margin: 0;
	}

	.footer__branches {
		align-self: start;
	}

	.footer__branches .branch+.branch {
		margin-top: 20px;
	}

	.footer__branches {
		text-align: left;
	}

	.footer__branches .branch {
		align-items: flex-start;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.footer__about {
		flex-direction: row;
		justify-content: space-between;
		justify-self: stretch;
		margin-top: -20px;
	}

	.footer__bottom {
		padding: 20px 0;
		text-align: center;
	}

	.footer__bottom-container {
		flex-direction: column-reverse;
		align-items: center;
		gap: 5px;
	}

	.footer__legal,
	.footer__docs {
		flex-direction: column-reverse;
		align-items: center;
		gap: 5px;
		text-align: center;
	}
}

/* =========================================================
   ≤ 479px  (макет 360)
   ========================================================= */
@media (max-width: 479px) {
	:root {
		--section-gap: 80px;
	}

	.h2 {
		font-size: 18px;
	}

	.subtitle {
		font-size: 16px;
		font-weight: 400;
	}

	.label {
		height: 28px;
		font-size: 14px;
	}

	/* в макете текст чуть шире колонки — даём ему место */
	.section-head__desc {
		width: auto;
		margin: 20px -10px 0;
	}

	.btn {
		font-size: 14px;
	}

	.btn--lg {
		height: 50px;
		padding: 15px 20px;
	}

	.btn--square {
		width: 50px;
		padding: 0;
	}

	.btn-group .btn:not(.btn--square) {
		min-width: 0;
		white-space: normal;
		text-align: center;
	}

	.cta__note {
		margin-top: 5px;
		font-size: 12px;
		line-height: 1.4;
	}

	/* header */
	.header__tagline {
		display: none;
	}

	/* hero */
	.tag {
		padding: 5px 10px;
		font-size: 10px;
	}

	.h1 {
		font-size: 24px;
	}

	.hero__subtitle {
		font-size: 16px;
	}

	.hero__text {
		font-size: 14px;
	}

	.hero__slider-wrap>.hero__nav {
		display: none;
	}

	.hero-card {
		flex-direction: column;
		min-height: 320px;
	}

	.hero-card__img {
		width: 100%;
		height: 150px;
		object-position: center;
	}

	.hero__controls {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.hero__pagination {
		flex: 1;
	}

	.hero__nav--bottom {
		display: flex;
		margin: 0;
	}
	
	.hero__tags li {
		padding: 5px 7px;
		font-size: 10px;
	}

	/* quiz */
	.benefits__title {
		font-size: 16px;
		font-weight: 400;
	}

	.benefit {
		flex-direction: column;
		align-items: flex-start;
		min-height: 170px;
	}

	.benefit .icon-box {
		width: 50px;
		height: 50px;
	}

	/* compare */
	.compare__photos {
		grid-template-columns: 100%;
		min-height: 0;
	}

	.compare__photo,
	.compare__photo:first-child,
	.compare__photo:last-child {
		min-height: 250px;
		padding: 15px;
		border-radius: 20px;
	}

	.compare__list {
		align-self: flex-end;
		text-align: right;
	}

	.compare__list li {
		padding: 0 14px 0 0;
	}

	.compare__list li+li {
		margin-top: 5px;
	}

	.compare__list li::before {
		left: auto;
		right: 0;
	}

	.measure {
		padding: 15px;
	}

	.measure__title {
		font-size: 20px;
		font-weight: 500;
	}

	.feature {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
	}
	
	.promo {
		padding: 15px;
	}

	.promo__title {
		font-size: 16px;
	}

	/* works */
	.work-gallery {
		border-radius: 20px;
	}

	.work__aside {
		gap: 30px;
		min-height: 0;
		padding: 0;
		border-radius: 0;
		overflow: visible;
	}

	.work__aside::before {
		content: none;
	}

	.work__photo {
		position: static;
		height: auto;
		aspect-ratio: 1;
		border-radius: 20px;
	}

	.work__cta {
		align-self: center;
		color: var(--c-dark);
	}

	.work-thumbs .swiper-slide {
		height: 50px;
	}

	.work__info {
		gap: 70px;
	}

	.work__title {
		font-size: 20px;
		font-weight: 500;
	}

	.work__detail dt {
		font-size: 16px;
	}

	.works-cta__label {
		font-size: 14px;
	}

	/* steps */
	.steps__list {
		--line-gap: 10px;
	}

	.step {
		gap: 15px;
		padding: 15px;
	}

	.step--cta {
		padding: 0;
	}

	.step__body {
		gap: 15px;
	}

	.step__head .badge {
		top: 15px;
		right: 15px;
	}

	.step__title,
	.steps-cta__title {
		font-size: 16px;
		font-weight: 400;
	}

	.steps-cta {
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		gap: 20px;
		min-height: 191px;
		padding: 15px;
	}

	.steps-cta__content {
		gap: 10px;
		align-self: stretch;
	}

	.steps-cta__car {
		height: 116px;
	}

	.steps-cta__btn {
		width: 50px;
		height: 50px;
	}

	.steps-cta__btn .icon {
		width: 16px;
		height: 16px;
	}

	.steps-cta .cta__note {
		font-size: 14px;
	}

	.steps__photo-text {
		font-size: 16px;
		font-weight: 400;
	}

	/* footer */
	.footer__card {
		grid-template-columns: 100%;
		grid-template-areas:
			"logo"
			"callback"
			"branches"
			"about";
		justify-items: center;
	}

	.footer__logo {
		width: 170px;
	}

	.footer__callback {
		justify-self: center;
		width: 181px;
	}

	.footer__branches {
		width: 100%;
	}

	.footer__tagline {
		font-size: 12px;
		text-align: left;
	}

	/* faq */
	.faq-item__question {
		font-size: 14px;
		font-weight: 400;
	}
}


/* popup */
.popup {
    z-index: 9999;
    opacity: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    inset: 0%;
}

.popup-bg {
    z-index: 9998;
    background-color: #0000004d;
    position: absolute;
    inset: 0%;
}

.popup-close {
    background-image: url("https://cdn.prod.website-files.com/6a5482195b1476a9f7aa90e8/6a54aff1f3fa66b136bd2f3b_Vecfsdfsdfsdtor.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    width: 24px;
    height: 24px;
    position: absolute;
    inset: 20px 20px auto auto;
}

.popup-block {
    position: relative;
    z-index: 9999;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    background-color: var(--c-white);
    border-radius: 20px;
}

/*  */
#custom-form .custom-form {
	margin: 0;	
}

#custom-form .custom-field {
	padding-block: 7.5px;
}

#custom-form .custom-field input {
	height: 60px;
}

#custom-form .custom-form-btn {
	height: 60px;
	width: 100%;
	color: var(--c-dark);
}

#custom-form .wpforms-title {
	font-family: var(--font-accent);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
	text-align: center;
}

#custom-form .wpforms-description {
	text-align: center;
}

#custom-form .custom-label label {
	font-size: 14px;
}