*,
*:before,
*:after {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400
}

body {
    background: #07070b;
    color: #fff;
    position: relative;
    overflow-x: hidden
}

body:before,
body:after {
    content: "";
    position: fixed;
    inset: -25%;
    pointer-events: none;
    z-index: -1
}

body:before {
    background: radial-gradient(40% 35% at 25% 20%, rgba(255, 255, 255, .12), transparent 65%), radial-gradient(35% 30% at 70% 25%, rgba(255, 255, 255, .1), transparent 70%), radial-gradient(45% 40% at 50% 75%, rgba(120, 85, 255, .1), transparent 70%);
    filter: blur(120px)
}

body:after {
    background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .85) 80%)
}

button,
input,
textarea,
select {
    font-family: inherit
}

img,
svg,
video,
canvas {
    max-width: 100%
}

.container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    min-width: 0
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 12px 34px;
    transition: all .25s ease;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    transform: translateY(0)
}

.btn:focus {
    outline: none
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn--primary {
    background: #fff;
    color: #000
}

.btn--primary:hover {
    background: #c5c5c5
}

.btn--primary:active {
    transform: translateY(0)
}

.btn--ghost {
    background: transparent;
    color: #ffffffbf;
    border: 1px solid rgba(255, 255, 255, .15)
}

.btn--ghost:hover {
    color: #fff;
    border-color: #ffffff59
}

.btn--telegram {
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ffffffd9
}

.btn--sm {
    padding: 10px 22px;
    font-size: 13px
}

.btn--lg {
    padding: 18px 48px;
    font-size: 16px
}

.margin0 {
    margin: 0
}




.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    transition: background-color .24s ease, backdrop-filter .24s ease
}

.app-header__inner {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    min-width: 0;
    width: min(1180px, 100vw - 48px);
    max-width: 1180px;
    min-height: 60px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: box-shadow .24s ease, background .24s ease, border-color .24s ease, backdrop-filter .24s ease
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-width: 0;
    text-decoration: none;
    color: #fffffff0
}

.app-header__logo {
    width: 28px;
    height: auto;
    display: block
}

.app-header__name {
    display: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    overflow-wrap: anywhere
}

.app-header__nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 21px
}

.app-header__link {
    position: relative;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: #ffffff80;
    transition: color .18s ease;
    padding: 4px
}

.app-header__link:after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -3px;
    height: 1px;
    background: #ffffffe0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease
}

.app-header__link:hover {
    color: #ffffffeb
}

.app-header__link:hover:after {
    transform: scaleX(1);
    opacity: 1
}

.app-header__link--active {
    color: #fffffff0
}

.app-header__link--active:after {
    transform: scaleX(1);
    opacity: 1
}

.app-header__actions {
    justify-self: end;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.app-header__login,
.app-header__signup {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    transition: color .18s ease, border-color .18s ease, background .18s ease
}

.app-header__login {
    color: #ffffff9e
}

.app-header__login:hover {
    color: #fff
}

.app-header__signup {
    padding: 0 13px;
    border-radius: 999px;
    color: #000;
    background: #fffffff5;
    border: 1px solid rgba(255, 255, 255, .96)
}

.app-header__signup:hover {
    background: #fff;
    border-color: #fff
}

.app-header__menuButton {
    appearance: none;
    justify-self: end;
    width: 30px;
    height: 20px;
    padding: 0;
    border: 0;
    display: none;
    position: relative;
    gap: 2px;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.app-header__menuButton span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transform: translate(-50%, -50%);
    transition: transform .22s ease, opacity .18s ease
}

.app-header__menuButton span:first-child {
    transform: translate(-50%, calc(-50% - 5px))
}

.app-header__menuButton span:last-child {
    transform: translate(-50%, calc(-50% + 5px))
}

.app-header__mobileMenu {
    position: fixed;
    inset: 0;
    z-index: -1;
    min-height: 100dvh;
    padding: 82px 28px 28px;
    display: none;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .26s ease
}

.app-header__mobileNav,
.app-header__mobileActions {
    display: grid;
    gap: 28px
}

.app-header__mobileNav a,
.app-header__mobileActions a {
    width: fit-content;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff94
}

.app-header__mobileNav .app-header__mobileLink--active {
    color: #fffffff0
}

.app-header__mobileActions {
    margin-top: 36px;
    gap: 18px
}

.app-header__mobileSignup {
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #000 !important
}

.app-header--scrolled {
    background-color: #000000b3;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.app-header--scrolled .app-header__inner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

@media(max-width:980px) {
    .app-header {
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        padding-top: 0
    }

    .app-header__nav {
        display: none
    }

    .app-header__inner {
        width: 100%;
        grid-template-columns: auto 1fr;
        min-height: 68px;
        padding: 0 21px;
        position: relative;
        z-index: 3
    }

    .app-header__actions {
        display: none
    }

    .app-header__logo {
        width: 31px
    }

    .app-header__menuButton {
        display: block;
        width: 30px;
        height: 20px;
        gap: 2px
    }

    .app-header__menuButton span {
        width: 20px;
        height: 2px
    }

    .app-header__mobileMenu {
        display: block;
        z-index: 2;
        width: 100%;
        left: 0;
        right: 0;
        transform: translateY(-12px);
        padding: 98px 28px 32px
    }

    .app-header--open {
        background-color: #000000b3;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px)
    }

    .app-header--open .app-header__mobileMenu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0)
    }

    .app-header--open .app-header__menuButton span:first-child {
        transform: translate(-50%, -50%) rotate(45deg)
    }

    .app-header--open .app-header__menuButton span:nth-child(2) {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(.2)
    }

    .app-header--open .app-header__menuButton span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg)
    }
}

@media(max-width:560px) {
    .app-header__inner {
        min-height: 66px;
        padding: 0 20px;
        border-radius: 0
    }

    .app-header__brand {
        gap: 10px;
        flex: 1 1 auto
    }

    .app-header__logo {
        width: 30px
    }

    .app-header__name {
        font-size: 13px
    }

    .app-header__login,
    .app-header__signup {
        font-size: 12px;
        min-height: 28px
    }

    .app-header__signup {
        padding: 0 12px
    }
}

.landing {
    --landing-header-offset: 114px;
    --landing-text: rgba(255, 255, 255, .95);
    --landing-muted: rgba(255, 255, 255, .58);
    --landing-soft: rgba(255, 255, 255, .76);
    --landing-border: rgba(255, 255, 255, .08);
    --landing-surface: rgba(14, 17, 27, .76);
    --landing-surface-soft: rgba(255, 255, 255, .035);
    --landing-card-text: rgba(255, 255, 255, .94);
    --landing-card-muted: rgba(255, 255, 255, .58);
    --landing-card-line: rgba(255, 255, 255, .08);
    --landing-purple: rgba(130, 98, 255, .48);
    --landing-cyan: rgba(100, 215, 255, .34);
    --landing-warm: rgba(255, 190, 96, .28);
    min-height: 100vh;
    width: 100%;
    position: relative;
    background: radial-gradient(36% 30% at 18% 10%, rgba(255, 255, 255, .08), transparent 72%), radial-gradient(30% 24% at 78% 16%, rgba(119, 96, 255, .14), transparent 72%), radial-gradient(38% 34% at 54% 72%, rgba(63, 184, 255, .08), transparent 72%), linear-gradient(180deg, #06070d, #090b14);
    overflow: hidden
}

.landing:before,
.landing:after {
    content: "";
    position: absolute;
    inset: -25%;
    pointer-events: none
}

.landing:before {
    background: radial-gradient(32% 28% at 28% 24%, rgba(255, 255, 255, .07), transparent 74%), radial-gradient(26% 22% at 72% 24%, rgba(130, 98, 255, .12), transparent 76%), radial-gradient(34% 30% at 54% 76%, rgba(100, 215, 255, .08), transparent 76%);
    filter: blur(120px)
}

.landing:after {
    opacity: .16;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(circle at center, rgb(0, 0, 0) 36%, transparent 78%);
    mask-image: radial-gradient(circle at center, rgb(0, 0, 0) 36%, transparent 78%)
}

.landing__main {
    width: 100%;
    position: relative;
    z-index: 1;
    padding-top: var(--landing-header-offset)
}

.landing__shell {
    width: 100%;
    min-width: 0
}

.landing__shell>* {
    width: 100%;
    min-width: 0
}

.landingDiscountBanner {
    margin-bottom: 26px;
    padding: 18px 22px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, #ffffff1f, #67deba1a), #0e121cd6;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 22px 60px #00000047, inset 0 1px #ffffff14
}

.landingDiscountBanner__copy {
    display: grid;
    gap: 6px
}

.landingDiscountBanner__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff9e
}

.landingDiscountBanner__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fffffff2
}

.landingDiscountBanner__actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.landingDiscountBanner__button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #ffffff0d;
    color: #ffffffeb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer
}

.landingDiscountBanner__button--primary {
    background: #fff;
    color: #07111c
}

@keyframes landingFloat {

    0%,
    to {
        transform: translateZ(0)
    }

    50% {
        transform: translate3d(0, -12px, 0)
    }
}

@keyframes landingFloatAlt {

    0%,
    to {
        transform: translateZ(0) rotate(0)
    }

    50% {
        transform: translate3d(0, 12px, 0) rotate(1deg)
    }
}

@keyframes landingPulse {

    0%,
    to {
        opacity: .48;
        transform: scale(1)
    }

    50% {
        opacity: .85;
        transform: scale(1.08)
    }
}

@keyframes landingSweep {
    0% {
        transform: translate(-120%)
    }

    to {
        transform: translate(120%)
    }
}

@keyframes landingTrace {
    0% {
        transform: translate(-26%);
        opacity: 0
    }

    18% {
        opacity: 1
    }

    82% {
        opacity: 1
    }

    to {
        transform: translate(26%);
        opacity: 0
    }
}

@keyframes landingMarquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes landingGlowDrift {

    0%,
    to {
        transform: translateZ(0) rotate(0)
    }

    50% {
        transform: translate3d(18px, -16px, 0) rotate(6deg)
    }
}

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 38px, 0) scale(.972);
    filter: blur(14px);
    will-change: opacity, transform, filter;
    transition: opacity .92s cubic-bezier(.16, 1, .22, 1), transform 1.08s cubic-bezier(.16, 1, .22, 1), filter .92s cubic-bezier(.16, 1, .22, 1);
    transition-delay: var(--reveal-delay, 0s)
}

[data-reveal][data-revealed=true] {
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: blur(0)
}

.section-title {
    margin: 0 0 18px;
    text-align: center;
    font-size: clamp(34px, 3.2vw, 52px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--landing-text)
}

.section-subtitle {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    line-height: 1.76;
    color: var(--landing-muted)
}

.hero,
.signal-strip,
.trust,
.usecases,
.steps,
.landingTariffs,
.faq,
.contact {
    padding: 110px 0;
    scroll-margin-top: calc(var(--landing-header-offset) + 18px)
}

.hero {
    padding: 42px 0 90px
}

.signal-strip {
    padding-top: 8px;
    padding-bottom: 30px
}

.signal-strip__viewport {
    position: relative;
    overflow: hidden;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, transparent)
}

.signal-strip__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: landingMarquee 28s linear infinite
}

.signal-strip__item {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px #ffffff0d;
    color: #ffffffc7;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em
}

.signal-strip__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fffffff2, #7c62ffcc);
    box-shadow: 0 0 20px #7c62ff66
}

.hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr);
    gap: 34px;
    align-items: center
}

.hero__content {
    text-align: left
}

.hero__title {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(48px, 6.4vw, 84px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .94;
    color: var(--landing-text);
    text-wrap: balance
}

.hero__line {
    display: block
}

.hero__subtitle {
    margin: 22px 0 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.72;
    color: var(--landing-muted)
}

.hero__actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.hero__pills {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.hero__pills li {
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #ffffff14;
    color: #ffffffd1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35
}

.hero__facts {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.hero__fact,
.trust-card,
.usecase-card,
.step-card,
.fp-card,
.contact-card {
    position: relative;
    border-radius: 28px;
    padding: 30px 28px;
    background: var(--landing-surface);
    border: 1px solid var(--landing-border);
    box-shadow: 0 26px 90px #00000057, inset 0 1px #ffffff0d;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow: hidden
}

.hero__fact:before,
.trust-card:before,
.usecase-card:before,
.step-card:before,
.fp-card:before,
.contact-card:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 52%), radial-gradient(90% 70% at 80% 0%, rgba(124, 98, 255, .08), transparent 65%);
    opacity: .74
}

.hero__fact strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    color: var(--landing-text);
    position: relative;
    z-index: 1
}

.hero__fact p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--landing-muted);
    position: relative;
    z-index: 1
}

.hero__visual {
    position: relative;
    min-height: 590px;
    border-radius: 36px;
    background: linear-gradient(180deg, #131826eb, #0a0d15f5), #0a0c12cc;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 36px 110px #0006, inset 0 1px #ffffff0f;
    overflow: hidden
}

.hero__visual:before,
.hero__visual:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none
}

.hero__visual:before {
    opacity: .22;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(circle at center, rgb(0, 0, 0) 34%, transparent 78%);
    mask-image: radial-gradient(circle at center, rgb(0, 0, 0) 34%, transparent 78%)
}

.hero__visual:after {
    background: linear-gradient(130deg, rgba(255, 255, 255, .04), transparent 45%), radial-gradient(48% 54% at 72% 24%, rgba(124, 98, 255, .22), transparent 74%)
}

.hero__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(24px);
    animation: landingPulse 8s ease-in-out infinite
}

.hero__orb--one {
    width: 190px;
    height: 190px;
    top: 38px;
    right: 26px;
    background: var(--landing-purple)
}

.hero__orb--two {
    width: 150px;
    height: 150px;
    left: 34px;
    bottom: 48px;
    background: var(--landing-cyan);
    animation-delay: 1.2s
}

.hero__visualBeam {
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    pointer-events: none;
    animation: landingGlowDrift 10s ease-in-out infinite
}

.hero__visualBeam--one {
    width: 220px;
    height: 44px;
    left: -40px;
    top: 112px;
    background: linear-gradient(90deg, transparent, rgba(120, 215, 255, .24), transparent)
}

.hero__visualBeam--two {
    width: 240px;
    height: 52px;
    right: -34px;
    bottom: 116px;
    background: linear-gradient(90deg, transparent, rgba(132, 98, 255, .24), transparent);
    animation-delay: 1.4s
}

.hero__visualCard {
    position: absolute;
    z-index: 1;
    border-radius: 28px;
    padding: 24px 24px 22px;
    background: linear-gradient(180deg, #111622eb, #0c0f18eb), #0e121ce0;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 22px 58px #00000057, inset 0 1px #ffffff0f;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    overflow: hidden
}

.hero__visualCard:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 60%);
    pointer-events: none
}

.hero__visualCard strong,
.hero__visualCard p,
.hero__visualCard span,
.hero__visualCard .hero__visualStats {
    position: relative;
    z-index: 1
}

.hero__visualCard strong {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--landing-text)
}

.hero__visualCard p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--landing-muted)
}

.hero__visualLabel {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffffc2;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .08)
}

.hero__visualCard--main {
    left: 64px;
    right: 64px;
    top: 128px;
    min-height: 244px;
    animation: landingFloat 7.5s ease-in-out infinite
}

.hero__visualCard--top {
    top: 36px;
    left: 32px;
    width: 250px;
    transform: rotate(-3deg);
    animation: landingFloatAlt 8.4s ease-in-out infinite
}

.hero__visualCard--bottom {
    right: 30px;
    bottom: 34px;
    width: 280px;
    transform: rotate(4deg);
    animation: landingFloat 9.2s ease-in-out infinite;
    animation-delay: .8s
}

.hero__visualStats {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.hero__visualStat {
    min-height: 86px;
    padding: 16px;
    border-radius: 22px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.hero__visualStat span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff7a
}

.hero__visualStat strong {
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: #ffffffeb
}

.trust__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr;
    grid-template-rows: repeat(2, minmax(200px, auto));
    gap: 24px;
    margin-top: 44px
}

.trust-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease
}

.trust-card:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, .12), transparent 72%);
    opacity: 0;
    transform: translate(-120%)
}

.trust-card:hover {
    transform: translateY(-6px);
    border-color: #ffffff1f;
    box-shadow: 0 32px 90px #00000057, inset 0 1px #ffffff0f
}

