/*
Theme Name: DomService
Author: Amir
Version: 2.0
Description: Дом Сервис — инженерные системы
*/

:root{
	--black:#0d1114;
	--black-2:#171b1f;
	--gray:#f4f5f7;
	--gray-2:#6b7280;
	--gray-3:#e5e7eb;
	--white:#ffffff;
	--orange:#ff6b00;
	--orange-2:#ff8a3d;
	--radius:16px;
}

*{box-sizing:border-box;}

body{
	margin:0;
	font-family:'Manrope',sans-serif;
	background:var(--white);
	color:var(--black);
	-webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}

.container{
	max-width:1240px;
	margin:0 auto;
	padding:0 24px;
}

.eyebrow{
	display:inline-block;
	color:var(--orange);
	font-weight:800;
	letter-spacing:1.5px;
	text-transform:uppercase;
	font-size:13px;
	margin-bottom:10px;
}

.badge{
	display:inline-block;
	background:rgba(255,107,0,.15);
	border:1px solid var(--orange);
	color:var(--orange-2);
	font-weight:700;
	font-size:13px;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:8px 16px;
	border-radius:30px;
	margin-bottom:20px;
}

.btn{
	display:inline-block;
	padding:16px 30px;
	border-radius:12px;
	font-weight:700;
	font-size:16px;
	border:none;
	cursor:pointer;
	transition:.25s ease;
}

.btn-primary{
	background:var(--orange);
	color:var(--white);
	box-shadow:0 10px 25px rgba(255,107,0,.35);
}

.btn-primary:hover{
	background:var(--orange-2);
	transform:translateY(-3px);
	box-shadow:0 14px 30px rgba(255,107,0,.45);
}

.btn-outline{
	background:transparent;
	border:2px solid rgba(255,255,255,.5);
	color:var(--white);
}

.btn-outline:hover{
	border-color:var(--orange);
	color:var(--orange);
	transform:translateY(-3px);
}

.btn-outline-light{
	display:block;
	text-align:center;
	background:transparent;
	border:2px solid rgba(255,255,255,.35);
	color:var(--white);
	margin-top:14px;
}

.btn-outline-light:hover{
	border-color:var(--orange);
	color:var(--orange-2);
}

.btn-block{width:100%;text-align:center;}

/* ===== ШАПКА ===== */

.site-header{
	position:absolute;
	top:0;left:0;width:100%;
	z-index:999;
	padding:22px 0;
}

.header-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
}

.logo img{height:64px;width:auto;}

.main-nav{
	display:flex;
	gap:28px;
	flex:1;
	justify-content:center;
}

.main-nav a{
	color:var(--white);
	font-weight:600;
	font-size:15px;
	position:relative;
	padding:4px 0;
}

.main-nav a::after{
	content:"";
	position:absolute;
	left:0;bottom:-4px;
	width:0;height:2px;
	background:var(--orange);
	transition:.25s;
}

.main-nav a:hover::after{width:100%;}
.main-nav a:hover{color:var(--orange-2);}

.contact-btn{
	background:var(--orange);
	color:var(--white);
	padding:13px 26px;
	border-radius:12px;
	font-weight:700;
	font-size:15px;
	border:none;
	cursor:pointer;
	transition:.25s;
	white-space:nowrap;
}

.contact-btn:hover{
	background:var(--orange-2);
	transform:translateY(-2px);
}

.burger{
	display:none;
	flex-direction:column;
	gap:5px;
	background:none;
	border:none;
	cursor:pointer;
	padding:6px;
}

.burger span{
	width:26px;height:2px;
	background:var(--white);
	transition:.25s;
}

/* ===== МОДАЛКА КОНТАКТОВ ===== */

.contact-modal{
	position:fixed;
	inset:0;
	background:rgba(13,17,20,.75);
	backdrop-filter:blur(4px);
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	transition:.25s;
	z-index:2000;
	padding:20px;
}

.contact-modal.is-open{opacity:1;visibility:visible;}

