/* =========== © 2024 Centroarts.com for https://magenta.su =========== */

:root {
	--first-title-size: 36px;
	--second-title-size: 28px;
	--block-title-size: 20px;
	--block-title-lh: 28px;
	--block-text-size: 18px;
	--color-body: #FAFAFA;
	--section-radius: 32px;
	--radius-box: 24px;
}
@media (min-width: 1240px) {
	:root {
		--first-title-size: 52px;
		--second-title-size: 40px;
		--block-title-size: 24px;
		--block-title-lh: 32px;
		--block-text-size: 20px;
		--section-radius: 48px;
		--radius-box: 32px;
	}
}

.section ul, .section ol { list-style: none; padding: 0; margin: 0; }
.btn-row { margin-top: 32px; }

.sect-cont .heading { font-size: var(--second-title-size); margin-bottom: 32px; }

.sect-cont .text { font-size: var(--block-text-size); }
.sect-cont .text p { margin-bottom: 1em; }
.sect-cont .text p:last-child { margin-bottom: 0; }
.sect-cont .title { font-size: var(--block-title-size); line-height: var(--block-title-lh); margin-bottom: 16px; }

.secgap { padding: 64px 0; }
.secgap + .secgap:not(.section-nfc) { padding-top: 0; }

.back-heading { display: flex; margin-bottom: 16px; }
.back-heading > a { display: inherit; align-items: center; font-weight: bold; padding: 8px; margin: -8px; text-decoration: none !important; }
.back-heading > a .ic { margin-right: 8px; transition: transform .2s ease; }
.back-heading > a:hover .ic { transform: translateX(-4px); }

@media (max-width: 767px) {
	.back-heading { justify-content: center; }
	.back-heading > a { margin-left: 0; }
	.back-heading > a .ic { display: none; }
	.sect-cont .heading { text-align: center; }
	.btn-row { justify-content: center; }
}
@media (max-width: 575px) {
	.btn-row { display: block; }
	.btn-row .btn-round { display: flex; width: 100%; }
	.btn-row .btn-round + .btn-round { margin-top: 12px; }
}
@media (min-width: 576px) {
	.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
}
@media (min-width: 768px) {
	.sect-cols { display: flex; align-items: center; }
	.sect-col { max-width: 50%; flex: 0 0 50%; }
}
@media (min-width: 998px) {
	.secgap { padding: 100px 0; }
}
@media (min-width: 1240px) {
	.secgap { padding: 160px 0; }
}

.gradient-circle-ic {
	display: block; border-radius: 50%; width: 48px; height: 48px; padding: 12px; margin: 0 auto;
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-second) 100%);
	color: var(--color-white);
}
.gradient-circle-ic svg { width: 24px; height: 24px; }

/* Lama */
.section_head.section-lama { padding-bottom: var(--section-radius); }
.section-lama { background-color: var(--color-pink); position: relative; z-index: 0; overflow: hidden; }
.section-lama .sc-img { position: relative; }
.section-lama .sect-col-img-in { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; justify-content: center; }
.section-lama .sect-col-img img { display: block; height: 100% !important; width: auto; margin-left: auto; margin-right: auto; }

.section-lama .sect-cont { padding: 64px 0; }

.section-lama .heading { font-size: var(--first-title-size); line-height: 1.25; margin-bottom: 16px; }
.section-lama .text { font-size: 18px; }

@media (max-width: 767px) {
	.section-lama { text-align: center; }
	.section-lama .sc-img { height: 300px; margin-top: -24px; }
}
@media (min-width: 768px) {
	.section-lama .sect-cols::after { content: ""; display: block; margin-left: -1px; max-width: 1px; height: 0; padding-top: 50%; }
	.section-lama .heading { text-align: left; }
	.section-lama .sc-img {
		align-self: stretch; margin-top: -120px; margin-bottom: -54px; position: relative;
		pointer-events: none; user-select: none; z-index: -1;
	}
}
@media (min-width: 998px) {
	.section-lama .text { font-size: 22px; }
}

