.nav__link.is-current{color:var(--red)}
.page-hero{
  position:relative;overflow:hidden;
  padding:calc(76px + 5.4vw) var(--side) 3.2vw;
  background:linear-gradient(180deg,#F5F7FA 0%,#fff 100%);
}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.page-hero::before{width:30vw;height:30vw;right:6vw;top:-12vw;border:3px solid rgba(232,71,76,.35)}
.page-hero::after{width:22vw;height:22vw;right:-6vw;top:6vw;border:3px solid rgba(29,179,122,.3)}
.crumbs{position:relative;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:1.4vw}
.crumbs a{color:var(--text);transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs svg{width:14px;height:14px}
.page-hero h1{position:relative;font-size:clamp(40px, 3.6vw, 72px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--ink);margin-bottom:1vw}
.page-hero p{position:relative;font-size:clamp(16px, 1.05vw, 20px);line-height:1.6;color:var(--text);max-width:44vw}
/* =========================================================
   TEXT PAGE (універсальний шаблон)
   ========================================================= */
.read-progress{position:fixed;z-index:120;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--green));transition:width .1s linear}
.page-hero--text{padding-bottom:3vw}
.page-hero--text h1{max-width:60vw}
.page-hero--text p{max-width:52vw}
.page-meta{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6vw}
.page-meta span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:19px;background:#fff;box-shadow:0 4px 14px rgba(14,20,32,.06);font-size:14px;font-weight:600;color:var(--text)}
.page-meta svg{width:17px;height:17px;color:var(--green)}
.text-layout{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:3vw;padding:1vw var(--side) 5.2vw;align-items:start}
/* зміст */
.toc{position:sticky;top:120px}
.toc__title{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;display:grid;gap:2px;border-left:2px solid #EEF1F5;counter-reset:toc}
.toc a{
  position:relative;display:block;padding:9px 0 9px 18px;margin-left:-2px;border-left:2px solid transparent;
  font-size:14.5px;font-weight:600;line-height:1.4;color:var(--text);transition:color .2s,border-color .2s
}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--red);border-left-color:var(--red)}
.toc__mobile{display:none}
/* контент */
.prose{min-width:0;max-width:900px;font-size:clamp(16px, 1vw, 18.5px);line-height:1.75;color:var(--text)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px, 1.85vw, 36px);line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin-top:2.2em;scroll-margin-top:120px}
.prose h2:first-child{margin-top:0}
.prose > .toc__mobile:first-child + *{margin-top:0}
.prose h3{font-size:clamp(19px, 1.25vw, 24px);line-height:1.3;font-weight:800;color:var(--ink);margin-top:1.7em;scroll-margin-top:120px}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--red);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--red-dark)}
.prose .prose__lead{font-size:1.15em;line-height:1.65;color:var(--ink)}
.prose ul,.prose ol{padding:0;list-style:none;display:grid;gap:.55em}
.prose ul li{position:relative;padding-left:1.6em}
.prose ul li::before{content:"";position:absolute;left:.25em;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.prose ol{counter-reset:ol}
.prose ol li{position:relative;padding-left:2.4em;counter-increment:ol}
.prose ol li::before{content:counter(ol);position:absolute;left:0;top:.05em;width:1.65em;height:1.65em;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-size:.82em;font-weight:800}
.prose ul.checks li::before{width:20px;height:20px;top:.3em;left:0;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.prose ul.checks li{padding-left:2em}
.prose blockquote{
  position:relative;padding:1.4em 1.6em 1.4em 4.2em;border-radius:20px;background:#F5F7FA;
  font-size:1.08em;line-height:1.6;font-weight:600;color:var(--ink)
}
.prose blockquote::before{content:"“";position:absolute;left:.45em;top:.05em;font-size:3.6em;line-height:1;font-weight:800;color:var(--red)}
.prose blockquote cite{display:block;margin-top:.7em;font-size:.82em;font-style:normal;font-weight:600;color:var(--muted)}
.prose hr{border:0;height:1px;background:#E6EAF0;margin:2.2em 0}
/* виноски */
.note{display:flex;gap:16px;padding:1.2em 1.4em;border-radius:18px;font-size:.95em;line-height:1.6}
.note i{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center}
.note i svg{width:20px;height:20px}
.note b{display:block;color:var(--ink);margin-bottom:2px}
.note--info{background:var(--green-soft)}
.note--info i{background:var(--green);color:#fff}
.note--warn{background:#FFF5E0}
.note--warn i{background:#F5A524;color:#fff}
.note--red{background:var(--red-soft)}
.note--red i{background:var(--red);color:#fff}
/* таблиця */
.table-wrap{overflow-x:auto;border-radius:18px;border:1px solid #E6EAF0}
.prose table{width:100%;border-collapse:collapse;font-size:.92em;min-width:560px}
.prose th{background:#F5F7FA;text-align:left;font-weight:800;color:var(--ink);padding:14px 18px;font-size:.92em}
.prose td{padding:14px 18px;border-top:1px solid #EEF1F5;vertical-align:top}
.prose td:first-child{font-weight:700;color:var(--ink)}
.prose tr:hover td{background:#FAFBFC}
/* зображення */
.prose figure img,.figure-ph{width:100%;border-radius:20px;display:block}
.figure-ph{aspect-ratio:16/8;background:#DDE3EA image-set(url('../img/service-engineer.webp') type('image/webp'), url('../img/service-engineer.jpg') type('image/jpeg')) center 25% / cover no-repeat}
.prose figcaption{margin-top:10px;font-size:.85em;color:var(--muted);text-align:center}
/* кроки */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;counter-reset:st}
.step{position:relative;padding:1.3em 1.4em 1.3em 4.4em;border-radius:18px;background:#fff;border:1px solid #EBEEF3;counter-increment:st;line-height:1.55;font-size:.95em}
.step::before{content:counter(st, decimal-leading-zero);position:absolute;left:1.2em;top:1.15em;font-size:1.3em;font-weight:800;color:var(--red)}
.step b{display:block;color:var(--ink);margin-bottom:3px}
/* документи */
.files{display:grid;gap:10px}
.file{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #EBEEF3;text-decoration:none !important;transition:.2s}
.file:hover{border-color:var(--ink);box-shadow:0 12px 26px rgba(14,20,32,.06)}
.file i{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-style:normal;font-size:12px;font-weight:800}
.file span{flex:1;min-width:0}
.file b{display:block;font-size:.95em;color:var(--ink);line-height:1.35}
.file small{font-size:.8em;color:var(--muted);font-weight:500}
.file em{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:#F3F5F8;color:var(--ink);transition:.2s}
.file em svg{width:18px;height:18px}
.file:hover em{background:var(--red);color:#fff}
/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:#F5F7FA;transition:background .2s}
.faq details[open]{background:#fff;box-shadow:0 0 0 1px #E6EAF0, 0 14px 30px rgba(14,20,32,.05)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:1.05em 1.3em;font-weight:700;color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:#fff;transition:.3s}
.faq details[open] summary i{transform:rotate(45deg);background:var(--red);color:#fff}
.faq summary i svg{width:15px;height:15px}
.faq details p{padding:0 1.3em 1.2em;margin:0;font-size:.95em}
/* шерінг */
.page-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:2.6em;padding-top:1.4em;border-top:1px solid #E6EAF0;font-size:14.5px;color:var(--muted)}
.share{display:flex;align-items:center;gap:8px}
.share button,.share a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#F3F5F8;color:var(--ink);transition:.2s;text-decoration:none !important}
.share button:hover,.share a:hover{background:var(--ink);color:#fff}
.share svg{width:18px;height:18px}
/* права колонка */
.aside{position:sticky;top:120px;display:grid;gap:14px}
.aside-card{padding:24px;border-radius:22px;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.aside-card::before{content:"";position:absolute;width:200px;height:200px;right:-70px;top:-80px;border-radius:50%;border:3px solid rgba(232,71,76,.5)}
.aside-card > *{position:relative}
.aside-card b{display:block;font-size:20px;line-height:1.3;margin-bottom:8px}
.aside-card p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.68);margin-bottom:18px}
.aside-card .btn{width:100%;justify-content:center;height:54px;font-size:15px}
.aside-card__phone{display:block;margin-top:14px;text-align:center;font-size:18px;font-weight:800}
.aside-card .messengers{justify-content:center;margin-top:12px}
.aside-links{padding:20px 22px;border-radius:22px;background:#F5F7FA}
.aside-links__title{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.aside-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #E6EAF0;font-size:15px;font-weight:700;color:var(--ink);transition:color .2s}
.aside-links a:first-of-type{border-top:0}
.aside-links a svg{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.aside-links a:hover{color:var(--red)}
.aside-links a:hover svg{transform:translateX(3px);color:var(--red)}
@media (max-width:1500px){
  .text-layout{grid-template-columns:240px minmax(0,1fr)}
  .aside{grid-column:2;position:static;grid-template-columns:1fr 1fr}
  .page-hero--text h1,.page-hero--text p{max-width:none}
}
@media (max-width:1100px){
  .text-layout{grid-template-columns:1fr;gap:28px}
  .toc{display:none}
  .toc__mobile{display:block}
  .aside{grid-column:auto}
}
@media (max-width:640px){
  .page-hero--text{padding-bottom:24px}
  .page-meta{margin-top:16px;gap:8px}
  .page-meta span{height:34px;padding:0 12px;font-size:12.5px}
  .text-layout{padding:8px var(--side) 48px;gap:20px}
  .toc__mobile{margin-bottom:6px}
  .prose > .toc__mobile:first-child + *{margin-top:16px}
  .toc__mobile summary{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:#F5F7FA;font-weight:800;color:var(--ink);cursor:pointer;list-style:none}
  .toc__mobile summary::-webkit-details-marker{display:none}
  .toc__mobile summary svg{width:16px;height:16px;transition:transform .3s}
  .toc__mobile[open] summary svg{transform:rotate(180deg)}
  .toc__mobile ol{list-style:none;padding:8px 16px 4px;display:grid;gap:2px;counter-reset:m}
  .toc__mobile a{display:block;padding:8px 0;font-size:15px;font-weight:600;color:var(--text)}
  .prose{font-size:16px}
  .prose table{min-width:520px}
  .table-wrap{margin-right:calc(var(--side) * -1);border-radius:16px 0 0 16px;border-right:0}
  .prose blockquote{padding:1.2em 1.2em 1.2em 3.2em;border-radius:16px}
  .prose blockquote::before{left:.3em;font-size:3em}
  .note{padding:1em;gap:12px;border-radius:14px}
  .note i{width:34px;height:34px}
  .steps{grid-template-columns:1fr}
  .figure-ph{aspect-ratio:4/3;border-radius:16px}
  .aside{grid-template-columns:1fr}
  .aside-links{display:none}
}
@media (max-width:1100px) and (min-width:641px){.toc__mobile{display:none}}
@media print{.header,.footer,.cta,.aside,.toc,.read-progress,.share{display:none !important}.text-layout{display:block}}
