/* ВАТР — компактные зелёные блоки и анимации */

/* ---------- Полоса прогресса прокрутки ---------- */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none;
	background: linear-gradient(90deg, var(--green), var(--lime), var(--yellow));
	transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* ---------- Главный экран ---------- */
.hero { isolation: isolate; background-position: 100% calc(50% + var(--py, 0px)); }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 80% at 15% 40%, rgba(255,255,255,.14), transparent 70%);
}
.hero-leaf {
	position: absolute; z-index: -1; border-radius: 0 100% 0 100%; opacity: .55; pointer-events: none;
	animation: leaf-float 9s ease-in-out infinite;
}
.hero-leaf.l1 { width: 120px; height: 120px; left: 46%; top: 12%; background: var(--lime); animation-delay: -2s; }
.hero-leaf.l2 { width: 70px; height: 70px; left: 38%; bottom: 14%; background: var(--yellow); animation-duration: 11s; }
.hero-leaf.l3 { width: 44px; height: 44px; left: 58%; bottom: 30%; background: #fff; opacity: .25; animation-duration: 7s; animation-delay: -4s; }
@keyframes leaf-float {
	0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
	50% { transform: translate3d(12px,-18px,0) rotate(14deg); }
}
.js .hero-text > * { opacity: 0; transform: translateY(24px); filter: blur(6px); animation: hero-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero-text > :nth-child(1) { animation-delay: .05s; }
.js .hero-text > :nth-child(2) { animation-delay: .18s; }
.js .hero-text > :nth-child(3) { animation-delay: .32s; }
.js .hero-text > :nth-child(4) { animation-delay: .46s; }
@keyframes hero-in { to { opacity: 1; transform: none; filter: none; } }
.hero-title { background: linear-gradient(90deg, #fff 0%, #fff 40%, #f6ffd6 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear 1.2s infinite; }
.js .hero-text > .hero-title { animation: hero-in .9s cubic-bezier(.2,.7,.2,1) .18s forwards, shimmer 6s linear 1.4s infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- Кнопки: блик ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 130%; }

/* ---------- Появление при прокрутке ---------- */
.js .reveal {
	opacity: 0; transform: translateY(28px); filter: blur(4px);
	transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s;
	transition-delay: var(--d, 0ms);
}
.js .reveal-afr, .js .reveal-left { transform: translateX(-28px); }
.js .reveal-right { transform: translateX(28px); }
.js .reveal-zoom { transform: scale(.94); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Картинки «раскрываются» шторкой: зелёная панель уезжает, фото проявляется */
.pic { position: relative; }
.js .pic.reveal { filter: none; transform: translateY(20px); }
.js .pic.reveal::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
	background: linear-gradient(135deg, var(--green), var(--lime));
	transform-origin: right; transition: transform 1s cubic-bezier(.7,0,.2,1); transition-delay: calc(var(--d, 0ms) + .15s);
}
.js .pic.reveal img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .pic.reveal.is-in::after { transform: scaleX(0); }
.js .pic.reveal.is-in img { transform: none; }

/* Заголовки: акцентная линия прорисовывается */
.vr h1.txt, .vr h3.txt, .page-head h1, .vr .rich > h3:first-child {
	position: relative; padding-bottom: .45em;
}
.vr h1.txt::after, .vr h3.txt::after, .page-head h1::after, .vr .rich > h3:first-child::after {
	content: ""; position: absolute; bottom: 0; left: 0; width: 64px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, var(--green), var(--lime));
	transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1) .25s;
}
.vr .txt.is-center::after, .vr .rich > h3[style*="center"]:first-child::after { left: 50%; margin-left: -32px; transform-origin: center; }
.vr h1.txt.is-in::after, .vr h3.txt.is-in::after, .page-head h1.is-in::after, .rich.is-in > h3:first-child::after { transform: scaleX(1); }
.js .page-head h1:not(.is-in)::after { transform: scaleX(0); }

/* Преимущества: цифры «выпрыгивают» */
.benefit { transition: transform .3s, box-shadow .3s; }
.benefit:hover { transform: translateX(6px); box-shadow: 0 10px 24px rgba(24,28,27,.08); }
.js .benefit .benefit-num { transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d, 0ms) + .25s); }
.js .benefit.is-in .benefit-num { transform: scale(1); }

/* Карусель: подъём при наведении */
.carousel-track .pic a { transition: transform .35s, box-shadow .35s; }
.carousel-track .pic a:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,.16); }

/* ---------- Компактный зелёный блок ---------- */
.vr-bg { overflow: hidden; }
.vr-bg::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(30,159,85,.55) 0%, rgba(30,159,85,.15) 60%, transparent 100%);
}
.vr-bg > .container { position: relative; }
.vr-cards .vc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.vr-cards .vc > * + * { margin-top: 0; }
.vr-cards .vc-empty { display: none; }
.gcard {
	position: relative; padding: 22px 22px 18px; border-radius: 16px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	font-size: .95rem; line-height: 1.5;
	transition: transform .35s, background .35s;
}
.gcard:hover { transform: translateY(-4px); background: rgba(255,255,255,.16); }
.gcard::before {
	content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--yellow), var(--lime));
}
.gcard h4, .gcard .txt:is(h4) { font-size: 1.12rem; margin: 0 0 .7em; line-height: 1.25; }
.gcard .txt-icon { margin: 0 0 6px; }
.gcard .txt-icon .ico { width: 16px; height: 16px; margin-top: .22em; }
.gcard .rich p { margin-bottom: .6em; }
.gcard .rich ul li { margin-bottom: .35em; }
.gcard > .rich:first-child h4:first-child { margin-top: 0; }
.gcard .sep { display: none; }
.gcard .reveal { transition-delay: calc(var(--i, 0) * 60ms + var(--cd, 0ms)); }
/* Галочки прорисовываются */
.js .gcard .txt-icon .ico path { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 40; stroke-dashoffset: 40; fill-opacity: 0; transition: stroke-dashoffset .7s ease, fill-opacity .4s ease .5s; transition-delay: calc(var(--i, 0) * 60ms + var(--cd, 0ms) + .2s); }
.js .gcard .txt-icon.is-in .ico path { stroke-dashoffset: 0; fill-opacity: 1; }

/* ---------- Подвал ---------- */
.footer-land { background-position: center bottom; margin-bottom: -1px; }

@media (max-width: 900px) {
	.js .reveal-left, .js .reveal-right, .js .reveal-afr { transform: translateY(24px); }
}
@media (max-width: 640px) {
	.vr-cards .vc { grid-template-columns: 1fr; }
	.hero-leaf { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal, .js .hero-text > *, .js .pic.reveal, .js .pic.reveal img { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
	.js .gcard .txt-icon .ico path { stroke-dashoffset: 0; fill-opacity: 1; }
	.js .benefit .benefit-num { transform: none; }
	.scroll-progress { display: none; }
}

/* Таблицы не переносить посимвольно */
.rich table, .rich td, .rich th { overflow-wrap: normal; word-break: normal; }
.rich td { white-space: nowrap; }
.rich td[rowspan] { white-space: normal; min-width: 120px; }