/* ================================================================
   Универсальный шаблон УСЛУГИ — TurSite 2026
   Подключается после tursite-2026.css (там токены и компоненты).
   Все блоки опциональны: услуга берёт только нужные.
   ================================================================ */

/* ---------- хлебные крошки ---------- */
.crumbs{padding-block:18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:0 0 4px}
.crumbs a:hover{color:var(--brand)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- переключатель услуг (сохраняем из текущей вёрстки) ---------- */
.svcnav{padding-block:16px;border-bottom:1px solid var(--line)}
.svcnav__scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svcnav__scroll::-webkit-scrollbar{display:none}
.svcnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-full);
  border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink-3);white-space:nowrap;
  transition:all var(--t) var(--e-out)}
.svcnav a:hover{border-color:var(--line-2);color:var(--ink)}
.svcnav a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}

/* ---------- HERO услуги ---------- */
.shero{position:relative;overflow:clip;padding-block:var(--s-8) var(--s-8);border-bottom:1px solid var(--line)}
.shero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.5;
  -webkit-mask-image:radial-gradient(110% 74% at 50% 0,#000 16%,transparent 70%);
  mask-image:radial-gradient(110% 74% at 50% 0,#000 16%,transparent 70%)}
.shero__glow{position:absolute;inset:-30% 0 auto;height:640px;z-index:0;pointer-events:none;filter:blur(70px);opacity:.6;overflow:clip}
.shero__glow span{position:absolute;display:block;border-radius:50%}
.shero__glow span:nth-child(1){width:480px;height:480px;left:58%;top:-90px;background:radial-gradient(circle,rgba(209,58,31,.26),transparent 66%)}
.shero__glow span:nth-child(2){width:420px;height:420px;left:-4%;top:90px;background:radial-gradient(circle,rgba(46,120,160,.14),transparent 66%)}
.shero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--s-8);align-items:center}
@media(max-width:1024px){.shero__in{grid-template-columns:1fr;gap:var(--s-6)}}
.shero h1{margin:16px 0 0;font-size:clamp(28px,4vw,48px)}
.shero h1 .w{display:inline-block;overflow:hidden;vertical-align:top}
.shero h1 .w>span{display:inline-block}
.js-on .shero h1 .w>span{transform:translateY(110%)}
.shero h1 .w.is-in>span{transform:none;transition:transform 880ms var(--e-out) var(--d,0ms)}
.shero__sub{margin-top:20px;max-width:60ch}
.shero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.shero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.shero__pills span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2)}
.shero__pills i{color:var(--brand);font-size:15px}

/* карточка ключевых цифр справа */
.kbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--sh-2)}
@media(max-width:560px){.kbox{padding:var(--s-5) var(--s-4)}}
.kbox__t{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:20px}
.kbox__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kbox__c{padding:18px 16px 18px 0;position:relative}
.kbox__c:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
.kbox__c:nth-child(n+3){border-top:1px solid var(--line);padding-top:20px}
.kbox__c b{display:block;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(26px,2.8vw,36px);line-height:1;color:var(--ink)}
.kbox__c b .u{color:var(--brand)}
.kbox__c span{display:block;margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.4}
.kbox__foot{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--line-2)}
.kbox__foot i{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--brand-50);color:var(--brand);font-size:20px}
.kbox__foot b{display:block;font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--ink)}
.kbox__foot span{font-size:12.5px;color:var(--ink-3)}

/* ---------- ОГЛАВЛЕНИЕ (липкое, для длинных SEO-страниц) ---------- */
.toc{position:sticky;top:var(--header-h,76px);z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}
.toc__in{display:flex;align-items:center;gap:14px;min-height:56px}
.toc__lbl{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);flex:0 0 auto}
@media(max-width:820px){.toc__lbl{display:none}}
.toc__scroll{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.toc__scroll::-webkit-scrollbar{display:none}
.toc__scroll a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-3);white-space:nowrap;position:relative;
  transition:color var(--t-fast) linear,background var(--t-fast) linear}
.toc__scroll a:hover{color:var(--ink);background:var(--surface-2)}
.toc__scroll a.is-active{color:var(--brand);font-weight:600;background:var(--brand-50)}
.toc .btn{flex:0 0 auto}
@media(max-width:700px){.toc .btn{display:none}}