.contact-modal__inner{
	background:var(--white);
	border-radius:20px;
	padding:36px;
	max-width:440px;
	width:100%;
	position:relative;
	text-align:center;
	transform:translateY(10px);
	transition:.25s;
}

.contact-modal.is-open .contact-modal__inner{transform:translateY(0);}

.contact-modal__inner h3{margin:0 0 8px;font-size:22px;}
.contact-modal__inner > p{margin:0 0 24px;color:var(--gray-2);}

.contact-modal__close{
	position:absolute;
	top:14px;right:18px;
	background:none;
	border:none;
	font-size:26px;
	cursor:pointer;
	color:var(--gray-2);
	line-height:1;
}

.contact-modal__buttons{display:flex;flex-direction:column;gap:12px;}

.contact-choice{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 18px;
	border-radius:14px;
	background:var(--gray);
	text-align:left;
	transition:.2s;
	border:1px solid var(--gray-3);
}

.contact-choice:hover{
	border-color:var(--orange);
	background:#fff3ea;
	transform:translateX(4px);
}

.contact-choice__icon{font-size:24px;}
.contact-choice small{color:var(--gray-2);font-weight:400;}

/* ===== HERO ===== */

.hero{
	position:relative;
	background:
		linear-gradient(180deg, rgba(13,17,20,.55) 0%, rgba(13,17,20,.75) 60%, var(--black) 100%),
		url('assets/images/banner.jpg');
	background-size:cover;
	background-position:center;
	min-height:900px;
	display:flex;
	align-items:center;
	color:var(--white);
	overflow:hidden;
	padding-top:140px;
	padding-bottom:60px;
}

.hero-content{
	position:relative;
	z-index:3;
	max-width:800px;
}

.hero h1{
	font-size:52px;
	line-height:1.15;
	font-weight:800;
	margin:0 0 20px;
	letter-spacing:-1px;
}

.hero-text{
	font-size:20px;
	line-height:1.6;
	color:#dbe1ea;
	margin:0 0 26px;
	max-width:640px;
}

.hero-list{margin-bottom:34px;}

.hero-list div{
	font-size:17px;
	margin:10px 0;
	color:#eef1f5;
}

.hero-buttons{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	margin-bottom:50px;
}

.hero-stats{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
}

.stat-card{
	width:150px;
	padding:18px;
	background:rgba(255,255,255,.08);
	backdrop-filter:blur(8px);
	border:1px solid rgba(255,255,255,.15);
	border-radius:14px;
	text-align:center;
	transition:.3s;
}

.stat-card:hover{
	transform:translateY(-5px);
	border-color:var(--orange);
}

.stat-card strong{
	display:block;
	font-size:38px;
	line-height:1;
	margin-bottom:8px;
	color:var(--orange);
}

.stat-card span{
	display:block;
	font-size:13px;
	color:var(--white);
}

/* ===== УСЛУГИ ===== */

.services{
	padding:110px 0 100px;
	background:var(--white);
	text-align:center;
}

.services h2{
	font-size:42px;
	color:var(--black);
	margin:0 0 60px;
}

.cards{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:26px;
	text-align:left;
}

.card{
	background:var(--white);
	border-radius:var(--radius);
	overflow:hidden;
	transition:.3s;
	box-shadow:0 8px 24px rgba(13,17,20,.08);
	border:1px solid var(--gray-3);
	display:flex;
	flex-direction:column;
}

.card:hover{
	transform:translateY(-10px);
	box-shadow:0 20px 45px rgba(13,17,20,.15);
	border-color:var(--orange);
}

.card-img{position:relative;}

.card-img img{
	width:100%;
	height:200px;
	object-fit:cover;
}

.card-icon{
	position:absolute;
	bottom:-22px;left:20px;
	width:46px;height:46px;
	background:var(--orange);
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	box-shadow:0 8px 18px rgba(255,107,0,.4);
}

.card h3{
	padding:34px 20px 6px;
	font-size:20px;
	color:var(--black);
	margin:0;
}

.card > p{
	padding:0 20px;
	color:var(--gray-2);
	font-size:14px;
	margin:8px 0 16px;
}

