@font-face {
	font-family: 'Geologica';
	src: url(../fonts/Geologica.ttf) format('truetype');
}

@font-face {
	font-family: 'Montserrat';
	src: url(../fonts/Montserrat.ttf) format('truetype');
}

:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 0.45s;
	--dur-slow: 0.8s;
	--rock-graphite: #212524;
	--smoky-quartz: #495551;
	--manul-eyes: #c0ea6c;
	--natural-white: #f4f7f0;
	--steppe-sand: #d6b68f;
	--dimmed-manul-eyes: #a1ae8f;
}

* { margin: 0; padding: 0; }

body, html {
	font-family: 'Geologica', sans-serif;
	height: 100%;
	margin: 0; 
	overflow: hidden;
	padding: 0;
	width: 100%;
}

body {
	background-color: var(--rock-graphite);
	color: var(--natural-white);
	
	user-select: none;
	-webkit-user-select: none;
	/* Отключает системные жесты браузера (например, свайп "назад") */
	/* и стандартный скролл всей страницы */
	touch-action: none;
	/* Отключает системное меню при долгом нажатии (iOS/Android) */
	-webkit-touch-callout: none;
	/* Убирает синюю подсветку при клике в некоторых браузерах */
	-webkit-tap-highlight-color: transparent;
}

a { color: #fff; text-decoration: none; transition: transform .2s var(--ease-out); }
a:active { transform: scale(0.98); }
img { display: block; max-width: 100%; }

input,
button { font-family: 'Geologica', sans-serif; }

.btn {
	align-items: center;
	border-radius: 8px;
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 12px 24px;
}
.btn.btn-blank {
	background: none;
	border: 1px solid var(--natural-white);
}



h1, h2, h3, h4 {
	font-family: 'Geologica', sans-serif;
	font-weight: 400;
}

h1 {
	font-size: 48px;
	margin-bottom: 12px;
}
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }

p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
}

p.lead { font-size: 20px; }

.icon {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 1em;
	width: 1em;
}
.icon-back {
	background-image: url(../i/arrow.svg);
	transform: rotate(180deg);
}

.slide {
    align-items: center;
	display: none;
	height: 100vh;
	flex-direction: column;
	justify-content: center;
	left: 0;
    position: absolute;
    top: 0; 
	width: 100vw;
}
.slide:nth-child(1) { display: flex; }


.home-video-bg {
	bottom: 0;
	height: 100vh;
	left: 0;
	position: absolute;
	width: 100vw;
	z-index: 0;
}

.prod-video-bg {
	bottom: 0;
	height: 100vh;
	left: 0;
	position: absolute;
	width: 100vw;
	z-index: 0;
}
.prod-video-bg video,
.home-video-bg video {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}


.slide-start {
	gap: 32px;
	justify-content: stretch;
}

.slide-start header,
.slide-start footer {
	padding: 6vh;
	position: relative;
	text-align: center;
	z-index: 1;
}

.slide-start header { flex-grow: 1; }
.slide-start header img { width: 15vw; }

.slide-start .start-btn {
	background-color: var(--manul-eyes);
	border-radius: 16px;
	color: var(--rock-graphite);
	display: flex;
	font-size: 20px;
	margin-bottom: 8px;
	padding: 16px 64px;
}
.slide-start footer small { font-size: 14px; opacity: 0.5; }


.slide-menu nav {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	width: 90vw;
}
.slide-menu nav a {
	align-items: flex-start;
	aspect-ratio: 1/1;
	background-image: url(../i/menu-item-bg.jpg);
	background-size: cover;
	background-position: bottom right;
	border-radius: 16px;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	position: relative;
}
.slide-menu nav a .arrow { left: 24px; position: absolute; top: 24px; width: 2em; }
.slide-menu nav a .cover { aspect-ratio: 1/1; }
.slide-menu nav a h3 { font-size: 24px;}
.slide-menu nav a p { color: var(--dimmed-manul-eyes); font-size: 14px; }


