.wlp{--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}
.wlp *,.wlp *::before,.wlp *::after{box-sizing:border-box;margin:0;padding:0}
.wlp-wrap{max-width:none;margin:0 auto;padding-top:0;padding-bottom:0;padding-left:15px!important;padding-right:15px!important}
.wlp h1, .wlp h2, .wlp h3, .wlp .wl-cardt{font-family:var(--f-disp);letter-spacing:-.03em;line-height:.98;font-weight:600}
.wlp .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)}
.wlp .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}
.wlp .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)}
.wlp .pill:hover::before{transform:translateY(0)}
.wlp .pill span{position:relative;z-index:1}
.wlp-rev{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),filter .7s ease}
.wlp-rev.in{opacity:1;transform:none;filter:none}

/* HERO — full-bleed банер із фото + білий заголовок поверх (як /blog/, /poslugy/) */
.wlp-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;background:#6f7276}
.wlp-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('https://web-lift.com/wp-content/uploads/2026/07/weblift-portfolio-hero-scaled.webp') center/cover no-repeat;
  transform:scale(1.14);filter:blur(14px);opacity:0;animation:wlpHeroIn 6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wlpHeroIn{0%{opacity:0;filter:blur(14px);transform:scale(1.14)}45%{opacity:1}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.wlp-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))}
.wlp-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)}
.wlp-title.prep{visibility:hidden}
.wlp-title .lm{display:block;overflow:hidden;padding-bottom:.06em}
.wlp-title .li{display:block;will-change:transform;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.wlp-title.lit .li{transform:none}
@keyframes wlpSpin{to{transform:rotate(360deg)}}
/* весь текст під банером */
.wlp-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)}
.wlp-aster{width:52px;height:54px;animation:wlpSpin 16s linear infinite}
.wlp-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}
.wlp-lead .hl{color:var(--orange)}
.wlp-intro p{color:var(--fog);font-size:clamp(16px,1.8vw,20px);line-height:1.6;max-width:52ch;text-wrap:balance}

/* FILTER TABS */
.wlp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 0 clamp(36px,4vw,52px)}
.wlp-tab{font-family:var(--f-ui);font-size:15px;font-weight:500;color:var(--ink);background:var(--white);border:1px solid var(--stone);
  border-radius:999px;padding:11px 24px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.wlp-tab:hover{border-color:var(--ink)}
.wlp-tab.active{background:var(--ink);color:var(--white);border-color:var(--ink)}
.wlp-tab .c{color:var(--fog);margin-left:7px;font-size:13px}
.wlp-tab.active .c{color:rgba(255,255,255,.6)}

/* GRID */
.wlp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 0 clamp(72px,9vw,110px)}
.wlp-item{transition:opacity .45s ease,transform .45s ease}
.wlp-item.hide{display:none}
.wlp-card{position:relative;display:block;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;
  height:clamp(320px,33vw,440px);background:var(--ink);border:1px solid var(--stone);isolation:isolate;
  box-shadow:0 4px 18px rgba(10,10,10,.05);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease,border-color .4s ease}