.trust-card:hover:after {
    opacity: 1;
    animation: landingSweep 1s ease
}

.trust-card h3,
.trust-card p,
.trust-card .trust-card__tags,
.trust-card .trust-card__index {
    position: relative;
    z-index: 1
}

.trust-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--landing-text)
}

.trust-card p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.72;
    color: var(--landing-muted)
}

.trust-card--1 {
    grid-column: span 2;
    background: linear-gradient(145deg, #ffffff12, #ffffff05), #10131ed1
}

.trust-card--2 {
    grid-row: span 2;
    background: linear-gradient(180deg, #7c62ff2e, #ffffff05), #100d1ed6
}

.trust-card--3 {
    background: linear-gradient(180deg, #64d7ff29, #ffffff05), #0a121cd6
}

.trust-card--4 {
    background: linear-gradient(180deg, #ffbe6024, #ffffff05), #130f0ad6
}

.trust-card__index {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.05em;
    color: #ffffff1f
}

.trust-card__tags {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.trust-card__tags span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: #ffffffb8
}

.usecases__grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: 24px;
    margin-top: 44px
}

.usecase-card {
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease
}

.usecase-card:after {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%);
    filter: blur(14px);
    animation: landingGlowDrift 12s ease-in-out infinite;
    opacity: .7
}

.usecase-card:hover {
    transform: translateY(-6px);
    border-color: #ffffff1f;
    box-shadow: 0 32px 90px #00000057, inset 0 1px #ffffff0f
}

.usecase-card h3,
.usecase-card p,
.usecase-card ul,
.usecase-card .usecase-card__eyebrow,
.usecase-card .usecase-card__featureGrid {
    position: relative;
    z-index: 1
}

.usecase-card h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -.05em;
    color: var(--landing-text)
}

.usecase-card p {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--landing-muted)
}

.usecase-card ul {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.usecase-card li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #ffffff94
}

.usecase-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ffffff4d
}

.usecase-card--1 {
    grid-row: span 2;
    padding-top: 34px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff12, #ffffff05), #0f121cd6
}

.usecase-card--2 {
    background: linear-gradient(180deg, #7c62ff2e, #ffffff05), #120f20d6
}

.usecase-card--3 {
    background: linear-gradient(180deg, #64d7ff29, #ffffff05), #0a141ed6
}

.usecase-card__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffffbd;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .08)
}

.usecase-card__featureGrid {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 28px
}

.usecase-card__feature {
    min-height: 100px;
    padding: 18px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(180deg, #ffffff0d, #ffffff05), #ffffff06;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px #ffffff0d
}

.usecase-card__feature:last-child {
    grid-column: span 2
}

.usecase-card__feature strong {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #ffffffe0
}

.usecase-card__featureDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ffffffc2;
    box-shadow: 0 0 20px #ffffff38
}

.steps__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 48px
}

.steps__grid:before,
.steps__grid:after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 54px;
    height: 1px;
    pointer-events: none
}

.steps__grid:before {
    background: linear-gradient(90deg, #fff0, #ffffff24, #fff0)
}

.steps__grid:after {
    width: 24%;
    left: 12%;
    right: auto;
    background: linear-gradient(90deg, #fff0, #7c62ffe6, #fff0);
    filter: blur(.5px);
    animation: landingTrace 5.5s ease-in-out infinite
}

.step-card {
    min-height: 250px;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease
}

.step-card h3,
.step-card p,
.step-card .step-card__num {
    position: relative;
    z-index: 1
}

.step-card h3 {
    margin: 18px 0 0;
    font-size: 22px;
    letter-spacing: -.03em;
    color: var(--landing-text)
}

.step-card p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--landing-muted)
}

.step-card:hover {
    transform: translateY(-6px);
    border-color: #ffffff1f;
    box-shadow: 0 32px 90px #00000057, inset 0 1px #ffffff0f
}

.step-card--2 {
    margin-top: 40px
}

.step-card--3 {
    margin-top: 14px
}

.step-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #ffffff0f;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #ffffffd6;
    box-shadow: 0 0 0 8px #ffffff04;
    animation: landingPulse 8s ease-in-out infinite
}

.landingTariffs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px
}

.fp-card {
    display: flex;
    flex-direction: column;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease
}

.fp-card:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .08), transparent 70%);
    opacity: 0;
    transform: translate(-120%)
}

.fp-card:hover {
    border-color: #ffffff1f;
    box-shadow: 0 32px 90px #00000057, inset 0 1px #ffffff0f
}

.fp-card:hover:after {
    opacity: 1;
    animation: landingSweep 1s ease
}

.fp-card--highlight {
    border-color: #7c62ff4d;
    background: linear-gradient(180deg, #131826fa, #0c101af5), #0f121ceb;
    box-shadow: 0 34px 100px #0000006b, 0 0 0 1px #7c62ff2e inset
}

.fp-card--highlight .fp-titleRow h3,
.fp-card--highlight .fp-price,
.fp-card--highlight .fp-price__cur,
.fp-card--highlight .fp-meta,
.fp-card--highlight .fp-period,
.fp-card--highlight .fp-list li,
.fp-card--highlight .fp-note {
    color: #ffffffe6
}

.fp-card--highlight .fp-check {
    border-color: #ffffff24;
    background: #ffffff0f
}

.fp-card--highlight .fp-check:after {
    border-left-color: #ffffffeb;
    border-bottom-color: #ffffffeb
}

.fp-card--ultimate {
    border-color: #ffc77057;
    background: linear-gradient(180deg, #1e1a14fa, #0e0d12f5), #121016eb;
    box-shadow: 0 34px 100px #00000075, 0 0 0 1px #ffc77029 inset
}

.fp-card--ultimate .fp-titleRow h3 {
    background: linear-gradient(120deg, #ffe7bd, #f4c26a 45%, #fff2d8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.fp-card--ultimate .fp-price,
.fp-card--ultimate .fp-price__cur,
.fp-card--ultimate .fp-meta,
.fp-card--ultimate .fp-period,
.fp-card--ultimate .fp-list li,
.fp-card--ultimate .fp-note {
    color: #fffaf0eb
}

.fp-card--ultimate .fp-check {
    border-color: #ffc77057;
    background: #ffc7701a
}

.fp-card--ultimate .fp-check:after {
    border-left-color: #ffe0a8f2;
    border-bottom-color: #ffe0a8f2
}

.fp-card--ultimate:hover {
    border-color: #ffc77080
}

.fp-card--disabled {
    border-color: #ffd27838;
    background: linear-gradient(180deg, #191814e6, #0d1018f0), #0f121ce6
}

.fp-glow {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    background: radial-gradient(320px 240px at 50% 25%, rgba(120, 85, 255, .45), transparent 70%);
    filter: blur(20px);
    opacity: .55;
    animation: landingPulse 7s ease-in-out infinite
}

.fp-glow--ultimate {
    background: radial-gradient(320px 240px at 50% 25%, rgba(255, 190, 105, .38), transparent 70%)
}

.fp-head,
.fp-list,
.fp-action,
.fp-note {
    position: relative;
    z-index: 1
}

.fp-titleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px
}

.fp-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.fp-titleRow h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--landing-text)
}

.fp-badge {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #ffffffb3;
    background: #ffffff0a;
    -webkit-user-select: none;
    user-select: none
}

.fp-badge--hot {
    border-color: #7c62ff57;
    background: #7c62ff2e;
    color: #ffffffeb
}

.fp-badge--ultimate {
    border-color: #ffc7706b;
    background: linear-gradient(120deg, #ffc77038, #f4b25a1f);
    color: #ffebc8f5
}

.fp-badge--unavailable {
    border-color: #ffd27852;
    background: #ffbe5c1f;
    color: #ffe1aae6
}

.mainHero {
    position: relative;
    min-height: calc(100svh - var(--landing-header-offset));
    display: grid;
    place-items: center;
    padding: clamp(54px, 9vh, 88px) 0 clamp(118px, 16vh, 172px);
    isolation: isolate
}

.mainHero:before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--landing-header-offset) - 56px);
    bottom: -12%;
    left: 50%;
    width: 100vw;
    transform: translate(-50%);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(46% 40% at 8% 6%, rgba(130, 98, 255, .32), transparent 72%), radial-gradient(40% 34% at 92% 4%, rgba(100, 215, 255, .24), transparent 72%), radial-gradient(44% 38% at 2% 96%, rgba(214, 108, 255, .18), transparent 72%), radial-gradient(48% 42% at 96% 92%, rgba(74, 144, 255, .24), transparent 72%), radial-gradient(32% 22% at 50% -4%, rgba(255, 255, 255, .07), transparent 72%);
    filter: blur(60px);
    mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
    animation: mainHeroGlowIn 1.6s cubic-bezier(.16, 1, .22, 1) both
}

.mainHero__content {
    width: min(1000px, 100%);
    display: grid;
    justify-items: center;
    text-align: center
}

.mainHero__title {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 0;
    color: #fffffff7;
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.028em
}

.mainHero__title>span {
    display: block
}

.mainHero__titleAccent {
    display: inline;
    font-style: normal;
    background: linear-gradient(94deg, #8f7bff 8%, #6fb7ff 52%, #64d7ff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.mainHero__subtitle {
    margin: 20px 0 0;
    max-width: 590px;
    color: #ffffff8f;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 600;
    line-height: 1.5
}

.mainHero__actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px
}

.mainHero__button {
    min-height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease
}

.mainHero__button--primary {
    color: #041018;
    background: #64d7ff;
    border: 1px solid #64d7ff;
    box-shadow: 0 14px 40px #64d7ff38
}

.mainHero__button--primary:hover {
    background: #8ae2ff;
    border-color: #8ae2ff;
    box-shadow: 0 18px 52px #64d7ff4d
}

.mainHero__button--ghost {
    color: #ffffffc7;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .14)
}

.mainHero__button--ghost:hover {
    color: #fffffff0;
    background: #ffffff14;
    border-color: #ffffff3d
}

.mainHero__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #ffffff61
}

.mainHero__scroll {
    left: 50%;
    bottom: clamp(26px, 5vh, 48px);
    transform: translate(-50%)
}

@keyframes mainHeroGlowIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(max-width:760px) {
    .mainHero {
        min-height: calc(100svh - var(--landing-header-offset));
        padding: clamp(54px, 13vh, 86px) 0 112px
    }

    .mainHero__content {
        width: min(100%, 400px)
    }

    .mainHero__title {
        font-size: clamp(30px, 9.4vw, 44px);
        line-height: 1.12
    }

    .mainHero__subtitle {
        margin-top: 18px;
        max-width: 320px;
        font-size: 14px
    }

    .mainHero__actions {
        width: min(100%, 340px);
        margin-top: 22px
    }

    .mainHero__button {
        flex: 1 1 auto;
        min-height: 44px
    }

    .mainHero__note {
        font-size: 12px
    }
}

@media(max-width:430px) {
    .mainHero__actions {
        display: grid
    }

    .mainHero__button {
        width: 100%
    }
}

.fp-badge--discount {
    border-color: #6feeb547;
    background: #30a07633;
    color: #e0fff4f5
}

.fp-priceRow {
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px
}

.fp-price__old {
    font-size: 15px;
    color: #ffffff6b;
    text-decoration: line-through
}

.fp-price {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: #fff
}

.fp-price__num {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.6px
}

.fp-price__cur {
    font-size: 16px;
    font-weight: 700;
    opacity: .75
}

.fp-period {
    font-size: 13px;
    color: #ffffff75
}

.fp-meta {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #ffffff75
}

.fp-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    align-content: start;
    gap: 10px;
    flex: 1
}

.fp-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #ffffff8f
}

.fp-list li:before {
    display: none
}

.fp-check {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #ffffff0a;
    position: relative;
    flex: 0 0 18px
}

.fp-check:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 5px;
    border-left: 2px solid rgba(255, 255, 255, .9);
    border-bottom: 2px solid rgba(255, 255, 255, .9);
    transform: translate(-50%, -55%) rotate(-45deg);
    opacity: .85
}

.fp-note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #ffffffa3
}

.fp-note--unavailable {
    color: #ffe1aad1
}

.fp-action {
    margin-top: 22px;
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    padding: 0 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #ffffff0d;
    color: #fff;
    transition: background .18s ease, border-color .18s ease
}

.fp-action:hover {
    background: #ffffff1a;
    border-color: #ffffff2e
}

.fp-action--disabled,
.fp-action--disabled:hover {
    cursor: not-allowed;
    border-color: #ffd27838;
    background: #ffbe5c14;
    color: #ffe1aad6;
    transform: none
}

.fp-action--primary {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 18px 36px #ffffff1f
}

.fp-action--primary:hover {
    background: #ffffffeb
}

.fp-action--ultimate {
    background: linear-gradient(120deg, #ffd9a0, #f4b862 55%, #ffe6bd);
    color: #241a08;
    border-color: #ffd696e6;
    box-shadow: 0 18px 36px #f4b8622e
}

.fp-action--ultimate:hover {
    background: linear-gradient(120deg, #ffe2b4, #f7c479 55%, #fff0d4)
}

.fp-arrow {
    opacity: .75
}

.fp-footnote {
    width: 100%;
    margin: 18px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #fff6;
    text-align: center
}

.fp-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ffffff40
}

.faq__list {
    width: 100%;
    max-width: 980px;
    margin: 44px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow-anchor: none
}

.faq__column {
    display: grid;
    gap: 16px;
    align-content: start;
    overflow-anchor: none
}

.faq-item {
    border-radius: 22px;
    background: #0f121cd6;
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    overflow-anchor: none
}

.faq-item:hover {
    border-color: #ffffff1c
}

.faq-item.is-open {
    border-color: #7c62ff3d;
    background: #111522eb;
    box-shadow: 0 24px 64px #0000003d, inset 0 1px #ffffff0d
}

.faq-item__trigger {
    width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    padding: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
    color: inherit;
    cursor: pointer
}

.faq-item__trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px #7855ff6b
}

.faq-item__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0
}

.faq-item__head span {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.5;
    color: #ffffffe6
}

.faq-item__num {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #ffffffb8;
    flex: 0 0 auto
}

.faq-item__icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 12px
}

.faq-item__icon:before,
.faq-item__icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.5px;
    border-radius: 999px;
    background: #ffffff9e;
    transform: translate(-50%, -50%);
    transition: transform .18s ease, opacity .18s ease, background .18s ease
}

.faq-item__icon:after {
    transform: translate(-50%, -50%) rotate(90deg)
}

.faq-item.is-open .faq-item__icon:before,
.faq-item.is-open .faq-item__icon:after {
    background: #ffffffe0
}

.faq-item.is-open .faq-item__icon:after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0)
}

.faq-item__content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .24s ease, opacity .18s ease
}

.faq-item.is-open .faq-item__content {
    max-height: 220px;
    opacity: 1
}

.faq-item__contentInner {
    padding: 0 22px 22px 76px
}

.faq-item__content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
    color: #ffffff7a
}

.contact__content {
    position: relative
}

.contact__panel {
    position: relative;
    padding: 52px 38px 42px;
    border-radius: 36px;
    background: linear-gradient(160deg, #ffffff0f, #ffffff05), linear-gradient(180deg, #101522f5, #0a0e16fa);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 34px 100px #0000005c, inset 0 1px #ffffff0f;
    overflow: hidden
}

.contact__panel:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(40% 44% at 14% 14%, rgba(124, 98, 255, .18), transparent 72%), radial-gradient(34% 40% at 86% 82%, rgba(100, 215, 255, .14), transparent 72%);
    pointer-events: none
}

.contact__panel .section-title,
.contact__panel .section-subtitle,
.contact__panel .contact__actions {
    position: relative;
    z-index: 1
}

.contact__glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(30px);
    pointer-events: none
}

.contact__glow--one {
    width: 220px;
    height: 220px;
    top: -60px;
    left: -30px;
    background: var(--landing-purple);
    opacity: .5;
    animation: landingPulse 8s ease-in-out infinite
}

.contact__glow--two {
    width: 180px;
    height: 180px;
    bottom: -50px;
    right: 30px;
    background: var(--landing-cyan);
    opacity: .4;
    animation: landingPulse 9s ease-in-out infinite;
    animation-delay: .9s
}