/* ---------- ПРОБЛЕМА → РЕШЕНИЕ ---------- */
.prob{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:820px){.prob{grid-template-columns:1fr}}
.prob__col{padding:28px 26px;border-radius:var(--r-lg);border:1px solid var(--line)}
.prob__col--bad{background:#fff}
.prob__col--good{background:var(--brand-50);border-color:var(--brand-100)}
.prob__col h3{font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:11px}
.prob__col h3 i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:var(--r-sm);font-size:17px}
.prob__col--bad h3 i{background:var(--surface-3);color:var(--ink-3)}
.prob__col--good h3 i{background:var(--brand);color:#fff}
.prob__col li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.5}
.prob__col--good li{border-color:var(--brand-100)}
.prob__col li:last-child{border-bottom:0}
.prob__col li i{font-size:16px;margin-top:2px;flex:0 0 16px}
.prob__col--bad li{color:var(--ink-3)}
.prob__col--bad li i{color:var(--ink-4)}
.prob__col--good li{color:var(--ink-2)}
.prob__col--good li i{color:var(--brand)}

/* ---------- ЧТО ВХОДИТ (bento) ---------- */
.inc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.inc{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.inc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.icell{grid-column:span 2;display:flex;flex-direction:column;gap:10px;padding:24px 22px;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);isolation:isolate;
  transition:transform var(--t-slow) var(--e-out),border-color var(--t) linear,box-shadow var(--t-slow) var(--e-out)}
.icell::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,0%),var(--brand-50),transparent 72%);
  transition:opacity var(--t-slow) var(--e-out)}
.icell:hover{transform:translateY(-4px);border-color:var(--brand-100);box-shadow:var(--sh-3)}
.icell:hover::before{opacity:1}
.icell__i{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--brand-50);color:var(--brand);font-size:22px;
  transition:transform var(--t-slow) var(--e-back),background var(--t) linear,color var(--t) linear}
.icell:hover .icell__i{transform:translateY(-2px) rotate(-6deg) scale(1.05);background:var(--brand);color:#fff}
.icell h3{font-size:16.5px}
.icell p{font-size:14px;color:var(--ink-3);line-height:1.55}
.icell--wide{grid-column:span 3}
@media(max-width:1100px){.icell--wide{grid-column:span 4}}
@media(max-width:700px){.icell,.icell--wide{grid-column:span 2;padding:18px 16px}
  .icell__i{width:40px;height:40px;font-size:19px}
  .icell h3{font-size:15px}}
.icell ul{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.icell li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:13.5px;color:var(--ink-3);line-height:1.45}
.icell li i{color:var(--brand);font-size:15px;margin-top:2px;flex:0 0 15px}

/* ---------- ЭТАПЫ ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:26px}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);border-radius:2px}
.step::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--brand);border-radius:2px;
  transition:width 820ms var(--e-out) var(--d,0ms)}
.step.is-in::after{width:100%}
.step__n{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step__n b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);
  color:var(--brand);font-family:'Manrope',sans-serif;font-weight:800;font-size:13px}
.step__n span{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:14.3px;color:var(--ink-3);line-height:1.55}

/* ---------- ТАРИФЫ ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start;padding-top:14px}
@media(max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--t-slow) var(--e-out),box-shadow var(--t-slow) var(--e-out),border-color var(--t) linear}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.plan--best{border-color:var(--brand);border-width:1.5px;box-shadow:var(--sh-3)}
.plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 13px;
  border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:11px;font-weight:700;box-shadow:var(--sh-brand)}
.plan h3{font-size:18px;margin-bottom:6px}
.plan__for{font-size:13px;color:var(--ink-4);min-height:2.6em;line-height:1.35}
.plan__price{margin:16px 0 4px}
.plan__price b{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(24px,2.4vw,30px);
  color:var(--ink);letter-spacing:-.035em;line-height:1}
.plan__note{font-size:12px;color:var(--ink-4);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.plan__list{flex:1;margin-bottom:20px}
.plan__list li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:13.8px;color:var(--ink-2);line-height:1.45}
.plan__list i{color:var(--brand);font-size:15px;margin-top:2px;flex:0 0 15px}
.plan .btn{width:100%;justify-content:center}

/* матрица сравнения */
.matrix{margin-top:var(--s-6)}
.matrix__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:var(--s-4)}
.matrix__head h3{font-size:18px}
.matrix__wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.matrix__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:70vh;overflow-y:auto}
.matrix table{width:100%;border-collapse:collapse;min-width:640px}
.matrix th,.matrix td{padding:12px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
.matrix thead th{position:sticky;top:0;z-index:3;background:var(--deep);color:#fff;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:14px;border-bottom:0;text-align:center}
.matrix thead th:first-child{text-align:left}
.matrix thead th span{display:block;margin-top:3px;font-size:12px;font-weight:500;color:#a9b4bf}
.matrix tbody th{font-weight:400;color:var(--ink-2);background:var(--surface-2);width:44%;min-width:270px;
  position:sticky;left:0;z-index:2}
.matrix tbody td{text-align:center;color:var(--ink-2)}
.matrix tbody tr:hover th{background:var(--surface-3)}
.matrix tbody tr:hover td{background:var(--surface-2)}
.matrix .y{color:#0f7a4d;font-weight:600}
.matrix .n{color:var(--ink-4)}
.matrix__hint{display:none;padding:11px 16px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:12.5px;color:var(--ink-4);align-items:center;gap:8px}
@media(max-width:820px){.matrix__hint{display:flex}}

/* ---------- РЕЗУЛЬТАТ ---------- */
.res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:1000px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.res{grid-template-columns:1fr}}
.res__i{padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--t-slow) var(--e-out),border-color var(--t) linear}
.res__i:hover{transform:translateY(-4px);border-color:var(--brand-100)}
.res__i i{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--brand-50);color:var(--brand);font-size:22px;margin-bottom:16px}
.res__i h3{font-size:16.5px;margin-bottom:9px}
.res__i p{font-size:14px;color:var(--ink-3);line-height:1.55}

/* ---------- CTA-полоса посреди страницы ---------- */
.cta{position:relative;overflow:hidden;background:var(--deep);border-radius:var(--r-xl);padding:var(--s-7) var(--s-6);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5);align-items:center}
.cta::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:radial-gradient(560px 260px at 8% 0%,rgba(209,58,31,.42),transparent 62%),
             radial-gradient(500px 240px at 92% 100%,rgba(46,120,160,.3),transparent 62%)}
