/* Бетон Про — «Индиго и сталь»: индиго H248 (#5140BD) + стальной графит #3A3B4C на холодном светлом #F3F3F9; каркас betonargrupp.ru — шапка поверх фото, полоса преимуществ, карточки марок, чередующиеся услуги на графите; Prosto One + Golos Text.
   Контраст: белый/индиго 7,5 · светлое индиго/графит 5,4 · текст/фон 14,9 · второстепенный/фон 5,8 */
@font-face { font-family: "PO"; src: url("/fonts/prosto.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT"; src: url("/fonts/golos400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT"; src: url("/fonts/golos600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #F3F3F9; --w: #FFFFFF; --tint: #E3E1FA; --ink: #1B1B24; --muted: #5C5C66; --line: rgba(27, 27, 36, .12);
  --v: #5140BD; --vd: #3C2E99; --vl: #B3ADFF; --sl: #3A3B4C; --sl2: #4E4F61; --onm: #B4B5CC;
  --h: "PO", "Segoe UI", Arial, sans-serif; --t: "GT", "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--t); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wrap { width: min(1180px, 100% - 64px); margin-inline: auto; }
.hpot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
.i { width: 20px; height: 20px; flex: none; }

/* кнопки и поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 8px; background: var(--v); color: #fff; font: 600 16px/1 var(--t); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--vd); }
.btn--gh { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn--gh:hover { background: rgba(255, 255, 255, .2); }
.btn--line { background: transparent; color: var(--vd); box-shadow: inset 0 0 0 2px var(--v); }
.btn--line:hover { background: var(--tint); }
.btn--full { width: 100%; }
.fld { width: 100%; height: 50px; padding: 0 16px; border: 1px solid rgba(27, 27, 36, .2); border-radius: 8px; background: #fff; font: 400 16px var(--t); color: var(--ink); }
.fld--t { height: auto; min-height: 100px; padding: 12px 16px; resize: vertical; }
.fld:focus { outline: 3px solid rgba(81, 64, 189, .22); outline-offset: 0; border-color: var(--v); }
.agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--muted); cursor: pointer; text-align: left; }
.agree input { margin: 1px 0 0; accent-color: var(--v); }
.h2 { margin-bottom: 26px; font: 400 clamp(26px, 2.6vw, 36px)/1.15 var(--h); }
.h2--c { text-align: center; }
.h2--on { color: #fff; }
.lead { max-width: 640px; margin: -12px auto 32px; text-align: center; color: var(--muted); }

/* шапка: на главной лежит поверх фото */
.hd { background: var(--sl); color: #fff; }
.home .hd { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: linear-gradient(180deg, rgba(27, 27, 36, .6), transparent); }
.hd__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.wm { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: #fff; }
.wm__m { width: 30px; height: 30px; background: var(--vl); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 22% 50%, 50% 78%, 78% 50%, 50% 22%, 22% 50%, 0 50%); }
.wm__t { font: 400 24px/1 var(--h); letter-spacing: .02em; }
.wm__t b { margin-left: .3em; font-weight: 400; color: var(--vl); }
.mn { display: flex; gap: 4px; }
.mn__a { padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; color: #EDEDF5; }
.mn__a:hover { background: rgba(255, 255, 255, .12); }
.mn__x, .mn__c { display: none; }
.hd__c { display: grid; justify-items: end; }
.hd__tel { display: inline-flex; align-items: center; gap: 8px; font: 400 19px/1.2 var(--h); text-decoration: none; white-space: nowrap; }
.hd__tel .i { color: var(--vl); }
.hd__mail { font-size: 13px; color: var(--onm); text-decoration: none; }
.hd__tel:hover, .hd__mail:hover { color: var(--vl); }
.hd__call, .hd__burger { display: none; }

/* первый экран: фото на всю ширину, текст слева, полоса быстрых ссылок снизу */
.hero { position: relative; display: flex; flex-direction: column; min-height: 640px; overflow: hidden; background: var(--sl); color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(27, 27, 36, .82) 0%, rgba(27, 27, 36, .5) 55%, rgba(27, 27, 36, .2) 100%); }
.hero__in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 60px; }
.hero__h { max-width: 760px; font: 400 clamp(36px, 5vw, 66px)/1.05 var(--h); text-transform: uppercase; }
.hero__s { max-width: 580px; margin-top: 20px; font-size: 19px; color: #E3E4EE; }
.hero__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__q { position: relative; z-index: 2; background: rgba(58, 59, 76, .92); }
.hero__ql { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__ql a { display: flex; align-items: center; gap: 12px; padding: 22px 18px; border-left: 1px solid rgba(255, 255, 255, .1); font-weight: 600; text-decoration: none; }
.hero__ql a:last-child { border-right: 1px solid rgba(255, 255, 255, .1); }
.hero__ql a:hover { background: var(--v); }
.hero__ql .i { width: 26px; height: 26px; color: var(--vl); }
.hero__ql a:hover .i { color: #fff; }

/* разделы */
.sec { padding: 88px 0; }
.sec--t { background: linear-gradient(180deg, #E6E5F6, var(--bg)); }

/* о компании: плашка-надпись + текст */
.ab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ab__pl { display: grid; gap: 10px; align-content: center; aspect-ratio: 1; padding: 36px; border-radius: 18px; background: radial-gradient(circle at 80% 15%, var(--v), transparent 55%), var(--sl); color: #fff; }
.ab__wm { margin-bottom: 18px; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--h); }
.ab__wm b { display: block; font-weight: 400; color: var(--vl); }
.ab__pl p { display: flex; align-items: center; gap: 10px; color: var(--onm); font-size: 15px; }
.ab__pl .i { color: var(--vl); }
.ab__t > p { margin-bottom: 14px; font-size: 17px; }

/* преимущества */
.adv { padding: 72px 0; background: var(--sl); }
.adv__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.adv__l li { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 10px; background: var(--w); }
.adv__l span { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--tint); color: var(--vd); }
.adv__l div { display: grid; }
.adv__l b { font-weight: 600; }
.adv__l small { color: var(--muted); font-size: 14px; }

/* карточки марок */
.pc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pc li { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--w); box-shadow: 0 10px 30px rgba(27, 27, 36, .07); }
.pc__top { position: relative; display: grid; align-content: end; height: 150px; padding: 18px 20px; overflow: hidden; background: linear-gradient(135deg, var(--sl) 0%, #545575 100%); color: #fff; }
.pc__top::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border: 18px solid rgba(179, 173, 255, .18); border-radius: 50%; }
.pc__k { font-size: 14px; color: var(--onm); }
.pc__m { font: 400 40px/1 var(--h); }
.pc__c { margin-top: 4px; font-size: 13px; color: var(--vl); }
.pc__b { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.pc__u { flex: 1; font-size: 15px; color: var(--muted); }
.pc__p { font-size: 15px; color: var(--muted); }
.pc__p b { color: var(--ink); font-size: 22px; font-weight: 600; }

/* услуги: чередование на графите */
.sv { padding: 88px 0; background: var(--sl); color: #fff; }
.sv__r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sv__r + .sv__r { margin-top: 64px; }
.sv__r--r .sv__t { order: 2; }
.sv__t p { margin-bottom: 24px; font-size: 17px; color: #D8D9E6; }
.sv__ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }

/* внимание покупателю */
.pk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.pk__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 14px; background: var(--v); color: #fff; }
.pk__ic .i { width: 30px; height: 30px; }
.pk__t > p { color: var(--muted); font-size: 17px; }
.pk__l { display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: k; }
.pk__l li { position: relative; padding: 20px 22px 20px 72px; border-radius: 12px; background: var(--w); counter-increment: k; }
.pk__l li::before { content: counter(k); position: absolute; left: 20px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--vd); font: 400 18px/1 var(--h); transform: translateY(-50%); }

/* вопрос */
.cta { padding: 80px 0; background: var(--tint); }
.qf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 720px; margin: 0 auto; }
.qf .fld--t, .qf .agree { grid-column: 1 / -1; }
.qf .btn { grid-column: 1 / -1; justify-self: center; min-width: 260px; }

/* контакты */
.ks { padding: 88px 0; }
.ks__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: stretch; }
.ks__m { min-height: 440px; overflow: hidden; border-radius: 18px; background: var(--tint); }
.ks__m iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.ks__tel { display: block; font: 400 32px/1.2 var(--h); text-decoration: none; }
.ks__mail { display: block; margin-top: 4px; font-size: 18px; color: var(--vd); text-decoration: none; }
.ks__a { display: flex; gap: 10px; margin-top: 14px; color: var(--muted); }
.ks__a .i { margin-top: 2px; color: var(--v); }
.ks__h { margin: 26px 0 12px; font: 400 19px/1.2 var(--h); }
.dz { display: flex; flex-wrap: wrap; gap: 8px; }
.dz li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--w); font-size: 14px; }
.dz small { color: var(--muted); font-size: 12px; }

/* подвал */
.ft { padding: 56px 0 24px; background: var(--sl); color: var(--onm); }
.ft__in { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ft h3 { margin-bottom: 10px; color: #fff; font: 400 17px/1.2 var(--h); }
.ft__a p { margin-top: 16px; max-width: 340px; font-size: 14px; }
.ft__c { display: grid; gap: 6px; align-content: start; font-size: 15px; }
.ft__c a { color: #fff; text-decoration: none; }
.ft__tel { font: 400 22px/1.2 var(--h); }
.ft a:hover { color: var(--vl); }
.ft__b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 13px; }

/* окно заявки */
.dlg { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); }
.dlg::backdrop { background: rgba(27, 27, 36, .75); }
.dlg__f { position: relative; display: grid; gap: 12px; padding: 36px 28px 28px; border-top: 6px solid var(--v); }
.dlg__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--bg); cursor: pointer; }
.dlg__t { padding-right: 44px; font: 400 26px/1.15 var(--h); }
.dlg__d { color: var(--muted); font-size: 15px; }

/* спасибо / 404 */
.note { padding: 96px 0 120px; }
.note__ic { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 26px; border-radius: 18px; background: var(--v); color: #fff; }
.note__ic .i { width: 40px; height: 40px; stroke-width: 2.4; }
.note__ic--n { font: 400 28px/1 var(--h); }
.note p { max-width: 560px; }
.note__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 1100px) {
  .hd__mail { display: none; }
  .mn__a { padding: 10px 8px; font-size: 14px; }
  .pc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hd { position: sticky; top: 0; z-index: 30; }
  .home .hd { position: sticky; background: var(--sl); }
  .hd__in { gap: 10px; min-height: 64px; }
  .hd__c { display: none; }
  .wm__t { font-size: 21px; }
  .hd__call { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--v); color: #fff; }
  .hd__burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
  .mn { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; flex-direction: column; gap: 0; width: min(360px, 100%); padding: 80px 28px 28px; overflow-y: auto; background: var(--sl); transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .nav-open .mn { transform: none; visibility: visible; box-shadow: -24px 0 48px rgba(0, 0, 0, .35); }
  .mn__a { padding: 15px 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 17px; }
  .mn__a:hover { background: none; }
  .mn__x { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
  .mn__c { display: grid; gap: 8px; margin-top: 26px; color: var(--onm); }
  .mn__c a { color: #fff; text-decoration: none; }
  .mn__c a:first-child { font: 400 22px/1.3 var(--h); }
  html { scroll-padding-top: 16px; }
  .hero { min-height: 0; }
  .hero__in { padding-top: 48px; }
  .hero__ql { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__ql a { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .sec, .sv, .ks { padding: 64px 0; }
  .ab, .pk, .ks__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ab__pl { aspect-ratio: auto; }
  .sv__r { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sv__r--r .sv__t { order: 0; }
  .ft__in { grid-template-columns: 1fr 1fr; }
  .ft__a { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap { width: min(1180px, 100% - 32px); }
  .wm__t { font-size: 20px; }
  .hero__h { font-size: 32px; }
  .hero__s { font-size: 16px; }
  .hero__b .btn { flex: 1 1 100%; }
  .hero__ql a { padding: 16px 12px; font-size: 14px; gap: 8px; }
  .hero__ql .i { width: 22px; height: 22px; }
  .adv__l, .pc { grid-template-columns: minmax(0, 1fr); }
  .pc__top { height: 120px; }
  .pk__l li { padding: 16px 16px 16px 64px; }
  .pk__l li::before { left: 16px; }
  .qf { grid-template-columns: minmax(0, 1fr); }
  .qf .btn { min-width: 0; justify-self: stretch; }
  .ks__m, .ks__m iframe { min-height: 320px; }
  .ks__tel { font-size: 28px; }
  .ft__in { grid-template-columns: 1fr; }
  .dlg__f { padding: 32px 20px 22px; }
}