.slide-prod { align-items: stretch; }

.slide-prod header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 3vw 4vw;
	position: relative;
	z-index: 2;
}

.slide-prod header .logo { max-width: 500px; width: 23vw; }
.slide-prod header .logo img { width: 100%; }

.slide-prod header .phone { font-weight: 200; line-height: 1.5; }


.slide-prod .model-disassemble {
	background-color: var(--manul-eyes);
	background-image: url(../i/disassemble.png);
	background-repeat: no-repeat;
	background-position: 24px center;
	background-size: auto 50%;
	box-sizing: border-box;
	color: var(--rock-graphite);
	font-size: 20px;
	font-family: 'Geologica', sans-serif;
	padding-left: 55px;
	position: absolute;
	right: 4vw;
	justify-content: flex-start;
	top: 0;
	z-index: 2;
	width: 9em;
}

.slide-prod .content {
	display: flex;
	font-family: 'Montserrat', sans-serif;
	flex-grow: 1;
	flex-direction: column;
	padding: 1vh 4vw;
	position: relative;
	z-index: 1;
}

.slide-prod .prod-about {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 36px;
	justify-content: center;
	position: relative;
	width: 33vw;
	z-index: 1;
}

.slide-prod .about-price { font-size: 36px; }
.slide-prod .about-price .label { display: block; font-size: 16px;}

.slide-prod .prod-about .about-adv {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 25em;
}

.slide-prod .prod-about .about-adv > div {
	background-color: var(--smoky-quartz);
	border-radius: 8px;
	color: var(--natural-white);
	padding: 16px;
}

.slide-prod .prod-about .about-size {
	align-items: center;
	display: flex;
	gap: .4em;
}
.slide-prod .prod-about .about-size span {
	border: 1px solid var(--smoky-quartz);
	border-radius: 4px;
	letter-spacing: 2px;
	padding: 4px 8px;
}

.slide-prod .model-container {
	top: -10vh;
	height: 90vh;
	position: absolute;
	right: 0;
	width: 80vw;
	z-index: 0;
}

.slide-prod .model-container#b1b-container,
.slide-prod .model-container#a1-container,
.slide-prod .model-container#b7-container {
	bottom: -15vh;
    height: 100vh;
    left: 0;
	top: auto;
    width: 120vw;
}

.slide-prod .model-container .loading-text {
	color: var(--natural-white);
	font-size: 16px;
	font-weight: 300;
	left: 50%;
	opacity: 1;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.5s var(--ease-out);
	white-space: nowrap;
	z-index: 0;
}

.slide-prod .model-container .loading-text .spinner-container { margin-bottom: 12px; }

.slide-prod .model-container.loading-hidden .loading-text {
	opacity: 0;
	pointer-events: none;
}

model-viewer {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}
model-viewer.model-ready { opacity: 1; }
model-viewer::part(default-progress-bar) { display: none; }

.slide-prod footer {
	align-items: stretch;
	background-color: rgba(255 255 255 / 10%);
	backdrop-filter: blur(8px);
	border-radius: 16px;
	display: flex;
	font-size: 20px;
	justify-content: space-between;
	margin: 3vw 4vw;
	position: relative;
	z-index: 2;
}

.slide-prod footer nav {
	display: flex;
	gap: 36px;
	margin: 16px 24px;
}

.slide-prod footer nav a { color: var(--manul-eyes); }
.slide-prod footer nav a.active { color: var(--natural-white); }

.slide-prod footer .btn {
	background: var(--manul-eyes);
	box-sizing: border-box;
	color: var(--rock-graphite);
	height: 100%;
}

.slide-prod .tab {
	align-items: center;
	display: none;
	flex-grow: 1;
}
.slide-prod .tab.tab-active { display: flex; }