.section-lama + .section {
	margin-top: calc(var(--section-radius) / -1);
	border-radius: var(--section-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* Features */
.section-features { padding: 32px 0; }
.section-features + .section { padding-top: 60px; }

.feature-item { padding: 16px; border-radius: 24px; }
.feature-item > .ic { margin-bottom: 16px; }

@media (min-width: 1200px) {
	.feature-list { gap: 32px; }
}
@media (min-width: 998px) {
	.section-features { padding: 48px 0; }
	.feature-list { margin: -16px 0 !important; display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
	.feature-item { font-weight: bold; text-align: center; }
	.feature-item > .ic { margin-left: auto; margin-right: auto; }
}
@media (max-width: 997px) {
	.section-features {
		overflow: hidden; overflow-x: auto;
		-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; 
	}
	.section-features::-webkit-scrollbar { display: none; }
	.section-features .wrp { padding-left: 0; padding-right: 0; }
	.feature-list { display: flex; }
	.feature-list::before, .feature-list::after {
		content: ""; display: block; max-width: var(--wrp-pad); min-width: var(--wrp-pad);
		height: 1rem; scroll-snap-align: start;
	}
	.feature-item + .feature-item { margin-left: 8px; }
	.feature-item {
		flex: 1; min-width: 200px; scroll-snap-align: start; scroll-margin-left: var(--wrp-pad);
		background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.0) 100%);
	}
}
@media (max-width: 767px) {
	.feature-item { font-size: var(--text-md-size); min-width: 156px; }
}

/* Side Demo */
@media (min-width: 998px) {
	.side-demo-cont .btn-row .btn-round { flex: 1; }
}
.side-demo-cont .heading { margin-bottom: 16px; }

.demo-img-item {
	display: flex; align-items: flex-end; justify-content: center;
	position: relative; z-index: 1; border-radius: var(--radius-box); overflow: hidden;
}

@media (max-width: 997px) {
	.side-demo { padding-left: 0; padding-right: 0; }
	.side-demo-list {
		display: flex; overflow: hidden; overflow-x: auto;
		-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; 
	}
	.side-demo-list::before, .side-demo-list::after {
		content: ""; display: block; max-width: var(--wrp-pad); min-width: var(--wrp-pad);
		height: 1rem; scroll-snap-align: start;
	}
	.side-demo-list::-webkit-scrollbar { display: none; }
	.side-demo-list .demo-img-item { flex: 0 0 100%; max-width: 420px; scroll-snap-align: start; scroll-margin-left: var(--wrp-pad); }
	.side-demo-list .demo-img-item + .demo-img-item { margin-left: 8px; }

	.side-demo-cont .sect-cont { max-width: 680px; }
	.side-demo-cont { padding: 0 var(--wrp-pad); padding-bottom: 48px; }
}
@media (max-width: 767px) {
	.demo-img-item { height: 424px; max-width: 420px !important; flex: 0 0 calc(100% - (var(--wrp-pad) * 2) - 16px) !important; }
	.side-demo-cont { text-align: center; }
	.side-demo-cont .sect-cont { margin-left: auto; margin-right: auto; }
}
@media (min-width: 768px) {
	.demo-img-item::before { content: ""; width: 1px; padding-top: 620px; margin-left: -1px; }
}
@media (min-width: 998px) {
	.side-demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.sd-invert .side-demo-list { order: -1; }
	.side-demo-sticky { display: flex; align-items: center; position: sticky; top: calc(50vh - (var(--sticky-height) / 2) + 40px); }
	.side-demo-sticky::before { content: ""; width: 1px; padding-top: 620px; margin-left: -1px; } 
	.side-demo-cont .sect-cont { padding-top: 64px; padding-bottom: 64px; }

	.side-demo-list .demo-img-item + .demo-img-item { margin-top: 40px; }
}
@media (min-width: 998px) and (max-width: 1239px) {
	.side-demo:not(.sd-invert) .side-demo-cont .sect-cont { padding-right: 20px; padding-right: 20px; }
	.side-demo.sd-invert .side-demo-cont .sect-cont { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1240px) {
	.side-demo-cont .heading { margin-bottom: 24px; }
	.side-demo:not(.sd-invert) .side-demo-cont .sect-cont { padding-right: 60px; }
	.side-demo.sd-invert .side-demo-cont .sect-cont { padding-left: 60px; }
	.demo-img-item::before, .side-demo-sticky::before { padding-top: 800px; }
}

.demo-img-item .fit-cover { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: transform 1s ease; }
.demo-img-link + .fit-cover::after {
	content: ""; position: absolute; inset: 0;
	background-color: #D9D9D9; opacity: .1; transition: opacity .4s ease;
}
.demo-img-link:hover + .fit-cover::after { opacity: 0; }
.demo-img-link:hover + .fit-cover { transform: scale(1.01); }

.demo-img-link { padding: 24px; display: flex; align-items: center; justify-content: center; color: var(--color-text); text-decoration: none !important; }
.demo-img-link > span {
	border-radius: 32px; font-weight: bold; padding: 8px 20px;
	background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transition: background-color .2s ease;
}
.demo-img-link::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.demo-img-link:hover > span { background-color: rgba(255, 255, 255, 0.8); }

/* section-more */
.section-more { padding: 32px; margin-top: -32px; text-align: center; font-size: var(--text-md-size); color: var(--color-primary); font-weight: bold; }
.smore-text { max-width: 112px; display: block; margin: 0 auto; margin-bottom: 12px; }
.smore-switch {
	display: flex; height: 48px; width: 32px; padding: 4px; margin: 0 auto; position: relative; z-index: 1;
	border-radius: 16px; background-color: var(--color-primary);
}
.smore-switch::after {
	content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s ease .1s;
	background-image: linear-gradient(0deg, var(--color-primary) 0%, var(--color-second) 100%);
}
.smore-switch-tab {
	display: flex; align-items: center; justify-content: center; color: var(--color-primary);
	width: 24px; height: 24px; border-radius: 50%; transform: translateY(0px); transition: transform .4s ease .1s;
	background-color: var(--color-body); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}
.section-more.active .smore-switch::after { opacity: 1; }
.section-more.active .smore-switch-tab { transform: translateY(16px); }

/* Section Dark */
.section-dark-list, .section-vdark-list {
	--color-body: var(--vdark-bg);

	background-color: var(--color-body);
	color: var(--color-text-dark);
	border-radius: var(--section-radius);
	color-scheme: dark;
}

.section-dark-list .section:not(.section-center), .section-vdark-list .section { background-color: transparent; }

.section-dark-list .section-center { --color-body: var(--dark-bg); }
.section-center .heading { margin-bottom: 24px; }
.section-center .sect-cont { max-width: 680px; padding: 64px 0; margin: 0 auto; text-align: center; }

@media (min-width: 998px) {
	.section-center .sect-cont { padding: 100px 0; }
}
@media (min-width: 1240px) {
	.section-center .sect-cont { max-width: 904px; padding: 128px 0; }
}

.section-center .btn-row { justify-content: center; }

.section-dark-list .section:last-child { border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0; }
.section-vdark-list + .section-dark-list { border-top-left-radius: 0; border-top-right-radius: 0; }

.section-vdark-list { --color-body: #14171C; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Sectors / Menu Icons */
.list-icons {
	--color-links: var(--color-primary);
	--color-links-rgb: var(--color-primary-rgb);
	display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 4), 1fr);
	margin-top: 32px !important; color: var(--color-links);
}
.list-icons .licon:nth-child(-n+2) {
	--color-links: var(--color-yellow);
	--color-links-rgb: var(--color-yellow-rgb);
}
.licon { position: relative; }
.licon-ic {
	display: flex; justify-content: center; align-items: center; color: var(--color-links);
	background-color: rgba(var(--color-links-rgb), 0.15);
	border-radius: 12px; padding: 8px; width: 40px; height: 40px;
	transition: background-color .2s ease;
}
.licon-ic .ic { width: 24px; height: 24px; }
.licon:hover .licon-ic { background-color: rgba(var(--color-links-rgb), 0.25); }
.licon-lnk {
	color: var(--color-links) !important;
	display: block; text-wrap: balance; margin-top: 12px;
	text-decoration: none !important; max-width: 180px;
}
.licon-lnk::after { content: ""; position: absolute; z-index: 1; inset: 0; }

@media (max-width: 1239px) {
	.list-icons { font-size: 14px; }
}
@media (max-width: 997px) {
	.licon-ic { margin-left: auto; margin-right: auto; }
	.licon { padding-left: 8px; padding-right: 8px; }
	.licon-lnk { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
	.list-icons {
		--cols: 2;
		gap: 24px;
	}
}

/* Carousel */
.section-carousel { overflow: hidden; }

.badges-carousel .flickity-viewport { overflow: visible; }
.badges-carousel .flickity-page-dots { display: none; }

@media (max-width: 997px) {
	.badges-carousel .flickity-button { display: none !important; }
	.badges-carousel-item { width: calc(100% - 16px); max-width: 428px; padding-right: 8px; }
	.badges-carousel { margin-right: -8px; }

	.section-dark-list .section-carousel + .section-side-demo { padding-top: 64px; border-top: 1px solid rgba(var(--color-text-dark-rgb), 0.1); }
}
@media (min-width: 998px) {
	.badges-carousel { margin-right: -40px; }
	.badges-carousel-item { min-width: calc(100% / 2); max-width: calc(100% / 2); padding-right: 40px; }
	.badges-carousel-item:first-child { min-width: 100%; max-width: 100%; }
	.badges-carousel .flickity-button { width: 80px; height: 80px; margin-top: -40px; transform: translate(0, 0); }
	.badges-carousel .flickity-button::after { left: 0; top: 0; right: 0; bottom: 0; }
	.badges-carousel .flickity-button.previous { left: 0; margin-left: -40px; }
	.badges-carousel .flickity-button.next { right: 40px; margin-right: -40px; }
	.badges-carousel .flickity-button {
		background-color: rgba(var(--color-white-rgb), 0.5) !important;
		color: var(--color-text);
		backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		transition: background-color .2s ease;
	}
	.badges-carousel .flickity-button:not([disabled]) { opacity: 1 !important; }
	.badges-carousel .flickity-button::after {
		content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.0);
		width: 60px; height: 60px; box-shadow: inset 0 0 0 1px var(--color-text); opacity: .1; border-radius: inherit;
		transition: transform .2s ease, opacity .4s ease;
	}
	.badges-carousel .flickity-button:not([disabled]):hover { background-color: rgba(var(--color-white-rgb), 0.7) !important; }
	.badges-carousel .flickity-button:hover::after { transform: translate(-50%, -50%) scale(1.05); opacity: .2; }
	.badges-carousel .flickity-button:active::after { transform: translate(-50%, -50%) scale(0.95); opacity: .3; }

	.section-dark-list .badges-carousel .flickity-button { color: var(--color-text-dark); background-color: rgba(var(--color-text-rgb), 0.5) !important; }
	.section-dark-list .badges-carousel .flickity-button::after { box-shadow: inset 0 0 0 1px var(--color-text-dark); }
	.section-dark-list .badges-carousel .flickity-button:not([disabled]):hover { background-color: rgba(var(--color-text-rgb), 0.7) !important; }

	.badges-carousel .flickity-prev-next-button .flickity-button-icon {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		width: 24px; height: 24px;
	}
}

.text-grid-item { padding-bottom: 8px; padding-top: 32px; }
.text-grid-item > .ic { width: 32px; height: 32px; margin-bottom: 16px; display: block; }
.text-grid-item > .text { margin-bottom: 0; }
@media (min-width: 768px) {
	.text-grid { display: flex; gap: 40px; }
	.text-grid-item { flex: 1; }
}
@media (max-width: 767px) {
	.text-grid-item > .ic { margin-left: auto; margin-right: auto; }
	.text-grid-item { text-align: center; }
}

/* Holes */
@media (min-width: 998px) {
	.baige-hole-list { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); }
}