.contact__actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px
}

.contact__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: -20px;
    position: relative;
    z-index: 1
}

.contact-card {
    text-decoration: none;
    transition: border-color .22s ease, background .22s ease
}

.contact-card h3,
.contact-card p,
.contact-card span {
    position: relative;
    z-index: 1
}

.contact-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.12;
    color: var(--landing-text)
}

.contact-card p {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.68;
    color: var(--landing-muted)
}

.contact-card span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffffeb
}

.contact-card span:after {
    content: "→";
    font-size: 15px
}

.contact-card:hover {
    border-color: #ffffff1f;
    box-shadow: 0 32px 90px #00000057, inset 0 1px #ffffff0f
}

.contact-card--1 {
    margin-top: 36px;
    background: linear-gradient(180deg, #ffffff12, #ffffff05), #0d111bd6
}

.contact-card--2 {
    background: linear-gradient(180deg, #7c62ff29, #ffffff05), #100d1ed6;
    border-color: #7c62ff2e
}

.contact-card--3 {
    margin-top: 54px;
    background: linear-gradient(180deg, #ffbe6024, #ffffff05), #18110bd6;
    border-color: #ffbe6029
}

.landing .btn.btn--lg {
    min-height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: -.01em
}

.landing .btn.btn--ghost {
    background: #ffffff0f;
    color: #ffffffd6;
    border: 1px solid rgba(255, 255, 255, .14)
}

.landing .btn.btn--ghost:hover {
    color: #fff;
    background: #ffffff1a;
    border-color: #ffffff3d
}

.landing .btn.btn--primary {
    background: #fff;
    color: #000;
    box-shadow: 0 18px 36px #ffffff24
}

.landing .btn.btn--primary:hover {
    background: #eee
}

@media(prefers-reduced-motion:reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important
    }

    .signal-strip__track,
    .hero__orb,
    .hero__visualBeam,
    .hero__visualCard,
    .mainHero:before,
    .logoCosmos:after,
    .logoCosmos__mist,
    .logoCosmos__spark,
    .logoCosmos__headline,
    .logoStar,
    .logoStar__halo,
    .logoStar__inner,
    .fp-glow,
    .contact__glow,
    .step-card__num,
    .steps__grid:after,
    .usecase-card:after {
        animation: none !important
    }
}

@media(max-width:1180px) {
    .accountShowcase {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .accountShowcase__copy {
        position: static
    }

    .accountShowcase__copy h2 {
        max-width: 12ch;
        margin-bottom: 28px
    }

    .accountShowcase__tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 4px
    }

    .accountShowcase__tab {
        min-width: 210px;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 12px
    }

    .accountShowcase__tab strong {
        opacity: 1;
        transform: none
    }

    .accountShowcase__stage {
        padding-top: 0
    }

    .hero__layout {
        grid-template-columns: 1fr
    }

    .hero__visual {
        min-height: 500px
    }

    .trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto
    }

    .trust-card--1,
    .trust-card--2 {
        grid-column: auto;
        grid-row: auto
    }

    .usecases__grid,
    .faq__list,
    .contact__grid {
        grid-template-columns: 1fr
    }

    .usecase-card--1 {
        grid-row: auto
    }

    .usecase-card__featureGrid {
        grid-template-columns: 1fr
    }

    .usecase-card__feature:last-child {
        grid-column: auto
    }

    .steps__grid,
    .landingTariffs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .steps__grid:before {
        display: none
    }

    .steps__grid:after {
        display: none
    }

    .step-card--2,
    .step-card--3,
    .contact-card--1,
    .contact-card--3 {
        margin-top: 0
    }
}

@media(max-width:820px) {
    .landing {
        --landing-header-offset: 96px
    }

    .hero {
        padding-top: 34px
    }

    .hero__content {
        text-align: center
    }

    .hero__title,
    .hero__subtitle {
        margin-inline: auto
    }

    .hero__actions,
    .hero__pills {
        justify-content: center
    }

    .hero__facts,
    .steps__grid,
    .landingTariffs__grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .landing {
        --landing-header-offset: 82px
    }

    .hero,
    .signal-strip,
    .trust,
    .usecases,
    .steps,
    .landingTariffs,
    .faq,
    .contact {
        padding: 90px 0
    }

    .hero {
        padding-top: 28px
    }

    .hero__title {
        max-width: 100%;
        font-size: clamp(28px, 9vw, 40px);
        line-height: 1.02
    }

    .hero__line {
        white-space: normal
    }

    .hero__subtitle {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.6
    }

    .hero__actions,
    .contact__actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .landingDiscountBanner {
        align-items: stretch;
        flex-direction: column
    }

    .landingDiscountBanner__actions {
        width: 100%;
        justify-content: stretch
    }

    .landingDiscountBanner__button {
        flex: 1 1 0
    }

    .hero__pills {
        display: grid;
        grid-template-columns: 1fr
    }

    .signal-strip__viewport {
        padding: 12px 0
    }

    .signal-strip__item {
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px
    }

    .hero__visual {
        min-height: 420px;
        border-radius: 26px
    }

    .hero__visualCard {
        padding: 18px
    }

    .hero__visualCard strong {
        font-size: 18px
    }

    .hero__visualCard p {
        font-size: 13px
    }

    .hero__visualCard--main {
        left: 18px;
        right: 18px;
        top: 130px;
        min-height: auto
    }

    .hero__visualCard--top {
        top: 20px;
        left: 18px;
        width: 210px
    }

    .hero__visualCard--bottom {
        right: 18px;
        bottom: 18px;
        width: 220px
    }

    .hero__visualStats {
        grid-template-columns: 1fr
    }

    .hero__fact,
    .trust-card,
    .usecase-card,
    .step-card,
    .fp-card,
    .contact-card {
        padding: 24px 20px;
        border-radius: 24px
    }

    .trust__grid,
    .steps__grid,
    .landingTariffs__grid,
    .contact__grid {
        gap: 16px
    }

    .faq-item {
        border-radius: 18px
    }

    .faq-item__trigger {
        padding: 18px
    }

    .faq-item__head {
        gap: 12px
    }

    .faq-item__num {
        min-width: 36px;
        height: 36px
    }

    .faq-item__contentInner {
        padding: 0 18px 18px 66px
    }

    .contact__panel {
        padding: 36px 20px 30px;
        border-radius: 28px
    }

    .contact__grid {
        margin-top: 18px
    }
}

.heroShowcase--screens {
    --scroll-shift: 0px;
    width: 100vw;
    max-width: none;
    margin: 34px calc(50% - 50vw) 0;
    transform: none;
    display: block;
    overflow: hidden;
    perspective: 1400px
}

.showcaseWall {
    width: max(1480px, 118vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 248px 248px;
    gap: 10px;
    align-items: stretch
}

.showcaseShot {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #080808;
    box-shadow: 0 24px 72px #00000057;
    transform: none;
    transition: border-color .22s ease, filter .22s ease
}

.showcaseShot:hover {
    z-index: 3;
    border-color: #ffffff47;
    filter: brightness(1.08)
}

.showcaseShot img {
    width: 100%;
    height: calc(100% + 96px);
    margin-top: -48px;
    display: block;
    object-fit: cover;
    object-position: center top;
    transform: translate3d(0, calc(var(--scroll-shift) * var(--depth) * -.55), 0) scale(1.01);
    transition: transform .32s ease;
    will-change: transform
}

.showcaseShot:hover img {
    transform: translate3d(0, calc(var(--scroll-shift) * var(--depth) * -.55), 0) scale(1.035)
}

.showcaseShot:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72))
}

.showcaseShot figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    gap: 4px;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55)
}

.showcaseShot b {
    font-size: 13px;
    line-height: 1.1
}

.showcaseShot span {
    font-size: 10px;
    color: #ffffffa3
}

.showcaseShot--wide {
    grid-column: span 3
}

.showcaseShot--medium {
    grid-column: span 2
}

.showcaseShot--phone {
    grid-column: span 2;
    grid-row: span 2
}

.showcaseShot--phone img {
    object-position: center center
}

.showcaseShot:nth-child(1) {
    grid-column: 1/span 3;
    grid-row: 1
}

.showcaseShot:nth-child(2) {
    grid-column: 4/span 2;
    grid-row: 1/span 2
}

.showcaseShot:nth-child(3) {
    grid-column: 6/span 3;
    grid-row: 1
}

.showcaseShot:nth-child(4) {
    grid-column: 9/span 2;
    grid-row: 1
}

.showcaseShot:nth-child(5) {
    grid-column: 1/span 3;
    grid-row: 2
}

.showcaseShot:nth-child(6) {
    grid-column: 6/span 5;
    grid-row: 2
}

.heroShowcase--screens .heroShowcase__fade {
    width: 18vw
}

.heroShowcase--screens .heroShowcase__fade--left {
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .76) 30%, transparent)
}

.heroShowcase--screens .heroShowcase__fade--right {
    background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .76) 30%, transparent)
}

@media(max-width:980px) {
    .showcaseWall {
        width: 1260px;
        grid-template-rows: 210px 210px
    }
}

@media(max-width:560px) {
    .heroShowcase--screens {
        margin-top: 26px
    }

    .showcaseWall {
        width: 980px;
        grid-template-rows: 148px 148px;
        gap: 8px
    }

    .showcaseShot {
        border-radius: 7px
    }
}

.accessWall {
    width: min(720px, 100vw - 48px);
    min-height: 340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    color: #fff
}

.accessWall__panel,
.accessWall__map {
    min-width: 0;
    min-height: 420px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, #ffffff14, #ffffff06), #070808;
    box-shadow: 0 24px 72px #00000052
}

.accessWall__panel {
    padding: 18px;
    display: flex;
    flex-direction: column
}

.accessWall__eyebrow {
    width: fit-content;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #ffffff94;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0
}

.accessWall__title {
    max-width: 330px;
    margin-top: 16px;
    display: block;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
    color: #ffffffeb
}

.accessWall__routes {
    margin-top: auto;
    display: grid;
    gap: 8px
}

.accessRoute {
    --route-tone: rgba(76, 195, 255, .78);
    min-height: 66px;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #ffffff09
}

.accessRoute--green {
    --route-tone: rgba(86, 232, 157, .78)
}

.accessRoute--blue {
    --route-tone: rgba(109, 163, 255, .82)
}

.accessRoute--amber {
    --route-tone: rgba(250, 190, 94, .82)
}

.accessRoute__icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--route-tone) 52%, transparent);
    background: color-mix(in srgb, var(--route-tone) 16%, transparent);
    color: #ffffffe0;
    font-size: 12px;
    font-weight: 600
}

.accessRoute__copy {
    min-width: 0;
    display: grid;
    gap: 5px
}

.accessRoute__copy>span:last-child {
    font-size: 12px;
    line-height: 1.25;
    color: #ffffff7a
}

.accessRoute__head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.accessRoute__head b {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere
}

.accessRoute__head i {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 11px;
    color: var(--route-tone)
}

.accessWall__map {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    background: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px), radial-gradient(circle at 50% 48%, rgba(76, 195, 255, .12), transparent 34%), #050606;
    background-size: 38px 38px, 38px 38px, auto, auto
}

.accessMap__line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, #ffffffb3, #4cc3ff00);
    opacity: .42
}

.accessMap__line--instagram {
    transform: rotate(180deg)
}

.accessMap__line--chatgpt {
    width: 33%;
    transform: rotate(-132deg)
}

.accessMap__line--gemini {
    width: 33%;
    transform: rotate(-48deg)
}

.accessMap__line--telegram {
    width: 33%;
    transform: rotate(132deg)
}

.accessMap__line--youtube {
    transform: rotate(0)
}

.accessMap__line--netflix {
    width: 33%;
    transform: rotate(48deg)
}

.accessMap__core,
.accessService {
    position: absolute;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #080a0ad1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.accessMap__core {
    left: 50%;
    top: 50%;
    width: 160px;
    min-height: 92px;
    padding: 16px;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px #4cc3ff1a, 0 26px 80px #00000061
}

.accessMap__core span {
    font-size: 12px;
    color: #ffffff80
}

.accessMap__core strong {
    font-size: 20px;
    font-weight: 500;
    line-height: 1
}

.accessService {
    width: 70px;
    height: 70px;
    padding: 12px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 54px #00000052
}

.accessService img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 6px
}

.accessService--chatgpt {
    left: 28%;
    top: 18%;
    background: #ffffff0b
}

.accessService--chatgpt img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.accessService--gemini {
    width: 112px;
    left: 72%;
    top: 18%;
    background: #ffffffeb
}

.accessService--gemini img {
    max-width: 92px
}

.accessService--instagram {
    left: 15%;
    top: 50%
}

.accessService--youtube {
    left: 85%;
    top: 50%
}

.accessService--telegram {
    left: 28%;
    top: 82%
}

.accessService--netflix {
    left: 72%;
    top: 82%
}

.accessMap__node {
    min-width: 104px;
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    gap: 5px
}

.accessMap__node span {
    font-size: 12px;
    color: #ffffff94
}

.accessMap__node b {
    font-size: 13px;
    font-weight: 500;
    color: #ffffffe6
}

.accessMap__node--home {
    left: 7%;
    top: 44%
}

.accessMap__node--work {
    left: 18%;
    top: 12%
}

.accessMap__node--media {
    right: 11%;
    top: 16%
}

.accessMap__node--ai {
    right: 7%;
    bottom: 17%
}

.accessMap__node--social {
    left: 17%;
    bottom: 12%
}

.accessWall__panel--health {
    gap: 10px
}

.accessMetric {
    padding: 14px 0;
    display: grid;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.accessMetric span {
    font-size: 12px;
    color: #ffffff80
}

.accessMetric strong {
    font-size: 22px;
    font-weight: 500
}

.accessMetric i {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff14
}

.accessMetric i:before {
    content: "";
    width: var(--metric);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #4cc3ffe6, #56e89dd1)
}

.accessSession {
    margin-top: auto;
    min-height: 84px;
    padding: 14px;
    border-radius: 8px;
    display: grid;
    align-content: center;
    gap: 7px;
    border: 1px solid rgba(86, 232, 157, .16);
    background: #56e89d0e
}

.accessSession span {
    font-size: 12px;
    color: #ffffff80
}

.accessSession strong {
    font-size: 18px;
    font-weight: 500
}

@media(max-width:980px) {
    .accessWall {
        grid-template-columns: minmax(0, 1fr);
        width: min(720px, 100vw - 40px)
    }

    .accessWall__panel,
    .accessWall__map {
        min-height: auto
    }

    .accessWall__map {
        min-height: 340px
    }
}

@media(max-width:560px) {
    .accessWall {
        width: 100%;
        min-height: 0
    }

    .accessWall__panel {
        padding: 14px
    }

    .accessWall__title {
        max-width: none;
        font-size: 19px
    }

    .accessWall__routes,
    .accessWall__panel--health {
        grid-template-columns: minmax(0, 1fr)
    }

    .accessRoute {
        min-height: 58px;
        padding: 10px
    }

    .accessWall__map {
        min-height: 300px
    }

    .accessMap__core {
        width: 132px;
        min-height: 78px;
        padding: 12px
    }

    .accessMap__core strong {
        font-size: 17px
    }

    .accessMap__node {
        min-width: 82px;
        min-height: 50px;
        padding: 8px 9px
    }

    .accessService {
        width: 56px;
        height: 56px;
        padding: 10px
    }

    .accessService--chatgpt {
        left: 29%;
        top: 16%
    }

    .accessService--gemini {
        width: 84px;
        left: 71%;
        top: 16%
    }

    .accessService--gemini img {
        max-width: 68px
    }

    .accessService--instagram {
        left: 13%;
        top: 50%
    }

    .accessService--youtube {
        left: 87%;
        top: 50%
    }

    .accessService--telegram {
        left: 29%;
        top: 84%
    }

    .accessService--netflix {
        left: 71%;
        top: 84%
    }
}

@keyframes landingShowcaseDrift {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-34%)
    }
}