.wlp-card:hover{transform:translateY(-8px);box-shadow:0 34px 66px rgba(10,10,10,.24);border-color:var(--ink)}
.wlp-thumb{position:absolute;inset:0;overflow:hidden}
.wlp-par{position:absolute;inset:0}
/* фото на всю картку (cover, full-bleed) — без чорних полів, стиль idotive */
.wlp-thumb .img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.12);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
/* scroll-reveal scale-settle */
.wlp-item.in .wlp-thumb .img{transform:scale(1.02);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.wlp-card:hover .wlp-thumb .img{transform:scale(1.08);transition:transform .7s cubic-bezier(.2,.75,.2,1)}
/* постійний нижній scrim — щоб заголовок читався на будь-якому фото/градієнті */
.wlp-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.05) 0%,rgba(10,10,10,0) 34%,rgba(10,10,10,.34) 64%,rgba(10,10,10,.86) 100%);transition:opacity .45s ease}
.wlp-card:hover .wlp-thumb::before{opacity:.94}
.wlp-tag{position:absolute;top:16px;left:16px;z-index:4;background:rgba(251,249,239,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:8px 14px;border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,.14)}
.wlp-arw{display:none} /* стару кутову стрілку замінено на cursor-follow коло */
/* затемнення фото на hover, щоб коло краще читалось */
.wlp-thumb::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,10,10,0);transition:background .45s ease;pointer-events:none}
.wlp-thumb.hovering::after{background:rgba(10,10,10,.22)}
/* коло-«переглянути», що слідує за курсором (репліка idotive) */
/* курсор-коло: зовнішній шар = позиція (JS rAF-lerp), внутрішній = scale/opacity (CSS, як idotive a-57/a-58) */
.wlp-follow{position:absolute;top:0;left:0;z-index:6;pointer-events:none;will-change:transform}
.wlp-follow .fin{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 40px rgba(0,0,0,.18);
  opacity:0;transform:translate(-50%,-50%) scale(0);will-change:transform,opacity;
  transition:opacity .5s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.wlp-thumb.hovering .wlp-follow .fin{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1) .3s}