.baige-hole-item {
	text-align: center; position: relative; z-index: 1;
}
.baige-hole-item::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: 32px; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
	background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 1) 0%, rgba(var(--color-primary-rgb), 0.0) 100%);
	opacity: .2; transition: opacity .2s ease;
}
.baige-hole-item:hover::after { opacity: .3; }
.baige-hole-icon {
	width: 160px; height: 160px; margin: 0 auto; border-radius: 32px;
	position: relative; z-index: 1; overflow: hidden; user-select: none; pointer-events: none;
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-second) 100%);
	box-shadow: 0 16px 32px -8px rgba(var(--color-second-rgb), 0.2);
}
.baige-hole-icon::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; right: 0; height: 30px; background-color: #00000080; }
.baige-hole-icon img { display: block; width: inherit; height: inherit; }
.sect-action .baige-hole-icon {
	transform: translateY(16px); opacity: 0; transition: opacity 1s ease .1s, transform 1s ease .1s;
}
.sect-action.active .baige-hole-icon { opacity: 1; transform: translateY(0px); }

.bh-head { padding: 24px; padding-bottom: 0; height: 80px; display: flex; justify-content: center; }
.bh-head-title { opacity: .5; padding: 0 24px; height: 48px; }
.bh-cont { padding: 0 32px; padding-top: 12px; padding-bottom: 80px; }