@keyframes landingShowcaseDriftReverse {
    0% {
        transform: translate(-34%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes landingSoftScan {

    0%,
    to {
        transform: translate3d(-18%, 0, 0);
        opacity: .2
    }

    50% {
        transform: translate3d(18%, 0, 0);
        opacity: .55
    }
}

@keyframes accountMockFloat {

    0%,
    to {
        transform: translateZ(0)
    }

    50% {
        transform: translate3d(0, -7px, 0)
    }
}

@keyframes accountMockPulse {

    0%,
    to {
        opacity: .42;
        transform: scaleX(.72)
    }

    50% {
        opacity: 1;
        transform: scaleX(1)
    }
}

.landing {
    --landing-header-offset: 52px;
    --landing-text: rgba(255, 255, 255, .96);
    --landing-muted: rgba(255, 255, 255, .48);
    --landing-soft: rgba(255, 255, 255, .66);
    --landing-border: rgba(255, 255, 255, .09);
    --landing-surface: rgba(255, 255, 255, .035);
    --landing-surface-soft: rgba(255, 255, 255, .025);
    background: #000;
    overflow: hidden
}

.landing:before,
.landing:after {
    display: none
}

.landing__main {
    padding-top: var(--landing-header-offset)
}

.landing__shell {
    max-width: 1180px
}

.landingDiscountBanner {
    max-width: 780px;
    margin: 16px auto 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff09;
    box-shadow: none
}

.landingDiscountBanner__eyebrow,
.landingDiscountBanner__button,
.fp-badge,
.hero__visualLabel,
.step-card__num,
.faq-item__num {
    font-size: 10px
}

.landingDiscountBanner__title {
    font-size: 13px;
    letter-spacing: 0
}

.landingDiscountBanner__button {
    min-height: 28px;
    padding: 0 10px
}

[data-reveal] {
    transform: translate3d(0, 24px, 0);
    filter: blur(5px);
    transition: opacity .86s cubic-bezier(.16, 1, .22, 1), transform 1.04s cubic-bezier(.16, 1, .22, 1), filter .86s cubic-bezier(.16, 1, .22, 1)
}

.hero,
.signal-strip,
.accountShowcase,
.steps,
.landingTariffs,
.faq,
.contact {
    padding: 64px 0
}

.hero {
    padding: 74px 0 38px
}

.accountShowcase {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.9fr);
    gap: 54px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto
}

.accountShowcase__copy {
    position: sticky;
    top: calc(var(--landing-header-offset) + 38px);
    padding-top: 16px
}

.accountShowcase__copy h2 {
    max-width: 10ch;
    margin: 0 0 72px;
    font-size: clamp(42px, 4.8vw, 68px);
    line-height: .92;
    letter-spacing: -.06em
}

.accountShowcase__tabs {
    display: grid;
    gap: 0
}

.accountShowcase__tab {
    appearance: none;
    width: 100%;
    padding: 18px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
    text-align: left;
    color: #ffffff52;
    cursor: pointer;
    transition: color .18s ease, opacity .18s ease
}

.accountShowcase__tab span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em
}

.accountShowcase__tab strong {
    display: block;
    max-width: 240px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff75;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease
}

.accountShowcase__tab.is-active {
    color: #fff
}

.accountShowcase__stage {
    min-width: 0;
    padding-top: 52px;
    perspective: 1400px
}

.accountMock {
    --account-accent: #7aa7ff;
    --account-accent-soft: rgba(122, 167, 255, .18);
    position: relative;
    min-height: 560px;
    display: grid;
    grid-template-columns: 198px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: radial-gradient(circle at 78% 14%, var(--account-accent-soft), transparent 36%), linear-gradient(180deg, #ffffff0e, #ffffff05), #08090d;
    box-shadow: 0 34px 110px #0000006b, inset 0 1px #ffffff0d;
    overflow: hidden;
    transform: rotateX(0) rotateY(-2deg);
    transition: background .28s ease, transform .28s ease
}

.accountMock:before {
    content: "";
    position: absolute;
    left: 32%;
    right: 8%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--account-accent), transparent);
    animation: accountMockPulse 3s ease-in-out infinite
}

.accountMock.is-fluency {
    --account-accent: #8f72ff;
    --account-accent-soft: rgba(143, 114, 255, .2)
}

.accountMock.is-whitelist {
    --account-accent: #54d9ff;
    --account-accent-soft: rgba(84, 217, 255, .18)
}

.accountMock.is-servers {
    --account-accent: #53ffa4;
    --account-accent-soft: rgba(83, 255, 164, .14)
}

.accountMock.is-referrals {
    --account-accent: #ffca66;
    --account-accent-soft: rgba(255, 202, 102, .16)
}

.accountMock__sidebar,
.accountMock__heroCard,
.accountMock__grid article,
.accountMock__table {
    border: 1px solid rgba(255, 255, 255, .09);
    background: #ffffff0b;
    box-shadow: inset 0 1px #ffffff0a
}

.accountMock__sidebar {
    min-width: 0;
    padding: 14px;
    border-radius: 17px
}

.accountMock__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.accountMock__brand i {
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: radial-gradient(circle at 34% 50%, #fff 0 3px, transparent 4px), radial-gradient(circle at 62% 50%, #fff 0 3px, transparent 4px), linear-gradient(135deg, rgba(255, 255, 255, .16), transparent)
}

.accountMock__brand b,
.accountMock__brand span {
    display: block
}

.accountMock__brand b {
    font-size: 12px
}

.accountMock__brand span {
    margin-top: 2px;
    font-size: 10px;
    color: #ffffff6b
}

.accountMock__status {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #ffffff0b
}

.accountMock__status span,
.accountMock__status b {
    display: block
}

.accountMock__status span {
    font-size: 9px;
    color: #ffffff6b
}

.accountMock__status b {
    margin-top: 3px;
    font-size: 11px
}

.accountMock__nav {
    display: grid;
    gap: 6px;
    margin-top: 16px
}

.accountMock__nav button {
    appearance: none;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff94;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease
}

.accountMock__nav button:hover {
    color: #ffffffdb;
    background: #ffffff0b
}

.accountMock__nav button.is-active {
    color: #fff;
    background: #ffffff12;
    box-shadow: inset 0 0 0 1px #ffffff14
}

.accountMock__main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 14px
}

.accountMock__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px
}

.accountMock__head span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff61
}

.accountMock__head h3 {
    margin: 4px 0 0;
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: .92;
    letter-spacing: -.06em
}

.accountMock__head p {
    max-width: 560px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #ffffff85
}

.accountMock__head>b {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--account-accent-soft);
    color: #ffffffe0;
    font-size: 11px
}

.accountMock__heroCard {
    position: relative;
    min-height: 128px;
    padding: 18px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: radial-gradient(circle at 86% 18%, var(--account-accent-soft), transparent 34%), #ffffff0d;
    overflow: hidden
}

.accountMock__heroCard:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--account-accent)
}

.accountMock__heroCard span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff6
}

.accountMock__heroCard h4 {
    margin: 8px 0 0;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.05em
}

.accountMock__heroCard p {
    max-width: 520px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #ffffff8f
}

.accountMock__heroCard strong {
    align-self: start;
    white-space: nowrap;
    font-size: 28px;
    letter-spacing: -.04em
}

.accountMock__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.accountMock__grid article {
    min-height: 116px;
    padding: 14px;
    border-radius: 14px;
    animation: accountMockFloat 4.2s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s)
}

.accountMock__grid span,
.accountMock__grid b,
.accountMock__grid p {
    display: block
}

.accountMock__grid span {
    font-size: 9px;
    color: #fff6
}

.accountMock__grid b {
    margin-top: 8px;
    font-size: 18px;
    letter-spacing: -.04em
}

.accountMock__grid p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.42;
    color: #ffffff80
}

.accountMock__table {
    align-self: end;
    border-radius: 14px;
    overflow: hidden
}

.accountMock__table div {
    min-height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.accountMock__table div:last-child {
    border-bottom: 0
}

.accountMock__table span {
    flex: 1;
    font-size: 12px;
    color: #ffffffad
}

.accountMock__table i {
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--account-accent), rgba(255, 255, 255, .1))
}

.signal-strip {
    padding-top: 0;
    padding-bottom: 28px
}

.section-title {
    margin-bottom: 10px;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02
}

.section-subtitle {
    max-width: 580px;
    font-size: 12px;
    line-height: 1.55
}

.hero__layout {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center
}

.hero__content {
    max-width: 620px;
    text-align: center
}

.hero__title {
    max-width: 10ch;
    margin: 0 auto;
    font-size: clamp(54px, 7vw, 88px);
    letter-spacing: -.06em;
    line-height: .9
}

.hero__subtitle {
    max-width: 510px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.42;
    color: #ffffff8f
}

.hero__actions {
    justify-content: center;
    margin-top: 22px;
    gap: 8px
}

.hero__pills {
    justify-content: center;
    margin-top: 18px;
    gap: 8px
}

.hero__pills li {
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff0a;
    font-size: 11px;
    font-weight: 500
}

.hero__facts {
    max-width: 620px;
    margin: 26px auto 0;
    gap: 10px
}

.hero__fact,
.step-card,
.fp-card,
.faq-item,
.contact-card {
    border-radius: 8px;
    background: #ffffff09;
    border-color: #ffffff14;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.hero__fact:before,
.hero__fact:after,
.step-card:before,
.step-card:after,
.fp-card:before,
.fp-card:after,
.faq-item:before,
.faq-item:after,
.contact-card:before,
.contact-card:after {
    display: none
}

.hero__fact {
    padding: 14px
}

.hero__fact strong {
    font-size: 18px
}

.hero__fact p {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.45
}

.hero__visual,
.heroMobileFeature {
    display: none
}

.hero__visual:before {
    opacity: .16;
    background-size: 44px 44px
}

.hero__visual:after,
.hero__orb,
.hero__visualBeam {
    display: none
}

.hero__visualCard {
    border-radius: 8px;
    padding: 14px;
    background: #00000085;
    box-shadow: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
}

.hero__visualCard strong {
    font-size: 15px;
    letter-spacing: 0
}

.hero__visualCard p {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.45
}

.hero__visualCard--main {
    top: 50px;
    left: 50%;
    right: auto;
    width: min(520px, 100% - 40px);
    min-height: 136px;
    transform: translate(-50%)
}

.hero__visualCard--top {
    top: 18px;
    left: 18px;
    width: 205px;
    transform: none
}

.hero__visualCard--bottom {
    right: 18px;
    bottom: 18px;
    width: 235px;
    transform: none
}

.heroShowcase {
    position: relative;
    width: calc(100vw - 16px);
    max-width: none;
    margin: 26px 50% 0;
    transform: translate(-50%);
    display: grid;
    gap: 10px;
    overflow: hidden;
    perspective: 1200px
}

.heroShowcase__row {
    width: max-content;
    display: flex;
    gap: 10px;
    padding: 0 8px;
    animation: landingShowcaseDrift 46s linear infinite
}

.heroShowcase__row:hover {
    animation-play-state: paused
}

.heroShowcase__row--reverse {
    animation-name: landingShowcaseDriftReverse;
    animation-duration: 52s
}

.heroShowcase__tile {
    position: relative;
    width: 190px;
    height: 132px;
    flex: 0 0 auto;
    padding: 14px;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #111;
    color: #fff;
    transform: translateZ(0) rotateX(0) rotateY(0);
    transition: transform .24s ease, border-color .24s ease, filter .24s ease
}

.heroShowcase__tile:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .24), transparent 70%);
    transform: translate(-120%);
    opacity: 0;
    transition: opacity .22s ease
}

.heroShowcase__tile:hover {
    z-index: 2;
    transform: translateY(-8px) rotateX(4deg) rotateY(-5deg);
    border-color: #ffffff47;
    filter: brightness(1.08)
}

.heroShowcase__tile:hover:before {
    opacity: 1;
    animation: landingSweep .9s ease
}

.heroShowcase__tile span,
.heroShowcase__tile strong,
.heroShowcase__tile p,
.heroShowcase__tile div {
    position: relative;
    z-index: 1
}

.heroShowcase__tile span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff94
}

.heroShowcase__tile strong {
    display: block;
    max-width: 10ch;
    margin-top: 8px;
    font-size: 23px;
    line-height: .94;
    letter-spacing: -.04em
}

.heroShowcase__tile p {
    margin: 10px 0 0;
    font-size: 12px;
    color: #00000094
}

.heroShowcase__tile--wide {
    width: 310px
}

.heroShowcase__tile--dark {
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .18), transparent 38%), #070707
}

.heroShowcase__tile--light {
    background: #f4f0e8;
    color: #090909
}

.heroShowcase__tile--light span {
    color: #00000075
}

.heroShowcase__tile--cyan {
    background: linear-gradient(135deg, #c7f7ff, #62d9ff 42%, #111 43%);
    color: #020202
}

.heroShowcase__tile--purple {
    background: radial-gradient(circle at 72% 20%, rgba(213, 188, 255, .8), transparent 34%), linear-gradient(135deg, #171024, #5a46ff)
}

.heroShowcase__tile--orange {
    background: #ff4a1c;
    color: #070707
}

.heroShowcase__tile--orange span {
    color: #00000085
}

.heroShowcase__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 13vw;
    pointer-events: none
}

.heroShowcase__fade--left {
    left: 0;
    background: linear-gradient(90deg, #000, transparent)
}

.heroShowcase__fade--right {
    right: 0;
    background: linear-gradient(270deg, #000, transparent)
}

.heroShowcase__bars {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: grid;
    gap: 6px
}

.heroShowcase__bars i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #ffffff24
}

.heroShowcase__bars i:nth-child(2) {
    width: 74%
}

.heroShowcase__bars i:nth-child(3) {
    width: 52%
}

.heroShowcase__bars i:nth-child(4) {
    width: 86%
}

.heroShowcase__phone {
    position: absolute;
    right: 14px;
    bottom: 10px;
    width: 46px;
    height: 78px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffffd1, #ffffff5c), #0000002e;
    box-shadow: inset 0 0 0 5px #00000038
}

.heroShowcase__waves,
.heroShowcase__route,
.heroShowcase__grid {
    position: absolute;
    inset: auto 14px 14px;
    height: 42px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 12px, transparent 12px 20px);
    animation: landingSoftScan 5s ease-in-out infinite
}

.heroShowcase__steps {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    display: flex;
    gap: 8px
}

.heroShowcase__steps i {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    background: #0000001a
}

.heroShowcase__route {
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent), repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 9px)
}

.heroShowcase__grid {
    height: 58px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent), repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 18px)
}

.heroShowcase .heroShowcase__tile {
    display: none
}

.serviceMock {
    position: relative;
    width: 430px;
    height: 245px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #050505;
    color: #fff;
    box-shadow: 0 24px 70px #00000052;
    transform: translateZ(0);
    transition: transform .26s ease, border-color .26s ease, filter .26s ease
}

.serviceMock:hover {
    z-index: 4;
    transform: translateY(-8px) rotateX(3deg) rotateY(-3deg);
    border-color: #ffffff47;
    filter: brightness(1.08)
}

.serviceMock--compact {
    width: 280px
}

.serviceMock__top {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.serviceMock__top b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px
}

.serviceMock__top b i {
    width: 18px;
    height: 12px;
    border-radius: 4px;
    background: #f03
}

.serviceMock__top span {
    font-size: 10px;
    color: #ffffff7a
}

.serviceMock__chips {
    display: flex;
    gap: 6px;
    padding: 9px 12px;
    overflow: hidden
}

.serviceMock__chips span {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff1f;
    font-size: 9px;
    font-weight: 700
}

.youtubeGrid {
    padding: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.youtubeGrid--shorts {
    grid-template-columns: repeat(4, 86px);
    gap: 8px;
    padding-top: 12px
}

.youtubeGrid__card {
    min-width: 0;
    display: grid;
    gap: 5px
}

.youtubeGrid__card strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 1.1
}

.youtubeGrid__card span {
    font-size: 9px;
    color: #ffffff7a
}

.youtubeGrid__thumb {
    aspect-ratio: 16/9;
    border-radius: 7px;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .85), transparent 12%), linear-gradient(135deg, #ffb547, #ff3434 38%, #1d7cff 72%, #141414)
}

.youtubeGrid__card:nth-child(2n) .youtubeGrid__thumb {
    background: radial-gradient(circle at 70% 35%, rgba(255, 255, 255, .9), transparent 10%), linear-gradient(135deg, #65d8ff, #315dff 45%, #111 46%)
}

.youtubeGrid__card:nth-child(3n) .youtubeGrid__thumb {
    background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .9), transparent 13%), linear-gradient(135deg, #f8f2df, #78d37c 40%, #222)
}

