.wlb{--cream:#FBF9EF;--stone:#E8E6DC;--ink:#0A0A0A;--orange:#FF7722;--white:#FFFFFF;--fog:rgba(10,10,10,.56);
  --f-disp:'Parkinsans',system-ui,sans-serif;--f-ui:'Inter Tight',system-ui,sans-serif;
  background:var(--cream);color:var(--ink);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;width:100%;overflow-x:clip}
.wlb *,.wlb *::before,.wlb *::after{box-sizing:border-box;margin:0;padding:0}
.wlb-wrap{max-width:none;margin:0 auto;padding-top:0;padding-bottom:0;padding-left:15px!important;padding-right:15px!important}
.wlb h1, .wlb h2, .wlb h3, .wlb .wlb-cardt, .wlb .wl-cardt{font-family:var(--f-disp);letter-spacing:-.03em;line-height:.98;font-weight:600}
.wlb .eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);font-weight:500}
.g1{background:linear-gradient(135deg,#2b1a12,#8a4a1f 55%,#ff7722)}
.g2{background:linear-gradient(135deg,#12303a,#2f8f86 60%,#a7c957)}
.g3{background:linear-gradient(135deg,#1a1330,#4b3b8f 55%,#c9a7ff)}
.g4{background:linear-gradient(135deg,#0e1b2b,#2b5b8c 60%,#8fd0ff)}
.g5{background:linear-gradient(135deg,#301322,#8f3b6a 55%,#ffa7d0)}
.g6{background:linear-gradient(135deg,#3a2a12,#c08a2f 55%,#ffe0a7)}
.wlb .pill{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--white);font-weight:500;font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  padding:16px 36px;border-radius:4px;text-decoration:none;transition:transform .12s}
.wlb .pill::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:0;transform:translateY(101%);transition:transform .45s cubic-bezier(.65,0,.35,1)}
.wlb .pill:hover::before{transform:translateY(0)}
.wlb .pill span{position:relative;z-index:1}
.wlb-rev{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),filter .7s ease}
.wlb-rev.in{opacity:1;transform:none;filter:none}

/* HERO — full-bleed банер із фото + білий текст поверх */
.wlb-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;min-height:clamp(560px,90vh,900px);
  padding:clamp(72px,9vw,120px) 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:0;background:#6f7276}
.wlb-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('https://web-lift.com/wp-content/uploads/2026/07/weblift-blog-hero-scaled.webp') center/cover no-repeat;
  transform:scale(1.14);filter:blur(14px);opacity:0;animation:wlbHeroIn 6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wlbHeroIn{0%{opacity:0;filter:blur(14px);transform:scale(1.14)}45%{opacity:1}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.wlb-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,22,26,.42),rgba(20,22,26,.28) 45%,rgba(20,22,26,.5))}
.wlb-aster{width:52px;height:54px;margin-bottom:22px;animation:wlbSpin 16s linear infinite}
@keyframes wlbSpin{to{transform:rotate(360deg)}}
.wlb-hero .eyebrow{margin-bottom:18px;color:#fff;opacity:.92}
.wlb-title{color:#fff;font-family:var(--f-disp);font-weight:600;font-size:clamp(64px,15vw,190px);line-height:.9;letter-spacing:-.04em;text-shadow:0 6px 44px rgba(0,0,0,.22)}
.wlb-title.prep{visibility:hidden}
.wlb-title .lm{display:block;overflow:hidden;padding-bottom:.06em}
.wlb-title .li{display:block;will-change:transform;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.wlb-title.lit .li{transform:none}
/* весь текст під банером (як ритм на /pro-nas/) */
.wlb-intro{text-align:center;padding:clamp(56px,7vw,96px) 10px clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px)}
.wlb-lead{font-family:var(--f-disp);font-weight:600;letter-spacing:-.03em;color:var(--ink);font-size:clamp(34px,6vw,84px);line-height:.98;max-width:15ch;text-wrap:balance}
.wlb-lead .hl{color:var(--orange)}
.wlb-intro p{color:var(--fog);font-size:clamp(16px,1.8vw,20px);line-height:1.6;max-width:52ch;text-wrap:balance}
.wlb-intro p b{color:var(--ink);font-weight:600}

/* GRID */
.wlb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px) clamp(24px,3vw,48px);padding:0 0 clamp(48px,6vw,72px)}
/* відкрита editorial-картка (репліка idotive): фото → мета-рядок → заголовок + квадратна кнопка → хайрлайн */
.wlb-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.wlb-thumb{position:relative;height:clamp(240px,26vw,360px);overflow:hidden;border-radius:20px}
.wlb-thumb .img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transform:scale(1);transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.wlb-card:hover .wlb-thumb .img{transform:scale(1.05)}
.wlb-metarow{display:flex;justify-content:space-between;gap:24px;padding-top:clamp(22px,2.4vw,30px)}
.wlb-mcol .lbl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.wlb-mcol .val{margin-top:7px;font-size:16px;color:var(--fog)}
.wlb-mcol.right{text-align:right}
.wlb-titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:16px}
.wlb-card h3, .wlb-card .wlb-cardt, .wlb-card .wl-cardt{display:block;font-size:clamp(24px,2.3vw,33px);letter-spacing:-.025em;line-height:1.08}
.wlb-sq{flex-shrink:0;width:clamp(52px,4vw,62px);height:clamp(52px,4vw,62px);border-radius:12px;background:var(--ink);display:grid;place-items:center;transition:background .3s,transform .3s}
.wlb-card:hover .wlb-sq{background:var(--orange);transform:translate(2px,-2px)}
.wlb-sq svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.1}
.wlb-divider{position:relative;height:1px;background:var(--stone);margin-top:clamp(22px,2.4vw,30px);overflow:hidden}
.wlb-divider::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.wlb-card:hover .wlb-divider::after{transform:scaleX(1)}

/* CTA */
.wlb-cta{text-align:center;padding:clamp(64px,8vw,110px) 10px;display:flex;flex-direction:column;align-items:center;gap:24px;
  background:var(--ink);color:var(--cream);border-radius:24px;margin:0 10px clamp(56px,7vw,90px)}
.wlb-cta h2{color:var(--cream);font-size:clamp(30px,4.6vw,64px);max-width:16ch;line-height:1;text-wrap:balance}
.wlb-cta p{color:rgba(251,249,239,.66);font-size:clamp(16px,1.7vw,20px);max-width:50ch}
.wlb-cta .pill{background:var(--white);color:var(--ink)}
.wlb-cta .pill::before{transform:translateY(-101%)}
.wlb-cta .pill:hover::before{transform:translateY(0)}
.wlb-cta .pill:hover span{color:#fff}

.wlb-intro p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:2px}
.wlb-intro p a:hover{color:var(--orange)}
/* SEO-текст */
.wlb-seo{padding:clamp(8px,2vw,24px) 15px clamp(40px,5vw,64px)}
.wlb-seo-inner{max-width:820px;margin:0 auto}
.wlb-seo h2{font-size:clamp(24px,3.4vw,38px);line-height:1.05;margin:clamp(28px,3vw,44px) 0 14px}
.wlb-seo h2:first-child{margin-top:0}
.wlb-seo p{color:var(--fog);font-size:clamp(16px,1.55vw,18px);line-height:1.7}
.wlb-seo a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:2px}
.wlb-seo a:hover{color:var(--orange)}

@media(max-width:760px){
  .wlb-grid{grid-template-columns:1fr}
  .wlb-hero{padding-top:56px}
}

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