/* Start:/local/templates/digital/css/topman-service-page.css?178912202769774*/
/* Дизайн-система страниц услуг. Один файл на все новые страницы: корневой класс .svc. */
/* ===== из seo-page-v4.css ===== */
/* ============================================================
TOP MAN DIGITAL — страница /seo/
Классовая вёрстка. Контент — content/seo-page.json
============================================================ */ /* ---------- переменные ---------- */
.svc{--c-ink: #1E005D;
--c-accent: #5011D4;
--c-pink: #B860BA;
--c-lav: #F4F1FB;
--c-white: #fff;
--ink-70: rgba(30, 0, 93, .7);
--ink-66: rgba(30, 0, 93, .66);
--ink-60: rgba(30, 0, 93, .6);
--ink-55: rgba(30, 0, 93, .55);
--ink-50: rgba(30, 0, 93, .5);
--ink-38: rgba(30, 0, 93, .38);
--ink-12: rgba(30, 0, 93, .12);
--ink-09: rgba(30, 0, 93, .09);
--on-dark-75: rgba(255, 255, 255, .75);
--on-dark-72: rgba(255, 255, 255, .72);
--on-dark-60: rgba(255, 255, 255, .6);
--on-dark-45: rgba(255, 255, 255, .45);
--on-dark-16: rgba(255, 255, 255, .16);
--on-dark-08: rgba(255, 255, 255, .08);
--grad: linear-gradient(90deg, #1E005D 0%, #5011D4 100%);
--rhythm: 130px;
--gap: 10px;
--r-card: 32px;
--r-panel: 40px;
--r-pill: 100px;
--ease: cubic-bezier(.22, 1, .36, 1);}
/* ---------- секции ---------- */
.svc .sec{padding: 0; margin: 0 0 var(--rhythm);}
.svc .sec--hero{background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(80,17,212,.1) 93.09%), #fff; padding: 180px 0 var(--rhythm); margin: 0;}
.svc .sec--dark{background: var(--c-ink); padding: 110px 0; margin: 0 0 var(--rhythm);}
.svc .sec--final{position: relative; background: var(--c-ink); padding: 120px 0 var(--rhythm); margin: 0; overflow: hidden;}
.svc .sec__glow{position: absolute; top: -220px; left: -160px; width: 720px; height: 720px; border-radius: 720px; background: radial-gradient(circle, rgba(80,17,212,.5) 0%, rgba(80,17,212,0) 70%); pointer-events: none;}
.svc .sec__inner{position: relative;}
/* ---------- типографика ---------- */
.svc .eyebrow{margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; color: var(--c-accent);}
.svc .eyebrow--light{color: #fff; opacity: .55;}
.svc .h1{margin: 0 0 26px; font-size: 64px; line-height: 64px; font-weight: 600; letter-spacing: -3.2px; color: var(--c-ink); text-wrap: pretty;}
.svc .h2{margin: 0 0 20px; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -2px; color: var(--c-ink); max-width: 1100px; text-wrap: pretty;}
.svc .h2--tight{margin-bottom: 24px;}
.svc .h3{margin: 0; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.8px; color: var(--c-ink); text-wrap: pretty;}
.svc .lead{margin: 0 0 48px; font-size: 18px; line-height: 26px; letter-spacing: -.36px; color: rgba(30,0,93,.65); max-width: 900px; text-wrap: pretty;}
.svc .p{margin: 0; font-size: 16px; line-height: 23px; color: var(--ink-66); text-wrap: pretty;}
.svc .p--big{font-size: 18px; line-height: 26px; letter-spacing: -.36px; max-width: 900px;}
.svc .p--fine{font-size: 14px; line-height: 20px; color: var(--ink-50); max-width: 900px;}
/* ---------- сетки ---------- */
.svc .grid{display: grid; gap: var(--gap);}
.svc .grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.svc .grid--4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.svc .grid--start{align-items: start;}
.svc .row{display: flex; gap: 60px; align-items: flex-start;}
.svc .row__main{flex: 1; min-width: 0;}
.svc .stack{display: flex; flex-direction: column; gap: var(--gap);}
.svc .mb-70{margin-bottom: 70px;}
/* ---------- карточки ---------- */
.svc .card{background: #fff; border: 1px solid var(--ink-09); border-radius: var(--r-card); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;}
.svc .card--lav{background: var(--c-lav); border-color: transparent;}
.svc .card--corner-tl{border-radius: 0 var(--r-card) var(--r-card) var(--r-card);}
.svc .card--dark .h3, .svc .card--accent .h3{color: #fff;}
.svc .card--dark .p, .svc .card--accent .p{color: var(--on-dark-75);}
.svc .fact{background: #fff; border-radius: var(--r-card); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px;}
.svc .fact--corner-tl{border-radius: 0 var(--r-card) var(--r-card) var(--r-card);}
.svc .fact--corner-br{border-radius: var(--r-card) var(--r-card) 0 var(--r-card);}
.svc .fact__v{font-size: 28px; line-height: 28px; font-weight: 700; letter-spacing: -1.1px; color: var(--c-ink);}
.svc .fact__v--sm{font-size: 21px;}
.svc .term{background: var(--c-lav); border-radius: var(--r-card); padding: 36px 32px; display: flex; flex-direction: column; gap: 12px;}
.svc .term__v{font-size: 36px; line-height: 38px; font-weight: 700; letter-spacing: -1.8px; color: var(--c-ink); white-space: nowrap;}
.svc .term__l{font-size: 15px; line-height: 21px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- врезка ---------- */
.svc .note{background: var(--c-lav); border-radius: 28px; padding: 30px 34px; display: flex; gap: 18px; align-items: flex-start;}
.svc .note__dash{width: 22px; height: 2px; background: var(--c-accent); margin-top: 12px; flex-shrink: 0;}
.svc .note__text{margin: 0; font-size: 17px; line-height: 25px; letter-spacing: -.4px; color: rgba(30,0,93,.78); text-wrap: pretty;}
.svc .btn-inv{background: #fff !important; color: var(--c-ink) !important; border-color: #fff !important; white-space: nowrap;}
.svc .btn-fill{background: var(--c-ink) !important; color: #fff !important; border-color: var(--c-ink) !important;}
.svc a.button:hover{background: var(--c-accent); color: #fff; border-color: var(--c-accent);}
/* ---------- кейсы ---------- */
.svc .cs_card{background: #fff; border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 22px; text-decoration: none; box-shadow: 0 1px 0 rgba(30,0,93,.06); transition: transform .45s var(--ease), box-shadow .45s ease;}
.svc .cs_card:hover{transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(30,0,93,.45);}
.svc .cs_card:hover .cs_facts{max-height: 220px; opacity: 1;}
.svc .cs_head{display: flex; align-items: center; gap: 10px;}
.svc .cs_dot{width: 7px; height: 7px; border-radius: 7px; background: var(--c-accent); flex-shrink: 0;}
.svc .cs_type{font-size: 12px; font-weight: 500; letter-spacing: .3px; color: var(--ink-55);}
.svc .cs_name{margin-left: auto; font-size: 14px; font-weight: 500; color: var(--c-ink);}
.svc .cs_metric{display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;}
.svc .cs_metric__v{margin: 0; font-size: 62px; line-height: 58px; font-weight: 700; letter-spacing: -2.6px; color: var(--c-ink); white-space: nowrap;}
.svc .cs_metric__l{margin: 0; font-size: 14px; line-height: 18px; color: var(--ink-60); max-width: 190px;}
.svc .cs_facts{display: grid; gap: 7px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .35s ease;}
.svc .cs_fact{font-size: 13px; line-height: 17px; color: rgba(30,0,93,.62);}
.svc .cs_facts__link{font-size: 13px; font-weight: 500; color: var(--c-accent);}
.svc .step__d{font-size: 14px; line-height: 20px; color: var(--ink-66); text-wrap: pretty;}
.svc .month{background: #fff; border: 1px solid var(--ink-09); border-radius: var(--r-card); padding: 34px 30px; display: flex; flex-direction: column; gap: 16px;}
.svc .month--corner-tl{border-radius: 0 var(--r-card) var(--r-card) var(--r-card);}
.svc .month--corner-br{border-radius: var(--r-card) var(--r-card) 0 var(--r-card);}
.svc .month__cap{font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--c-accent);}
.svc .month__t{font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: -.8px; color: var(--c-ink); text-wrap: pretty;}
/* список с маркерами */
.svc .bullets{display: flex; flex-direction: column; gap: 9px;}
.svc .bullet{display: flex; gap: 10px; align-items: flex-start;}
.svc .bullet__dot{width: 5px; height: 5px; border-radius: 5px; background: var(--c-accent); margin-top: 8px; flex-shrink: 0;}
.svc .bullet__dash{width: 14px; height: 2px; background: var(--c-pink); margin-top: 9px; flex-shrink: 0;}
.svc .bullet__text{font-size: 14px; line-height: 20px; color: rgba(30,0,93,.74); text-wrap: pretty;}
.svc .bullet--dark .bullet__dot{background: var(--c-pink);}
.svc .bullet--dark .bullet__dash{background: rgba(255,255,255,.4);}
.svc .bullet--dark .bullet__text{color: rgba(255,255,255,.82);}
/* ---------- тарифы ---------- */
.svc .tariff{background: #fff; border: 1px solid var(--ink-12); border-radius: 36px; padding: 40px 34px; display: flex; flex-direction: column; gap: 18px; height: 100%;}
.svc .tariff--accent{background: var(--c-lav);}
.svc .tariff--dark{background: var(--c-ink); border-color: var(--c-ink);}
.svc .tariff__top{display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.svc .tariff__name{font-size: 24px; font-weight: 700; letter-spacing: -.6px; color: var(--c-ink);}
.svc .tariff__badge{padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;}
.svc .tariff__mark{margin-left: auto;}
.svc .tariff__sub{font-size: 16px; line-height: 22px; color: var(--ink-66); text-wrap: pretty;}
.svc .tariff__price{font-size: 30px; line-height: 30px; font-weight: 700; letter-spacing: -1.1px; color: var(--c-ink); text-wrap: pretty;}
.svc .tariff__price--long{font-size: 19px;}
.svc .tariff__hr{height: 1px; background: rgba(30,0,93,.1);}
.svc .tariff__cap{font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--ink-50);}
.svc .tariff--dark .tariff__name, .svc .tariff--dark .tariff__price{color: #fff;}
.svc .tariff--dark .tariff__sub{color: var(--on-dark-72);}
.svc .tariff--dark .tariff__hr{background: var(--on-dark-16);}
.svc .tariff--dark .tariff__cap{color: rgba(255,255,255,.55);}
/* сравнительная таблица */
.svc .cmp_wrap{border: 1px solid var(--ink-12); border-radius: var(--r-card); overflow: auto; background: #fff;}
.svc .cmp_grid{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; min-width: 760px;}
.svc .cmp__h{padding: 20px 18px; font-size: 16px; font-weight: 700; letter-spacing: -.4px; color: var(--c-ink); background: var(--c-lav);}
.svc .cmp__h--works{font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--ink-50);}
.svc .cmp__h--plat{color: var(--c-accent);}
.svc .cmp__c{padding: 16px 18px; font-size: 14px; line-height: 19px; color: rgba(30,0,93,.8); border-top: 1px solid rgba(30,0,93,.08); display: flex; align-items: center;}
.svc .cmp__c--head{color: var(--c-ink); font-weight: 500;}
.svc .cmp__c--no{color: var(--ink-38);}
.svc .cmp__c--last{background: var(--c-lav); font-weight: 600;}
/* ---------- FAQ ---------- */
.svc .faq_list{display: flex; flex-direction: column; gap: 8px; margin-top: 48px;}
.svc .faq_it{background: #fff; border: 1px solid var(--ink-12); border-radius: 24px; overflow: hidden;}
.svc .faq_q{width: 100%; display: flex; gap: 20px; align-items: center; padding: 26px 30px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;}
.svc .faq_q__text{flex: 1; font-size: 19px; line-height: 25px; font-weight: 600; letter-spacing: -.6px; color: var(--c-ink); text-wrap: pretty; transition: color .2s ease;}
.svc .faq_q:hover .faq_q__text{color: var(--c-accent);}
.svc .faq_ic{width: 32px; height: 32px; border-radius: 32px; background: var(--c-lav); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px; color: var(--c-accent); transition: transform .35s var(--ease), background .25s ease, color .25s ease;}
.svc .faq_it.open .faq_ic{transform: rotate(45deg); background: var(--c-accent); color: #fff;}
.svc .faq_a{max-height: 0; overflow: hidden; transition: max-height .45s var(--ease);}
.svc .faq_a__text{margin: 0; padding: 0 82px 28px 30px; font-size: 16px; line-height: 23px; color: var(--ink-70); text-wrap: pretty;}
/* ---------- финальная форма ---------- */
.svc .fin_grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 70px; align-items: start;}
.svc .fin__h{margin: 0 0 28px; font-size: 56px; line-height: 56px; font-weight: 600; letter-spacing: -2.8px; color: #fff; text-wrap: pretty;}
.svc .fin__p{margin: 0 0 18px; font-size: 18px; line-height: 26px; letter-spacing: -.36px; color: var(--on-dark-72); max-width: 620px; text-wrap: pretty;}
.svc .fin__p:last-of-type{margin-bottom: 34px;}
.svc .fin__contacts{display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 34px;}
.svc .fin__msg{padding: 14px 26px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.28); font-size: 15px; font-weight: 500; color: #fff; transition: background .25s ease, color .25s ease;}
.svc .fin__msg:hover{background: #fff; color: var(--c-ink);}
.svc .fin__phone{font-size: 20px; font-weight: 600; letter-spacing: -.6px; color: #fff; white-space: nowrap;}
.svc .fin__bottom{display: flex; align-items: flex-end; gap: 26px;}
.svc .fin__stats{display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px;}
.svc .fin__stat{display: flex; align-items: baseline; gap: 12px;}
.svc .fin__stat-v{font-size: 22px; font-weight: 700; letter-spacing: -.9px; color: #fff; white-space: nowrap;}
.svc .fin__stat-l{font-size: 14px; line-height: 19px; color: rgba(255,255,255,.55);}
.svc .form{background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-panel); padding: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.svc .field{display: flex; flex-direction: column; gap: 9px; min-width: 0;}
.svc .field--wide{grid-column: span 2;}
.svc .field__label{font-size: 13px; font-weight: 500; letter-spacing: .2px; color: rgba(255,255,255,.62);}
.svc .field__req{color: var(--c-accent);}
.svc .field__input, .svc .field__area{font: inherit; color: #fff; min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); outline: none; transition: border-color .25s ease, background .25s ease;}
.svc .field__input{font-size: 17px; height: 70px; padding: 0 26px; border-radius: var(--r-pill);}
.svc .field__input:focus, .svc .field__area:focus{border-color: var(--c-accent); background: rgba(255,255,255,.1);}
.svc .field__input::placeholder, .svc .field__area::placeholder{color: rgba(255,255,255,.34);}
.svc .consent__text{font-size: 13px; line-height: 18px; color: var(--on-dark-60); text-wrap: pretty;}
.svc .consent__text a{color: #fff; text-decoration: underline;}
.svc .form__submit{grid-column: span 2; height: 80px; border: 0; border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.3px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s ease, opacity .25s ease;}
.svc .form__submit:hover:not(:disabled){transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(255,255,255,.5);}
.svc .form__submit:disabled{opacity: .45; cursor: not-allowed;}
.svc .done{display: none; max-width: 900px; margin: 0 auto; text-align: center; flex-direction: column; align-items: center; gap: 26px;}
.svc .done__ring{width: 112px; height: 112px; border-radius: 112px; background: var(--grad); display: flex; align-items: center; justify-content: center;}
.svc .done__h{margin: 0; font-size: 48px; line-height: 50px; font-weight: 600; letter-spacing: -2.4px; color: #fff; text-wrap: pretty;}
.svc .done__d{margin: 0; font-size: 19px; line-height: 27px; color: var(--on-dark-72); max-width: 620px; text-wrap: pretty;}
.svc .done__again{background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important;}
/* ---------- маскот ---------- */
.svc .ms{display: flex; flex-direction: column; flex-shrink: 0; cursor: pointer; outline: none; transform-origin: 50% 100%; animation: tmBob 3.6s ease-in-out infinite;}
.svc .ms_head{border-radius: 999px; background: var(--grad); display: flex; align-items: center; justify-content: center; transform-origin: 50% 100%; transition: transform .3s var(--ease); will-change: transform;}
.svc .ms_base{background: var(--grad); transform-origin: 50% 100%; transition: transform .3s var(--ease);}
.svc .ms_eye{display: block; border-radius: 999px; background: #fff; transition: transform .16s ease-out;}
.svc .ms_blink{display: block; flex-shrink: 0; animation: tmBlink 5.4s .2s infinite;}
.svc .ms_blink--b{animation-delay: .26s;}
.svc .ms--88{width: 88px; height: 176px;}
.svc .ms--88 .ms_head, .svc .ms--88 .ms_base{width: 88px; height: 88px;}
.svc .ms--88 .ms_head{gap: 14px;}
.svc .ms--88 .ms_eye, .svc .ms--88 .ms_blink{width: 9px; height: 9px;}
.svc .ms--84 .ms_head, .svc .ms--84 .ms_base{width: 84px; height: 84px;}
.svc .ms--84 .ms_head{gap: 13px;}
.svc .ms--84 .ms_eye, .svc .ms--84 .ms_blink{width: 8px; height: 8px;}
.svc .ms--76 .ms_head, .svc .ms--76 .ms_base{width: 76px; height: 76px;}
.svc .ms--76 .ms_head{gap: 12px;}
.svc .ms--76 .ms_eye, .svc .ms--76 .ms_blink{width: 8px; height: 8px;}
.svc .ms--96{width: 96px; height: 192px;}
.svc .ms--96 .ms_head, .svc .ms--96 .ms_base{width: 96px; height: 96px;}
.svc .ms--96 .ms_head{gap: 15px;}
.svc .ms--96 .ms_eye, .svc .ms--96 .ms_blink{width: 10px; height: 10px;}
@keyframes tmBob{0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); }}
@keyframes tmBlink{0%, 92%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.06); }}
/* ---------- бейдж Platinum ---------- */
.svc .badge-plat{display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .4px; margin-bottom: 18px;}
@media (min-width: 1920px){
.svc .container{max-width: 1680px;}
.svc .h1{font-size: 76px; line-height: 74px; letter-spacing: -3.8px;}
.svc{--rhythm: 150px;}
.svc .sec--hero{padding: 210px 0 150px;}
}
@media (max-width: 1509px){
.svc .h1{font-size: 58px; line-height: 58px; letter-spacing: -2.8px;}
}
@media (max-width: 1439px){
.svc{--rhythm: 110px;}
.svc .sec--hero{padding: 170px 0 110px;}
.svc .sec--dark, .svc .sec--final{padding-top: 96px; padding-bottom: 96px;}
.svc .h1{font-size: 52px; line-height: 54px;}
.svc .h2{font-size: 36px; line-height: 40px;}
.svc .grid--4{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 1279px){
.svc{--rhythm: 96px;}
.svc .sec--hero{padding: 150px 0 96px;}
.svc .h1{font-size: 44px; line-height: 46px; letter-spacing: -2px;}
.svc .h2{font-size: 32px; line-height: 36px;}
.svc .grid--3{grid-template-columns: repeat(2, minmax(0, 1fr));}
.svc .fin_grid{grid-template-columns: minmax(0, 1fr); gap: 44px;}
.svc .cs_facts{max-height: none; opacity: 1;}
}
@media (max-width: 1023px){
.svc .grid--3, .svc .grid--4{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767px){
.svc{--rhythm: 70px;}
.svc .sec--hero{padding: 120px 0 70px;}
.svc .sec--dark, .svc .sec--final{padding-top: 64px; padding-bottom: 70px;}
.svc .container{padding: 0 20px;}
.svc .h1{font-size: 34px; line-height: 38px; letter-spacing: -1.4px;}
.svc .h2{font-size: 26px; line-height: 30px; letter-spacing: -1px; margin-bottom: 14px;}
.svc .row{flex-direction: column; gap: 34px;}
.svc .row__aside{padding-top: 0 !important; align-self: flex-start;}
.svc .grid--2, .svc .grid--3, .svc .grid--4, .svc .grid--5, .svc .grid--6{grid-template-columns: minmax(0, 1fr);}
.svc .cs_metric__v{font-size: 42px; line-height: 44px;}
.svc .form{padding: 26px; gap: 16px; border-radius: 28px;}
.svc .fin__h{font-size: 32px; line-height: 36px; letter-spacing: -1.4px;}
.svc .done__h{font-size: 30px; line-height: 34px;}
.svc .faq_q{padding: 20px;}
.svc .faq_a__text{padding: 0 20px 22px;}
}
@media (max-width: 389px){
.svc{--rhythm: 56px;}
.svc .container{padding: 0 16px;}
.svc .sec--hero{padding: 104px 0 56px;}
.svc .h1{font-size: 28px; line-height: 32px;}
.svc .h2{font-size: 23px; line-height: 27px;}
.svc .cs_card, .svc .faq_it{border-radius: 22px;}
}
/* ---------- утилиты и модификаторы рендера ---------- */
.svc .mt-10{margin-top: 10px;}
.svc .mt-24{margin-top: 24px;}
.svc .mt-36{margin-top: 36px;}
.svc .mb-22{margin-bottom: 22px;}
.svc .mb-26{margin-bottom: 26px;}
.svc .mb-44{margin-bottom: 44px;}
.svc .btn-row{display: flex; gap: var(--gap); flex-wrap: wrap;}
.svc .card--roomy{padding: 40px 36px; gap: 16px;}
.svc .row__main--wide{flex: 1.35;}
.svc .row__aside--hero{padding-top: 120px;}
.svc .lead--hero{font-size: 19px; line-height: 27px; max-width: 820px;}
@media (max-width: 767px){
.svc .row__aside--hero, .svc .row__aside--mid, .svc .row__aside--low{padding-top: 0;}
.svc .lead--hero{font-size: 17px; line-height: 24px;}
}
/* ===== из topman-common.css ===== */
/* ---------- заголовки настоящими тегами ----------
На /seo/ заголовки блоков свёрстаны как . Раздел 26 ТЗ требует
один H1 и H2 по смысловым разделам, поэтому здесь это настоящие теги.
Сбрасываем браузерные отступы, чтобы вид не отличался от /seo/. */
.svc h2.h2, .svc h2.fin__h, .svc h3.h3, .svc h3.tariff__name{margin-top: 0;}
/* заголовок, за которым сразу идёт контент без лида: у .h2 отступ 20 px,
у .lead под заголовком — 48 px. Без лида блок начинался слишком близко. */
.svc .h2--gap{margin-bottom: 44px;}
.svc h3.tariff__name{margin-bottom: 0;}
/* ---------- FAQ: раскрытие классом, без max-height ----------
В seo-page-v4.css ответ закрыт через max-height: 0 и раскрывается
инлайновой высотой из скрипта. На страницах услуг эта конструкция уже
дважды не срабатывала, поэтому здесь ответ переключается display'ем,
а плавность даёт отдельная анимация сдвига. Видимость ответа не зависит
от того, стартовал переход или нет. */
.svc .faq_a{max-height: none; overflow: visible; transition: none; display: none;}
.svc .faq_it.open .faq_a{display: block; animation: shFaqIn .28s var(--ease) both;}
@keyframes shFaqIn{from { transform: translateY(-4px); } to { transform: none; }}
/* ---------- конструктор запроса ----------
Показывает, из чего складывается поисковая фраза и что из неё следует.
Выбранные значения помечены классом --on: это не интерактив, а схема. */
.svc .qb{background: var(--c-lav); border-radius: var(--r-card); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px;}
.svc .qb_axes{display: flex; flex-direction: column; gap: 10px;}
.svc .qb_axis{display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center;}
.svc .qb_axis__k{font-size: 11px; font-weight: 700; letter-spacing: .6px; line-height: 15px; color: var(--ink-66);}
.svc .qb_opts{display: flex; flex-wrap: wrap; gap: 8px;}
.svc .qb_opt{padding: 8px 14px; border-radius: var(--r-pill); background: #fff; font-size: 14px; line-height: 18px; color: var(--ink-66);}
.svc .qb_opt--on{background: var(--c-accent); color: #fff; font-weight: 600;}
.svc .qb_out{background: #fff; border-radius: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;}
.svc .qb_q{display: flex; align-items: center; gap: 12px;}
.svc .qb_q__ic{width: 26px; height: 26px; border-radius: 26px; background: rgba(80,17,212,.12); flex-shrink: 0; position: relative;}
.svc .qb_q__ic::after{content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border: 1.5px solid var(--c-accent); border-radius: 8px;}
.svc .qb_q__ic::before{content: ""; position: absolute; left: 15px; top: 15px; width: 6px; height: 1.5px; background: var(--c-accent); transform: rotate(45deg);}
.svc .qb_q__t{font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.5px; color: var(--c-ink); text-wrap: pretty;}
.svc .qb_arrow{height: 1px; background: rgba(30,0,93,.1);}
.svc .qb_res{display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;}
.svc .qb_res__k{font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--c-accent);}
.svc .qb_res__v{font-size: 15px; line-height: 21px; color: var(--ink-66); text-wrap: pretty;}
.svc .qb_note{margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- схема структуры разделов ---------- */
.svc .tree{background: #fff; border: 1px solid var(--ink-09); border-radius: var(--r-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 6px;}
.svc .tree_cap{margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ink-66);}
.svc .tree_row{display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 12px; flex-wrap: wrap;}
.svc .tree_row--root{background: var(--c-lav);}
.svc .tree_row--l2{margin-left: 22px;}
.svc .tree_row--l3{margin-left: 44px;}
.svc .tree_url{font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.2px; color: var(--c-ink); word-break: break-word;}
.svc .tree_row--l3 .tree_url{font-weight: 500; color: var(--ink-70);}
.svc .tree_what{font-size: 13px; line-height: 18px; color: var(--ink-66);}
.svc .tree_note{margin: 10px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- календарь сезонного спроса ----------
Окна условные: подтверждённые сценарии и месяцы зависят от региона
и услуг компании. Цифр в блоке нет — это календарь, а не данные. */
.svc .cal{background: #fff; border: 1px solid var(--ink-09); border-radius: var(--r-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;}
.svc .cal_head{display: flex; gap: 20px; align-items: center; flex-wrap: wrap;}
.svc .cal_legend{display: flex; gap: 16px; flex-wrap: wrap;}
.svc .cal_lg{display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-60);}
.svc .cal_sw{width: 16px; height: 8px; border-radius: 8px; flex-shrink: 0;}
.svc .cal_sw--prep{background: rgba(80,17,212,.22);}
.svc .cal_sw--peak{background: var(--grad);}
.svc .cal_inner{display: flex; flex-direction: column; gap: 8px;}
.svc .cal_months{display: grid; grid-template-columns: 168px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; margin-bottom: 2px;}
.svc .cal_m{font-size: 11px; font-weight: 600; color: var(--ink-66); text-align: center;}
.svc .cal_m--sp{grid-column: 1;}
.svc .cal_lane{display: grid; grid-template-columns: 168px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; padding: 4px 0; border-top: 1px solid rgba(30,0,93,.06);}
.svc .cal_lane__t{font-size: 14px; line-height: 19px; color: var(--c-ink); font-weight: 500; padding-right: 10px; text-wrap: pretty;}
.svc .cal_cell{height: 26px; border-radius: 8px; background: rgba(30,0,93,.04);}
.svc .cal_cell--prep{background: rgba(80,17,212,.22);}
.svc .cal_cell--peak{background: var(--grad);}
.svc .cal_note{margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- универсальный макет интерфейса ----------
Одна оболочка на все экраны, которые нужно показать в макете:
карточка справочника, калькулятор, виджет отзывов. Внутри — строки
.ui_row, поля .ui_field и скелетоны .ui_line. Своих классов под
каждый экран не заводим. */
.svc .ui{background: #fff; border: 1px solid var(--ink-12); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px -34px rgba(30,0,93,.4);}
.svc .ui_bar{min-height: 52px; padding: 12px 20px; background: var(--c-lav); border-bottom: 1px solid var(--ink-09); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.svc .ui_dot{width: 8px; height: 8px; border-radius: 8px; background: var(--c-accent); flex-shrink: 0;}
.svc .ui_title{font-size: 14px; font-weight: 600; letter-spacing: -.2px; color: var(--c-ink);}
.svc .ui_meta{margin-left: auto; font-size: 12px; color: var(--ink-66);}
.svc .ui_body{padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;}
.svc .ui_grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.svc .ui_field{border: 1px solid var(--ink-12); border-radius: 14px; padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0;}
.svc .ui_field--wide{grid-column: span 2;}
.svc .ui_field__l{font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--ink-66);}
.svc .ui_field__v{font-size: 14px; line-height: 19px; color: var(--ink-66);}
.svc .ui_out{background: var(--c-lav); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px;}
.svc .ui_out__k{font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--c-accent);}
.svc .ui_out__v{font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.4px; color: var(--c-ink); text-wrap: pretty;}
.svc .ui_note{margin: 0; padding: 2px 2px 0; font-size: 13px; line-height: 18px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- шкала событий ----------
Показывает, что события рекламы неравноценны: одни легко получить,
другие подтверждают обращение. Порядок и подписи задаёт страница. */
.svc .ev{background: var(--c-lav); border-radius: var(--r-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;}
.svc .ev_head{display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.svc .ev_head__k{font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ink-66);}
.svc .ev_scale{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;}
.svc .ev_i{display: flex; flex-direction: column; gap: 10px;}
.svc .ev_bar{height: 8px; border-radius: 8px; background: rgba(80,17,212,.16);}
.svc .ev_i--mid .ev_bar{background: rgba(80,17,212,.34);}
.svc .ev_i--main .ev_bar{background: var(--c-accent);}
.svc .ev_t{font-size: 13px; line-height: 18px; color: var(--ink-60); text-wrap: pretty;}
.svc .ev_i--main .ev_t{color: var(--c-ink); font-weight: 600;}
.svc .ev_tag{display: inline-flex; width: fit-content; padding: 4px 9px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: .5px;}
.svc .ev_tag--aux{background: rgba(30,0,93,.07); color: var(--ink-66);}
.svc .ev_tag--main{background: var(--c-accent); color: #fff;}
.svc .ev_note{margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-66); text-wrap: pretty;}
/* ---------- фотоблок ----------
Настоящий ![]()
, а не фон: у изображения должен быть alt (требование
раздела 36 ТЗ /seo/dentistry/). В макете src указывает на плейсхолдер
из local/templates/digital/images/, alt написан под содержание будущей
фотографии. При переносе меняется только src, alt остаётся.
width и height проставлены в разметке, чтобы не было сдвига вёрстки. */
.svc .pic{display: flex; flex-direction: column; gap: 12px;}
.svc .pic_img{display: block; width: 100%; height: auto; border-radius: 24px; background: var(--c-lav);}
@keyframes picIn{from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; }}
.svc .pic_img--info{animation: picIn .55s cubic-bezier(.22,1,.36,1) both;}
@media (prefers-reduced-motion: reduce){
.svc .pic_img--info{animation: none;}
}
.svc .pic_img--info{display: block; width: 100%; max-width: 340px; height: auto; border-radius: 24px; border: 1px solid var(--ink-09);}
@media (min-width: 641px){
.svc .pic_img--info{max-width: 700px;}
}
@media (min-width: 1180px){
.svc .pic_img--info{max-width: 1100px;}
}
/* Инфографика: пропорция задана самим файлом, обрезать нельзя.
На узких экранах схему не сжимаем — текст внутри становится
нечитаемым (кегль 17 при масштабе 0.29 превращается в 5 px).
Вместо этого прокручиваем по горизонтали, как сравнительную
таблицу и календарь: /* Схемы: два файла на разную ширину. До 1023 px подключается вариант,
свёрстанный в один столбец, поэтому масштаб остаётся близким к 1 и кегль
внутри схемы совпадает с кеглем страницы. Горизонтальной прокрутки нет. */
.svc .pic_hold{min-width: 0;}
.svc .pic_hold picture{display: block;}
.svc .pic_hold .pic_img--info{margin: 0 auto;}
.svc .pic_cap{font-size: 13px; line-height: 18px; color: var(--ink-66); text-wrap: pretty;}
.svc .pic_row{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
/* ---------- путь пользователя и точки потери ---------- */
.svc .path{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;}
/* путь из пяти шагов: базовое правило было только в брейкпоинтах */
.svc .path--5{grid-template-columns: repeat(5, minmax(0, 1fr));}
.svc .path_step{background: #fff; border: 1px solid var(--ink-09); border-radius: 24px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;}
.svc .path_step--last{background: var(--c-lav); border-color: transparent;}
.svc .path_n{display: flex; align-items: center; gap: 10px;}
.svc .path_n__v{width: 24px; height: 24px; border-radius: 24px; background: rgba(80,17,212,.12); color: var(--c-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.svc .path_n__t{font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -.4px; color: var(--c-ink); text-wrap: pretty;}
.svc .path_drop{margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 6px;}
.svc .path_drop__k{font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--c-warn);}
.svc .path_drop__t{font-size: 13px; line-height: 18px; color: var(--ink-60); text-wrap: pretty;}
/* ---------- матрица приоритета ---------- */
.svc .mx{display: grid; grid-template-columns: 132px repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch;}
.svc .mx_corner{display: flex; align-items: flex-end;}
.svc .mx_ax{font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ink-66); display: flex; align-items: center;}
.svc .mx_ax--y{writing-mode: vertical-rl; transform: rotate(180deg); justify-content: center;}
.svc .mx_cell{border-radius: 24px; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--ink-09);}
.svc .mx_cell--first{background: var(--c-accent); border-color: var(--c-accent);}
.svc .mx_cell--plan{background: var(--c-lav); border-color: transparent;}
.svc .mx_cell__ax{display: none; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--ink-66);}
.svc .mx_cell__k{font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ink-66);}
.svc .mx_cell__t{font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -.4px; color: var(--c-ink); text-wrap: pretty;}
.svc .mx_cell__d{margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-60); text-wrap: pretty;}
.svc .mx_cell--first .mx_cell__ax{color: rgba(255,255,255,.78);}
.svc .mx_cell--first .mx_cell__k{color: rgba(255,255,255,.78);}
.svc .mx_cell--first .mx_cell__t{color: #fff;}
.svc .mx_cell--first .mx_cell__d{color: rgba(255,255,255,.8);}
/* ---------- полоса периода ---------- */
.svc .tl{display: flex; flex-direction: column; gap: 10px;}
.svc .tl_bar{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;}
.svc .tl_seg{height: 10px; border-radius: 10px; background: rgba(80,17,212,.18);}
.svc .tl_seg--2{background: rgba(80,17,212,.4);}
.svc .tl_seg--3{background: var(--c-accent);}
.svc .tl_marks{display: flex; justify-content: space-between; gap: 10px;}
/* подписи по границам отрезков (СТАРТ · 30 ДНЕЙ · 90 ДНЕЙ) — вариант по умолчанию.
Когда подпись описывает сам отрезок, а не границу, нужен --seg: он повторяет
сетку .tl_bar, поэтому каждая подпись стоит под своим отрезком. */
.svc .tl_marks--seg{display: grid; gap: 4px;}
.svc .tl_marks--seg.tl_marks--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.svc .tl_marks--seg.tl_marks--4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.svc .tl_marks--seg .tl_mark{padding-right: 8px;}
.svc .tl_mark{font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--ink-66);}
/* ---------- плитки-перечни с галочкой ----------
Для длинных однородных перечней ТЗ: полотном буллетов они не читаются,
а карточка с заголовком и описанием потребовала бы дописывать текст. */
.svc .ck{display: grid; gap: 10px;}
.svc .ck--2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.svc .ck--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
/* чек-лист в 4 колонки: базовое правило было только в брейкпоинтах */
.svc .ck--4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.svc .ck_i{background: #fff; border: 1px solid var(--ink-09); border-radius: 24px; padding: 20px 22px; display: flex; gap: 12px; align-items: flex-start;}
.svc .ck_i--lav{background: var(--c-lav); border-color: transparent;}
.svc .ck_tick{position: relative; width: 18px; height: 18px; border-radius: 18px; background: rgba(80,17,212,.12); flex-shrink: 0; margin-top: 2px;}
.svc .ck_tick::after{content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--c-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);}
.svc .ck_t{font-size: 15px; line-height: 21px; color: rgba(30,0,93,.82); text-wrap: pretty;}
/* ---------- кнопка в карточке тарифа ---------- */
.svc .tariff__btn{margin-top: auto; align-self: flex-start;}
/* ---------- вопрос FAQ настоящим тегом ----------
Раздел 3 ТЗ задаёт вопросы уровнем H3. Кнопка внутри заголовка, а не
наоборот: заголовок не может лежать внутри button. */
.svc .faq_h3{margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal;}
/* ---------- экран «заявка отправлена» ----------
В seo-page-v4.css есть .done { display: none }, но нет правил показа:
они лежали в topman-service.css, который подстраницы SEO не подключают.
Без этих двух строк форма после отправки ничего не переключает. */
.svc .fin_grid.is-hidden{display: none;}
.svc .done.is-shown{display: flex;}
/* ---------- полосы-секции: ритм длинной страницы ----------
В seo-page-v4.css `.sec` не имеет фона: на короткой странице это
нормально, но на 30 блоках подряд белые карточки на белом фоне
читаются как сплошной текст. Две полосы дают ритм:
.sec--lav — светлая лавандовая полоса. Белые карточки на ней
отделяются сами, менять компоненты не нужно.
.sec--dark — тёмная полоса. Правило есть в базовом файле, но
без цветов текста: они заданы здесь, строго через
прямых детей .container, чтобы не перекрасить
содержимое белых карточек внутри секции.
Вертикальные отступы полос повторяют брейкпоинты базового файла. */
.svc .sec--lav{background: var(--c-lav); padding: 110px 0; margin: 0 0 var(--rhythm);}
/* Лавандовые варианты блоков придуманы для белых секций: на самой полосе
они сливаются с фоном и блок читается как голый текст. На полосе роль
меняется на обратную — светлый блок становится белым. */
.svc .sec--lav .term, .svc .sec--lav .card--lav, .svc .sec--lav .ck_i--lav, .svc .sec--lav .fmt_i--lav{background: #fff; border: 1px solid var(--ink-09);}
.svc .sec--lav .nest, .svc .sec--lav .qb, .svc .sec--lav .ev{background: #fff; border: 1px solid var(--ink-09);}
.svc .sec--lav .nest_l--1, .svc .sec--lav .ax_fact, .svc .sec--lav .path_step--last{background: #fff; border-color: rgba(80,17,212,.22);}
.svc .sec--lav .dm_row{background: var(--c-lav);}
/* На тёмной полосе — та же проверка с обратным знаком: светлые блоки
остаются светлыми и читаются, белый текст внутрь не наследуется. */
.svc .sec--dark .term{background: #fff;}
.svc .sec--dark > .container > .h2, .svc .sec--dark > .container > .h3{color: #fff;}
.svc .sec--dark > .container > .lead{color: var(--on-dark-72);}
.svc .sec--dark > .container > .p, .svc .sec--dark > .container > .p--fine{color: rgba(255,255,255,.6);}
/* Подписи внутри тёмной формы. Переопределение .p--fine выше задано для
светлых страниц, а в .sec--final оно делает текст нечитаемым (1.08:1).
Здесь селектор не ограничен прямыми детьми: подпись может лежать
внутри