.serviceMock--tiktok {
    width: 235px;
    background: #000
}

.tiktokFrame {
    position: absolute;
    inset: 10px 42px;
    border-radius: 12px;
    overflow: hidden;
    background: #151515
}

.tiktokFrame__label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8)
}

.tiktokFrame__video {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 36%, rgba(255, 255, 255, .72), transparent 9%), radial-gradient(circle at 46% 58%, rgba(255, 255, 255, .54), transparent 8%), linear-gradient(180deg, #816b4b, #1c1c1c 58%, #090909);
    animation: landingSoftScan 6s ease-in-out infinite
}

.tiktokFrame__actions {
    position: absolute;
    right: -34px;
    bottom: 34px;
    display: grid;
    gap: 10px
}

.tiktokFrame__actions i {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ffffff29;
    border: 1px solid rgba(255, 255, 255, .12)
}

.tiktokFrame strong,
.tiktokFrame p {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 28px;
    margin: 0;
    font-size: 10px
}

.tiktokFrame p {
    bottom: 12px;
    color: #ffffff9e
}

.serviceMock--chatgpt {
    display: grid;
    grid-template-columns: 72px 1fr;
    background: #000
}

.serviceMock__sidebar {
    padding: 12px 10px;
    display: grid;
    gap: 8px;
    align-content: start;
    background: #080808;
    border-right: 1px solid rgba(255, 255, 255, .08)
}

.serviceMock__sidebar i {
    height: 16px;
    border-radius: 5px;
    background: #ffffff1f
}

.serviceMock__sidebar i:first-child {
    background: #fff3
}

.chatPanel {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px
}

.chatPanel>span {
    position: absolute;
    top: 12px;
    left: 92px;
    font-size: 12px;
    font-weight: 700
}

.chatPanel h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.02em
}

.chatPanel__input {
    width: 250px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #242424;
    color: #ffffff8a;
    font-size: 11px
}

.chatPanel__input b {
    margin-left: auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #ffffff1f;
    color: #fff;
    font-size: 10px
}

.serviceMock--gemini {
    background: #010101
}

.geminiNav {
    height: 34px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.geminiNav b {
    font-size: 13px;
    color: #ffffffb8
}

.geminiNav span {
    padding: 6px 12px;
    border-radius: 999px;
    background: #bfe5ff;
    color: #0a0a0a;
    font-size: 10px;
    font-weight: 700
}

.geminiPrompt {
    height: calc(100% - 34px);
    display: grid;
    place-content: center;
    gap: 16px
}

.geminiPrompt h3 {
    margin: 0;
    font-size: 23px;
    line-height: 1.08;
    letter-spacing: -.04em
}

.geminiPrompt em {
    color: #4285ff;
    font-style: normal
}

.geminiPrompt p {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #4285ff
}

.geminiPrompt__box {
    width: 265px;
    height: 48px;
    padding: 0 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #242424;
    color: #ffffff85;
    font-size: 11px
}

.geminiPrompt__box i {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4285ff, #ff4b8b)
}

.serviceMock--geminiLight {
    background: #f7f7f7;
    color: #050505
}

.serviceMock--telegram {
    display: grid;
    grid-template-columns: 132px 1fr;
    background: #e8edf5;
    color: #111
}

.telegramList {
    padding: 12px 10px;
    display: grid;
    gap: 8px;
    align-content: start;
    background: #f7f8fb;
    border-right: 1px solid rgba(0, 0, 0, .08)
}

.telegramList b {
    font-size: 13px
}

.telegramList span {
    padding: 8px;
    border-radius: 9px;
    background: #0000000f;
    font-size: 10px
}

.telegramChat {
    padding: 18px 14px;
    display: grid;
    gap: 8px;
    align-content: center;
    background: linear-gradient(#79ba6a85, #79ba6a85), repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, .12) 10px 11px)
}

.telegramChat i {
    justify-self: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #0000002e;
    color: #fff;
    font-size: 9px;
    font-style: normal
}

.telegramChat p {
    max-width: 148px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px 12px 12px 3px;
    background: #fff;
    font-size: 10px
}

.telegramChat .is-own {
    justify-self: end;
    border-radius: 12px 12px 3px;
    background: #d9ffc7
}

.serviceMock--instagram {
    width: 455px;
    display: grid;
    grid-template-columns: 1fr 150px;
    background: #0b0f12
}

.instagramSplash {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    border-right: 1px solid rgba(255, 255, 255, .1)
}

.instagramSplash b {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 13px
}

.instagramSplash h3 {
    max-width: 230px;
    margin: 0;
    text-align: center;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.03em
}

.instagramCards {
    position: relative;
    width: 180px;
    height: 92px
}

.instagramCards i {
    position: absolute;
    width: 70px;
    height: 92px;
    border-radius: 15px;
    background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .82), transparent 14%), linear-gradient(150deg, #ff5a3d, #d200ff 48%, #211);
    box-shadow: 0 16px 30px #0000004d
}

.instagramCards i:nth-child(1) {
    left: 18px;
    transform: rotate(-9deg)
}

.instagramCards i:nth-child(2) {
    left: 58px;
    z-index: 1
}

.instagramCards i:nth-child(3) {
    right: 18px;
    transform: rotate(9deg)
}

.instagramLogin {
    padding: 48px 14px 0;
    display: grid;
    gap: 10px;
    align-content: start;
    background: #202024
}

.instagramLogin span {
    font-size: 12px;
    font-weight: 700
}

.instagramLogin i {
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14)
}

.instagramLogin b {
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #1d71d8;
    font-size: 11px
}

.serviceMock--vpn {
    width: 310px;
    background: radial-gradient(circle at 78% 18%, rgba(102, 255, 189, .18), transparent 30%), #050505
}

.vpnCard {
    height: 100%;
    padding: 20px;
    display: grid;
    align-content: center;
    gap: 14px
}

.vpnCard span {
    font-size: 11px;
    color: #ffffff85
}

.vpnCard h3 {
    max-width: 9ch;
    margin: 0;
    font-size: 32px;
    line-height: .92;
    letter-spacing: -.05em
}

.vpnCard__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

.vpnCard__status i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #47ff9c;
    box-shadow: 0 0 18px #47ff9cb3
}

.vpnCard__meters {
    display: grid;
    gap: 7px
}

.vpnCard__meters i {
    height: 6px;
    border-radius: 999px;
    background: #ffffff1f
}

.vpnCard__meters i:nth-child(1) {
    width: 80%
}

.vpnCard__meters i:nth-child(2) {
    width: 58%
}

.vpnCard__meters i:nth-child(3) {
    width: 92%
}

.heroShowcase.heroShowcase--screens {
    width: 100vw;
    max-width: none;
    margin: 34px calc(50% - 50vw) 0;
    transform: none;
    display: block;
    overflow: visible;
    perspective: 1400px
}

.heroShowcase.heroShowcase--screens .showcaseWall {
    margin-inline: auto
}

.hero,
.landing,
.landing__main,
.landing__shell {
    overflow: visible
}

@media(max-width:560px) {
    .heroShowcase.heroShowcase--screens {
        width: 100vw;
        margin: 26px calc(50% - 50vw) 0;
        transform: none
    }
}

.hero__visualStats {
    margin-top: 12px;
    gap: 8px
}

.hero__visualStat {
    min-height: 52px;
    padding: 10px;
    border-radius: 6px
}

.hero__visualStat span {
    font-size: 9px;
    letter-spacing: .08em
}

.hero__visualStat strong {
    font-size: 12px
}

.signal-strip__viewport {
    padding: 10px 0
}

.signal-strip__track {
    gap: 8px;
    animation-duration: 38s
}

.signal-strip__item {
    min-height: 30px;
    padding: 0 10px;
    gap: 7px;
    font-size: 11px;
    font-weight: 500
}

.signal-strip__dot,
.fp-dot {
    width: 5px;
    height: 5px
}

.steps__grid,
.landingTariffs__grid {
    gap: 12px;
    margin-top: 30px
}

.steps__grid:before,
.steps__grid:after,
.fp-glow,
.contact__glow {
    display: none
}

.step-card {
    min-height: 0;
    padding: 18px;
    transform-style: preserve-3d
}

.step-card:hover {
    transform: translateY(-4px) rotateX(1.5deg);
    box-shadow: none
}

.step-card h3 {
    margin-top: 14px;
    font-size: 15px;
    letter-spacing: 0
}

.step-card p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5
}

.step-card--2,
.step-card--3 {
    margin-top: 0
}

.step-card__num {
    min-width: 28px;
    height: 28px;
    letter-spacing: .08em;
    box-shadow: none;
    animation: none
}

.fp-card {
    padding: 18px;
    transform-style: preserve-3d
}

.fp-card:hover {
    box-shadow: none
}

.fp-card--highlight {
    border-color: #ffffff2e;
    background: #ffffff0f;
    box-shadow: none
}

.fp-card--ultimate {
    border-color: #ffc77066;
    background: linear-gradient(160deg, #ffc7701a, #ffffff08 62%);
    box-shadow: none
}

.fp-card--ultimate:hover {
    border-color: #ffc77099
}

.fp-titleRow h3 {
    font-size: 16px;
    letter-spacing: 0
}

.fp-priceRow {
    margin-top: 10px
}

.fp-price__num {
    font-size: 30px
}

.fp-price__cur {
    font-size: 13px
}

.fp-period,
.fp-meta,
.fp-note,
.fp-footnote {
    font-size: 11px
}

.fp-list {
    margin-top: 16px;
    gap: 8px
}

.fp-list li {
    font-size: 12px;
    line-height: 1.4
}

.fp-check {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    flex-basis: 14px
}

@media(min-width:1181px) {
    .fp-meta {
        min-height: 4.65em
    }
}

.fp-check:after {
    width: 6px;
    height: 4px;
    border-width: 1.5px
}

.fp-action {
    min-height: 34px;
    margin-top: 18px;
    padding: 0 12px;
    font-size: 12px
}

.faq__list {
    max-width: 860px;
    margin-top: 30px;
    gap: 10px;
    align-items: start
}

.faq__column {
    gap: 10px
}

.faq-item:hover {
    transform: none
}

.faq-item.is-open {
    border-color: #ffffff24;
    background: #ffffff0d;
    box-shadow: none
}

.faq-item__trigger {
    padding: 14px
}

.faq-item__head {
    gap: 10px
}

.faq-item__head span {
    font-size: 12px;
    line-height: 1.35
}

.faq-item__num {
    min-width: 26px;
    height: 26px
}

.faq-item__contentInner {
    padding: 0 14px 14px 50px
}

.faq-item__content p {
    font-size: 11px;
    line-height: 1.5
}

.contact__panel {
    padding: 34px 22px;
    border-radius: 10px;
    background: #ffffff0b;
    box-shadow: none
}

.contact__panel:before {
    display: none
}

.contact__actions {
    margin-top: 22px;
    gap: 8px
}

.contact__grid {
    gap: 12px;
    margin-top: 12px
}

.contact-card {
    padding: 18px
}

.contact-card:hover {
    box-shadow: none
}

.contact-card h3 {
    font-size: 15px;
    letter-spacing: 0
}

.contact-card p,
.contact-card span {
    font-size: 12px
}

.contact-card--1,
.contact-card--3 {
    margin-top: 0
}

.landing .btn.btn--lg {
    min-height: 34px;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0
}

.landing .btn.btn--ghost {
    background: #ffffff0b
}

.landing .btn.btn--primary {
    box-shadow: none
}

@media(max-width:820px) {
    .landing {
        --landing-header-offset: 48px
    }

    .hero__title {
        font-size: clamp(42px, 12vw, 66px)
    }

    .accountMock {
        grid-template-columns: 1fr
    }

    .accountMock__sidebar {
        display: none
    }

    .accountMock__grid,
    .hero__facts,
    .steps__grid,
    .landingTariffs__grid {
        grid-template-columns: 1fr
    }

    .hero__visual {
        min-height: 360px
    }

    .hero__visualCard--main,
    .hero__visualCard--top,
    .hero__visualCard--bottom {
        left: 14px;
        right: 14px;
        width: auto;
        transform: none
    }

    .hero__visualCard--main {
        top: 110px
    }
}

@media(max-width:560px) {

    .hero,
    .signal-strip,
    .accountShowcase,
    .steps,
    .landingTariffs,
    .faq,
    .contact {
        padding: 48px 0
    }

    .hero {
        padding-top: 56px
    }

    .section-title {
        font-size: clamp(24px, 8vw, 34px)
    }

    .hero__subtitle {
        font-size: 13px
    }

    .accountShowcase__copy h2 {
        font-size: clamp(32px, 10vw, 44px)
    }

    .accountMock {
        min-height: auto;
        padding: 12px;
        border-radius: 16px
    }

    .accountMock__head,
    .accountMock__heroCard {
        flex-direction: column
    }

    .accountMock__heroCard strong {
        font-size: 22px
    }

    .hero__pills,
    .faq__list,
    .contact__grid {
        grid-template-columns: 1fr
    }
}

@media(min-width: 981px) {
    .accountShowcase {
        display: block;
        grid-template-columns: none;
        width: min(1500px, 100vw - 96px);
        max-width: none;
        min-height: auto;
        margin: 0 auto;
        padding: 82px 0 24px;
        overflow: visible
    }

    .accountShowcase__sticky {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: clamp(230px, 22vw, 320px) minmax(860px, 1fr);
        gap: clamp(28px, 4vw, 54px);
        align-items: start;
        min-height: 0;
        padding: 0;
        overflow: visible
    }

    .accountShowcase__copy {
        position: sticky;
        top: calc(var(--landing-header-offset) + 54px);
        align-self: start;
        z-index: 4
    }

    .accountShowcase__copy h2 {
        max-width: 300px;
        font-size: clamp(38px, 4.4vw, 62px);
        line-height: .92
    }

    .accountShowcase__tabs {
        margin-top: 34px;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .accountShowcase__tab {
        position: relative;
        min-height: 72px;
        padding: 18px 0 18px 18px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        border-radius: 0;
        background: transparent;
        transform: none
    }

    .accountShowcase__tab:before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        width: 2px;
        border-radius: 999px;
        background: #ffffff29;
        transform: scaleY(.25);
        transform-origin: center;
        transition: background .36s ease, transform .36s ease
    }

    .accountShowcase__tab:hover,
    .accountShowcase__tab.is-active {
        background: transparent;
        transform: none
    }

    .accountShowcase__tab.is-active:before {
        background: #fff;
        transform: scaleY(1)
    }

    .accountShowcase__tab span {
        display: block;
        font-size: 21px;
        line-height: 1.05;
        color: #ffffff70;
        transition: color .36s ease
    }

    .accountShowcase__tab strong {
        display: block;
        max-width: 250px;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .36s ease, transform .36s ease
    }

    .accountShowcase__tab.is-active span {
        color: #fffffff0
    }

    .accountShowcase__tab.is-active strong {
        opacity: 1;
        transform: translateY(0)
    }

    .accountShowcase__stage {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        display: grid;
        gap: clamp(48px, 5.5vw, 84px);
        perspective: none;
        overflow: visible
    }

    .accountMock {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: clamp(640px, 78vh, 790px);
        opacity: var(--panel-opacity, 0);
        pointer-events: auto;
        filter: blur(var(--panel-blur, 8px));
        transform: translate3d(var(--panel-x, 120px), 0, 0) scale(var(--panel-scale, .965));
        transform-origin: 50% 18%;
        z-index: 1;
        transition: opacity .76s cubic-bezier(.2, 1, .22, 1), filter .76s cubic-bezier(.2, 1, .22, 1), transform .98s cubic-bezier(.16, 1, .2, 1), border-color .36s ease;
        will-change: opacity, transform, filter
    }

    .accountMock.is-active {
        z-index: 2;
        border-color: #ffffff2e
    }

    .accountMock__grid article {
        animation-play-state: paused
    }

    .accountMock.is-active .accountMock__grid article {
        animation-play-state: running
    }

}

@media(max-width:1180px) {
    .accountShowcase {
        width: min(100%, 100vw - 32px)
    }

    .accountShowcase__sticky {
        grid-template-columns: clamp(260px, 29vw, 340px) minmax(0, 1fr);
        gap: clamp(24px, 3vw, 36px)
    }

    .accountShowcase__copy h2 {
        font-size: clamp(36px, 5vw, 56px)
    }

    .accountShowcase__tab strong {
        max-width: 310px
    }

    .accountShowcase__stage .accountMock {
        grid-template-columns: clamp(210px, 25%, 248px) minmax(0, 1fr)
    }

    .accountShowcase__tab span {
        font-size: 18px
    }
}

@media(max-width:900px) {
    .accountShowcase {
        min-height: auto;
        padding: 58px 0
    }

    .accountShowcase__sticky {
        position: relative;
        top: auto;
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 0
    }

    .accountShowcase__copy h2 {
        max-width: 620px
    }

    .accountShowcase__tabs {
        margin-top: 24px
    }

    .accountShowcase__tab {
        min-height: auto;
        padding: 14px 0 14px 16px
    }

    .accountShowcase__stage {
        min-height: 0;
        gap: 42px
    }

    .accountMock {
        min-height: auto;
        transform: translate3d(var(--panel-x, 72px), 0, 0) scale(var(--panel-scale, .97))
    }
}

@media(max-width:560px) {
    .accountShowcase {
        width: min(100%, 100vw - 24px);
        padding: 48px 0
    }

    .accountShowcase__stage {
        min-height: 0
    }

    .accountShowcase__copy h2 {
        font-size: clamp(34px, 11vw, 46px)
    }
}

@media(prefers-reduced-motion:reduce) {

    .accountMock,
    .accountShowcase__tab,
    .accountShowcase__tab:before,
    .accountShowcase__tab strong {
        transition: none
    }
}

@media(max-width:760px) {

    html,
    body,
    .landing {
        --landing-header-offset: 58px;
        overflow-x: hidden
    }

    .landing__main {
        padding-top: 0
    }

    .landing__shell {
        width: 100%;
        max-width: none;
        padding-inline: 18px
    }

    .landingDiscountBanner {
        margin-top: 64px
    }

    .hero {
        padding: 86px 0 42px
    }

    .hero__content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left
    }

    .hero__title {
        width: 100%;
        max-width: min(300px, 100%);
        margin: 0;
        font-size: clamp(34px, 10.4vw, 46px);
        line-height: .95;
        overflow-wrap: anywhere;
        word-break: break-word
    }

    .hero__line {
        display: block;
        overflow-wrap: anywhere;
        word-break: break-word
    }

    .hero__subtitle,
    .hero__actions,
    .hero__pills,
    .hero__facts {
        display: none
    }

    .heroShowcase.heroShowcase--screens {
        width: 100%;
        margin: 28px 0 0;
        overflow: visible
    }

    .heroShowcase.heroShowcase--screens .showcaseWall {
        width: 100%;
        display: block;
        transform: none
    }

    .showcaseShot {
        display: none
    }

    .showcaseShot:nth-child(4) {
        width: 100%;
        height: clamp(190px, 56vw, 245px);
        display: block;
        border-radius: 4px;
        transform: none
    }

    .showcaseShot:nth-child(4) img {
        object-position: center center
    }

    .showcaseShot figcaption,
    .heroShowcase__fade {
        display: none
    }

    .heroMobileFeature {
        max-width: 320px;
        margin-top: 30px;
        display: grid;
        gap: 10px;
        text-align: left
    }

    .heroMobileFeature h2 {
        margin: 0;
        font-size: 22px;
        line-height: 1;
        letter-spacing: -.03em
    }

    .heroMobileFeature p {
        margin: 0;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.32;
        color: #ffffff94
    }

    .heroMobileFeature a {
        width: fit-content;
        margin-top: 6px;
        color: #ffffffd1;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700
    }

    .heroMobileFeature a:after {
        content: "›";
        margin-left: 8px
    }

    .signal-strip {
        padding-top: 8px
    }

    .accountShowcase {
        width: 100%;
        padding: 54px 0 10px
    }

    .accountShowcase__sticky {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .accountShowcase__copy {
        position: relative;
        top: auto
    }

    .accountShowcase__copy h2 {
        max-width: 8.5ch;
        margin-bottom: 0;
        font-size: clamp(38px, 13vw, 58px)
    }

    .accountShowcase__tabs {
        margin-top: 28px
    }

    .accountShowcase__tab {
        min-height: 58px;
        padding-block: 14px
    }

    .accountShowcase__tab span {
        font-size: 18px
    }

    .accountShowcase__tab strong {
        max-width: 280px;
        font-size: 11px
    }

    .accountShowcase__stage {
        gap: 34px
    }

    .accountMock {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 12px;
        border-radius: 18px;
        transform: translate3d(var(--panel-x, 64px), 0, 0) scale(var(--panel-scale, .97))
    }

    .accountMock__sidebar {
        display: grid
    }

    .accountMock__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .accountMock__main {
        gap: 12px
    }

    .accountMock__head {
        flex-direction: column
    }

    .accountMock__head h3 {
        font-size: clamp(30px, 11vw, 44px)
    }

    .accountMock__heroCard {
        flex-direction: column;
        min-height: 0
    }

    .accountMock__grid {
        grid-template-columns: 1fr
    }

    .accountMock__table i {
        width: 74px
    }

    .steps,
    .landingTariffs,
    .faq,
    .contact {
        padding: 54px 0
    }

    .section-title {
        max-width: 10ch;
        margin-inline: auto;
        text-align: center;
        font-size: clamp(30px, 10vw, 44px)
    }

    .section-subtitle {
        max-width: 340px;
        margin-inline: auto;
        text-align: center
    }

    .steps__grid,
    .landingTariffs__grid,
    .faq__list,
    .contact__grid {
        grid-template-columns: 1fr
    }

    .fp-card,
    .step-card,
    .faq-item,
    .contact-card {
        border-radius: 10px
    }
}

@media(max-width:430px) {
    .landing__shell {
        padding-inline: 14px
    }

    .hero {
        padding-top: 82px
    }

    .hero__title {
        max-width: min(280px, 100%);
        font-size: clamp(32px, 10.8vw, 43px)
    }

    .showcaseShot:nth-child(4) {
        height: 202px
    }

    .heroMobileFeature {
        max-width: 300px
    }

    .heroMobileFeature p {
        font-size: 15px
    }

    .accountMock__nav {
        grid-template-columns: 1fr
    }

    .accountMock__table div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding-block: 10px
    }
}

