/* Некритичний CSS теми. Вантажиться без блокування рендера (див. inc/assets.php). */

.wl-wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ── доступність ── */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ── крихти ──
   Мова хедера: піл-лінки, як у меню й перемикачі мов, а роздільник — крапка,
   остання (перед поточною сторінкою) помаранчева, як крапка в лого «web · lift».
   Ліворуч пілюлі компенсуємо від'ємним відступом ol, щоб перша крихта стояла
   рівно по краю контенту, а не на 11 px правіше. */
.wl-crumbs{margin:26px 0 22px;font-family:var(--f-ui);font-size:13px;line-height:1.2;color:var(--fog)}
.wl-crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0 0 0 -11px;padding:0}
.wl-crumbs li{display:flex;align-items:center;min-width:0}
.wl-crumbs li+li::before{content:"";flex:0 0 auto;width:4px;height:4px;margin:0 5px;border-radius:50%;background:var(--stone)}
.wl-crumbs li:last-child::before{background:var(--orange)}
.wl-crumbs a{display:block;padding:6px 11px;border-radius:9999px;color:var(--muted);font-weight:500;
letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.wl-crumbs a:hover{background:#EFEDE3;color:var(--ink)}
.wl-crumbs [aria-current]{padding:6px 11px;color:var(--ink);font-weight:600;letter-spacing:.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  /* Ланцюжок із 4 рівнів на 360 px ламався на три рядки. Той самий прийом, що
     й у табів портфоліо: один рядок із горизонтальним скролом край-в-край. */
  .wl-crumbs{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
  .wl-crumbs ol{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0;padding:0 var(--pad) 0 calc(var(--pad) - 11px)}
  .wl-crumbs ol::-webkit-scrollbar{display:none}
  .wl-crumbs li{flex:0 0 auto}
}

/* ── типографіка сторінки ── */
.wl-page__title,.wl-article__title{font-size:clamp(32px,5vw,60px);margin:0 0 20px}
.wl-article__meta{color:var(--fog);font-size:14px;margin:0 0 24px}
.wl-article__cover{margin:0 0 32px}
.wl-article__cover img{border-radius:12px;display:block}

.wl-prose{max-width:760px}
.wl-prose p,.wl-prose li{font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:#1c1c1c}
.wl-prose h2{font-size:clamp(24px,3vw,36px);margin:44px 0 14px}
.wl-prose h3, .wl-prose .wl-cardt{font-size:clamp(20px,2.2vw,26px);margin:32px 0 10px}
.wl-prose a{color:var(--ink);text-underline-offset:3px}
.wl-prose img{border-radius:10px}
.wl-prose table{width:100%;border-collapse:collapse;font-size:15px}
.wl-prose th,.wl-prose td{border:1px solid var(--stone);padding:10px 12px;text-align:left}

/* ── список записів ── */
.wl-postlist{list-style:none;margin:0;padding:0;display:grid;gap:28px;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.wl-postlist__title{font-size:22px;margin:0 0 8px}
.wl-postlist__title a{text-decoration:none}
.wl-postlist__item time{font-size:13px;color:var(--fog)}

/* ── кнопка ── */
.wl-btn{display:inline-flex;align-items:center;background:var(--ink);color:#fff;
text-decoration:none;font-weight:600;padding:13px 22px;border-radius:4px}

/* ── 404 ── */
.wl-404{padding:80px 0 120px;text-align:center}
.wl-404 h1{font-size:clamp(64px,14vw,160px);margin:0 0 8px}

/* ── футер ── */
.wl-footer{border-top:1px solid var(--stone);margin-top:80px;padding:48px 0}
.wl-footer__inner{max-width:1280px;margin:0 auto;padding:0 var(--pad);
display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.wl-footer__nav{margin-left:auto}
.wl-footer__nav ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0;padding:0}
.wl-footer__nav a{text-decoration:none;color:var(--muted);font-size:15px}
.wl-footer__copy{width:100%;margin:0;color:var(--fog);font-size:13px}

/* ── пагінація ── */
.pagination{margin:48px 0;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:38px;height:38px;padding:0 10px;border:1px solid var(--stone);
border-radius:4px;text-decoration:none;font-size:14px}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ── попап замовлення ──
   Портовано з CS#142. Шрифти: у сніпеті стоять "Figtree" і "EB Garamond",
   яких сайт ніде не вантажить, тож на бою це system-ui і Georgia. Лишаємо
   ту саму пару явно — щоб попап виглядав як на бою, а не як інший компонент. */
.wlop-back{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s}
.wlop-back.open{opacity:1;visibility:visible;pointer-events:auto}
.wlop{position:relative;width:100%;max-width:452px;background:var(--cream);border:1px solid #E7E4D8;border-radius:26px;
  padding:38px 34px 32px;box-shadow:0 40px 90px rgba(10,10,10,.28);
  transform:translateY(22px) scale(.97);opacity:0;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s ease;
  font-family:var(--f-ui);color:var(--ink);max-height:calc(100dvh - 48px);overflow:auto}
.wlop-back.open .wlop{transform:none;opacity:1}
.wlop-x{position:absolute;top:16px;right:16px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--ink);transition:background .18s}
.wlop-x:hover{background:#EFEDE3}
.wlop-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.wlop-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#7c7c72;font-weight:600;margin-bottom:10px}
.wlop h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(27px,6vw,32px);line-height:1.02;
  letter-spacing:-.02em;margin:0 0 6px}
.wlop-sub{font-size:14.5px;line-height:1.5;color:#5c5c56;margin:0 0 20px}
.wlop-svc{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #EDE9DC;border-radius:16px;padding:13px 16px;margin-bottom:22px}
.wlop-svc .l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7c7c72;font-weight:600}
.wlop-svc .v{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:600;line-height:1.15;color:var(--ink)}
.wlop-svc .v::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);
  margin-right:9px;vertical-align:middle;transform:translateY(-2px)}
.wlop-field{margin-bottom:14px}
.wlop-field label{display:block;font-size:13px;font-weight:600;color:#3a3a36;margin-bottom:7px;letter-spacing:.01em}
.wlop-field input{width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #E3E0D3;border-radius:13px;padding:14px 16px;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
.wlop-field input::placeholder{color:#8f8c81}
.wlop-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,119,34,.26)}
.wlop-field input:user-invalid{border-color:#c0392b}
.wlop-submit{position:relative;width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--ink);color:var(--cream);font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:16px 24px;border:0;border-radius:13px;cursor:pointer;transition:transform .12s}
.wlop-submit::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:0;transform:translateY(101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1)}
.wlop-submit:hover::before{transform:translateY(0)}
.wlop-submit span{position:relative;z-index:1}
.wlop-submit:active{transform:translateY(1px)}
.wlop-submit[disabled]{opacity:.6;cursor:default}
.wlop-submit[disabled]::before{transform:translateY(101%)}
.wlop-note{margin:14px 0 0;font-size:12px;line-height:1.45;color:#7c7a70;text-align:center}
.wlop-msg{margin-top:14px;font-size:14px;line-height:1.45;border-radius:12px;padding:0;max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease}
.wlop-msg.show{max-height:200px;padding:13px 16px}
.wlop-msg.ok{background:#eaf6ee;color:#1c6b3a}
.wlop-msg.err{background:#fdeceb;color:#a32b21}
.wlop-hide{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:520px){
  .wlop-back{padding:0;align-items:flex-end}
  .wlop{max-width:none;border-radius:24px 24px 0 0;padding:30px 22px 26px;max-height:92dvh;
    transform:translateY(100%);transition:transform .44s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  .wlop-back.open .wlop{transform:none}
  .wlop::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:4px;
    border-radius:99px;background:#DEDACD}
}
@media(prefers-reduced-motion:reduce){.wlop-back,.wlop{transition:opacity .2s ease,visibility .2s}}

.wl-search{display:flex;gap:10px;max-width:560px;margin:0 0 32px}
.wl-search input{flex:1;min-width:0;padding:12px 16px;border:1px solid #E8E6DC;border-radius:12px;background:#fff;font:inherit}

/* ── крихти над тілом ──
   Раніше було margin:18px 0 0 — знизу нуль, і крихти впиралися в герой
   сторінки. Відступи тепер на самій смузі, симетрично зверху й знизу. */
/* Тільки вертикальні відступи: скорочене padding затерло б бокові у .wl-wrap
   і смуга поїхала б лівіше за решту контенту сторінки. */
.wl-crumbs-bar{padding-top:14px;padding-bottom:16px}
.wl-crumbs-bar .wl-crumbs{margin:0}
@media(max-width:700px){.wl-crumbs-bar{padding-top:10px;padding-bottom:12px}
  /* .wl-crumbs-bar .wl-crumbs специфічніший за базовий блок — виліт край-в-край повторюємо тут. */
  .wl-crumbs-bar .wl-crumbs{margin:0 calc(var(--pad)*-1)}}

/* ── поглиблений контент сервісних сторінок ── */
.wl-deep{padding:56px 0 8px}
.wl-deep-in{max-width:900px}
.wl-deep h2{font-family:'Parkinsans',sans-serif;font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.15;margin:0 0 18px;color:var(--ink)}
.wl-deep h3, .wl-deep .wl-cardt{font-family:'Parkinsans',sans-serif;font-weight:600;font-size:clamp(19px,2vw,24px);letter-spacing:-.01em;margin:26px 0 10px;color:var(--ink)}
.wl-deep p{font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 14px;max-width:72ch}
.wl-deep p b{color:var(--ink)}
.wl-deep ul{margin:0 0 18px;padding:0;list-style:none;max-width:72ch}
.wl-deep li{position:relative;padding-left:26px;margin:0 0 9px;font-size:16.5px;line-height:1.6;color:var(--muted)}
.wl-deep li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--orange)}
.wl-deep a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
/* ── картки «Приклади робіт» ──
   Три однакові білі прямокутники без жодного акценту читались як службова
   врізка, а не як портфоліо. Ритм дають дві речі, і жодна не потребує
   правок у 6 тілах сторінок:

   1. Помаранчева риска 28×3 — та сама мова, що й маркери списків вище на
      сторінці (`.wl-deep li::before`), тож блок не виглядає чужим.
   2. Порядковий номер через CSS-лічильник. Розмітка лишається трьома
      `<div class="wl-case">`, номер малює ::after.

   🔴 Картки НЕ посилання (на /keysy/ немає прив'язок до окремих кейсів —
   грід малює JS), тому тут навмисно немає ні підйому на ховері, ні курсора
   pointer: обіцяти перехід, якого не буде, гірше за нейтральну картку.

   🔑 Опис переведено з --fog на --muted: .56 на білому дає 4.52:1 — рівно
   на межі норми 4.5:1, .72 дає 8.2:1. */
.wl-deep .wl-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;margin:16px 0 26px;counter-reset:wlcase}
.wl-deep .wl-case{counter-increment:wlcase;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--stone);border-radius:18px;padding:24px 24px 26px;
  box-shadow:0 1px 3px rgba(10,10,10,.04)}
.wl-deep .wl-case::before{content:"";display:block;width:28px;height:3px;border-radius:2px;
  background:var(--orange);margin:0 0 16px}
.wl-deep .wl-case::after{content:counter(wlcase,decimal-leading-zero);position:absolute;
  top:16px;right:20px;font-family:var(--f-disp);font-weight:600;font-size:34px;line-height:1;
  letter-spacing:-.03em;color:rgba(255,119,34,.16);pointer-events:none}
.wl-deep .wl-case b{display:block;font-family:var(--f-disp);font-weight:600;font-size:23px;
  line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 9px;padding-right:46px}
.wl-deep .wl-case span{display:block;font-size:15px;line-height:1.6;color:var(--muted)}
.wl-deep .wl-case span a{font-weight:600}
@media (max-width:600px){
  .wl-deep .wl-cases{gap:14px}
  .wl-deep .wl-case{padding:20px 20px 22px;border-radius:16px}
  .wl-deep .wl-case::after{font-size:30px;top:14px;right:16px}
}

/* ── FAQ: details/summary ── */
.wl-faq{max-width:900px;border-bottom:1px solid #E8E6DC;margin:0 0 20px}
.wl-q{border-top:1px solid #E8E6DC}
.wl-q summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-family:'Parkinsans',sans-serif;font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--ink)}
.wl-q summary::-webkit-details-marker{display:none}
.wl-q summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--orange);transition:transform .3s}
.wl-q[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.wl-q .a{padding:0 0 20px;color:var(--muted);font-size:16px;line-height:1.65;max-width:72ch}
.wl-q .a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* ── повʼязані сторінки ── */
.wl-rel{padding:40px 0 24px}
.wl-rel-h{font-family:'Parkinsans',sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.wl-rel-p{font-size:16px;line-height:1.6;color:var(--fog);margin:0 0 20px;max-width:70ch}
.wl-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.wl-rel-card{display:block;background:#FBF9EF;border:1px solid #E8E6DC;border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.wl-rel-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.wl-rel-card b{display:block;font-family:'Parkinsans',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em}
.wl-rel-card span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--fog)}
.wl-rel--chips .wl-rel-grid{display:flex;flex-wrap:wrap;gap:8px}
.wl-rel--chips .wl-rel-card{padding:9px 14px;border-radius:999px;font-size:15px}
.wl-rel--chips .wl-rel-card b{font-size:15px;font-weight:500}
.wl-rel--in{padding:28px 0 8px}

/* Питання FAQ — H2 всередині <summary> (спека це дозволяє: одне заголовне
   вкладення). Так один блок закриває і схему FAQPage, і питання-підзаголовки
   для аналізаторів. Знімаємо з h2 типографіку .wl-deep h2, стиль дає summary. */
.wl-q summary h2{display:inline;font:inherit;letter-spacing:inherit;color:inherit;margin:0}
/* питання FAQ — h3 всередині summary, вигляд успадкований від summary */
.wl-q summary h3,.wla-q summary h3{display:inline;font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
/* промо-попап «Лендінг + Telegram-бот»: ліворуч пропозиція, праворуч форма.
   Візуальна мова та сама, що в попапі замовлення — кремова картка, Georgia в
   заголовку, помаранчевий акцент; відрізняється лише темна панель оферу. */
.wlpr-back{position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s}
.wlpr-back.open{opacity:1;visibility:visible;pointer-events:auto}
.wlpr{position:relative;width:100%;max-width:840px;display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--cream);border:1px solid #E7E4D8;border-radius:26px;overflow:hidden;
  box-shadow:0 40px 90px rgba(10,10,10,.28);font-family:var(--f-ui);color:var(--ink);
  transform:translateY(22px) scale(.97);opacity:0;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s ease;
  max-height:calc(100dvh - 48px)}
.wlpr-back.open .wlpr{transform:none;opacity:1}
.wlpr:focus{outline:none}
.wlpr-x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);border:0;border-radius:50%;cursor:pointer;color:var(--ink);transition:background .18s}
.wlpr-x:hover{background:#fff}
.wlpr-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.wlpr-offer{background:var(--ink);color:#fff;padding:34px 30px;overflow:auto}
.wlpr-badge{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--orange);border-radius:999px;padding:6px 12px;margin-bottom:14px}
.wlpr-offer h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(25px,3.4vw,31px);
  line-height:1.05;letter-spacing:-.02em;margin:0 0 8px;color:#fff}
.wlpr-sub{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 18px}
.wlpr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.wlpr-price .old{font-size:17px;color:rgba(255,255,255,.45);text-decoration:line-through}
.wlpr-price .new{font-family:Georgia,"Times New Roman",serif;font-size:40px;font-weight:600;line-height:1;color:var(--orange)}
.wlpr-price .term{flex:1 0 100%;font-size:12.5px;color:rgba(255,255,255,.6)}
.wlpr-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.wlpr-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.86)}
.wlpr-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.wlpr-more{display:inline-block;font-size:13px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);
  text-decoration:none;transition:border-color .18s}
