:root { --primary: rgba(0, 197, 97, 1.0); --primary-light: rgba(0, 197, 97, 0.4); --dark: #000; --black-color: #212121; --black-link: rgba(33, 33, 33, 0.7); --grey-link: rgba(33, 33, 33, 0.5); --sidebar-width: 360px; --toc-top-offset: 140px; --sec-top-offset: 400px; --menu-row-1: 20vh; --menu-row-2: 30vh; --menu-row-3: 100vh; --menu-row-duration: 360ms; --menu-row-delay-2: 180ms; }
html { overflow: -moz-scrollbars-none; }
html, body { font-family: "Montserrat"; overflow: hidden; height: 100%; font-size: 13px; margin: 0; color: var(--black-color); }

.ui-scrollbar-hidden::-webkit-scrollbar { display: none; }
.ui-scrollbar::-webkit-scrollbar { width: 5px; }
.ui-scrollbar-hidden { scrollbar-width: none; overflow-y: auto; overflow-x: hidden; }
.ui-scrollbar { scrollbar-width: thin; overflow-y: auto; overflow-x: hidden; }
[data-href] { cursor: pointer; }
.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
 
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

input { min-width: 300px; height: 45px; padding: 0 13px; border-radius: 6px; box-sizing: border-box; outline: none; font-size: 16px; background: #fff; border: 1px solid #fff; color: var(--black-color); }
a { color: var(--primary) }

.btn { display: flex; align-items: center; justify-content: center; width: fit-content; cursor: pointer; padding: 12.5px 20px; text-align: center; border-radius: 6px; background: var(--primary); transition: background 200ms ease-in-out; }
.btn:hover { background: rgba(0, 197, 97, 0.8); }
.non { display: none !important; }

.menu-toggle { z-index: 1000; }
.menu-toggle .burger-btn { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; position: relative; font-size: 12px; cursor: pointer; -webkit-transition: .2s all; -o-transition: .2s all; transition: .2s all; -webkit-tap-highlight-color: transparent; }
.menu-toggle .burger-btn .burger-lines:after { left: 0; top: -9px; }
.menu-toggle .burger-btn .burger-lines:before { left: 1em; top: 9px; }
.menu-toggle .burger-btn:after { content: ''; display: block; position: absolute; height: 150%; width: 150%; top: -25%; left: -25%; }
.menu-toggle .burger-btn .burger-lines { pointer-events: none; display: block; content: ''; width: 100%; border-radius: 0.25em; background-color: var(--black-color); height: 2px; position: absolute; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
.menu-toggle .burger-btn .burger-lines:after { pointer-events: none; display: block; content: ''; width: 100%; border-radius: 0.25em; background-color: var(--black-color); height: 2px; position: absolute; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); left: 0; top: -9px; }
.menu-toggle .burger-btn .burger-lines:before { pointer-events: none; display: block; content: ''; width: 100%; border-radius: 0.25em; background-color: var(--black-color); height: 2px; position: absolute; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); left: 12px; top: 9px; }
.menu-toggle .burger-btn.burger-animated .burger-lines { -webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; -o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; }
.menu-toggle .burger-btn.burger-animated .burger-lines:after { -webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; -o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; width: 20px; }
.menu-toggle .burger-btn.burger-animated .burger-lines:before { -webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; -o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; width: 20px; }
.menu-toggle .burger-btn.burger-animated.open .burger-lines { -webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; -o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; transition: .2s background-color, .2s top, .2s left, .2s transform .15s; background-color: transparent; }
.menu-toggle .burger-btn.burger-animated.open .burger-lines:after { -webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; -o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; transition: .2s background-color, .2s top, .2s left, .2s transform .15s; left: 5px; top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.menu-toggle .burger-btn.burger-animated.open .burger-lines:before { -webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; -o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s; transition: .2s background-color, .2s top, .2s left, .2s transform .15s; left: 5px; top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.container { width: 85%; height: 100%; max-width: 1600px; margin-right: auto; margin-left: auto; }
.container.large { width: 100%; max-width: 2000px; margin-right: auto; margin-left: auto; }
.container.small { width: 100%; max-width: 1440px; margin-right: auto; margin-left: auto; }

.site-header { position: relative; display: flex; justify-content: space-between; align-items: center; height: 85px; max-width: 2000px; margin-right: auto; margin-left: auto; padding: 0 50px; }
.site-header .logo { display: flex; align-items: center; z-index: 1000; }
.site-header .logo svg { height: 30px; width: auto; }
.site-header .nav { display: flex; gap: 10px; white-space: nowrap; z-index: 2; }
.site-header .nav .nav-link { position: relative; padding: 10px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02rem; color: var(--black-link); cursor: pointer; }
.site-header .nav .nav-link.active, .site-header .nav .nav-link:hover { color: var(--dark); }
.site-header .nav .nav-link:after{ content: ""; display: flex; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transition: transform 300ms ease; transform-origin: right; background: var(--dark); }
.site-header .nav .nav-link:hover:after { transform-origin: left; transform: scaleX(1); }

.hero { margin: 110px auto 25px; }
.hero .app-icon { display: flex; justify-content: center; }
.hero .app-icon svg { width: 140px; height: auto; border-radius: 30px; }
.hero .title { display: flex; font-size: 38px; font-weight: 700; text-transform: uppercase; color: var(--black-color); margin: 50px 0 5px 0; letter-spacing: 0rem; }
.hero.container .title { justify-content: center; text-align: center; }
.hero .title.with-sub { margin-bottom: 0; }
.hero .sub { display: flex; font-size: 26px; color: var(--black-color); }
.hero .text { display: flex; justify-content: center; text-align: center; font-size: 18px; color: var(--black-color); margin: 0 0 50px; }
.hero .store-buttons { display: flex; justify-content: center; align-items: center; margin: 0 0 120px; }
.hero .store-buttons svg { height: 50px; width: 160px; background: var(--dark); padding: 5px; border-radius: 10px; margin: 0 10px; cursor: pointer; transition: transform 200ms ease-in-out; }
.hero .store-buttons svg:hover { transform: translateY(-2px); }


.app-preview { display: flex; justify-content: center; }
.app-preview .app-image img { height: 1000px; }
.app-preview .app-image.left img,.app-preview .app-image.right img { height: 900px; }
/*
.app-preview .app-image.left { z-index:100; transform:translateX(105%) rotateZ(0deg) translateY(10px); transition: transform 600ms cubic-bezier(.22,.9,.36,1); will-change: transform; }
.app-preview .app-image.mid { z-index:101; transform:translateY(-70px); transition: transform 600ms cubic-bezier(.22,.9,.36,1); will-change: transform; }
.app-preview .app-image.right { z-index:100; transform:translateX(-105%) rotateZ(0deg) translateY(10px); transition: transform 600ms cubic-bezier(.22,.9,.36,1); will-change: transform; }
*/
.app-preview .app-image.left { z-index: 100; transform: translateX(40%) rotateZ(-10deg) translateY(40px); }
.app-preview .app-image.mid { z-index: 101; transform: translateY(-70px); }
.app-preview .app-image.right { z-index: 100; transform: translateX(-40%) rotateZ(10deg) translateY(40px); }

.info { display: flex; justify-content: center; font-size: 38px; max-width: 1070px; margin: 120px auto 200px; font-weight: 700; text-transform: uppercase; }

.notify { align-items: center; background: var(--black-color); color: #fff; padding: 100px 0; margin-bottom: 110px; }
.notify .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; }
.notify .wrapper .inner { margin-bottom: 25px; }
.notify .wrapper .inner .title { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.notify .wrapper .inner .text { font-size: 18px; }
.notify .wrapper .input { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

footer .footer-inner { display: flex; flex-direction: column; margin: 0 0 150px 0; }
footer .footer-inner .footer-top { display: flex; justify-content: start; width: 100%; font-size: 32px; margin-bottom: 25px; flex-wrap: wrap; }
footer .footer-inner .footer-top .footer-nav { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 442px; }
footer .footer-inner .footer-top .footer-nav .footer-nav-item { cursor: pointer; width: fit-content; }
footer .footer-inner .footer-top .footer-nav .footer-nav-item:hover { color: var(--primary); }
footer .footer-inner .footer-top .footer-nav .footer-nav-item:last-child { margin-bottom: 50px; }
footer .footer-inner .footer-top .footer-contact { display: flex; flex-direction: column; gap: 6px; }
footer .footer-inner .footer-top .footer-contact .contact-info { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
footer .footer-inner .footer-top .footer-contact .footer-bottom-row .social-list { width: fit-content; }
footer .footer-inner .footer-top .footer-contact .footer-bottom-row .social-list .social-item { display: flex; align-items: center; cursor: pointer; }
footer .footer-inner .footer-top .footer-contact .footer-bottom-row .social-list .social-item svg { color: var(--grey-link); width: 18px; }
footer .footer-inner .footer-top .footer-contact .footer-bottom-row .social-list .social-item svg:hover { color: var(--primary); }
footer .footer-inner .footer-bottom { display: flex; gap: 10px; font-size: 13px; flex-direction: column; color: var(--grey-link); }
footer .footer-inner .footer-bottom .legal-links { display: flex; gap: 10px; text-decoration: underline; flex-wrap: wrap; white-space: nowrap; }
footer .footer-inner .footer-bottom .legal-links .legal-item { cursor: pointer; }
footer .footer-inner .footer-bottom .legal-links .legal-item:hover { color: var(--primary); }

@media (max-width: 992px) { .site-header { padding: 0 25px; } .site-header .nav { display: none; } .hero .title { justify-content: start; font-size: 28px; } .hero .sub { font-size: 20px; } .hero .text {font-size: 14px; } .info { font-size: 28px; margin: 120px 25px 200px; } }


.hero.legal { max-width: 80%; margin: 0 auto; padding: 100px 0; box-sizing:border-box; }
.hero.legal.container { max-width: 1600px; }
.hero.legal.container h{ max-width: 1600px; }
.hero.legal header { margin-bottom: 20px; }
.hero.legal.container .title { justify-content: start; }
.hero.legal .last-update { font-weight:700; margin-bottom:24px; color:#111; }
.hero.legal .terms-area.toc { display:grid; grid-template-columns: var(--sidebar-width) 1fr; gap:40px; align-items:start; }
.hero.legal .terms-area.toc .page .content { max-width:80%; }
.hero.legal .terms-area .page .content section { scroll-margin-top: calc(var(--sec-top-offset) + 8px); margin-bottom: 120px; }
.hero.legal .terms-area .page .content section h2 { font-size: 32px; margin-bottom: 30px; }
.hero.legal .terms-area .page .content p { color:#2b2b2b; line-height:1.6; margin:10px 0; font-size: 16px; }
.hero.legal .terms-area .page .content p.link { text-decoration: underline; }
.hero.legal .terms-area .page .content p.link:hover { color: var(--primary); }
.hero.legal .terms-area .page .content .impress { display: flex; gap: 170px; flex-wrap: wrap; margin-bottom:48px; }
.hero.legal .terms-area .page .content .impress h2 { font-size: 24px; margin-bottom: 10px; }
.hero.legal .terms-area .toc { align-self:start; position:sticky; top:var(--toc-top-offset); display:block; box-sizing:border-box; height:auto; }
.hero.legal .terms-area .toc .toc-inner { padding-right: 8px; }
.hero.legal .terms-area .toc ul { list-style:none; padding:0; margin:0; position:relative; }
.hero.legal .terms-area .toc li { padding: 6px 0; }
.hero.legal .terms-area .toc a { color:var(--primary-light); text-decoration:none; font-size:12px; display:block; transition:color .12s, font-weight .12s; font-weight:400; padding-left: 16px; }
.hero.legal .terms-area .toc a.active { color:var(--primary); font-weight:600; }
.hero.legal .terms-area .toc a:hover { color:var(--primary); }
.hero.legal .terms-area .toc .track { position:absolute; left:2px; top:6px; bottom:6px; width:1px; background:var(--primary-light); }
.hero.legal .terms-area .toc .indicator { position:absolute; left:0; width:3px; background:transparent; transition: top .12s ease, height .12s ease, width .12s ease, background .12s ease; }
@media (max-width:1200px) { .hero.legal .terms-area { grid-template-columns: 220px 1fr; } .hero.legal .terms-area .page .content .impress { gap: 80px; } }
@media (max-width:992px) { .hero.legal { max-width: 85%; padding: 0; } .hero.legal .terms-area { grid-template-columns: 1fr; } .hero.legal .terms-area.toc {display: flex; } .hero.legal .terms-area.toc .page .content { max-width: 100%; } .hero.legal .terms-area .toc { display:none; } .hero.legal .terms-area .page { padding-top:10px; } .hero.legal .terms-area .page .content .impress { gap: 100%; margin-bottom: 30px; } .hero.legal .terms-area .page .content section { margin-bottom:48px; } .hero.legal .terms-area .page .content section h2 { font-size: 18px; } .hero.legal .terms-area .page .content p { font-size: 14px; }}

.ui-scrollbar.menu-open { overflow-y: hidden; }
.menu-rows { position: fixed; width: 100%; height: 100%; top: 0; z-index: 900; pointer-events: none; }
.menu-rows.open { pointer-events: auto; }
.menu-row { transition-delay: 0ms; }
.menu-row { position: absolute; left: 0; width: 100%; transform: translateX(100%); transition: transform 360ms cubic-bezier(.22,.9,.36,1); transition-delay: 0ms; }
.menu-row-1 { top: 0; height: var(--menu-row-1); background: var(--primary); } 
.menu-row-2 { top: var(--menu-row-1); height: var(--menu-row-2); background: var(--primary); }
.menu-row-3 { height: var(--menu-row-3); background: var(--primary); }
.menu-rows.open .menu-row:nth-child(1) { transform: translateX(0); transition-delay: 0ms; } 
.menu-rows.open .menu-row:nth-child(2) { transform: translateX(0); transition-delay: 90ms; }
.menu-rows.open .menu-row:nth-child(3) { transform: translateX(0); transition-delay: 180ms; }
body.menu-open .site-header .logo svg path { fill: #fff !important; }
.menu-toggle .burger-btn.burger-animated.open .burger-lines:after, .menu-toggle .burger-btn.burger-animated.open .burger-lines:before { background: #fff; }


.menu-full { display: flex; align-items: center; justify-content: center; height: 100%; z-index: 901; opacity: 0; visibility: hidden; }
.menu-full .inner .logo svg { height: 44px; width: auto; }
.menu-full .inner .nav { display: flex; flex-direction: column; gap: 22px; }
.menu-full .inner .nav .nav-link { color: #ffffff; text-decoration: none; font-size: 36px; font-weight: 600; cursor: pointer; }
.menu-full .inner .nav .nav-link {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 10px;
    height: 100%;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
}

.menu-full .inner .nav .nav-link:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease;
    background: #fff;
}

.menu-full .inner .nav .nav-link:hover:after {
    transform-origin: left;
    transform: scaleX(1);
}

.menu-full .inner .nav .nav-link.active:after {
    transform-origin: left;
    transform: scaleX(1);
    transition: none;
}
.menu-rows.open .menu-full { visibility: visible; animation: menuFullIn 320ms cubic-bezier(.22,.9,.36,1) forwards; animation-delay: calc(var(--menu-row-delay-2) + var(--menu-row-duration)); }
@keyframes menuFullIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }}
@media (max-width: 992px) { .menu-full .inner { padding: 28px; } .menu-full .inner .nav .nav-link { font-size: 28px; }}

.hero.faq { margin: 0 auto; padding: 100px 0; box-sizing:border-box; }

.faq-top { margin-bottom: 18px; display:flex; flex-direction:column; gap:12px; margin: 100px 0 30px; }
.faq-categories { display:flex; justify-content: end; gap:8px; font-size: 18px; flex-wrap: wrap; width: 100%; cursor: pointer; }
.faq-categories .cat-btn.active { font-weight:600; }
.faq-categories .cat-btn.active { color: var(--primary); }
.faq-list { display:block; border-top: 1px solid rgba(0,0,0,0.06); }
.faq-item { display:flex; flex-direction:column; border-bottom: 1px solid rgba(0,0,0,0.04); padding: 15px 0; }
.faq-question {
display:flex;
align-items:center;
padding: 15px 0;
gap:12px;
width:100%;
text-align:left;
cursor:pointer;
outline:none;
}
.faq-number {
min-width: 25px;
color: var(--primary);
font-weight:700;
font-family: monospace;
font-size: 20px;
}
.faq-title { flex:1; font-size:20px; font-weight:600; color:#111; }
.faq-chevron { width:18px; height:18px; transition: transform 220ms ease; color: rgba(0,0,0,0.45); }
.faq-item.expanded .faq-chevron { transform: rotate(180deg); }
.faq-answer {
overflow:hidden;
max-height:0;
transition: max-height 320ms ease, opacity 240ms ease;
opacity:0;
color: var(--black-link);
font-size:14px;
line-height:1.5;
}
.faq-answer .answer { margin-top: 10px; }
.faq-item.expanded .faq-answer {
opacity:1; overflow: visible;
margin: 5px 0 15px;
}
@media (min-width:800px) {
.faq-top { flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (max-width:992px) { .hero.faq { padding: 0; }}