.baige-hole {
	width: 24px; height: 24px; border-radius: 12px;
	box-shadow: 0 0 24px 0 var(--color-primary), 0 0 0 1px var(--color-primary);
	background-color: var(--color-body); transition: box-shadow .2s ease;
}
.baige-hole:not(:last-child) { margin-right: auto; }
.baige-hole-rect { width: 88px; height: 12px; }

.baige-hole-item:hover .baige-hole { box-shadow: 0 0 32px 0 var(--color-primary), 0 0 0 2px var(--color-primary); }

/* Tile list & Fix Section */
.tile-item { border-radius: var(--radius-box); text-align: center; }

.fix-item { display: flex; align-items: flex-end; background-color: var(--dark-bg); position: relative; z-index: 1; }
.fix-item-img { position: absolute; inset: 0; display: block; margin-bottom: 0; z-index: -1; }
.fix-item-img img { pointer-events: none; user-select: none; width: 100%; height: auto; }
.fix-item-img + .title {
	opacity: .8; padding: 32px; margin: 0; flex: 1 1 auto;
}

@media (max-width: 767px) {
	.fix-item { min-height: 360px; }
	.fix-item + .fix-item { margin-top: 8px; }
	.fix-item-img img { max-width: 360px; }
}
@media (min-width: 768px) {
	.tile-list { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
	.fix-item::before { content: ""; width: 1px; padding-top: 100%; margin-left: -1px; }
	.fix-item-img + .title { padding: 40px; }
}
@media (min-width: 998px) {
	.tile-list { gap: 40px; }
	.fix-item-img + .title { padding: 64px 40px; }
}

/* NFC */
.section-nfc {
	--nfc-width: 780px;
	--nfc-height: 960px;
	min-height: var(--nfc-height);
	display: flex; overflow: hidden;
}
.section-nfc .wrp { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.line-check {
	position: relative; padding-left: 48px; padding-bottom: 40px; margin-bottom: 40px;
	border-bottom: 1px solid rgba(var(--color-text-dark-rgb), 0.1);
}
.line-check > .ic { width: 32px; height: 32px; position: absolute; left: 0; top: 0; }
.line-check > * { max-width: 400px; }
.line-check .links { margin-top: 24px; }
.section-nfc .btn-row { margin-top: 0; }
.section-nfc .sc-img { position: relative; }
.section-nfc .sc-img .nfc-container { position: absolute; top: 50%; }

.nfc-container {
	position: relative; z-index: 1;
	width: var(--nfc-width); height: var(--nfc-height);
}
.nfc-container img { pointer-events: none; user-select: none; }
.nfc-container > img { width: var(--nfc-width); height: var(--nfc-height); }

.nfc-card { position: absolute; z-index: 1; left: 0; top: 0; }

.nfc-video-wrp {
	position: absolute; left: 278px; top: 195px; width: 226px; height: 552px;
	mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-size: auto 100%; -webkit-mask-size: auto 100%;
    mask-image: url(../images/badges/nfc-mask.svg);
    -webkit-mask-image: url(../images/badges/nfc-mask.svg);
}
.nfc-video-wrp img, .nfc-browser-screen { display: block; width: inherit; height: inherit; position: absolute; left: 0; top: 0; }
.nfc-wallpaper, .nfc-screen-icons { opacity: 1; }
.nfc-notify, .nfc-browser-screen, .nfc-success { opacity: 0; transform: translateY(10%); }

.sect-action.active .nfc-card { animation: 1.25s ease .25s 1 nfc-card; }
.sect-action.active .nfc-screen-icons { animation: 8s ease 1.25s 1 nfca-icons; }
.sect-action.active .nfc-notify { animation: 2s ease 1.5s 1 nfca-notify; }
.sect-action.active .nfc-browser-screen { animation: 3s ease 3.25s 1 nfca-browser; }
.sect-action.active .nfc-browser-btn { animation: 1s ease 4.5s 1 nfca-browser-btn; }
.sect-action.active .nfc-success { animation: 3s ease 6s 1 nfca-success; }

@keyframes nfc-card {
	0% { transform: translateX(0); }
	50% { transform: translateX(7%); }
	100% { transform: translateX(0%); }
}
@keyframes nfca-icons {
	20% { opacity: 1; }
	30% { opacity: 0; }
	90% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes nfca-notify {
	0% { opacity: 0; transform: translateY(10%); }
	30% { opacity: 1; transform: translateY(0); }
	70% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-10%); }
}
@keyframes nfca-browser {
	0% { opacity: 0; transform: translateY(10%); }
	20% { opacity: 1; transform: translateY(0); }
	80% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(10%); }
}
@keyframes nfca-browser-btn {
	0% { transform: scale(1.0); }
	20% { transform: scale(1.01); }
	50% { transform: scale(0.99); opacity: .6; }
	75% { transform: scale(1.0); }
}
@keyframes nfca-success {
	0% { opacity: 0; transform: translateY(10%); }
	20% { opacity: 1; transform: translateY(0); }
	80% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(10%); }
}


