html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#0E0E16;-webkit-font-smoothing:antialiased}
a{color:var(--link,#7A2FE0);text-decoration:none}a:hover{color:var(--linkh,#5A1FB0)}
button{font-family:var(--ff-text)}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
::selection{background:#FFD9C4;color:#1A1B22}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/unbounded-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/unbounded-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/unbounded-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/unbounded-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/unbounded-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/unbounded-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Переопределения ascent/descent нужны там, где line-height не задан явно
(например .hero__badge): при line-height: normal высота строки берётся из метрик
шрифта, а size-adjust домножает и их — растянутый на 133% фолбэк давал строку
в 165% от кегля против 124% у настоящего Unbounded. Проценты здесь считаются
ДО size-adjust, поэтому в сумме они дают 124/1.33 и 120/1.06; итог сверен
в браузере — высота строки совпадает с настоящим шрифтом до пикселя. */
@font-face {
font-family: 'Unbounded fallback';
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 133%;
ascent-override: 75.2%;
descent-override: 18%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Golos fallback';
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 106%;
ascent-override: 90.6%;
descent-override: 22.6%;
line-gap-override: 0%;
}
:root{--bg:#FDFDFB;--glass:rgba(253,253,251,.86);--surface:#FFFFFF;--tint:#F6F5FA;--ink:#1A1B22;--ink2:#2A2A34;--mut:#55555F;--mut2:#6B6B78;--mut3:#8A8A98;--mut4:#9A99A8;--line:#ECEBF2;--line2:#DBDAE5;--chip:#F1F0F6;--chip2:#E9E8F0;--panel:#14141F;--kick:#7A2FE0;--link:#7A2FE0;--linkh:#5A1FB0;--vchip-bg:#F2ECFC;--vchip:#5B3FA8;--oacc:var(--acch);--stepbg:#FFF3EC;--stepbd:#FFD4BC;--num-bg:#F7F5FC;--num-bd:#E3DEF2;--hl1:#FFE0CB;--hl2:#EAE4F9;--logobg:transparent;--av:#F3F1FA;--dot:rgba(26,27,34,.13)}
:root[data-theme="dark"]{--bg:#0E0E16;--glass:rgba(14,14,22,.84);--surface:#16161F;--tint:#12121B;--ink:#F1F1F6;--ink2:#E2E2EC;--mut:#ABABBE;--mut2:#9595A9;--mut3:#83839A;--mut4:#75758B;--line:#23232F;--line2:#31313F;--chip:#1C1C27;--chip2:#252532;--panel:#181824;--kick:#B18CFF;--link:#B18CFF;--linkh:#C9B4FF;--vchip-bg:rgba(122,47,224,.20);--vchip:#C9B4FF;--oacc:var(--accL);--stepbg:var(--accT);--stepbd:var(--accB);--num-bg:#1C1C28;--num-bd:#2E2E3E;--hl1:var(--accT2);--hl2:rgba(122,47,224,.42);--logobg:#FFFFFF;--av:#232330;--dot:rgba(255,255,255,.14)}
:root {
--ff-display: Unbounded, 'Unbounded fallback', sans-serif;
--ff-text: 'Golos Text', 'Golos fallback', sans-serif;
}
:root {
--acc: #FF5A1F;
--acch: rgb(222,78,27);
--accL: rgb(255,136,94);
--accL2: rgb(255,164,132);
--acc2: rgb(255,103,49);
--accT: rgba(255,90,31,0.13);
--accT2: rgba(255,90,31,0.22);
--accB: rgba(255,90,31,0.5);
--accS: rgba(255,90,31,0.3);
--accS2: rgba(255,90,31,0.4);
}
:root {
--save: #0B7A55;
--saveBg: rgba(11,122,85,.10);
--saveBd: rgba(11,122,85,.30);
--saveOn: #34D399;
--warn: #B45309;
--onPanel: #F1F1F6;
--onPanel2: #A6A6BC;
--onPanelLine: rgba(255,255,255,.10);
}
:root[data-theme="dark"] {
--save: #34D399;
--saveBg: rgba(52,211,153,.12);
--saveBd: rgba(52,211,153,.30);
--saveOn: #5EEAB4;
--warn: #FBBF24;
}
@keyframes omSpin{to{transform:rotate(360deg)}}
@keyframes omPop{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes omFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes omDd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes omMarq{to{transform:translateX(-50%)}}
@keyframes omShine{from{transform:translateX(-170%) skewX(-16deg)}to{transform:translateX(330%) skewX(-16deg)}}
@keyframes omPulse{0%{box-shadow:0 12px 32px var(--accS2),0 0 0 0 var(--accB)}75%{box-shadow:0 12px 32px var(--accS2),0 0 0 20px transparent}100%{box-shadow:0 12px 32px var(--accS2),0 0 0 0 transparent}}
@keyframes omHl{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes omHalo{0%,100%{box-shadow:0 24px 48px rgba(10,10,18,.45),0 0 0 0 var(--accB)}50%{box-shadow:0 26px 54px rgba(10,10,18,.5),0 0 0 16px transparent}}
@keyframes omRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes omRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body {
font-family: var(--ff-text);
color: var(--ink, #1A1B22);
background: var(--bg, #FDFDFB);
min-height: 100vh;
transition: background .3s ease, color .3s ease;
}
.js [data-rv] {
opacity: 0;
transform: translateY(26px);
transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
transition-delay: var(--rv-delay, 0ms);
}
.js [data-rv].is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js [data-rv] { opacity: 1; transform: none; transition: none; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
}
.btn--primary {
background: var(--acc);
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
padding: 10.5px 20px;
border-radius: 11px;
box-shadow: 0 6px 18px var(--accS);
transition: background .2s ease;
}
.btn--primary:hover {
background: var(--acch);
color: #FFFFFF;
}
.btn:disabled { cursor: default; }
.btn--primary:disabled:hover { background: var(--acc); }
.btn--icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
background: var(--chip);
color: var(--mut);
}
.btn--icon:hover {
background: var(--chip2);
color: var(--ink);
}
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 90;
background: #1A1B22;
color: #F2F2F8;
border: 1px solid rgba(255,255,255,.14);
font-size: 13.5px;
font-weight: 500;
padding: 12px 20px;
border-radius: 12px;
box-shadow: 0 14px 34px rgba(10,10,18,.4);
animation: omPop .3s ease;
}
.toast[hidden] { display: none; }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 130;
background: var(--bg);
display: flex;
flex-direction: column;
overflow-y: auto;
padding-right: var(--sbw, 0px);
box-sizing: border-box;
animation: omDd .2s ease;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__header {
display: flex;
align-items: center;
gap: 10px;
height: 68px;
padding: 0 18px;
box-sizing: border-box;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
background: var(--glass);
backdrop-filter: blur(16px);
}
.mobile-menu__spacer { flex: 1; }
.mobile-menu__logo {
width: auto;
height: 44px;
display: block;
}
.mobile-menu__logo--dark,
:root[data-theme="dark"] .mobile-menu__logo--light { display: none; }
:root[data-theme="dark"] .mobile-menu__logo--dark { display: block; }
.mobile-menu__close {
width: 40px;
height: 40px;
padding: 0;
border-radius: 12px;
background: var(--chip);
border: none;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.mobile-menu__nav {
padding: 20px 18px 26px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mobile-menu__nav-link {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 0 14px;
border-radius: 14px;
font-size: 18px;
font-weight: 500;
color: var(--ink);
}
.mobile-menu__nav-link:hover { color: var(--ink); }
.mobile-menu__nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: none;
background: var(--line2);
}
.mobile-menu__nav-text { flex: 1; }
.mobile-menu__nav-arrow { opacity: .4; }
.mobile-menu__nav-link.is-active,
.page-pricing .mobile-menu__nav-link[data-nav="__pricing"] {
font-weight: 700;
background: var(--tint);
}
.mobile-menu__nav-link.is-active .mobile-menu__nav-dot,
.page-pricing .mobile-menu__nav-link[data-nav="__pricing"] .mobile-menu__nav-dot {
background: var(--acc);
}
.mobile-menu__actions {
padding: 0 18px 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-menu__cta {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
background: var(--acc);
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
border-radius: 14px;
box-shadow: 0 10px 26px var(--accS);
}
.mobile-menu__cta:hover { color: #FFFFFF; }
.mobile-menu__lang-block { padding: 0 18px 34px; }
.mobile-menu__lang-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mut4);
margin-bottom: 12px;
}
.mobile-menu__lang-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mobile-menu__lang {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1.5px solid var(--line);
background: transparent;
color: var(--mut);
}
.mobile-menu__lang:hover { color: var(--mut); }
.mobile-menu__lang.is-active {
border-color: var(--acc);
background: var(--accT);
color: var(--oacc);
}
.mobile-menu__lang.is-active:hover { color: var(--oacc); }
.modal {
position: fixed;
inset: 0;
z-index: 120;
background: rgba(8, 8, 14, .8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 44px;
box-sizing: border-box;
animation: omDd .22s ease;
}
.modal[hidden] { display: none; }
.modal__box {
position: relative;
width: min(960px, 94vw);
aspect-ratio: 16 / 9;
background: #14141F;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
border: 1px solid rgba(255, 255, 255, .1);
}
.modal__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
color: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.modal__close:hover {
background: rgba(255, 255, 255, .2);
}
@media (prefers-reduced-motion: reduce) {
.modal {
animation: none;
}
}
.header {
position: sticky;
top: 0;
z-index: 60;
background: var(--glass);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
transition: background .3s ease;
}
.header__progress {
position: absolute;
left: 0;
top: 0;
height: 2.5px;
width: 0;
background: linear-gradient(90deg, var(--acc), #E4007C);
pointer-events: none;
}
.header__inner {
max-width: 1220px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
height: 68px;
display: flex;
align-items: center;
gap: 24px;
}
.header__inner > * { flex: none; }
.header__spacer { flex: 1; }
.header__logo-link {
display: flex;
align-items: center;
}
.header__logo {
width: auto;
height: 44px;
display: block;
}
.header__logo--dark,
:root[data-theme="dark"] .header__logo--light { display: none; }
:root[data-theme="dark"] .header__logo--dark { display: block; }
.header__theme-icon--sun { display: none; }
:root[data-theme="dark"] .header__theme-icon--sun { display: block; }
:root[data-theme="dark"] .header__theme-icon--moon { display: none; }
.header__nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: 10px;
}
.header__nav-link {
display: inline-flex;
align-items: center;
flex: none;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
padding: 7px 9px;
color: var(--mut);
transition: color .25s ease;
}
.header__nav-link:hover { color: var(--ink); }
.header__nav-link.is-active,
.page-pricing .header__nav-link[data-nav="__pricing"] {
font-weight: 600;
color: var(--ink);
}
.header__nav-dot {
width: 0;
height: 6px;
border-radius: 50%;
background: #FF5A1F;
flex: none;
margin-right: 0;
transition: width .28s cubic-bezier(.22,1,.36,1), margin-right .28s cubic-bezier(.22,1,.36,1);
}
.header__nav-link.is-active .header__nav-dot,
.page-pricing .header__nav-link[data-nav="__pricing"] .header__nav-dot {
width: 6px;
margin-right: 8px;
}
.header__burger {
display: none;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--chip);
border: none;
color: var(--ink);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
order: 9;
}
.lang { position: relative; }
.lang__toggle {
display: flex;
align-items: center;
gap: 7px;
background: var(--chip);
border: none;
border-radius: 999px;
padding: 8.5px 15px;
font-size: 12.5px;
font-weight: 700;
color: var(--ink);
cursor: pointer;
}
.lang__toggle:hover { background: var(--chip2); }
.lang__caret { color: var(--mut3); }
.lang__menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 196px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 20px 48px rgba(10,10,18,.22);
padding: 6px;
z-index: 70;
animation: omDd .18s ease;
}
.lang__menu[hidden] { display: none; }
.lang__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
box-sizing: border-box;
border-radius: 9px;
padding: 9.5px 11px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
text-align: left;
}
.lang__item:hover {
background: var(--tint);
color: var(--ink);
}
.lang__item .lang__check { display: none; }
.lang__item.is-active .lang__check { display: block; }
.header__home {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border-radius: 999px;
background: var(--chip);
font-size: 13px;
font-weight: 600;
color: var(--ink);
transition: background .2s ease;
}
.header__home:hover {
background: var(--chip2);
color: var(--ink);
}
@media (min-width: 1001px) and (max-width: 1180px) {
.header__inner {
gap: 12px;
padding-left: 24px;
padding-right: 24px;
}
.header__nav {
gap: 0;
margin-left: 2px;
}
.header__nav-link {
padding-left: 7px;
padding-right: 7px;
}
}
@media (max-width: 1000px) {
.header__nav,
.header__desktop-only { display: none; }
.header__burger { display: flex; }
.header__inner {
padding-left: 18px;
padding-right: 18px;
gap: 10px;
}
}
@media (max-width: 640px) {
.header__home {
padding: 0;
width: 40px;
justify-content: center;
gap: 0;
}
.header__home-text { display: none; }
}
.hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: min(calc(100svh - 68px), 900px);
box-sizing: border-box;
}
.hero__glow-top {
position: absolute;
top: -160px;
right: -120px;
width: 560px;
height: 560px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%, var(--accT), rgba(255,138,0,.07) 45%, transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.hero__glow-bottom {
position: absolute;
bottom: -200px;
left: -160px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle at 60% 40%, rgba(47,107,255,.10), transparent 68%);
filter: blur(40px);
pointer-events: none;
}
.hero__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 62% 18%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse 75% 65% at 62% 18%, #000 25%, transparent 72%);
pointer-events: none;
}
.hero__grid {
position: relative;
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: clamp(28px, 5svh, 56px) 40px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 56px;
align-items: center;
}
.hero__badge {
display: none;
align-items: center;
gap: 9px;
border: 1px solid var(--num-bd);
background: var(--surface);
border-radius: 999px;
padding: 7px 15px;
}
.hero__badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--acc);
flex: none;
}
.hero__badge-text {
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--mut);
}
.hero__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 34px;
line-height: 1.18;
letter-spacing: -.01em;
margin: 22px 0 0;
text-wrap: balance;
}
.hero__subtitle {
display: block;
font-size: .68em;
font-weight: 500;
line-height: 1.36;
color: var(--mut);
margin-top: 16px;
text-wrap: pretty;
}
.hero__subtitle-accent {
color: var(--ink);
font-weight: 600;
}
.hero__lede {
font-size: 17.5px;
line-height: 1.6;
color: var(--mut);
margin: 20px 0 0;
max-width: 560px;
text-wrap: pretty;
}
.hero__lede-accent {
color: var(--acc);
font-weight: 700;
}
.hero__cta-row {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
flex-wrap: wrap;
}
.hero__cta {
gap: 10px;
position: relative;
overflow: hidden;
font-size: 16px;
padding: 17px 30px;
border-radius: 14px;
box-shadow: 0 10px 28px var(--accS);
transition: transform .2s ease, background .2s ease;
}
.hero__cta:hover {
transform: translateY(-2px);
}
.hero__cta-shine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 34%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
animation: omShine 4s ease-in-out 1.6s infinite;
pointer-events: none;
}
.hero__trust {
display: inline-flex;
align-items: center;
gap: 11px;
margin-top: 20px;
padding: 9px 17px 9px 11px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 999px;
box-shadow: 0 4px 14px rgba(15,15,25,.05);
}
.hero__trust-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--stepbg);
color: var(--oacc);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.hero__trust-text {
font-size: 13px;
color: var(--mut3);
letter-spacing: .01em;
}
.hero__trust-strong {
color: var(--ink);
font-weight: 700;
}
.hero__media-wrap {
position: relative;
}
.hero__media {
position: relative;
overflow: hidden;
border-radius: 24px;
background: #14141F;
box-shadow: 0 30px 70px rgba(15,15,25,.26);
transition: transform .45s ease;
width: 100%;
box-sizing: border-box;
height: min(548px, 58svh);
max-width: none;
margin: 0;
}
.hero__media:hover {
transform: translateY(-6px);
}
.hero__media-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 70%;
display: block;
}
.hero__media-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 48%, rgba(8,8,16,.30) 70%, rgba(8,8,16,.78) 100%);
}
.hero__media-shine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 46%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent);
animation: omShine 5.5s ease-in-out 1s infinite;
pointer-events: none;
}
.hero__media-caption {
position: absolute;
left: 24px;
right: 24px;
bottom: 26px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.hero__media-duration {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
color: #FFFFFF;
background: var(--acc);
border-radius: 999px;
padding: 6px 13px;
box-shadow: 0 8px 22px var(--accS);
}
.hero__media-duration-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.hero__media-title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 27px;
line-height: 1.18;
letter-spacing: -.015em;
color: #FFFFFF;
text-shadow: 0 3px 20px rgba(0,0,0,.6);
text-wrap: balance;
}
.hero__media-play {
display: flex;
align-items: center;
gap: 13px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.28);
backdrop-filter: blur(10px);
border-radius: 999px;
padding: 8px 20px 8px 8px;
cursor: pointer;
color: #FFFFFF;
transition: background .25s ease, transform .25s ease;
}
.hero__media-play:hover {
background: rgba(255,255,255,.2);
transform: translateY(-2px);
}
.hero__media-play-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--acc);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: none;
box-shadow: 0 8px 22px var(--accS2);
animation: omPulse 2.8s ease-out infinite;
}
.hero__media-play-icon svg {
margin-left: 3px;
}
.hero__media-play-text {
font-size: 14.5px;
font-weight: 700;
letter-spacing: .01em;
}
.hero__media-note {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 11px 15px;
display: none;
align-items: center;
gap: 10px;
}
.hero__media-note-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #5CE07C;
flex: none;
}
.hero__media-note-text {
font-size: 12.5px;
color: #DCDCEA;
}
.hero__bullets {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 8px;
}
.hero__bullet {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px 20px;
transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.hero__bullet:hover {
transform: translateY(-4px);
border-color: var(--accB);
box-shadow: 0 14px 30px rgba(15,15,25,.10);
}
.hero__bullet-icon {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--accT);
color: var(--acc);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.hero__bullet-text {
font-size: 14.5px;
font-weight: 600;
color: var(--ink2);
line-height: 1.3;
text-wrap: pretty;
}
@media (max-width: 1000px) {
.hero { min-height: 0; }
.hero__grid {
grid-template-columns: 1fr;
gap: 34px;
padding: 34px 22px 46px;
}
.hero__title { font-size: 30px; }
}
@media (max-width: 640px) {
.hero__bullets {
grid-template-columns: 1fr;
gap: 10px;
}
.hero__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.hero__cta-shine,
.hero__media-shine,
.hero__media-play-icon {
animation: none;
}
}
.marquee {
display: none;
background: var(--panel);
overflow: hidden;
padding: 15px 0;
transition: background .3s ease;
}
.marquee__track {
display: flex;
width: max-content;
animation: omMarq 32s linear infinite;
}
.marquee__item {
display: flex;
align-items: center;
gap: 28px;
padding-right: 28px;
flex: none;
}
.marquee__text {
font-size: 13.5px;
font-weight: 600;
letter-spacing: .04em;
color: #E8E8F0;
white-space: nowrap;
}
.marquee__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--acc);
flex: none;
}
.audience {
scroll-margin-top: 86px;
background: var(--tint);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background .3s ease;
}
.audience__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 88px 40px;
box-sizing: border-box;
}
.audience__intro {
max-width: 640px;
}
.audience__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
text-wrap: balance;
}
.audience__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-top: 38px;
}
.audience__card {
position: relative;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 20px;
box-sizing: border-box;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.audience__card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 48px rgba(15, 15, 25, .12);
border-color: rgba(255, 120, 60, .5);
}
.audience__media {
position: relative;
aspect-ratio: 3 / 2;
background: #0B0B10;
}
.audience__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.audience__body {
padding: 24px 28px 28px;
}
.audience__row {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.audience__num {
font-family: var(--ff-display);
font-weight: 600;
font-size: 13px;
color: var(--mut4);
}
.audience__bar {
width: 34px;
height: 3px;
border-radius: 2px;
}
.audience__bar--1 { background: #FF5A1F; }
.audience__bar--2 { background: #6C2BD9; }
.audience__bar--3 { background: var(--ink); }
.audience__name {
font-size: 19px;
font-weight: 700;
margin-top: 18px;
}
.audience__text {
font-size: 14.5px;
line-height: 1.6;
color: var(--mut);
margin-top: 10px;
text-wrap: pretty;
}
@media (max-width: 1000px) {
.audience__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.audience__grid {
grid-template-columns: 1fr;
}
.audience__title {
font-size: 24px;
}
}
@media (max-width: 640px) {
.audience__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.audience__title {
font-size: 22px;
}
}
.learn {
scroll-margin-top: 86px;
}
.learn__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 92px 40px;
box-sizing: border-box;
}
.learn__intro {
max-width: 680px;
}
.learn__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
text-wrap: balance;
}
.learn__meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.learn__meta-chip {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--chip);
border-radius: 999px;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--mut);
}
.learn__meta-chip--telegram {
background: rgba(42, 171, 238, .13);
font-weight: 700;
color: #2AABEE;
}
.learn__grid {
display: grid;
grid-template-columns: 1fr 396px;
gap: 40px;
margin-top: 36px;
align-items: start;
}
.learn__list {
display: flex;
flex-direction: column;
gap: 14px;
}
.learn__card {
display: flex;
gap: 18px;
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
box-sizing: border-box;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.learn__card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(15, 15, 25, .10);
border-color: var(--accB);
}
.learn__thumb {
position: relative;
width: 172px;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: #14141F;
flex: none;
}
.learn__thumb-img,
.learn__preview-video-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.learn__thumb-gradient,
.learn__preview-video-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 18, .12), rgba(10, 10, 18, .42));
}
.learn__thumb-play,
.learn__preview-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.learn__thumb-play-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--acc);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(232, 73, 15, .45);
}
.learn__thumb-play-icon svg { margin-left: 2px; }
.learn__thumb-duration {
position: absolute;
right: 7px;
bottom: 6px;
background: rgba(0, 0, 0, .6);
color: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
border-radius: 6px;
padding: 2.5px 7px;
}
.learn__card-body {
flex: 1;
min-width: 0;
}
.learn__card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.learn__card-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--oacc);
}
.learn__card-len {
font-size: 11px;
color: var(--mut4);
}
.learn__card-title {
font-size: 16.5px;
font-weight: 700;
line-height: 1.35;
margin-top: 5px;
}
.learn__card-text {
font-size: 14px;
color: var(--mut2);
line-height: 1.55;
margin-top: 4px;
text-wrap: pretty;
}
.learn__side {
position: sticky;
top: 96px;
}
.learn__preview {
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
overflow: hidden;
box-shadow: 0 26px 60px rgba(15, 15, 25, .14);
}
.learn__preview-header {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.learn__preview-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: #2AABEE;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.learn__preview-name {
font-size: 14px;
font-weight: 700;
}
.learn__preview-status {
font-size: 11.5px;
color: #22A06B;
margin-top: 1px;
}
.learn__preview-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--tint);
}
.learn__preview-msg {
max-width: 88%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px 14px 14px 4px;
padding: 10px 13px;
}
.learn__preview-msg-text {
font-size: 13px;
line-height: 1.5;
}
.learn__preview-msg-time {
font-size: 10.5px;
color: var(--mut4);
text-align: right;
margin-top: 3px;
}
.learn__preview-video {
max-width: 92%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px 14px 14px 4px;
overflow: hidden;
}
.learn__preview-video-media {
position: relative;
aspect-ratio: 16 / 9;
background: #14141F;
}
.learn__preview-video-play-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--acc);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(232, 73, 15, .5);
animation: omPulse 3s ease-out infinite;
}
.learn__preview-video-play-icon svg { margin-left: 2px; }
.learn__preview-video-duration {
position: absolute;
right: 8px;
bottom: 7px;
background: rgba(0, 0, 0, .6);
color: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
border-radius: 6px;
padding: 2.5px 7px;
}
.learn__preview-video-body {
padding: 9px 12px;
}
.learn__preview-video-title {
font-size: 12.5px;
font-weight: 700;
line-height: 1.4;
}
.learn__preview-video-meta {
font-size: 10.5px;
color: var(--mut4);
margin-top: 3px;
}
.learn__preview-input {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--line);
}
.learn__preview-input-field {
flex: 1;
background: var(--chip);
border-radius: 999px;
padding: 9px 14px;
font-size: 12.5px;
color: var(--mut3);
}
.learn__preview-input-send {
width: 34px;
height: 34px;
border-radius: 50%;
background: #2AABEE;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.learn__cta {
width: 100%;
box-sizing: border-box;
gap: 10px;
margin-top: 16px;
font-size: 15px;
padding: 15px 24px;
border-radius: 14px;
box-shadow: 0 10px 28px var(--accS);
position: relative;
overflow: hidden;
transition: transform .2s ease, background .2s ease;
}
.learn__cta:hover {
transform: translateY(-2px);
}
.learn__cta-shine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 34%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
animation: omShine 4.4s ease-in-out .8s infinite;
pointer-events: none;
}
.learn__cta-note {
font-size: 12px;
color: var(--mut3);
text-align: center;
margin-top: 10px;
}
@media (max-width: 1000px) {
.learn__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.learn__grid {
grid-template-columns: 1fr;
gap: 34px;
}
.learn__side {
position: static;
}
.learn__title {
font-size: 24px;
}
}
@media (max-width: 640px) {
.learn__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.learn__card {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.learn__thumb {
width: 100%;
}
.learn__title {
font-size: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.learn__cta-shine,
.learn__preview-video-play-icon {
animation: none;
}
}
.about {
scroll-margin-top: 86px;
background: var(--panel);
position: relative;
overflow: hidden;
transition: background .3s ease;
}
.about__decor {
position: absolute;
top: -180px;
left: 30%;
width: 600px;
height: 480px;
background: radial-gradient(ellipse at center, rgba(122, 47, 224, .22), transparent 65%);
filter: blur(40px);
pointer-events: none;
}
.about__wrap {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 92px 40px 78px;
box-sizing: border-box;
}
.about__head {
display: flex;
align-items: flex-end;
gap: 44px;
flex-wrap: wrap;
}
.about__head-col {
flex: 1;
min-width: 320px;
}
.about__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
color: #F2F2F8;
text-wrap: balance;
}
.about__badge {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 6px;
}
.about__badge-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--acc);
box-shadow: 0 0 0 5px var(--accT2);
flex: none;
}
.about__badge-text {
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #8D8DA4;
}
.about__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 40px;
}
.about__stat {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 18px;
padding: 26px 28px 28px;
transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.about__stat:hover {
transform: translateY(-5px);
border-color: var(--accB);
background: rgba(255, 255, 255, .065);
}
.about__stat-line {
position: absolute;
top: 0;
left: 26px;
right: 26px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accB), transparent);
}
.about__stat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.about__stat-value {
font-family: var(--ff-display);
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
letter-spacing: -.015em;
line-height: 1.1;
}
.about__stat-icon {
color: var(--accL);
opacity: .62;
flex: none;
margin-top: 2px;
}
.about__stat-bar {
display: block;
width: 38px;
height: 3px;
border-radius: 2px;
background: var(--acc2);
margin-top: 14px;
}
.about__stat-label {
font-size: 13.5px;
color: #A6A6BC;
line-height: 1.55;
margin-top: 14px;
text-wrap: pretty;
}
.about__trust {
margin-top: 64px;
border-top: 1px solid rgba(255, 255, 255, .09);
padding-top: 40px;
}
.about__trust-head {
max-width: 640px;
}
.about__trust-title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 23px;
line-height: 1.3;
margin: 0;
color: #F2F2F8;
}
.about__trust-lede {
font-size: 14px;
color: #A6A6BC;
line-height: 1.6;
margin-top: 10px;
text-wrap: pretty;
}
.about__marquee-mask {
overflow: hidden;
margin-top: 34px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.about__marquee {
--bl: 26px;
display: flex;
width: max-content;
align-items: center;
animation: omMarq 84s linear infinite;
}
.about__marquee:hover {
animation-play-state: paused;
}
.about__brand {
display: flex;
align-items: center;
gap: 44px;
padding-right: 44px;
flex: none;
}
.about__brand-logo {
width: auto;
display: block;
opacity: .42;
transition: opacity .25s ease;
}
.about__brand-logo:hover {
opacity: 1;
}
.about__brand-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
flex: none;
}
@media (max-width: 1000px) {
.about__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.about__stats {
grid-template-columns: 1fr 1fr;
}
.about__title {
font-size: 24px;
}
.about__marquee {
--bl: 22px;
}
}
@media (max-width: 640px) {
.about__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.about__stats {
grid-template-columns: 1fr;
}
.about__title {
font-size: 22px;
}
.about__marquee {
--bl: 19px;
}
.about__brand {
gap: 28px;
padding-right: 28px;
}
}
@media (prefers-reduced-motion: reduce) {
.about__marquee {
animation: none;
}
}
.how {
scroll-margin-top: 86px;
}
.how__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 96px 40px;
box-sizing: border-box;
}
.how__intro {
max-width: 720px;
}
.how__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
text-wrap: balance;
}
.how__subtitle {
font-family: var(--ff-display);
font-weight: 500;
font-size: 21px;
line-height: 1.36;
letter-spacing: -.01em;
color: var(--mut);
margin-top: 14px;
text-wrap: pretty;
}
.how__lede {
max-width: 900px;
margin-top: 24px;
}
.how__lede-text {
font-size: 16.5px;
line-height: 1.65;
color: var(--mut);
margin: 0;
text-wrap: pretty;
}
.how__lede-accent {
color: var(--ink);
font-weight: 600;
}
.how__grid {
display: grid;
grid-template-columns: 1fr .95fr;
gap: 70px;
margin-top: 44px;
align-items: start;
}
.how__list {
display: flex;
flex-direction: column;
}
.how__step {
display: flex;
gap: 20px;
}
.how__step-rail {
display: flex;
flex-direction: column;
align-items: center;
flex: none;
}
.how__step-num {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--stepbg);
border: 1.5px solid var(--stepbd);
color: var(--oacc);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-display);
font-weight: 600;
font-size: 14px;
}
.how__step:not(:last-child) .how__step-rail::after {
content: '';
width: 2px;
flex: 1;
min-height: 26px;
background: var(--line);
}
.how__step-body {
padding-bottom: 26px;
}
.how__step-title {
font-size: 17px;
font-weight: 700;
line-height: 1.4;
padding-top: 10px;
}
.how__step-text {
font-size: 14.5px;
color: var(--mut2);
line-height: 1.6;
margin-top: 6px;
max-width: 480px;
text-wrap: pretty;
}
.how__side {
position: sticky;
top: 100px;
}
.how__fast {
display: flex;
gap: 14px;
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--acc);
border-radius: 6px 16px 16px 6px;
padding: 16px 20px;
margin-bottom: 18px;
box-shadow: 0 8px 24px rgba(15, 15, 25, .07);
}
.how__fast-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--accT);
color: var(--acc);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.how__fast-text {
font-size: 15px;
font-weight: 600;
line-height: 1.45;
color: var(--ink2);
text-wrap: pretty;
}
.how__fast-accent {
color: var(--acc);
font-weight: 700;
}
.how__cycle {
position: relative;
background: #14141F;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 26px 60px rgba(15, 15, 25, .22);
}
.how__cycle-media {
padding: 52px 20px 78px;
}
.how__cycle-img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.how__cycle-label {
position: absolute;
top: 22px;
left: 26px;
pointer-events: none;
}
.how__cycle-label-text {
font-size: 11px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accL2);
}
.how__cycle-note {
position: absolute;
left: 22px;
right: 22px;
bottom: 20px;
display: flex;
align-items: center;
gap: 14px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
backdrop-filter: blur(6px);
border-radius: 12px;
padding: 12px 16px;
pointer-events: none;
}
.how__cycle-note-text {
font-size: 12.5px;
color: #DCDCEA;
flex: 1;
}
.how__cycle-note-bar {
width: 96px;
height: 5px;
border-radius: 99px;
background: rgba(255, 255, 255, .12);
overflow: hidden;
}
.how__cycle-note-bar-fill {
width: 93%;
height: 100%;
border-radius: 99px;
background: var(--acc);
}
.how__cycle-note-pct {
font-family: var(--ff-display);
font-weight: 600;
font-size: 14px;
color: var(--accL2);
flex: none;
width: 44px;
text-align: right;
font-variant-numeric: tabular-nums;
}
@media (max-width: 1000px) {
.how__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.how__grid {
grid-template-columns: 1fr;
gap: 34px;
}
.how__side {
position: static;
}
.how__title {
font-size: 24px;
}
.how__subtitle {
font-size: 18px;
margin-top: 12px;
}
}
@media (max-width: 640px) {
.how__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.how__title {
font-size: 22px;
}
.how__subtitle {
font-size: 16.5px;
}
}
.cases {
scroll-margin-top: 86px;
background: var(--tint);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background .3s ease;
}
.cases__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 92px 40px;
box-sizing: border-box;
}
.cases__head {
display: flex;
align-items: flex-end;
gap: 30px;
}
.cases__head-col {
flex: 1;
max-width: 700px;
}
.cases__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
text-wrap: balance;
}
.cases__lede {
font-size: 15.5px;
color: var(--mut);
line-height: 1.6;
margin-top: 14px;
max-width: 620px;
text-wrap: pretty;
}
.cases__nav {
display: flex;
align-items: center;
gap: 10px;
flex: none;
padding-bottom: 4px;
}
.cases__arrow {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1.5px solid var(--line2);
background: var(--surface);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .2s;
}
.cases__arrow.is-disabled {
opacity: .32;
pointer-events: none;
}
.cases__viewport {
overflow: hidden;
margin-top: 36px;
}
.cases__track {
display: flex;
width: 100%;
transition: transform .65s cubic-bezier(.22, 1, .36, 1);
transform: translateX(0);
}
@media (min-width: 1001px) {
.cases__viewport[data-page="1"] .cases__track {
transform: translateX(-100%);
}
}
.cases__panel {
width: 100%;
flex: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
box-sizing: border-box;
}
.cases__panel:not(:only-child):first-child {
padding-right: 10px;
}
.cases__panel:not(:only-child):last-child {
padding-left: 10px;
}
.cases__card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.cases__card:hover {
box-shadow: 0 18px 40px rgba(15, 15, 25, .12);
}
.cases__media {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
appearance: none;
color: inherit;
aspect-ratio: 16 / 9;
background: #17172A;
overflow: hidden;
cursor: pointer;
transition: transform .35s ease;
}
.cases__media:hover {
transform: scale(1.03);
}
.cases__media-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cases__media-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 10, 20, .34) 0%, rgba(10, 10, 20, 0) 34%),
radial-gradient(circle at 50% 50%, rgba(10, 10, 20, .32) 0%, rgba(10, 10, 20, .08) 60%);
}
.cases__media-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cases__media-badge-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--acc);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 26px var(--accS2);
animation: omPulse 3s ease-out infinite;
}
.cases__media-badge-icon svg {
margin-left: 3px;
}
.cases__media-duration {
position: absolute;
right: 12px;
top: 10px;
background: rgba(0, 0, 0, .45);
color: #DCDCEA;
font-size: 11px;
font-weight: 600;
border-radius: 7px;
padding: 4px 8px;
}
.cases__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
.cases__quote {
font-size: 15px;
line-height: 1.5;
font-weight: 600;
text-wrap: pretty;
}
.cases__person {
margin-top: auto;
display: flex;
align-items: center;
gap: 10px;
}
.cases__avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--av);
border: 1.5px solid var(--num-bd);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--vchip);
flex: none;
}
.cases__name {
font-size: 13.5px;
font-weight: 700;
}
.cases__role {
font-size: 12px;
color: var(--mut3);
}
.cases__dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 26px;
}
.cases__dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--line2);
transition: all .3s;
}
.cases__viewport[data-page="0"] ~ .cases__dots .cases__dot:first-child,
.cases__viewport[data-page="1"] ~ .cases__dots .cases__dot:last-child {
width: 22px;
background: #FF5A1F;
}
.cases__swipe-hint {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
font-size: 12.5px;
color: var(--mut3);
}
@media (max-width: 1000px) {
.cases__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.cases__nav,
.cases__dots {
display: none;
}
.cases__swipe-hint {
display: flex;
}
.cases__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 26px -22px 0;
padding: 2px 22px 6px;
}
.cases__viewport::-webkit-scrollbar {
display: none;
}
.cases__track {
width: max-content;
transform: none;
gap: 14px;
}
.cases__panel {
width: auto;
display: flex;
padding: 0;
gap: 14px;
}
.cases__panel:first-child,
.cases__panel:last-child {
padding-left: 0;
padding-right: 0;
}
.cases__card {
width: 76vw;
max-width: 330px;
flex: none;
scroll-snap-align: center;
}
.cases__title {
font-size: 24px;
}
}
@media (max-width: 640px) {
.cases__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.cases__title {
font-size: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.cases__media-badge-icon {
animation: none;
}
.cases__track {
transition: none;
}
}
.faq {
scroll-margin-top: 86px;
}
.faq__wrap {
max-width: 920px;
margin: 0 auto;
padding: 92px 40px 70px;
box-sizing: border-box;
}
.faq__head {
text-align: center;
}
.faq__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 31px;
line-height: 1.2;
letter-spacing: -.01em;
margin: 12px 0 0;
text-wrap: balance;
}
.faq__list {
margin-top: 34px;
border-top: 1px solid var(--line);
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__summary {
display: flex;
align-items: center;
gap: 18px;
padding: 22px 6px;
transition: background .25s ease;
}
.faq__summary:hover {
background: var(--tint);
}
.faq__icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--stepbg);
border: 1.5px solid var(--stepbd);
color: var(--oacc);
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform .3s ease;
}
.faq__item[open] .faq__icon {
transform: rotate(45deg);
}
.faq__question {
font-size: 16.5px;
font-weight: 700;
line-height: 1.4;
}
.faq__answer {
font-size: 15px;
color: var(--mut);
line-height: 1.65;
padding: 0 6px 24px 54px;
max-width: 760px;
text-wrap: pretty;
}
@supports selector(::details-content) {
:root {
interpolate-size: allow-keywords;
}
.faq__item::details-content {
height: 0;
overflow: hidden;
opacity: 0;
transition: height .34s cubic-bezier(.32,.72,.28,1), opacity .26s ease, content-visibility .34s allow-discrete;
transition-behavior: allow-discrete;
}
.faq__item[open]::details-content {
height: auto;
opacity: 1;
}
}
@media (max-width: 1000px) {
.faq__wrap {
padding-left: 22px;
padding-right: 22px;
padding-top: 64px;
padding-bottom: 64px;
}
.faq__title {
font-size: 24px;
}
}
@media (max-width: 640px) {
.faq__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
.faq__title {
font-size: 22px;
}
.faq__answer {
padding-left: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.faq__item::details-content {
transition: none;
}
}
.cta__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 0 40px 96px;
box-sizing: border-box;
}
.cta__box {
position: relative;
overflow: hidden;
background: #14141F;
border-radius: 28px;
padding: 74px 60px;
text-align: center;
}
.cta__decor {
position: absolute;
pointer-events: none;
}
.cta__decor--a {
top: -140px;
left: -80px;
width: 440px;
height: 440px;
border-radius: 50%;
background: radial-gradient(circle, var(--accT2), transparent 65%);
filter: blur(50px);
}
.cta__decor--b {
bottom: -160px;
right: -60px;
width: 460px;
height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47,107,255,.22), transparent 65%);
filter: blur(50px);
}
.cta__decor--spin {
inset: -45%;
background: conic-gradient(from 0deg, transparent 0 82%, var(--accT) 91%, transparent 100%);
animation: omSpin 16s linear infinite;
}
.cta__content {
position: relative;
}
.cta__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 32px;
line-height: 1.22;
letter-spacing: -.01em;
color: #FFFFFF;
margin: 0 auto;
max-width: 820px;
text-wrap: balance;
}
.cta__lede {
font-size: 16.5px;
color: #B9B9CC;
line-height: 1.6;
margin-top: 16px;
}
.cta__actions {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 30px;
flex-wrap: wrap;
}
.cta__button {
gap: 10px;
position: relative;
overflow: hidden;
font-size: 16px;
padding: 17px 32px;
border-radius: 14px;
box-shadow: 0 12px 32px var(--accS2);
transition: transform .2s ease, background .2s ease;
}
.cta__button:hover {
transform: translateY(-2px);
}
.cta__button-shine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 34%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
animation: omShine 4.2s ease-in-out 1.2s infinite;
pointer-events: none;
}
.cta__note {
font-size: 12.5px;
color: #77778C;
margin-top: 18px;
}
@media (max-width: 1000px) {
.cta__wrap {
padding: 0 22px 64px;
}
.cta__box {
padding: 52px 26px;
}
.cta__title {
font-size: 24px;
}
}
@media (max-width: 640px) {
.cta__box {
padding: 42px 20px;
border-radius: 22px;
}
.cta__title {
font-size: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.cta__button-shine,
.cta__decor--spin {
animation: none;
}
}
.footer {
background: #0F0F17;
transition: background .3s ease;
position: relative;
overflow: hidden;
}
.footer__bar {
height: 2px;
background: linear-gradient(95deg, #E4007C, #6C2BD9 38%, #2F6BFF 72%, var(--acc));
}
.footer__glow {
position: absolute;
top: -220px;
left: 50%;
transform: translateX(-50%);
width: 640px;
height: 420px;
background: radial-gradient(ellipse at center, var(--accT), transparent 68%);
filter: blur(30px);
pointer-events: none;
}
.footer__wrap {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 64px 40px 36px;
box-sizing: border-box;
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
}
.footer__logo {
width: auto;
height: 58px;
display: block;
}
.footer__lede {
font-size: 13.5px;
color: #9C9CB0;
line-height: 1.65;
margin-top: 14px;
max-width: 320px;
}
.footer__socials {
display: flex;
gap: 9px;
margin-top: 20px;
}
.footer__social {
width: 36px;
height: 36px;
padding: 0;
border-radius: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
color: #C9C9D9;
display: flex;
align-items: center;
justify-content: center;
flex: none;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.footer__social:hover {
background: var(--acc);
color: #FFFFFF;
}
.footer__social--hidden {
display: none;
}
.footer__col {
display: flex;
flex-direction: column;
gap: 11px;
}
.footer__col-title {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #7E7E92;
margin-bottom: 2px;
}
.footer__link {
font-size: 13.5px;
color: #C9C9D9;
}
.footer__link:hover {
color: #FFFFFF;
}
button.footer__link {
background: none;
border: none;
padding: 0;
text-align: left;
cursor: pointer;
}
.footer__bottom {
display: flex;
align-items: center;
gap: 18px;
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 44px;
padding-top: 22px;
font-size: 12.5px;
color: #7E7E92;
flex-wrap: wrap;
}
.footer__spacer {
flex: 1;
}
.footer__email {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 1000px) {
.footer__wrap {
padding: 64px 22px;
}
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 640px) {
.footer__grid {
gap: 30px 20px;
}
.footer__brand,
.footer__col--docs {
grid-column: 1 / -1;
}
.footer__wrap {
padding-top: 52px;
padding-bottom: 52px;
}
}
.doc {
position: relative;
}
.doc__hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--tint);
}
.doc__hero-glow {
position: absolute;
top: -260px;
left: 50%;
transform: translateX(-50%);
width: 720px;
height: 460px;
background: radial-gradient(ellipse at center, var(--accT), transparent 68%);
filter: blur(30px);
pointer-events: none;
}
.doc__hero-wrap {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 46px 40px 40px;
box-sizing: border-box;
}
.doc__crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 12.5px;
color: var(--mut3);
}
.doc__crumb {
color: var(--mut2);
transition: color .2s ease;
}
.doc__crumb:hover {
color: var(--ink);
}
.doc__crumb-sep {
color: var(--mut4);
}
.doc__crumb--current {
color: var(--ink2);
font-weight: 600;
}
.doc__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 38px;
line-height: 1.18;
letter-spacing: -.015em;
margin: 16px 0 0;
max-width: 18ch;
text-wrap: balance;
}
.doc__lede {
font-size: 15.5px;
color: var(--mut);
line-height: 1.65;
margin-top: 14px;
max-width: 62ch;
text-wrap: pretty;
}
.doc__effective {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
padding: 7px 14px 7px 11px;
border-radius: 999px;
border: 1px solid var(--stepbd);
background: var(--stepbg);
font-size: 12.5px;
font-weight: 600;
color: var(--ink2);
}
.doc__effective svg {
color: var(--oacc);
flex: none;
}
.doc__body {
max-width: 1220px;
margin: 0 auto;
padding: 44px 40px 76px;
box-sizing: border-box;
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.doc__toc {
position: sticky;
top: 86px;
}
.doc__toc-title {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mut3);
padding: 0 12px;
}
.doc__toc-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
border-left: 1px solid var(--line);
}
.doc__toc-link {
display: block;
padding: 7px 12px;
margin-left: -1px;
border-left: 2px solid transparent;
font-size: 13px;
line-height: 1.45;
color: var(--mut2);
transition: color .2s ease, border-color .2s ease;
}
.doc__toc-link:hover {
color: var(--ink);
border-left-color: var(--acc);
}
.doc__toc-mobile {
display: none;
}
.doc__content {
max-width: 68ch;
}
.doc__body--plain {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.doc__section + .doc__section {
margin-top: 38px;
}
.doc__preamble {
padding-bottom: 26px;
margin-bottom: 30px;
border-bottom: 1px solid var(--line);
}
.doc__preamble .doc__p {
font-size: 15.5px;
}
.doc__h2 {
scroll-margin-top: 86px;
display: flex;
gap: 12px;
font-family: var(--ff-display);
font-weight: 600;
font-size: 19px;
line-height: 1.35;
letter-spacing: -.01em;
margin: 0 0 14px;
text-wrap: balance;
}
.doc__num {
color: var(--acc);
flex: none;
font-variant-numeric: tabular-nums;
}
.doc__h3 {
position: relative;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: var(--ink2);
margin: 22px 0 10px;
padding-left: 18px;
}
.doc__h3::before {
content: '';
position: absolute;
left: 0;
top: .45em;
width: 8px;
height: 8px;
background: var(--acc);
transform: rotate(45deg);
border-radius: 2px;
}
.doc__section > .doc__h3:first-of-type {
margin-top: 0;
}
.doc__p {
font-size: 15px;
color: var(--mut);
line-height: 1.7;
margin: 0 0 12px;
text-wrap: pretty;
}
.doc__clause {
position: relative;
padding-left: 46px;
}
.doc__clause-num {
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--ink2);
font-variant-numeric: tabular-nums;
}
.doc__clause + .doc__list {
padding-left: 46px;
}
.doc__p:last-child {
margin-bottom: 0;
}
.doc__p--spaced {
margin-top: 16px;
}
.doc__p strong {
color: var(--ink2);
font-weight: 600;
}
.doc__list {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.doc__list:last-child {
margin-bottom: 0;
}
.doc__li {
position: relative;
padding-left: 22px;
font-size: 15px;
color: var(--mut);
line-height: 1.7;
text-wrap: pretty;
}
.doc__li + .doc__li {
margin-top: 7px;
}
.doc__li::before {
content: '';
position: absolute;
left: 6px;
top: .68em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--acc);
}
.doc__p a,
.doc__li a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
transition: text-decoration-color .2s ease;
}
.doc__p a:hover,
.doc__li a:hover {
text-decoration-color: currentColor;
}
.doc__contacts {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.doc__contact {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--mut);
}
.doc__contact-icon {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--chip);
color: var(--oacc);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.doc__callout {
border: 1px solid var(--stepbd);
background: var(--stepbg);
border-radius: 16px;
padding: 20px 22px;
}
.doc__callout .doc__h2 {
margin-bottom: 12px;
}
.doc__more {
border-top: 1px solid var(--line);
margin-top: 54px;
padding-top: 34px;
}
.doc__more-title {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mut3);
}
.doc__more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.doc__more-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
padding: 16px 18px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
transition: border-color .2s ease, background .2s ease;
}
.doc__more-card:hover {
border-color: var(--line2);
background: var(--tint);
color: var(--ink);
}
.doc__more-arrow {
color: var(--mut3);
flex: none;
}
@media (max-width: 1000px) {
.doc__hero-wrap {
padding: 32px 22px 30px;
}
.doc__title {
font-size: 27px;
max-width: none;
}
.doc__lede {
font-size: 14.5px;
}
.doc__body {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 26px 22px 60px;
}
.doc__toc {
display: none;
}
.doc__toc-mobile {
display: block;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
margin-bottom: 26px;
}
.doc__toc-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.doc__toc-caret {
margin-left: auto;
color: var(--mut3);
transition: transform .3s ease;
}
.doc__toc-mobile[open] .doc__toc-caret {
transform: rotate(180deg);
}
.doc__toc-mobile .doc__toc-list {
margin: 0 18px 14px;
border-left: 1px solid var(--line);
}
.doc__content {
max-width: none;
}
.doc__more-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.doc__hero-wrap {
padding-top: 26px;
padding-bottom: 26px;
}
.doc__clause {
padding-left: 0;
}
.doc__clause-num {
position: static;
margin-right: 7px;
}
.doc__clause + .doc__list {
padding-left: 0;
}
.doc__title {
font-size: 23px;
}
.doc__h2 {
font-size: 17px;
gap: 9px;
}
.doc__p,
.doc__li,
.doc__contact {
font-size: 14.5px;
}
.doc__section + .doc__section {
margin-top: 32px;
}
.doc__callout {
padding: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.doc__toc-caret {
transition: none;
}
}
.phero {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--tint), var(--bg));
}
.phero__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(var(--dot) 1.3px, transparent 1.3px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 20%, transparent 72%);
mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 20%, transparent 72%);
pointer-events: none;
}
.phero__wrap {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 52px 40px 0;
box-sizing: border-box;
text-align: center;
}
.phero__badge {
display: inline-flex;
align-items: center;
gap: 9px;
border: 1px solid var(--line2);
background: var(--surface);
border-radius: 999px;
padding: 6px 14px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--mut);
}
.phero__badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--acc);
flex: none;
}
.phero__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 34px;
line-height: 1.2;
letter-spacing: -.015em;
margin: 18px auto 0;
max-width: 760px;
text-wrap: balance;
}
.plans {
position: relative;
scroll-margin-top: 86px;
}
.plans__glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(900px, 100%);
height: 340px;
background: radial-gradient(ellipse at center top, var(--accT), transparent 70%);
filter: blur(30px);
pointer-events: none;
}
.plans__wrap {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 48px 40px 0;
box-sizing: border-box;
}
.plans__kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kick);
}
.plans__head-row {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.plans__name {
font-family: var(--ff-display);
font-weight: 600;
font-size: 23px;
line-height: 1.26;
letter-spacing: -.01em;
margin: 0;
}
.plans__claim {
font-size: 13.5px;
color: var(--mut2);
}
.plans__lede {
font-size: 15.5px;
line-height: 1.65;
color: var(--mut);
margin: 14px 0 0;
max-width: 820px;
text-wrap: pretty;
}
.plans__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: stretch;
margin: 60px 0 52px;
}
.plan {
position: relative;
box-sizing: border-box;
height: 100%;
}
.plan--hot {
height: calc(100% + 52px);
margin: -26px 0;
}
.plan__tag {
position: absolute;
z-index: 2;
top: -13px;
left: 26px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 13px;
border-radius: 999px;
white-space: nowrap;
background: var(--accT);
color: var(--oacc);
border: 1px solid var(--accB);
}
.plan--hot .plan__tag {
background: linear-gradient(95deg, #2258D9, #8B3D9E 48%, #D4256A 80%, #EE7A0E);
color: #FFFFFF;
border: none;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 8px 20px rgba(166,71,166,.42);
}
.plan__shell {
position: relative;
height: 100%;
box-sizing: border-box;
border-radius: 22px;
}
.plan--hot .plan__shell {
border-radius: 24px;
padding: 2px;
overflow: hidden;
background: #A647A6;
box-shadow: 0 26px 64px rgba(166,71,166,.30);
}
.plan__aurora {
position: absolute;
top: 50%;
left: 50%;
width: 190%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: conic-gradient(#2563DB, #06B9DA 14%, #A647A6 32%, #F4447C 48%, #FDAA18 62%, #F4447C 76%, #A647A6 88%, #2563DB);
animation: omRot 7s linear infinite;
pointer-events: none;
}
.plan__card {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
border-radius: 22px;
padding: 28px 26px 26px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
}
.plan--hot .plan__card {
padding: 30px 26px 26px;
background: #11111B;
border: none;
--ink: #F5F5FA;
--ink2: #E4E4EE;
--mut: #ABABBE;
--mut2: #9A9AAE;
--mut3: #83839A;
--line: rgba(255,255,255,.12);
--line2: rgba(255,255,255,.22);
--save: var(--saveOn);
color: var(--ink);
}
.plan__nm {
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--mut3);
margin: 0;
}
.plan__price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.plan__old {
font-family: var(--ff-display);
font-weight: 600;
font-size: 30px;
line-height: 1;
letter-spacing: -.02em;
text-decoration: line-through;
text-decoration-thickness: 2px;
color: var(--mut3);
opacity: .85;
}
.plan__eff {
font-family: var(--ff-display);
font-weight: 600;
font-size: 40px;
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
.plan__per {
font-size: 14px;
color: var(--mut2);
white-space: nowrap;
}
.plan__pay {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
color: var(--ink2);
}
.plan__starter {
display: flex;
align-items: center;
gap: 10px;
background: var(--accT);
border: 1px solid var(--accB);
border-radius: 12px;
padding: 11px 13px;
margin-top: 14px;
}
.plan__starter-icon {
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--acc);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.plan__starter-text {
font-size: 12.5px;
line-height: 1.45;
color: var(--oacc);
}
.plan__starter-text b {
display: block;
font-weight: 700;
}
.plan__gift {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 700;
margin-top: 12px;
color: var(--acc);
}
.plan__gift svg { flex: none; }
.plan__rows {
display: flex;
flex-direction: column;
gap: 9px;
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.plan__row {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
}
.plan__row-k {
font-size: 13px;
color: var(--mut2);
}
.plan__row-v {
margin: 0;
font-size: 13.5px;
font-weight: 700;
text-align: right;
color: var(--ink);
}
.plan__row-v--save { color: var(--save); }
.plan__row-v--warn { color: var(--warn); }
.plan__note {
font-size: 12.5px;
line-height: 1.55;
color: var(--mut2);
margin: 16px 0 0;
text-wrap: pretty;
}
.plan__action {
margin-top: auto;
padding-top: 22px;
}
.plan__btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
font-size: 15px;
font-weight: 700;
padding: 14px;
border: none;
border-radius: 12px;
background: var(--acc);
color: #FFFFFF;
box-shadow: 0 8px 22px var(--accS);
transition: filter .18s ease;
}
a.plan__btn:hover {
color: #FFFFFF;
filter: brightness(1.08);
}
.plan__btn:disabled,
.plans__ask:disabled { cursor: default; }
.plan__btn--hot {
background: linear-gradient(95deg, #2258D9, #8B3D9E 48%, #D4256A 80%, #EE7A0E);
text-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 8px 22px rgba(166,71,166,.38);
}
.plans__terms {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 14px;
font-size: 12.5px;
color: var(--mut3);
}
.plans__ask {
background: none;
border: none;
padding: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--acc);
text-decoration: underline;
}
.plans__duo {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 16px;
align-items: stretch;
margin-top: 34px;
}
.pwhy {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--tint);
border: 1px solid var(--line);
border-radius: 22px;
padding: 28px 30px;
}
.pwhy__rule {
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--acc);
}
.pwhy__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 17px;
line-height: 1.32;
margin: 16px 0 0;
text-wrap: balance;
}
.pwhy__text {
font-size: 14px;
color: var(--mut);
line-height: 1.65;
margin: 10px 0 0;
text-wrap: pretty;
}
.pbonus {
position: relative;
overflow: hidden;
background: var(--panel);
border-radius: 22px;
padding: 28px 30px;
color: #FFFFFF;
}
.pbonus__glow {
position: absolute;
top: -70px;
right: -50px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,90,31,.26), transparent 68%);
filter: blur(30px);
pointer-events: none;
}
.pbonus__inner { position: relative; }
.pbonus__head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.pbonus__icon {
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--acc);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.pbonus__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 18px;
line-height: 1.3;
margin: 0;
}
.pbonus__chip {
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--acc);
border: 1px solid var(--accB);
border-radius: 999px;
padding: 5px 11px;
}
.pbonus__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.pbonus__item {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13.5px;
line-height: 1.5;
color: #DCDCEA;
}
.pbonus__check {
flex: none;
color: var(--acc);
margin-top: 2px;
}
.pbonus__note {
font-size: 12.5px;
color: var(--onPanel2);
line-height: 1.55;
margin-top: 16px;
}
.plans__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 16px;
}
.pstat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 24px 26px;
transition: transform .25s ease, border-color .25s ease;
}
.pstat:hover {
transform: translateY(-4px);
border-color: var(--accB);
}
.pstat__head {
display: flex;
align-items: center;
gap: 12px;
}
.pstat__icon {
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--saveBg);
color: var(--save);
display: flex;
align-items: center;
justify-content: center;
}
.pstat__v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 27px;
letter-spacing: -.02em;
color: var(--save);
line-height: 1;
}
.pstat__l {
font-size: 13.5px;
color: var(--mut);
line-height: 1.55;
margin-top: 14px;
text-wrap: pretty;
}
.pinc {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
padding: 30px 32px;
margin-top: 16px;
}
.pinc__head {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.pinc__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 19px;
line-height: 1.3;
margin: 0;
}
.pinc__sub {
font-size: 13.5px;
color: var(--mut2);
}
.pinc__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.pinc__item {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--tint);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 18px;
transition: border-color .2s ease, transform .2s ease;
}
.pinc__item:hover {
border-color: var(--accB);
transform: translateY(-2px);
}
.pinc__icon {
flex: none;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--accT);
color: var(--acc);
display: flex;
align-items: center;
justify-content: center;
}
.pinc__text {
font-size: 14px;
line-height: 1.5;
color: var(--ink2);
text-wrap: pretty;
}
.pinc__text b {
display: block;
font-weight: 700;
margin-bottom: 2px;
}
@media (max-width: 1000px) {
.phero__wrap,
.plans__wrap {
padding-left: 22px;
padding-right: 22px;
}
.phero__title { font-size: 27px; }
.plans__name { font-size: 20px; }
.plans__grid {
grid-template-columns: 1fr;
gap: 30px;
margin-top: 48px;
}
.plan--hot {
height: 100%;
margin: 0;
}
.plans__duo,
.pbonus__list,
.pinc__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.phero__wrap { padding-top: 40px; }
.phero__title { font-size: 23px; }
.phero__badge { letter-spacing: .1em; }
.plans__stats { grid-template-columns: 1fr; }
.plan__card,
.plan--hot .plan__card { padding: 24px 20px 22px; }
.plan__old { font-size: 26px; }
.plan__eff { font-size: 34px; }
.pwhy,
.pbonus { padding: 24px 22px; }
.pinc { padding: 24px 22px; }
.pstat { padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.plan__aurora { animation: none; }
.pstat,
.pinc__item { transition: none; }
.pstat:hover,
.pinc__item:hover { transform: none; }
}
.ptabs {
position: sticky;
top: 69px;
z-index: 50;
margin-top: 20px;
background: var(--glass);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 6px 20px rgba(15,15,25,.05);
}
.ptabs__wrap {
max-width: 1220px;
margin: 0 auto;
padding: 12px 40px 14px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
}
.ptabs__col {
flex: 0 1 auto;
min-width: 0;
}
.ptabs__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.ptabs__swipe {
display: none;
align-items: center;
gap: 6px;
flex: none;
font-size: 11px;
color: var(--mut3);
white-space: nowrap;
}
.ptabs__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mut3);
margin-bottom: 8px;
}
.ptabs__row {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
max-width: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 13px;
padding: 4px;
}
.ptabs__btn {
display: flex;
align-items: center;
gap: 7px;
flex: none;
white-space: nowrap;
padding: 8px 14px;
border-radius: 9px;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--mut2);
border: 1px solid transparent;
transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.ptabs__btn:hover {
color: var(--ink);
background: var(--tint);
}
.ptabs__btn.is-active {
font-weight: 700;
color: var(--oacc);
background: var(--accT);
border-color: var(--acc);
}
.ptabs__count {
font-size: 10.5px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
background: var(--chip2);
color: var(--mut3);
}
.ptabs__btn.is-active .ptabs__count {
background: var(--acc);
color: #FFFFFF;
}
.ptabs__note {
margin: 0 0 0 auto;
align-self: flex-end;
display: flex;
align-items: center;
gap: 9px;
height: 44px;
font-size: 13px;
color: var(--mut2);
white-space: nowrap;
}
.ptabs__note-icon {
flex: none;
color: var(--kick);
}
.ppane {
animation: omRise .4s cubic-bezier(.22,1,.36,1) both;
}
html:not(.js) .ppane + .ppane {
margin-top: 44px;
}
.pdfy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.pgrow__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
align-items: stretch;
}
.pcard {
position: relative;
box-sizing: border-box;
height: 100%;
}
.pcard__body {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
border-radius: 22px;
padding: 30px 28px 28px;
background: linear-gradient(172deg, var(--tint), var(--surface) 34%);
border: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(15,15,25,.07);
}
.pcard--hot .pcard__body {
background: linear-gradient(168deg, #20202E, #14141F 55%);
border: 1.5px solid var(--acc);
box-shadow: 0 26px 64px rgba(10,10,20,.34);
--ink: #F5F5FA;
--ink2: #E4E4EE;
--mut: #ABABBE;
--mut2: #9A9AAE;
--mut3: #83839A;
--line: rgba(255,255,255,.12);
--line2: rgba(255,255,255,.22);
--tint: rgba(255,255,255,.05);
--surface: #1C1C29;
--panel: #0F0F18;
--save: #4ADE9B;
--saveBg: rgba(74,222,155,.14);
--saveBd: rgba(74,222,155,.32);
--oacc: #FF9D73;
color: var(--ink);
}
.pcard__badge {
position: absolute;
z-index: 3;
top: -13px;
left: 28px;
background: var(--acc);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
box-shadow: 0 8px 20px var(--accS);
}
.pcard__badge--mut {
background: var(--chip2);
color: var(--mut);
box-shadow: none;
}
.pcard__num {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mut3);
}
.pcard__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 21px;
line-height: 1.28;
margin: 9px 0 0;
text-wrap: balance;
}
.pcard__tag {
font-size: 14px;
color: var(--mut);
line-height: 1.55;
margin: 9px 0 0;
text-wrap: pretty;
}
.pcard--slim .pcard__body {
padding: 28px 26px 26px;
}
.pcard__title--fix {
font-size: 18px;
line-height: 1.32;
min-height: 71px;
}
.pcard__tag--fix {
font-size: 13.5px;
min-height: 110px;
}
.pbill {
display: none;
}
.js .pbill {
display: inline-flex;
align-self: flex-start;
gap: 3px;
margin-top: 20px;
padding: 3px;
border-radius: 11px;
background: var(--tint);
border: 1px solid var(--line);
}
.pbill__opt {
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
padding: 7px 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--mut);
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.pbill__opt:hover {
color: var(--ink);
}
.pbill__opt.is-active {
background: var(--acc);
color: #FFFFFF;
}
.pcard__chips {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin-top: 20px;
}
.pcard__chip {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
border-radius: 999px;
padding: 4px 10px;
}
.pcard__chip--save {
color: var(--save);
background: var(--saveBg);
border: 1px solid var(--saveBd);
}
.pcard__chip--acc {
color: var(--oacc);
background: var(--accT);
border: 1px solid var(--accB);
}
.pcard__old {
font-size: 14px;
text-decoration: line-through;
color: var(--mut3);
white-space: nowrap;
}
.pcard__price {
display: flex;
align-items: baseline;
gap: 9px;
flex-wrap: wrap;
margin-top: 10px;
}
.pcard__price-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 38px;
letter-spacing: -.025em;
line-height: 1;
}
.pcard__price-v--sm {
font-size: 33px;
}
.pcard__price-per {
font-size: 14.5px;
color: var(--mut2);
}
.pcard__full {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: 9px;
padding-top: 9px;
border-top: 1px dashed var(--line2);
}
.pcard__full-k {
font-size: 13.5px;
color: var(--mut2);
}
.pcard__full-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -.02em;
}
.pcard__full-per {
font-size: 13px;
color: var(--mut3);
}
.pcard__pnote {
font-size: 13px;
color: var(--mut2);
line-height: 1.5;
margin: 8px 0 0;
text-wrap: pretty;
}
.pcard__second {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--line2);
}
.pcard__second-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 19px;
}
.pcard__second-per {
font-size: 13px;
color: var(--mut2);
}
.pcard__gift {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 700;
margin-top: 12px;
color: var(--acc);
}
.pcard__gift-icon {
flex: none;
display: inline-flex;
}
.pcard__inherit {
display: flex;
gap: 11px;
align-items: flex-start;
margin-top: 20px;
padding: 13px 15px;
border-radius: 13px;
background: var(--accT);
border: 1px solid var(--accB);
}
.pcard__inherit-icon {
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--acc);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.pcard__inherit-arrow--up {
display: none;
}
.pcard__inherit-text {
display: block;
min-width: 0;
}
.pcard__inherit-title {
display: block;
font-size: 14px;
font-weight: 800;
line-height: 1.35;
color: var(--ink);
}
.pcard__inherit-note {
display: block;
margin-top: 3px;
font-size: 12.5px;
line-height: 1.45;
color: var(--mut);
}
.pcard__plus {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.pcard__plus::before,
.pcard__plus::after {
content: '';
height: 1px;
background: var(--line);
flex: 1;
}
.pcard__plus-label {
flex: none;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--acc);
}
.pcard__feats {
list-style: none;
margin: 20px 0 0;
padding: 18px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
border-top: 1px solid var(--line);
}
.pcard__feats--plus {
margin-top: 14px;
padding-top: 0;
border-top: 0;
}
.pcard__feat {
display: flex;
gap: 12px;
align-items: flex-start;
}
.pcard__feat-icon {
flex: none;
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--accT);
border: 1px solid var(--accB);
color: var(--oacc);
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.pcard__feat-text {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.5;
color: var(--mut);
text-wrap: pretty;
}
.pcard__feat-text b {
display: block;
font-size: 13.5px;
font-weight: 700;
line-height: 1.4;
color: var(--ink);
margin-bottom: 2px;
}
.pcard__spacer {
flex: 1;
min-height: 14px;
}
.pcard__bonus {
background: var(--panel);
border-radius: 13px;
padding: 14px 16px;
margin-top: 16px;
display: flex;
gap: 11px;
align-items: center;
}
.pcard__bonus-icon {
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--acc);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.pcard__bonus-kicker {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--acc);
}
.pcard__bonus-body {
font-size: 13.5px;
color: var(--onPanel);
margin-top: 3px;
}
.pcard__more {
margin-top: 16px;
}
.pcard__more-summary {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 700;
color: var(--acc);
}
.pcard__more-caret {
display: inline-flex;
transition: transform .25s ease;
}
.pcard__more[open] .pcard__more-caret {
transform: rotate(180deg);
}
.pcard__steps {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.pcard__step {
display: flex;
gap: 11px;
align-items: flex-start;
}
.pcard__step-i {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--line2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-display);
font-size: 10px;
font-weight: 600;
color: var(--mut2);
}
.pcard__step-t {
font-size: 13.5px;
font-weight: 600;
}
.pcard__step-d {
font-size: 13px;
color: var(--mut2);
line-height: 1.5;
margin-top: 2px;
}
.pcard__deliv {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 14px;
}
.pcard__deliv-group {
background: var(--tint);
border: 1px solid var(--line);
border-radius: 11px;
padding: 12px 14px;
}
.pcard__deliv-t {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--acc);
}
.pcard__deliv-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.pcard__deliv-list li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
line-height: 1.5;
color: var(--mut);
}
.pcard__deliv-list li::before {
content: '';
position: absolute;
left: 4px;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--acc);
}
.pcard__result {
font-size: 13px;
color: var(--mut);
line-height: 1.6;
margin: 12px 0 0;
padding-left: 12px;
border-left: 2px solid var(--accB);
text-wrap: pretty;
}
.pcard__limit {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-size: 12.5px;
font-weight: 600;
color: var(--acc);
border: 1px solid var(--accB);
border-radius: 999px;
padding: 6px 13px;
margin-top: 16px;
}
.pcard__limit-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--acc);
}
.pcard__action {
padding-top: 20px;
}
.pcard__btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
font-family: inherit;
font-size: 15px;
font-weight: 700;
padding: 14px;
border-radius: 12px;
background: transparent;
color: var(--ink);
border: 1.5px solid var(--line2);
cursor: pointer;
transition: filter .18s ease, background .18s ease;
}
.pcard__btn--bill {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-top: 11px;
padding-bottom: 11px;
}
.pcard__btn-price {
font-size: 12.5px;
font-weight: 600;
opacity: .78;
}
.pcard--hot .pcard__btn {
background: var(--acc);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 10px 26px var(--accS);
}
.pcard__btn:disabled {
cursor: default;
opacity: .75;
}
.pspeakers {
background: var(--tint);
border: 1px solid var(--line);
border-radius: 26px;
padding: 24px 26px;
margin-top: 22px;
box-sizing: border-box;
}
.pspeakers__kicker {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mut3);
}
.pspeakers__lede {
font-size: 14.5px;
color: var(--mut);
line-height: 1.55;
margin: 9px 0 0;
max-width: 760px;
text-wrap: pretty;
}
.pspeakers__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 22px;
}
.pspeaker {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 2px 22px;
border-left: 1px solid var(--line);
min-width: 0;
}
.pspeaker:first-child {
border-left: none;
padding-left: 0;
}
.pspeaker:last-child {
padding-right: 0;
}
.pspeaker__ava {
flex: none;
width: 62px;
height: 62px;
border-radius: 50%;
background: var(--chip2);
object-fit: cover;
}
.pspeaker__n {
font-size: 14.5px;
font-weight: 700;
}
.pspeaker__d {
font-size: 12.5px;
color: var(--mut2);
line-height: 1.5;
margin-top: 3px;
}
.pself {
background: var(--surface);
border: 1px dashed var(--line2);
border-radius: 18px;
padding: 22px 26px;
margin-top: 18px;
display: flex;
gap: 20px;
align-items: flex-start;
flex-wrap: wrap;
}
.pself__text {
flex: 1;
min-width: 280px;
}
.pself__title {
font-size: 15px;
font-weight: 700;
}
.pself__body {
font-size: 14px;
color: var(--mut);
line-height: 1.6;
margin: 7px 0 0;
text-wrap: pretty;
}
.pself__body b {
color: var(--ink);
}
.pself__save {
flex: none;
background: var(--saveBg);
border: 1px solid var(--saveBd);
border-radius: 12px;
padding: 12px 18px;
text-align: center;
}
.pself__save-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 19px;
color: var(--save);
}
.pself__save-l {
font-size: 12px;
color: var(--mut2);
margin-top: 3px;
}
.ptraffic {
background: var(--tint);
border: 1px solid var(--line);
border-radius: 26px;
padding: 26px;
margin-top: 34px;
box-sizing: border-box;
}
.ptrip {
background: linear-gradient(168deg, var(--accT), transparent 62%);
border: 1px solid var(--accB);
border-radius: 26px;
padding: 26px;
margin-top: 22px;
box-sizing: border-box;
}
.ptraffic__head,
.ptrip__head {
margin-bottom: 24px;
}
.ptraffic__num,
.ptrip__num {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mut3);
}
.ptraffic__title,
.ptrip__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 28px;
line-height: 1.22;
letter-spacing: -.01em;
margin: 9px 0 0;
text-wrap: balance;
}
.ptraffic__tag,
.ptrip__tag {
font-size: 15px;
color: var(--mut);
line-height: 1.55;
margin: 10px 0 0;
max-width: 760px;
text-wrap: pretty;
}
.ptraffic__grid,
.ptrip__grid {
display: grid;
grid-template-columns: 1.24fr 1fr;
gap: 20px;
align-items: stretch;
}
.pdark {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
border-radius: 22px;
padding: 28px 26px 26px;
background: #11111B;
color: #FFFFFF;
box-shadow: 0 26px 64px rgba(10,10,20,.28);
}
.pdark__kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--onPanel2);
}
.pdark__price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.pdark__price-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 34px;
letter-spacing: -.03em;
line-height: 1;
color: #FFFFFF;
}
.pdark__price-per {
font-size: 14px;
color: var(--onPanel2);
}
.pdark__pay {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
color: #DCDCEA;
}
.pdark__note {
display: flex;
align-items: center;
gap: 10px;
background: var(--accT);
border: 1px solid var(--accB);
border-radius: 12px;
padding: 11px 13px;
margin-top: 14px;
}
.pdark__note-icon {
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--acc);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.pdark__note-text {
font-size: 12.5px;
line-height: 1.45;
color: #FF9D73;
}
.pdark__note-text b {
display: block;
font-weight: 700;
}
.pdark__rows {
display: flex;
flex-direction: column;
gap: 9px;
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var(--onPanelLine);
}
.pdark__row {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
}
.pdark__row dt {
font-size: 13px;
color: var(--onPanel2);
}
.pdark__row dd {
margin: 0;
font-size: 13.5px;
font-weight: 700;
text-align: right;
color: #FFFFFF;
}
.pdark__row-v--save {
color: var(--saveOn);
}
.pdark__feats {
list-style: none;
margin: 20px 0 0;
padding: 18px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
border-top: 1px solid var(--onPanelLine);
}
.pdark__feat {
display: flex;
gap: 12px;
align-items: flex-start;
}
.pdark__feat-icon {
flex: none;
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--accT);
border: 1px solid var(--accB);
color: #FF9D73;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.pdark__feat-text {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.5;
color: var(--onPanel2);
text-wrap: pretty;
}
.pdark__feat-text b {
display: block;
font-size: 13.5px;
font-weight: 700;
line-height: 1.4;
color: #FFFFFF;
margin-bottom: 2px;
}
.pdark__action {
margin-top: auto;
padding-top: 22px;
}
.pdark__btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
font-family: inherit;
font-size: 15px;
font-weight: 700;
padding: 14px;
border-radius: 12px;
background: var(--acc);
color: #FFFFFF;
border: none;
cursor: pointer;
box-shadow: 0 10px 26px var(--accS);
transition: background .18s ease;
}
.pdark__btn:disabled {
cursor: default;
opacity: .8;
}
.pside {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
padding: 28px 26px 26px;
box-sizing: border-box;
}
.pside__head {
display: flex;
align-items: center;
gap: 10px;
}
.pside__head-icon {
flex: none;
width: 28px;
height: 28px;
border-radius: 9px;
background: var(--chip);
color: var(--mut2);
display: flex;
align-items: center;
justify-content: center;
}
.pside__head-t {
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--mut3);
}
.pside__lede {
font-size: 14px;
color: var(--mut);
line-height: 1.55;
margin: 12px 0 0;
text-wrap: pretty;
}
.pside__list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
}
.pside__item {
background: var(--tint);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 18px;
}
.pside__item-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pside__item-nm {
font-size: 13.5px;
font-weight: 700;
}
.pside__item-price {
display: flex;
align-items: baseline;
gap: 6px;
}
.pside__item-v {
font-family: var(--ff-display);
font-weight: 600;
font-size: 21px;
letter-spacing: -.02em;
}
.pside__item-per {
font-size: 12.5px;
color: var(--mut2);
}
.pside__item-note {
font-size: 13px;
color: var(--mut);
line-height: 1.5;
margin: 7px 0 0;
text-wrap: pretty;
}
.pside__cost {
display: flex;
gap: 11px;
align-items: flex-start;
background: var(--tint);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 16px;
}
.pside__cost-i {
flex: none;
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--chip);
color: var(--mut2);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.pside__cost .pside__item-note {
margin-top: 3px;
}
.pside__foot {
margin: auto 0 0;
padding-top: 18px;
font-size: 12.5px;
color: var(--mut3);
line-height: 1.6;
text-wrap: pretty;
}
@media (max-width: 1000px) {
.ptabs__wrap {
padding: 12px 20px 14px;
gap: 14px;
}
.ptabs__row {
overflow-x: auto;
scrollbar-width: none;
max-width: 100%;
}
.ptabs__row::-webkit-scrollbar {
display: none;
}
.ptabs__btn {
box-sizing: border-box;
min-height: 44px;
padding: 8px 14px;
}
.ptabs__note {
display: none;
}
.ptabs__swipe {
display: inline-flex;
}
.pdfy__grid,
.pgrow__grid,
.pspeakers__row,
.ptraffic__grid,
.ptrip__grid {
grid-template-columns: 1fr;
}
.pspeaker {
padding: 16px 0 0;
border-left: none;
border-top: 1px solid var(--line);
}
.pspeaker:first-child {
padding-top: 0;
border-top: none;
}
.pspeaker:last-child {
padding-right: 0;
}
.pcard__inherit-arrow--left {
display: none;
}
.pcard__inherit-arrow--up {
display: block;
}
.pcard__title--fix,
.pcard__tag--fix {
min-height: 0;
}
.pspeakers,
.ptraffic,
.ptrip {
padding: 18px;
border-radius: 22px;
}
}
@media (max-width: 640px) {
.ptabs__wrap {
padding: 10px 16px 9px;
}
.ptabs__label {
margin-bottom: 6px;
}
.pcard__body,
.pcard--slim .pcard__body,
.pdark,
.pside {
padding: 24px 20px 22px;
}
.pcard__title {
font-size: 19px;
}
.pcard__price-v {
font-size: 33px;
}
.pdark__price-v {
font-size: 34px;
}
.pself {
padding: 18px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.ppane {
animation: none;
}
}