.card-more{
	margin:0 20px 20px;
	background:none;
	border:none;
	color:var(--orange);
	font-weight:700;
	font-size:14px;
	cursor:pointer;
	text-align:left;
	padding:0;
}

.card-more:hover{color:var(--orange-2);}

.card-detail{
	max-height:0;
	overflow:hidden;
	transition:max-height .35s ease;
	background:var(--gray);
	border-top:1px solid var(--gray-3);
}

.card-detail.is-open{max-height:700px;}

.card-detail__desc,
.card-detail__terms{
	padding:16px 20px 0;
	font-size:14px;
	line-height:1.6;
	color:#3a3f45;
	margin:0;
}

.card-detail__faq{padding:12px 20px 20px;}

.mini-faq{margin-top:12px;}

.mini-faq__q{font-weight:700;font-size:13.5px;color:var(--black);}
.mini-faq__a{font-size:13.5px;color:var(--gray-2);margin-top:3px;}

/* ===== СТАТИСТИКА-ПОЛОСА ===== */

.stats-strip{
	background:var(--black);
	padding:44px 0;
}

.stats-strip__row{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:24px;
}

.stat{text-align:center;flex:1;min-width:120px;}

.stat strong{
	display:block;
	font-size:32px;
	color:var(--orange);
	margin-bottom:6px;
}

.stat span{
	font-size:13px;
	color:#b7bdc4;
	text-transform:uppercase;
	letter-spacing:.5px;
}

/* ===== ОБЪЕКТЫ ===== */

.objects{
	padding:100px 0;
	background:var(--gray);
	text-align:center;
}

.objects h2{font-size:38px;margin:0 0 50px;}

.objects-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	text-align:left;
}

.object-card{
	background:var(--white);
	border-radius:var(--radius);
	padding:30px 24px;
	border:1px solid var(--gray-3);
	transition:.3s;
}

.object-card:hover{
	transform:translateY(-8px);
	border-color:var(--orange);
	box-shadow:0 16px 34px rgba(13,17,20,.1);
}

.object-card__icon{font-size:34px;display:block;margin-bottom:16px;}

.object-card h3{margin:0 0 8px;font-size:18px;}
.object-card p{margin:0;color:var(--gray-2);font-size:14px;line-height:1.5;}

/* ===== ПОЧЕМУ МЫ + БРЕНДЫ ===== */

.why{
	background:var(--black);
	color:var(--white);
	padding:100px 0;
}

.why-grid{
	display:grid;
	grid-template-columns:1.3fr 1fr;
	gap:60px;
	align-items:start;
}

.why-grid--single{grid-template-columns:1fr;max-width:560px;}

.why h2{font-size:36px;margin:0 0 30px;}

.why-list li{
	position:relative;
	padding-left:30px;
	margin-bottom:16px;
	font-size:15.5px;
	color:#dfe3e8;
	line-height:1.5;
}

.why-list li::before{
	content:"✓";
	position:absolute;
	left:0;top:0;
	color:var(--orange);
	font-weight:800;
}

.brands{margin-top:50px;}

.brands-row{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:14px;
}

.brands-row span{
	background:var(--black-2);
	border:1px solid #2a2f35;
	padding:10px 18px;
	border-radius:10px;
	font-weight:800;
	font-size:14px;
	letter-spacing:.5px;
	color:#e5e7eb;
}

.why-right{
	background:var(--black-2);
	border:1px solid #262b31;
	border-radius:var(--radius);
	padding:36px;
}