.nfc-gradient { position: absolute; left: 50%; top: 50%; height: 30%; transform: translate(-50%, -50%); display: flex; flex-direction: column; z-index: -1; }
.nfc-gradient > i { flex: 1 1 auto; position: relative; }
.nfc-gradient > i::after { content: ""; position: absolute;  width: 800px; height: 800px; left: 50%; top: 50%; }
.nfc-gradient > i:first-child:after { width: 800px; height: 800px; transform: translate(-50%, -50%); background-image: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.7) 0%, rgba(var(--color-primary-rgb), 0) 100%); }
.nfc-gradient > i:last-child:after { width: 700px; height: 700px; transform: translate(-40%, -50%); background-image: radial-gradient(closest-side, rgba(var(--color-second-rgb), 0.7) 0%, rgba(var(--color-second-rgb), 0) 100%); }

@media (max-width: 767px) {
	.section-nfc .sc-img { height: 540px; }
	.section-nfc .sc-img .nfc-container { left: 50%; transform: translate(-50%, -50%); }
	.nfc-container-in { transform: scale(0.7); }
}
@media (min-width: 768px) {
	.section-nfc .sect-cont { padding-right: 40px; }
	.section-nfc .sc-img .nfc-container { left: 0; transform: translate(-40px, -40%); }
}