.spec-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	height: 100%;
	max-height: 32em;
	width: 100%;
}
.spec-list > div {
	background-color: var(--natural-white);
	border-radius: 8px;
	color: var(--rock-graphite);
	padding: 24px 32px;
}
.spec-list > div strong { font-size: 64px; font-weight: 500; }
.spec-list > div .n {
	font-family: 'Geologica', sans-serif;
	font-size: 32px;
	margin-bottom: 16px;
}
.spec-list > div p {
	color: var(--smoky-quartz);
	font-size: 20px;
	font-weight: 400;
}

.spec-list.spec-list-3 { grid-template-columns: repeat(3, 1fr); }


.grid-3 {
	display: grid;
	gap: 8%;
	grid-template-columns: repeat(3, 1fr);
}


.feature-list {
	display: grid;
	gap: 8%;
	grid-template-columns: repeat(3, 1fr);
}
.feature-list > div {
	display: flex;
	flex-direction: column;
}
.feature-list p {
	font-size: 18px;
	font-weight: 400;
	margin: 8px 0;
}
.feature-list blockquote {
	flex-grow: 1;
	font-size: 16px;
	line-height: 1.4;
	margin: 16px 0;
}
.feature-list blockquote p { font-size: 16px; }
.feature-list blockquote .fb {
	display: flex;
	gap: 4px;
	font-size: 14px;
	flex-wrap: wrap;
}
.feature-list blockquote .fb > span {
	background-color: var(--dimmed-manul-eyes);
	color: var(--rock-graphite);
	padding: 4px 8px;
	border-radius: 8px;
	white-space: nowrap;
}

.feature-list p.mark {
	background-color: var(--natural-white);
	border-radius: 8px;
	color: var(--rock-graphite);
	font-size: 18px;
	padding: 12px 16px;
}

.file-list {
	display: grid;
	gap: 5vh 6vw;
	grid-template-columns: repeat(3, 1fr);
}

.file-list > a {
	align-items: center;
	background: var(--smoky-quartz);
	display: flex;
	gap: 24px;
	padding: 8px;
	border-radius: 16px;
}
.file-list > a .file-icon {
	background-color: var(--manul-eyes);
	background-image: url(../i/file-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	border-radius: 16px;
	display: block;
	flex-shrink: 0;
	height: 6em;
	width: 6em;
}
.file-list > a h6 { font-size: 16px; }


.area-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	width: 100%;
}
.area-list > div {
	background-color: var(--natural-white);
	border-radius: 8px;
	color: var(--rock-graphite);
	padding: 24px 36px;
}
.area-list > div h3 {
	color: var(--rock-graphite);
	font-size: 18px;
}
.area-list > div h3 + h3 { margin-top: 48px; }
.area-list > div p {
	color: var(--smoky-quartz);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 8px;
}

.area-list.area-list-3 { grid-template-columns: repeat(3, 1fr); }


#home.entering { animation: fadeIn 1s var(--ease-out) both; }
#home.exiting { animation: fadeOut 1s var(--ease-out) both; }

#home.entering header,
#home.entering footer { animation: fadeInBottom 1s var(--ease-out) both; animation-delay: .5s; }

#home.exiting header { animation: fadeOutLeft var(--dur-fast) var(--ease-out) both; animation-delay: .2s; }
#home.exiting footer { animation: fadeOutLeft var(--dur-fast) var(--ease-out) both; }

#menu.entering nav a { animation: fadeInBottom .5s var(--ease-out) calc(var(--i) * 0.1s) both; }
#menu.entering nav a .arrow { animation: fadeIn 1s var(--ease-out) calc(var(--i) + 0.5s) both; }
#menu.entering nav a .cover { animation: fadeInLeft 1s var(--ease-out) calc(var(--i) * 0.3s) both; }
#menu.entering nav a h3 { animation: fadeInBottom 1s var(--ease-out) calc(var(--i) * 0.2s) both; }
#menu.entering nav a p { animation: fadeIn 1s var(--ease-out) calc(var(--i) * 0.2s + .5s) both; }
#menu.exiting nav a { animation: fadeOutTop .5s var(--ease-out) calc(var(--i) * 0.1s) both; }