.wlpr-more:hover{border-color:var(--orange)}
.wlpr-form{padding:34px 30px;overflow:auto;display:flex;flex-direction:column;justify-content:center}
.wlpr-field{margin-bottom:14px}
.wlpr-field label{display:block;font-size:13px;font-weight:600;color:#3a3a36;margin-bottom:7px}
.wlpr-field input{width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #E3E0D3;border-radius:13px;padding:14px 16px;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
.wlpr-field input::placeholder{color:#8f8c81}
.wlpr-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,119,34,.26)}
.wlpr-field input:user-invalid{border-color:#c0392b}
.wlpr-hide{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.wlpr-submit{position:relative;width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--ink);color:var(--cream);font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:16px 24px;border:0;border-radius:13px;cursor:pointer;transition:transform .12s}
.wlpr-submit::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:0;transform:translateY(101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1)}
.wlpr-submit:hover::before{transform:translateY(0)}
.wlpr-submit span{position:relative;z-index:1}
.wlpr-submit[disabled]{opacity:.6;cursor:default}
.wlpr-submit[disabled]::before{transform:translateY(101%)}
.wlpr-note{margin:13px 0 0;font-size:12px;line-height:1.45;color:#7c7a70;text-align:center}
.wlpr-msg{margin-top:13px;font-size:14px;line-height:1.45;border-radius:12px;padding:0;max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease}
.wlpr-msg.show{padding:12px 14px;max-height:140px}
.wlpr-msg.ok{background:#EAF6EC;color:#1e6b32}
.wlpr-msg.err{background:#FBEAE7;color:#a53527}
.wlpr-limit{margin:-8px 0 16px;font-size:12.5px;font-weight:600;color:var(--orange)}
.wlpr-proof{margin:12px 0 0;font-size:12.5px;color:rgba(255,255,255,.6)}
.wlpr-alt{margin:12px 0 0;font-size:13px;color:#5c5c56;text-align:center}
.wlpr-alt a{color:var(--ink);font-weight:600;text-decoration:underline}
.wlpr-decline{display:block;margin:10px auto 0;background:none;border:0;padding:6px 8px;cursor:pointer;
  font:inherit;font-size:13px;color:#8a887e;text-decoration:underline}
.wlpr-decline:hover{color:var(--ink)}
.wlpr-legal{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:#8a887e;text-align:center}
.wlpr-legal a{color:#5c5c56;text-decoration:underline}
/* Мобайл — шторка знизу, а не майже повноекранна модалка: і Google до таких
   інтерстишалів прискіпливий, і закрити її пальцем простіше. Висота обмежена
   78 % екрана, тож під нею завжди видно сторінку. */
@media (max-width:760px){
  .wlpr-back{align-items:flex-end;padding:0}
  .wlpr{grid-template-columns:1fr;max-width:none;border-radius:22px 22px 0 0;border-bottom:0;
    max-height:78dvh;transform:translateY(100%) scale(1);transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  .wlpr-back.open .wlpr{transform:none}
  .wlpr-offer{padding:24px 20px 20px}
  .wlpr-price .new{font-size:32px}
  .wlpr-list{gap:7px}
  .wlpr-list li{font-size:13px}
  .wlpr-form{padding:20px 20px 26px}
  .wlpr-x{top:10px;right:10px}
}
/* банер згоди на куки — показується тільки відвідувачам з ЄЕЗ/Британії */
/* 🔴 `display:flex` нижче б'є браузерне `[hidden]{display:none}` за
   специфічністю. Без цього рядка банер лишався в потоці для ВСІХ (прозорий,
   бо без .show) і на телефоні своїм прямокутником перехоплював тапи по
   віджету звʼязку в правому нижньому куті. */
.wlcb[hidden]{display:none}
.wlcb:not(.show){pointer-events:none}
.wlcb{position:fixed;left:16px;right:16px;bottom:16px;z-index:99950;max-width:720px;margin:0 auto;
display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
padding:16px 18px;border-radius:16px;background:var(--ink,#0a0a0a);color:#fff;
box-shadow:0 18px 46px rgba(0,0,0,.28);opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s}
.wlcb.show{opacity:1;transform:none}
.wlcb-t{margin:0;flex:1 1 320px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}
.wlcb-t a{color:#fff;text-decoration:underline}
.wlcb-b{display:flex;gap:10px;flex:0 0 auto}
.wlcb button{cursor:pointer;border-radius:10px;font:600 14px/1 inherit;padding:11px 16px;border:1px solid transparent}
.wlcb-no{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.wlcb-no:hover{border-color:rgba(255,255,255,.6)}
.wlcb-yes{background:var(--orange,#ff6a13);color:#fff}
.wlcb-yes:hover{filter:brightness(1.06)}
@media (max-width:520px){.wlcb{left:10px;right:10px;bottom:10px;padding:14px}.wlcb-b{width:100%}.wlcb button{flex:1}}
/* Блоки, що були div-сітками, стали справжніми списками. Маркери й службові
   відступи прибрані; li прозорий для розкладки, щоб flex/grid-елементом
   лишалась сама картка, а не обгортка. */
.wl-hero-trust,.wl-svclist,.wl-rel-grid{list-style:none;padding:0}
.wl-hero-trust>li,.wl-rel-grid>li{display:contents}
.wl-svclist>li{list-style:none}

/* ══════════════════════════════════════════════════════════════
   СУМІСНІСТЬ СПІЛЬНИХ БЛОКІВ ЗІ СТОРІНКОВИМИ СТИЛЯМИ

   Блоки .wl-deep / .wl-faq / .wl-rel лежать усередині сторінкових
   обгорток (.wlr, .wla, .wind, .wgeo, .wlk, .wlse …). Їхня геометрія
   гинула на 132 тілах сторінок із двох причин одразу:

   1. Кожен сторінковий CSS має скидання `.wlX *{margin:0;padding:0}`.
      Специфічність (0,1,0) така сама, як в однокласових правил вище,
      а сторінковий файл підключається пізніше — отже вигравав він.
   2. `.wl-deep{padding:56px 0 8px}` і `.wl-rel{padding:40px 0 24px}`
      записані скорочено. Скорочений padding обнуляє й бокові поля,
      які дає `.wl-wrap`, бо ці правила стоять у файлі нижче за нього.

   Наслідок на екрані: секції злипались одна з одною і виїжджали
   в лівий край вікна, впритул до рамки.

   Нижче ті самі значення, але з подвоєним класом (0,2,0) — скидання
   до них уже не дістає — і з вертикальним longhand, щоб бокові поля
   від .wl-wrap лишались живими.

   🔴 Головні сторінки (.wl) свідомо йдуть край-у-край, тому в
   holovna.css / ru.css / en.css їхній `.wl .wl-wrap{max-width:none}`
   має ту саму специфічність і підключається пізніше — він виграє.
   ══════════════════════════════════════════════════════════════ */
.wl-wrap.wl-wrap{max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:var(--pad,15px);padding-right:var(--pad,15px)}
.wl-deep.wl-deep{padding-top:56px;padding-bottom:8px}
.wl-rel.wl-rel{padding-top:40px;padding-bottom:24px}
.wl-rel--in.wl-rel--in{padding-top:28px;padding-bottom:8px}
.wl-rel-h.wl-rel-h{margin:0 0 8px}
.wl-rel-p.wl-rel-p{margin:0 0 20px}
.wl-rel-card.wl-rel-card{padding:16px 18px}
.wl-rel--chips .wl-rel-card.wl-rel-card{padding:9px 14px}
.wl-faq.wl-faq{margin:0 0 20px}
.wl-q.wl-q summary{padding:18px 40px 18px 0}
.wl-q.wl-q .a{padding:0 0 20px}

/* підписи плиток: були h3, стали <b class=wl-cardt> — вигляд той самий */
.wl-cardt{display:block;font:inherit}

/* ── вбудована форма заявки в кінці статті (inc/lead-inline.php) ──
   Живе в потоці сторінки, а не поверх неї: задача — прибрати клік, який
   відкривав попап, бо саме він і був вузьким місцем (4,2% відкриттів проти
   75% відправок із відкритого). Вигляд свідомо тихіший за попап: це
   продовження статті, а не банер. */
.wlil{margin:56px auto 8px;max-width:1280px;padding-left:var(--pad);padding-right:var(--pad);box-sizing:border-box}
/* 🔴 Тло картки = тло сторінки (обидва --cream), тож самої лише світлої
   межі мало: на екрані блок зливався зі статтею й читався як ще один абзац.
   Форму, яку не видно, не заповнюють — тримаємо її карткою: темніша межа
   плюс мʼяка тінь-підйом. */
.wlil-box{background:var(--cream);border:1px solid #D8D3C2;border-radius:26px;padding:34px 32px;
  box-shadow:0 10px 30px rgba(10,10,10,.07)}
.wlil-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.wlil h2{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em}
.wlil-sub{margin:0 0 22px;max-width:62ch;font-size:15px;line-height:1.6;color:#5a584f}
.wlil-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wlil-field label{display:block;font-size:13px;font-weight:600;color:#3a3a36;margin-bottom:7px;letter-spacing:.01em}
.wlil-field input{width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  padding:14px 16px;border:1px solid #DCD8CA;border-radius:13px;transition:border-color .15s,box-shadow .15s}
.wlil-field input::placeholder{color:#8f8c81}
.wlil-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,119,34,.26)}
.wlil-field input:user-invalid{border-color:#c0392b}
.wlil-hide{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wlil-submit{position:relative;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--ink);color:var(--cream);font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:16px 34px;border:0;border-radius:13px;cursor:pointer;transition:transform .12s}
.wlil-submit::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:0;transform:translateY(101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1)}
.wlil-submit:hover::before{transform:translateY(0)}
.wlil-submit span{position:relative;z-index:1}
.wlil-submit:active{transform:translateY(1px)}
.wlil-submit[disabled]{opacity:.6;cursor:default}
.wlil-submit[disabled]::before{transform:translateY(101%)}
.wlil-note{margin:14px 0 0;font-size:12px;line-height:1.45;color:#7c7a70}
.wlil-msg{margin-top:14px;font-size:14px;line-height:1.45;border-radius:12px;padding:0;max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease}
.wlil-msg.show{max-height:200px;padding:13px 16px}
.wlil-msg.ok{background:#eaf6ee;color:#1c6b3a}
.wlil-msg.err{background:#fdecea;color:#a32d20}

@media (max-width:680px){
  .wlil{margin-top:40px}
  .wlil-box{padding:26px 20px;border-radius:20px}
  /* На вузькому екрані поля в один стовпчик: два поля по 150 px ламають
     плейсхолдер «+380 … або ви@пошта.com» на середині. */
  .wlil-row{grid-template-columns:1fr}
  .wlil-submit{width:100%}
}

/* ── фонова картинка темних CTA-блоків ──
   Одне правило замість 16 правок по сторінкових файлах: блоки вже однакові
   (`background:var(--ink);border-radius:24px`), різняться лише префіксом.

   .wlp-cta (портфоліо) і .wls-cta (послуги) тут ВІДСУТНІ свідомо — у них
   свої фотографії, покладені тим самим прийомом ще раніше.

   🔑 Шар кладемо в ::before з z-index:-2 — це домашній прийом теми, так
   зроблено в тих двох блоках. Помаранчевий радіальний ::after лишається
   вище (z-index:-1), тобто світиться поверх картинки, як і раніше.

   🔴 Чому ::before, а не background-image: сторінкові CSS ставлять
   `background:var(--ink)` СКОРОЧЕНИМ записом, а він скидає background-image
   у none. Псевдоелемент під це не потрапляє.

   🔴 Чому правило у wl.css, а не в chrome.css: chrome.css і CSS сторінок
   тема інлайнить у <head> (`wl_css_inline`), а інлайнер URL не переписує —
   відносний шлях рахувався б від адреси СТОРІНКИ і ламався. wl.css
   лишається окремим файлом, тож `../img/` веде куди треба і на бої, і на
   стенді.

   🔴 Чому дві кутові картинки, а не одна повнокадрова. Блоки мають дуже
   різні пропорції: широка смуга 1280×300 на десктопі й майже квадрат
   520×470 на телефоні. `cover` кадрує кожну по-своєму, і форми, що добре
   стояли на широкій, на вузькій зрізало повністю — лишався чорний центр.
   Декалі прив'язані до кутів і масштабуються від ВИСОТИ блока (`auto NN%`),
   тож композиція тримається за будь-яких пропорцій, а центр, де лежить
   білий заголовок, лишається чистим. Контраст заголовка виміряно: 14–17:1
   на 1440 px і на 390 px. */
.wla-cta,.wind-cta,.wgeo-cta,.wlnk-cta,.wlb-cta,.wlhs-cta,.wlk-cta,.wlga-cta,.wlm-cta,.wlr-cta,.wlt-cta,.wih-cta,.wlse-cta,.wltr-cta,.wlw-cta,.wlps-cta{position:relative;isolation:isolate;overflow:hidden}
.wla-cta::before,.wind-cta::before,.wgeo-cta::before,.wlnk-cta::before,.wlb-cta::before,
.wlhs-cta::before,.wlk-cta::before,.wlga-cta::before,.wlm-cta::before,.wlr-cta::before,
.wlt-cta::before,.wih-cta::before,.wlse-cta::before,.wltr-cta::before,.wlw-cta::before,
.wlps-cta::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    url(../img/cta-star-b.webp) right -96px top -104px / 340px auto no-repeat,
    url(../img/cta-star-a.webp) left -86px bottom -118px / 390px auto no-repeat}

/* 🔴 Відсотки в background-position НЕ є зсувом від краю: браузер суміщає
   точку N% картинки з точкою N% контейнера. З великими декалями це тягло їх
   у центр блока — просто під заголовок. Тому зсуви в пікселях, а розмір —
   фіксований: так композиція передбачувана на будь-яких пропорціях.
   На телефоні блок удвічі вужчий, тож декалі теж меншають. */
@media (max-width:700px){
  .wla-cta::before,.wind-cta::before,.wgeo-cta::before,.wlnk-cta::before,.wlb-cta::before,
  .wlhs-cta::before,.wlk-cta::before,.wlga-cta::before,.wlm-cta::before,.wlr-cta::before,
  .wlt-cta::before,.wih-cta::before,.wlse-cta::before,.wltr-cta::before,.wlw-cta::before,
  .wlps-cta::before{
    background:
      url(../img/cta-star-b.webp) right -64px top -72px / 210px auto no-repeat,
      url(../img/cta-star-a.webp) left -58px bottom -80px / 235px auto no-repeat}
}
/* 🔴 .wla-cta вужчий за решту (max-width:760px), і декалі того самого
   розміру заходили просто під підзаголовок — виміряний контраст падав до
   3.1:1 при нормі 4.5:1. Тут вони менші й відсунуті далі за край.
   Клас найчастіший на сайті (58 сторінок), тож окреме правило виправдане. */
.wla-cta::before{
  background:
    url(../img/cta-star-b.webp) right -132px top -118px / 250px auto no-repeat,
    url(../img/cta-star-a.webp) left -134px bottom -128px / 265px auto no-repeat}

/* ── зірочка-мітка: пласка заливка → 3D-тіло ──
   Контур той самий, що й був у SVG (216×225) — його ж і витягнуто в
   Blender (scripts: aster.py), тож мітка лишилась впізнаваною, змінилась
   лише подача: товщина, фаска й матеріал замість плоскої заливки.

   🔑 Розмітку не чіпаємо. На 51 сторінці стоїть інлайновий <svg> з одним
   <path fill="#FF7722">. Ховаємо шлях і вішаємо картинку тлом на сам <svg>
   — елемент приймає CSS-фон, як будь-який інший. Це 19 класів-префіксів
   одного й того самого орнаменту.

   🔑 Правило саме у wl.css, бо chrome.css і CSS сторінок тема інлайнить у
   <head>, а інлайнер не переписує url() — відносний шлях там ламається. */
.aster,.wl-aster,.wl-ov-aster,.wlb-aster,.wlc-aster,.wlga-aster,
.wlhs-aster,.wlk-aster,.wlm-aster,.wlnk-aster,.wlp-aster,.wlps-aster,
.wlr-aster,.wls-aster,.wlse-aster,.wlt-aster,.wltr-aster,.wlw-aster,
.wlz-aster{
  background:url(../img/aster-3d.webp) center/contain no-repeat}
.aster>path,.wl-aster>path,.wl-ov-aster>path,.wlb-aster>path,.wlc-aster>path,.wlga-aster>path,
.wlhs-aster>path,.wlk-aster>path,.wlm-aster>path,.wlnk-aster>path,.wlp-aster>path,.wlps-aster>path,
.wlr-aster>path,.wls-aster>path,.wlse-aster>path,.wlt-aster>path,.wltr-aster>path,.wlw-aster>path,
.wlz-aster>path{display:none}