/* Необычная форма */
.section-dark-list .section:last-child .baige-form-bg { border-radius: var(--section-radius); border-top-right-radius: 0; border-top-left-radius: 0; }
.section-baige-form { z-index: 1; --baige-form-img-height: 170px; }
@media (min-width: 768px) {
	.section-baige-form { --baige-form-img-height: 320px; }
}

.section-baige-form::after { content: ""; display: block; height: var(--baige-form-img-height); }
.baige-form-bg { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.baige-form-bg > img, .baige-form-bg-light { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.baige-form-bg > img { z-index: 1; height: var(--baige-form-img-height); width: auto; }


.baige-form-bg-light { display: flex; justify-content: space-between; height: var(--baige-form-img-height); width: 1200px; }
.baige-form-bg-light > i { flex: 0 0 25%; position: relative; }
.baige-form-bg-light > i::after {
	content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0%); width: 1200px; height: 1200px;
	background-image: radial-gradient(closest-side, rgba(var(--bg-light), 0.9) 0%, rgba(var(--bg-light), 0) 100%); 
	opacity: 0; transition: opacity 3s ease .2s;
}
.baige-form-bg-light > i:last-child::after, .baige-form-bg-light > i:first-child::after { transform: translate(-50%, 5%); }

.section.active .baige-form-bg-light > i::after { opacity: 1; }

/* Design Badges */
.section-design .tile-list { grid-template-rows: repeat(2, 1fr); }
.section-design .tile-poster { grid-row: span 2; }
.tile-poster::before { content: ""; width: 1px; padding-top: 100%; margin-left: -1px; }
.tile-poster .fit-cover, .tile-poster img { pointer-events: none; user-select: none; }

.tile-icon {
	display: flex; justify-content: center; padding: 32px 20px;
	position: relative; z-index: 1; overflow: hidden;
}
@media (max-width: 767px) {
	.tile-poster { min-height: 424px; }
	.tile-icon:not(.tile-poster) {padding: 48px 0; }
	.tile-icon:not(.tile-poster) + .tile-icon:not(.tile-poster) { padding-top: 0; }

	.tile-scroll { margin: 0 calc(var(--wrp-pad) / -1); }
	.tile-scroll .tile-list::-webkit-scrollbar { display: none; }
	.tile-scroll .tile-list {
		display: flex; overflow: hidden; overflow-x: auto;
		-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
	}
	.tile-scroll .tile-item + .tile-item { margin-left: 8px; }
	.tile-scroll .tile-item {
		flex: 1; min-width: 200px; max-width: 420px !important; flex: 0 0 calc(100% - (var(--wrp-pad) * 2) - 16px) !important;
		scroll-snap-align: start; scroll-margin-left: var(--wrp-pad);
	}
	.tile-scroll .tile-list::before, .tile-scroll .tile-list::after {
		content: ""; display: block; max-width: var(--wrp-pad); min-width: var(--wrp-pad);
		height: 1rem; scroll-snap-align: start;
	}
}
@media (min-width: 768px) {
	.tile-icon { padding: 64px 32px; }
	.tile-icon:not(.tile-poster) {
		align-items: center; box-shadow: inset 0 0 0 1px #F5D8DA;
	}
}

.tile-icon-cont { max-width: 428px; }
.tile-icon .gradient-circle-ic { margin-bottom: 16px; }

.tile-icon .fit-cover { position: absolute; inset: 0; z-index: -1; background-color: var(--bg-color); }
.tile-poster.tile-dark { color: var(--color-text-dark); background-color: var(--dark-bg); }
.tile-poster.tile-dark > img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: -1; }