/* --- PRODUCT SLIDES --- */

.slide-prod.entering .prod-video-bg {
	animation: fadeIn var(--dur-slow) var(--ease-out) both;
}

.slide-prod.entering header {
	animation: fadeInBottom .55s var(--ease-out) .1s both;
}

.slide-prod.entering .content h1 {
	animation: fadeInLeft .55s var(--ease-out) .15s both;
}

.slide-prod.entering .model-container {
	animation: scaleIn var(--dur-slow) var(--ease-out) .2s both;
}

.slide-prod.entering footer {
	animation: fadeSlideUp .55s var(--ease-out) .25s both;
}

.slide-prod.exiting header,
.slide-prod.exiting footer {
	animation: fadeOut var(--dur-fast) var(--ease-out) both;
}

.slide-prod.exiting .content {
	animation: fadeScaleOut var(--dur-fast) var(--ease-out) both;
}

.slide-prod.exiting .prod-video-bg {
	animation: fadeOut var(--dur-slow) var(--ease-out) both;
}

/* Каскад контента табов: срабатывает при входе на слайд
   (перезапуск через display-переключение) и при смене таба */

.slide-prod .tab.tab-active .lead {
	animation: fadeSlideUp .55s var(--ease-out) .1s both;
}

.slide-prod .tab.tab-active .about-price {
	animation: fadeSlideUp .55s var(--ease-out) .1s both;
	animation-delay: .77s;
}
.slide-prod .tab.tab-active .about-size {
	animation: fadeSlideUp .55s var(--ease-out) .1s both;
	animation-delay: .66s;
}

.slide-prod .tab.tab-active .about-adv > div { animation: fadeInLeft .55s var(--ease-out) both; }
.slide-prod .tab.tab-active .about-adv > div:nth-child(1) { animation-delay: .2s; }
.slide-prod .tab.tab-active .about-adv > div:nth-child(2) { animation-delay: .32s; }
.slide-prod .tab.tab-active .about-adv > div:nth-child(3) { animation-delay: .44s; }
.slide-prod .tab.tab-active .about-adv > div:nth-child(4) { animation-delay: .56s; }

