@charset "utf-8";
/* ГрандБетон — grandbeton-pahra.ru. Палитра с логотипа: синий + сталь */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font:16px/1.7 Inter,"Segoe UI",Arial,sans-serif;color:#4a5361;background:#fff;
	-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;border:0;display:block}
a{color:#215a93;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Manrope,Inter,Arial,sans-serif;font-weight:800;color:#2a3340;
	margin:0 0 16px;letter-spacing:-.02em}
h1{font-size:46px;line-height:1.1}
h2{font-size:34px;line-height:1.15}
h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 14px}
.w{width:1240px;max-width:100%;margin:0 auto;padding:0 20px}
.sec{padding:80px 0}
.sec-soft{background:#f2f4f7}
.sec-navy{background:#20304a;color:#b9c4d4}
.sec-navy h2,.sec-navy h3{color:#fff}
.hd{max-width:780px;margin-bottom:44px}
.hd .kick{display:inline-block;font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:12px;
	letter-spacing:.14em;text-transform:uppercase;color:#638aaa;background:#eaf0f6;
	padding:7px 14px;border-radius:99px;margin-bottom:16px}
.sec-navy .hd .kick{color:#a9c3dd;background:rgba(255,255,255,.09)}
.hd p{font-size:17px;color:#6d7787;margin:0}
.sec-navy .hd p{color:#a8b4c6}
.center{text-align:center}

/* ---- шапка ---- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
	backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e6eaf0}
.top-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:13px 0}
.logo img{height:38px;width:auto}
.menu{margin-left:auto;min-width:0}
.top-tel .btn{padding:12px 22px;font-size:14px}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.menu a{display:block;padding:8px 11px;border-radius:99px;color:#5a6474;font-size:14px;font-weight:500;
	white-space:nowrap}
.menu a:hover{background:#eef2f7;color:#215a93;text-decoration:none}
.top-tel{display:flex;align-items:center;gap:14px}
.top-tel a.t{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:18px;color:#2a3340;
	white-space:nowrap}
.top-tel a.t:hover{color:#215a93;text-decoration:none}

/* мобильное меню — прокручиваемая полоска */
.mmenu{display:none;border-bottom:1px solid #e6eaf0;background:#fff}
.mmenu ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mmenu li{flex:0 0 auto}
.mmenu a{display:block;padding:12px 16px;color:#5a6474;font-size:14px;font-weight:500;white-space:nowrap}

/* ---- кнопки-пилюли ---- */
.btn{display:inline-block;padding:15px 30px;border-radius:99px;border:2px solid transparent;
	font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-align:center;
	background:#215a93;color:#fff;transition:.15s}
.btn:hover{background:#17436e;color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-l{background:#fff;color:#215a93;border-color:#dbe3ec}
.btn-l:hover{background:#eef2f7;color:#17436e}
.btn-g{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-g:hover{background:#fff;color:#20304a}

/* ---- hero ---- */
.hero{position:relative;background:#20304a url(../img/hero.jpg) center/cover no-repeat;color:#fff}
.hero:before{content:"";position:absolute;inset:0;
	background:linear-gradient(105deg,rgba(24,40,66,.94) 0%,rgba(24,40,66,.80) 45%,rgba(24,40,66,.55) 100%)}
.hero-in{position:relative;padding:88px 0 76px}
.hero h1{color:#fff;max-width:820px}
.hero .sub{max-width:620px;font-size:19px;color:#ccd7e6}
.hero-btns{margin:32px 0 46px}
.hero-btns .btn{margin:0 10px 12px 0}
.hnum{display:flex;flex-wrap:wrap;gap:14px}
.hnum div{flex:1 1 210px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
	border-radius:16px;padding:20px 22px}
.hnum b{display:block;font-family:Manrope,Arial,sans-serif;font-size:30px;font-weight:800;color:#fff;
	line-height:1;letter-spacing:-.02em}
.hnum span{font-size:13.5px;color:#b6c4d8;display:block;margin-top:7px}

/* ---- карточки продукции ---- */
.grid{display:flex;flex-wrap:wrap;gap:22px}
.card{flex:1 1 300px;min-width:0;background:#fff;border:1px solid #e6eaf0;border-radius:20px;
	padding:28px 26px;display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:0 14px 34px rgba(32,48,74,.10);transform:translateY(-2px);border-color:#dbe3ec}
.card .ic{width:56px;height:56px;border-radius:16px;background:#eaf0f6;display:flex;
	align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:28px;height:28px;fill:#215a93}
.card h3{margin-bottom:10px}
.card p{font-size:14.5px;color:#6d7787;flex:1 1 auto;margin-bottom:16px}
.card .pr{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:20px;color:#215a93}
.card .pr i{display:block;font-style:normal;font-family:Inter,Arial,sans-serif;font-size:12.5px;
	font-weight:400;color:#98a2b1;margin-top:2px}

/* ---- таблица цен ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e6eaf0;
	border-radius:20px}
.tw table{border-collapse:collapse;width:100%;min-width:580px;font-size:15px}
.tw th{background:#fff;color:#98a2b1;font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:12px;
	text-transform:uppercase;letter-spacing:.1em;padding:20px 26px 12px;text-align:left}
.tw th:last-child,.tw td.p{text-align:right}
.tw td{padding:14px 26px;border-top:1px solid #eef1f5}
.tw tr.g td{background:#f2f4f7;color:#2a3340;font-family:Manrope,Arial,sans-serif;font-weight:800;
	font-size:14px;padding:13px 26px}
.tw td.n{font-weight:600;color:#2a3340}
.tw td.p{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:17px;color:#215a93;white-space:nowrap}
.note{background:#eaf0f6;border-radius:16px;padding:18px 24px;font-size:14.5px;margin-bottom:26px;
	color:#4a5361}

/* ---- две колонки ---- */
.cols{display:flex;flex-wrap:wrap;gap:44px;align-items:center}
.col{flex:1 1 400px;min-width:0}
.col img{border-radius:20px}
ul.tick{list-style:none;margin:0 0 20px;padding:0}
ul.tick li{position:relative;padding:0 0 13px 32px;font-size:15.5px}
ul.tick li:before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
	background:#215a93}
ul.tick li:after{content:"";position:absolute;left:6px;top:11px;width:5px;height:8px;
	border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sec-navy ul.tick li:before{background:#5f92c9}

/* ---- плашки ---- */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pills div{flex:1 1 96px;text-align:center;border-radius:16px;padding:16px 8px;
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.pills b{display:block;font-family:Manrope,Arial,sans-serif;font-size:22px;font-weight:800;color:#fff}
.pills span{font-size:12px;color:#a8b4c6}
.pumps{display:flex;flex-wrap:wrap;gap:22px}
.pump{flex:1 1 300px;min-width:0;background:#fff;border:1px solid #e6eaf0;border-radius:20px;
	padding:30px 28px}
.pump b{display:block;font-family:Manrope,Arial,sans-serif;font-size:40px;font-weight:800;color:#215a93;
	line-height:1;letter-spacing:-.03em}
.pump u{display:block;text-decoration:none;font-family:Manrope,Arial,sans-serif;font-weight:700;
	font-size:14px;color:#2a3340;margin:10px 0 10px}
.pump span{font-size:14.5px;color:#6d7787}

/* ---- контакты ---- */
.rq{list-style:none;margin:0;padding:0}
.rq li{padding:0 0 22px}
.rq b{display:block;font-family:Manrope,Arial,sans-serif;font-size:12px;text-transform:uppercase;
	letter-spacing:.1em;color:#98a2b1;font-weight:700;margin-bottom:4px}
.rq span,.rq a{font-size:17px;color:#2a3340}
.rq a:hover{color:#215a93}
.form{background:#fff;border:1px solid #e6eaf0;border-radius:20px;padding:32px;
	box-shadow:0 14px 34px rgba(32,48,74,.06)}
.form label{display:block;font-size:13px;color:#6d7787;margin:0 0 6px;font-weight:500}
.form input{width:100%;padding:14px 16px;border:1px solid #dde3eb;border-radius:12px;background:#fbfcfd;
	font:15px/1.4 Inter,Arial,sans-serif;color:#2a3340;margin-bottom:16px}
.form input:focus{outline:0;border-color:#215a93;background:#fff}
.form .btn{width:100%}
.form .sm{font-size:12px;color:#98a2b1;margin:14px 0 0;text-align:center}
.hp{position:absolute;left:-9999px}
.map{margin-top:34px;border-radius:20px;overflow:hidden;border:1px solid #e6eaf0}
.map iframe{display:block;width:100%;height:420px;border:0}

/* ---- призыв ---- */
.cta{background:linear-gradient(105deg,#215a93,#2f77b8);border-radius:24px;padding:44px;
	color:#fff;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.cta h3{color:#fff;font-size:26px;margin:0 0 6px}
.cta p{color:#cfe0f0;margin:0}
.cta .t{flex:1 1 420px}

/* ---- подвал ---- */
.foot{background:#20304a;color:#93a1b6;font-size:14.5px;padding:56px 0 26px}
.foot-c{display:flex;flex-wrap:wrap;gap:40px}
.foot-i{flex:1 1 280px}
.foot img{height:40px;width:auto;margin-bottom:16px;background:#fff;padding:8px 12px;border-radius:12px}
.foot h4{color:#fff;font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:0 0 9px}
.foot a{color:#93a1b6}
.foot a:hover{color:#fff}
.foot-b{border-top:1px solid #2e405c;margin-top:34px;padding-top:20px;font-size:13px;color:#6d7d94}

/* ---- адаптив ---- */
@media (min-width:981px){
	.card{max-width:calc((100% - 44px)/3)}
	.pump{max-width:calc((100% - 44px)/3)}
}
@media (max-width:1180px){
	.top-tel .btn{display:none}
}
@media (max-width:980px){
	h1,.hero h1{font-size:32px}
	h2{font-size:26px}
	.menu{display:none}
	.mmenu{display:block}
	.top{position:static}
	.sec{padding:52px 0}
	.hero-in{padding:52px 0 46px}
	.cta{padding:30px;border-radius:20px}
}
@media (max-width:640px){
	body{font-size:15px}
	.hero h1{font-size:26px}
	.hero .sub{font-size:16.5px}
	h2{font-size:22px}
	.top-in{gap:14px;padding:12px 0}
	.logo img{height:34px}
	.top-tel a.t{font-size:17px}
	.top-tel .btn{display:none}
	.btn{display:block;width:100%;margin:0 0 10px}
	.hero-btns .btn{margin:0 0 10px}
	.map iframe{height:320px}
}