.cta>*{position:relative}
.cta h2{color:#fff;font-size:clamp(22px,2.4vw,30px)}
.cta p{margin-top:12px;color:#a9b4bf;max-width:56ch}
@media(max-width:860px){.cta{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}}

/* ---------- ДРУГИЕ УСЛУГИ (перелинковка) ---------- */
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rel{grid-template-columns:1fr}}
.rel__i{display:flex;flex-direction:column;gap:10px;padding:22px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);transition:transform var(--t-slow) var(--e-out),border-color var(--t) linear}
.rel__i:hover{transform:translateY(-4px);border-color:var(--brand)}
.rel__i i{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--brand-50);color:var(--brand);font-size:19px;
  transition:background var(--t) linear,color var(--t) linear}
.rel__i:hover i{background:var(--brand);color:#fff}
.rel__i h3{font-size:15.5px}
.rel__i p{font-size:13.3px;color:var(--ink-3);line-height:1.45;flex:1}
.rel__i span{font-size:13.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq__i{border-bottom:1px solid var(--line)}
.faq__btn{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:16px;
  min-height:66px;padding:16px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(15.5px,1.4vw,17.5px);color:var(--ink);
  line-height:1.35;letter-spacing:-.015em;transition:color var(--t-fast) linear,padding-left var(--t) var(--e-out)}
.faq__i:hover .faq__btn{color:var(--brand);padding-left:8px}
.faq__sign{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;justify-self:end;
  border:1px solid var(--line-2);color:var(--ink-3);font-size:18px;
  transition:transform var(--t) var(--e-back),background var(--t) linear,color var(--t) linear,border-color var(--t) linear}
.faq__i:hover .faq__sign{border-color:var(--brand);color:var(--brand)}
.faq__btn[aria-expanded="true"] .faq__sign{background:var(--brand);border-color:var(--brand);color:#fff;transform:rotate(45deg)}
.faq__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows 440ms var(--e-out)}
.faq__btn[aria-expanded="true"]+.faq__p{grid-template-rows:1fr}
.faq__p>div{overflow:hidden}
.faq__p p{padding:0 52px 22px 0;font-size:15px;color:var(--ink-3);line-height:1.68;max-width:72ch}

/* ---------- проза внутри секций ---------- */
.prose{max-width:70ch}
.prose p{margin-bottom:16px;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}