/* Кейс «Сфера Покрытий» — оформление. Подключается только на странице кейса. Префикс sp-. Сцена макета — 1920 */

@font-face{font-family:'SP Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-cyrillic-400-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'SP Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-latin-400-normal.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}
@font-face{font-family:'SP Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-cyrillic-700-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'SP Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-latin-700-normal.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}
@font-face{font-family:'SP Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/roboto-cyrillic-900-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'SP Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/roboto-latin-900-normal.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}

.sp{
--ink:#3b4554; --gr:#00a952; --dk:#2a3d4f; --ln:#f0f5f9; --lnd:#2f455a; --turf:#2d527e;
--u:calc(min(var(--cw,100vw),1920px)/1920);
position:relative;background:#fff;color:var(--ink);
font-family:'SP Roboto','Roboto',var(--font,'Inter'),system-ui,sans-serif;font-weight:400;
-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
.sp :where(p,h2,ul,li){margin:0;padding:0}
.sp :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.sp :where(img){display:block;width:100%;height:100%;max-width:none}
.sp :where(i,em,b,u){font-style:normal}

.sp-st{position:relative;width:calc(1920*var(--u));margin:0 auto}
.sp-b{position:relative;height:calc(var(--h)*var(--u));isolation:isolate;overflow-x:visible;overflow-y:clip}
.sp-b::before{content:'';position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--bgi,var(--bg,#fff));z-index:-1}
.sp-i{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.sp-i[style*="--w"]{width:calc(var(--w)*var(--u))}
.sp-i[style*="--h"]{height:calc(var(--h)*var(--u))}

/* вертикальные линии сетки */
.sp-ln{position:absolute;left:0;right:0;top:calc(var(--t)*var(--u));bottom:calc(var(--bt)*var(--u));pointer-events:none}
.sp-ln i{position:absolute;left:calc(var(--x)*var(--u));top:0;bottom:0;width:max(1px,calc(1*var(--u)));background:var(--ln);transform-origin:50% 0}
.sp-ln--d i{background:var(--lnd)}
.sp-ln--ui i{background:linear-gradient(180deg,var(--ln) 0,var(--ln) calc(586*var(--u)),var(--lnd) calc(586*var(--u)))}

/* подписи-растры: непрозрачные на белом, смешиваем умножением */
.sp-lab{mix-blend-mode:multiply;pointer-events:none}

/* ---------- 01 первый экран ---------- */
.sp-b--hero{--bg:var(--turf)}
.sp-hs{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.sp-hbg{overflow:hidden}
.sp-hbg img,.sp-turf__bg img{filter:saturate(1.1) brightness(.7) contrast(.85)}
.sp-hg img{filter:hue-rotate(-48deg) saturate(1.7) brightness(.9) contrast(.9)}
.sp-hg{clip-path:polygon(100% 3.7%,79.2% 24.1%,38.8% 64.8%,38.8% 100%,100% 100%)}
.sp-cov{pointer-events:none}
.sp-logo{z-index:2}
.sp-tag{margin:0;z-index:2;color:#fff;white-space:nowrap;font:900 calc(14*var(--u))/calc(28*var(--u)) 'SP Roboto',sans-serif;text-transform:uppercase}

/* ---------- 02 цвета и типографика ---------- */
.sp-sw{display:block;cursor:copy;border-radius:calc(8*var(--u))}
.sp-sw__i{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sp-sw:is(:hover,:focus-visible) .sp-sw__i{transform:translateY(calc(-8*var(--u))) scale(1.05)}
.sp-blur img{filter:blur(calc(1.4*var(--u)))}
.sp-sw:focus-visible{outline:2px solid var(--gr);outline-offset:4px}

/* ---------- 03 страница целиком ---------- */
.sp-b--pg{z-index:1;margin-top:calc(-194*var(--u));--bg:var(--dk);pointer-events:none}
.sp-b--pg::before{top:calc(194*var(--u))}
.sp-b--pg .sp-pages,.sp-b--pg .sp-popup{pointer-events:auto}
.sp-pages{border-radius:calc(12*var(--u));overflow:hidden;transform:translateZ(0);box-shadow:0 calc(24*var(--u)) calc(70*var(--u)) rgba(8,18,28,.4)}
.sp-pg{overflow:hidden}
.sp-sh{opacity:1}
.sp-popup{background:#fff;border-radius:calc(10*var(--u));box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) rgba(8,18,28,.3);color:var(--ink)}
.sp-popup>*{position:absolute;margin:0}
.sp-px{left:calc(423*var(--u));top:calc(19*var(--u));width:calc(18*var(--u));height:calc(18*var(--u))}
.sp-px::before,.sp-px::after{content:'';position:absolute;left:50%;top:50%;width:140%;height:max(1px,calc(2*var(--u)));margin:calc(-1*var(--u)) 0 0 -70%;background:#c3cdd7}
.sp-px::before{transform:rotate(45deg)}.sp-px::after{transform:rotate(-45deg)}
.sp-pt{left:0;top:calc(58*var(--u));width:100%;text-align:center;font:700 calc(30*var(--u))/calc(34*var(--u)) 'SP Roboto',sans-serif}
.sp-pi{left:calc(50*var(--u));top:calc(var(--y)*var(--u));width:calc(360*var(--u));height:calc(55*var(--u));box-sizing:border-box;padding-left:calc(15*var(--u));
border:max(1px,calc(1*var(--u))) solid #c8d2dc;border-radius:calc(5*var(--u));background:#f2f6fa;color:#a8b0bc;font:400 calc(17*var(--u))/calc(53*var(--u)) 'SP Roboto',sans-serif}
.sp-pc{left:calc(50*var(--u));top:calc(280*var(--u));width:calc(380*var(--u));padding-left:calc(28*var(--u));box-sizing:border-box;white-space:nowrap;color:#a8b0bc;font:400 calc(11.4*var(--u))/calc(18*var(--u)) 'SP Roboto',sans-serif}
.sp-pc i{position:absolute;left:0;top:0;width:calc(17*var(--u));height:calc(17*var(--u));box-sizing:border-box;border:max(1px,calc(1*var(--u))) solid #c8d2dc;border-radius:calc(3*var(--u));background:#f2f6fa}
.sp-pc i::after{content:'';position:absolute;left:calc(5*var(--u));top:calc(2*var(--u));width:calc(5*var(--u));height:calc(9*var(--u));border:solid var(--gr);border-width:0 max(1px,calc(1.5*var(--u))) max(1px,calc(1.5*var(--u))) 0;transform:rotate(45deg)}
.sp-pc u{text-decoration:underline}
.sp-pb{left:calc(50*var(--u));top:calc(320*var(--u));width:calc(360*var(--u));height:calc(55*var(--u));display:flex;align-items:center;justify-content:center;border-radius:calc(4*var(--u));
background:var(--gr);box-shadow:0 calc(3*var(--u)) 0 #028a41;color:#fff;font:900 calc(17*var(--u))/1 'SP Roboto',sans-serif;text-transform:uppercase;letter-spacing:.2px}

/* ---------- 04 мобильная версия ---------- */
.sp-b--mb::after{content:'';position:absolute;left:-100vmax;right:-100vmax;top:calc(1018*var(--u));bottom:0;background:var(--turf);z-index:-1}
.sp-turf{overflow:hidden}
.sp-turf__bg{overflow:hidden}
.sp-g{pointer-events:none}
.sp-card{border-radius:calc(8*var(--u))}

/* ---------- 05 UI-элементы ---------- */
.sp-b--ui{--bgi:linear-gradient(180deg,#fff 0,#fff calc(586*var(--u)),var(--dk) calc(586*var(--u)))}
.sp-ic{cursor:default}
.sp-ic img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sp-ic:hover img{transform:scale(1.07)}
.sp-thx{margin:0;text-align:center;color:#fff;white-space:nowrap;font:900 calc(72*var(--u))/calc(94*var(--u)) 'SP Roboto',sans-serif;letter-spacing:calc(2*var(--u));text-transform:uppercase}
.sp-ft{margin:0;color:#71889e;white-space:nowrap;font:400 calc(14*var(--u))/calc(16*var(--u)) 'SP Roboto',sans-serif;text-transform:uppercase}
.sp-ft--c{text-align:center}.sp-ft--r{text-align:right}
.sp .sp-c{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sp .sp-c__i{display:inline-block;will-change:transform}

/* копирование цвета */
.sp-toast{position:fixed;left:50%;bottom:28px;z-index:50;padding:12px 20px;border-radius:12px;background:var(--dk);color:#fff;font:400 14px/1.3 'SP Roboto',system-ui,sans-serif;
box-shadow:0 8px 30px rgba(0,0,0,.35);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.sp-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* шире 1920px сцена по центру — края фона и картинок гасим */
@media (min-width:1921px){
.sp-edge{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}}

/* ---------- < 1000 px: каждая секция — своё окно сцены (--sw — ширина видимой части, --cx — её центр) ---------- */
@media (max-width:999px){
.sp-st{width:100%}
.sp-b{--u:calc(min(var(--cw,100vw),640px)/var(--sw,1920));width:calc(1920*var(--u));margin-left:calc(var(--cw,100vw)/2 - var(--cx,960)*var(--u))}
.sp-b--hero{--sw:1300;--cx:1050}
.sp-b--hero .sp-logo{--x:410!important;--y:70!important}
.sp-b--ty{--sw:660;--cx:960;--h:1100!important}
.sp-b--ty .sp-ln i:not(:nth-child(3)):not(:nth-child(4)){display:none}
.sp-b--ty>:nth-child(2){--x:877!important;--y:50!important}
.sp-b--ty>:nth-child(3){--x:785!important;--y:130!important}
.sp-b--ty>:nth-child(4){--x:788!important;--y:350!important}
.sp-b--ty>:nth-child(5){display:none}
.sp-b--ty>:nth-child(6){--x:730!important;--y:580!important}
.sp-b--ty>:nth-child(7){--x:1050!important;--y:580!important}
.sp-b--ty>:nth-child(8){--x:730!important;--y:850!important}
.sp-b--ty>:nth-child(9){--x:1050!important;--y:850!important}
.sp-b--pg{--sw:1640;--cx:960}
.sp-b--mb{--sw:780;--cx:960}
.sp-b--ui{--sw:1560;--cx:960}
.sp-popup{display:none}
}

/* ---------- состояния до анимации (только при включённом JS) ---------- */
.is-js [data-sp-in]{opacity:0;transform:translateY(calc(24*var(--u)))}
.is-js [data-sp-rise]{opacity:0;transform:translateY(calc(90*var(--u)))}
.is-js [data-sp-pop]{opacity:0;transform:scale(.8)}
.is-js [data-sp-hin]{opacity:0}
.is-js [data-sp-pg]{opacity:0}

@media (prefers-reduced-motion:reduce){
.is-js [data-sp-in],.is-js [data-sp-rise],.is-js [data-sp-pop],.is-js [data-sp-hin],.is-js [data-sp-pg]{opacity:1;transform:none}}

/* обложка кейса (первый экран шаблона) */
.case-cover [data-cover="sferapokrytiy"] img{object-position:50% 40%}