/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;800&display=optional&subset=latin-ext');*/

:root {
  --blan: #fff;
  --viol: #6541c1;
  --viof: #1A0A37;
  --rose: #d43396;
  --gric: #e9e9e9;
  --grim: #d2d1d2;
  --grif: #656565;
  --grin: #434343;
  --blen: #0E0F1F;
}

* { box-sizing: border-box; }
body { position: relative; color: var(--viof); font-family: 'Poppins', sans-serif; font-size: 11pt; margin: 0; }
body.scr { padding-top: 80px; }
a { color: inherit; }
wrp { display: block; width: 1170px; margin: auto; transition: 0.3s; }
flx { display: flex; flex: 1; }
flx[ctr] { align-items: center; }
flx[col] { flex-direction: column; }
flx[wrp] { flex-wrap: wrap; }
sep { display: block; width: 16px; height: 16px; }
sep[big] { width: 64px; height: 64px; }
[pad] { padding: 24px 0; }
hr { border: none; border-top: 1px solid; }
h3 { font-size: 2.8em; margin: 0 0 12px; }

.fsz_0 { font-size: 0; }
.fsz_130 { font-size: 1.3em; }
.fsz_160 { font-size: 1.6em; }
.fsz_200 { font-size: 2em; }

.fw200 { font-weight: 200; }
.fw400 { font-weight: 400; }
.fw600 { font-weight: 600; }

.tac { text-align: center; }
.taj { text-align: justify; }
.tar { text-align: right; }

.soc { justify-content: center; }
.soc a { margin-left: 4px; }

.btn { position: relative; display: inline-block; min-height: 51px; padding: 15px 29px; font-weight: bold; text-decoration: none; text-align: center; cursor: pointer; border: none; outline: none; border-radius: 28px; color: #fff; transition: all .4s ease; }
.btn:not(.btn_uni):before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 28px; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); z-index: -1; }
.btn_hov:hover { box-shadow: 0px 15px 30px rgba(212, 50, 151, 0.27); background: transparent; color: var(--blan); }
.btn_bor { border: 1px solid; }

.bg_blan { background-color: var(--blan); color: var(--viol); }
.bg_gric { background-color: var(--gric); color: var(--viof); }
.bg_grin { background-color: var(--grin); color: var(--blan); }
.bg_viol { background-color: var(--viol); color: var(--blan); }
.bg_rose { background-color: var(--rose); color: var(--blan); }
.bg_blen { background-color: var(--blen); color: var(--blan); }
.cl_blan { color: var(--blan); }
.cl_gric { color: var(--gric); }
.cl_grim { color: var(--grim); }
.cl_grif { color: var(--grif); }
.cl_grin { color: var(--grin); }
.cl_viol { color: var(--viol); }
.cl_viof { color: var(--viof); }
.cl_rose { color: var(--rose); }

.bgv { position: absolute; z-index: -1; width: 100%; height: 100vh; top: 0; margin-top: 0; transition: margin-top 0.3s; }
.bgv video, menu video { position: absolute; width: 100vw; height: 100%; right: 0; object-fit: cover; }
video+msk { position: absolute; width: 100vw; height: 100%; right: 0; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); opacity: 0.5; overflow: hidden; }
body.scr .bgv, body:not(.pag1) .bgv { position: fixed; z-index: 3; height: 80px; top: -80px; margin-top: 80px; }
body.scr .bgv msk, menu msk { opacity: 0.85; }

