/**
 * GloryPixel — анімації послуг.
 * Структура: <div class="gp-anim gp-anim-{card|lg}" data-anim="{slug}"><i>×6</i></div>
 * Тригер: JS додає клас .is-anim коли блок входить у viewport.
 */

/* ============== BASE ============== */

.gp-anim {
	position: relative;
	width: 100%;
	background: transparent;
	overflow: hidden;
	isolation: isolate;
	--c: var(--accent, #00E08A);
	--cg: var(--accent-glow, rgba(0,224,138,0.15));
	--line: var(--line-2, rgba(255,255,255,0.08));
}
.gp-anim-lg {
	/* На single-service hero — додаємо глибину через градієнт. */
	background: linear-gradient(135deg, var(--bg-2, #1A1A18) 0%, var(--bg, #0F0F0E) 100%);
}
.gp-anim-lg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 130%, var(--cg), transparent 60%);
	pointer-events: none;
}
.gp-anim i {
	position: absolute;
	display: block;
	box-sizing: border-box;
	opacity: 0;
}
.gp-anim-card { aspect-ratio: 16 / 7; }
.gp-anim-lg   { aspect-ratio: 16 / 7; max-height: 380px; }

/* Зменшити роль для prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.gp-anim i { opacity: 0.6 !important; animation: none !important; transition: none !important; }
}

/* ============== 01. LANDING-PAGE — browser frame + CTA pulse + cursor click ============== */
.gp-anim[data-anim="landing-page"] i:nth-child(1) {
	left: 8%; right: 8%; top: 12%; bottom: 12%;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: transparent;
	opacity: 1;
}
.gp-anim[data-anim="landing-page"] i:nth-child(2) {
	left: 8%; right: 8%; top: 12%; height: 14%;
	background: var(--line);
	border-radius: 6px 6px 0 0;
	opacity: 1;
}
.gp-anim[data-anim="landing-page"] i:nth-child(3) {
	left: 14%; top: 36%; width: 52%; height: 7%;
	background: var(--c);
	border-radius: 3px;
	opacity: 1;
}
.gp-anim[data-anim="landing-page"] i:nth-child(4) {
	left: 14%; top: 50%; width: 40%; height: 4%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
}
.gp-anim[data-anim="landing-page"] i:nth-child(5) {
	left: 14%; top: 64%; width: 22%; height: 12%;
	background: var(--c);
	border-radius: 4px;
	box-shadow: 0 0 20px var(--cg);
	opacity: 1;
}
.gp-anim[data-anim="landing-page"] i:nth-child(6) {
	/* cursor — trapezoid arrow shape via clip-path */
	left: 32%; top: 68%;
	width: 16px; height: 22px;
	background: var(--c);
	clip-path: polygon(0 0, 0 75%, 28% 60%, 45% 100%, 60% 90%, 42% 50%, 75% 50%);
	opacity: 0;
	border-radius: 0;
}
.gp-anim[data-anim="landing-page"].is-anim i:nth-child(5) { animation: gpaCTApulse 2.4s ease infinite; }
.gp-anim[data-anim="landing-page"].is-anim i:nth-child(6) { animation: gpaCursorClick 2.4s ease infinite; }
@keyframes gpaCTApulse {
	0%, 60% { transform: scale(1); }
	72%     { transform: scale(0.92); box-shadow: 0 0 12px var(--cg); }
	100%    { transform: scale(1); }
}
@keyframes gpaCursorClick {
	0%   { opacity: 0; transform: translate(80px, -50px); }
	30%  { opacity: 1; transform: translate(0, 0); }
	60%, 70% { opacity: 1; transform: translate(0, 0); }
	85%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* ============== 02. SAJT-VIZITKA — business card flip ============== */
.gp-anim[data-anim="sajt-vizitka"] { perspective: 800px; }
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(1) {
	left: 22%; top: 22%; width: 56%; height: 56%;
	background: var(--line);
	border-radius: 8px;
	border: 1px solid var(--line);
	transform-style: preserve-3d;
	opacity: 1;
	transform: rotateY(0deg);
}
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(2) {
	left: 30%; top: 38%; width: 32%; height: 6%;
	background: var(--c);
	border-radius: 2px;
	opacity: 1;
}
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(3) {
	left: 30%; top: 50%; width: 20%; height: 4%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
}
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(4) {
	left: 30%; top: 58%; width: 26%; height: 4%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
}
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(5),
.gp-anim[data-anim="sajt-vizitka"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="sajt-vizitka"].is-anim i:nth-child(1) {
	animation: gpaFlip 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes gpaFlip {
	0%, 30%   { transform: rotateY(0deg); }
	50%, 80%  { transform: rotateY(180deg); }
	100%      { transform: rotateY(360deg); }
}

/* ============== 03. KORPORATIVNYJ-SAJT — sitemap 4 boxes ============== */
.gp-anim[data-anim="korporativnyj-sajt"] i {
	width: 18%; height: 18%;
	background: var(--line);
	border: 1px solid var(--c);
	border-radius: 4px;
}
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(1) { left: 41%; top: 14%; background: var(--c); }
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(2) { left: 16%; top: 56%; }
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(3) { left: 41%; top: 56%; }
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(4) { left: 66%; top: 56%; }
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(5),
.gp-anim[data-anim="korporativnyj-sajt"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="korporativnyj-sajt"].is-anim i { animation: gpaPop .8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.gp-anim[data-anim="korporativnyj-sajt"].is-anim i:nth-child(1) { animation-delay: .0s; }
.gp-anim[data-anim="korporativnyj-sajt"].is-anim i:nth-child(2) { animation-delay: .25s; }
.gp-anim[data-anim="korporativnyj-sajt"].is-anim i:nth-child(3) { animation-delay: .35s; }
.gp-anim[data-anim="korporativnyj-sajt"].is-anim i:nth-child(4) { animation-delay: .45s; }
@keyframes gpaPop { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }

/* ============== 04. INFORMATSIJNYJ-SAJT — article rows scroll ============== */
.gp-anim[data-anim="informatsijnyj-sajt"] i {
	left: 8%; right: 8%; height: 5%;
	background: var(--line);
	border-radius: 2px;
	opacity: 0.5;
}
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(1) { top: 18%; width: 60%; }
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(2) { top: 32%; right: 35%; height: 4%; }
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(3) { top: 44%; right: 15%; height: 4%; }
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(4) { top: 58%; right: 40%; height: 4%; }
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(5) { top: 72%; right: 15%; height: 4%; }
.gp-anim[data-anim="informatsijnyj-sajt"] i:nth-child(6) { top: 18%; left: 76%; width: 16%; height: 60%; background: var(--c); border-radius: 4px; opacity: 0.18; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i { animation: gpaFadeUp 2s ease forwards; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(1) { animation-delay: .0s; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(2) { animation-delay: .15s; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(3) { animation-delay: .3s; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(4) { animation-delay: .45s; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(5) { animation-delay: .6s; }
.gp-anim[data-anim="informatsijnyj-sajt"].is-anim i:nth-child(6) { animation-delay: .8s; }
@keyframes gpaFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: var(--o, 0.5); transform: translateY(0); } }

/* ============== 05. WORDPRESS — plugin blocks snap ============== */
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i {
	width: 14%; height: 26%;
	background: var(--line);
	border-radius: 3px;
	top: 37%;
}
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(1) { left: 16%; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(2) { left: 33%; background: var(--c); box-shadow: 0 0 20px var(--cg); }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(3) { left: 50%; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(4) { left: 67%; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(5),
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"].is-anim i { animation: gpaSnap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"].is-anim i:nth-child(2) { animation-delay: .15s; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"].is-anim i:nth-child(3) { animation-delay: .3s; }
.gp-anim[data-anim="stvorennya-sajtiv-na-wordpress"].is-anim i:nth-child(4) { animation-delay: .45s; }
@keyframes gpaSnap {
	0%   { opacity: 0; transform: translateY(-30px) scale(0.6); }
	30%  { opacity: 1; transform: translateY(0) scale(1); }
	70%  { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* ============== 06. INTERNET-MAGAZIN — cart with items dropping ============== */
.gp-anim[data-anim="internet-magazin"] i {
	width: 10%; height: 18%;
	background: var(--line);
	border-radius: 3px;
}
.gp-anim[data-anim="internet-magazin"] i:nth-child(1) { left: 38%; top: 12%; }
.gp-anim[data-anim="internet-magazin"] i:nth-child(2) { left: 50%; top: 12%; background: var(--c); }
.gp-anim[data-anim="internet-magazin"] i:nth-child(3) { left: 62%; top: 12%; }
.gp-anim[data-anim="internet-magazin"] i:nth-child(4) { left: 35%; top: 60%; width: 30%; height: 28%; border: 2px solid var(--c); background: transparent; border-radius: 4px 4px 8px 8px; opacity: 1; }
.gp-anim[data-anim="internet-magazin"] i:nth-child(5) { left: 31%; top: 55%; width: 6%; height: 8%; background: var(--c); border-radius: 3px 3px 0 0; opacity: 1; }
.gp-anim[data-anim="internet-magazin"] i:nth-child(6) { left: 63%; top: 55%; width: 6%; height: 8%; background: var(--c); border-radius: 3px 3px 0 0; opacity: 1; }
.gp-anim[data-anim="internet-magazin"].is-anim i:nth-child(1) { animation: gpaDrop 2.4s ease-in infinite; animation-delay: 0s; }
.gp-anim[data-anim="internet-magazin"].is-anim i:nth-child(2) { animation: gpaDrop 2.4s ease-in infinite; animation-delay: .4s; }
.gp-anim[data-anim="internet-magazin"].is-anim i:nth-child(3) { animation: gpaDrop 2.4s ease-in infinite; animation-delay: .8s; }
@keyframes gpaDrop {
	0%   { opacity: 0; transform: translateY(-30px); }
	20%  { opacity: 1; transform: translateY(0); }
	60%  { opacity: 1; transform: translateY(160px); }
	61%, 100% { opacity: 0; }
}

/* ============== 07. SHOPIFY — product cards slide ============== */
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i {
	top: 25%; width: 22%; height: 50%;
	background: var(--line);
	border-radius: 6px;
	border: 1px solid var(--line);
}
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(1) { left: 8%; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(2) { left: 36%; background: var(--c); opacity: 0.6; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(3) { left: 64%; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(4),
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(5),
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"].is-anim i { animation: gpaSlideX 2.2s ease infinite; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"].is-anim i:nth-child(2) { animation-delay: .15s; }
.gp-anim[data-anim="stvorennya-sajtiv-na-shopify"].is-anim i:nth-child(3) { animation-delay: .3s; }
@keyframes gpaSlideX {
	0% { opacity: 0; transform: translateX(-30px); }
	30%, 70% { opacity: 1; transform: translateX(0); }
	100% { opacity: 0; transform: translateX(30px); }
}

/* ============== 08. SEO — rising bars ============== */
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i {
	bottom: 12%;
	width: 10%;
	background: var(--line);
	border-radius: 3px 3px 0 0;
	transform-origin: bottom;
	transform: scaleY(0);
	opacity: 1;
}
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(1) { left: 14%; height: 30%; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(2) { left: 28%; height: 45%; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(3) { left: 42%; height: 58%; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(4) { left: 56%; height: 70%; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(5) { left: 70%; height: 80%; background: var(--c); box-shadow: 0 0 20px var(--cg); }
.gp-anim[data-anim="prosuvannya-sajtu-seo"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i { animation: gpaGrowBar 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i:nth-child(2) { animation-delay: .1s; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i:nth-child(3) { animation-delay: .2s; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i:nth-child(4) { animation-delay: .3s; }
.gp-anim[data-anim="prosuvannya-sajtu-seo"].is-anim i:nth-child(5) { animation-delay: .4s; }
@keyframes gpaGrowBar { 0% { transform: scaleY(0); } 40%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* ============== 09. GOOGLE ADS — search bar with [Ad] badge ============== */
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(1) {
	left: 12%; right: 12%; top: 24%; height: 16%;
	background: var(--line);
	border-radius: 8px;
	opacity: 1;
}
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(2) {
	left: 16%; top: 30%; width: 35%; height: 4%;
	background: var(--c);
	border-radius: 2px;
}
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(3) {
	left: 12%; top: 50%; width: 12%; height: 10%;
	background: var(--c);
	border-radius: 3px;
	box-shadow: 0 0 12px var(--cg);
}
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(4) {
	left: 26%; top: 52%; width: 50%; height: 5%;
	background: var(--line);
	border-radius: 2px;
}
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(5) {
	left: 12%; top: 68%; width: 60%; height: 4%;
	background: var(--line);
	border-radius: 2px;
	opacity: 0.5;
}
.gp-anim[data-anim="kontekstnaya-reklama"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(2) { animation: gpaType 2.4s steps(20, end) infinite; }
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(3),
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(4),
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(5) { animation: gpaFadeIn 2.4s ease infinite; }
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(3) { animation-delay: .6s; }
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(4) { animation-delay: .7s; }
.gp-anim[data-anim="kontekstnaya-reklama"].is-anim i:nth-child(5) { animation-delay: 1.2s; }
@keyframes gpaType { 0% { width: 0; opacity: 0; } 10% { opacity: 1; } 40%, 80% { width: 35%; opacity: 1; } 100% { width: 0; opacity: 0; } }
@keyframes gpaFadeIn { 0%, 30% { opacity: 0; } 60%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ============== 10. SMM — hearts floating up ============== */
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i {
	bottom: 10%;
	width: 6%; aspect-ratio: 1;
	background: var(--c);
	clip-path: path('M 8 14 C 0 8, 0 0, 8 4 C 16 0, 16 8, 8 14 Z');
	transform: translateY(0) scale(0.6);
}
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(1) { left: 22%; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(2) { left: 36%; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(3) { left: 50%; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(4) { left: 64%; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(5) { left: 78%; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i { animation: gpaFloat 3s ease-out infinite; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i:nth-child(2) { animation-delay: .3s; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i:nth-child(3) { animation-delay: .6s; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i:nth-child(4) { animation-delay: .9s; }
.gp-anim[data-anim="reklama-v-sotsialnyh-setyah-smm"].is-anim i:nth-child(5) { animation-delay: 1.2s; }
@keyframes gpaFloat {
	0%   { opacity: 0; transform: translateY(0) scale(0.6); }
	20%  { opacity: 1; transform: translateY(-20px) scale(1); }
	100% { opacity: 0; transform: translateY(-160px) scale(1.2); }
}

/* ============== 11. EMAIL — envelope flying ============== */
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(1) {
	top: 38%; width: 18%; height: 22%;
	background: var(--c);
	border-radius: 3px;
	opacity: 1;
}
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(1)::before {
	content: ""; position: absolute; inset: 0;
	border-top: 2px solid var(--bg);
	border-image: linear-gradient(135deg, transparent 49%, var(--bg) 50%, transparent 51%) 1;
}
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(2),
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(3),
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(4) {
	top: 46%; width: 3%; height: 6%;
	background: var(--line);
	border-radius: 50%;
	opacity: 1;
}
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(2) { left: 22%; }
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(3) { left: 30%; }
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(4) { left: 38%; }
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(5),
.gp-anim[data-anim="e-mail-marketing"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="e-mail-marketing"].is-anim i:nth-child(1) { animation: gpaFly 3s ease-in-out infinite; }
.gp-anim[data-anim="e-mail-marketing"].is-anim i:nth-child(2) { animation: gpaTrail 3s ease-in-out infinite; animation-delay: .1s; }
.gp-anim[data-anim="e-mail-marketing"].is-anim i:nth-child(3) { animation: gpaTrail 3s ease-in-out infinite; animation-delay: .2s; }
.gp-anim[data-anim="e-mail-marketing"].is-anim i:nth-child(4) { animation: gpaTrail 3s ease-in-out infinite; animation-delay: .3s; }
@keyframes gpaFly { 0% { left: -20%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@keyframes gpaTrail { 0%, 15% { opacity: 0; } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(60px); } }

/* ============== 12. META ADS (Таргет) — phone feed + [Реклама] card highlight ============== */
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(1) {
	/* phone frame */
	left: 50%; top: 50%;
	width: 32%;
	aspect-ratio: 9 / 16;
	max-height: 90%;
	transform: translate(-50%, -50%);
	border: 2px solid var(--line);
	border-radius: 14px;
	background: transparent;
	opacity: 1;
}
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(2),
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(3),
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(4) {
	/* feed cards */
	left: 50%; top: 50%;
	width: 24%;
	height: 22%;
	transform: translate(-50%, 0);
	background: var(--line);
	border-radius: 5px;
	opacity: 0;
}
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(3) {
	/* the "Ad" card — accent */
	background: var(--c);
	opacity: 0.65;
	box-shadow: 0 0 24px var(--cg);
}
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(5) {
	/* [Ad] badge — sits on top-right of Ad card */
	left: 64%; top: 36%;
	width: 7%; height: 4%;
	background: var(--bg, #0F0F0E);
	border: 1px solid var(--c);
	border-radius: 2px;
	opacity: 0;
}
.gp-anim[data-anim="targetirovannaya-reklama"] i:nth-child(6) {
	/* heart/like icon */
	left: 38%; top: 38%;
	width: 4%; aspect-ratio: 1;
	background: var(--c);
	clip-path: path('M 8 14 C 0 8, 0 0, 8 4 C 16 0, 16 8, 8 14 Z');
	opacity: 0;
}
.gp-anim[data-anim="targetirovannaya-reklama"].is-anim i:nth-child(2) { animation: gpaFeedScroll 4.5s ease-in-out infinite; animation-delay: 0s; }
.gp-anim[data-anim="targetirovannaya-reklama"].is-anim i:nth-child(3) { animation: gpaFeedScroll 4.5s ease-in-out infinite; animation-delay: 1.5s; }
.gp-anim[data-anim="targetirovannaya-reklama"].is-anim i:nth-child(4) { animation: gpaFeedScroll 4.5s ease-in-out infinite; animation-delay: 3.0s; }
.gp-anim[data-anim="targetirovannaya-reklama"].is-anim i:nth-child(5) { animation: gpaAdBadge 4.5s ease infinite; animation-delay: 1.7s; }
.gp-anim[data-anim="targetirovannaya-reklama"].is-anim i:nth-child(6) { animation: gpaLikePop 4.5s ease infinite; animation-delay: 2.4s; }
@keyframes gpaFeedScroll {
	0%       { opacity: 0; transform: translate(-50%, 60px); }
	12%, 28% { opacity: 1; transform: translate(-50%, 0); }
	40%, 100% { opacity: 0; transform: translate(-50%, -60px); }
}
@keyframes gpaAdBadge {
	0%, 30%  { opacity: 0; transform: scale(0.6); }
	40%, 60% { opacity: 1; transform: scale(1); }
	70%, 100% { opacity: 0; }
}
@keyframes gpaLikePop {
	0%, 40%  { opacity: 0; transform: scale(0); }
	50%      { opacity: 1; transform: scale(1.3); }
	60%, 80% { opacity: 1; transform: scale(1); }
	100%     { opacity: 0; }
}

/* ============== 13. TIKTOK — vertical video scroll ============== */
.gp-anim[data-anim="reklama-v-tiktok"] i {
	left: 50%; top: 50%;
	width: 26%; aspect-ratio: 9 / 16;
	max-height: 80%;
	background: var(--line);
	border-radius: 8px;
	border: 2px solid var(--line);
	transform: translate(-50%, -50%);
}
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(1) { background: var(--c); opacity: 0; }
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(2) { opacity: 0; }
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(3) { opacity: 0; }
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(4),
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(5),
.gp-anim[data-anim="reklama-v-tiktok"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="reklama-v-tiktok"].is-anim i { animation: gpaSwipe 3s ease-in-out infinite; }
.gp-anim[data-anim="reklama-v-tiktok"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="reklama-v-tiktok"].is-anim i:nth-child(2) { animation-delay: 1s; }
.gp-anim[data-anim="reklama-v-tiktok"].is-anim i:nth-child(3) { animation-delay: 2s; }
@keyframes gpaSwipe {
	0%   { opacity: 0; transform: translate(-50%, 60%); }
	15%, 40% { opacity: 1; transform: translate(-50%, -50%); }
	60%  { opacity: 0; transform: translate(-50%, -160%); }
	100% { opacity: 0; transform: translate(-50%, -160%); }
}

/* ============== 14. CHAT-BOT — chat bubbles ============== */
.gp-anim[data-anim="rozrobka-chat-bota"] i {
	height: 14%;
	border-radius: 12px;
	background: var(--line);
}
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(1) { left: 12%; top: 20%; width: 34%; }
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(2) { right: 12%; top: 42%; width: 40%; background: var(--c); }
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(3) { left: 12%; top: 64%; width: 26%; }
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(4) { left: 18%; top: 67%; width: 3%; height: 8%; border-radius: 50%; background: var(--c); opacity: 1; }
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(5) { left: 23%; top: 67%; width: 3%; height: 8%; border-radius: 50%; background: var(--c); opacity: 1; }
.gp-anim[data-anim="rozrobka-chat-bota"] i:nth-child(6) { left: 28%; top: 67%; width: 3%; height: 8%; border-radius: 50%; background: var(--c); opacity: 1; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(1) { animation: gpaPopIn 4s ease infinite; animation-delay: 0s; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(2) { animation: gpaPopIn 4s ease infinite; animation-delay: .8s; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(3) { animation: gpaPopIn 4s ease infinite; animation-delay: 1.8s; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(4) { animation: gpaBlink 1.2s ease infinite; animation-delay: 0s; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(5) { animation: gpaBlink 1.2s ease infinite; animation-delay: .2s; }
.gp-anim[data-anim="rozrobka-chat-bota"].is-anim i:nth-child(6) { animation: gpaBlink 1.2s ease infinite; animation-delay: .4s; }
@keyframes gpaPopIn { 0%, 5% { opacity: 0; transform: scale(0.6); } 20%, 70% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; } }
@keyframes gpaBlink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ============== 15. CHATGPT — typewriter ============== */
.gp-anim[data-anim="reklama-v-chatgpt"] i {
	left: 10%; height: 5%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
	transform-origin: left;
	transform: scaleX(0);
}
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(1) { top: 22%; width: 70%; }
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(2) { top: 38%; width: 55%; }
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(3) { top: 54%; width: 65%; background: var(--c); }
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(4) { top: 70%; width: 40%; }
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(5) { top: 22%; left: auto; right: 18%; width: 2%; height: 5%; background: var(--c); border-radius: 1px; box-shadow: 0 0 8px var(--cg); transform: none; opacity: 1; animation: gpaCursor 1s steps(2) infinite; }
.gp-anim[data-anim="reklama-v-chatgpt"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="reklama-v-chatgpt"].is-anim i:nth-child(1) { animation: gpaTypeRow 4s ease infinite; animation-delay: 0s; }
.gp-anim[data-anim="reklama-v-chatgpt"].is-anim i:nth-child(2) { animation: gpaTypeRow 4s ease infinite; animation-delay: .5s; }
.gp-anim[data-anim="reklama-v-chatgpt"].is-anim i:nth-child(3) { animation: gpaTypeRow 4s ease infinite; animation-delay: 1s; }
.gp-anim[data-anim="reklama-v-chatgpt"].is-anim i:nth-child(4) { animation: gpaTypeRow 4s ease infinite; animation-delay: 1.5s; }
@keyframes gpaTypeRow { 0%, 5% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gpaCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============== 16. NEJMING — letters spinning ============== */
.gp-anim[data-anim="nejming"] i {
	top: 35%; width: 12%; height: 30%;
	background: var(--line);
	border-radius: 4px;
	transform: rotateY(0);
}
.gp-anim[data-anim="nejming"] i:nth-child(1) { left: 16%; }
.gp-anim[data-anim="nejming"] i:nth-child(2) { left: 30%; }
.gp-anim[data-anim="nejming"] i:nth-child(3) { left: 44%; background: var(--c); }
.gp-anim[data-anim="nejming"] i:nth-child(4) { left: 58%; }
.gp-anim[data-anim="nejming"] i:nth-child(5) { left: 72%; }
.gp-anim[data-anim="nejming"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="nejming"].is-anim i { animation: gpaLetter 3s ease infinite; }
.gp-anim[data-anim="nejming"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="nejming"].is-anim i:nth-child(2) { animation-delay: .15s; }
.gp-anim[data-anim="nejming"].is-anim i:nth-child(3) { animation-delay: .3s; }
.gp-anim[data-anim="nejming"].is-anim i:nth-child(4) { animation-delay: .45s; }
.gp-anim[data-anim="nejming"].is-anim i:nth-child(5) { animation-delay: .6s; }
@keyframes gpaLetter {
	0%   { opacity: 0; transform: rotateY(-90deg) scale(0.5); }
	30%, 70% { opacity: 1; transform: rotateY(0deg) scale(1); }
	100% { opacity: 0; transform: rotateY(90deg) scale(0.5); }
}

/* ============== 17. FIRMOVYJ-STYL — color swatches ============== */
.gp-anim[data-anim="firmovyj-styl"] i {
	top: 30%; width: 14%; height: 40%;
	border-radius: 50%;
	transform: scale(0);
	opacity: 1;
}
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(1) { left: 12%; background: var(--c); }
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(2) { left: 28%; background: #5BC0FF; }
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(3) { left: 44%; background: #FFAA46; }
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(4) { left: 60%; background: #FF6B9E; }
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(5) { left: 76%; background: #C8C5BE; }
.gp-anim[data-anim="firmovyj-styl"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i { animation: gpaBreathe 3s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i:nth-child(2) { animation-delay: .15s; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i:nth-child(3) { animation-delay: .3s; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i:nth-child(4) { animation-delay: .45s; }
.gp-anim[data-anim="firmovyj-styl"].is-anim i:nth-child(5) { animation-delay: .6s; }
@keyframes gpaBreathe { 0% { transform: scale(0); } 30%, 70% { transform: scale(1); } 100% { transform: scale(0.7); opacity: 0; } }

/* ============== 18. LOGOTYPA — shape morph (square→circle→triangle) ============== */
.gp-anim[data-anim="stvorennya-logotypa"] i {
	left: 50%; top: 50%;
	width: 24%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: var(--c);
	box-shadow: 0 0 30px var(--cg);
	opacity: 1;
}
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(1) { animation: gpaMorph 4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(2),
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(3),
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(4),
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(5),
.gp-anim[data-anim="stvorennya-logotypa"] i:nth-child(6) { display: none; }
@keyframes gpaMorph {
	0%, 100% { border-radius: 8px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translate(-50%, -50%) rotate(0deg); }
	33%      { border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translate(-50%, -50%) rotate(180deg); }
	66%      { border-radius: 8px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============== 19. BRENDBUKA — pages flipping ============== */
.gp-anim[data-anim="rozrobka-brendbuka"] {
	perspective: 800px;
}
.gp-anim[data-anim="rozrobka-brendbuka"] i {
	left: 50%; top: 20%;
	width: 30%; height: 60%;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 0 6px 6px 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	opacity: 1;
}
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(1) { transform: rotateY(0deg); z-index: 3; }
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(2) { transform: rotateY(0deg); z-index: 2; background: var(--c); opacity: 0.4; }
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(3) { transform: rotateY(0deg); z-index: 1; }
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(4),
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(5),
.gp-anim[data-anim="rozrobka-brendbuka"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="rozrobka-brendbuka"].is-anim i:nth-child(1) { animation: gpaFlipPage 3s ease-in-out infinite; animation-delay: 0s; }
.gp-anim[data-anim="rozrobka-brendbuka"].is-anim i:nth-child(2) { animation: gpaFlipPage 3s ease-in-out infinite; animation-delay: 1s; }
.gp-anim[data-anim="rozrobka-brendbuka"].is-anim i:nth-child(3) { animation: gpaFlipPage 3s ease-in-out infinite; animation-delay: 2s; }
@keyframes gpaFlipPage {
	0%, 10% { transform: rotateY(0deg); }
	50%     { transform: rotateY(-160deg); }
	60%, 100% { transform: rotateY(-160deg); opacity: 0; }
}

/* ============== 20. PREZENTATSIJ — slides advancing ============== */
.gp-anim[data-anim="stvorennya-prezentatsij"] i {
	left: 50%; top: 28%;
	width: 50%; height: 50%;
	background: var(--line);
	border-radius: 4px;
	border: 1px solid var(--line);
	transform: translate(-50%, 0);
	opacity: 0;
}
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(1) { background: linear-gradient(135deg, var(--c) 30%, var(--line) 30%); }
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(2) { background: linear-gradient(135deg, var(--line) 30%, var(--c) 30% 50%, var(--line) 50%); }
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(3) { background: linear-gradient(135deg, var(--line) 60%, var(--c) 60%); }
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(4) { background: linear-gradient(135deg, var(--c) 70%, var(--line) 70%); }
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(5),
.gp-anim[data-anim="stvorennya-prezentatsij"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="stvorennya-prezentatsij"].is-anim i { animation: gpaSlide 4s ease infinite; }
.gp-anim[data-anim="stvorennya-prezentatsij"].is-anim i:nth-child(1) { animation-delay: 0s; }
.gp-anim[data-anim="stvorennya-prezentatsij"].is-anim i:nth-child(2) { animation-delay: 1s; }
.gp-anim[data-anim="stvorennya-prezentatsij"].is-anim i:nth-child(3) { animation-delay: 2s; }
.gp-anim[data-anim="stvorennya-prezentatsij"].is-anim i:nth-child(4) { animation-delay: 3s; }
@keyframes gpaSlide { 0% { opacity: 0; transform: translate(20%, 0); } 8%, 20% { opacity: 1; transform: translate(-50%, 0); } 28%, 100% { opacity: 0; transform: translate(-120%, 0); } }

/* ============== 21. USPACY CRM — kanban cards ============== */
.gp-anim[data-anim="uspacy"] i {
	width: 22%; height: 16%;
	background: var(--line);
	border-radius: 3px;
	opacity: 1;
}
.gp-anim[data-anim="uspacy"] i:nth-child(1) { left: 8%; top: 18%; }
.gp-anim[data-anim="uspacy"] i:nth-child(2) { left: 8%; top: 38%; }
.gp-anim[data-anim="uspacy"] i:nth-child(3) { left: 39%; top: 18%; }
.gp-anim[data-anim="uspacy"] i:nth-child(4) { left: 39%; top: 38%; background: var(--c); }
.gp-anim[data-anim="uspacy"] i:nth-child(5) { left: 70%; top: 18%; }
.gp-anim[data-anim="uspacy"] i:nth-child(6) { left: 70%; top: 38%; }
.gp-anim[data-anim="uspacy"].is-anim i:nth-child(4) { animation: gpaMoveCard 3s ease-in-out infinite; }
@keyframes gpaMoveCard {
	0%, 100% { left: 8%; top: 18%; }
	33%      { left: 39%; top: 38%; }
	66%      { left: 70%; top: 18%; }
}

/* ============== 22. QUIZ — question flip ============== */
.gp-anim[data-anim="quiz"] { perspective: 800px; }
.gp-anim[data-anim="quiz"] i:nth-child(1) {
	left: 25%; top: 20%; width: 50%; height: 60%;
	background: var(--line);
	border-radius: 8px;
	border: 1px solid var(--line);
	transform-style: preserve-3d;
	opacity: 1;
}
.gp-anim[data-anim="quiz"] i:nth-child(2) {
	left: 35%; top: 36%; width: 30%; height: 8%;
	background: var(--c);
	border-radius: 3px;
	opacity: 0;
}
.gp-anim[data-anim="quiz"] i:nth-child(3) {
	left: 35%; top: 50%; width: 20%; height: 6%;
	background: var(--line);
	border-radius: 3px;
	opacity: 0;
}
.gp-anim[data-anim="quiz"] i:nth-child(4) {
	left: 35%; top: 60%; width: 26%; height: 6%;
	background: var(--line);
	border-radius: 3px;
	opacity: 0;
}
.gp-anim[data-anim="quiz"] i:nth-child(5),
.gp-anim[data-anim="quiz"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="quiz"].is-anim i:nth-child(1) { animation: gpaCardFlip 3s ease-in-out infinite; }
.gp-anim[data-anim="quiz"].is-anim i:nth-child(2) { animation: gpaFadeAt 3s ease infinite; animation-delay: 1s; }
.gp-anim[data-anim="quiz"].is-anim i:nth-child(3) { animation: gpaFadeAt 3s ease infinite; animation-delay: 1.2s; }
.gp-anim[data-anim="quiz"].is-anim i:nth-child(4) { animation: gpaFadeAt 3s ease infinite; animation-delay: 1.4s; }
@keyframes gpaCardFlip { 0%, 10% { transform: rotateY(0deg); } 40%, 90% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }
@keyframes gpaFadeAt { 0%, 30% { opacity: 0; } 50%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ============== 23. TELEFONIYI — ring waves ============== */
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i {
	left: 50%; top: 50%;
	border: 2px solid var(--c);
	border-radius: 50%;
	background: transparent;
	transform: translate(-50%, -50%) scale(0);
}
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(1) { width: 16%; aspect-ratio: 1; background: var(--c); box-shadow: 0 0 20px var(--cg); opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(2) { width: 30%; aspect-ratio: 1; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(3) { width: 50%; aspect-ratio: 1; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(4) { width: 70%; aspect-ratio: 1; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(5) { width: 90%; aspect-ratio: 1; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"].is-anim i:nth-child(1) { animation: gpaPulse 2s ease-in-out infinite; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"].is-anim i:nth-child(2) { animation: gpaRipple 2s ease-out infinite; animation-delay: 0s; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"].is-anim i:nth-child(3) { animation: gpaRipple 2s ease-out infinite; animation-delay: .3s; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"].is-anim i:nth-child(4) { animation: gpaRipple 2s ease-out infinite; animation-delay: .6s; }
.gp-anim[data-anim="pidklyuchennya-telefoniyi"].is-anim i:nth-child(5) { animation: gpaRipple 2s ease-out infinite; animation-delay: .9s; }
@keyframes gpaPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes gpaRipple { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }

/* ============== 24. VORONKA — funnel with drops ============== */
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(1) {
	left: 50%; top: 18%;
	width: 70%; height: 64%;
	background: var(--line);
	clip-path: polygon(0 0, 100% 0, 65% 60%, 65% 100%, 35% 100%, 35% 60%);
	transform: translateX(-50%);
	opacity: 1;
}
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(2) {
	left: 50%; top: 18%;
	width: 70%; height: 64%;
	background: var(--c);
	clip-path: polygon(0 0, 100% 0, 65% 60%, 65% 100%, 35% 100%, 35% 60%);
	transform: translateX(-50%) scaleY(0);
	transform-origin: top;
	opacity: 0.3;
}
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(3),
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(4),
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(5) {
	left: 48.5%; top: 78%;
	width: 3%; height: 6%;
	background: var(--c);
	border-radius: 50%;
	opacity: 0;
}
.gp-anim[data-anim="voronka-prodazh"] i:nth-child(6) { display: none; }
.gp-anim[data-anim="voronka-prodazh"].is-anim i:nth-child(2) { animation: gpaFillFunnel 3s ease-in-out infinite; }
.gp-anim[data-anim="voronka-prodazh"].is-anim i:nth-child(3) { animation: gpaDrip 3s ease-in infinite; animation-delay: .5s; }
.gp-anim[data-anim="voronka-prodazh"].is-anim i:nth-child(4) { animation: gpaDrip 3s ease-in infinite; animation-delay: 1.3s; }
.gp-anim[data-anim="voronka-prodazh"].is-anim i:nth-child(5) { animation: gpaDrip 3s ease-in infinite; animation-delay: 2.1s; }
@keyframes gpaFillFunnel { 0%, 100% { transform: translateX(-50%) scaleY(0); } 50% { transform: translateX(-50%) scaleY(1); } }
@keyframes gpaDrip { 0%, 30% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(10px); } 70% { opacity: 1; transform: translateY(30px); } 100% { opacity: 0; transform: translateY(60px); } }

/* ============== Card vs Lg sizing nuances ============== */
.gp-anim-lg { border-radius: 12px; aspect-ratio: 16 / 6; max-height: 420px; }
.gp-anim-card { border-radius: 0; }

/* sv-item integration — анімація як частина картки, без розділювача */
.sv-item .gp-anim-card {
	margin: -32px calc(-1 * var(--gutter)) 4px;
	width: calc(100% + 2 * var(--gutter));
}

/* ============== Single-service: media-card hero (Variant C from standalone) ============== */

.single-service .page-hero { padding: 32px 0 56px; border-bottom: 1px solid var(--line); }
.single-service .page-hero-grid {
	position: relative;
	grid-template-columns: 1.25fr 1fr;
	gap: 56px;
	align-items: stretch;
	min-height: clamp(420px, 62vh, 640px);
}

/* Background media card — sits behind the title + side overlay */
.single-service .page-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--line);
	border-radius: 18px;
	background:
		radial-gradient(110% 90% at 85% 0%, rgba(0, 224, 138, 0.08), transparent 60%),
		linear-gradient(180deg, #10130F 0%, #0A0C0B 100%);
	overflow: hidden;
}
.single-service .page-hero-media::before {
	content: "";
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px);
	pointer-events: none;
}
.single-service .page-hero-media::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(60% 90% at 18% 50%, rgba(10, 12, 11, 0.88), transparent 70%);
	pointer-events: none;
}
.single-service .page-hero-media .ph-tag {
	position: absolute;
	top: 18px; right: 22px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex; align-items: center; gap: 8px;
	z-index: 2;
}
.single-service .page-hero-media .ph-tag::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.single-service .page-hero-media .ph-corner {
	position: absolute;
	bottom: 18px; right: 22px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	width: 64px; height: 22px;
	box-shadow: 0 0 14px var(--accent-glow) inset;
	z-index: 2;
}
.single-service .page-hero-media .ph-frame {
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	width: 46%;
	aspect-ratio: 16/9;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	overflow: hidden;
}
.single-service .page-hero-media .ph-frame .gp-anim {
	position: absolute;
	inset: 0;
	background: transparent;
	border-radius: 0;
	aspect-ratio: auto;
	max-height: none;
	width: 100%;
	height: 100%;
}

/* Foreground columns over the media card */
.single-service .page-hero-grid > .reveal:first-of-type,
.single-service .page-hero-side {
	position: relative;
	z-index: 1;
}
.single-service .page-hero-grid > .reveal:first-of-type {
	padding: 36px 0 36px 36px;
	align-self: center;
}
.single-service .page-hero h1 {
	font-size: clamp(56px, 7vw, 120px);
	line-height: 0.92;
}
.single-service .page-hero-side {
	justify-content: flex-end;
	align-self: end;
	padding: 24px;
	margin: 24px 24px 24px auto;
	gap: 18px;
	background: rgba(10, 12, 11, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 420px;
}
.single-service .page-hero-side p { font-size: 15px; }

/* Animation-frame variant — fills .ph-frame */
.gp-anim-frame {
	position: relative;
	width: 100%;
	height: 100%;
	background: transparent;
}

@media (max-width: 980px) {
	.single-service .page-hero-grid { min-height: 0; grid-template-columns: 1fr; }
	.single-service .page-hero-media { position: relative; aspect-ratio: 16/10; }
	.single-service .page-hero-grid > .reveal:first-of-type { padding: 24px; }
	.single-service .page-hero-side { margin: -120px 16px 16px; max-width: none; }
	.single-service .page-hero-media .ph-frame { width: 70%; }
}

/* ============== ASO — App Store Optimization ==============
 * Концепція: великий app-icon (rounded square) ліворуч,
 * 5 зірок зʼявляються лівою-правою (rating 5.0),
 * крихітна зелена growth-стрілка зверху-справа (ranking up).
 * Loop: 3.6s.
 *
 * i1 — app icon (rounded square, з glow)
 * i2..i6 — 5 зірок (clip-path polygon), staggered fade-in
 */
.gp-anim[data-anim="aso-app-store-optimization"] {
	/* Контейнер */
}
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(1) {
	/* App icon — large rounded square, лівий бік */
	left: 12%;
	top: 22%;
	width: 26%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--c) 0%, var(--accent-dim, #008C56) 100%);
	border-radius: 22%;
	box-shadow: 0 0 24px var(--cg), inset 0 1px 0 rgba(255,255,255,0.18);
	opacity: 1;
	/* Внутрішня деталь — крапка "поверх" іконки, як індикатор оновлення */
	overflow: visible;
}
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(1)::after {
	/* Bright highlight у іконці — символ */
	content: "";
	position: absolute;
	left: 22%;
	top: 22%;
	right: 22%;
	bottom: 22%;
	border: 2px solid rgba(255,255,255,0.85);
	border-radius: 18%;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

/* Зірки — спільні стилі (5 штук) */
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(n+2):nth-child(-n+6) {
	top: 40%;
	width: 9%;
	aspect-ratio: 1 / 1;
	background: var(--c);
	clip-path: polygon(
		50% 2%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 95%,
		50% 72%,
		21% 95%,
		32% 57%,
		2% 35%,
		39% 35%
	);
	box-shadow: 0 0 12px var(--cg);
	opacity: 0;
	transform: scale(0.4);
	transform-origin: center;
}
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(2) { left: 44%; }
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(3) { left: 55%; }
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(4) { left: 66%; }
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(5) { left: 77%; }
.gp-anim[data-anim="aso-app-store-optimization"] i:nth-child(6) { left: 88%; }

/* Animation: зірки загораються одна за одною, лишаються, потім fade-out */
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(n+2):nth-child(-n+6) {
	animation: gpaStarPop 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(2) { animation-delay: 0.1s; }
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(3) { animation-delay: 0.3s; }
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(4) { animation-delay: 0.5s; }
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(5) { animation-delay: 0.7s; }
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(6) { animation-delay: 0.9s; }

/* App icon — пульсація glow в момент рейтингу */
.gp-anim[data-anim="aso-app-store-optimization"].is-anim i:nth-child(1) {
	animation: gpaAppPulse 3.6s ease-in-out infinite;
}

@keyframes gpaStarPop {
	0%, 5%      { opacity: 0; transform: scale(0.4) rotate(-20deg); }
	18%         { opacity: 1; transform: scale(1.25) rotate(0deg); }
	28%, 70%    { opacity: 1; transform: scale(1) rotate(0deg); }
	88%, 100%   { opacity: 0; transform: scale(0.4) rotate(20deg); }
}
@keyframes gpaAppPulse {
	0%, 100%    { box-shadow: 0 0 18px var(--cg), inset 0 1px 0 rgba(255,255,255,0.18); transform: scale(1); }
	30%, 70%    { box-shadow: 0 0 36px var(--cg), 0 0 60px rgba(0,224,138,0.25), inset 0 1px 0 rgba(255,255,255,0.18); transform: scale(1.04); }
}

/* Lg-варіант (single hero) — додамо growth-bar справа знизу */
.gp-anim-lg[data-anim="aso-app-store-optimization"] i:nth-child(1) {
	left: 14%;
	top: 18%;
	width: 24%;
}
.gp-anim-lg[data-anim="aso-app-store-optimization"]::after {
	/* Tiny growth-bar internal: маленький бар-чарт */
	content: "↑ TOP-10";
	position: absolute;
	right: 8%;
	top: 14%;
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--c);
	opacity: 0.7;
	text-transform: uppercase;
	pointer-events: none;
}

/* ============== GEO — Generative Engine Optimization ==============
 * Концепція: AI chat-bubble (велика рамка), всередині три рядки
 * «згенерованої відповіді» (typing-effect), посередині — підсвічений
 * brand-mention (зелений pill), навколо — sparkles (4-pointed AI-stars).
 *
 * i1 — chat-bubble frame (rounded rectangle, border)
 * i2 — response line 1 (top, фуллрядок)
 * i3 — brand mention pill (highlighted, green)
 * i4 — response line 2 (bottom, частковий рядок)
 * i5, i6 — AI sparkles (4-point star clip-path)
 */
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(1) {
	/* Chat bubble frame */
	left: 8%;
	right: 8%;
	top: 18%;
	bottom: 18%;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 60%);
	opacity: 1;
	overflow: visible;
}
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(1)::before {
	/* Маленький tail-індикатор бабли (трикутник лівіше) */
	content: "";
	position: absolute;
	left: 22px;
	bottom: -8px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--line);
}
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(1)::after {
	/* Мітка "AI" у верхньому-лівому куті бабли — нативно вшита */
	content: "AI";
	position: absolute;
	top: 8px;
	left: 14px;
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--c);
	opacity: 0.55;
}

/* Response lines (typing effect) */
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(2) {
	left: 14%;
	top: 36%;
	width: 0;
	height: 5%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
}
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(4) {
	left: 14%;
	top: 60%;
	width: 0;
	height: 5%;
	background: var(--line);
	border-radius: 2px;
	opacity: 1;
}

/* Brand mention pill — підсвічений шматок, символізує згадку */
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(3) {
	left: 30%;
	top: 47%;
	width: 22%;
	height: 9%;
	background: var(--c);
	border-radius: 4px;
	box-shadow: 0 0 16px var(--cg);
	opacity: 0;
	transform: scale(0.85);
	transform-origin: center;
}

/* Sparkles — 4-point AI stars (нагадують AI-shimmer) */
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(5),
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(6) {
	width: 7%;
	aspect-ratio: 1;
	background: var(--c);
	clip-path: polygon(
		50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%
	);
	box-shadow: 0 0 14px var(--cg);
	opacity: 0;
	transform: scale(0.3);
}
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(5) {
	right: 14%;
	top: 12%;
}
.gp-anim[data-anim="geo-generative-engine-optimization"] i:nth-child(6) {
	left: 12%;
	bottom: 12%;
}

/* Animations: typing + pill pop + sparkles twinkle, looped 4s */
.gp-anim[data-anim="geo-generative-engine-optimization"].is-anim i:nth-child(2) {
	animation: gpaGeoTypeA 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gp-anim[data-anim="geo-generative-engine-optimization"].is-anim i:nth-child(4) {
	animation: gpaGeoTypeB 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	animation-delay: 0.4s;
}
.gp-anim[data-anim="geo-generative-engine-optimization"].is-anim i:nth-child(3) {
	animation: gpaGeoPill 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
	animation-delay: 0.9s;
}
.gp-anim[data-anim="geo-generative-engine-optimization"].is-anim i:nth-child(5) {
	animation: gpaGeoTwinkle 4s ease-in-out infinite;
	animation-delay: 0.6s;
}
.gp-anim[data-anim="geo-generative-engine-optimization"].is-anim i:nth-child(6) {
	animation: gpaGeoTwinkle 4s ease-in-out infinite;
	animation-delay: 1.4s;
}

@keyframes gpaGeoTypeA {
	0%, 5%      { width: 0; opacity: 0.4; }
	30%         { width: 55%; opacity: 1; background: var(--line); }
	75%, 85%    { width: 72%; opacity: 1; background: var(--line); }
	100%        { width: 0; opacity: 0; }
}
@keyframes gpaGeoTypeB {
	0%, 10%     { width: 0; opacity: 0.4; }
	35%         { width: 40%; opacity: 1; background: var(--line); }
	75%, 85%    { width: 58%; opacity: 1; background: var(--line); }
	100%        { width: 0; opacity: 0; }
}
@keyframes gpaGeoPill {
	0%, 18%     { opacity: 0; transform: scale(0.7); }
	28%         { opacity: 1; transform: scale(1.1); }
	38%, 78%    { opacity: 1; transform: scale(1); box-shadow: 0 0 22px var(--cg), 0 0 40px rgba(0,224,138,0.18); }
	88%, 100%   { opacity: 0; transform: scale(0.85); }
}
@keyframes gpaGeoTwinkle {
	0%, 15%     { opacity: 0; transform: scale(0.3) rotate(0deg); }
	30%         { opacity: 1; transform: scale(1.1) rotate(45deg); }
	45%, 70%    { opacity: 0.85; transform: scale(1) rotate(45deg); }
	85%, 100%   { opacity: 0; transform: scale(0.4) rotate(90deg); }
}

/* Lg-варіант (single hero) — додаємо label справа */
.gp-anim-lg[data-anim="geo-generative-engine-optimization"]::after {
	content: "ChatGPT · Perplexity · AI Mode";
	position: absolute;
	right: 8%;
	bottom: 6%;
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--muted, #7A7A75);
	opacity: 0.65;
	text-transform: uppercase;
	pointer-events: none;
}