/* Section Capybara */
.section-capybara { background-color: #F5CBD1; position: relative; z-index: 0; overflow: hidden; }
.section-capybara .sc-img {
	align-self: stretch; position: relative; pointer-events: none; user-select: none; z-index: -1;
}
@media (min-width: 768px) {
	.section-capybara .sect-cols::after { content: ""; display: block; margin-left: -1px; max-width: 1px; height: 0; padding-top: 50%; }
}
@media (max-width: 767px) {
	.section-capybara .sc-img { height: 344px; }
}

.section-capybara .sect-col-img-in {
	position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; justify-content: center;
	transform: translateX(40px); transition: transform .4s ease .1s;
}
.section-capybara.active .sect-col-img-in { transform: translateX(0px); }
.section-capybara .sect-col-img img { display: block; height: 100% !important; width: auto; }
.section-capybara .sect-cont { padding: 64px 0; }

.contact-buttons .btn-round {
	font-size: 24px; line-height: 32px; position: relative; z-index: 1;
	height: 72px; padding: 20px 24px; border-radius: 36px;
	box-shadow: 0 16px 32px -8px rgba(var(--color-second-rgb), 0.2);
}
.contact-buttons .btn-round::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-second) 100%);
	background-size: 100% 100%; background-position: 100% 50%; background-repeat: no-repeat;
	transition: background-size .2s ease, opacity .2s ease;
}
.contact-buttons .btn-round:hover::after { background-size: 150% 100%; }
.contact-buttons .btn-round:active::after { opacity: .5; background-size: 100% 100%; }

.contact-buttons { display: inline-block; max-width: 100%; }
.contact-social-buttons { display: flex; justify-content: center; margin-top: 24px; }
.contact-social-buttons > a {
	flex: 1; color: inherit; text-decoration: none !important;
	text-align: center; padding: 8px 16px;
	transition: opacity .2s ease; opacity: .8;
}
.contact-social-buttons > a:hover { opacity: 1; }

@media (max-width: 1099px) {
	.contact-buttons, .contact-buttons .btn-round { width: 100%; }
	.contact-social-buttons > a .ic { margin-bottom: 8px; margin-left: auto; margin-right: auto; }
	.contact-social-buttons > a > span { display: block; }
}
@media (min-width: 1100px) {
	.contact-buttons .btn-round { font-size: 40px; line-height: 56px; padding: 32px 56px; height: 120px; border-radius: 60px; }
	.contact-social-buttons > a { display: flex; align-items: center; }
	.contact-social-buttons > a .ic { margin-right: 8px; }
}