.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div { animation: fadeInBottom .5s var(--ease-out) both; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(1)  { animation-delay: .15s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(2)  { animation-delay: .21s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(3)  { animation-delay: .27s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(4)  { animation-delay: .33s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(5)  { animation-delay: .39s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(6)  { animation-delay: .45s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(7)  { animation-delay: .51s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(8)  { animation-delay: .57s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(9)  { animation-delay: .63s; }
.slide-prod .tab.tab-active :is(.spec-list, .grid-3, .feature-list, .area-list) > div:nth-child(10) { animation-delay: .69s; }

.slide-prod .tab.tab-active :is(.file-list) > a { animation: fadeInBottom .5s var(--ease-out) both; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(1)  { animation-delay: .15s; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(2)  { animation-delay: .21s; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(3)  { animation-delay: .27s; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(4)  { animation-delay: .33s; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(5)  { animation-delay: .39s; }
.slide-prod .tab.tab-active :is(.file-list) > a:nth-child(6)  { animation-delay: .45s; }

/* --- LEAD FORM DRAWER --- */

#lead-overlay {
	background-color: rgb(0 0 0 / 60%);
	backdrop-filter: blur(4px);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--dur-slow) var(--ease-out);
	z-index: 900;
}
#lead-overlay.visible {
	opacity: 1;
	pointer-events: auto;
}

#lead-drawer {
	background-color: var(--rock-graphite);
	border-radius: 24px 0 0 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 100vw;
	overflow-y: auto;
	padding: 40px 48px;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(103%);
	transition: transform .55s var(--ease-out);
	width: 480px;
	z-index: 1000;
}
#lead-drawer.open {
	transform: translateX(0);
}

#lead-close {
	align-self: flex-end;
	background: none;
	border: none;
	cursor: pointer;
	margin: -8px -8px 0 0;
	opacity: .7;
	padding: 8px;
	transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#lead-close:hover { opacity: 1; transform: rotate(90deg); }
#lead-close img { width: 16px; }

#lead-drawer h2 { font-size: 32px; margin-top: 16px; }
#lead-drawer .lead-subtitle { color: var(--dimmed-manul-eyes); font-size: 15px; margin-top: 8px; }

#lead-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
	color: var(--dimmed-manul-eyes);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.field label i { color: var(--manul-eyes); font-style: normal; }

.field input,
.field textarea {
	background-color: var(--rock-graphite);
	border: 1px solid var(--smoky-quartz);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--natural-white);
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	outline: none;
	padding: 13px 14px;
	transition: border-color .2s var(--ease-out);
	-webkit-user-select: text;
	user-select: text;
}
.field input:focus,
.field textarea:focus { border-color: var(--manul-eyes); }
.field input::placeholder,
.field textarea::placeholder { color: var(--smoky-quartz); }
.field textarea { min-height: 84px; resize: none; }

#lead-submit {
	background-color: var(--manul-eyes);
	border: none;
	border-radius: 8px;
	color: var(--rock-graphite);
	cursor: pointer;
	font-family: 'Geologica', sans-serif;
	font-size: 17px;
	margin-top: 8px;
	padding: 15px 24px;
	transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
#lead-submit:hover { opacity: .9; }
#lead-submit:active { transform: scale(.98); }

#lead-success {
	align-items: center;
	animation: fadeIn .4s var(--ease-out) both;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18vh;
	text-align: center;
}
#lead-success img { margin-bottom: 32px; opacity: .5; width: 120px; }
#lead-success p { color: var(--dimmed-manul-eyes); }

#lead-form[hidden],
#lead-success[hidden] { display: none; }

/* --- KEYFRAMES --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; }
}
@keyframes fadeInBottom {
  from { opacity: 0; transform: translateY(-32px); }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleInLeft {
  from { transform: scale(0.9) translateX(-32px); opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleInTop {
  from { transform: scaleY(0); opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut { to { opacity: 0; } }
@keyframes scaleOut { to { transform: scale(0.9); opacity: 0; } }
@keyframes fadeScaleOut { to { opacity: 0; transform: scale(0.98); } }
@keyframes fadeOutLeft { to { opacity: 0; transform: translateX(-32px); } }
@keyframes fadeOutBottom { to { opacity: 0; transform: translateY(-32px); } }
@keyframes fadeOutTop { to { opacity: 0; transform: translateY(32px); } }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; }
}

/* --- FILE LIGHTBOX --- */

#file-lightbox {
	background-color: rgb(0 0 0 / 80%);
	backdrop-filter: blur(4px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	opacity: 0;
	padding: 5vh 5vw;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--dur-slow) var(--ease-out);
	z-index: 1100;
}
#file-lightbox.visible {
	opacity: 1;
	pointer-events: auto;
}
#file-lightbox img {
	border-radius: 12px;
	max-height: 90vh;
	max-width: 90vw;
	object-fit: contain;
	transform: scale(0.92);
	transition: transform var(--dur-slow) var(--ease-out);
	box-shadow: 0 20px 60px rgb(0 0 0 / 50%);
}
#file-lightbox.visible img { transform: scale(1); }
#file-lightbox .file-lightbox-close {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	opacity: .7;
	padding: 12px;
	position: absolute;
	right: 16px;
	top: 16px;
	transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#file-lightbox .file-lightbox-close:hover { opacity: 1; transform: rotate(90deg); }
#file-lightbox .file-lightbox-close img { width: 20px; box-shadow: none; transform: none; }


.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-spinner {
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}

.progress-spinner .path {
  stroke: var(--manul-eyes);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}