.accountShowcase__mobileDescription {
    display: none
}

@media(max-width:760px) {
    .heroMobileFeature {
        display: none !important
    }

    .accountShowcase {
        width: 100%;
        padding: 58px 0 72px
    }

    .accountShowcase__sticky {
        display: block;
        width: 100%;
        overflow: hidden
    }

    .accountShowcase__copy {
        position: relative;
        top: auto;
        z-index: 1
    }

    .accountShowcase__copy h2 {
        max-width: 8.2ch;
        margin: 0 0 28px;
        font-size: clamp(42px, 13vw, 58px);
        line-height: .92;
        letter-spacing: -.055em;
        overflow-wrap: normal;
        word-break: normal
    }

    .accountShowcase__tabs {
        display: none
    }

    .accountShowcase__stage {
        width: 100%;
        height: clamp(245px, 62vw, 360px);
        display: block;
        margin: 0;
        overflow: hidden;
        border-radius: 4px
    }

    .accountShowcase__stage .accountMock {
        display: none
    }

    .accountShowcase__stage .accountMock:first-child {
        --panel-opacity: 1;
        --panel-blur: 0px;
        display: grid;
        width: 720px;
        height: 430px;
        min-height: 430px;
        grid-template-columns: 170px 1fr;
        gap: 14px;
        padding: 14px;
        border-radius: 18px;
        opacity: 1 !important;
        filter: none !important;
        transform: translateZ(0) scale(.66) !important;
        transform-origin: top left;
        pointer-events: none
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__sidebar {
        display: grid;
        min-width: 0;
        padding: 12px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__brand {
        padding-bottom: 10px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__status {
        padding: 10px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__main {
        min-width: 0;
        gap: 12px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head {
        flex-direction: row;
        gap: 16px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head h3 {
        font-size: 36px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard {
        min-height: 116px;
        flex-direction: row
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid article {
        min-height: 108px
    }

    .accountShowcase__mobileDescription {
        max-width: 330px;
        margin: 30px 0 0;
        display: block;
        color: #ffffff9e;
        font-size: 18px;
        font-weight: 650;
        line-height: 1.28
    }
}

@media(max-width:560px) {
    .accountShowcase__stage {
        height: 255px
    }

    .accountShowcase__stage .accountMock:first-child {
        transform: translateZ(0) scale(.48) !important
    }
}

@media(max-width:430px) {
    .accountShowcase {
        padding-top: 52px
    }

    .accountShowcase__copy h2 {
        max-width: 7.6ch;
        font-size: clamp(42px, 14.2vw, 54px)
    }

    .accountShowcase__stage {
        height: 222px
    }

    .accountShowcase__stage .accountMock:first-child {
        transform: translateZ(0) scale(.42) !important
    }

    .accountShowcase__mobileDescription {
        max-width: 300px;
        font-size: 16px
    }
}

@media(max-width:760px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden
    }

    .landing,
    .landing__main,
    .landing__shell,
    .hero,
    .signal-strip,
    .accountShowcase,
    .steps,
    .landingTariffs,
    .faq,
    .contact {
        max-width: 100%;
        overflow-x: clip
    }

    .hero {
        padding: 108px 0 0
    }

    .hero__content {
        max-width: 360px;
        margin-inline: auto;
        text-align: center
    }

    .hero__title {
        max-width: min(350px, 100%);
        margin-inline: auto;
        font-size: clamp(38px, 10.9vw, 50px);
        line-height: .92;
        letter-spacing: -.06em;
        overflow-wrap: break-word;
        word-break: normal
    }

    .hero__line {
        display: inline;
        overflow-wrap: break-word;
        word-break: normal
    }

    .hero__line:after {
        content: " "
    }

    .hero__line:last-child:after {
        content: ""
    }

    .hero__subtitle {
        max-width: 335px;
        margin: 16px auto 0;
        display: block;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.28;
        color: #ffffff94
    }

    .hero__actions {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px
    }

    .hero__actions .btn {
        min-height: 34px;
        padding: 0 16px;
        font-size: 13px;
        white-space: nowrap
    }

    .hero__pills,
    .hero__facts {
        display: none
    }

    .heroShowcase.heroShowcase--screens {
        width: 100%;
        height: 230px;
        margin: 62px 0 0;
        overflow: hidden
    }

    .heroShowcase.heroShowcase--screens .showcaseWall {
        width: max-content;
        height: 100%;
        display: flex;
        align-items: stretch;
        gap: 10px;
        transform: translate(calc(-275px + var(--scroll-shift, 0px) * .2))
    }

    .heroShowcase.heroShowcase--screens .showcaseShot {
        display: block;
        flex: 0 0 210px;
        width: 210px;
        height: 100%;
        border-radius: 8px;
        transform: none
    }

    .heroShowcase.heroShowcase--screens .showcaseShot--phone {
        flex-basis: 150px
    }

    .heroShowcase.heroShowcase--screens .showcaseShot--wide {
        flex-basis: 230px
    }

    .heroShowcase.heroShowcase--screens .showcaseShot:nth-child(4) {
        width: 210px;
        height: 100%;
        border-radius: 8px
    }

    .heroShowcase.heroShowcase--screens .showcaseShot img {
        object-fit: cover;
        object-position: center top
    }

    .heroShowcase.heroShowcase--screens .showcaseShot figcaption,
    .heroShowcase.heroShowcase--screens .heroShowcase__fade {
        display: none
    }
}

@media(max-width:430px) {
    .hero {
        padding-top: 104px
    }

    .hero__content {
        max-width: 330px
    }

    .hero__title {
        max-width: min(320px, 100%);
        font-size: clamp(36px, 10.7vw, 44px)
    }

    .hero__subtitle {
        max-width: 305px;
        font-size: 15px
    }

    .hero__actions .btn {
        min-height: 32px;
        padding-inline: 14px;
        font-size: 12px
    }

    .heroShowcase.heroShowcase--screens {
        height: 216px;
        margin-top: 58px
    }

    .heroShowcase.heroShowcase--screens .showcaseWall {
        transform: translate(calc(-285px + var(--scroll-shift, 0px) * .2))
    }
}

@media(max-width:760px) {
    .accountShowcase {
        box-sizing: border-box;
        display: block !important;
        grid-template-columns: none !important;
        padding: 56px 0 64px
    }

    .accountShowcase__sticky {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: hidden
    }

    .accountShowcase__copy h2 {
        max-width: 340px;
        margin: 0 0 24px;
        font-size: clamp(34px, 9.2vw, 42px);
        line-height: .96;
        letter-spacing: -.055em
    }

    .accountShowcase__stage {
        --account-mobile-scale: min(1, calc(100% / 610));
        width: 100%;
        height: calc(430px * var(--account-mobile-scale));
        margin: 0;
        border-radius: 4px;
        overflow: hidden
    }

    .accountShowcase__stage .accountMock:first-child {
        width: 610px;
        height: 430px;
        min-height: 430px;
        transform: translateZ(0) scale(var(--account-mobile-scale)) !important;
        transform-origin: top left
    }

    .accountShowcase__mobileDescription {
        max-width: 340px;
        margin: 26px 0 0;
        font-size: 16px;
        line-height: 1.28
    }
}

@media(max-width:560px) {
    .accountShowcase__stage {
        --account-mobile-scale: min(1, calc(100% / 610))
    }
}

@media(max-width:430px) {
    .accountShowcase {
        padding-top: 48px
    }

    .accountShowcase__copy h2 {
        max-width: 315px;
        font-size: clamp(31px, 8.6vw, 36px)
    }

    .accountShowcase__stage {
        --account-mobile-scale: min(1, calc(100% / 600))
    }

    .accountShowcase__stage .accountMock:first-child {
        width: 600px
    }

    .accountShowcase__mobileDescription {
        max-width: 315px;
        margin-top: 22px;
        font-size: 15px
    }
}

@media(max-width:760px) {
    .accountShowcase {
        display: block !important;
        width: 100%;
        max-width: 100%;
        padding: 54px 0 64px;
        overflow: hidden
    }

    .accountShowcase__sticky,
    .accountShowcase__stage {
        width: 100%;
        max-width: 100%;
        overflow: hidden
    }

    .accountShowcase__copy h2 {
        max-width: 100%;
        margin-bottom: 24px;
        font-size: clamp(30px, 8.8vw, 40px);
        line-height: .98;
        letter-spacing: -.055em
    }

    .accountShowcase__stage {
        height: clamp(220px, 63vw, 292px);
        border-radius: 4px
    }

    .accountShowcase__stage .accountMock {
        display: none !important
    }

    .accountShowcase__stage .accountMock:first-child {
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        grid-template-columns: minmax(104px, 34%) minmax(0, 1fr) !important;
        gap: 10px;
        padding: 10px;
        border-radius: 16px;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        pointer-events: none;
        overflow: hidden
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__sidebar {
        min-width: 0;
        padding: 10px;
        border-radius: 13px;
        overflow: hidden
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__brand {
        gap: 7px;
        padding-bottom: 8px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__brand i {
        width: 22px;
        height: 14px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__brand b {
        font-size: 10px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__brand span,
    .accountShowcase__stage .accountMock:first-child .accountMock__status span {
        font-size: 8px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__status {
        margin-top: 8px;
        min-height: 44px;
        padding: 9px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__status b,
    .accountShowcase__stage .accountMock:first-child .accountMock__nav button {
        font-size: 9px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__nav {
        margin-top: 10px;
        grid-template-columns: 1fr;
        gap: 4px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__nav button {
        padding: 7px 8px;
        border-radius: 8px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__main {
        min-width: 0;
        gap: 9px;
        overflow: hidden
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head {
        display: block
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head span,
    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard span,
    .accountShowcase__stage .accountMock:first-child .accountMock__grid span {
        font-size: 8px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head h3 {
        margin-top: 4px;
        font-size: clamp(22px, 7vw, 34px);
        line-height: .95
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head p {
        max-height: 34px;
        margin-top: 7px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.3
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__head>b {
        display: none
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard {
        min-height: 76px;
        padding: 12px;
        border-radius: 12px;
        flex-direction: column;
        gap: 4px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard h4 {
        margin-top: 5px;
        font-size: clamp(18px, 5.8vw, 28px)
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard p {
        max-height: 30px;
        margin-top: 6px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.3
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__heroCard strong {
        display: none
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid article {
        min-height: 64px;
        padding: 10px;
        border-radius: 11px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid b {
        margin-top: 5px;
        font-size: 16px
    }

    .accountShowcase__stage .accountMock:first-child .accountMock__grid p,
    .accountShowcase__stage .accountMock:first-child .accountMock__table {
        display: none
    }

    .accountShowcase__mobileDescription {
        max-width: 100%;
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.3
    }
}

@media(max-width:430px) {
    .accountShowcase__stage {
        height: 220px
    }

    .accountShowcase__copy h2 {
        font-size: clamp(28px, 8.2vw, 34px)
    }

    .accountShowcase__stage .accountMock:first-child {
        grid-template-columns: minmax(98px, 36%) minmax(0, 1fr) !important;
        gap: 8px;
        padding: 9px
    }

    .accountShowcase__mobileDescription {
        font-size: 14px
    }
}

.accountShowcaseMobile {
    display: none
}

@media(max-width:980px) {
    .accountShowcase {
        display: none !important;
        width: 100%;
        max-width: 100%;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden
    }
}

.showcaseMobileWall {
    display: none
}

@media(min-width:761px) {
    .heroShowcase.heroShowcase--screens {
        margin-top: 82px
    }
}

@media(max-width:760px) {
    .hero {
        padding: 96px 0 0
    }

    .hero__content {
        max-width: min(350px, 100vw - 48px);
        margin-inline: auto;
        text-align: center
    }

    .hero__title {
        max-width: 11ch;
        margin-inline: auto;
        font-size: clamp(38px, 12.2vw, 54px);
        line-height: .9;
        letter-spacing: -.065em
    }

    .hero__subtitle {
        max-width: 320px;
        margin-top: 14px;
        font-size: 16px;
        line-height: 1.26
    }

    .hero__actions {
        margin-top: 18px;
        gap: 8px
    }

    .heroShowcase.heroShowcase--screens {
        width: 100%;
        height: clamp(300px, 82vw, 390px);
        margin: 74px 0 0;
        overflow: hidden
    }

    .heroShowcase.heroShowcase--screens .showcaseWall {
        display: none
    }

    .showcaseMobileWall {
        width: calc(100% + 74px);
        height: 100%;
        margin-left: -37px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px
    }

    .showcaseMobileWall__column {
        min-width: 0;
        display: grid;
        align-content: start;
        gap: 10px;
        transform: translateZ(0)
    }

    .showcaseMobileWall__column:first-child,
    .showcaseMobileWall__column:last-child {
        transform: translateZ(0)
    }

    .showcaseMobileWall__column--middle {
        transform: translateZ(0)
    }

    .showcaseMobileWall__shot {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        background: #08090b
    }

    .showcaseMobileWall__shot img {
        width: 100%;
        height: calc(100% + 64px);
        margin-top: -32px;
        display: block;
        object-fit: cover;
        object-position: top center;
        transform: translate3d(0, calc(var(--scroll-shift, 0px) * -.72), 0);
        will-change: transform
    }

    .showcaseMobileWall__column:first-child .showcaseMobileWall__shot img,
    .showcaseMobileWall__column:last-child .showcaseMobileWall__shot img {
        transform: translate3d(0, calc(var(--scroll-shift, 0px) * .42), 0)
    }

    .showcaseMobileWall__shot--wide {
        aspect-ratio: .78
    }

    .showcaseMobileWall__shot--medium {
        aspect-ratio: .86
    }

    .showcaseMobileWall__shot--phone {
        aspect-ratio: .52
    }
}

@media(max-width:430px) {
    .hero {
        padding-top: 88px
    }

    .hero__content {
        max-width: min(330px, 100vw - 44px)
    }

    .hero__title {
        font-size: clamp(36px, 11.4vw, 48px)
    }

    .hero__subtitle {
        max-width: 305px;
        font-size: 15px
    }

    .heroShowcase.heroShowcase--screens {
        height: clamp(292px, 84vw, 352px);
        margin-top: 66px
    }

    .showcaseMobileWall {
        width: calc(100% + 64px);
        margin-left: -32px;
        gap: 8px
    }

    .showcaseMobileWall__column {
        gap: 8px
    }
}

.heroShowcase.heroShowcase--screens {
    height: auto !important;
    margin: 24px calc(50% - 50vw) 0 !important;
    overflow: visible !important
}

@media(min-width:761px) {
    .heroShowcase.heroShowcase--screens {
        margin-top: 24px !important
    }
}

@media(max-width:760px) {
    .heroShowcase.heroShowcase--screens {
        width: 100% !important;
        height: auto !important;
        margin: 28px 0 0 !important;
        overflow: visible !important
    }

    .accessWall {
        width: 100%;
        min-height: 300px
    }

    .accessWall__map {
        min-height: 300px
    }
}

@media(max-width:430px) {
    .heroShowcase.heroShowcase--screens {
        height: auto !important;
        margin-top: 24px !important
    }
}

.logoCosmos {
    position: relative;
    width: min(980px, 100vw - 40px);
    height: clamp(300px, 30vw, 360px);
    margin: 0 auto;
    overflow: visible;
    isolation: isolate;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none
}

.logoCosmos:before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: -2;
    opacity: .78;
    background: radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .34) 0 1px, transparent 2px), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .28) 0 1px, transparent 2px), radial-gradient(circle at 64% 72%, rgba(255, 255, 255, .24) 0 1px, transparent 2px), radial-gradient(circle at 24% 82%, rgba(255, 255, 255, .2) 0 1px, transparent 2px), radial-gradient(circle at 50% 50%, rgba(80, 186, 255, .16), transparent 45%)
}

.logoCosmos:after {
    content: "";
    position: absolute;
    inset: -18% -12%;
    z-index: -1;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .38), transparent 9%), radial-gradient(circle at 42% 50%, rgba(66, 165, 255, .32), transparent 24%), radial-gradient(circle at 58% 55%, rgba(166, 114, 255, .28), transparent 30%);
    filter: blur(34px);
    transform: scale(.42)
}

.logoCosmos__mist {
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 220px;
    border-radius: 999px;
    filter: blur(54px);
    opacity: .34;
    pointer-events: none
}

.logoCosmos__mist--left {
    left: 8%;
    top: 18%;
    background: #368aff52
}

.logoCosmos__mist--right {
    right: 6%;
    bottom: 12%;
    background: #8e68ff47
}

.logoCosmos__spark {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    background: rgba(255, 255, 255, var(--opacity));
    box-shadow: 0 0 12px #ffffffb3;
    transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0);
    animation: logoSparkPulse 4.8s ease-in-out infinite alternate
}

.logoCosmos__headline {
    position: absolute;
    z-index: 1;
    max-width: min(430px, 42vw);
    pointer-events: none;
    font-size: clamp(44px, 5.1vw, 74px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
    mix-blend-mode: screen;
    background: linear-gradient(180deg, #fffffff5, #ffffffd1 45%, #ffffff94);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 20px 64px rgba(0, 0, 0, .72)
}

.logoCosmos__headline--left {
    left: 6%;
    top: 38%;
    transform: translateY(-50%);
    text-align: left
}

.logoCosmos__headline--right {
    right: 8%;
    top: 58%;
    transform: translateY(-50%);
    text-align: right;
    color: #ffffffb8
}

.logoStar {
    position: absolute;
    z-index: 2;
    --logo-icon-size: 38px;
    --intro-x: 0px;
    --intro-y: 0px;
    --intro-rotate: 0deg;
    --intro-delay: 0s;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0);
    transition: transform .18s linear;
    will-change: transform
}

.logoStar__halo {
    position: absolute;
    inset: -18px;
    border-radius: 999px;
    opacity: .22;
    background: radial-gradient(circle, rgba(255, 255, 255, .42), transparent 62%);
    filter: blur(12px)
}

.logoStar__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0c0e12a3;
    box-shadow: 0 18px 48px #00000057, inset 0 1px #ffffff14;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: logoFloat var(--duration) ease-in-out infinite alternate;
    animation-delay: var(--delay);
    will-change: transform
}

.logoStar img {
    width: var(--logo-icon-size);
    height: var(--logo-icon-size);
    max-width: var(--logo-icon-size);
    max-height: var(--logo-icon-size);
    display: block;
    object-fit: contain
}

.logoStar--instagram {
    --intro-x: 190px;
    --intro-y: -74px;
    --intro-rotate: -18deg;
    --intro-delay: .26s
}

.logoStar--chatgpt {
    --intro-x: 126px;
    --intro-y: 86px;
    --intro-rotate: 14deg;
    --intro-delay: .18s
}

.logoStar--gemini {
    --intro-x: -92px;
    --intro-y: 118px;
    --intro-rotate: -10deg;
    --intro-delay: .34s
}

.logoStar--roblox {
    --intro-x: -154px;
    --intro-y: 82px;
    --intro-rotate: 16deg;
    --intro-delay: .44s
}

.logoStar--telegram {
    --intro-x: 104px;
    --intro-y: -84px;
    --intro-rotate: -14deg;
    --intro-delay: .4s
}

.logoStar--youtube {
    --intro-x: -176px;
    --intro-y: 8px;
    --intro-rotate: 12deg;
    --intro-delay: .5s
}

.logoStar--netflix {
    --intro-x: -112px;
    --intro-y: -96px;
    --intro-rotate: -12deg;
    --intro-delay: .56s
}

.logoStar--sora {
    --intro-x: 8px;
    --intro-y: 126px;
    --intro-rotate: 10deg;
    --intro-delay: .24s
}

.logoStar--twitch {
    --intro-x: -184px;
    --intro-y: -118px;
    --intro-rotate: 18deg;
    --intro-delay: .62s
}

.logoStar--discord {
    --intro-x: 172px;
    --intro-y: -88px;
    --intro-rotate: -16deg;
    --intro-delay: .48s
}

.heroShowcase[data-revealed=true] .logoCosmos:after {
    animation: logoCosmosIgnition 2s cubic-bezier(.16, 1, .22, 1) both
}

.heroShowcase[data-revealed=true] .logoCosmos__mist {
    animation: logoMistBloom 2s cubic-bezier(.16, 1, .22, 1) both
}

.heroShowcase[data-revealed=true] .logoCosmos__headline--left {
    animation: logoHeadlineLeftIn 1.55s cubic-bezier(.16, 1, .22, 1) both
}

.heroShowcase[data-revealed=true] .logoCosmos__headline--right {
    animation: logoHeadlineRightIn 1.55s .18s cubic-bezier(.16, 1, .22, 1) both
}

.heroShowcase[data-revealed=true] .logoStar {
    animation: logoStarArrive 1.45s var(--intro-delay) cubic-bezier(.16, 1, .22, 1) both
}

.heroShowcase[data-revealed=true] .logoStar__halo {
    animation: logoHaloBloom 1.65s var(--intro-delay) cubic-bezier(.16, 1, .22, 1) both
}

.logoStar--chatgpt .logoStar__inner,
.logoStar--youtube .logoStar__inner,
.logoStar--netflix .logoStar__inner {
    background: #000000ad
}

.logoStar--chatgpt img {
    width: var(--logo-icon-size);
    height: var(--logo-icon-size);
    border-radius: 10px;
    object-fit: cover
}

.logoStar--gemini .logoStar__inner {
    background: #ffffffeb
}

.logoStar--sora .logoStar__inner,
.logoStar--discord .logoStar__inner,
.logoStar--telegram .logoStar__inner {
    border-radius: 22px
}

.logoCosmos__caption {
    position: absolute;
    left: 50%;
    top: 53%;
    width: min(260px, 52vw);
    display: grid;
    gap: 7px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none
}

.logoCosmos__caption span {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff6b
}

.logoCosmos__caption strong {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.05;
    color: #ffffffdb
}

@keyframes logoFloat {
    0% {
        transform: translate3d(calc(var(--float-x) * -.45), calc(var(--float-y) * -.45), 0) rotate(-2deg)
    }

    to {
        transform: translate3d(var(--float-x), var(--float-y), 0) rotate(2deg)
    }
}

@keyframes logoCosmosIgnition {
    0% {
        opacity: 0;
        filter: blur(42px);
        transform: scale(.42)
    }

    32% {
        opacity: .92
    }

    68% {
        opacity: .28;
        filter: blur(30px);
        transform: scale(1.04)
    }

    to {
        opacity: 0;
        filter: blur(40px);
        transform: scale(1.16)
    }
}

@keyframes logoMistBloom {
    0% {
        opacity: 0;
        filter: blur(70px);
        transform: scale(.74)
    }

    55% {
        opacity: .52
    }

    to {
        opacity: .34;
        filter: blur(54px);
        transform: scale(1)
    }
}

@keyframes logoHeadlineLeftIn {
    0% {
        opacity: 0;
        filter: blur(22px);
        transform: translate3d(-34px, -42%, 0) scale(.96)
    }

    56% {
        opacity: .86;
        filter: blur(4px)
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-50%) scale(1)
    }
}

@keyframes logoHeadlineRightIn {
    0% {
        opacity: 0;
        filter: blur(22px);
        transform: translate3d(34px, -42%, 0) scale(.96)
    }

    56% {
        opacity: .82;
        filter: blur(4px)
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-50%) scale(1)
    }
}

@keyframes logoStarArrive {
    0% {
        opacity: 0;
        filter: blur(18px) saturate(.74);
        transform: translate3d(calc(-50% + var(--intro-x)), calc(-50% + var(--intro-y) + var(--scroll-y, 0px)), 0) scale(.42) rotate(var(--intro-rotate))
    }

    54% {
        opacity: 1;
        filter: blur(0) saturate(1.14)
    }

    74% {
        transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0) scale(1.08) rotate(0)
    }

    to {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0) scale(1) rotate(0)
    }
}

@keyframes logoHaloBloom {
    0% {
        opacity: 0;
        filter: blur(28px);
        transform: scale(.32)
    }

    58% {
        opacity: .5;
        filter: blur(16px)
    }

    to {
        opacity: .22;
        filter: blur(12px);
        transform: scale(1)
    }
}

@keyframes logoSparkPulse {
    0% {
        opacity: .28;
        transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0) scale(.82)
    }

    to {
        opacity: .82;
        transform: translate3d(-50%, calc(-50% + var(--scroll-y, 0px)), 0) scale(1.18)
    }
}

@media(max-width:760px) {
    .logoCosmos {
        width: min(560px, 100vw - 20px);
        height: clamp(280px, 70vw, 380px)
    }

    .logoCosmos__headline {
        max-width: 72vw;
        font-size: clamp(30px, 9vw, 44px)
    }

    .logoCosmos__headline--left {
        left: 6%;
        top: 32%
    }

    .logoCosmos__headline--right {
        right: 7%;
        top: 62%
    }

    .logoStar {
        width: calc(var(--w) * .78);
        height: calc(var(--h) * .78);
        --logo-icon-size: 30px
    }

    .logoStar--telegram,
    .logoStar--youtube,
    .logoStar--netflix,
    .logoStar--sora,
    .logoStar--discord {
        display: none
    }

    .logoStar__inner {
        padding: 9px;
        border-radius: 15px
    }

    .logoCosmos__caption {
        width: min(220px, 58vw)
    }

    .logoCosmos__caption strong {
        font-size: 18px
    }
}

.hero {
    min-height: calc(100svh - var(--landing-header-offset));
    padding: clamp(18px, 4vh, 44px) 0 clamp(70px, 10vh, 118px) !important;
    display: grid;
    align-items: center
}

.heroShowcase.heroShowcase--screens {
    margin: 0 calc(50% - 50vw) !important
}

.logoCosmos {
    width: min(1180px, 100vw - 48px);
    height: clamp(520px, 64vh, 720px)
}

.logoCosmos__headlineGroup {
    margin: 0
}

.logoCosmos__headline {
    z-index: 3;
    max-width: min(540px, 46vw);
    font-size: clamp(52px, 5.8vw, 92px);
    line-height: .95;
    color: #ffffffe0
}

.logoCosmos__headline--left {
    left: 7%;
    top: 47%
}

.logoCosmos__headline--right {
    right: 7%;
    top: 57%;
    color: #ffffffbd
}

@media(max-width:760px) {
    .hero {
        min-height: calc(100svh - var(--landing-header-offset));
        padding: clamp(86px, 24vw, 110px) 0 72px !important;
        align-items: start
    }

    .heroShowcase.heroShowcase--screens {
        width: 100vw !important;
        margin: 0 calc(50% - 50vw) !important
    }

    .logoCosmos {
        width: 100vw;
        max-width: none;
        height: clamp(430px, 112vw, 560px);
        margin: 0
    }

    .logoCosmos__headline {
        max-width: 82vw;
        font-size: clamp(36px, 11vw, 54px)
    }

    .logoCosmos__headline--left {
        left: 5%;
        top: 38%
    }

    .logoCosmos__headline--right {
        right: 6%;
        top: 61%
    }
}

.hero {
    position: relative
}

.logoCosmos__brand {
    position: absolute;
    left: 50%;
    top: 49%;
    z-index: 1;
    width: min(1040px, 100vw - 52px);
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-align: center
}

.logoCosmos__brand span {
    display: block;
    font-size: 146px;
    font-weight: 500;
    line-height: .9;
    letter-spacing: 0;
    color: #ffffff1f;
    text-shadow: 0 0 46px rgba(88, 154, 255, .32), 0 28px 96px rgba(0, 0, 0, .5);
    white-space: nowrap
}

.logoStar {
    z-index: 4
}

.logoStar--gemini .logoStar__inner {
    overflow: visible;
    padding: 12px;
    border-radius: 22px;
    border-color: #7bb5ff2e;
    background: #0a101cc2;
    box-shadow: 0 18px 48px #1a81ff2e, inset 0 1px #ffffff1a
}

.logoStar--gemini img {
    width: var(--logo-icon-size);
    height: var(--logo-icon-size);
    max-width: var(--logo-icon-size);
    max-height: var(--logo-icon-size);
    object-fit: contain;
    transform: none
}

.logoStar--roblox .logoStar__inner {
    overflow: hidden;
    border-radius: 18px
}

.logoStar--roblox img {
    width: var(--logo-icon-size);
    height: var(--logo-icon-size);
    border-radius: inherit;
    object-fit: contain
}

.heroScrollCue {
    position: absolute;
    left: clamp(32px, 7vw, 92px);
    bottom: clamp(26px, 4vh, 46px);
    z-index: 8;
    width: 28px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #ffffffd1;
    background: transparent;
    cursor: pointer;
    transition: color .18s ease
}

.heroScrollCue:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    display: block;
    width: 1px;
    height: 25px;
    background: currentColor;
    transform: translate(-50%)
}

.heroScrollCue:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 28px;
    width: 12px;
    height: 12px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: translate(-50%) rotate(45deg);
    transform-origin: center
}

.heroScrollCue:hover {
    color: #fffffff5
}

.mainHero .mainHero__scroll {
    left: 50%;
    bottom: clamp(26px, 5vh, 48px);
    transform: translate(-50%)
}

@media(max-width:980px) {
    .logoCosmos__brand span {
        font-size: 112px
    }
}

@media(max-width:760px) {
    .logoCosmos__brand {
        top: 52%;
        width: calc(100vw - 20px)
    }

    .logoCosmos__brand span {
        font-size: 58px;
        color: #ffffff24;
        white-space: normal
    }

    .logoStar--gemini img {
        width: var(--logo-icon-size);
        height: var(--logo-icon-size);
        transform: none
    }

    .heroScrollCue {
        left: 30px;
        bottom: 34px
    }

    .mainHero .mainHero__scroll {
        left: 50%;
        bottom: 28px
    }
}

@media(min-width:981px) {

    .landing,
    .landing__main,
    .landing__shell,
    .accountShowcase,
    .accountShowcase__sticky,
    .accountShowcase__stage {
        overflow: visible
    }

    .accountShowcase {
        display: block;
        width: min(1500px, 100vw - 96px);
        max-width: none;
        height: auto;
        min-height: auto;
        margin: 0 auto;
        padding: 82px 0 24px
    }

    .accountShowcase__sticky {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: clamp(230px, 22vw, 320px) minmax(860px, 1fr);
        gap: clamp(28px, 4vw, 54px);
        align-items: start;
        min-height: 0;
        padding: 0
    }

    .accountShowcase__copy {
        position: sticky;
        top: calc(var(--landing-header-offset) + 54px);
        align-self: start;
        z-index: 4
    }

    .accountShowcase__stage {
        position: relative;
        display: grid;
        gap: clamp(48px, 5.5vw, 84px);
        min-height: 0
    }
}


.app-footer {
    margin-top: 64px;
    padding: 20px 0 28px
}

.app-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 50px;
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .08);
    border-right: 0;
    border-left: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.app-footer__copyright {
    font-size: 11px;
    color: #ffffff7a
}

.app-footer__mobileBrand,
.app-footer__columns,
.app-footer__badges,
.app-footer__summary {
    display: none
}

.app-footer__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.app-footer__links a {
    text-decoration: none;
    font-size: 11px;
    color: #ffffff85;
    transition: color .2s ease, opacity .2s ease
}

.app-footer__links a:hover {
    color: #ffffffeb
}

@media(max-width:980px) {
    .app-footer {
        max-width: min(100%, 640px);
        margin: 42px auto 0;
        padding: 0 0 32px
    }

    .app-footer__inner {
        width: 100%;
        max-width: 100%;
        padding: 34px 20px 28px;
        display: grid;
        gap: 28px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 0;
        background: #000
    }

    .app-footer__mobileBrand {
        display: flex;
        align-items: center
    }

    .app-footer__logo {
        width: 31px;
        height: auto;
        display: block;
        color: #fff
    }

    .app-footer__columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px
    }

    .app-footer__column {
        display: grid;
        align-content: start;
        gap: 17px
    }

    .app-footer__column a {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: #ffffff9e;
        font-size: 16px;
        font-weight: 760;
        line-height: 1
    }

    .app-footer__column a span {
        padding: 2px 4px;
        border-radius: 3px;
        background: #ffffffeb;
        color: #000;
        font-size: 8px;
        font-weight: 900
    }

    .app-footer__column a:nth-child(1),
    .app-footer__column a:nth-child(3) {
        color: #ffffffe6
    }

    .app-footer__links {
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .11);
        justify-content: center;
        gap: 13px 16px
    }

    .app-footer__links a {
        font-size: 11px;
        font-weight: 650;
        color: #ffffff80
    }

    .app-footer__badges {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 9px
    }

    .app-footer__badges span {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .18);
        color: #ffffff94;
        font-size: 9px;
        font-weight: 900
    }

    .app-footer__summary {
        display: grid;
        justify-items: center;
        gap: 10px;
        text-align: center;
        color: #ffffff8a
    }

    .app-footer__summary span {
        font-size: 12px;
        font-weight: 850
    }

    .app-footer__summary p {
        max-width: 260px;
        margin: 0;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.35
    }

    .app-footer__copyright {
        margin: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 750;
        color: #ffffff85
    }
}

@media(max-width:560px) {
    .app-footer {
        max-width: min(100%, 430px)
    }
}

.legal-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(60% 45% at 15% 12%, rgba(255, 255, 255, .12), transparent 65%), radial-gradient(50% 42% at 84% 18%, rgba(120, 85, 255, .18), transparent 68%), radial-gradient(44% 34% at 48% 74%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(180deg, #07070b, #0a0b12);
    color: #ffffffe6
}

.legal-page__glow {
    position: absolute;
    inset: auto;
    width: 460px;
    height: 460px;
    border-radius: 999px;
    filter: blur(120px);
    opacity: .35;
    pointer-events: none
}

.legal-page__glow--left {
    top: 110px;
    left: -140px;
    background: #ffffff29
}

.legal-page__glow--right {
    right: -130px;
    top: 260px;
    background: #7855ff33
}

.legal-page__header {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 26px 0 0;
    background: linear-gradient(180deg, #07070bb8, #07070b00);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
}

.legal-page__headerInner {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px
}

.legal-page__headerInner>* {
    min-width: 0
}

.legal-page__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: #fffffff2
}

.legal-page__brandLogo {
    width: 48px;
    height: auto;
    display: block
}

.legal-page__brandText {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    white-space: nowrap
}

.legal-page__nav {
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 10px;
    padding: 6px;
    border-radius: 999px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px #ffffff0a
}

.legal-page__navLink {
    min-width: 0;
    max-width: 100%;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff8f;
    transition: color .2s ease, background .2s ease, transform .2s ease
}

.legal-page__navLink:hover {
    color: #ffffffe0;
    background: #ffffff0d;
    transform: translateY(-1px)
}

.legal-page__navLink--active {
    color: #11131b;
    background: #ffffffeb;
    box-shadow: 0 10px 24px #0000002e
}

.legal-page__loginLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #ffffff0a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #ffffffe0;
    transition: transform .2s ease, background .2s ease, border-color .2s ease
}

.legal-page__loginLink:hover {
    transform: translateY(-1px);
    background: #ffffff12;
    border-color: #ffffff24
}

.legal-page__main {
    width: 100%;
    position: relative;
    z-index: 1;
    padding-top: 46px
}

.legal-page__shell {
    width: 100%;
    min-width: 0
}

.legal-page__shell>* {
    width: 100%;
    min-width: 0
}

.legal-page__hero,
.legal-page__summaryCard,
.legal-page__section {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #ffffff0b;
    box-shadow: 0 22px 80px #00000047, inset 0 1px #ffffff0d;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px)
}

.legal-page__hero {
    padding: 42px
}

.legal-page__eyebrow,
.legal-page__summaryLabel {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff0f;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #ffffff9e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.legal-page__title {
    margin: 22px 0 0;
    max-width: 760px;
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 700;
    color: #fffffff5;
    overflow-wrap: anywhere
}

.legal-page__subtitle {
    margin: 18px 0 0;
    max-width: 780px;
    font-size: 16px;
    line-height: 1.75;
    color: #ffffff94;
    overflow-wrap: anywhere
}

.legal-page__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.legal-page__action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #ffffff0a;
    color: #ffffffe6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease
}

.legal-page__action:hover {
    transform: translateY(-1px);
    background: #ffffff14;
    border-color: #ffffff29
}

.legal-page__action--primary {
    background: #ffffffeb;
    border-color: #ffffffeb;
    color: #0f1119
}

.legal-page__action--primary:hover {
    background: #fff;
    border-color: #fff
}

.legal-page__meta {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.legal-page__metaCard {
    min-width: 0;
    padding: 18px 20px;
    border-radius: 22px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.legal-page__metaCard strong,
.legal-page__metaCard a {
    color: #ffffffeb;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word
}

.legal-page__metaLabel,
.legal-page__identityGrid span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #ffffff70;
    text-transform: uppercase
}

.legal-page__summary {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 20px
}

.legal-page__summaryCard {
    min-width: 0;
    padding: 30px 32px
}

.legal-page__summaryCard p {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.75;
    color: #ffffffa8
}

.legal-page__summaryCard--operator {
    background: linear-gradient(180deg, #7855ff14, #ffffff0a), #ffffff0b
}

.legal-page__identityGrid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.legal-page__identityGrid div {
    min-width: 0;
    padding: 16px 18px;
    border-radius: 20px;
    background: #ffffff0a;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    gap: 9px
}

.legal-page__identityGrid strong,
.legal-page__identityGrid a {
    color: #ffffffeb;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word
}

.legal-page__content {
    margin-top: 24px;
    display: grid;
    gap: 18px
}

.legal-page__section {
    min-width: 0;
    padding: 30px 32px 32px
}

.legal-page__sectionHeader {
    display: flex;
    align-items: center;
    gap: 16px
}

.legal-page__sectionHeader h2 {
    margin: 0;
    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 650;
    color: #fffffff0;
    overflow-wrap: anywhere
}

.legal-page__sectionIndex {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff14;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 14px;
    font-weight: 700;
    color: #ffffffd1
}

.legal-page__sectionBody {
    margin-top: 20px
}

.legal-page__sectionBody p {
    margin: 0;
    font-size: 15px;
    line-height: 1.78;
    color: #ffffffa8;
    overflow-wrap: anywhere
}

.legal-page__sectionBody p+p,
.legal-page__sectionBody p+ul,
.legal-page__sectionBody ul+p {
    margin-top: 14px
}

.legal-page__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.legal-page__list li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #ffffffa8;
    overflow-wrap: anywhere
}

.legal-page__list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #ffffff57
}

.legal-page--pdf {
    background: #fff;
    color: #10131a
}

.legal-page--pdf .legal-page__glow,
.legal-page--pdf .legal-page__header,
.legal-page--pdf .legal-page__actions {
    display: none
}

.legal-page--pdf .legal-page__main {
    padding-top: 0
}

.legal-page--pdf .legal-page__hero,
.legal-page--pdf .legal-page__summaryCard,
.legal-page--pdf .legal-page__section {
    border: 1px solid rgba(16, 19, 26, .08);
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.legal-page--pdf .legal-page__hero {
    margin-top: 0
}

.legal-page--pdf .legal-page__eyebrow,
.legal-page--pdf .legal-page__summaryLabel,
.legal-page--pdf .legal-page__sectionIndex {
    border-color: #10131a1a;
    background: #10131a0a;
    color: #10131a8c
}

.legal-page--pdf .legal-page__title,
.legal-page--pdf .legal-page__sectionHeader h2,
.legal-page--pdf .legal-page__metaCard strong,
.legal-page--pdf .legal-page__metaCard a,
.legal-page--pdf .legal-page__identityGrid strong,
.legal-page--pdf .legal-page__identityGrid a {
    color: #10131a
}

.legal-page--pdf .legal-page__subtitle,
.legal-page--pdf .legal-page__summaryCard p,
.legal-page--pdf .legal-page__sectionBody p,
.legal-page--pdf .legal-page__list li {
    color: #10131ac7
}

.legal-page--pdf .legal-page__metaLabel,
.legal-page--pdf .legal-page__identityGrid span {
    color: #10131a7a
}

.legal-page--pdf .legal-page__metaCard,
.legal-page--pdf .legal-page__identityGrid div {
    background: #10131a05;
    border-color: #10131a14
}

.legal-page--pdf .legal-page__summaryCard--operator {
    background: #10131a05
}

.legal-page--pdf .legal-page__list li:before {
    background: #10131a59
}

@media print {
    @page {
        size: A4;
        margin: 12mm
    }

    .legal-page {
        background: #fff;
        color: #10131a
    }

    .legal-page__glow,
    .legal-page__header,
    .app-footer {
        display: none !important
    }

    .legal-page__main {
        padding-top: 0 !important
    }

    .legal-page__hero,
    .legal-page__summaryCard,
    .legal-page__section {
        border: 1px solid rgba(16, 19, 26, .08);
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid
    }
}

@media(max-width:1080px) {
    .legal-page__headerInner {
        flex-wrap: wrap
    }

    .legal-page__nav {
        order: 3;
        width: 100%;
        justify-content: center
    }

    .legal-page__loginLink {
        margin-left: auto
    }

    .legal-page__meta,
    .legal-page__summary,
    .legal-page__identityGrid {
        grid-template-columns: 1fr
    }
}

@media(max-width:720px) {
    .legal-page__header {
        padding-top: 18px
    }

    .legal-page__headerInner {
        align-items: stretch
    }

    .legal-page__hero,
    .legal-page__summaryCard,
    .legal-page__section {
        border-radius: 24px
    }

    .legal-page__hero {
        padding: 28px 22px
    }

    .legal-page__summaryCard,
    .legal-page__section {
        padding: 24px 22px
    }

    .legal-page__brandText {
        font-size: 18px
    }

    .legal-page__brandLogo {
        width: 42px
    }

    .legal-page__nav {
        flex-wrap: wrap;
        border-radius: 22px;
        max-width: 100%
    }

    .legal-page__actions {
        flex-direction: column
    }

    .legal-page__brand,
    .legal-page__navLink,
    .legal-page__loginLink,
    .legal-page__action {
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .legal-page__sectionHeader {
        align-items: flex-start
    }

    .legal-page__title,
    .legal-page__subtitle {
        max-width: 100%
    }
}

@media (min-width: 1081px) {
    .legal-page__headerInner {
        position: relative;
        justify-content: space-between;
    }

    .legal-page__nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    .legal-page__loginLink {
        margin-left: auto;
    }
}