.why-right h3{margin:0 0 12px;font-size:24px;}
.why-right p{margin:0 0 24px;color:#c3c8cf;line-height:1.6;}

/* ===== FAQ ===== */

.faq{padding:100px 0;background:var(--white);text-align:center;}
.faq h2{font-size:36px;margin:0 0 40px;}

.faq-list{max-width:820px;margin:0 auto;text-align:left;}

.faq-item{
	border-bottom:1px solid var(--gray-3);
}

.faq-q{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	background:none;
	border:none;
	text-align:left;
	padding:22px 4px;
	font-size:17px;
	font-weight:700;
	color:var(--black);
	cursor:pointer;
}

.faq-q span{
	color:var(--orange);
	font-size:22px;
	transition:.25s;
	flex-shrink:0;
}

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

.faq-a{
	max-height:0;
	overflow:hidden;
	transition:max-height .3s ease;
	color:var(--gray-2);
	font-size:15px;
	line-height:1.6;
	padding:0 4px;
}

.faq-item.is-open .faq-a{max-height:300px;padding-bottom:22px;}

/* ===== СТРАНИЦА ДЛЯ ЗАСТРОЙЩИКОВ ===== */

.page-hero{
	background:linear-gradient(160deg, var(--black) 0%, #23282d 100%);
	color:var(--white);
	padding:170px 0 90px;
	text-align:left;
}

.page-hero h1{font-size:42px;line-height:1.2;margin:0 0 18px;max-width:760px;}
.page-hero .hero-text{max-width:700px;}

.z-services{padding:90px 0;background:var(--gray);text-align:center;}
.z-services h2{font-size:34px;margin:0 0 40px;}

/* ===== ФУТЕР ===== */

.footer{background:var(--black);color:#c3c8cf;padding:80px 0 0;}

.footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1fr;
	gap:40px;
	padding-bottom:50px;
	border-bottom:1px solid #22262b;
}

.footer-logo{height:48px;margin-bottom:16px;}

.footer-col h4{color:var(--white);font-size:16px;margin:0 0 18px;}
.footer-col p{margin:0 0 12px;font-size:14px;line-height:1.6;}
.footer-col ul li{margin-bottom:10px;font-size:14px;}
.footer-col ul li a:hover{color:var(--orange);}

.footer-contact-link{color:#e5e7eb;font-weight:600;}
.footer-contact-link:hover{color:var(--orange);}

.footer-social{display:flex;gap:14px;margin-top:6px;}
.footer-social a{
	font-size:13px;
	font-weight:700;
	color:var(--orange-2);
	border:1px solid #2a2f35;
	padding:6px 12px;
	border-radius:8px;
}
.footer-social a:hover{background:var(--orange);color:var(--white);border-color:var(--orange);}

.footer-bottom{
	padding:22px 0;
	text-align:center;
	font-size:13px;
	color:#7c828a;
}

/* ===== АДАПТИВ ===== */

@media (max-width:1080px){
	.cards{grid-template-columns:repeat(2,1fr);}
	.objects-grid{grid-template-columns:repeat(2,1fr);}
	.why-grid{grid-template-columns:1fr;}
	.footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
	.main-nav{
		position:fixed;
		top:0;right:0;
		height:100vh;
		width:78%;
		max-width:320px;
		background:var(--black);
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		padding:100px 30px 30px;
		gap:22px;
		transform:translateX(100%);
		transition:.3s ease;
		z-index:1500;
	}
	.main-nav.is-open{transform:translateX(0);}
	.main-nav a{font-size:18px;}

	.burger{display:flex;order:3;}
	.header-right{order:2;}
	.contact-btn{padding:11px 18px;font-size:14px;}

	.hero{min-height:auto;padding-top:120px;padding-bottom:60px;}
	.hero h1{font-size:36px;}
	.hero-text{font-size:17px;}
	.hero-stats{gap:12px;}
	.stat-card{width:calc(50% - 6px);}

	.services,.objects,.why,.faq,.z-services{padding:70px 0;}
	.services h2,.objects h2,.why h2,.faq h2,.z-services h2{font-size:30px;}
}

@media (max-width:640px){
	.cards{grid-template-columns:1fr;}
	.objects-grid{grid-template-columns:1fr;}
	.footer-grid{grid-template-columns:1fr;gap:30px;}
	.stats-strip__row{justify-content:space-between;}
	.stat{min-width:45%;}
	.hero-buttons{flex-direction:column;}
	.btn{width:100%;text-align:center;}
	.page-hero{padding-top:130px;}
	.page-hero h1{font-size:30px;}
}