@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('./font-awesome-line-awesome.css');

:root {
	--back: #0f0f11;
	--text: rgb(255, 255, 255);
	--primary: rgb(101, 142, 186);
	--gray: rgb(45, 49, 56);
	--grey: rgb(154, 161, 171);
}

*, *:after, *:before { margin:0; padding:0; box-sizing:border-box; word-break:break-word; }
body, select, textarea, input, button { font:400 14px/1.3 "Geist", sans-serif; color:var(--text); background:var(--back); }
a { text-decoration:none; cursor:pointer; color:var(--primary); }
a:hover, a:active { text-decoration:none; }

.btn { background:var(--primary); border:1px solid var(--primary); color:var(--text); border-radius:10px; padding:10px 15px; cursor:pointer; font-weight:500; display:inline-flex; gap:7px; align-items:center; }
	.btn_trans { background:none; border-color:var(--primary); color:var(--primary); }
.label { display:block; padding:10px 0; }
	.label span { display:block; margin:0 0 5px 0; }
.inp { border:0; border-radius:12px; padding:8px 16px; background:rgba(255,255,255,0.1); }
.cap { text-align:center; padding:40px 0; color:var(--gray); font-size:16px; }
	.cap_success { color:#78d989; }

.modal { position:fixed; overflow:auto; left:0; top:0; width:100%; height:100%; z-index:999; }
	.modal__back { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.3); }
	.modal__wrap { background:var(--back); margin:80px auto; max-width:480px; position:relative; border-radius:12px; }
	.modal__close { position:absolute; right:10px; top:10px; font-size:28px; cursor:pointer; }
	.modal__title { padding:20px 30px 0; font-size:24px; }
	.modal__body { padding:20px 30px 40px; }
.page { border-bottom:1px solid var(--gray); }
	.page__wrap { margin:0 auto; max-width:1280px; padding:35px 20px; }
	.page__title { font-size:28px; padding:20px 0; }
	.page__body {}
		.page__body hr { margin:20px 0; border:1px solid rgba(255,255,255,.1); }
		.page__body p { padding:10px 0; }
		.page__body h2, .page__body h3 { padding:10px 0; }
		.page__body ul, .page__body ol { margin-left:20px; }
		.page__body li { padding:3px 0; }

.layout {}
.header { border-bottom:1px solid var(--gray); box-shadow:0 2px 14px rgba(0, 0, 0, 0.5); position:relative; z-index:1; }
	.header__wrap { margin:0 auto; max-width:1280px; display:flex; gap:20px; align-items:center; padding:15px 20px; }
	.header__logo { display:flex; align-items:center; gap:10px; }
		.header__logo img { width:40px; height:40px; }
		.header__logo span { font-weight:500; font-size:18px; color:var(--text); }
	.header__nav { display:flex; list-style:none; flex-grow:1; justify-content:center; gap:20px; }
		.header__nav li {}
		.header__nav a { font-weight:500; color:var(--grey); }
			.header__nav a:hover { color:var(--primary); }
	.header__phone { color:var(--primary); font-weight:700; display:block; }
	.header__call { font-size:13px; font-weight:500; }
	.header__menu { display:none; font-size:13px; font-weight:500; }
