/* Сторінка «Про нас» · друкарська тема: CMYK, растр, мітки суміщення.
   Анімуємо лише transform/opacity; усе вимикається при prefers-reduced-motion. */
.ab-page { --ab-c: #00a9e0; --ab-m: #e6007e; --ab-y: #ffd900; --ab-k: #20251c; }

/* ── Поява блоків при прокрутці ── */
.ab-js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.ab-js .rv.in { opacity: 1; transform: none; }

/* ── Hero ── */
.ab-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
.ab-hero .lead { max-width: 520px; }
.ab-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

/* заголовок із «розсувом кольорів», як у поганому друку: кольори сходяться докупи */
.cmyk { position: relative; isolation: isolate; }
.cmyk-main { position: relative; z-index: 2; }
.cmyk-l { position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; mix-blend-mode: multiply; opacity: .9; }
.cmyk-l.c { color: var(--ab-c); animation: ab-c 1.6s cubic-bezier(.2,.8,.2,1) .15s both; }
.cmyk-l.m { color: var(--ab-m); animation: ab-m 1.6s cubic-bezier(.2,.8,.2,1) .15s both; }
.cmyk-l.y { color: var(--ab-y); animation: ab-y 1.6s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes ab-c { from { transform: translate(-26px, -10px); opacity: 0; } to { transform: translate(-2px, -1px); opacity: .55; } }
@keyframes ab-m { from { transform: translate(24px, -14px); opacity: 0; } to { transform: translate(2px, 1px); opacity: .55; } }
@keyframes ab-y { from { transform: translate(-6px, 22px); opacity: 0; } to { transform: translate(0, 2px); opacity: .6; } }
html[data-theme="dark"] .cmyk-l { mix-blend-mode: screen; }

/* композиція справа: аркуші CMYK, растр, папуга, мітка суміщення */
.ab-art { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.ab-dots { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, var(--green, #338309) 0 2.4px, transparent 3px) 0 0 / 15px 15px; -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); opacity: .55; animation: ab-spin 90s linear infinite; }
.ab-sheet { position: absolute; display: grid; place-items: end start; width: 42%; aspect-ratio: 4 / 5; padding: 12px 14px; border-radius: 14px; color: #fff; font: 700 22px/1 Unbounded, sans-serif; box-shadow: 0 18px 36px rgb(32 37 28 / 22%); animation: ab-float 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ab-sheet.c { background: var(--ab-c); left: 6%; top: 8%; --r: -9deg; place-items: start start; }
.ab-sheet.m { background: var(--ab-m); right: 6%; top: 4%; --r: 8deg; --dl: -1.8s; place-items: start end; }
.ab-sheet.y { background: var(--ab-y); color: #20251c; left: 12%; bottom: 8%; --r: 6deg; --dl: -3.5s; }
.ab-sheet.k { background: var(--ab-k); right: 10%; bottom: 6%; --r: -7deg; --dl: -5s; }
@keyframes ab-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 2deg)); } }
.ab-parrot { position: absolute; left: 50%; top: 50%; width: 36%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 14px 18px rgb(0 0 0 / 28%)); animation: ab-bob 4.5s ease-in-out infinite; }
@keyframes ab-bob { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); } 50% { transform: translate(-50%, -56%) rotate(3deg); } }
.ab-reg { position: absolute; right: 0; top: 46%; width: 54px; height: 54px; color: var(--ab-k); opacity: .5; animation: ab-spin 40s linear infinite; }
html[data-theme="dark"] .ab-reg { color: #fff; }
@keyframes ab-spin { to { transform: rotate(360deg); } }

/* ── Стрічки з послугами ── */
.ab-marquee { padding-block: 10px 70px; overflow: hidden; }
.ab-marquee .br-head { margin-bottom: 26px; }
.ab-rows { display: grid; gap: 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ab-row { display: flex; width: max-content; gap: 14px; animation: ab-slide 60s linear infinite; }
.ab-row.rev { animation-direction: reverse; animation-duration: 70s; }
.ab-rows:hover .ab-row, .ab-rows.is-off .ab-row { animation-play-state: paused; }
@keyframes ab-slide { to { transform: translateX(-50%); } }
.ab-chip { flex: none; padding: 13px 22px; border-radius: 999px; border: 1px solid #dedfd3; background: #fcfbf6; color: var(--ink, #20251c); font: 600 14px/1 Montserrat, sans-serif; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.ab-chip:hover, .ab-chip:focus-visible { background: var(--green, #338309); border-color: var(--green, #338309); color: #fff; transform: translateY(-3px); }
html[data-theme="dark"] .ab-chip { background: #1d1d1d; border-color: #333; color: #ededed; }

/* ── Як ми працюємо: лінія малюється, іконки оживають ── */
.ab-section { padding-block: 24px 90px; }
.ab-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.ab-line { position: absolute; left: 8%; right: 8%; top: 46px; width: 84%; height: 4px; overflow: visible; pointer-events: none; }
.ab-line path { fill: none; stroke: var(--green, #338309); stroke-width: 3; stroke-dasharray: 8 9; stroke-linecap: round; opacity: .55; }
.ab-card { position: relative; padding: 24px 26px 28px; border-radius: 22px; background: #fcfbf6; border: 1px solid #dedfd3; box-shadow: 0 12px 28px rgb(32 37 28 / 8%); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.ab-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 24px 44px rgb(32 37 28 / 16%); }
.ab-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--green, #338309); color: #fff; }
.ab-ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-ico path, .ab-ico circle, .ab-ico rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ab-card.in .ab-ico path, .ab-card.in .ab-ico circle, .ab-card.in .ab-ico rect { animation: ab-draw 1.1s ease forwards; animation-delay: calc(var(--d, 0s) + .25s); }
@keyframes ab-draw { to { stroke-dashoffset: 0; } }
.ab-num { position: absolute; right: 22px; top: 18px; color: var(--green, #338309); opacity: .35; font: 700 34px/1 Unbounded, sans-serif; }
.ab-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.ab-card p { margin: 0; color: var(--muted, #74776b); font-size: 14.5px; line-height: 1.7; }
html[data-theme="dark"] .ab-card { background: #1d1d1d; border-color: #333; box-shadow: none; }
html[data-theme="dark"] .ab-card p { color: #a7aaa0; }

/* ── Заклик ── */
.ab-cta { position: relative; overflow: hidden; margin-block: 0 80px; padding: 56px 40px; border-radius: 28px; background: var(--green, #338309); color: #fff; text-align: center; }
.ab-cta h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 42px); line-height: 1.15; }
.ab-cta p { margin: 0 auto 26px; max-width: 460px; opacity: .9; line-height: 1.7; }
.ab-cta .button { background: #fff; color: var(--green, #338309); }
.ab-cta::before, .ab-cta::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 40%) 0 2px, transparent 2.6px) 0 0 / 14px 14px; opacity: .6; animation: ab-spin 80s linear infinite; }
.ab-cta::before { left: -60px; top: -60px; }
.ab-cta::after { right: -60px; bottom: -60px; animation-direction: reverse; }
.ab-cta > * { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .ab-hero { grid-template-columns: 1fr; }
  .ab-art { width: min(80%, 340px); }
  .ab-steps { grid-template-columns: 1fr; }
  .ab-line { display: none; }
  .ab-section { padding-block: 8px 56px; }
  .ab-cta { padding: 40px 22px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-js .rv { opacity: 1; transform: none; transition: none; }
  .cmyk-l, .ab-dots, .ab-sheet, .ab-parrot, .ab-reg, .ab-row, .ab-cta::before, .ab-cta::after { animation: none !important; }
  .cmyk-l.c { transform: translate(-2px, -1px); } .cmyk-l.m { transform: translate(2px, 1px); } .cmyk-l.y { transform: translate(0, 2px); }
  .ab-parrot { transform: translate(-50%, -50%); }
  .ab-ico path, .ab-ico circle, .ab-ico rect { stroke-dashoffset: 0; animation: none !important; }
  .ab-row { flex-wrap: wrap; width: auto; }
}

/* ═════════ Велика версія сторінки ═════════ */

/* маніфест: слова «проявляються» одне за одним */
.ab-manifest { padding-block: 40px 70px; }
.ab-words { max-width: 1000px; margin: 0; font: 700 clamp(26px, 4.4vw, 54px)/1.22 Unbounded, sans-serif; letter-spacing: -.01em; }
.ab-words .w { display: inline-block; margin-right: .28em; opacity: .16; transition: opacity .6s ease, color .6s ease; transition-delay: calc(var(--i) * 60ms); }
.ab-words.in .w { opacity: 1; }
.ab-words.in .w.hl { color: var(--green, #338309); }

/* смуга «друку»: чотири кольори пролітають і відкривають текст */
.ab-pass { position: relative; overflow: hidden; margin-block: 30px 90px; padding: 110px 0; background: #151515; color: #fff; text-align: center; }
.ab-pass .bar { position: absolute; left: 0; right: 0; height: 25.2%; transform: translateX(-102%); will-change: transform; }
.ab-pass .bar.c { top: 0; background: var(--ab-c); }
.ab-pass .bar.m { top: 25%; background: var(--ab-m); }
.ab-pass .bar.y { top: 50%; background: var(--ab-y); }
.ab-pass .bar.w { top: 75%; background: #fff; }
.ab-pass.in .bar { animation: ab-pass 1.5s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--k, 0) * .14s); }
.ab-pass .bar.m { --k: 1; } .ab-pass .bar.y { --k: 2; } .ab-pass .bar.w { --k: 3; }
@keyframes ab-pass { 0% { transform: translateX(-102%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(102%); } }
.ab-pass-in { position: relative; z-index: 1; max-width: 820px; opacity: 0; transform: translateY(20px); transition: opacity .8s ease 1.1s, transform .8s ease 1.1s; }
.ab-pass.in .ab-pass-in { opacity: 1; transform: none; }
.ab-pass h2 { margin: 14px 0 18px; font-size: clamp(34px, 6.5vw, 84px); line-height: 1.05; }
.ab-pass .section-label { color: rgb(255 255 255 / 70%); }
.ab-pass p { margin: 0 auto; max-width: 560px; color: rgb(255 255 255 / 75%); font-size: 16px; line-height: 1.8; }
.ab-arrow { display: inline-block; color: var(--green-text, #5cb82a); }

/* команда: полароїди з малюнками, «падають» на стіл */
.ab-team { padding-block: 10px 90px; }
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; margin-top: 44px; padding-top: 12px; }
.tm-card { margin: 0; rotate: var(--r, 0deg); transition: rotate .45s cubic-bezier(.2, .8, .2, 1), translate .45s cubic-bezier(.2, .8, .2, 1); }
.tm-photo { position: relative; padding: 12px 12px 58px; background: #fff; box-shadow: 0 16px 34px rgb(32 37 28 / 22%); border-radius: 4px; }
.tm-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eee; }
.tm-tape { position: absolute; left: 50%; top: -14px; width: 92px; height: 28px; background: rgb(214 190 140 / 75%); box-shadow: 0 2px 4px rgb(0 0 0 / 12%); translate: -50% 0; rotate: -4deg; }
.tm-name { position: absolute; left: 0; right: 0; bottom: 14px; color: #20251c; font-size: 26px; line-height: 1; text-align: center; }
.tm-card figcaption { margin: 22px 6px 0; color: var(--muted, #5d6155); font-size: 14.5px; line-height: 1.65; text-align: center; }
.tm-card:hover { rotate: 0deg; translate: 0 -10px; }
.ab-js .tm-card:not(.in) { opacity: 0; }
.tm-card.in { animation: tm-drop .9s cubic-bezier(.3, 1.35, .5, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes tm-drop { from { opacity: 0; translate: 0 -70px; rotate: calc(var(--r) + 14deg); } to { opacity: 1; translate: 0 0; rotate: var(--r); } }

/* принципи */
.ab-values { padding-block: 0 90px; }
.ab-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.ab-val { position: relative; padding: 28px 24px 30px; overflow: hidden; border-radius: 22px; background: #fcfbf6; border: 1px solid #dedfd3; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s; }
.ab-val:hover { background: var(--green, #338309); color: #fff; }
.ab-val:hover p, .ab-val:hover .ab-vnum { color: rgb(255 255 255 / 85%); }
.ab-vnum { display: block; margin-bottom: 40px; color: var(--green, #338309); font: 700 54px/1 Unbounded, sans-serif; transition: color .35s; }
.ab-val h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.ab-val p { margin: 0; color: var(--muted, #74776b); font-size: 14.5px; line-height: 1.7; transition: color .35s; }
html[data-theme="dark"] .ab-val { background: #1d1d1d; border-color: #333; }
html[data-theme="dark"] .ab-val p { color: #a7aaa0; }

@media (max-width: 1000px) { .tm-grid, .ab-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tm-grid { gap: 34px 14px; }
  .tm-photo { padding: 8px 8px 44px; }
  .tm-name { font-size: 16px; bottom: 13px; white-space: nowrap; }
  .tm-card figcaption { font-size: 13px; margin-inline: 0; }
  .ab-vgrid { grid-template-columns: 1fr; }
  .ab-pass { padding-block: 80px; }
  .ab-manifest { padding-block: 20px 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-words .w { opacity: 1; transition: none; }
  .ab-pass .bar { display: none; }
  .ab-pass-in { opacity: 1; transform: none; transition: none; }
  .ab-js .tm-card:not(.in) { opacity: 1; }
  .tm-card.in { animation: none; }
}

/* ═════════ Версія 3 ═════════ */

/* hero: рух за курсором і дрібні «каракулі», як на малюнках команди */
.ab-sheet { translate: calc(var(--mx, 0) * var(--px, -14px)) calc(var(--my, 0) * var(--px, -14px)); }
.ab-sheet.c { --px: -18px; } .ab-sheet.m { --px: 14px; } .ab-sheet.y { --px: -8px; } .ab-sheet.k { --px: 22px; }
.ab-parrot { translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 12px); }
.ab-dots { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -10px); }
.ab-dd { position: absolute; width: 22px; height: 22px; fill: var(--ab-y); animation: ab-twinkle 3.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ab-dd.d1 { left: 2%; top: 44%; --dl: -.4s; } .ab-dd.d2 { right: 18%; top: -2%; fill: var(--ab-m); --dl: -1.2s; width: 18px; }
.ab-dd.d3 { left: 40%; bottom: -2%; fill: var(--ab-c); --dl: -2s; width: 26px; } .ab-dd.d4 { right: -2%; bottom: 26%; fill: var(--ab-m); --dl: -2.6s; }
.ab-dd.d5 { left: 20%; top: -3%; fill: var(--green, #338309); --dl: -3s; width: 16px; }
@keyframes ab-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(18deg); opacity: 1; } }

/* великий рядок з контурними словами */
.ab-big { overflow: hidden; margin-block: 10px 70px; padding-block: 6px; }
.ab-big-row { display: flex; align-items: center; gap: 36px; width: max-content; animation: ab-slide 50s linear infinite; }
.ab-big.is-off .ab-big-row { animation-play-state: paused; }
.ab-big span { color: var(--ab-k); font: 700 clamp(64px, 11vw, 150px)/1 Unbounded, sans-serif; text-transform: uppercase; }
.ab-big i { flex: none; width: clamp(18px, 2.4vw, 34px); height: clamp(18px, 2.4vw, 34px); border-radius: 50%; background: var(--green, #338309); }
html[data-theme="dark"] .ab-big span { color: #ededed; }

/* темна зона: проліт кольорів + сцена, де ескіз стає карткою */
.ab-dark { margin-block: 0 90px; background: #151515; color: #fff; }
.ab-pass { margin: 0; padding: 120px 0 30px; background: transparent; }
.ab-green { color: var(--green-text, #5cb82a); }
.ab-seq { position: relative; height: 440vh; }
.ab-seq-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; }

/* список кроків: тонка рейка і живий прогрес */
.ab-seq-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ab-seq-list::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / 10%); }
.ab-seq-list::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(var(--green-text, #5cb82a), #b8e04a); transform-origin: top; scale: 1 var(--rail, 0); transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
[data-stage="0"] .ab-seq-list { --rail: .25; } [data-stage="1"] .ab-seq-list { --rail: .5; } [data-stage="2"] .ab-seq-list { --rail: .75; } [data-stage="3"] .ab-seq-list { --rail: 1; }
.ab-seq-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; padding: 18px 8px 18px 26px; border-radius: 0 18px 18px 0; opacity: .3; transition: opacity .5s, background .5s; }
.ab-seq-list li > span { color: rgb(255 255 255 / 40%); font: 700 32px/1 Unbounded, sans-serif; letter-spacing: -.02em; transition: color .5s; }
.ab-seq-list h3 { margin: 0 0 6px; font-size: 22px; }
.ab-seq-list p { margin: 0; color: rgb(255 255 255 / 72%); font-size: 14.5px; line-height: 1.7; }
.ws-bar { display: block; height: 3px; margin-top: 14px; border-radius: 3px; background: rgb(255 255 255 / 10%); overflow: hidden; opacity: 0; transition: opacity .4s; }
.ws-bar::after { content: ""; display: block; height: 100%; background: var(--green-text, #5cb82a); transform-origin: left; scale: var(--p, 0) 1; }
[data-stage="0"] .ab-seq-list li:nth-child(1), [data-stage="1"] .ab-seq-list li:nth-child(2), [data-stage="2"] .ab-seq-list li:nth-child(3), [data-stage="3"] .ab-seq-list li:nth-child(4) { opacity: 1; background: linear-gradient(90deg, rgb(92 184 42 / 14%), transparent 85%); }
[data-stage="0"] .ab-seq-list li:nth-child(1) > span, [data-stage="1"] .ab-seq-list li:nth-child(2) > span, [data-stage="2"] .ab-seq-list li:nth-child(3) > span, [data-stage="3"] .ab-seq-list li:nth-child(4) > span { color: var(--green-text, #5cb82a); }
[data-stage="0"] .ab-seq-list li:nth-child(1) .ws-bar, [data-stage="1"] .ab-seq-list li:nth-child(2) .ws-bar, [data-stage="2"] .ab-seq-list li:nth-child(3) .ws-bar, [data-stage="3"] .ab-seq-list li:nth-child(4) .ws-bar { opacity: 1; }

/* сцена */
.ab-seq-art { display: grid; place-items: center; }
.ws { position: relative; width: min(400px, 92%); display: grid; place-items: center; }
.ws-glow { position: absolute; inset: -22% -30%; background: radial-gradient(closest-side, var(--gl, rgb(92 184 42 / 30%)), transparent 72%); transition: background .9s; pointer-events: none; }
[data-stage="1"] .ws { --gl: rgb(0 169 224 / 32%); } [data-stage="2"] .ws { --gl: rgb(230 0 126 / 28%); } [data-stage="3"] .ws { --gl: rgb(255 217 0 / 26%); }
.ws-num { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ws-num b { grid-area: 1 / 1; font: 800 clamp(180px, 22vw, 300px)/1 Unbounded, sans-serif; color: rgb(255 255 255 / 5%); opacity: 0; translate: 0 30px; transition: opacity .6s, translate .8s cubic-bezier(.2, .8, .2, 1); }
[data-stage="0"] .ws-num b:nth-child(1), [data-stage="1"] .ws-num b:nth-child(2), [data-stage="2"] .ws-num b:nth-child(3), [data-stage="3"] .ws-num b:nth-child(4) { opacity: 1; translate: 0 0; }
.ws-tag { position: absolute; z-index: 4; left: -6%; top: -30px; display: grid; }
.ws-tag b { grid-area: 1 / 1; justify-self: start; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 18%); backdrop-filter: blur(8px); color: #fff; font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; translate: 0 10px; transition: opacity .45s, translate .55s cubic-bezier(.2, .8, .2, 1); }
[data-stage="0"] .ws-tag b:nth-child(1), [data-stage="1"] .ws-tag b:nth-child(2), [data-stage="2"] .ws-tag b:nth-child(3), [data-stage="3"] .ws-tag b:nth-child(4) { opacity: 1; translate: 0 0; }

.sq-card { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; background: #f7f5ec; color: #6d7266; box-shadow: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 2px 4px rgb(0 0 0 / 25%), 0 24px 50px rgb(0 0 0 / 45%), 0 60px 110px rgb(0 0 0 / 35%); rotate: -2.5deg; overflow: visible; transition: rotate .9s cubic-bezier(.2, .8, .2, 1), translate .9s cubic-bezier(.2, .8, .2, 1), scale .9s cubic-bezier(.2, .8, .2, 1); }
.sq-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .5; mix-blend-mode: multiply; pointer-events: none; z-index: 5; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .35  0 0 0 .22 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.sq-card > * { position: absolute; transition: opacity .6s ease, translate .9s cubic-bezier(.2, .8, .2, 1), filter .6s, scale .7s cubic-bezier(.3, 1.4, .5, 1); }
.sq-card > .sq-crop { transition: opacity .6s; }
.ws-sketch, .ws-layout { inset: 0; width: 100%; height: 100%; }
.ws-sketch path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
.ws-sketch path:nth-of-type(2) { transition-delay: .15s; } .ws-sketch path:nth-of-type(3) { transition-delay: .3s; } .ws-sketch path:nth-of-type(4) { transition-delay: .4s; } .ws-sketch path:nth-of-type(5) { transition-delay: .55s; } .ws-sketch path:nth-of-type(6) { transition-delay: .65s; } .ws-sketch path:nth-of-type(7) { transition-delay: .75s; } .ws-sketch path:nth-of-type(8) { transition-delay: .85s; } .ws-sketch path:nth-of-type(9) { transition-delay: .95s; }
.ws-sketch text { opacity: 0; transition: opacity .6s 1.1s; }
[data-stage="0"] .ws-sketch path { stroke-dashoffset: 0; } [data-stage="0"] .ws-sketch text { opacity: 1; }
[data-stage="1"] .ws-sketch { opacity: .0; } [data-stage="1"] .ws-sketch path { stroke-dashoffset: 0; } [data-stage="2"] .ws-sketch, [data-stage="3"] .ws-sketch { opacity: 0; }
.ws-layout { opacity: 0; scale: 1.03; }
[data-stage="1"] .ws-layout { opacity: 1; scale: 1; }
.ws-cursor { animation: ws-cur 2.4s ease-in-out infinite; }
@keyframes ws-cur { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -18px); } }

.sq-crop { width: 18px; height: 18px; opacity: 0; border: 0 solid rgb(255 255 255 / 80%); z-index: 6; }
.sq-crop.tl { left: -26px; top: -26px; border-right-width: 2px; border-bottom-width: 2px; } .sq-crop.tr { right: -26px; top: -26px; border-left-width: 2px; border-bottom-width: 2px; }
.sq-crop.bl { left: -26px; bottom: -26px; border-right-width: 2px; border-top-width: 2px; } .sq-crop.br { right: -26px; bottom: -26px; border-left-width: 2px; border-top-width: 2px; }
.sq-blob { width: 46%; height: 31%; border-radius: 40% 60% 55% 45%; opacity: 0; mix-blend-mode: multiply; }
.sq-blob.c { background: var(--ab-c); left: 6%; top: 7%; translate: -40px -30px; transition-delay: 0s; }
.sq-blob.m { background: var(--ab-m); right: 6%; top: 9%; translate: 40px -24px; transition-delay: .18s; }
.sq-blob.y { background: var(--ab-y); left: 7%; top: 33%; bottom: auto; translate: 0 40px; transition-delay: .36s; }
.sq-blob.k { background: #1b1d19; right: 6%; top: 35%; }
.sq-parrot { width: 44%; height: auto; left: 28%; top: 19%; opacity: 0; scale: .8; filter: grayscale(1); z-index: 2; }
.sq-title { bottom: 17%; left: 0; right: 0; text-align: center; color: #20251c; font: 700 27px/1 Unbounded, sans-serif; opacity: 0; translate: 0 14px; z-index: 2; }
.sq-bars { bottom: 8%; left: 18%; right: 18%; display: grid; gap: 7px; opacity: 0; translate: 0 14px; z-index: 2; }
.sq-bars i { display: block; height: 6px; border-radius: 4px; background: var(--green, #338309); } .sq-bars i:nth-child(2) { width: 70%; } .sq-bars i:nth-child(3) { width: 45%; }
.sq-shine { inset: 0; border-radius: 6px; z-index: 4; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 90%) 50%, transparent 70%); translate: -130% 0; opacity: 0; mix-blend-mode: overlay; pointer-events: none; }
.sq-stamp { right: -8px; top: -16px; z-index: 6; padding: 10px 16px; border: 3px solid var(--green, #338309); border-radius: 12px; background: #fff; color: var(--green, #338309); font: 700 15px/1 Unbounded, sans-serif; text-transform: uppercase; opacity: 0; scale: 2; rotate: 10deg; }
.ws-strip { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: -34px; display: flex; gap: 6px; opacity: 0; translate: 0 -10px; transition: opacity .6s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.ws-strip i { flex: 1; height: 10px; border-radius: 2px; } .ws-strip .c { background: var(--ab-c); } .ws-strip .m { background: var(--ab-m); } .ws-strip .y { background: var(--ab-y); } .ws-strip .k { background: #0b0b0b; box-shadow: 0 0 0 1px rgb(255 255 255 / 25%); }

[data-stage="1"] .sq-card { rotate: 0deg; }
[data-stage="1"] .sq-crop, [data-stage="2"] .sq-crop, [data-stage="3"] .sq-crop { opacity: .75; }
[data-stage="1"] .sq-parrot { opacity: 0; }
[data-stage="2"] .sq-card { rotate: 1.5deg; }
[data-stage="2"] .sq-parrot, [data-stage="3"] .sq-parrot { opacity: 1; filter: none; scale: 1; }
[data-stage="2"] .sq-title, [data-stage="3"] .sq-title, [data-stage="2"] .sq-bars, [data-stage="3"] .sq-bars { opacity: 1; translate: 0 0; }
[data-stage="2"] .sq-blob, [data-stage="3"] .sq-blob { opacity: .85; translate: 0 0; }
[data-stage="2"] .ws-strip, [data-stage="3"] .ws-strip { opacity: 1; translate: 0 0; }
[data-stage="3"] .sq-card { rotate: -4deg; translate: 0 -12px; scale: 1.04; }
[data-stage="3"] .sq-shine { opacity: 1; translate: 130% 0; transition: translate 1.4s ease .2s, opacity .3s; }
[data-stage="3"] .sq-stamp { opacity: 1; scale: 1; rotate: -9deg; transition-delay: .35s; }

@media (max-width: 860px) {
  .ab-pass { padding: 80px 0 20px; }
  .ab-seq { height: 400vh; }
  .ab-seq-stick { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding-block: 70px 18px; align-items: center; }
  .ab-seq-art { order: -1; min-height: 0; }
  .ws { width: min(40vh, 74%); }
  .ws-tag { left: -2%; top: -26px; }
  .ab-seq-list { gap: 0; }
  .ab-seq-list::before, .ab-seq-list::after { display: none; }
  .ab-seq-list li { display: none; padding: 12px 4px; border-radius: 14px; }
  [data-stage="0"] .ab-seq-list li:nth-child(1), [data-stage="1"] .ab-seq-list li:nth-child(2), [data-stage="2"] .ab-seq-list li:nth-child(3), [data-stage="3"] .ab-seq-list li:nth-child(4) { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-dd, .ab-big-row { animation: none !important; }
  .sq-card, .sq-card > *, .ab-seq-list li, .ws-glow, .ws-num b, .ws-tag b, .ws-strip, .ws-sketch path { transition: none !important; }
  .ws-cursor { animation: none !important; }
}
/* крок 3 і 4: друк «проходить» по аркушу, потім стос готових відбитків і повідомлення */
.sq-card > .sq-ink { inset: 0; border-radius: 6px; clip-path: inset(0 0 100% 0); transition: clip-path 1.8s cubic-bezier(.55, 0, .25, 1); overflow: hidden; z-index: 2; }
.sq-ink > * { position: absolute; }
.sq-card .sq-ink .sq-blob.k { opacity: .96; }
.sq-card .sq-ink .sq-blob { opacity: .88; translate: 0 0; transition: none; }
.sq-card .sq-ink .sq-parrot { opacity: 1; filter: none; scale: 1; transition: none; }
.sq-card .sq-ink .sq-title, .sq-card .sq-ink .sq-bars { opacity: 1; translate: 0 0; transition: none; }
.ws-layout { transition: opacity .6s, scale .9s cubic-bezier(.2, .8, .2, 1), clip-path 1.8s cubic-bezier(.55, 0, .25, 1); clip-path: inset(0); }
[data-stage="2"] .sq-card > .sq-ink, [data-stage="3"] .sq-card > .sq-ink { clip-path: inset(0); }
[data-stage="2"] .ws-layout, [data-stage="3"] .ws-layout { opacity: 1; scale: 1; clip-path: inset(100% 0 0 0); }
.sq-card > .sq-scan { left: -4%; right: -4%; top: 0; height: 3px; z-index: 6; opacity: 0; border-radius: 3px; background: linear-gradient(90deg, var(--ab-c), var(--ab-m), var(--ab-y)); box-shadow: 0 0 24px 6px rgb(230 0 126 / 55%), 0 0 60px 14px rgb(0 169 224 / 35%); transition: none; }
[data-stage="2"] .sq-card > .sq-scan { animation: ws-scan 1.8s cubic-bezier(.55, 0, .25, 1) forwards; }
@keyframes ws-scan { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.sq-stamp { display: none; }

.ws-sw { position: absolute; z-index: 3; left: -2%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ws-sw span { position: absolute; left: 0; top: 0; width: 84px; padding: 7px 7px 9px; border-radius: 9px; background: #fbfaf5; box-shadow: 0 10px 24px rgb(0 0 0 / 40%); transform-origin: 10px 150px; rotate: var(--r); opacity: 0; translate: 60px 0; transition: opacity .5s, translate .8s cubic-bezier(.2, .9, .3, 1.2); }
.ws-sw span i { display: block; height: 84px; border-radius: 5px; background: var(--sc); }
.ws-sw span b { display: block; margin-top: 6px; color: #20251c; font: 700 10px/1 Montserrat, sans-serif; letter-spacing: .04em; }
.ws-sw span:nth-child(2) { transition-delay: .08s; } .ws-sw span:nth-child(3) { transition-delay: .16s; } .ws-sw span:nth-child(4) { transition-delay: .24s; }
[data-stage="2"] .ws-sw span { opacity: 1; translate: 0 0; }

.sq-copy { position: absolute; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; z-index: 0; opacity: 0; scale: .96; transform-origin: 50% 90%; box-shadow: 0 14px 34px rgb(0 0 0 / 40%); background: radial-gradient(circle at 28% 24%, rgb(0 169 224 / 85%) 0 15%, transparent 16%), radial-gradient(circle at 72% 30%, rgb(230 0 126 / 85%) 0 15%, transparent 16%), radial-gradient(circle at 30% 52%, rgb(255 217 0 / 95%) 0 15%, transparent 16%), radial-gradient(circle at 70% 56%, rgb(27 29 25 / 95%) 0 15%, transparent 16%), linear-gradient(#f7f5ec, #f7f5ec); transition: opacity .6s, rotate 1s cubic-bezier(.2, .9, .3, 1.15), translate 1s cubic-bezier(.2, .9, .3, 1.15); }
[data-stage="3"] .sq-copy { opacity: 1; }
[data-stage="3"] .sq-copy.a { rotate: 9deg; translate: 38px 6px; } [data-stage="3"] .sq-copy.b { rotate: 17deg; translate: 78px 22px; }
.ws-msg { position: absolute; z-index: 7; left: -16%; bottom: -5%; display: flex; align-items: center; gap: 12px; width: min(300px, 82%); padding: 12px 14px; border-radius: 18px; background: rgb(28 30 26 / 82%); border: 1px solid rgb(255 255 255 / 16%); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgb(0 0 0 / 50%); color: #fff; opacity: 0; translate: -30px 24px; scale: .85; transition: opacity .5s, translate .8s cubic-bezier(.2, 1, .3, 1.25), scale .8s cubic-bezier(.2, 1, .3, 1.25); }
.ws-msg img { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 3px; }
.ws-msg div { min-width: 0; display: grid; gap: 3px; }
.ws-msg b { font: 700 13px/1.2 Montserrat, sans-serif; } .ws-msg em { margin-left: 6px; color: rgb(255 255 255 / 50%); font: 500 11px Montserrat, sans-serif; }
.ws-msg span { color: rgb(255 255 255 / 80%); font: 500 12.5px/1.35 Montserrat, sans-serif; }
.ws-msg svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--green, #338309); color: #fff; }
[data-stage="3"] .ws-msg { opacity: 1; translate: 0 0; scale: 1; transition-delay: .5s; }
[data-stage="3"] .sq-card { rotate: -3deg; translate: -22px -8px; scale: 1; }
[data-stage="3"] .ws-strip { opacity: 0; }
@media (max-width: 860px) { .ws-sw { display: none; } .ws-msg { left: -6%; bottom: -16px; width: 94%; padding: 9px 11px; gap: 9px; } .ws-msg span { font-size: 11px; } .ws-msg img { width: 32px; height: 32px; } [data-stage="3"] .sq-copy.a { translate: 24px 4px; } [data-stage="3"] .sq-copy.b { translate: 48px 14px; } }
@media (prefers-reduced-motion: reduce) { .sq-card > .sq-ink, .ws-layout, .ws-sw span, .sq-copy, .ws-msg { transition: none !important; } [data-stage="2"] .sq-card > .sq-scan { animation: none; } }
.ab-page main, .ab-dark { overflow-x: clip; }
.ab-big span:nth-of-type(even) { color: var(--green-text, #338309); }