/* Giraffe */
.section-side-giraffe { position: relative; z-index: 1; padding-bottom: 0; }
.sd-invert .side-demo-giraffe { order: -1; }
.side-demo-giraffe { text-align: center; display: flex; justify-content: center; }
.img-giraffe { display: inline-block; position: relative; z-index: 1; max-width: 540px; }
.img-giraffe-decor { position: absolute; inset: 0; width: 100%; height: auto; }
.img-giraffe-main { display: block; max-width: 100%; height: auto; }

.section-side-giraffe .gradient { inset: 0; }
.section-side-giraffe .gradient-magenta { top: calc(100% - var(--g-rd)); left: calc(50% - var(--g-rd)); transform: translateX(-50%); }
.section-side-giraffe .gradient-blue { top: calc(100% - var(--g-rd)); left: calc(50% - var(--g-rd)); transform: translate(-25%, -25%); }
.section-side-giraffe .gradient-yellow { top: calc(100% - var(--g-rd)); left: calc(50% - var(--g-rd)); transform: translate(0, 0); }

.gradient { position: absolute; z-index: -1; pointer-events: none; overflow: hidden; }
.gradient > i { --g-rd: 400px; position: absolute; left: calc(50% - var(--g-rd)); top: calc(50% - var(--g-rd)); }
.gradient > i::after { content: ""; display: block; width: calc(var(--g-rd)*2); aspect-ratio: 1/1; }
.gradient-magenta:after { background-image: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.4) 0%, rgba(var(--color-primary-rgb), 0) 100%); }
.gradient-blue:after { background-image: radial-gradient(closest-side, rgba(var(--color-blue-rgb), 0.3) 0%, rgba(var(--color-blue-rgb), 0) 100%); }
.gradient-yellow:after { background-image: radial-gradient(closest-side, rgba(var(--color-second-rgb), 0.3) 0%, rgba(var(--color-second-rgb), 0) 100%); }

@media (max-width: 997px) {
	.section-side-giraffe { text-align: center; }
	.section-side-giraffe .sect-cont { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
	.side-demo-giraffe { padding-left: var(--wrp-pad); padding-right: var(--wrp-pad); }
}

.img-giraffe-decor path {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	will-change: transform;
}
.img-giraffe-like { transform-origin: 0% 100% !important; }

.sect-action.active .img-giraffe-star {
	animation: giraffe-star 4s linear infinite;
}
.sect-action.active .img-giraffe-crown {
	animation: giraffe-crown 1s linear infinite;
}
.sect-action.active .img-giraffe-like {
	transform-origin: 0% 100% !important;
	animation: giraffe-like 1s linear infinite;
}

@keyframes giraffe-star {
	to { transform: rotate(360deg); }
}
@keyframes giraffe-crown {
	0% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
	100% { transform: translateY(0); }
}
@keyframes giraffe-like {
	0% { transform: translateY(0); }
	50% { transform: rotate(8deg); }
	100% { transform: translateY(0); }
}

/* Wave Sep */
.wave-sep {
    --wave-sep-img: url(../images/wave-line.svg);
	--wave-sep-color: var(--color-primary);

	height: 124px; display: block; margin-bottom: 64px;
	position: relative; z-index: 1; pointer-events: none;
}
@media (min-width: 998px) {
	.wave-sep { margin-bottom: 100px; }
}
@media (min-width: 1240px) {
	.wave-sep { margin-bottom: 160px; }
}

.wave-sep::after {
    content: ""; position: absolute; inset: 0;
	background-color: var(--wave-sep-color);
    mask-size: auto 100%; -webkit-mask-size: auto 100%;
    mask-position: 0 0; -webkit-mask-position: 0 0;
    mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x;
    mask-image: var(--wave-sep-img); -webkit-mask-image: var(--wave-sep-img);
}
.sect-action.active + .wave-sep::after {
	animation: waveSepline 12s linear infinite;
	will-change: mask-position;
}
@keyframes waveSepline {
	from { mask-position: 0 0; }
	to { mask-position: 529px 0; }
}