menu { width: 100%; margin: 0; padding: 50px 0; z-index: 4; transition: padding 0.3s, margin-top 0.4s; }
menu>wrp { display: flex; align-items: center; z-index: 9; position: relative; }
menu a:not(.lgo) { display: inline-block; height: 40px; padding: 0 16px; line-height: 40px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; color: #fff; transition: 0.3s; }
menu a:last-of-type { background: #fff; color: #190A32; border-radius: 24px; margin-left: 16px; }
menu a img { vertical-align: middle; }
menu .mnu_tog { width: 32px; height: 32px; background: url(/img/mnu.svg) center/contain; transition: 0.5s; }
body.scr menu, body:not(.pag1) menu { position: fixed; padding: 20px 0; top: -80px; margin-top: 80px; }
menu>div { position: fixed; top: 0; bottom: 0; right: 0; width: 0; z-index: 99999; overflow: hidden; transition: 0.5s; }
menu>div>div { position: absolute; top: 130px; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; }
menu>div>div a:not(.lgo) { margin: 16px 42px 16px 28px; font-size: 1.3em; }
menu>div>div a:after { content: ''; position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 4px; right: 43px; margin-top: 16px; }
menu.mnu_aff>div { width: 100%; }
menu.mnu_aff .mnu_tog { background-image: url(/img/clo.svg); transform: rotate(-90deg); }

header, header>wrp, header>wrp>flx { height: calc(100vh - 140px); }
header flx { background: center/contain no-repeat; }
header>svg { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: .7; }

cont { display: block; padding-top: 80px; }
body.pag1 cont { padding: 0; }

mkp { display: block; width: 100%; height: 655px; margin-left: 30%; pointer-events: none; }
mkp .phn { position: absolute; transform: scale(calc(0.2 + var(--i) * 0.18)) translateX(calc(740px + -240px * var(--i))); opacity: calc(0.34 * var(--i)); filter: blur(calc(6px - 2px * var(--i))); z-index: var(--i); transition: 0.3s; }
mkp .phn[style="--i:4;"] { opacity: 0; }

.phn { position: relative; display: flex; width: 320px; height: 655px; padding: 7px 10px 6px; overflow: hidden; margin: 0 auto; border-radius: 40px; box-shadow: 0px 18px 37px rgba(212, 50, 151, 0.2); }
.phn:after { content: ''; position: absolute; left: -4px; top: -4px; right: -4px; bottom: -4px; background: url(/img/ccm_msk.webp); background-size: 100% 100%; pointer-events: none; }
.phn>div { width: 100%; height: calc(100% + 30px); padding: 0 0 30px; display: flex; overflow-x: overlay; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.phn i { min-width: 100%; height: 100%; background: no-repeat center/300px; transition: 0.3s ease; scroll-snap-align: start; }
.phn u { position: absolute; width: 200%; height: 16px; bottom: 150px; background: linear-gradient(to right, rgba(255,255,255,0.8), transparent); border-radius: 8px; animation: 2s linear infinite swipe-left; }
.phn u:before { content: ''; position: absolute; width: 68px; height: 85px; left: -24px; background: url(../img/finger.svg) center/contain; }

.car { position: relative; }
.car>flx { overflow: hidden; }
.car>flx>flx {  min-width: 100%; transition: 0.3s; transform: translateX(-100%); padding-bottom: 30px; }
.car>flx>flx:first-child { margin-left: -100%; }
.car>flx>flx:after { content: ''; position: absolute; bottom: 0; width: 100%; height: 4px; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); transition: 0.5s; }
.car>flx>flx:not(:nth-child(4)):not(:hover):after { transform: scaleX(0); transition: 0s; }
.car>a { position: absolute; display: block; background: #E9E8E8; width: 38px; height: 38px; border-radius: 50%; line-height: 38px; text-align: center; cursor: pointer; top: 11%; left: -18px; }
.car>a+a { left: auto; right: -18px; }

.grd { display: grid; grid-row-gap: 16px; grid-column-gap: 16px; justify-content: center; }
.grd>div>p { margin: 0; }

.ccm input { display: none; }
.ccm_msk { position: relative; padding: 64px 0; }
.ccm_msk>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#ccm2:checked ~ flx .ccm_msk>div>i:first-child { margin-left: -100%; }
#ccm3:checked ~ flx .ccm_msk>div>i:first-child { margin-left: -200%; }
#ccm4:checked ~ flx .ccm_msk>div>i:first-child { margin-left: -300%; }
#ccm5:checked ~ flx .ccm_msk>div>i:first-child { margin-left: -400%; }
.ccm_lbl { position: relative; transform: scale(1); }
.ccm_lbl:before { content: ''; position: absolute; left: 34px; top: -32px; bottom: 0; width: 2px; background: var(--viol) linear-gradient(to bottom, #fff 0%, transparent 15%, transparent 85%, #fff 100%); z-index: -1; }
.ccm_lbl label { display: flex; align-items: center; cursor: pointer; margin: 0 0 32px; }
.ccm_lbl p { margin: 0.5em 0; }
.ccm_lbl i { flex: none; padding: 11px; font-size: 0; margin-right: 40px; background: #fff; }
.ccm_lbl i, .ccm_lbl i:before { border-radius: 50% !important; }
.ccm_lbl i:hover, #ccm1:checked ~ flx label:nth-child(1) i, #ccm2:checked ~ flx label:nth-child(2) i, #ccm3:checked ~ flx label:nth-child(3) i, #ccm4:checked ~ flx label:nth-child(4) i, #ccm5:checked ~ flx label:nth-child(5) i { background: transparent; }
.ccm_lbl i:hover img, #ccm1:checked ~ flx label:nth-child(1) i img, #ccm2:checked ~ flx label:nth-child(2) i img, #ccm3:checked ~ flx label:nth-child(3) i img, #ccm4:checked ~ flx label:nth-child(4) i img, #ccm5:checked ~ flx label:nth-child(5) i img { filter: brightness(100); }
.ccm .ioi:not(.ioi_vis):first-of-type { transform: translateX(-50px); opacity: 0; }
.ccm .ioi:not(.ioi_vis):last-of-type  { transform: translateX( 50px); opacity: 0; }

.bgf { position: relative; background-position: center center; background-size: cover; background-attachment: fixed; }
.bgf:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .65; background-color: inherit; }

.sht { overflow: hidden; }
.sht .ioi { transform-origin: top center; }
.sht .ioi:not(.ioi_vis) { transform: scale(2); opacity: 0; }

#trf_chk { display: none; }
#trf_chk:checked ~ flx .trf_tog:before { margin-left: 30px; }
.trf_tog { width: 60px; margin: 0 16px; border-radius: 34px; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); outline: none; cursor: pointer; }
.trf_tog:before { content: ''; display: block; width: 26px; height: 26px; margin: 4px; border-radius: 50%; background: #fff; transition: 0.3s; }
.trf { padding: 65px 0; }
.trf>flx { background: #E8E6E6; border-radius: 15px; padding: 4px; }
.trf>flx>flx { background: #fff; border-radius: 15px; padding: 45px 0; text-align: center; }
.trf_fnc { display: list-item; margin-inline-start: 40px; padding-inline-start: 8px; text-align: left; font-size: 1.2em; font-weight: 600; list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-1 -1 2 2'><circle r='1' fill='rgb(212,51,150)' /></svg>"); }
.trf_fof { list-style-type: circle; color: var(--grim); list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-4 -4 8 8'><circle r='3.5' fill='white' stroke='rgb(212,51,150)' /></svg>"); }
.trf_ani { position: relative; height: 90px; }
.trf_ani>* { position: absolute; top: 0; left: 0; right: 0; transition: 0.5s; }
.trf_ani>span { top: 50px; }
#trf_chk:checked ~ flx .trf_ani>:nth-child(odd), #trf_chk:not(:checked) ~ flx .trf_ani>:nth-child(even) { opacity: 0; transform: translateY(50px); pointer-events: none; }
.trf .btn { transform: scale(1); }
.trf .ioi:not(.ioi_vis) { transform: scale(0.8); opacity: 0; }
.trf .ioi:nth-of-type(2) { transition-delay: 0.1s; }
.trf .ioi:nth-of-type(3) { transition-delay: 0.2s; }

.tmc { max-width: calc(100vw - 64px); min-height: 316px; justify-content: center; }
.tmc>a { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; max-width: 128px; max-height: 128px; transition: 0.3s; }
.tmc>a.sel { max-width: 534px; max-height: 300px; transition: 0.3s; }
.tmc>a iframe { width: 391px; max-width: 100%; height: 220px; margin: 0 0 16px; border-radius: 16px; }
.tmc>a>flx { align-items: flex-end; white-space: nowrap; }
.tmc>a img { border-radius: 50%; margin-right: 16px; width: 128px; height: 128px; opacity: 0.7; cursor: pointer; transition: 0.3s; }
.tmc>a.sel img { width: 64px; height: 64px; opacity: 1; }

.art_lst { display: flex; flex-wrap: wrap; justify-content: space-between; }
.art_lst a { display: block; width: 100%; margin: 16px 0; background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 0 16px rgba(0, 0, 0, 0.2); }
.art_lst a * { transition: 0.5s; }
.art_lst a>flx { height: 100%; min-height: 250px; }
.art_lst a>flx>* { display: flex; color: var(--viof); }
.art_lst a>flx>img { flex: 1; height: 100%; object-fit: cover; }
.art_lst a>flx>div { flex: 2; flex-direction: column; padding: 16px; }
.art_lst a>flx>div h4 { font-size: 2em; margin: 0 0 8px; }
.art_lst a>flx>div p { flex: 1; }
.art_lst a:hover>flx>img { transform: scale(1.1); filter: brightness(0.8); }
.art_lst a:hover h4 { color: var(--viol); }

.art_hdr { position: relative; background: center/cover; height: 350px; margin: 0 0 32px; }
.art_hdr h2 { position: absolute; bottom: 16px; padding: 24px 0; margin: 0; font-size: 2.5em; color: var(--blan); text-shadow: 0 0 4px var(--blen); }
.art_bdy { padding: 24px; border: 1px solid var(--grim); font-size: 1.1em; color: var(--grif); }
.art_bdy>div { position: relative; margin: 0 0 16px; border-bottom: 1px solid var(--grim); }
.art_bdy>div>div { display: inline-block; padding: 0 0 16px; margin: 0 0 -1px; opacity: 0.7; border-bottom: 3px solid var(--rose); }
.art_bdy img { max-width: 100%; height: auto; }
.art_shr>a { margin: 16px; }

.get>flx { padding: 32px; text-align: center; }
.get .get_img, .get .get_img>* { position: relative; margin: 0; height: 412px; display: flex; flex-direction: column; justify-content: center; }
.get .get_and, .get .get_ios:hover { z-index: 1; }
.get .get_img:before { content: ''; position: absolute; left: calc(50% - 140px); bottom: 16px; width: 280px; padding-top: 280px; background: var(--rose); border-radius: 50%; }
.get .get_ios .get_img:before { background: var(--viol); }
.get .get_pwa .get_img:before { background: var(--blan); }
.get .btn { margin: 0 auto; font-weight: normal; padding: 8px 48px; }

footer { padding: 130px 0 0; background: url(/img/footer-bg.webp) top center/cover no-repeat; color: var(--grif); }
footer flx>b { margin: 11px 0 -2px; color: var(--viof); }
footer form { padding: 36px; margin: 70px 0 0; border-radius: 60px; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); overflow: hidden; }
footer form input { background: url(/img/email.svg) no-repeat left center/24px; border: none; border-bottom: 1px solid #fff; outline: none; padding: 8px 32px; color: #fff; flex: 1; }
footer form input::placeholder { color: #eee; }
footer form button { background: transparent; z-index: 1; }
footer .ftr_rsx a img { width: 26px; height: 26px; margin-right: 20px; transition: 0.3s; }
footer .ftr_rsx a:not(:hover) img { filter: grayscale(1) brightness(2); }

#apl { position: fixed; right: 32px; bottom: 32px; z-index: 5; }
#apl>form { position: absolute; left: -2px; right: -2px; bottom: 8px; max-height: 0; padding: 16px; border-radius: 16px; border: 2px solid var(--rose); background: var(--blan); display: flex; flex-direction: column; overflow: hidden; transition: 0.3s; }
#apl.opn>form { max-height: 300px; padding-bottom: 64px; }
#apl>form button { font-size: 1.1em; }
#apl>.btn { padding-left: 72px; z-index: 1; }
#apl.opn>.btn { color: transparent; }
#apl:not(.opn)>.btn:after { content: ''; position: absolute; left: 24px; top: calc(50% - 18px); padding: 18px; background: url(/img/apl.png); transition: 0.3s; }
#apl.opn>.btn:after { content: '\d7'; position: absolute; left: calc(50% - 11px); top: calc(50% - 18px); font-family: math; font-size: 36px; line-height: 36px; color: var(--blan); transition: 0.3s; }
#apl>.btn:hover:after { transform: rotate(-90deg); }

body.scr .scr_hide, body:not(.scr) .scr_show { display: none; }
body.scr .scr_show, body:not(.scr) .scr_hide { display: unset; }

.frm input, .frm textarea, .frm select { flex: 1; margin: 10px 0; background: transparent; color: var(--rose); border: none; outline: none; border-bottom: 1px solid #8E0B56; padding: 4px 0; font-family: inherit; font-size: inherit; transition: 0.3s; }
.frm input::placeholder, .frm textarea::placeholder { color: var(--grif); }
.frm button.btn { background: transparent; z-index: 1; }
.frm button[disabled] { filter: grayscale(1); }
.frm_snt [snt-hid], form:not(.frm_snt) [snt-shw] { display: none; }

.ioi { transition: 0.3s; }
.ioi_fup:not(.ioi_vis) { transform: translateY(50px); opacity: 0; }

@media only screen and (max-width: 1023px){
    wrp { width: 100%; padding: 0 32px; }
    [pad] { padding: 32px !important; }
    h3 { font-size: 2em; }
    logo { left: 32px; }
    .hid_sml { display: none !important; }
    flx[rsp] { flex-direction: column; }
    header { font-size: 0.8em; }
    footer flx { align-items: stretch; }
    .btn+.btn { margin-top: 24px; }
    .car>a { left: 16px; }
    .car>a+a { right: 16px; }
    .art_lst a>flx>div h4 { font-size: 1.5em; }
}

@media only screen and (min-width: 1024px){
    flx[top] { align-items: start; }
    .hid_big, menu>div { display: none !important; }
    .bgv msk:after { content: ''; position: absolute; width: 100%; height: 100vh; top: 50vh; transform: rotate(-28deg); transform-origin: top right; background: linear-gradient(to bottom, white, transparent); opacity: 0.4; mix-blend-mode: overlay; }
    .car>flx>flx { margin-right: 30px; min-width: calc(100% / 3 - 20px); transform: translateX(calc(-100% - 30px)); }
    .car>flx>flx:first-child { margin-left: calc(-100% / 3 - 10px); }
    .trf>flx:nth-of-type(2) { margin: -20px 0; background: linear-gradient(to right, var(--viol) 0%, var(--rose) 100%); }
    .trf>flx:nth-of-type(2)>flx { padding: 65px 0; }
    .art_lst a>flx>img { width: 33%; transform-origin: right; }
    .tmc { align-items: flex-end; }
    /*.art_lst a { width: 48%; }*/
}

@keyframes swipe-left {
  from { left: 110%; }
  to   { left: -200%; }
}