.wlp-follow svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.1}
@media(hover:none){.wlp-follow{display:none}}
.wlp-meta{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:22px 22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  pointer-events:none;transform:translateY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wlp-card:hover .wlp-meta{transform:translateY(-4px)}
.wlp-meta h3, .wlp-meta .wl-cardt{color:#fff;font-size:clamp(20px,1.7vw,25px);letter-spacing:-.02em;line-height:1.08;text-shadow:0 2px 20px rgba(0,0,0,.45);text-wrap:balance}
.wlp-meta .res{flex-shrink:0;font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--ink);
  background:var(--orange);padding:7px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(255,119,34,.32);white-space:nowrap}
/* SEO-кейс з GSC-метриками всередині картки (репліка головної, svitkomfortu.bg) */
.wlp-seores{position:absolute;inset:0;z-index:2;padding:54px 22px 24px;display:flex;flex-direction:column;gap:16px;color:#fff;pointer-events:none}
.wlp-seores .cr-top{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.wlp-seores .cr-spark{width:100%;height:66px;display:block}
.wlp-seores .cr-area{fill:rgba(255,255,255,.15)}
.wlp-seores .cr-line{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wlp-seores .cr-nums{display:flex;gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;margin-top:2px}
.wlp-seores .cr-m{display:flex;flex-direction:column;line-height:1}
.wlp-seores .cr-m .v{font-family:var(--f-disp);font-weight:600;font-size:clamp(20px,2vw,27px);letter-spacing:-.02em}
.wlp-seores .cr-m .k{margin-top:5px;font-size:11px;color:rgba(255,255,255,.82)}
.wlp-seores .cr-m.cr-ai .v{color:#ffb37a}
.wlp-seores .cr-m.cr-ai .k{color:rgba(255,179,122,.92)}
.wlp-empty{grid-column:1/-1;text-align:center;color:var(--fog);padding:40px 0;display:none}

/* SOLO — при виборі категорії портфоліо стає великою одноколонковою стрічкою (стиль idotive «Our work») */
.wlp-grid.solo{grid-template-columns:1fr;gap:clamp(22px,3.4vw,44px);max-width:1080px;margin-left:auto;margin-right:auto}
.wlp-grid.solo .wlp-card{height:clamp(430px,54vw,680px);border-radius:28px}
.wlp-grid.solo .wlp-thumb::before{background:linear-gradient(180deg,rgba(10,10,10,.14) 0%,rgba(10,10,10,0) 44%,rgba(10,10,10,.26) 72%,rgba(10,10,10,.8) 100%)}
.wlp-grid.solo .wlp-tag{display:none}
.wlp-grid.solo .wlp-meta{justify-content:center;align-items:center;padding:0 24px clamp(30px,4.4vw,58px)}
.wlp-grid.solo .wlp-meta h3, .wlp-grid.solo .wlp-meta .wl-cardt{font-family:var(--f-disp);font-weight:600;font-size:clamp(30px,4.6vw,62px);text-align:center;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.wlp-grid.solo .wlp-meta .res{display:none}
.wlp-grid.solo .wlp-follow .fin{width:154px;height:154px}
@media(max-width:640px){.wlp-grid.solo .wlp-card{height:clamp(340px,72vw,470px)}}

/* CTA */
.wlp-cta{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:clamp(72px,9vw,120px) 10px;display:flex;flex-direction:column;align-items:center;gap:26px;
  background:var(--ink);color:var(--cream);border-radius:24px;margin:0 10px clamp(56px,7vw,90px)}
.wlp-cta::before{content:"";position:absolute;inset:0;z-index:-2;background:url('https://web-lift.com/wp-content/uploads/2026/07/weblift-portfolio-cta-scaled.webp') center/cover no-repeat}
.wlp-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.72),rgba(10,10,10,.82))}
.wlp-cta h2{color:var(--cream);font-size:clamp(32px,5vw,72px);max-width:16ch;line-height:1;text-wrap:balance}
.wlp-cta p{color:rgba(251,249,239,.66);font-size:clamp(16px,1.7vw,20px);max-width:50ch}
.wlp-cta .pill{background:var(--white);color:var(--ink)}
.wlp-cta .pill::before{transform:translateY(-101%)}
.wlp-cta .pill:hover::before{transform:translateY(0)}
.wlp-cta .pill:hover span{color:#fff}

@media(max-width:1000px){.wlp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .wlp-hero{padding-top:56px}
  .wlp-title{font-size:clamp(56px,17vw,88px)}
  /* --- ПРЕМІУМ МОБІЛЬНА ВЕРСІЯ --- */
  /* таби: горизонтальний скрол-бар (app-style), без переносу, край-в-край */
  .wlp-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:26px}
  .wlp-tabs::-webkit-scrollbar{display:none}
  .wlp-tab{flex:0 0 auto;padding:12px 20px;font-size:14.5px;scroll-snap-align:center;transition:transform .15s ease,background .25s,color .25s,border-color .25s}
  .wlp-tab:active{transform:scale(.94)}
  /* сітка: одна колонка, стабільне співвідношення, приємний ритм */
  .wlp-grid{grid-template-columns:1fr;gap:16px}
  .wlp-card{height:auto;aspect-ratio:4/3;border-radius:22px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
  .wlp-card:active{transform:scale(.982)}
  .wlp-meta{padding:18px 18px 20px}
  .wlp-meta h3, .wlp-meta .wl-cardt{font-size:22px}
  .wlp-tag{top:14px;left:14px;font-size:11px;padding:7px 12px}
  /* мобільний affordance замість cursor-кола: кутова стрілка-бейдж */
  .wlp-arw{display:grid!important;place-items:center;position:absolute;top:13px;right:13px;z-index:4;
    width:40px;height:40px;border-radius:50%;background:rgba(251,249,239,.92);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.16)}
  .wlp-arw svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2.2}
  /* solo-режим: висока картка + великий центрований заголовок */
  .wlp-grid.solo{gap:16px}
  .wlp-grid.solo .wlp-card{aspect-ratio:auto;height:clamp(360px,86vw,500px)}
  .wlp-grid.solo .wlp-meta h3, .wlp-grid.solo .wlp-meta .wl-cardt{font-size:clamp(28px,8vw,44px)}
  .wlp-grid.solo .wlp-arw{display:none!important}
  /* CTA компактніше */
  .wlp-cta h2{font-size:clamp(30px,8.5vw,46px)}
}

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

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