/* Manrope, cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope, latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope, latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded, cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Unbounded, latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Unbounded, latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Общее */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F4F6F9}
[hidden]{display:none !important}
[id]{scroll-margin-top:96px}
a{color:#0E1B2E}a:hover{color:#2A5BD7}
/* номер телефона и кнопка звонка не рвутся на две строки */
a[href^="tel:"]{white-space:nowrap}
.svb-price{white-space:nowrap}

/* Из макета */
.svb-btn,.svb-card,.svb-opt{transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.svb-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,27,46,.22)}
.svb-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,27,46,.12)}
.svb-opt:hover{transform:translateY(-2px)}
.svb-btn:focus-visible,.svb-opt:focus-visible,.svb-seg:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #2A5BD7;outline-offset:3px}
.svb-track{display:flex;gap:48px;width:max-content;animation:svb-scroll 38s linear infinite}
@keyframes svb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.svb-span2{grid-column:span 2}
.svb-row2{grid-row:span 2}
.svb-mbar{display:none}

/* Состояния кнопок (в макете цвета подставлял редактор) */
.svb-seg{background:transparent;color:#0E1B2E}
.svb-seg[aria-pressed="true"]{background:#0E1B2E;color:#FFFFFF}
.svb-pick{border:2px solid #DCE2EA;background:#FFFFFF}
.svb-pick[aria-pressed="true"]{border-color:#0E1B2E;background:#FFF6D6}

/* Только для телефона: по умолчанию скрыто */
.svb-head-call,.svb-teaser{display:none}

@media (max-width:1020px){.svb-nav{display:none !important}}
@media (max-width:760px){
  .svb-span2{grid-column:auto}.svb-row2{grid-row:auto}
  .svb-mbar{display:flex}.svb-page{padding-bottom:90px}
  /* на телефоне шапка не прилипает: звонок, MAX и расчёт есть в нижней панели */
  .svb-head-wrap{position:static !important}
  [id]{scroll-margin-top:16px}
  /* первый экран: цена и «за погонный метр» в одну строку, как в телефонном макете */
  .svb-hero-price{font-size:22px !important}
  .svb-hero-unit{font-size:14px !important}
  /* расчёт: цена и кнопки под ней помещаются в одну строку на любой ширине */
  .svb-price-box{padding:18px !important}
  .svb-nav-row{flex-wrap:nowrap !important;gap:8px !important}
  .svb-nav-row button{white-space:nowrap;padding:0 16px !important;font-size:clamp(14px,4.1vw,17px) !important}
  .svb-price{font-size:clamp(17px,calc((100vw - 112px) / 10.3),30px) !important}
  .svb-price-cta{display:flex !important;justify-content:center;width:100%;box-sizing:border-box;white-space:nowrap;gap:8px !important;padding:0 10px !important;font-size:clamp(13px,4.1vw,17px) !important}
  .svb-head-cta,.svb-head-phone,.svb-desk{display:none !important}
  .svb-head-call,.svb-teaser{display:flex}
  /* размеры ниже плавно уменьшаются на узких телефонах (360 и 320 px), чтобы ничего не переносилось */
  .svb-h1{font-size:clamp(24px,7.7vw,30px) !important}
  .svb-badge{font-size:clamp(11px,3.4vw,13px) !important;padding:6px 12px !important;gap:8px !important;white-space:nowrap}
  .svb-lead{font-size:15px !important}
  .svb-hero-cta{display:flex !important;justify-content:center;width:100%;box-sizing:border-box;min-height:54px !important;white-space:nowrap;padding:0 14px !important;font-size:clamp(14px,4.1vw,16px) !important}
  .svb-stats{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important}
  .svb-stats dd{font-size:20px !important}
  .svb-stats dt{font-size:12px !important}
  .svb-stats dd svg{width:15px;height:15px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.svb-track{animation:none}.svb-btn,.svb-card,.svb-opt{transition:none}.svb-btn:hover,.svb-card:hover,.svb-opt:hover{transform:none}}