:root{--m-accent:#F2A93B;--m-accent2:#F2A93B;--m-glow:rgba(242,169,59,.30);--m-line:rgba(242,169,59,.28)}
/* ФинОпора: фирменный слой «калькулятор → всё посчитано». Дописывается в site.css скриптом apply.py */
/* Знак (оригинальные контуры логотипа) */
.fo-mk{display:block;width:100%;height:auto;overflow:visible}
.fo-mk .st{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fo-mk .k{fill:currentColor}
.fo-mk .up{fill:none;stroke:#F2A93B;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fo-mk .gl{fill:none;stroke:#FFE2AE;stroke-width:4;stroke-linecap:round;opacity:0}
/* Фон первого экрана: большой знак вместо диска сейфа и рублей */
.fo .hero.fo-mk-host{position:relative;isolation:isolate;overflow:hidden}
.fo-mk-bg{position:absolute;z-index:-1;pointer-events:none;width:min(620px,62vw);right:-4%;top:50%;transform:translateY(-50%);color:rgba(209,226,234,.13)}
.fo-mk-bg .up{stroke:rgba(242,169,59,.6)}
.fo-mk-bg.fo-behind .gl{stroke-width:1.2}
.fo .hero .wrap{position:relative;z-index:1}
.fo-mk-bg.fo-behind{z-index:0;color:transparent}
.fo-mk-bg.fo-behind .up{stroke:#F2A93B;stroke-width:.85;filter:drop-shadow(0 0 1.5px rgba(242,169,59,.7))}
.fo .hero .pricebox{position:relative;z-index:3}
@media (max-width:900px){.fo-mk-bg{width:min(220px,56vw);right:-16%;top:-6px;transform:none;color:rgba(209,226,234,.07)}.fo-mk-bg .up{stroke:rgba(242,169,59,.28)}}
/* Клавиши как настоящие: при нажатии тень под клавишей схлопывается */
.fo .key{transition:transform .11s cubic-bezier(.3,.7,.4,1),box-shadow .11s,filter .2s}
.fo .key:hover{filter:brightness(1.05)}
.fo .key-light:active,.fo .key-light.is-press{transform:translateY(4px);box-shadow:inset 0 2px 0 #fff,0 1px 0 #A9BCCB}
.fo .key-blue:active,.fo .key-blue.is-press{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 1px 0 #0A1A2A}
.fo .key-amber:active,.fo .key-amber.is-press{transform:translateY(4px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--amber-d)!important}
html.fo-on .fo .eq{animation:fo-eq 4.5s ease-in-out 4s infinite}
@keyframes fo-eq{0%,70%,100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 var(--amber-d),0 0 0 0 rgba(242,169,59,0)}
 82%{box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 var(--amber-d),0 0 0 10px rgba(242,169,59,.16)}}
.fo .screen{position:relative;overflow:hidden}
.fo-flash{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 85% 70%,rgba(242,169,59,.45),rgba(242,169,59,0) 65%);opacity:0}
html.fo-on .fo .hero .stamp{opacity:0}
/* Бенто «Защита» */
.fo .shield-grid.fo-bento{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(170px,auto)}
.fo-bento .sh{position:relative;overflow:hidden;min-width:0}
.fo-bento .sh>svg{display:none}
.fo-bento .fo-b1{grid-column:span 5;grid-row:span 2}
.fo-bento .fo-b2{grid-column:span 7;display:grid;grid-template-columns:1fr 150px;column-gap:20px;align-content:start}
.fo-bento .fo-b2>*{grid-column:1}
.fo-bento .fo-b2 .fo-vis{grid-column:2;grid-row:1/span 9;align-self:center}
.fo-bento .fo-b3{grid-column:span 4}
.fo-bento .fo-b4{grid-column:span 3}
.fo-vis{display:block;color:#D1E2EA}
.fo .sh .fo-vis svg{display:block;width:100%;height:auto;overflow:visible}
.fo-b1 .fo-vis{width:min(210px,70%);margin:6px auto 18px}
.fo-b3 .fo-vis,.fo-b4 .fo-vis{width:64px}
.fo .sh p.fo-big{font:800 clamp(30px,3.4vw,42px)/1 var(--display);color:#F2A93B;font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.fo-chip{font:600 13px/1.2 var(--display);padding:8px 12px;border-radius:999px;background:rgba(14,34,54,.55);border:1px solid rgba(139,167,188,.35);color:#D1E2EA}
.fo-chip.ok{border-color:rgba(242,169,59,.6);color:#F2A93B}
.fo-ok{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--display);color:#F2A93B}
@media (max-width:960px){.fo .shield-grid.fo-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
 .fo-bento .fo-b1,.fo-bento .fo-b2{grid-column:span 2;grid-row:auto}
 .fo-bento .fo-b3,.fo-bento .fo-b4{grid-column:span 1}
 .fo-b1 .fo-vis{width:150px;margin:0 0 6px}}
@media (max-width:560px){.fo .shield-grid.fo-bento{grid-template-columns:1fr}
 .fo-bento .fo-b1,.fo-bento .fo-b2,.fo-bento .fo-b3,.fo-bento .fo-b4{grid-column:auto}
 .fo-bento .fo-b2{grid-template-columns:1fr 96px}}
/* «Как мы работаем» — чек */
.fo .steps.fo-receipt{display:block;max-width:680px;background:#fff;color:var(--ink);border-radius:14px 14px 0 0;padding:22px clamp(18px,3vw,32px) 28px;position:relative;box-shadow:0 24px 50px -24px rgba(14,34,54,.35);counter-reset:s;margin-bottom:14px}
.fo .steps.fo-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(-45deg,transparent 8px,#fff 0) 0 0/16px 12px repeat-x,linear-gradient(45deg,transparent 8px,#fff 0) 0 0/16px 12px repeat-x}
.fo-rc-top{display:flex;justify-content:space-between;gap:12px;font:600 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);padding-bottom:14px;border-bottom:2px dashed var(--line)}
.fo-receipt .step{display:grid;grid-template-columns:44px 1fr 28px;column-gap:14px;align-items:start;border-top:0;border-bottom:1px dashed var(--line);padding:16px 0;gap:4px 14px}
.fo-receipt .step::before{content:counter(s,decimal-leading-zero);font:700 15px/1.5 var(--display);color:var(--amber-d);grid-row:1/span 2;font-variant-numeric:tabular-nums}
.fo-receipt .step>*{grid-column:2}
.fo-receipt .step .fo-tick{grid-column:3;grid-row:1/span 2;align-self:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;font:800 14px var(--display);transition:all .35s cubic-bezier(.2,1.6,.4,1)}
.fo-receipt .step.done .fo-tick{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:scale(1)}
.fo-rc-sum{display:flex;align-items:baseline;gap:10px;padding-top:16px;font:800 clamp(18px,2.2vw,22px) var(--display);color:var(--deep)}
.fo-rc-sum i{flex:1;border-bottom:2px dotted var(--haze);transform:translateY(-5px)}
.fo-rc-sum b{color:var(--amber-d)}
.fo .dark .steps.fo-receipt h3{color:var(--deep)}
/* Шапка: при прокрутке сжимается до знака */
.fo .top{transition:background .3s,box-shadow .3s}
.fo .top .bar{transition:min-height .35s cubic-bezier(.2,.8,.2,1)}
.fo .top .logoimg{background-size:148px 34px!important;background-position:0 50%!important;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fo .top.fo-slim{background:rgba(14,34,54,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.fo .top.fo-slim .bar{min-height:56px}
.fo .top.fo-slim .logoimg{width:41px}
/* Подвал: итог */
.fo-sum{display:flex;align-items:center;gap:clamp(18px,4vw,48px);padding-bottom:36px;margin-bottom:36px;border-bottom:1px dashed rgba(139,167,188,.3)}
.fo-sum .fo-mk{width:clamp(70px,10vw,120px);flex:none;color:#D1E2EA}
.fo-sum p{margin:0;font:800 clamp(28px,5vw,60px)/1.04 var(--display);letter-spacing:-.02em;color:#fff}
.fo-sum p b{color:#F2A93B;font-weight:800}
.fo-sum p span,.fo-sum p b{display:inline-block}
/* 404: калькулятор с ошибкой ввода */
.fo-404calc .a{display:grid;justify-items:end}
.fo-404calc .a>*{grid-area:1/1}
.fo-404calc .n1{animation:fo-404a 6s steps(1) infinite}
.fo-404calc .n2{animation:fo-404b 6s steps(1) infinite;color:#F2A93B;letter-spacing:.06em}
@keyframes fo-404a{0%,45%{opacity:1}50%,95%{opacity:0}}
@keyframes fo-404b{0%,45%{opacity:0}50%,95%{opacity:1}}
html.fo-on .fo-404calc .screen{animation:fo-shake .5s .5s both}
@keyframes fo-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.fo-404calc .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.fo-404calc .n1,.fo-404calc .n2,.fo .eq{animation:none!important}.fo-404calc .n2{display:none}.fo .top .logoimg,.fo .top .bar{transition:none}}

/* Объёмные иконки услуг (tools/icons3d) и карточки-клавиши: при наведении карточка проседает, как клавиша */
.card .i3d{width:64px;height:auto;display:block;margin:-6px 0 -4px -6px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
#services a.card{box-shadow:0 5px 0 #D9E3EB,0 14px 30px rgba(14,34,54,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
#services a.card:hover{transform:translateY(2px);box-shadow:0 3px 0 #D9E3EB,0 8px 18px rgba(14,34,54,.08)}
#services a.card:active{transform:translateY(5px);box-shadow:0 0 0 #D9E3EB,0 4px 10px rgba(14,34,54,.08)}
#services a.card.hot{box-shadow:0 5px 0 #F2A93B,0 14px 30px rgba(242,169,59,.12)}
#services a.card.hot:hover{box-shadow:0 3px 0 #F2A93B,0 8px 18px rgba(242,169,59,.14)}
#services a.card:hover .i3d{transform:translateY(-3px) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.card .i3d,#services a.card{transition:none}}