.hero { border-bottom:1px solid var(--gray); background:radial-gradient(900px 480px at 85% -10%, #658eba47, transparent 60%), linear-gradient(160deg, #16181c, #0f0f11); }
	.hero__wrap { margin:0 auto; max-width:1280px; padding:120px 20px; position:relative; }
	.hero__info { position:relative; }
	.hero__title { font-size:48px; line-height:1.1; max-width:700px; }
	.hero__desc { font-size:18px; color:var(--grey); padding:20px 0; max-width:640px; }
	.hero__actions { margin:20px 0 0; display:flex; gap:20px; }
	.hero__image { position:absolute; right:0; bottom:0; width:700px; height:300px; }
.about { background:#16181c; border-bottom:1px solid var(--gray); }
	.about__wrap { margin:0 auto; max-width:1280px; display:flex; gap:40px; padding:50px 20px; }
	.about__left {}
	.about__subtitle { font-size:12px; color:var(--primary); display:inline-block; padding:4px 15px; border-radius:12px; border:1px solid var(--primary); margin:0 0 30px 0; background:rgb(255, 255, 255, 0.05); }
	.about__title { font-size:30px; line-height:1.2; max-width:700px; font-weight:700; }
	.about__desc { font-size:16px; color:var(--grey); padding:20px 0; max-width:700px; }
	.about__right {}
	.about__info { list-style:none; display:flex; flex-direction:column; gap:15px; }
		.about__info li { display:flex; align-items:center; padding:10px 15px; border:1px solid var(--gray); background:rgb(255, 255, 255, 0.01); border-radius:12px; gap:10px; }
		.about__info i { font-size:21px; color:var(--primary); }
.stat { border-bottom:1px solid var(--gray); }
	.stat__wrap { margin:0 auto; max-width:1280px; padding:40px 20px; }
	.stat__list { display:flex; gap:40px; list-style:none; justify-content:space-around; flex-wrap:wrap; }
		.stat__list li { text-align:center; }
		.stat__list div { font-size:30px; font-weight:700; color:var(--primary); margin:0 0 5px 0; }
		.stat__list span { color:var(--grey); }
.advantages { border-bottom:1px solid var(--gray); }
	.advantages__wrap { margin:0 auto; max-width:1280px; padding:60px 20px; }
	.advantages__title { font-size:30px; line-height:1.2; font-weight:700; text-align:center; }
	.advantages__desc { font-size:16px; color:var(--grey); max-width:640px; text-align:center; margin:20px auto 40px; }
	.advantages__items { list-style:none; display:flex; gap:20px; }
		.advantages__items li { background:rgb(28, 31, 36); border-radius:16px; padding:16px; }
	.advantages__icon { background:var(--primary); border-radius:12px; height:44px; width:44px; display:flex; align-items:center; justify-content:center; font-size:21px; }
	.advantages__name { font-weight:500; font-size:16px; margin:15px 0 10px; }
	.advantages__info { color:var(--grey); }
.products { border-bottom:1px solid var(--gray); background:rgb(22, 24, 28); }
	.products__wrap { margin:0 auto; max-width:1280px; padding:60px 20px; }
	.products__title { font-size:30px; line-height:1.2; font-weight:700; text-align:center; }
	.products__desc { font-size:16px; color:var(--grey); max-width:640px; text-align:center; margin:20px auto 40px; }
	.products__items { display:flex; flex-wrap:wrap; gap:20px; list-style:none; }
		.products__items li { width:295px; }
	.products__all { display:flex; align-items:center; justify-content:center; padding:40px 0 0; }
.prodcats { list-style:none; display:flex; margin:0 0 50px 0; justify-content:space-between; }
	.prodcats li {}
	.prodcats a { display:block; text-align:center; padding:10px 20px; border-radius:12px; transition:0.3s; color:var(--text); }
		.prodcats a:hover { background:rgba(255,255,255,0.1); }
		.prodcats li.active a { border:1px solid var(--primary); }
	.prodcats img { width:128px; }
	.prodcats span { text-transform:uppercase; padding:10px 0 0; font-weight:500; display:block; }
.product { background:rgb(28, 31, 36); border:1px solid rgb(45, 49, 56); border-radius:12px; overflow:hidden; }
	.product__link { color:var(--text); }
	.product__image { background:#fff; height:280px; display:flex; align-items:center; justify-content:center; padding:10px; }
		.product__image img { max-height:100%; max-width:100%; }
	.product__wrap { padding:15px 20px 20px; }
	.product__weight { background:var(--primary); color:var(--text); display:inline-block; font-size:12px; font-weight:700; border-radius:12px; padding:3px 12px; margin-bottom:10px; }
	.product__name { font-size:16px; font-weight:500; }
	.product__info { color:var(--grey); padding:15px 0; }
	.product__price { color:var(--primary); font-size:21px; }
.contact { background:#16181c; border-bottom:1px solid var(--gray); }
	.contact__wrap { margin:0 auto; max-width:1280px; display:flex; gap:40px; padding:50px 20px; }
	.contact__left {}
	.contact__title { font-size:30px; line-height:1.2; max-width:700px; font-weight:700; }
	.contact__desc { font-size:16px; color:var(--grey); padding:20px 0; max-width:700px; }
	.contact__actions { margin:20px 0 0; display:flex; gap:20px; }
	.contact__right {}
	.contact__info { list-style:none; display:flex; flex-direction:column; gap:15px; }
		.contact__info li { display:flex; padding:10px 15px; border:1px solid var(--gray); background:rgb(255, 255, 255, 0.01); border-radius:12px; gap:10px; line-height:1.5; }
		.contact__info i { font-size:21px; color:var(--primary); margin-top:7px; }
		.contact__info span { display:block; color:var(--grey); font-size:13px; }
.footer {}
	.footer__wrap { margin:0 auto; max-width:1280px;padding:50px 20px; }
	.footer__top { display:flex; gap:40px; justify-content:space-between; padding:0 0 30px 0; }
	.footer__col {}
	.footer__logo { display:flex; align-items:center; gap:10px; }
		.footer__logo img { width:40px; height:40px; }
		.footer__logo span { font-weight:500; font-size:18px; color:var(--text); }
	.footer__info { color:var(--grey); max-width:400px; line-height:1.5; margin:20px 0; }
	.footer__social { list-style:none; display:flex; gap:15px; }
		.footer__social li {}
		.footer__social a { display:block; background:rgb(28, 31, 36); border:1px solid rgb(45, 49, 56); height:36px; width:36px; border-radius:100%; display:flex; align-items:center; justify-content:center; color:var(--grey); }
			.footer__social a:hover { color:var(--primary); }
		.footer__social i { font-size:21px; }
	.footer__label { font-size:13px; text-transform:uppercase; font-weight:600; }
	.footer__nav { list-style:none; margin:15px 0 0; }
		.footer__nav li { padding:7px 0; }
		.footer__nav a, .footer__nav span { color:var(--grey); display:flex; align-items:center; gap:5px; max-width:320px; }
			.footer__nav a:hover { color:var(--primary); }
		.footer__nav i { font-size:18px; color:var(--primary); }
	.footer__contacts {}
	.footer__bottom { color:var(--grey); font-size:12px; text-align:center; border-top:1px solid var(--gray); padding:30px 0 0; line-height:2; }
.articles { display:flex; flex-direction:column; gap:30px; padding:30px 0 0; }
	.articles__item { display:flex; gap:30px; border-bottom:1px solid rgba(255, 255, 255, 0.05); padding:0 0 30px 0; }
		.articles__item:last-child { border-bottom:0; }
	.articles__image { width:220px; border-radius:12px; }
	.articles__content { flex-grow:1; }
	.articles__date { float:right; margin:3px 0 0; color:var(--grey); font-size:12px; }
	.articles__title { font-size:18px; display:block; }
	.articles__anons {}
.reviews { display:flex; flex-direction:column; gap:30px; padding:30px 0 0; }
	.reviews__item { display:flex; gap:30px; border-bottom:1px solid rgba(255, 255, 255, 0.05); padding:0 0 30px 0; }
		.reviews__item:last-child { border-bottom:0; }
	.reviews__avatar { width:64px; height:64px; border-radius:100%; }
	.reviews__content { flex-grow:1; }
	.reviews__stars { float:right; margin:3px 0 0; color:#ffc263; font-size:16px; }
	.reviews__name { font-size:18px; display:block; }
	.reviews__date { margin:3px 0 0; color:var(--grey); font-size:12px; }
	.reviews__message {}
.revform { padding:20px 0 0; border-top:1px solid rgba(255, 255, 255, 0.1); margin:20px 0 0; }
	.revform__title { font-size:21px; margin:0 0 20px 0; }
	.revform__grid { display:flex; gap:30px; }
		.revform__grid > * { flex-grow:1; }
	.revform__inp { width:100%; }
.productpag { border-bottom:1px solid var(--gray); }
	.productpag__wrap { margin:0 auto; max-width:1280px; padding:80px 20px 120px; display:flex; gap:40px; }
	.productpag__left { }
	.productpag__name { font-size:28px; font-weight:500; }
	.productpag__desc { margin:30px 0; color:var(--grey); white-space:pre-wrap; }
	.productpag__params { background:transparent; padding:0px; border-spacing:0; width:100%; }
    	.productpag__params th, .productpag__params td { padding:10px 10px; white-space:nowrap; }
		.productpag__params td:first-child { font-weight:500; }
		.productpag__params td:last-child { text-align:right; padding-left:40px; }
    	.productpag__params tr:nth-child(even) { background:rgba(255,255,255,0.03); }
	.productpag__size { background:var(--primary); color:var(--text); display:inline-block; font-size:12px; font-weight:700; border-radius:12px; padding:3px 12px; margin-bottom:10px; margin:0 10px 0 0; }
	.productpag__price { font-size:28px; color:var(--primary); margin:10px 0 0; }
	.productpag__sect { font-size:24px; font-weight:500; padding:50px 0 20px; }
	.productpag__docs { list-style:none; display:flex; gap:20px; flex-direction:column; }
		.productpag__docs a { display:flex; align-items:center; gap:10px; }
		.productpag__docs i { color:var(--text); font-size:32px; }
	.productpag__right { margin:70px 0 0; }
	.productpag__image { width:560px; }
		.productpag__image a { background:#fff; display:block; }
		.productpag__image img { max-width:100%; }
	.productpag__images { list-style:none; display:flex; gap:10px; margin:5px 0 0; }
		.productpag__images a { background:#fff; display:block; }
		.productpag__images img { width:96px; }


@media (max-width:1024px) {
	.header__menu { display:flex; }
	.header__nav { background:#16181c; position:fixed; top:0; left:-260px; bottom:0; width:260px; flex-direction:column; justify-content:flex-start; padding:30px 20px; flex-grow:0; transition:0.2s; }
		.header__nav.active { left:0; }
	.header__logo { flex-grow:1;  }
	.hero__wrap { padding:60px 20px; }
	.hero__image { display:none; }
	.advantages__items { flex-direction:column; }
	.contact__wrap { flex-direction:column; }
	.footer__col:nth-child(2) { display:none; }
	.prodcats { flex-wrap:wrap; }
	.productpag__wrap { flex-direction:column; }
	.productpag__image { width:100%; }
}

@media (max-width:800px) {
	.header__call span { display:none; }
	.header__phones { display:none; }
	.about__wrap { flex-direction:column; }
	.products__items li { width:auto; }
	.footer__col:nth-child(3), .footer__col:nth-child(4) { display:none; }
	.footer__col:nth-child(2) { display:block; }
	.footer__top { flex-direction:column; }
	.footer__label { display:none; }
	.footer__nav { display:flex; gap:20px; flex-wrap:wrap; }
	.articles__image { width:128px; }
	.revform__grid { flex-direction:column; }
}