.tag {
    margin-bottom: var(--space-20);
    padding: var(--space-10);
    width: fit-content;
    max-width: 100%;
    color: var(--primary-text-secondary);
    background-color: var(--background-surface);
    border: 1px solid var(--primary-text-secondary-40);
    border-radius: var(--radius-s);
}

img {
    pointer-events: none;
}

.hero-pills {
    display: flex;
    gap: var(--space-12);
    justify-content: center;
}

.hero-pill {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-10) var(--space-16);
    border: 1px solid var(--primary-text-secondary-30);
    border-radius: var(--radius-full);
    text-align: center;
    transition: border-color var(--transition-fast);
}

.hero-pill-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--primary-main);
    border-radius: var(--radius-full);
}

.hero-pill-icon .icon {
    width: 12px;
    height: 12px;
    color: var(--text-inverted);
}

.hero-pill .body-m {
    color: var(--primary-text-secondary);
}

#advantages {
    padding: var(--space-80) var(--space-0);
}

#advantages button {
    margin-top: var(--space-20);
}

#advantages .advantages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}

#advantages .advantage {
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    width: 100%;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

#advantages .advantage .body-l {
    margin: var(--space-10) var(--space-0) var(--space-20) var(--space-0);
    color: var(--primary-text-secondary);
}

#advantages .advantage .brief {
    margin-top: var(--space-auto);
    padding: var(--space-10);
    background: var(--primary-main-10);
    border-radius: var(--radius-s);
}

#advantages .advantage .brief span {
    color: var(--primary-main-hover);
}

#advantages .accordion .accordion-content .brief {
    margin-top: var(--space-12);
    padding: var(--space-10);
    background: var(--primary-main-10);
    border-radius: var(--radius-s);
}

#advantages .accordion .accordion-content .brief span {
    color: var(--primary-main-hover);
}

a {
    text-decoration: none;
}

a[x-apple-data-detectors],
a[x-apple-data-detectors-type="telephone"] {
    color: inherit !important;
    text-decoration: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.form .text-highlight {
    color: var(--primary-main-80);
    transition: color var(--transition-fast);
}

#auth-popup {
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth), background var(--transition-smooth);
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--space-40) var(--space-50) var(--space-80);
    min-height: calc(100vh - 120px);
}

.auth-page .back-link {
    display: inline-flex;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-40);
    text-decoration: none;
    color: var(--primary-text-secondary);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.auth-page .back-link .icon {
    transform: rotate(90deg);
    transition: background-color var(--transition-fast);
}

.auth-page #auth-popup {
    display: flex;
    justify-content: center;
    width: 100%;
}

.auth-page #auth-popup .pop-up-content {
    background: var(--popup-surface-bg);
    border: var(--popup-surface-border);
    opacity: 1;
    box-shadow: var(--popup-surface-shadow);
    transform: none;
}

#auth-popup .pop-up-content {
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    width: 754px;
    min-height: 0;
    transition: transform var(--transition-slow), opacity var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth), height var(--duration-instant) var(--ease-out);
    will-change: height;
}

#auth-popup>.pop-up-content>.auth-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#auth-popup .auth-state.active {
    flex: 1;
}

#auth-popup .auth-state>.auth-content {
    flex: 1;
}

#auth-popup .form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#auth-popup .form button[type="submit"] {
    margin-top: var(--space-auto);
    transition: background var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-fast);
}

.form .remember-me {
    position: relative;
    display: flex;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-20);
    cursor: pointer;
}

#auth-popup .footer-links {
    display: flex;
    justify-content: space-between;
}

.form .remember-me span {
    color: var(--primary-text-secondary);
    transition: color var(--transition-fast);
}

#auth-popup .forgot-password,
#auth-popup .back-to-login {
    color: var(--primary-main);
    text-decoration: none;
    transition: color var(--transition-smooth), background-size var(--transition-fast), background-image var(--transition-smooth);
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    height: max-content;
}

#auth-popup .back-to-login {
    display: inline-flex;
    gap: var(--space-5);
    align-items: center;
}

#auth-popup .auth-switch {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;
}

#auth-popup .auth-switch span {
    color: var(--primary-text-secondary);
    transition: color var(--transition-smooth);
}

#auth-popup .auth-switch a {
    color: var(--primary-main);
    text-decoration: none;
    transition: color var(--transition-smooth), background-size var(--transition-fast), background-image var(--transition-smooth);
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

#auth-popup .auth-state {
    display: none;
    gap: var(--space-16);
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
}

#auth-popup .auth-state.active {
    display: flex;
    opacity: 1;
    transform: none;
    animation: authStateFadeIn var(--duration-instant) var(--ease-out) forwards;
}

@keyframes authStateFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

#auth-popup .auth-state.active .auth-header,
#auth-popup .auth-state.active .form,
#auth-popup .auth-state.active img {
    animation: authStateItem var(--duration-instant) var(--ease-out) both;
}

@keyframes authStateItem {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#auth-popup .auth-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    width: 100%;
    flex: 1;
}

#auth-popup .auth-loading-state {
    display: none;
    gap: var(--space-16);
    width: 100%;
}

#auth-popup.is-loading .auth-loading-state {
    display: flex;
}

#auth-popup.is-loading .auth-state {
    display: none !important;
}

#auth-popup .auth-loading-panel {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

#auth-popup .auth-loading-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

#auth-popup .auth-loading-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

#auth-popup .auth-loading-field,
#auth-popup .auth-loading-button,
#auth-popup .auth-loading-visual-block {
    display: block;
    border-radius: var(--radius-l);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

#auth-popup .auth-loading-field {
    width: 100%;
    height: 64px;
}

#auth-popup .auth-loading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
    justify-content: space-between;
}

#auth-popup .auth-loading-button {
    margin-top: var(--space-8);
    width: 100%;
    height: 56px;
}

#auth-popup .auth-loading-visual {
    display: flex;
    flex-shrink: 0;
    width: 248px;
}

#auth-popup .auth-loading-visual-block {
    width: 100%;
    min-height: 420px;
    border-radius: var(--radius-xl);
}

#auth-popup.is-loading {
    pointer-events: none;
}

@media (max-width: 1024px) {
    #auth-popup .auth-loading-state {
        flex-direction: column;
    }

    #auth-popup .auth-loading-visual {
        width: 100%;
    }

    #auth-popup .auth-loading-visual-block {
        min-height: 280px;
    }
}

@media (max-width: 480px) {
    #auth-popup .auth-loading-panel {
        gap: var(--space-20);
    }

    #auth-popup .auth-loading-field {
        height: 60px;
    }

    #auth-popup .auth-loading-button {
        height: 52px;
    }

    #auth-popup .auth-loading-visual-block {
        min-height: 220px;
    }
}

#auth-popup .form input:not([type="checkbox"]),
#auth-popup .form .custom-select__trigger,
#auth-popup .form textarea {
    transition: background var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

#auth-popup .form .floating-input label {
    color: var(--primary-text-muted);
    transition: all var(--transition-fast), color var(--transition-smooth);
}

#auth-popup .floating-input input:focus~label,
#auth-popup .floating-input select:focus~label,
#auth-popup .floating-input textarea:focus~label {
    color: var(--primary-main);
}

#auth-popup .floating-input input:focus::placeholder,
#auth-popup .floating-input textarea:focus::placeholder {
    color: var(--primary-text-muted);
}

#auth-popup img {
    display: block;
    width: 25%;
    height: auto;
    object-fit: contain;
}

#auth-popup .auth-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    text-align: center;
}

#auth-popup .auth-title {
    color: var(--primary-main);
    transition: color var(--transition-smooth);
}

#auth-popup .auth-subtitle {
    color: var(--primary-text-secondary);
    transition: color var(--transition-smooth);
}

#auth-popup .form {
    padding: var(--space-0);
    width: 100%;
    background: none;
}

#auth-popup .back-button {
    position: absolute;
    left: var(--space-0);
    top: var(--space-20);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary-main-10);
    color: var(--primary-main);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.form .floating-input.has-toggle input {
    padding-right: var(--space-50);
}

.form .password-toggle {
    position: absolute;
    right: var(--space-15);
    top: var(--space-34);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--primary-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    transition: color var(--transition-fast);
    z-index: 2;
}

.form .password-toggle::before {
    content: none;
}

.form .password-toggle.active {
    color: var(--primary-main);
}

.form .password-toggle .icon {
    transition: transform var(--transition-fast);
}

#auth-popup .auth-header {
    position: relative;
}

#auth-popup .floating-input.has-toggle input {
    padding-right: var(--space-50);
}

#auth-popup .password-toggle {
    position: absolute;
    right: var(--space-15);
    top: var(--space-34);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--primary-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    overflow: hidden;
    isolation: isolate;
    transition: color var(--transition-fast), transform var(--transition-fast);
    z-index: 2;
}

#auth-popup .password-toggle::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: '';
    background: linear-gradient(180deg, var(--primary-main-10), var(--primary-main-15));
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity var(--training-transition-fast), transform var(--training-transition-fast), background var(--training-transition-fast);
}

#auth-popup .password-toggle.active {
    color: var(--primary-main);
    background: transparent;
}

#auth-popup .password-toggle.active::before {
    opacity: 1;
    transform: scale(1);
}

#auth-popup .password-toggle .icon {
    position: relative;
    z-index: 1;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

#auth-popup .password-strength {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    overflow: hidden;
    margin-top: var(--space-0);
    height: 0;
    opacity: 0;
    transition: all var(--transition-fast);
}

#auth-popup .password-strength.visible {
    margin-top: var(--space-8);
    height: auto;
    opacity: 1;
}

#auth-popup .floating-input .password-strength+.error-toast {
    margin-top: var(--space-3);
}

#auth-popup .strength-bar {
    display: flex;
    flex: 1;
    gap: var(--space-4);
}

#auth-popup .strength-bar span {
    flex: 1;
    height: 4px;
    background: var(--primary-text-main-10);
    border-radius: 2px;
    transition: background var(--transition-fast);
}

#auth-popup .password-strength.weak .strength-bar span:nth-child(1) {
    background: var(--red-main);
}

#auth-popup .password-strength.medium .strength-bar span:nth-child(1),
#auth-popup .password-strength.medium .strength-bar span:nth-child(2) {
    background: var(--orange-main);
}

#auth-popup .password-strength.good .strength-bar span:nth-child(1),
#auth-popup .password-strength.good .strength-bar span:nth-child(2),
#auth-popup .password-strength.good .strength-bar span:nth-child(3) {
    background: var(--yellow-main);
}

#auth-popup .password-strength.strong .strength-bar span {
    background: var(--green-main);
}

#auth-popup .strength-text {
    min-width: 80px;
    color: var(--primary-text-muted);
    transition: color var(--transition-fast);
}

#auth-popup .password-strength.weak .strength-text {
    color: var(--red-main);
}

#auth-popup .password-strength.medium .strength-text {
    color: var(--orange-main);
}

#auth-popup .password-strength.good .strength-text {
    color: var(--yellow-text-main);
}

#auth-popup .password-strength.strong .strength-text {
    color: var(--green-main);
}

#auth-popup .input-hint {
    overflow: hidden;
    margin-top: var(--space-0);
    height: 0;
    color: var(--primary-text-muted);
    opacity: 0;
    transition: all var(--transition-fast);
}

#auth-popup .floating-input:focus-within .input-hint {
    margin-top: var(--space-4);
    height: auto;
    opacity: 1;
}

#auth-popup .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-0) var(--space-auto) var(--space-16);
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
}

#auth-popup .status-icon .icon {
    width: 32px;
    height: 32px;
}

#auth-popup .status-icon.success {
    color: var(--primary-main);
    background: var(--primary-main-15);
}

#auth-popup .status-icon.warning {
    color: var(--orange-main);
    background: var(--orange-main-15);
}

#auth-popup .status-icon.animated {
    animation: statusIconPop 0.5s var(--ease-bounce);
}

@keyframes statusIconPop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

#auth-popup .form-error {
    display: none;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-5);
    padding: var(--space-12) var(--space-16);
    background: var(--red-main-10);
    border: 1px solid var(--red-main-25);
    border-radius: var(--radius-m);
}

#auth-popup .form-error.visible {
    display: flex;
    animation: formErrorSlide 0.3s var(--ease-bounce);
}

@keyframes formErrorSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#auth-popup .form-error .icon {
    flex-shrink: 0;
    color: var(--red-main);
}

#auth-popup .form-error .error-message {
    color: var(--red-text-main);
}

#auth-popup .code-inputs {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    margin: var(--space-20) var(--space-0);
}

#auth-popup .code-input {
    width: 52px;
    height: 50px;
    text-align: center;
    border: 1px solid var(--primary-text-main-5);
    border-radius: var(--radius-m);
    background: var(--primary-main-5);
    color: var(--primary-text-main);
    -webkit-text-fill-color: var(--primary-text-main);
    font-variant-numeric: tabular-nums;
    transition: all var(--transition-fast);
    font-size: var(--font-size-24);
    line-height: 50px;
    padding: var(--space-0);
    caret-color: var(--primary-main);
}

#auth-popup .code-input:focus {
    border-color: var(--primary-main);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-main-15);
}

#auth-popup .code-input.filled {
    background: var(--green-main-5);
    border-color: var(--green-main);
}

#auth-popup .code-input.error {
    background: var(--red-main-5);
    border-color: var(--red-main);
    animation: shake 0.4s var(--ease-bounce);
}

#auth-popup .code-error {
    justify-content: center;
    margin-top: var(--space-12);
}

#auth-popup .email-info {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-4);
}

#auth-popup .email-highlight {
    color: var(--primary-main);
}

#auth-popup #email-confirm-state .auth-subtitle {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: center;
}

#auth-popup .change-email-link {
    padding: var(--space-4) var(--space-8);
    text-decoration: none;
    color: var(--primary-text-secondary);
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}

#auth-popup .resend-section {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-10);
}

#auth-popup .resend-section span {
    color: var(--primary-text-secondary);
}

#auth-popup .resend-link {
    color: var(--primary-main);
    text-decoration: none;
    transition: color var(--transition-smooth), background-size var(--transition-fast), background-image var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

#auth-popup .resend-link.disabled {
    color: var(--primary-text-muted);
    pointer-events: none;
}

#auth-popup .resend-link .resend-timer {
    opacity: 1;
    transition: opacity var(--transition-fast);
}

#auth-popup .resend-link .resend-timer::before {
    content: '(';
}

#auth-popup .resend-link .resend-timer::after {
    content: ')';
}

#auth-popup .resend-link:not(.disabled) .resend-timer {
    display: none;
}

#email-sent-state .form.recovery-actions {
    flex: 0 0 auto;
    align-items: center;
    margin-top: var(--space-auto);
}

#email-sent-state .resend-link {
    justify-content: center;
    width: max-content;
    text-align: center;
}

#auth-popup .success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    align-items: center;
    padding: var(--space-0);
    background: none;
}

#auth-popup .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--white-30);
    border-top-color: var(--white-95);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#burger-menu .buttons {
    margin-bottom: var(--space-20);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#auth-popup .btn-loading {
    display: none;
    gap: var(--space-8);
    align-items: center;
}

#auth-popup button.loading .btn-text,
#auth-popup button.loading .icon:not(.spinner) {
    display: none;
}

#auth-popup button.loading .btn-loading {
    display: flex;
}

#auth-popup button.loading {
    opacity: 0.9;
    pointer-events: none;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-20);
    width: 562px;
    background: var(--background-surface);
    border-radius: var(--radius-m);
}

.form input:not([type="checkbox"]) {
    padding: var(--space-15) var(--space-20);
    width: 100%;
    background: var(--background-input);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
}

.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form input[type="tel"]::placeholder {
    color: var(--primary-text-muted);
}

.form .double-input-60-40 {
    display: flex;
    gap: var(--space-10);
    width: 100%;
}

.form .double-input-60-40 input:first-child {
    width: 60%;
}

.form .double-input-60-40 input:last-child {
    width: 40%;
}

.form .accept {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: var(--space-10) var(--space-0);
}

.form .accept .agreement-text {
    color: var(--primary-text-secondary);
    transition: color var(--transition-fast);
}

.form .accept a.text-highlight {
    text-decoration: none;
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size var(--transition-fast);
}

.form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-main);
    background-color: var(--primary-main-10);
}

.form .floating-input {
    position: relative;
    width: 100%;
}

.form .floating-input input {
    padding: var(--space-17) var(--space-20);
    width: 100%;
    height: 68px;
    color: var(--primary-text-main);
    background: var(--background-input);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), padding var(--transition-smooth), background-color var(--transition-smooth);
}

.form .floating-input textarea {
    padding: var(--space-17) var(--space-20);
    width: 100%;
    color: var(--primary-text-main);
    background: var(--background-input);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), padding var(--transition-smooth), background-color var(--transition-smooth);
}

.form .floating-input select {
    padding: var(--space-17) var(--space-40) var(--space-17) var(--space-20);
    width: 100%;
    color: var(--primary-text-main);
    background: var(--background-input);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), padding var(--transition-smooth), background-color var(--transition-smooth);
}

.form .floating-input input:focus,
.form .floating-input input:not(:placeholder-shown) {
    padding: var(--space-24) var(--space-20) var(--space-10) var(--space-20);
}

body.demo-layout {
    background: var(--background-surface);
}

.form .floating-input select:focus,
.form .floating-input select.has-value {
    padding: var(--space-24) var(--space-40) var(--space-10) var(--space-20);
}

.form .floating-input input::placeholder,
.form .floating-input textarea::placeholder {
    color: transparent;
    transition: color var(--transition-fast);
}

.form .floating-input label {
    position: absolute;
    left: var(--space-20);
    top: var(--space-22);
    transform: translateY(0);
    font-size: var(--font-size-18);
    font-weight: 400;
    line-height: 150%;
    color: var(--primary-text-muted);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.form .floating-input label .required-mark,
.form .custom-select label .required-mark {
    display: inline;
    margin-left: var(--space-2);
    color: var(--red-main);
    font-size: inherit;
    line-height: inherit;
    transition: color var(--transition-fast);
}

.form .floating-input.textarea-wrapper label {
    top: var(--space-22);
    transform: translateY(0);
}

.form .floating-input input:focus~label,
.form .floating-input select:focus~label,
.form .floating-input textarea:focus~label,
.form .floating-input input:not(:placeholder-shown)~label,
.form .floating-input select.has-value~label,
.form .floating-input textarea:not(:placeholder-shown)~label {
    top: var(--space-8);
    font-size: var(--font-size-12);
    transform: translateY(0);
}

.form .floating-input input:focus~label,
.form .floating-input select:focus~label,
.form .floating-input textarea:focus~label {
    color: var(--primary-main);
}

.form .floating-input input:focus~label .required-mark,
.form .floating-input select:focus~label .required-mark,
.form .floating-input textarea:focus~label .required-mark,
.form .floating-input input:not(:placeholder-shown)~label .required-mark,
.form .floating-input select.has-value~label .required-mark,
.form .floating-input textarea:not(:placeholder-shown)~label .required-mark,
.form .custom-select__trigger:focus-visible~label .required-mark,
.form .custom-select.open label .required-mark,
.form .custom-select.has-value label .required-mark {
    color: var(--red-main-hover);
}

.form .floating-input input:not(:placeholder-shown):not(:focus)~label,
.form .floating-input select.has-value:not(:focus)~label,
.form .floating-input textarea:not(:placeholder-shown):not(:focus)~label {
    color: var(--primary-text-secondary);
}

.form .floating-input input:focus~label::after,
.form .floating-input select:focus~label::after,
.form .floating-input textarea:focus~label::after,
.form .floating-input input:not(:placeholder-shown)~label::after,
.form .floating-input select.has-value~label::after,
.form .floating-input textarea:not(:placeholder-shown)~label::after {
    content: ':';
}

.form .floating-input.select-wrapper select:not(.has-value):not(:focus) {
    color: transparent;
}

.form .floating-input.select-wrapper select:not(.has-value):focus {
    color: var(--primary-text-muted);
}

.form .floating-input input:focus::placeholder,
.form .floating-input textarea:focus::placeholder {
    color: var(--primary-text-muted);
}

.form .floating-input input:focus,
.form .floating-input select:focus,
.form .floating-input textarea:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-main-10);
}

.form .floating-input input:-webkit-autofill,
.form .floating-input input:-webkit-autofill:focus {
    padding: var(--space-24) var(--space-20) var(--space-10) var(--space-20);
    -webkit-box-shadow: 0 0 0px 1000px var(--background-input) inset;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--primary-text-main);
}

.form .floating-input input:-webkit-autofill~label {
    top: var(--space-8);
    font-size: var(--font-size-12);
    color: var(--primary-text-secondary);
    transform: translateY(0);
}

.form .floating-input input:-webkit-autofill~label::after {
    content: ':';
}

.form .floating-input select:focus {
    background: var(--background-surface);
}

.form .floating-input.select-wrapper {
    position: relative;
}

.form .floating-input.select-wrapper select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: var(--control-color-scheme);
}

.form .floating-input.select-wrapper::before {
    content: '';
    position: absolute;
    right: var(--space-1);
    top: var(--space-1);
    bottom: var(--space-1);
    width: 50px;
    background: linear-gradient(90deg, transparent 0%, var(--background-input) 40%);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    pointer-events: none;
    transition: background var(--transition-smooth);
}

.form .floating-input.select-wrapper:focus-within::before {
    background: linear-gradient(90deg, transparent 0%, var(--background-surface) 40%);
}

.form .floating-input.select-wrapper::after {
    content: '';
    position: absolute;
    right: var(--space-18);
    top: var(--space-50p);
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--primary-text-secondary);
    background-color: currentColor;
    -webkit-mask-image: url(../../assets/icons/chevron-down-thin.svg);
    mask-image: url(../../assets/icons/chevron-down-thin.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
    transition: transform var(--transition-smooth), color var(--transition-smooth), background-color var(--transition-smooth);
}

.form .floating-input.select-wrapper:focus-within::after {
    color: var(--primary-main);
    transform: translateY(-50%) rotate(180deg);
}

.form .floating-input.textarea-wrapper {
    display: block;
    min-height: 100px;
}

.form .floating-input.textarea-wrapper textarea {
    overflow: hidden;
    resize: none;
    min-height: 100px;
}

.form .floating-input.textarea-wrapper textarea:focus,
.form .floating-input.textarea-wrapper textarea:not(:placeholder-shown) {
    padding: var(--space-28) var(--space-20) var(--space-10) var(--space-20);
}

.form .double-input-50-50 {
    display: flex;
    gap: var(--space-10);
    width: 100%;
}

.form .double-input-50-50 .floating-input,
.form .double-input-50-50 .custom-select {
    width: 50%;
}

.form select option {
    padding: var(--space-12) var(--space-16);
    color: var(--primary-text-main);
    background: var(--background-surface);
    transition: none;
}

.form select option:focus {
    color: var(--primary-main);
    background: var(--primary-main-10);
}

.form select option:checked {
    color: var(--primary-main);
    background: var(--primary-main-15);
}

.form select option[disabled] {
    color: var(--primary-text-muted);
    background: var(--background-input);
}

.form .custom-select {
    position: relative;
    width: 100%;
}

.form .double-input-50-50:has(.custom-select.open),
.form .double-input-60-40:has(.custom-select.open) {
    position: relative;
    z-index: 100;
}

.form .custom-select__trigger {
    position: relative;
    padding: var(--space-0) var(--space-44) var(--space-0) var(--space-20);
    width: 100%;
    height: 68px;
    text-align: left;
    color: var(--primary-text-main);
    background: var(--background-input);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    cursor: pointer;
}

.form .custom-select__trigger::before {
    content: none;
}

.form .custom-select__trigger:focus-visible,
.form .custom-select.open .custom-select__trigger {
    background: var(--background-surface);
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-main-10);
}

.form .custom-select__value,
.form .custom-select__placeholder {
    position: absolute;
    left: var(--space-20);
    top: var(--space-22);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.form .custom-select__placeholder {
    color: transparent;
    transition: all var(--transition-fast);
}

.form .custom-select__trigger:focus-visible .custom-select__placeholder,
.form .custom-select.open .custom-select__placeholder {
    top: var(--space-26);
    color: var(--primary-text-muted);
}

.form .custom-select.has-value .custom-select__placeholder {
    color: transparent;
}

.form .custom-select__value {
    color: transparent;
    transition: all var(--transition-fast);
}

.form .custom-select.has-value .custom-select__value {
    top: var(--space-32);
    color: var(--green-text-main);
}

.form .custom-select::after {
    content: '';
    position: absolute;
    right: var(--space-18);
    top: var(--space-50p);
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--primary-text-secondary);
    background-color: currentColor;
    -webkit-mask-image: url(../../assets/icons/chevron-down-thin.svg);
    mask-image: url(../../assets/icons/chevron-down-thin.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
    transition: transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.form .custom-select.open::after {
    color: var(--primary-main);
    transform: translateY(-50%) rotate(180deg);
}

.form .custom-select label {
    position: absolute;
    left: var(--space-20);
    top: var(--space-22);
    transform: translateY(0);
    font-family: var(--font-family-base);
    font-size: var(--font-size-18);
    font-weight: 400;
    line-height: 150%;
    color: var(--primary-text-muted);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.form .custom-select__trigger:focus-visible~label,
.form .custom-select.open label,
.form .custom-select.has-value label {
    top: var(--space-8);
    font-size: var(--font-size-12);
    color: var(--primary-main);
    transform: translateY(0);
}

.form .custom-select__trigger:focus-visible~label::after,
.form .custom-select.open label::after,
.form .custom-select.has-value label::after {
    content: ':';
}

.form .custom-select__options {
    position: absolute;
    top: calc(var(--space-100p) + var(--space-8));
    left: var(--space-0);
    right: var(--space-0);
    background: var(--background-surface);
    border: 1px solid var(--background-input-stroke);
    border-radius: var(--radius-m);
    box-shadow: 0 10px 40px var(--black-10), 0 2px 10px var(--black-5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.form .custom-select.open .custom-select__options {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.form .custom-select__option {
    position: relative;
    padding: var(--space-14) var(--space-20);
    color: var(--primary-text-main);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.form .custom-select__option.selected {
    color: var(--primary-main);
    background: var(--primary-main-15);
}

.form .custom-select__option.selected::after {
    content: '';
    position: absolute;
    right: var(--space-20);
    top: var(--space-50p);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.form .custom-select__option:not(:last-child) {
    border-bottom: 1px solid var(--background-input-stroke);
}

.form .custom-select__options::-webkit-scrollbar {
    width: 6px;
}

.form .custom-select__options::-webkit-scrollbar-track {
    background: transparent;
}

.form .custom-select__options::-webkit-scrollbar-thumb {
    background: var(--primary-main-30);
    border-radius: var(--radius-full);
}

.form .custom-select.success .custom-select__trigger {
    background: var(--green-main-5);
    border-color: var(--green-main);
}

.form .custom-select.success .custom-select__trigger:focus-visible,
.form .custom-select.success.open .custom-select__trigger {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-main-15);
}

.form .custom-select.success label {
    color: var(--green-main) !important;
}

.form .custom-select.success::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%2322C55E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form .accept-checkbox {
    position: absolute;
    margin: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.form .accept .content {
    position: relative;
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form .checkbox-label {
    position: relative;
    display: flex;
    gap: var(--space-12);
    align-items: center;
    cursor: pointer;
}

.form .accept-checkbox-ui {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-width: var(--checkbox-size);
    min-height: var(--checkbox-size);
    background: transparent;
    border: var(--checkbox-border-width) solid var(--primary-main);
    border-radius: var(--radius-xs);
    transition: background-color var(--transition-instant), border-color var(--transition-instant), box-shadow var(--transition-instant);
}

.form .accept-checkbox-ui svg {
    display: block;
    overflow: visible;
    width: var(--checkbox-icon-width);
    height: var(--checkbox-icon-height);
    pointer-events: none;
}

.form .accept-checkbox-ui path {
    fill: none;
    stroke: var(--text-inverted);
    opacity: 0;
    stroke-dasharray: var(--checkbox-path-length);
    stroke-dashoffset: var(--checkbox-path-length);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--checkbox-icon-stroke);
}

.form .accept-checkbox:checked+.accept-checkbox-ui {
    background-color: var(--primary-main);
}

.form .accept-checkbox:checked+.accept-checkbox-ui path {
    opacity: 1;
    animation: checkboxTickReveal var(--checkbox-mark-duration) var(--ease-smooth) var(--checkbox-mark-delay) forwards;
}

.form .accept-checkbox:not(:checked)+.accept-checkbox-ui path {
    opacity: 0;
    animation: none;
    stroke-dashoffset: var(--checkbox-path-length);
}

.form .accept-checkbox:focus-visible+.accept-checkbox-ui {
    box-shadow: 0 0 0 3px var(--primary-main-15);
}

.form .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
    transition: all var(--transition-fast);
}

.form .checkbox-group.error {
    background: var(--red-main-5);
    padding: var(--space-12);
    border-radius: var(--radius-m);
    margin: var(--space-n12);
    margin-bottom: var(--space-n2);
}

.form .checkbox-group.error .accept-checkbox-ui {
    border-color: var(--red-main);
}

.form .checkbox-group.shake {
    animation: shake 0.4s var(--ease-bounce);
}

.form .checkbox-label span {
    color: var(--primary-text-secondary);
    transition: color var(--transition-fast);
}

.form .checkbox-label a {
    color: var(--primary-main);
    text-decoration: none;
    transition: color var(--transition-smooth), background-size var(--transition-fast);
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.inline-feedback-toast,
.form-submit-status {
    display: none;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-10) var(--space-14);
    background: var(--red-main-10);
    border: 1px solid var(--red-main-25);
    border-radius: var(--radius-s);
    box-shadow: 0 10px 24px var(--red-main-10);
}

.inline-feedback-toast.visible,
.form-submit-status:not([hidden]) {
    display: flex;
}

@keyframes checkboxTickReveal {
    0% {
        opacity: 1;
        stroke-dashoffset: var(--checkbox-path-length);
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.inline-feedback-toast .icon,
.form-submit-status .icon {
    flex-shrink: 0;
    color: var(--red-main);
}

.inline-feedback-toast .inline-feedback-text,
.form-submit-status .form-submit-status-text {
    color: var(--red-text-main);
}

.form-submit-status {
    margin-bottom: var(--space-16);
}

.form-submit-status.is-success {
    background: var(--green-main-10);
    border-color: var(--green-main-25);
    box-shadow: 0 10px 24px var(--green-main-10);
}

.form-submit-status.is-success .icon {
    color: var(--green-main);
}

.form-submit-status.is-success .form-submit-status-text {
    color: var(--green-text-main);
}

.form .floating-input .error-toast {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    overflow: hidden;
    margin-top: var(--space-0);
    padding: var(--space-0) var(--space-14);
    max-height: 0;
    background: var(--red-main-10);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    opacity: 0;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), margin var(--transition-fast), padding var(--transition-fast), border-color var(--transition-fast);
}

.form .floating-input .error-toast .icon {
    flex-shrink: 0;
    color: var(--red-main);
}

.form .floating-input .error-toast .error-text {
    color: var(--red-text-main);
}

.form .floating-input.error .error-toast {
    margin-top: var(--space-3);
    padding: var(--space-10) var(--space-14);
    max-height: 60px;
    border-color: var(--red-main-25);
    opacity: 1;
}

.form .floating-input.error input,
.form .floating-input.error textarea,
.form .floating-input.error select,
#auth-popup .form .floating-input.error input,
#auth-popup .form .floating-input.error textarea,
#auth-popup .form .floating-input.error select {
    color: var(--red-text-main);
    background: var(--red-main-5) !important;
    border-color: var(--red-main);
    -webkit-text-fill-color: var(--red-text-main);
}

.form .floating-input.error input:not(:focus)::placeholder,
.form .floating-input.error textarea:not(:focus)::placeholder {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.form .floating-input.error input:focus,
.form .floating-input.error textarea:focus,
.form .floating-input.error select:focus,
#auth-popup .form .floating-input.error input:focus,
#auth-popup .form .floating-input.error textarea:focus,
#auth-popup .form .floating-input.error select:focus {
    border-color: var(--red-main);
    box-shadow: 0 0 0 3px var(--red-main-15);
}

.form .floating-input.error label {
    color: var(--red-main) !important;
}

.form .floating-input.error.is-empty input:not(:focus)~label::after,
.form .floating-input.error.is-empty textarea:not(:focus)~label::after {
    content: '' !important;
}

.form .floating-input.success input,
.form .floating-input.success textarea,
.form .floating-input.success select {
    color: var(--green-text-main);
    background: var(--green-main-5);
    border-color: var(--green-main);
    -webkit-text-fill-color: var(--green-text-main);
}

.form .floating-input.success input:focus,
.form .floating-input.success textarea:focus,
.form .floating-input.success select:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-main-15);
}

.form .floating-input.success label {
    color: var(--green-main);
}

.form .floating-input.success input:focus~label,
.form .floating-input.success textarea:focus~label,
.form .floating-input.success select:focus~label,
.form .floating-input.success input:not(:placeholder-shown)~label,
.form .floating-input.success textarea:not(:placeholder-shown)~label,
.form .floating-input.success select.has-value~label {
    color: var(--green-main);
}

#auth-popup .form .floating-input.success input,
#auth-popup .form .floating-input.success textarea {
    color: var(--green-text-main);
    background: var(--green-main-5);
    border-color: var(--green-main);
    -webkit-text-fill-color: var(--green-text-main);
}

#auth-popup .form .floating-input.success input:focus,
#auth-popup .form .floating-input.success textarea:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-main-15);
}

#auth-popup .form .floating-input.success label {
    color: var(--green-main);
}

#auth-popup .form .floating-input.filled input:not([type="checkbox"]),
#auth-popup .form .floating-input.filled textarea,
#auth-popup .form .floating-input.filled select,
#auth-popup .form .floating-input.filled .custom-select__trigger {
    color: var(--green-text-main);
    background: var(--green-main-5);
    border-color: var(--green-main);
}

#burger-menu {
    z-index: 999;
}

#auth-popup .form .floating-input.filled input:focus,
#auth-popup .form .floating-input.filled textarea:focus,
#auth-popup .form .floating-input.filled select:focus,
#auth-popup .form .floating-input.filled .custom-select__trigger:focus-visible {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-main-15);
}

#auth-popup .form .floating-input.filled label {
    color: var(--green-text-muted);
}

#auth-popup .form .floating-input.filled input:focus~label,
#auth-popup .form .floating-input.filled textarea:focus~label,
#auth-popup .form .floating-input.filled select:focus~label {
    color: var(--green-main);
}

#auth-popup .floating-input.filled .password-toggle.active {
    color: var(--green-main);
    background: transparent;
}

#auth-popup .floating-input.filled .password-toggle::before,
#auth-popup .floating-input.success .password-toggle::before {
    background: linear-gradient(180deg, var(--green-main-10), var(--green-main-15));
}

#auth-popup .floating-input.filled .password-toggle,
#auth-popup .floating-input.success .password-toggle,
#auth-popup .floating-input.success .password-toggle.active {
    color: var(--green-main);
}

#auth-popup .floating-input.success .password-toggle.active {
    background: transparent;
}

#auth-popup .floating-input.filled .password-toggle.active::before,
#auth-popup .floating-input.success .password-toggle.active::before {
    opacity: 1;
    transform: scale(1);
}

#auth-popup .floating-input.error .password-toggle,
#auth-popup .floating-input.error .password-toggle.active {
    color: var(--red-main);
}

#auth-popup .floating-input.error .password-toggle::before {
    background: linear-gradient(180deg, var(--red-main-10), var(--red-main-15));
}

#auth-popup .floating-input.error .password-toggle.active {
    background: transparent;
}

#auth-popup .floating-input.error .password-toggle.active::before {
    opacity: 1;
    transform: scale(1);
}

#auth-popup .form .floating-input.filled input:-webkit-autofill,
#auth-popup .form .floating-input.filled input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--green-main-5) inset;
    -webkit-text-fill-color: var(--green-text-main);
}

.form .accept.error .accept-checkbox-ui {
    background: var(--red-main-5);
    border-color: var(--red-main);
}

.form .accept.error .small-caption {
    color: var(--red-text-secondary);
}

.form .accept .error-toast {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    overflow: hidden;
    margin-top: var(--space-0);
    padding: var(--space-0) var(--space-14);
    width: 100%;
    max-height: 0;
    background: var(--red-main-10);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    opacity: 0;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), margin var(--transition-fast), padding var(--transition-fast), border-color var(--transition-fast);
}

.form .accept.error .error-toast {
    margin-top: var(--space-12);
    padding: var(--space-10) var(--space-14);
    max-height: 60px;
    border-color: var(--red-main-25);
    opacity: 1;
}

.form .accept .error-toast .icon {
    flex-shrink: 0;
    color: var(--red-main);
}

.form .accept .error-toast .error-text {
    color: var(--red-text-main);
}

.form .form-success {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-20);
    color: var(--green-text-main);
    background: var(--green-main-10);
    border: 1px solid var(--green-main-30);
    border-radius: var(--radius-m);
    animation: formSlideIn var(--transition-smooth);
}

.form .form-success .icon {
    color: var(--green-main);
}

@keyframes formSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form button[type="submit"],
.form .button-primary {
    position: relative;
    width: 100%;
    transition: all var(--transition-fast);
}

.form button[type="submit"]:disabled,
.form .button-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form button[type="submit"] .btn-text,
.form .button-primary .btn-text {
    color: var(--text-inverted);
}

.form button[type="submit"] .btn-loading,
.form .button-primary .btn-loading {
    display: none;
    gap: var(--space-8);
    align-items: center;
    color: var(--text-inverted);
}

.form button[type="submit"] .spinner,
.form .button-primary .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--white-30);
    border-top-color: var(--white-95);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.form button[type="submit"].loading .btn-text,
.form .button-primary.loading .btn-text {
    display: none;
}

.form button[type="submit"].loading .btn-loading,
.form .button-primary.loading .btn-loading {
    display: flex;
}

.form button[type="submit"].loading .icon,
.form .button-primary.loading .icon {
    display: none;
}

.form button[type="submit"].loading,
.form .button-primary.loading {
    opacity: 0.9;
    pointer-events: none;
}

@keyframes formErrorPulse {
    0% {
        box-shadow: 0 0 0 0 var(--red-main-25);
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        box-shadow: 0 0 0 4px var(--red-main-25);
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-1px);
    }

    100% {
        box-shadow: 0 0 0 0 var(--red-main-25);
        transform: translateX(0);
    }
}

.form .floating-input.shake input,
.form .floating-input.shake textarea,
.form .accept.shake {
    animation: formErrorPulse 0.4s var(--ease-out);
}

.form .accept.shake {
    box-shadow: none !important;
}

* {
    box-sizing: border-box;
    margin: var(--space-0);
    padding: var(--space-0);
    background-color: transparent;
    border: none;
    outline: none;
    user-select: none;
}

*:not(html, body, header, header *) {
    box-sizing: border-box;
    margin: var(--space-0);
    padding: var(--space-0);
    background-color: transparent;
    border: none;
    outline: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-115);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    padding: var(--space-120) var(--space-0) var(--space-30) var(--space-0);
    width: 100%;
    background-color: var(--background-page);
}

html.page-loading body {
    opacity: 1;
}

html.page-loaded body {
    opacity: 1;
    transition: opacity var(--transition-smooth);
}

:where(html.theme-switching *) {
    transition: background-color var(--transition-theme-switch), background var(--transition-theme-switch), color var(--transition-theme-switch), border-color var(--transition-theme-switch), box-shadow var(--transition-theme-switch), fill var(--transition-theme-switch), stroke var(--transition-theme-switch) !important;
}

html.theme-switching :is(.form select option, .trainer-fill-select option) {
    transition: none !important;
}

html.theme-switching .form .floating-input.select-wrapper::before {
    transition: background var(--transition-theme-switch) !important;
}

html.theme-switching .form .floating-input.select-wrapper::after,
html.theme-switching .form .custom-select::after,
html.theme-switching .trainer-fill-row::after {
    transition: transform var(--transition-fast), color var(--transition-theme-switch), background-color var(--transition-theme-switch) !important;
}

.theme-toggle-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.theme-toggle-control {
    --theme-toggle-height: 32px;
    --theme-toggle-icon-left: calc(var(--theme-toggle-padding) + (var(--theme-toggle-thumb-size) / 2));
    --theme-toggle-icon-right: calc(var(--theme-toggle-padding) + var(--theme-toggle-shift) + (var(--theme-toggle-thumb-size) / 2));
    --theme-toggle-padding: var(--space-4);
    --theme-toggle-shift: calc(var(--theme-toggle-width) - var(--theme-toggle-thumb-size) - (var(--theme-toggle-padding) * 2));
    --theme-toggle-thumb-size: 24px;
    --theme-toggle-width: 64px;
    position: relative;
    display: block;
    flex-shrink: 0;
    padding: var(--theme-toggle-padding);
    width: var(--theme-toggle-width);
    height: var(--theme-toggle-height);
    background: var(--background-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--surface-outline-inset);
    transition: background-color var(--transition-theme-switch), box-shadow var(--transition-theme-switch);
}

.theme-toggle-control .icon {
    position: absolute;
    top: var(--space-50p);
    z-index: 1;
    margin: 0;
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity var(--transition-theme-switch), transform var(--transition-theme-switch);
    pointer-events: none;
}

.theme-toggle-control .icon.sun {
    left: var(--theme-toggle-icon-left);
    color: var(--orange-main);
}

.theme-toggle-control .icon.moon {
    left: var(--theme-toggle-icon-right);
    color: var(--primary-main);
}

.theme-toggle-thumb {
    position: absolute;
    top: var(--space-50p);
    left: var(--theme-toggle-padding);
    width: var(--theme-toggle-thumb-size);
    height: var(--theme-toggle-thumb-size);
    border-radius: var(--radius-full);
    background: var(--background-page);
    box-shadow: var(--surface-outline-inset);
    transform: translateY(-50%);
    transition: transform var(--transition-theme-switch), background-color var(--transition-theme-switch), box-shadow var(--transition-theme-switch);
}

.theme-toggle-input:checked~.theme-toggle-control .theme-toggle-thumb {
    transform: translate(var(--theme-toggle-shift), -50%);
}

.theme-toggle-input:not(:checked)~.theme-toggle-control .icon.sun,
.theme-toggle-input:checked~.theme-toggle-control .icon.moon {
    opacity: 1;
}

.theme-toggle-input:checked~.theme-toggle-control .icon.sun,
.theme-toggle-input:not(:checked)~.theme-toggle-control .icon.moon {
    opacity: 0.48;
}

.theme-toggle-input:focus-visible~.theme-toggle-control {
    box-shadow: var(--surface-outline-inset);
}

section:not(.bg-dark) .section-subtitle {
    color: var(--primary-text-secondary);
}

section.bg-dark .section-subtitle {
    color: var(--primary-text-muted);
}

::selection,
::-moz-selection {
    color: var(--text-inverted);
    background: var(--primary-main-90);
}

.email-auth-subtitle :is(p, span, .email-info) {
    width: max-content;
}

.email-auth-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    align-items: center;
    justify-content: center;
}

:where(:is(span:not(.icon), p, div):not(:is(section.bg-dark, #selector, button, header, footer) *)) {
    color: var(--primary-text-main);
}

.highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-15) var(--space-10) var(--space-15);
    font-family: var(--font-family-display);
    text-align: center;
    vertical-align: middle;
    color: var(--primary-main);
    background: var(--primary-main-15);
    border-radius: var(--radius-m);
}

.highlight-green {
    padding: var(--space-5) var(--space-15) var(--space-10) var(--space-15);
    font-family: var(--font-family-display);
    color: var(--green-main);
    background: var(--green-main-15);
    border-radius: var(--radius-m);
}

section .h1-extrabold {
    color: var(--primary-main);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-main-20), var(--primary-main-25));
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, var(--primary-main-50), var(--primary-main-60));
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-main-20) var(--scroll-track);
}

html.lock-scroll,
body.lock-scroll {
    overflow: hidden !important;
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

.hidden {
    display: none !important;
}

.text-fade {
    opacity: 0;
}

.bg-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
}

button,
a {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
    cursor: pointer;
    user-select: none;
}

button::before,
a.secondary::before,
a.primary::before {
    content: '';
    position: absolute;
    top: var(--ripple-y, var(--space-50p));
    left: var(--ripple-x, var(--space-50p));
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-bg);
    pointer-events: none;
    will-change: top, left, width, height;
    transform: translate(-50%, -50%);
    transition: top var(--transition-fast), left var(--transition-fast), width var(--ripple-duration), height var(--ripple-duration);
}

button.secondary::before,
a.secondary::before {
    background: var(--primary-text-secondary-20);
    transition: top var(--transition-fast), left var(--transition-fast), width var(--ripple-duration), height var(--ripple-duration);
}

button.primary:active,
a.primary:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

button.secondary:active,
a.secondary:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

button.primary.blue:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

button.light-more:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

button.dark-more:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

button:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

a:active {
    transform: var(--scale-decrease);
    transition: transform 0.05s ease-out;
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1240px;
    padding: var(--space-10) var(--space-50);
    background-color: var(--background-page-10);
    backdrop-filter: var(--bg-blur);
    border-radius: var(--radius-full);
    z-index: 1000;
    position: fixed;
    top: var(--space-30);
    border: 1px solid var(--background-page-10);
    filter: var(--shadow);
    left: var(--space-50p);
    transform: translateX(-50%);
    transition: background-color var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast);
}

header.is-scrolled:not(.on-light):not(.on-contrast) {
    background-color: var(--primary-text-secondary-5);
}

header.burger-active,
header.burger-active.is-scrolled,
header.burger-active.is-at-top {
    background-color: var(--background-page);
}

header #logo {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    color: var(--primary-text-secondary);
    transition: transform var(--transition-fast);
    cursor: pointer;
}

header #logo span {
    transition: color var(--transition-fast);
}

header #logo svg path {
    transition: fill var(--transition-fast);
}

header .buttons {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

header .buttons button {
    transition: transform var(--trans-base), background-color var(--trans-base), box-shadow var(--trans-base), color var(--trans-base), border-color var(--trans-base), height var(--trans-base);
}

nav {
    height: 100%;
}

ul {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--space-50);
    align-items: center;
    list-style: none;
}

nav ul a {
    display: flex;
    align-items: center;
    margin: var(--space-n20) var(--space-0);
    padding: var(--space-40) var(--space-0);
    height: 100%;
    text-decoration: none;
    color: var(--primary-text-main-50);
    transition: all var(--transition-fast);
}

ul a.active {
    color: var(--primary-main) !important;
}

.nav-underline {
    position: absolute;
    bottom: var(--space-15);
    left: var(--space-0);
    height: 1px;
    width: 0;
    background-color: var(--primary-main);
    border-radius: var(--radius-xxs);
    transition: left var(--transition-smooth), width var(--transition-smooth), opacity var(--transition-instant);
    opacity: 0;
    pointer-events: none;
}

header.on-dark {
    --logo-dynamic-color: var(--background-page);
}

header.on-dark ul a,
header.on-dark #logo span {
    color: var(--text-inverted);
}

header.on-dark ul a.active {
    color: var(--primary-main) !important;
}

header.on-dark .buttons button.secondary {
    --secondary-button-text-color: var(--background-surface-50);
    color: var(--background-surface-50);
    border-color: var(--background-surface-25);
}

.burger-trigger {
    position: relative;
    z-index: 2000;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    margin: var(--space-0) var(--space-10);
    padding: var(--space-0);
    width: 26px;
    height: 18px;
    cursor: pointer;
}

.burger-trigger span {
    display: none;
    width: 100%;
    height: 2px;
    background-color: var(--primary-text-secondary);
    border-radius: var(--radius-xxs);
    transform-origin: center;
    transition: transform var(--trans-medium), opacity var(--trans-medium), background-color var(--trans-medium);
}

header.on-dark .burger-trigger span {
    background-color: var(--text-inverted);
}

header.on-light,
header.on-contrast {
    background-color: var(--overlay-heavy);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

header.on-light ul a,
header.on-light #logo span,
header.on-contrast ul a,
header.on-contrast #logo span {
    color: var(--text-inverted);
}

header.on-light ul a.active,
header.on-contrast ul a.active {
    color: var(--primary-main) !important;
}

header.on-light .buttons button.secondary,
header.on-contrast .buttons button.secondary {
    --secondary-button-text-color: var(--background-surface-50);
    color: var(--background-surface-50);
    border-color: var(--background-surface-25);
}

header.on-light .burger-trigger span,
header.on-contrast .burger-trigger span {
    background-color: var(--text-inverted);
}

header.on-light,
header.on-contrast {
    --logo-dynamic-color: var(--background-page);
}

header.is-at-top:not(.burger-active) {
    background-color: var(--background-page-10);
}

header.on-light header.burger-active .burger-trigger span,
header.burger-active.on-dark .burger-trigger span {
    background-color: var(--primary-text-main);
}

header.burger-active .burger-trigger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

header.burger-active .burger-trigger span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

header.burger-active .burger-trigger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

#selector {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-30);
    padding: var(--space-5);
    width: 420px;
    height: 56px;
    color: var(--primary-text-secondary);
    background-color: var(--background-surface);
    border-radius: var(--radius-full);
    transition: transform var(--transition-normal), opacity var(--transition-fast);
}

#selector .selector-item span {
    color: var(--primary-text-secondary);
}

#selector .selector-item.active span {
    color: var(--text-inverted);
}

#selector.hidden-by-scroll {
    opacity: 1;
    transform: translateX(-50%) translateY(-20px);
    pointer-events: none;
}

#selector .selector-item {
    display: flex;
    flex-direction: row;
    gap: var(--space-0);
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--primary-text-secondary);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

#selector .active {
    color: var(--text-inverted);
    background-color: var(--primary-main);
}

#selector span {
    transition: transform var(--transition-fast);
}

#selector .selector-item.active::before {
    display: none;
}

section {
    display: flex;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: var(--space-auto);
    margin-right: var(--space-auto);
}

section .section-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
    margin-bottom: var(--space-50);
    width: 100%;
    text-align: center;
}

section .line {
    display: flex;
    gap: var(--space-10);
    width: 100%;
}

section .section-title span:not(.highlight, .highlight-green) {
    width: 100%;
}

section .section-title div {
    justify-content: center;
    font-family: var(--font-family-display);
}

section.bg-dark .page-title {
    margin-bottom: var(--space-10);
    padding: var(--space-10) var(--space-20);
    color: var(--primary-main);
    background: var(--primary-main-15);
    border-radius: var(--radius-full);
}

.bg-dark {
    border-radius: var(--radius-xl);
    background-color: var(--background-dark);
    padding: var(--space-80) var(--space-80);
    width: 100%;
    max-width: 1300px;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    isolation: isolate;
    overflow: hidden;
    margin-left: var(--space-auto);
    margin-right: var(--space-auto);
}

.bg-dark>* {
    position: relative;
    z-index: 2;
}

#steps .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-20);
    width: 100%;
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
    border-radius: var(--radius-m);
    transition: transform var(--trans-smooth), box-shadow var(--trans-smooth), background-color var(--trans-medium), border-color var(--trans-medium);
    cursor: default;
}

#steps .info {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
}

#steps .bg-icon {
    color: var(--background-surface);
    background-color: var(--background-page-10);
    transition: transform var(--trans-bounce), background-color var(--trans-medium), color var(--trans-medium);
}

#steps .h4 {
    width: 100%;
    text-align: center;
    color: var(--text-inverted);
    transition: color var(--trans-medium);
}

#steps .body-m {
    width: 100%;
    text-align: center;
    color: var(--primary-text-muted);
    transition: color var(--trans-medium);
}

section.bg-dark .h1:not(.mobile-item) {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--text-inverted);
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: center;
    width: 100%;
}

.accordion .accordion-item {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-20);
    width: 100%;
    border-radius: var(--radius-m);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
}

.accordion .accordion-item.active {
    transform: scale(1.005);
}

.accordion .accordion-title {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--space-16);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    pointer-events: none;
}

.accordion .accordion-title span {
    width: 100%;
    color: var(--text-inverted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.accordion.light .accordion-title span {
    color: var(--primary-text-main);
}

.accordion.light .accordion-title .bg-more span {
    color: var(--primary-text-secondary);
}

.accordion .bg-more {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    transform: translateZ(0);
    transition: transform var(--transition-bounce), background-color var(--transition-fast), box-shadow var(--transition-fast);
    will-change: transform;
}

.accordion .accordion-item.active .bg-more {
    background-color: var(--red-main-10);
    transform: rotate(45deg);
}

.accordion .accordion-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    overflow: hidden;
    margin-top: var(--space-0);
    padding: var(--space-0) var(--space-2);
    width: 100%;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--transition-smooth), opacity var(--transition-smooth), margin-top var(--transition-smooth);
    will-change: max-height, opacity;
}

.accordion .accordion-item.active .accordion-content {
    margin-top: var(--space-25);
    opacity: 1;
}

.accordion .accordion-content span {
    display: block;
    width: 100%;
    transition: color var(--transition-normal);
}

.accordion.light .accordion-item {
    background: var(--background-surface);
    border: 1px solid transparent;
    filter: var(--shadow);
}

.accordion.light .accordion-item.active {
    background: var(--background-surface);
    border-color: var(--primary-text-main-10);
}

.accordion.light .accordion-item.active .bg-more span {
    color: var(--red-main-50);
}

.accordion.light .accordion-item .accordion-content {
    overflow: visible;
}

.accordion.light .caption {
    color: var(--primary-text-secondary);
}

.accordion.light .accordion-content span,
.accordion.light .accordion-content .body-m {
    color: var(--primary-text-secondary);
}

.accordion.faq .accordion-title .body-l {
    color: var(--text-inverted);
}

.accordion.faq .accordion-title span {
    color: var(--text-inverted);
}

.accordion.faq .accordion-item {
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
}

.accordion.faq .accordion-item.active {
    background: var(--background-dark-surface-80);
    border-color: var(--background-page-10);
}

.accordion.faq .accordion-item.active .bg-more span {
    color: var(--red-main-50);
}

.accordion.faq .accordion-content {
    contain: layout style;
}

.accordion.faq .accordion-content span {
    color: var(--primary-text-muted);
}

div.numbered-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-20);
    background-color: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

div.numbered-bar .number {
    position: absolute;
    top: var(--space-6);
    right: var(--space-12);
    margin: var(--space-0);
    color: var(--primary-text-main-5);
}

div.numbered-bar .body-s {
    color: var(--primary-text-secondary);
}

.section-subtitle {
    margin-top: var(--space-20);
    text-align: center;
}

.pop-up {
    position: fixed;
    top: var(--space-0);
    left: var(--space-0);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--popup-overlay-bg);
    color: var(--primary-text-main);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: var(--popup-overlay-blur);
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
    pointer-events: none;
}

.pop-up.active {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.pop-up-content {
    background: var(--popup-surface-bg);
    border: var(--popup-surface-border);
    border-radius: var(--popup-surface-radius);
    padding: var(--space-30);
    width: min(476px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    transform: scale(0.9) translateY(40px);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-smooth);
    box-shadow: var(--popup-surface-shadow);
}

.pop-up-content::-webkit-scrollbar {
    display: none;
}

.pop-up.active .pop-up-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.close-popup:not(.secondary) {
    position: absolute;
    top: var(--space-25);
    right: var(--space-25);
    width: var(--popup-close-size);
    height: var(--popup-close-size);
    z-index: 1000;
    border-radius: var(--radius-full);
    background: var(--popup-close-bg);
    color: var(--popup-close-color);
    border: var(--space-1) solid var(--primary-text-main-5);
    box-shadow: var(--surface-outline-inset);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.close-popup:not(.secondary) .icon.close {
    width: 18px;
    height: 18px;
}

.pop-up-title {
    margin-bottom: var(--space-30);
    width: 416px;
}

.pop-up-title span {
    display: block;
    width: 100%;
    text-align: center;
}

#burger-menu .sections a.active {
    position: relative;
    margin-left: var(--space-n15);
    padding-left: var(--space-15);
    background: linear-gradient(90deg, var(--primary-main-8), var(--primary-main-3));
    border-left: 3px solid var(--primary-main);
}

#burger-menu .sections a.active .h1 {
    color: var(--primary-main);
}

#burger-menu .navigation .sections .icon {
    animation: chevron-pulse 1.5s var(--ease-bounce) infinite;
}

@keyframes chevron-pulse {

    0%,
    33%,
    100% {
        transform: translateY(0);
    }

    11% {
        transform: translateY(4px);
    }

    22% {
        transform: translateY(2px);
    }
}

#burger-menu .navigation {
    display: flex;
    flex-direction: column;
    margin: var(--space-0) var(--space-auto);
    width: 100%;
    max-width: 680px;
}

#burger-menu .caption-page {
    margin-bottom: var(--space-5);
    width: 100%;
    text-align: center;
    color: var(--primary-text-secondary);
}

#burger-menu .sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
}

#burger-menu .sections a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10) var(--space-0);
    width: 100%;
    text-decoration: none;
    color: var(--primary-text-main);
    cursor: pointer;
}

#burger-menu .sections .icon {
    color: var(--primary-main);
    transition: transform var(--transition-fast);
}

#burger-menu .pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    margin-top: var(--space-16);
    width: 100%;
}

#burger-menu .navigation.pages a,
#burger-menu .navigation .pages a {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-20);
    width: 100%;
    text-decoration: none;
    color: var(--primary-text-main);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    transition: transform var(--trans-base), box-shadow var(--trans-base);
}

#burger-menu .bg-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--primary-main);
    background: var(--primary-main-10);
    border-radius: var(--radius-full);
}

#burger-menu .pages a .info,
#burger-menu .burger-home-link .info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

#burger-menu .pages a .info .h4,
#burger-menu .burger-home-link .info .h4 {
    color: var(--primary-text-main);
}

#burger-menu .pages a .info .caption,
#burger-menu .burger-home-link .info .caption {
    color: var(--primary-text-secondary);
}

footer {
    box-sizing: border-box;
    padding: var(--space-80) var(--space-50) !important;
    width: 100% !important;
    max-width: 1340px;
}

footer .footer-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-40);
    width: 100%;
}

footer .footer-brand .hr {
    margin-bottom: var(--space-0);
    width: 80%;
}

footer .footer-logo {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    color: var(--text-inverted);
    transition: transform var(--transition-normal);
}

footer .footer-logo svg {
    transition: transform var(--transition-smooth);
}

footer .scroll-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--background-page-10);
    border: 1px solid var(--background-page-10);
    outline: none;
    border-radius: var(--radius-s);
    transition: all var(--transition-normal);
    cursor: pointer;
}

footer .scroll-to-top .icon {
    background-color: var(--primary-text-secondary);
    transform: rotate(180deg);
    transition: background-color var(--transition-smooth);
}

footer .scroll-to-top:active {
    transform: translateY(-2px);
    transition: transform 0.05s ease-out;
}

.footer-mobile-sections.tablet-item.mobile-item {
    display: flex;
    justify-content: center;
}

footer .main {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-40);
    width: 100%;
}

footer .line span {
    display: block;
    width: 100%;
}

footer .h3 {
    margin-bottom: var(--space-20);
    color: var(--primary-main);
}

footer .list {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    width: 100%;
}

footer .line:not(.fund) .list>a {
    position: relative;
    display: flex;
    gap: var(--space-0);
    align-items: center;
    overflow: visible;
    text-decoration: none;
    color: var(--primary-text-muted);
    transition: color var(--transition-fast), transform var(--transition-fast), gap var(--transition-fast);
    cursor: pointer;
}

footer .line:not(.fund) .list>a:not(.phone-copy):not(.email-copy)::after {
    display: inline-block;
    width: 0;
    height: 12px;
    content: '';
    background-color: currentColor;
    mask-image: url("../../assets/icons/chevron-right.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 0;
    transition: width var(--transition-fast), opacity var(--transition-fast);
}

footer .line:not(.fund) .list>a.phone-copy,
footer .line:not(.fund) .list>a.email-copy {
    gap: var(--space-8);
}

footer .line:not(.fund) .list>a:is(.is-current-page, [aria-current="page"]) {
    gap: var(--space-0);
    color: var(--primary-text-secondary);
    font-weight: 700;
}

footer .line:not(.fund) .list span {
    color: var(--primary-text-muted);
    cursor: pointer;
}

footer .line.fund {
    width: 562px;
}

footer .fund {
    color: var(--primary-text-muted);
}

footer .fund .link {
    display: inline-flex;
    gap: var(--space-0);
    align-items: center;
    width: max-content !important;
    text-decoration: none;
    color: var(--text-inverted);
    transition: color var(--transition-fast), transform var(--transition-fast), gap var(--transition-fast);
    cursor: pointer;
    user-select: none;
}

footer .fund .link::after {
    display: inline-block;
    width: 0;
    height: 12px;
    content: '';
    background-color: currentColor;
    mask-image: url("../../assets/icons/chevron-right.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 0;
    transition: width var(--transition-fast), opacity var(--transition-fast);
}

footer .social {
    display: flex;
    gap: var(--space-10);
}

.bg-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

footer .bg-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
    color: var(--primary-text-secondary);
    background: var(--background-page-10);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    transition: background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    cursor: pointer;
}

footer .bg-social .icon {
    transition: background-color var(--transition-normal);
}

.site-social-icon-fit {
    display: flex !important;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    transform: scale(var(--site-social-icon-scale, 1));
    transform-origin: center;
    transition: transform var(--transition-normal);
}

.site-social-icon-fit .icon {
    display: block;
    width: 20px !important;
    height: 20px !important;
}

.site-social-icon-mask {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: inherit;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--transition-normal);
}

.site-social-icon-image {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

footer .bg-social:active {
    transform: var(--up-shift-2) var(--scale-increase);
    transition: transform 0.05s ease-out;
}

footer .hr {
    width: 80%;
    height: 1px;
    background: var(--background-page-10);
    border-radius: var(--radius-full);
}

footer .legal-hr {
    margin-bottom: var(--space-40);
    width: 100%;
}

footer .legal {
    display: flex;
    width: 100%;
}

footer .legal * {
    color: var(--primary-text-secondary);
}

footer .legal .links {
    display: flex;
    gap: var(--space-50);
    margin-left: var(--space-auto);
}

footer .legal .links a {
    position: relative;
    text-decoration: none;
    color: var(--primary-text-secondary);
    transition: color var(--transition-fast);
    cursor: pointer;
}

footer .legal .links a:is(.is-current-page, [aria-current="page"]) {
    color: var(--primary-text-main);
    font-weight: 700;
}

footer .legal .links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: var(--space-0);
    left: var(--space-0);
    background-color: var(--primary-text-muted);
    transition: width var(--transition-fast);
}

.footer-mobile-sections {
    margin-bottom: var(--space-40);
    width: 100%;
}

.footer-mobile-sections .footer-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    text-align: center;
}

.footer-mobile-sections .footer-navigation .h3 {
    color: var(--primary-main);
}

.footer-mobile-sections .footer-navigation .list {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    align-items: center;
}

.footer-mobile-sections .footer-navigation .list a {
    position: relative;
    text-decoration: none;
    color: var(--primary-text-muted);
    transition: color var(--transition-fast);
}

.footer-mobile-sections .footer-navigation .list a:is(.is-current-page, [aria-current="page"]) {
    color: var(--primary-text-main);
    font-weight: 700;
}

.footer-mobile-sections .footer-navigation .list a:is(.is-current-page, [aria-current="page"])::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--primary-main);
    border-radius: var(--radius-full);
}

.footer-accordion {
    margin-bottom: var(--space-40);
    width: 100%;
}

.footer-accordion .accordion-item {
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
}

.footer-accordion .accordion-title {
    justify-content: center !important;
    text-align: center;
}

.footer-accordion .accordion-title .h3 {
    margin-bottom: var(--space-0);
    width: auto;
    color: var(--primary-main);
}

footer .accordion.footer-accordion .bg-more {
    position: absolute;
    right: var(--space-0);
}

footer .accordion .accordion-item.active .accordion-content {
    margin-top: var(--space-15);
}

.footer-accordion .accordion-item .bg-more {
    background: var(--background-page-5);
}

.footer-accordion .accordion-item.active .bg-more span {
    color: var(--red-main-50);
}

.footer-accordion .accordion-content {
    text-align: center;
}

.footer-accordion .accordion-content .list {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    align-items: center;
}

.footer-accordion .accordion-content .list a {
    position: relative;
    display: inline-flex;
    gap: var(--space-0);
    align-items: center;
    text-decoration: none;
    color: var(--primary-text-muted);
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.footer-accordion .accordion-content .list a:not(.link):not(.phone-copy):not(.email-copy)::after {
    display: inline-block;
    width: 0;
    height: 12px;
    content: '';
    background-color: currentColor;
    mask-image: url("../../assets/icons/chevron-right.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 0;
    transition: width var(--transition-fast), opacity var(--transition-fast);
}

.footer-accordion .accordion-content .list a.phone-copy,
.footer-accordion .accordion-content .list a.email-copy {
    gap: var(--space-8);
}

.footer-accordion .accordion-content .list a:is(.is-current-page, [aria-current="page"]) {
    gap: var(--space-0);
    color: var(--primary-text-main);
    font-weight: 700;
}

.footer-accordion .accordion-content .list a:is(.is-current-page, [aria-current="page"]):not(.link):not(.phone-copy):not(.email-copy)::after {
    width: 0;
    opacity: 0;
}

.footer-accordion .accordion-content .list a:is(.is-current-page, [aria-current="page"])::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: var(--primary-main);
    border-radius: var(--radius-full);
}

.footer-accordion .accordion-content .list span {
    color: var(--primary-text-muted);
}

.footer-accordion .accordion-content .list .link {
    display: inline-flex;
    gap: var(--space-6);
    align-items: center;
    color: var(--text-inverted);
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.footer-accordion .accordion-content .list .link::after {
    display: inline-block;
    width: 14px;
    height: 14px;
    content: '';
    background-color: currentColor;
    mask-image: url("../../assets/icons/right-arrow.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 1;
    transition: width var(--transition-fast), opacity var(--transition-fast);
}

.footer-accordion .accordion-content .social {
    display: flex;
    gap: var(--space-10);
    justify-content: center;
    margin-top: var(--space-5);
}

.footer-accordion .phone-copy,
.footer-accordion .email-copy {
    white-space: nowrap;
}

.footer-accordion .accordion-content .copy-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
}

#what-bot-considers {
    padding: var(--space-80) var(--space-40);
}

#what-bot-considers .section-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#what-bot-considers .considerations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-30);
    width: 100%;
}

#what-bot-considers .consideration {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: var(--space-30);
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
    border-radius: var(--radius-m);
    transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

#what-bot-considers .consideration-header {
    display: flex;
    gap: var(--space-20);
    align-items: center;
}

#what-bot-considers .consideration .bg-icon {
    background: var(--primary-main-10);
}

#what-bot-considers .consideration .icon {
    color: var(--primary-main);
}

#what-bot-considers .consideration .h3 {
    color: var(--text-inverted);
}

#what-bot-considers .consideration .body-l {
    color: var(--primary-text-muted);
}

#faq .content {
    display: flex;
    gap: var(--space-16);
    width: 100%;
}

#faq .first-line {
    width: 100%;
}

#faq .faq-mascot-img {
    width: 561px;
    height: 477px;
    transition: filter var(--transition-smooth);
    animation: floatFaqMascot var(--float-duration) var(--ease-in-out) infinite;
    will-change: transform;
}

@keyframes floatFaqMascot {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@media (min-width: 1025px) {

    .tablet-item,
    .mobile-item {
        display: none !important;
    }

    .desktop-item {
        display: flex !important;
    }
}

#steps .cards {
    display: flex;
    flex-direction: row;
    gap: var(--space-16);
    width: 100%;
}

#steps .card {
    width: 100%;
}

#steps .bg-icon {
    width: 80px;
    height: 80px;
}

#steps .bg-icon .icon {
    width: 40px;
    height: 40px;
}

#steps .section-title {
    display: flex;
}

#steps button {
    margin-top: var(--space-50);
}

@media (min-width: 481px) and (max-width: 1024px) {

    .desktop-item,
    .mobile-item {
        display: none !important;
    }

    .tablet-item {
        display: flex !important;
    }

    #advantages .advantages.tablet-item {
        display: grid !important;
    }

    #advantages {
        margin: var(--space-60) var(--space-0);
    }

    #advantages .advantages {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
    }

    #advantages button {
        width: 100%;
        max-width: 400px;
    }

    footer .footer-logo-text {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    #advantages .advantage {
        transition: none;
    }

    #advantages .advantage:active {
        opacity: 0.9;
    }

    button:active::before,
    a.secondary:active::before,
    a.primary:active::before {
        width: 0;
        height: 0;
    }
}

@media (max-width: 1024px) {
    .hero-pills {
        flex-direction: column;
        gap: var(--space-8);
        width: 100%;
    }

    .knowledge-map-preview .knowledge-map-header {
        margin: var(--space-0) var(--space-n10) var(--space-16) !important;
    }

    .bot-platforms {
        width: 100% !important;
    }

    #hero .info .buttons {
        width: 100%;
    }

    .bot-platforms .platform-card {
        width: 100%;
    }

    .hero-pill {
        gap: var(--space-8);
        justify-content: center;
        padding: var(--space-10) var(--space-16);
        width: 100%;
    }

    .hero-pill-icon {
        width: 20px;
        height: 20px;
    }

    .hero-pill-icon .icon {
        width: 10px;
        height: 10px;
    }

    #faq .faq-mascot-img {
        width: 332px;
        height: 281px;
    }

    footer .footer-brand {
        padding-bottom: var(--space-20);
    }

    #faq .first-line .faq-mascot {
        display: none;
    }

    #steps .card:active {
        background-color: var(--background-dark-surface);
        border-color: var(--background-page-5);
        box-shadow: none;
        transform: none;
    }

    #steps .card:active .body-m {
        color: var(--primary-text-muted);
    }

    #steps .card:active .h4 {
        color: var(--text-inverted);
    }

    #steps .card:active .bg-icon {
        background-color: var(--background-page-10);
        transform: none;
    }

    #faq .content {
        flex-direction: column;
        gap: var(--space-0);
    }

    #what-bot-considers {
        padding: var(--space-60) var(--space-30);
    }

    #what-bot-considers .considerations {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-20);
    }

    #what-bot-considers .consideration {
        padding: var(--space-25);
    }

    #what-bot-considers .consideration .bg-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    #what-bot-considers .consideration .icon {
        width: 30px !important;
        height: 30px !important;
    }

    footer .desktop-item {
        display: none !important;
    }

    html,
    body {
        overflow-x: clip;
    }

    body {
        padding: var(--space-120) var(--space-16) var(--space-16) var(--space-16);
    }

    body.auth-layout {
        justify-content: flex-start;
        padding: var(--space-120) var(--space-16) var(--space-8) var(--space-16);
    }

    body.auth-layout main {
        min-height: calc(100vh - 120px);
    }

    section:not(.bg-dark, #selector) {
        padding-left: var(--space-16) !important;
        padding-right: var(--space-16) !important;
    }

    section br.tablet {
        display: block;
    }

    section .section-title {
        margin-bottom: var(--space-30);
    }

    .section-title .line {
        align-items: center;
    }

    .bg-icon {
        width: 50px;
        height: 50px;
    }

    section:not(header) .buttons,
    section:not(header) button {
        width: 100%;
    }

    .bg-dark {
        margin-left: var(--space-0);
        padding: var(--space-60) var(--space-30);
        width: 100% !important;
        border-radius: var(--radius-xl);
    }

    header {
        padding: var(--space-10) var(--space-10) var(--space-10) var(--space-20);
        width: 95%;
        transition: all var(--transition-fast);
    }

    header nav {
        display: none;
    }

    header button {
        height: 42px;
        transition: all var(--trans-base);
    }

    header.burger-active button {
        height: 68px !important;
    }

    header.burger-active.on-dark {
        --logo-dynamic-color: var(--primary-text-main) !important;
    }

    header.burger-active.on-dark button.secondary {
        color: var(--primary-text-secondary) !important;
        border-color: var(--primary-text-secondary) !important;
    }

    header.burger-active.on-dark #logo span {
        color: var(--primary-text-secondary) !important;
    }

    header.burger-active.on-dark .menu {
        background: var(--primary-text-main) !important;
    }

    .burger-trigger span {
        display: block !important;
    }

    .burger-trigger {
        display: flex !important;
    }

    #selector {
        width: 480px;
        height: 68px;
    }

    footer {
        padding: var(--space-50) var(--space-25) !important;
    }

    footer .main:not(.desktop-item) {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr;
        grid-template-rows: auto auto;
        column-gap: var(--space-40);
        row-gap: var(--space-40);
        margin-bottom: var(--space-60);
    }

    footer .line:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    footer .line:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    footer .line.fund {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        width: 100% !important;
        max-width: 100%;
        margin-top: var(--space-0);
    }

    footer .line {
        width: 100% !important;
    }

    footer .legal {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: var(--space-20);
        flex-wrap: wrap;
    }

    footer .legal .links {
        display: flex !important;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: var(--space-15) var(--space-20);
        justify-content: center;
        width: 100%;
    }

    footer .legal .links a {
        width: auto;
        white-space: normal;
        text-align: center;
    }

    footer .legal>span {
        margin-right: var(--space-0);
        width: 100%;
        white-space: nowrap;
        text-align: center;
    }

    #burger-menu {
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: var(--background-page);
        color: var(--primary-text-main);
        justify-content: flex-start;
        padding: calc(var(--space-140) + var(--safe-area-top)) var(--space-20) calc(var(--space-40) + var(--safe-area-bottom)) var(--space-20);
        gap: var(--space-40);
        overflow-y: auto;
        box-sizing: border-box;
    }

    footer .scroll-to-top:active {
        box-shadow: none;
        transform: none;
    }

    footer .scroll-to-top:active .icon {
        background-color: var(--primary-text-secondary);
    }

    footer .scroll-to-top:active::before {
        width: 0;
        height: 0;
    }

    .auth-page {
        justify-content: flex-start;
        padding: var(--space-30) var(--space-30) var(--space-60);
        min-height: auto;
    }

    .auth-page #auth-popup .pop-up-content {
        width: 100%;
        max-width: 680px;
    }
}

.floating-nav-trigger {
    position: fixed;
    right: var(--space-30);
    top: var(--space-50p);
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--background-surface);
    border: 1px solid var(--primary-main-15);
    backdrop-filter: var(--bg-blur);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: all var(--trans-smooth);
}

.floating-nav-trigger.is-hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(var(--space-12));
    pointer-events: none;
}

.floating-nav-trigger .icon {
    color: var(--primary-text-secondary);
    transition: all var(--trans-base);
}

.floating-nav-trigger.active {
    background: var(--primary-main-10);
    border-color: var(--primary-main);
    transform: translateY(-50%) rotate(90deg);
}

.floating-nav-trigger.active .icon {
    color: var(--primary-main);
}

.side-nav-panel {
    position: fixed;
    right: var(--space-0);
    top: var(--space-0);
    height: 100vh;
    width: 380px;
    background: var(--background-surface);
    box-shadow: -5px 0 50px var(--primary-main-15);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.side-nav-panel.active {
    transform: translateX(0);
}

.side-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-30) var(--space-30) var(--space-20) var(--space-30);
    border-bottom: 1px solid var(--primary-main-10);
}

.side-nav-header .caption-page {
    color: var(--primary-text-secondary);
}

.side-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--background-page);
    border-radius: var(--radius-full);
    transition: all var(--trans-base);
    cursor: pointer;
}

.side-nav-close .icon {
    color: var(--primary-text-secondary);
}

.side-nav-content {
    flex: 1;
    padding: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    overflow-y: auto;
}

.side-nav-item {
    position: relative;
    display: flex;
    gap: var(--space-16);
    align-items: center;
    overflow: hidden;
    padding: var(--space-18);
    text-decoration: none;
    background: var(--background-page);
    border-radius: var(--radius-m);
    transform: translateZ(0);
    transition: transform var(--trans-base), background-color var(--trans-base), box-shadow var(--trans-base);
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.side-nav-item::before {
    content: '';
    position: absolute;
    left: var(--space-0);
    top: var(--space-0);
    height: 100%;
    width: 4px;
    background: var(--primary-main);
    transform: scaleY(0);
    transition: transform var(--trans-base);
}

.side-nav-item .bg-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--primary-main-10);
    border-radius: var(--radius-full);
    transition: all var(--trans-base);
}

.side-nav-item .bg-icon .icon {
    color: var(--primary-main);
}

.side-nav-item .info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.side-nav-item .info .h4 {
    color: var(--primary-text-main);
    transition: color var(--trans-base);
}

.side-nav-item .info .caption {
    color: var(--primary-text-secondary);
}

.side-nav-item.active {
    background: var(--primary-main-5);
    border: 1px solid var(--primary-main-25);
    box-shadow: var(--primary-faint-glow);
}

.side-nav-item.active::before {
    width: 3px;
    transform: scaleY(1);
}

.side-nav-item.active .bg-icon {
    background: var(--primary-main);
    box-shadow: 0 4px 12px var(--primary-main-25);
}

.side-nav-item.active .bg-icon .icon {
    color: var(--text-inverted);
}

.side-nav-item.active .info .h4 {
    color: var(--primary-main);
}

.side-nav-overlay {
    position: fixed;
    top: var(--space-0);
    left: var(--space-0);
    width: 100%;
    height: 100vh;
    background: var(--background-dark-surface-80);
    backdrop-filter: var(--bg-blur);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--trans-base);
}

.side-nav-overlay.active {
    visibility: visible;
    opacity: 1;
}

.burger-home-link {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-16);
    width: 100%;
    text-decoration: none;
    color: var(--primary-text-main);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    transition: all var(--trans-base);
}

#burger-menu .navigation a.active {
    background: var(--primary-main-10);
    border: 1px solid var(--primary-main-25);
}

#burger-menu .navigation a.active .h4 {
    color: var(--primary-main);
}

.tablet-item {
    display: none;
}

.mobile-item {
    display: none;
}

.site-multiline-text {
    white-space: pre-line;
}

#faq img {
    width: 600px;
    height: auto;
}

@media (max-width: 1024px) {
    .tablet-item {
        display: flex;
    }

    #auth-popup .floating-input.success .password-toggle:active,
    #auth-popup .floating-input.success .password-toggle.active {
        background: none;
    }

    #auth-popup .password-toggle:active .icon.eye {
        animation: none;
    }

    .form .floating-input input,
    .form .floating-input textarea {
        font-size: var(--font-size-18);
    }

    .form .floating-input input:focus~label,
    .form .floating-input select:focus~label,
    .form .floating-input textarea:focus~label,
    .form .floating-input input:not(:placeholder-shown)~label,
    .form .floating-input select.has-value~label,
    .form .floating-input textarea:not(:placeholder-shown)~label,
    .form .floating-input input:-webkit-autofill~label,
    .form .custom-select__trigger:focus-visible~label,
    .form .custom-select.open label,
    .form .custom-select.has-value label {
        top: var(--space-12);
    }

    #selector {
        margin-bottom: var(--space-40);
    }

    #faq img {
        display: none;
    }
}

.copy-toast {
    position: fixed;
    bottom: var(--space-40);
    left: var(--space-50p);
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-24);
    background: var(--green-background);
    border-radius: var(--radius-m);
    box-shadow: var(--green-faint-glow);
    border: 1px solid var(--green-main-15);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-smooth);
    z-index: 10000;
    backdrop-filter: var(--bg-blur);
}

.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.copy-toast .icon {
    color: var(--green-main);
    filter: drop-shadow(0 0 8px var(--green-main-30));
}

.copy-toast .body-s {
    color: var(--green-text-main);
}

footer .legal .links a:is(.is-current-page, [aria-current="page"])::after {
    width: 100%;
    background-color: currentColor;
}

a.phone-copy,
a.email-copy,
a.copy-value,
span.phone-copy,
span.email-copy {
    position: relative;
    display: inline-flex;
    gap: var(--space-8);
    align-items: center;
    transition: color var(--transition-fast);
    cursor: pointer;
}

a.phone-copy .copy-icon,
a.email-copy .copy-icon,
a.copy-value .copy-icon,
span.phone-copy .copy-icon,
span.email-copy .copy-icon {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

a.phone-copy:active .copy-icon,
a.email-copy:active .copy-icon,
a.copy-value:active .copy-icon {
    transform: scale(0.9);
}

footer a.phone-copy .copy-icon,
footer a.email-copy .copy-icon {
    color: var(--primary-main);
}

a.phone-copy .copy-icon.check,
a.email-copy .copy-icon.check,
span.phone-copy .copy-icon.check,
span.email-copy .copy-icon.check {
    color: var(--green-main);
}

a.phone-copy.is-animating .copy-icon,
a.email-copy.is-animating .copy-icon,
span.phone-copy.is-animating .copy-icon,
span.email-copy.is-animating .copy-icon {
    transition: opacity var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

a.phone-copy:active,
a.email-copy:active,
a.copy-value:active,
span.phone-copy:active,
span.email-copy:active {
    transform: scale(0.98);
}

a.copy-value {
    text-decoration: none;
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .copy-toast {
        bottom: var(--space-30);
        gap: var(--space-10);
        padding: var(--space-14) var(--space-20);
    }

    a.phone-copy .copy-icon,
    a.email-copy .copy-icon,
    a.copy-value .copy-icon,
    span.phone-copy .copy-icon,
    span.email-copy .copy-icon {
        opacity: 0.7;
    }
}

@media (pointer: coarse) {

    footer a.phone-copy .copy-icon,
    footer a.email-copy .copy-icon,
    .footer-accordion .accordion-content a.phone-copy .copy-icon,
    .footer-accordion .accordion-content a.email-copy .copy-icon {
        display: none;
    }
}

@media (max-width: 1024px) {

    footer a.phone-copy .copy-icon,
    footer a.email-copy .copy-icon,
    .footer-accordion .accordion-content a.phone-copy .copy-icon,
    .footer-accordion .accordion-content a.email-copy .copy-icon {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    #steps .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        margin-bottom: var(--space-20);
    }

    #steps button {
        margin-top: var(--space-40);
    }

    #steps .bg-icon {
        width: 50px;
        height: 50px;
    }

    #steps .bg-icon .icon {
        width: 25px;
        height: 25px;
    }
}

button .icon,
a.primary .icon,
a.secondary .icon {
    transition: transform var(--duration-smooth) var(--ease-smooth), opacity var(--duration-smooth) var(--ease-smooth);
}

footer .bg-social .icon {
    animation: none !important;
}

@keyframes arrowFlyRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    13% {
        opacity: 0;
        transform: translateX(20px);
    }

    14% {
        opacity: 0;
        transform: translateX(-15px);
    }

    33%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes chevronDoubleRight {

    0%,
    33%,
    100% {
        transform: translateX(0);
    }

    17% {
        transform: translateX(5px);
    }
}

@keyframes arrowFlyDiagonal {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    13% {
        opacity: 0;
        transform: translate(12px, -12px);
    }

    14% {
        opacity: 0;
        transform: translate(-10px, 10px);
    }

    33%,
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes telegramFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    12% {
        opacity: 0;
        transform: translate(12px, -8px) rotate(15deg);
    }

    13% {
        opacity: 0;
        transform: translate(-8px, 6px) rotate(-10deg);
    }

    33%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes vkWave {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(0.95);
    }

    30% {
        transform: scale(1.05);
    }

    40%,
    100% {
        transform: scale(1);
    }
}

@keyframes userPulse {

    0%,
    33%,
    100% {
        transform: scale(1) translateY(0);
    }

    11% {
        transform: scale(1.12) translateY(-2px);
    }

    22% {
        transform: scale(1.05) translateY(-1px);
    }
}

@keyframes eyeBlink {

    0%,
    27%,
    100% {
        transform: scaleY(1);
    }

    12% {
        transform: scaleY(0.1);
    }

    15% {
        transform: scaleY(0.1);
    }
}

@keyframes eyeOpen {

    0%,
    27%,
    100% {
        transform: scaleY(1) rotate(0deg);
    }

    12% {
        transform: scaleY(1.1) rotate(-5deg);
    }

    20% {
        transform: scaleY(1) rotate(5deg);
    }
}

@keyframes bulbGlow {

    0%,
    33%,
    100% {
        filter: brightness(1);
        transform: scale(1) rotate(0deg);
    }

    10% {
        filter: brightness(1.3);
        transform: scale(1.2) rotate(-15deg);
    }

    20% {
        filter: brightness(1.2);
        transform: scale(1.1) rotate(10deg);
    }
}

@keyframes chevronBounce {

    0%,
    33%,
    100% {
        transform: translateY(0) rotate(180deg);
    }

    17% {
        transform: translateY(-6px) rotate(180deg);
    }
}

@keyframes menuExpand {

    0%,
    27%,
    100% {
        transform: scale(1);
    }

    13% {
        transform: scale(1.15);
    }
}

@keyframes closeSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

@keyframes nextSlide {

    0%,
    33%,
    100% {
        transform: translateX(0);
    }

    17% {
        transform: translateX(5px);
    }
}

@keyframes rocketLaunch {
    0% {
        transform: translateY(0);
    }

    2.5% {
        transform: translateY(0) translateX(0.5px);
    }

    5% {
        transform: translateY(-1px) translateX(-0.5px);
    }

    7.5% {
        transform: translateY(-1px) translateX(0.5px);
    }

    10% {
        transform: translateY(-2px) translateX(-0.5px);
    }

    20% {
        transform: translateY(-4px) translateX(0.3px);
    }

    30% {
        transform: translateY(-6px) translateX(-0.3px);
    }

    40% {
        transform: translateY(-4px);
    }

    50%,
    100% {
        transform: translateY(0);
    }
}

@keyframes whatsappShake {

    0%,
    27%,
    100% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-15deg);
    }

    11% {
        transform: rotate(15deg);
    }

    16% {
        transform: rotate(-10deg);
    }

    22% {
        transform: rotate(10deg);
    }
}

@keyframes copyPop {

    0%,
    27%,
    100% {
        transform: scale(1);
    }

    13% {
        transform: scale(1.2);
    }
}

@keyframes checkBounce {

    0%,
    27%,
    100% {
        transform: scale(1);
    }

    8% {
        transform: scale(0.8);
    }

    16% {
        transform: scale(1.15);
    }
}

@keyframes zapPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-8deg);
    }
}

@keyframes historySpin {

    0%,
    100% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    70% {
        transform: rotate(6deg);
    }
}

@keyframes copyIconOut {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }
}

@keyframes checkIconIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(90deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.3) rotate(-10deg);
    }

    75% {
        transform: scale(0.9) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes checkIconOut {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(90deg);
    }
}

@keyframes copyIconIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.icon.copy-out {
    animation: copyIconOut var(--duration-fast) var(--ease-in) forwards;
}

.icon.check-in {
    animation: checkIconIn var(--duration-normal) var(--ease-bounce) forwards;
}

.icon.check-out {
    animation: checkIconOut var(--duration-fast) var(--ease-in) forwards;
}

.icon.copy-in {
    animation: copyIconIn var(--duration-normal) var(--ease-bounce) forwards;
}

@keyframes sendLetterFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    12% {
        opacity: 0;
        transform: translate(15px, -10px) rotate(20deg);
    }

    13% {
        opacity: 0;
        transform: translate(-12px, 8px) rotate(-10deg);
    }

    33%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes demoPlay {

    0%,
    27%,
    100% {
        transform: scale(1);
    }

    13% {
        transform: scale(1.15) translateX(2px);
    }
}

@keyframes compasSpin {
    0% {
        transform: rotate(0deg);
    }

    33%,
    100% {
        transform: rotate(360deg);
    }
}

@keyframes chevronNudge {

    0%,
    27%,
    100% {
        transform: translateX(0);
    }

    13% {
        transform: translateX(4px);
    }
}

@keyframes chevronNudgeLeft {

    0%,
    27%,
    100% {
        transform: translateX(0);
    }

    13% {
        transform: translateX(-4px);
    }
}

@keyframes registerPop {

    0%,
    33%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    11% {
        transform: scale(1.15) rotate(-5deg);
    }

    22% {
        transform: scale(1.05) rotate(2deg);
    }
}

@keyframes mapPulse {

    0%,
    33%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    17% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

@keyframes handshakeShake {

    0%,
    27%,
    100% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(8deg);
    }

    11% {
        transform: rotate(-8deg);
    }

    16% {
        transform: rotate(5deg);
    }

    22% {
        transform: rotate(-5deg);
    }
}

@keyframes fileDownload {

    0%,
    27%,
    100% {
        transform: translateY(0);
    }

    13% {
        transform: translateY(4px);
    }

    19% {
        transform: translateY(-2px);
    }
}

@keyframes settingsAdjust {

    0%,
    33%,
    100% {
        transform: scaleY(1);
    }

    8% {
        transform: scaleY(0.95) scaleX(1.02);
    }

    17% {
        transform: scaleY(1.05) scaleX(0.98);
    }

    25% {
        transform: scaleY(0.97) scaleX(1.01);
    }
}

@keyframes commentType {

    0%,
    33%,
    100% {
        transform: scale(1);
    }

    8% {
        transform: scale(1.05) translateY(-1px);
    }

    17% {
        transform: scale(1.08) translateY(-2px);
    }

    25% {
        transform: scale(1.05) translateY(-1px);
    }
}

@keyframes presentationSlide {

    0%,
    33%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }

    13% {
        opacity: 0.9;
        transform: translateX(-3px);
    }

    17% {
        opacity: 0.9;
        transform: translateX(3px);
    }
}

@keyframes phoneRing {

    0%,
    27%,
    100% {
        transform: rotate(0deg);
    }

    3% {
        transform: rotate(15deg);
    }

    5% {
        transform: rotate(-15deg);
    }

    8% {
        transform: rotate(12deg);
    }

    11% {
        transform: rotate(-12deg);
    }

    13% {
        transform: rotate(8deg);
    }

    16% {
        transform: rotate(-8deg);
    }

    19% {
        transform: rotate(4deg);
    }

    22% {
        transform: rotate(-4deg);
    }
}

.full-page {
    top: var(--space-36);
}

@keyframes mailOpen {

    0%,
    27%,
    100% {
        transform: scale(1) rotateX(0deg);
    }

    8% {
        transform: scale(1.1) rotateX(-15deg);
    }

    16% {
        transform: scale(1.05) rotateX(5deg);
    }
}

@media (max-width: 1024px) {

    *:active,
    *:active *,
    *:active::before,
    *:active::after,
    *:active *::before,
    *:active *::after {
        animation-duration: var(--duration-fast) !important;
        animation-iteration-count: 1 !important;
        animation-timing-function: var(--ease-out) !important;
        transition-duration: var(--duration-fast) !important;
        transition-timing-function: var(--ease-out) !important;
    }
}

@media (min-width: 1025px) {
    .tablet-item {
        display: none !important;
    }

    .mobile-item {
        display: none !important;
    }

    .desktop-item {
        display: flex !important;
    }

    #what-bot-considers .considerations.desktop-item {
        display: grid !important;
    }

    #advantages .advantages.desktop-item,
    #advantages .advantages.tablet-item {
        display: grid !important;
    }
}

@media (hover: hover) {
    .platform-card:hover {
        border-color: var(--primary-main-50);
        transform: var(--up-shift-2);
    }

    .platform-card:hover .caption .icon {
        transform: translateX(3px);
    }

    .bg-dark .platform-card:hover {
        border-color: var(--white-30);
    }

    .cookie-banner-text a:hover {
        color: var(--primary-main-hover);
        background-image: linear-gradient(var(--primary-main-hover), var(--primary-main-hover));
        background-size: 100% 1px;
    }

    .knowledge-map-preview [data-tooltip] {
        position: relative;
        overflow: visible;
    }

    .knowledge-map-preview [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(var(--space-100p) + var(--space-8));
        left: var(--space-50p);
        transform: translateX(-50%) translateY(-5px);
        padding: var(--space-6) var(--space-10);
        background: var(--background-dark-surface);
        color: var(--text-inverted);
        border-radius: var(--radius-s);
        font-size: var(--font-size-12);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-fast), transform var(--transition-fast);
        z-index: 100;
        pointer-events: none;
    }

    .knowledge-map-preview [data-tooltip]:hover::after {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .knowledge-map-preview .km-train-btn:hover {
        background: var(--primary-main-hover);
    }

    .knowledge-map-preview .knowledge-map-section.green .km-train-btn:hover {
        background: var(--green-main-hover);
    }

    .knowledge-map-preview .knowledge-map-section.orange .km-train-btn:hover {
        background: var(--orange-main-hover);
    }

    .knowledge-map-preview .knowledge-map-section.red .km-train-btn:hover {
        background: var(--red-main-hover);
    }

    .knowledge-map-preview .knowledge-map-section.red .km-repeat-btn:hover {
        background: var(--red-main-10);
        border-color: var(--red-main);
    }

    .knowledge-map-preview .knowledge-map-section.red .km-repeat-btn:hover .icon {
        color: var(--red-main) !important;
    }

    .knowledge-map-preview .knowledge-map-section.orange .km-repeat-btn:hover {
        background: var(--orange-main-10);
        border-color: var(--orange-main);
    }

    .knowledge-map-preview .knowledge-map-section.orange .km-repeat-btn:hover .icon {
        color: var(--orange-main) !important;
    }

    .knowledge-map-preview .knowledge-map-section.green .km-repeat-btn:hover {
        background: var(--green-main-10);
        border-color: var(--green-main);
    }

    .knowledge-map-preview .knowledge-map-section.green .km-repeat-btn:hover .icon {
        color: var(--green-main) !important;
    }

    .knowledge-map-preview .km-repeat-btn:hover .icon.repeat {
        animation: historySpin var(--duration-icon-loop) var(--ease-smooth) infinite;
    }

    .knowledge-map-preview .knowledge-map-section.green .km-subject-item:hover {
        background: var(--green-main-10);
        border-color: var(--green-main-15);
    }

    .knowledge-map-preview .knowledge-map-section.orange .km-subject-item:hover {
        background: var(--orange-main-10);
        border-color: var(--orange-main-15);
    }

    .knowledge-map-preview .knowledge-map-section.red .km-subject-item:hover {
        background: var(--red-main-10);
        border-color: var(--red-main-15);
    }

    header:not(.burger-active):not(.is-scrolled):not(.is-at-top):not(.on-dark):not(.on-light):not(.on-contrast):hover {
        background-color: var(--background-surface-70);
        border-color: var(--background-surface-25);
    }

    .selector-item:not(.active):hover span {
        color: var(--primary-main);
        opacity: 1;
        transform: scale(1.03);
    }

    .hero-pill:hover {
        border-color: var(--primary-text-secondary-20);
    }

    header #logo {
        transition: transform var(--transition-smooth);
    }

    header #logo:hover {
        transform: translateX(-5px);
    }

    header #logo svg {
        transition: transform var(--transition-smooth);
    }

    header #logo:hover svg {
        transform: rotate(-10deg);
    }

    #advantages .advantage:hover {
        border-color: var(--primary-main-25);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    .form .text-highlight:hover {
        color: var(--primary-main);
    }

    .auth-page .back-link:hover {
        color: var(--primary-main);
        transform: translateX(-5px);
    }

    .auth-page .back-link:hover .icon {
        background-color: var(--primary-main);
    }

    .form .remember-me:hover span {
        color: var(--primary-text-primary);
    }

    #auth-popup .forgot-password:hover,
    #auth-popup .back-to-login:hover {
        background-size: 100% 1px;
    }

    #auth-popup .auth-switch a:hover {
        background-size: 100% 1px;
    }

    #auth-popup .back-button:hover {
        background: var(--primary-main-15);
        transform: translateY(-50%) translateX(-2px);
    }

    .form .password-toggle:hover {
        color: var(--primary-main);
        background: var(--primary-main-10);
    }

    .form .password-toggle:hover .icon.eye {
        animation: eyeBlink 1.5s var(--ease-in-out) infinite;
    }

    .form .password-toggle:hover .icon.eye-off {
        animation: eyeOpen 1.5s var(--ease-in-out) infinite;
    }

    #auth-popup .password-toggle:hover {
        color: var(--primary-main);
        background: transparent;
    }

    #auth-popup .password-toggle:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    #auth-popup .floating-input.filled .password-toggle:hover,
    #auth-popup .floating-input.success .password-toggle:hover {
        color: var(--green-main);
        background: transparent;
    }

    #auth-popup .floating-input.filled .password-toggle:hover::before,
    #auth-popup .floating-input.success .password-toggle:hover::before {
        background: linear-gradient(180deg, var(--green-main-10), var(--green-main-20));
        opacity: 1;
        transform: scale(1);
    }

    #auth-popup .floating-input.error .password-toggle:hover {
        color: var(--red-main);
        background: transparent;
    }

    #auth-popup .floating-input.error .password-toggle:hover::before {
        background: linear-gradient(180deg, var(--red-main-10), var(--red-main-15));
        opacity: 1;
        transform: scale(1);
    }

    #auth-popup .change-email-link:hover {
        color: var(--primary-main);
        background: var(--primary-main-10);
    }

    #auth-popup .resend-link:not(.disabled):hover {
        background-size: 100% 1px;
    }

    .form .accept .content:hover .agreement-text {
        color: var(--primary-text-main);
    }

    .form .accept .content:hover a.text-highlight {
        color: var(--primary-main);
    }

    .form .accept a.text-highlight:hover {
        background-size: 100% 1px;
    }

    .form .floating-input select:hover:not(:focus) {
        background: var(--background-surface);
        border-color: var(--primary-main-30);
    }

    .form .floating-input input:-webkit-autofill:hover,
    .form .floating-input.select-wrapper:hover::before {
        background: linear-gradient(90deg, transparent 0%, var(--background-surface) 40%);
    }

    .form .floating-input.select-wrapper:hover::after {
        color: var(--primary-main);
    }

    .form select option:hover,
    .form .custom-select__trigger:hover {
        background: var(--background-surface);
        border-color: var(--primary-main-30);
    }

    .form .custom-select:hover::after {
        color: var(--primary-main);
    }

    .form .custom-select__option:hover {
        color: var(--primary-main);
        background: var(--primary-main-10);
    }

    .form .custom-select__options::-webkit-scrollbar-thumb:hover {
        background: var(--primary-main-50);
    }

    .form .checkbox-label:hover span {
        color: var(--primary-text-main);
    }

    .form .checkbox-label a:hover {
        background-size: 100% 1px;
    }

    #auth-popup .form .floating-input.filled input:-webkit-autofill:hover,
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary-main-40), var(--primary-main-50));
        box-shadow: 0 0 8px var(--primary-main-25);
    }

    button:hover::before,
    a.secondary:hover::before,
    a.primary:hover::before,
    .platform-card:hover::before {
        width: var(--ripple-size);
        height: var(--ripple-size);
    }

    button.primary:hover,
    a.primary:hover {
        box-shadow: var(--primary-glow);
        transform: var(--up-shift-2);
    }

    button.secondary:hover,
    a.secondary:hover {
        color: var(--secondary-button-text-color, var(--primary-text-secondary));
        box-shadow: var(--secondary-faint-glow);
        transform: var(--up-shift-2);
    }

    button.primary.blue:hover {
        box-shadow: var(--blue-glow);
        transform: var(--up-shift-2);
    }

    button.light-more:hover {
        background: var(--primary-main-5);
    }

    button.dark-more:hover {
        background: var(--background-page-5);
    }

    ul a:hover {
        color: var(--primary-main) !important;
    }

    header.on-light ul a:hover,
    header.on-contrast ul a:hover {
        color: var(--primary-main);
    }

    #selector .selector-item:not(.active):hover {
        color: var(--primary-text-main);
    }

    #selector .selector-item:hover span {
        transform: var(--scale-decrease);
    }

    #steps .card:hover {
        background-color: var(--background-page-5);
        border-color: var(--primary-main-25);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #steps .card:hover .bg-icon {
        color: var(--text-inverted);
        background-color: var(--primary-main);
        transform: var(--scale-increase) var(--rotate-5);
    }

    #steps .card:hover .h4 {
        color: var(--primary-main);
    }

    #steps .card:hover .body-m {
        color: var(--text-inverted);
    }

    #why .accordion .accordion-item.active:hover .bg-more {
        background-color: var(--red-main-25);
        box-shadow: 0 0 0 4px var(--red-main-15);
        transform: rotate(45deg) scale(1.15);
    }

    #why .accordion .accordion-item.active:hover .bg-more span {
        color: var(--red-main);
    }

    .accordion .accordion-item:not(.active):hover {
        transform: var(--up-shift-3) var(--scale-increase);
    }

    .accordion.light .accordion-item:not(.active):hover {
        background: var(--background-surface-90);
    }

    .accordion.light .accordion-item:not(.active):hover .bg-more {
        background-color: var(--primary-main-10);
    }

    .accordion.light .accordion-item:not(.active):hover .bg-more span {
        color: var(--primary-main);
    }

    .accordion.faq .accordion-item:not(.active):hover {
        background: var(--background-dark-surface-80);
        border-color: var(--background-page-10);
    }

    .accordion.faq .accordion-item:not(.active):hover .bg-more {
        background-color: var(--green-main-5);
        transform: scale(1.1);
    }

    .accordion.faq .accordion-item:not(.active):hover .bg-more span {
        color: var(--green-main);
    }

    .accordion.faq .accordion-item.active:hover .bg-more {
        background-color: var(--red-main-25);
        box-shadow: 0 0 0 4px var(--red-main-15);
        transform: rotate(45deg) scale(1.15);
    }

    .accordion.faq .accordion-item.active:hover .bg-more span {
        color: var(--red-main);
    }

    .close-popup:hover {
        color: var(--popup-close-color-hover);
        background: var(--popup-close-bg-hover);
        border-color: var(--popup-close-border-hover);
        transform: rotate(90deg) scale(1.04);
    }

    footer .footer-logo:hover {
        transform: translateX(-5px);
    }

    footer .footer-logo:hover svg {
        transform: rotate(-10deg);
    }

    footer .scroll-to-top:hover {
        box-shadow: var(--secondary-faint-glow);
        transform: translateY(-5px);
    }

    footer .scroll-to-top:hover .icon {
        background-color: var(--text-inverted);
    }

    footer .line:not(.fund) .list>a:not(.phone-copy):not(.email-copy):hover {
        gap: var(--space-6);
        color: var(--text-inverted);
        transform: translateX(5px);
    }

    footer .line:not(.fund) .list>a:not(.phone-copy):not(.email-copy):hover::after {
        width: 12px;
        opacity: 1;
    }

    footer .line:not(.fund) .list>a.phone-copy:hover,
    footer .line:not(.fund) .list>a.email-copy:hover {
        color: var(--text-inverted);
    }

    footer .fund .link:hover {
        gap: var(--space-6);
        color: var(--border-focus);
        transform: translateX(5px);
    }

    footer .fund .link:hover::after {
        width: 12px;
        opacity: 1;
    }

    footer .bg-social:hover {
        background-color: var(--primary-main);
        border-color: var(--primary-main);
        box-shadow: 0 10px 20px -5px var(--primary-main-50);
        transform: translateY(-5px) var(--scale-increase);
    }

    footer .bg-social:hover .icon,
    footer .bg-social:hover .site-social-icon-mask {
        background-color: var(--text-inverted) !important;
    }

    footer .legal .links a:hover {
        color: var(--primary-text-muted);
    }

    footer .legal .links a:hover::after {
        width: 100%;
    }

    .footer-mobile-sections .footer-navigation .list a:hover {
        color: var(--text-inverted);
    }

    .footer-accordion .accordion-item:not(.active):hover {
        background: var(--background-dark-surface-80);
        border-color: var(--background-page-10);
    }

    .footer-accordion .accordion-item:not(.active):hover .bg-more {
        background-color: var(--primary-main-10);
    }

    .footer-accordion .accordion-item:not(.active):hover .bg-more span {
        color: var(--primary-main);
    }

    .footer-accordion .accordion-content .list a:not(.phone-copy):not(.email-copy):hover {
        gap: var(--space-6);
        color: var(--text-inverted);
    }

    .footer-accordion .accordion-content .list a:not(.link):not(.phone-copy):not(.email-copy):hover::after {
        width: 14px;
        opacity: 1;
    }

    .footer-accordion .accordion-content .list a.phone-copy:hover,
    .footer-accordion .accordion-content .list a.email-copy:hover {
        color: var(--text-inverted);
    }

    .footer-accordion .accordion-content .list .link:hover {
        gap: var(--space-6);
        color: var(--primary-main);
    }

    .footer-accordion .accordion-content .list .link:hover::after {
        width: 14px;
        opacity: 1;
    }

    #what-bot-considers .consideration:hover {
        background: var(--background-dark-surface-80);
        border-color: var(--primary-main-25);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #faq:hover .faq-mascot-img {
        filter: drop-shadow(var(--green-faint-glow));
    }

    .floating-nav-trigger:hover {
        background: var(--primary-main-25);
        border-color: var(--primary-main-25);
        box-shadow: 0 8px 25px var(--primary-main-15);
        transform: translateY(-50%) scale(1.05);
    }

    .floating-nav-trigger:hover .icon {
        color: var(--primary-main);
    }

    .side-nav-close:hover {
        background: var(--primary-main-10);
        transform: rotate(90deg);
    }

    .side-nav-item:hover {
        background: var(--primary-main-5);
        transform: translateX(-5px);
    }

    .side-nav-item:hover::before {
        transform: scaleY(1);
    }

    .selector-item:hover::before {
        display: none !important;
    }

    .selector-item:not(.active):hover {
        background: var(--primary-main-10);
    }

    a.phone-copy:hover .copy-icon,
    a.email-copy:hover .copy-icon,
    a.copy-value:hover .copy-icon,
    span.phone-copy:hover .copy-icon,
    span.email-copy:hover .copy-icon {
        opacity: 1;
        transform: scale(1.1);
    }

    a.phone-copy.is-animating:hover .copy-icon,
    a.email-copy.is-animating:hover .copy-icon,
    span.phone-copy.is-animating:hover .copy-icon,
    span.email-copy.is-animating:hover .copy-icon {
        transform: none;
    }

    a.phone-copy:hover::after,
    a.email-copy:hover::after,
    a.copy-value:hover::after {
        width: 100%;
    }

    a.copy-value:hover {
        color: var(--primary-main-hover);
    }

    button:hover .icon.right-arrow,
    button:hover .icon.s-right-arrow,
    a.primary:hover .icon.right-arrow,
    a.primary:hover .icon.s-right-arrow {
        animation: arrowFlyRight 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.chevron-right-double,
    a.secondary:hover .icon.chevron-right-double {
        animation: chevronDoubleRight 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.top-right-arrow,
    a.secondary:hover .icon.top-right-arrow {
        animation: arrowFlyDiagonal 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.telegram,
    a.primary:hover .icon.telegram,
    a.secondary:hover .icon.telegram,
    .platform-card:hover .icon.telegram {
        animation: telegramFly 1.5s var(--ease-elastic) infinite;
    }

    .platform-card:hover .icon.vk {
        animation: vkWave 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.user,
    a.secondary:hover .icon.user {
        animation: userPulse 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.eye,
    a.primary:hover .icon.eye {
        animation: eyeBlink 1.5s var(--ease-in-out) infinite;
    }

    button:hover .icon.light-bulb,
    a.secondary:hover .icon.light-bulb {
        animation: bulbGlow 1.5s var(--ease-bounce) infinite;
    }

    .scroll-to-top:hover .icon.chevron-down {
        animation: chevronBounce 1.5s var(--ease-bounce) infinite;
    }

    .floating-nav-trigger:hover .icon.menu {
        animation: menuExpand 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.close,
    .close-popup:hover .icon.close,
    .side-nav-close:hover .icon.close {
        animation: closeSpin var(--transition-normal);
    }

    button:hover .icon.next {
        animation: nextSlide 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.rocket,
    a.primary:hover .icon.rocket,
    a.secondary:hover .icon.rocket {
        animation: rocketLaunch 2s var(--ease-smooth) infinite;
    }

    button:hover .icon.zap,
    a.primary:hover .icon.zap,
    a.secondary:hover .icon.zap {
        animation: zapPulse var(--duration-icon-loop) var(--ease-smooth) infinite;
    }

    button:hover .icon.whatsapp,
    a.primary:hover .icon.whatsapp,
    a.secondary:hover .icon.whatsapp {
        animation: whatsappShake 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.copy {
        animation: copyPop 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.check,
    a.primary:hover .icon.check {
        animation: checkBounce 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.history,
    a.primary:hover .icon.history,
    a.secondary:hover .icon.history {
        animation: historySpin var(--duration-icon-loop) var(--ease-smooth) infinite;
    }

    button:hover .icon.send-letter,
    a.primary:hover .icon.send-letter,
    a.secondary:hover .icon.send-letter {
        animation: sendLetterFly 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.demo,
    a.primary:hover .icon.demo,
    a.secondary:hover .icon.demo {
        animation: demoPlay 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.compas,
    a.primary:hover .icon.compas,
    a.secondary:hover .icon.compas {
        animation: compasSpin 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.chevron-right,
    a:hover .icon.chevron-right {
        animation: chevronNudge 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.chevron-left,
    a:hover .icon.chevron-left {
        animation: chevronNudgeLeft 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.register,
    a.primary:hover .icon.register,
    a.secondary:hover .icon.register {
        animation: registerPop 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.map,
    a.primary:hover .icon.map,
    a.secondary:hover .icon.map {
        animation: mapPulse 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.briefcase,
    a.primary:hover .icon.briefcase,
    a.secondary:hover .icon.briefcase {
        animation: handshakeShake 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.file-download,
    a.primary:hover .icon.file-download,
    a.secondary:hover .icon.file-download {
        animation: fileDownload 1.5s var(--ease-bounce) infinite;
    }

    button:hover .icon.vertical-settings,
    a.primary:hover .icon.vertical-settings,
    a.secondary:hover .icon.vertical-settings {
        animation: settingsAdjust 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.comment,
    a.primary:hover .icon.comment,
    a.secondary:hover .icon.comment {
        animation: commentType 1.5s var(--ease-smooth) infinite;
    }

    button:hover .icon.presentation,
    a.primary:hover .icon.presentation,
    a.secondary:hover .icon.presentation {
        animation: presentationSlide 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.phone,
    a.primary:hover .icon.phone,
    a.secondary:hover .icon.phone {
        animation: phoneRing 1.5s var(--ease-elastic) infinite;
    }

    button:hover .icon.mail,
    a.primary:hover .icon.mail,
    a.secondary:hover .icon.mail {
        animation: mailOpen 1.5s var(--ease-bounce) infinite;
    }
}

.cookie-banner {
    position: fixed;
    bottom: var(--space-0);
    left: var(--space-0);
    right: var(--space-0);
    z-index: 9998;
    background: var(--background-surface);
    border-top: 1px solid var(--primary-text-main-10);
    padding: var(--space-20) var(--space-40);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-30);
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.cookie-banner.active {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner.hiding {
    opacity: 0;
    transform: translateY(100%);
}

.cookie-banner-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cookie-banner-text span {
    color: var(--primary-text-main);
}

.cookie-banner-text a {
    color: var(--primary-main);
    text-decoration: none;
    transition: color var(--transition-fast), background-size var(--transition-fast);
    background-image: linear-gradient(var(--primary-main), var(--primary-main));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    width: max-content;
}

.cookie-banner-accept {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .cookie-banner {
        gap: var(--space-20);
        padding: var(--space-20) var(--space-30);
    }
}

.site-skeleton-block {
    display: block;
    border-radius: var(--radius-s);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

.site-skeleton-line {
    height: var(--skeleton-line-height-lg);
}

.site-skeleton-line.short {
    width: 112px;
}

.site-skeleton-line.tiny {
    width: 72px;
}

.site-skeleton-line.medium {
    width: 168px;
}

.site-skeleton-line.long {
    width: 240px;
}

.site-skeleton-line.full {
    width: 100%;
}

.site-skeleton-icon {
    width: 22px;
    height: 22px;
}

.phone-copy.is-loading,
.email-copy.is-loading {
    pointer-events: none;
}

.phone-copy.is-loading .site-skeleton-line,
.email-copy.is-loading .site-skeleton-line {
    flex-shrink: 0;
}

.bot-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    justify-content: center;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

.bot-platforms .platform-card {
    flex: 0 1 calc((100% - var(--space-12)) / 2);
    width: calc((100% - var(--space-12)) / 2);
    min-width: 0;
    max-width: calc((100% - var(--space-12)) / 2);
}

.platform-card {
    position: relative;
    display: flex;
    gap: var(--space-14);
    align-items: center;
    overflow: hidden;
    padding: var(--space-16) var(--space-24);
    width: 100%;
    text-decoration: none;
    background: var(--background-surface);
    border: 1px solid var(--primary-text-secondary-20);
    border-radius: var(--radius-m);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.platform-card.is-skeleton,
.platform-card.is-placeholder {
    cursor: default;
    pointer-events: none;
}

.platform-card.is-skeleton::before,
.platform-card.is-placeholder::before {
    display: none;
}

.platform-card.is-skeleton .platform-icon {
    background: transparent;
}

.platform-card.is-skeleton .platform-info {
    width: 100%;
}

.platform-card.is-skeleton .platform-info .site-skeleton-line+.site-skeleton-line {
    margin-top: var(--space-6);
}

.platform-card.is-placeholder {
    border-style: dashed;
}

.platform-card.is-placeholder .platform-info .caption {
    white-space: normal;
}

.platform-card::before {
    content: '';
    position: absolute;
    top: var(--ripple-y, var(--space-50p));
    left: var(--ripple-x, var(--space-50p));
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--primary-main-10);
    pointer-events: none;
    will-change: top, left, width, height;
    transform: translate(-50%, -50%);
    transition: top var(--transition-fast), left var(--transition-fast), width var(--ripple-duration), height var(--ripple-duration);
}

.bg-dark .platform-card::before {
    background: var(--white-10);
}

.platform-card .platform-icon {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--primary-main);
    background: var(--primary-main-10);
    border-radius: var(--radius-s);
}

.platform-card .platform-icon .icon {
    background-color: var(--primary-main);
}

.platform-card .platform-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.platform-card .platform-info .body-l-accent,
.platform-card .platform-info .body-m {
    text-align: left;
    color: var(--primary-text-main);
}

.platform-card .platform-info .caption {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    white-space: nowrap;
    color: var(--primary-text-secondary);
}

.platform-card .platform-info .caption .icon {
    background-color: var(--primary-text-secondary);
    transition: transform var(--transition-fast);
}

.bg-dark .platform-card {
    background: var(--white-10);
    border-color: var(--white-15);
}

.bg-dark .platform-card .platform-icon {
    color: var(--white-95);
    background: var(--white-15);
}

.bg-dark .platform-card .platform-icon .icon {
    background-color: var(--white-95);
}

.bg-dark .platform-card .platform-info .body-l-accent,
.bg-dark .platform-card .platform-info .body-m {
    text-align: left;
    color: var(--white-95);
}

.bg-dark .platform-card .platform-info .caption {
    color: var(--white-50);
}

.bg-dark .platform-card .platform-info .caption .icon {
    background-color: var(--white-50);
}

.bg-social.is-placeholder {
    opacity: 0.72;
    cursor: default;
    pointer-events: none;
}

.bg-social.is-loading {
    cursor: default;
    pointer-events: none;
}

.bg-social.is-loading .site-skeleton-icon {
    display: block;
    border-radius: var(--radius-full);
}

[data-site-contact-action]:disabled {
    cursor: not-allowed;
}

html.site-bootstrap-loading .phone-copy,
html.site-bootstrap-loading .email-copy {
    color: transparent !important;
    pointer-events: none;
    user-select: none;
    border-radius: var(--radius-s);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

html.site-bootstrap-loading .phone-copy .copy-icon,
html.site-bootstrap-loading .email-copy .copy-icon {
    opacity: 0;
}

html.site-bootstrap-loading .social .bg-social,
html.site-bootstrap-loading .socials .bg-social {
    pointer-events: none;
    cursor: default;
    box-shadow: none !important;
    border-color: transparent !important;
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%) !important;
    background-size: var(--skeleton-shimmer-size) 100% !important;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

html.site-bootstrap-loading .social .bg-social .icon,
html.site-bootstrap-loading .social .bg-social .site-social-icon-mask,
html.site-bootstrap-loading .socials .bg-social .icon,
html.site-bootstrap-loading .socials .bg-social .site-social-icon-mask {
    opacity: 0;
}

html.site-bootstrap-loading .bot-platforms .platform-card {
    cursor: default;
    pointer-events: none;
}

html.site-bootstrap-loading .bot-platforms .platform-card::before {
    display: none;
}

html.site-bootstrap-loading .bot-platforms .platform-card .platform-icon {
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%) !important;
    background-size: var(--skeleton-shimmer-size) 100% !important;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

html.site-bootstrap-loading .bot-platforms .platform-card .platform-icon .icon,
html.site-bootstrap-loading .bot-platforms .platform-card .platform-icon .site-social-icon-mask,
html.site-bootstrap-loading .bot-platforms .platform-card .platform-info .icon {
    opacity: 0;
}

html.site-bootstrap-loading .bot-platforms .platform-card .platform-info .body-l-accent,
html.site-bootstrap-loading .bot-platforms .platform-card .platform-info .body-m,
html.site-bootstrap-loading .bot-platforms .platform-card .platform-info .caption,
html.site-bootstrap-loading [data-site-bot-price] {
    color: transparent !important;
    border-radius: var(--radius-s);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

html.site-bootstrap-loading [data-site-bot-price] {
    pointer-events: none;
}

html.site-bootstrap-loading [data-site-bot-price] a,
html.site-bootstrap-loading [data-site-bot-price] .icon {
    opacity: 0;
}

html.site-bootstrap-loading [data-site-contact-action] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

html.site-bootstrap-loading [data-site-contact-action] .icon {
    opacity: 0;
}

html.site-bootstrap-loading #plans #selector .selector-item,
html.site-bootstrap-loading #tokens-selector .tokens-selector-item {
    pointer-events: none;
}

html.site-bootstrap-loading [data-site-contact-action]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(120px, 32vw, 190px);
    height: var(--skeleton-line-height-lg);
    transform: translate(-50%, -50%);
    border-radius: var(--radius-s);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

.bot-platforms.compact .platform-card {
    padding: var(--space-12) var(--space-18);
}

.bot-platforms.compact .platform-card .platform-icon {
    width: 36px;
    height: 36px;
}

.knowledge-map-preview {
    --font-family-base: var(--font-family-base-product);
    --font-family-display: var(--font-family-display-product);
    flex: 1 1 0%;
    box-sizing: border-box;
    padding: var(--space-16);
    width: 100%;
    min-width: 0;
    max-width: none;
    background: var(--background-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--primary-faint-glow);
}

.knowledge-map-preview .knowledge-map-header {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-16);
    padding: var(--space-20);
    background: var(--background-surface);
    border-bottom: 1px solid var(--primary-text-main-10);
}

.knowledge-map-preview button::before {
    display: none;
}

.knowledge-map-preview .knowledge-map-title {
    display: flex;
    gap: var(--space-12);
    align-items: center;
}

.knowledge-map-preview .knowledge-map-title .icon {
    width: 24px;
    height: 24px;
    color: var(--primary-main);
}

.knowledge-map-preview .knowledge-map-title .h4 {
    color: var(--primary-text-main);
}

.knowledge-map-preview .knowledge-map-summary {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.knowledge-map-preview .km-summary-item {
    display: flex;
    flex: 1;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-m);
}

.knowledge-map-preview .km-summary-item.green {
    background: var(--green-main-5);
    border: 1px solid var(--green-main-15);
}

.knowledge-map-preview .km-summary-item.green .body-s-semibold {
    color: var(--green-main);
}

.knowledge-map-preview .km-summary-item.green .caption {
    color: var(--green-text-secondary);
}

.knowledge-map-preview .km-summary-item.orange {
    background: var(--orange-main-5);
    border: 1px solid var(--orange-main-15);
}

.knowledge-map-preview .km-summary-item.orange .body-s-semibold {
    color: var(--orange-main);
}

.knowledge-map-preview .km-summary-item.orange .caption {
    color: var(--orange-text-secondary);
}

.knowledge-map-preview .km-summary-item.red {
    background: var(--red-main-5);
    border: 1px solid var(--red-main-15);
}

.knowledge-map-preview .km-summary-item.red .body-s-semibold {
    color: var(--red-main);
}

.knowledge-map-preview .km-summary-item.red .caption {
    color: var(--red-text-secondary);
}

.knowledge-map-preview .knowledge-map-section {
    margin-bottom: var(--space-16);
}

.knowledge-map-preview .knowledge-map-section:last-child {
    margin-bottom: var(--space-0);
}

.knowledge-map-preview .km-section-label {
    display: inline-block;
    margin-bottom: var(--space-8);
    padding: var(--space-3) var(--space-10);
    border-radius: var(--radius-full);
}

.knowledge-map-preview .km-section-label.green {
    color: var(--green-main);
    background: var(--green-main-10);
}

.knowledge-map-preview .km-section-label.orange {
    color: var(--orange-main);
    background: var(--orange-main-10);
}

.knowledge-map-preview .km-section-label.red {
    color: var(--red-main);
    background: var(--red-main-10);
}

.knowledge-map-preview .km-empty-note {
    color: var(--primary-text-secondary);
    opacity: 0.5;
}

.knowledge-map-preview .knowledge-map-section:has(.km-empty-note) {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-10);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-m);
}

.knowledge-map-preview .knowledge-map-section:has(.km-empty-note) .km-section-label {
    margin-bottom: var(--space-0);
}

.knowledge-map-preview .knowledge-map-section.green:has(.km-empty-note) {
    background: var(--green-main-5);
    border: 1px solid var(--green-main-15);
}

.knowledge-map-preview .knowledge-map-section.orange:has(.km-empty-note) {
    background: var(--orange-main-5);
    border: 1px solid var(--orange-main-15);
}

.knowledge-map-preview .knowledge-map-section.red:has(.km-empty-note) {
    background: var(--red-main-5);
    border: 1px solid var(--red-main-15);
}

.knowledge-map-preview .km-subjects {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.knowledge-map-preview .km-subject-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-6) var(--space-10);
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-m);
    align-items: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.knowledge-map-preview .knowledge-map-section.green .km-subject-item {
    background: var(--green-main-5);
    border: 1px solid var(--green-main-15);
}

.knowledge-map-preview .knowledge-map-section.green .km-subject-info .body-s-semibold {
    color: var(--green-text-main);
}

.knowledge-map-preview .knowledge-map-section.green .km-percent {
    color: var(--green-text-secondary);
}

.knowledge-map-preview .knowledge-map-section.orange .km-subject-item {
    background: var(--orange-main-5);
    border: 1px solid var(--orange-main-15);
}

.knowledge-map-preview .knowledge-map-section.orange .km-subject-info .body-s-semibold {
    color: var(--orange-text-main);
}

.knowledge-map-preview .knowledge-map-section.orange .km-percent {
    color: var(--orange-text-secondary);
}

.knowledge-map-preview .knowledge-map-section.red .km-subject-item {
    background: var(--red-main-5);
    border: 1px solid var(--red-main-15);
}

.knowledge-map-preview .knowledge-map-section.red .km-subject-info .body-s-semibold {
    color: var(--red-text-main);
}

.knowledge-map-preview .knowledge-map-section.red .km-percent {
    color: var(--red-text-secondary);
}

.knowledge-map-preview .km-subject-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
}

.knowledge-map-preview .km-subject-info .body-s-semibold {
    color: var(--primary-text-main);
}

.knowledge-map-preview .km-percent {
    color: var(--primary-text-secondary);
}

.knowledge-map-preview .km-bar {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 5px;
    border-radius: var(--radius-full);
}

.knowledge-map-preview .knowledge-map-section.green .km-bar {
    background: var(--green-main-15);
}

.knowledge-map-preview .knowledge-map-section.orange .km-bar {
    background: var(--orange-main-15);
}

.knowledge-map-preview .knowledge-map-section.red .km-bar {
    background: var(--red-main-15);
}

.knowledge-map-preview .km-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-smooth);
}

.knowledge-map-preview .km-bar-fill.green {
    background: var(--green-main);
}

.knowledge-map-preview .km-bar-fill.orange {
    background: var(--orange-main);
}

.knowledge-map-preview .km-bar-fill.red {
    background: var(--red-main);
}

.knowledge-map-preview .km-action-group {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
    align-items: center;
    justify-content: flex-end;
}

.knowledge-map-preview .km-action-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-0);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-s);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.knowledge-map-preview .km-train-btn {
    color: var(--text-inverted);
    background: var(--primary-main);
    border: none;
}

.knowledge-map-preview .knowledge-map-section.green .km-train-btn {
    background: var(--green-main);
}

.knowledge-map-preview .knowledge-map-section.orange .km-train-btn {
    background: var(--orange-main);
}

.knowledge-map-preview .knowledge-map-section.red .km-train-btn {
    background: var(--red-main);
}

.knowledge-map-preview .km-action-btn .icon {
    width: 20px;
    height: 20px;
}

.knowledge-map-preview .km-train-btn .icon {
    background-color: var(--text-inverted);
}

.knowledge-map-preview .km-repeat-btn {
    background: transparent;
    border: 1px solid;
}

.knowledge-map-preview .km-repeat-btn .icon {
    background-color: currentColor;
}

.knowledge-map-preview .knowledge-map-section.green .km-repeat-btn {
    color: var(--green-text-secondary);
    border-color: var(--green-main-15);
}

.knowledge-map-preview .knowledge-map-section.orange .km-repeat-btn {
    color: var(--orange-text-secondary);
    border-color: var(--orange-main-15);
}

.knowledge-map-preview .knowledge-map-section.red .km-repeat-btn {
    border-color: var(--red-text-secondary);
}

.knowledge-map-preview .knowledge-map-section.red .km-repeat-btn .icon {
    color: var(--red-text-secondary) !important;
}

.knowledge-map-preview .knowledge-map-section.green .km-repeat-btn {
    border-color: var(--green-text-secondary);
}

.knowledge-map-preview .knowledge-map-section.green .km-repeat-btn .icon {
    color: var(--green-text-secondary) !important;
}

.knowledge-map-preview .knowledge-map-section.orange .km-repeat-btn {
    border-color: var(--orange-text-secondary);
}

.knowledge-map-preview .knowledge-map-section.orange .km-repeat-btn .icon {
    color: var(--orange-text-secondary) !important;
}

.knowledge-map-preview .km-monthly-progress {
    display: none;
}

.knowledge-map-preview .km-progress-badge {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-14) var(--space-16);
    background: var(--green-main-5);
    border: 1px solid var(--green-main-15);
    border-radius: var(--radius-m);
}

.knowledge-map-preview .km-progress-badge .icon {
    width: 20px;
    height: 20px;
    color: var(--green-main);
}

.knowledge-map-preview .km-progress-badge .body-s {
    color: var(--primary-text-secondary);
}

.knowledge-map-preview .km-progress-value {
    margin-left: var(--space-auto);
    color: var(--green-main);
}

@media (max-width: 1024px) {
    .knowledge-map-preview {
        padding: var(--space-14);
    }

    body:not(.demo-layout):not(.trainer-layout):not(.onboarding-layout) .knowledge-map-preview .km-action-btn {
        padding: var(--space-0) !important;
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {

    .accordion .bg-more,
    .accordion .accordion-content {
        transition: none;
    }

    .pop-up {
        transition: opacity var(--transition-fast), visibility var(--transition-fast);
    }

    .pop-up-content {
        transform: translateY(20px);
        transition: transform var(--transition-fast), opacity var(--transition-fast);
    }

    .pop-up.active .pop-up-content {
        transform: translateY(0);
    }

    .accordion.faq .accordion-item:not(.active):active .bg-more span {
        color: var(--text-inverted);
    }

    #auth-popup .password-toggle:active .icon.eye {
        animation: eyeBlink 1.5s var(--ease-in-out) infinite;
    }

    #auth-popup .password-toggle:active .icon.eye-off {
        animation: eyeOpen 1.5s var(--ease-in-out) infinite;
    }

    .accordion.faq .accordion-item:not(.active):active .bg-more span {
        color: var(--text-inverted);
    }

    .accordion.footer-accordion .accordion-item:not(.active):active .bg-more {
        background: var(--background-page-5);
    }

    .accordion.footer-accordion .accordion-item:not(.active):active .bg-more span {
        color: var(--text-inverted);
    }

    .accordion.light .accordion-item:not(.active):active .bg-more {
        background: transparent;
    }

    .accordion.light .accordion-item:not(.active):active .bg-more span {
        color: var(--primary-text-secondary);
    }

    #how-olympus-works button {
        margin-top: var(--space-20) !important;
    }

    footer .scroll-to-top:active {
        box-shadow: none;
        transform: none;
    }

    footer .scroll-to-top:active .icon {
        background-color: var(--primary-text-secondary);
    }

    footer .scroll-to-top:active::before {
        width: 0;
        height: 0;
    }

    .desktop-item,
    .tablet-item {
        display: none !important;
    }

    .hero-pill {
        gap: var(--space-6);
        padding: var(--space-8) var(--space-12);
    }

    .hero-pill-icon {
        width: 18px;
        height: 18px;
    }

    .hero-pill-icon .icon {
        width: 9px;
        height: 9px;
    }

    #steps .card:active {
        background: var(--background-dark-surface) !important;
        border: 1px solid var(--background-page-5) !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    #steps .card:active .bg-icon {
        color: var(--background-surface) !important;
        background-color: var(--background-page-10) !important;
        transform: none !important;
    }

    #steps .card:active .h4 {
        color: var(--text-inverted) !important;
    }

    #steps .card:active .body-m {
        color: var(--primary-text-muted) !important;
    }

    section#steps {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .mobile-item {
        display: flex !important;
    }

    footer .footer-brand .hr {
        width: 60%;
    }

    .section-subtitle {
        margin-top: var(--space-10);
    }

    #advantages {
        margin: var(--space-30) var(--space-0);
    }

    #advantages .accordion .accordion-content .brief {
        padding: var(--space-8);
    }

    #advantages button {
        padding: var(--space-0) var(--space-20);
        width: 100%;
        height: 52px;
    }

    #advantages .advantages {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
    }

    .form .double-input-50-50 {
        flex-direction: column;
    }

    .form .double-input-50-50 .floating-input {
        width: 100%;
    }

    .form .double-input-60-40 {
        flex-direction: column;
    }

    .form .double-input-60-40 .floating-input:first-child {
        width: 100%;
    }

    .form .custom-select {
        position: relative;
        z-index: 10;
        width: 100% !important;
    }

    .form .custom-select.open {
        z-index: 100;
    }

    .form .custom-select__trigger {
        height: 68px !important;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .form .custom-select__options {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .form .custom-select__option {
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .form .custom-select label {
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    footer .footer-logo-text {
        display: none;
    }

    footer .scroll-to-top:active {
        box-shadow: none;
        transform: none;
    }

    footer .scroll-to-top:active .icon {
        background-color: var(--primary-text-secondary);
    }

    footer .scroll-to-top:active::before {
        width: 0;
        height: 0;
    }

    .auth-page {
        justify-content: flex-start;
        padding: var(--space-20) var(--space-16) var(--space-50);
        min-height: auto;
    }

    body {
        padding: var(--space-100) var(--space-8) var(--space-8) var(--space-8);
    }

    .auth-page .back-link {
        margin-bottom: var(--space-24);
    }

    .form .floating-input .error-toast,
    .form .accept .error-toast {
        display: none;
    }

    .form .floating-input.error .error-toast,
    .form .accept.error .error-toast {
        display: flex;
    }

    .form .floating-input input,
    .form .floating-input textarea {
        font-size: var(--font-size-18);
    }

    .auth-page .form .floating-input input,
    .auth-page .form .floating-input textarea {
        font-size: var(--font-size-14);
    }

    .auth-page .form .floating-input input[type="password"] {
        font-size: var(--font-size-12);
    }

    .form .floating-input input:focus~label,
    .form .floating-input select:focus~label,
    .form .floating-input textarea:focus~label,
    .form .floating-input input:not(:placeholder-shown)~label,
    .form .floating-input select.has-value~label,
    .form .floating-input textarea:not(:placeholder-shown)~label,
    .form .floating-input input:-webkit-autofill~label,
    .form .custom-select__trigger:focus-visible~label,
    .form .custom-select.open label,
    .form .custom-select.has-value label {
        top: var(--space-12);
    }

    #what-bot-considers {
        padding: var(--space-50) var(--space-16);
    }

    footer .footer-brand {
        padding-bottom: var(--space-20);
    }

    #what-bot-considers .section-title {
        margin-bottom: var(--space-30);
    }

    #what-bot-considers .accordion {
        gap: var(--space-12);
    }

    #what-bot-considers .accordion .accordion-title {
        gap: var(--space-16);
    }

    #what-bot-considers .accordion .bg-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        background: var(--primary-main-10);
        border-radius: var(--radius-m);
    }

    #what-bot-considers .accordion .bg-icon .icon {
        width: 22px !important;
        height: 22px !important;
        color: var(--primary-main);
    }

    #what-bot-considers .accordion .accordion-title .h3 {
        flex: 1;
        text-align: left;
        color: var(--text-inverted);
    }

    #what-bot-considers .accordion .accordion-content .body-l {
        color: var(--primary-text-muted);
    }

    #what-bot-considers .accordion .accordion-item:not(.active):active {
        background: var(--background-dark-surface);
        border-color: var(--background-page-5);
        transform: none;
    }

    #what-bot-considers .accordion .accordion-item.active {
        transform: none;
    }

    #what-bot-considers .accordion .accordion-item:not(.active) .bg-more {
        background: transparent !important;
    }

    #what-bot-considers .accordion .accordion-item:not(.active):active .bg-more {
        background: transparent !important;
        background-color: transparent !important;
        transform: none;
        box-shadow: none !important;
    }

    #what-bot-considers .accordion .accordion-item:not(.active):active .bg-more span {
        color: var(--text-inverted);
    }

    #what-bot-considers .accordion .accordion-item.active:active .bg-more span {
        color: var(--red-main);
    }

    #settings-popup .settings-section button:not(.settings-sub-choose-btn) {
        height: auto !important;
    }

    body:not(.demo-layout, .trainer-layout, .onboarding-layout) button:not(.child-add-btn, .settings-edit-name-btn, .settings-save-name-btn, .settings-copy-uid-btn, .profile-edit-name-btn) {
        height: 52px !important;
    }

    header #logo {
        gap: var(--space-0);
        transition: transform var(--transition-fast), gap var(--transition-fast);
    }

    header.burger-active #logo span {
        position: relative;
        z-index: 2002;
        max-width: var(--space-120);
        color: var(--primary-text-secondary);
        opacity: 1;
        transform: translateX(0);
    }

    header.burger-active #logo {
        gap: var(--space-10);
    }

    section:not(.bg-dark, .form) {
        padding: var(--space-0) var(--space-16);
        width: 100% !important;
    }

    .form {
        width: 100%;
    }

    section.bg-dark .h1:not(.mobile-item) {
        gap: var(--space-5);
    }

    .buttons {
        flex-direction: column;
        gap: var(--space-5);
    }

    body:not(.demo-layout):not(.trainer-layout):not(.onboarding-layout) section:not(.pop-up) button {
        padding: var(--space-0) !important;
        width: 100% !important;
        height: 52px !important;
    }

    section .section-title.tablet-item {
        display: none;
    }

    section .line {
        gap: var(--space-0);
    }

    .highlight {
        padding: var(--space-3);
        border-radius: var(--radius-xs);
    }

    body.auth-layout {
        align-items: center;
        justify-content: flex-start;
        padding: var(--space-100) var(--space-0) var(--space-16) var(--space-0);
    }

    body.auth-layout main {
        min-height: calc(100vh - 100px) !important;
    }

    html {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        scroll-padding-top: var(--space-80);
    }

    header {
        top: var(--space-20);
        width: 92%;
    }

    header .buttons button {
        display: none !important;
    }

    header #logo span {
        display: block !important;
        overflow: hidden;
        max-width: 0;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(var(--space-n8));
        transition: max-width var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
    }

    .bg-dark {
        width: 100%;
        margin-left: var(--space-0);
        padding: var(--space-40) var(--space-16);
        border-radius: var(--radius-l);
        margin: var(--space-0) var(--space-auto);
    }

    section:not(.bg-dark, #selector) {
        padding-left: var(--space-8) !important;
        padding-right: var(--space-8) !important;
    }

    #practice .card-name {
        text-align: center;
    }

    #selector {
        margin-bottom: var(--space-20) !important;
        width: 100%;
        max-width: 343px;
    }

    .pop-up-content {
        width: 96%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: var(--space-16);
        border-radius: min(var(--popup-surface-radius), var(--radius-l));
    }

    .close-popup {
        top: var(--space-10);
        right: var(--space-10);
    }

    .pop-up-title {
        margin-top: var(--space-5);
        width: 100%;
    }

    #auth-popup .pop-up-content {
        padding: var(--space-20) var(--space-16);
        width: 96%;
        min-height: auto;
        max-width: 400px;
    }

    #auth-popup .auth-state {
        flex-direction: column;
    }

    #auth-popup .auth-state img {
        display: none;
    }

    #auth-popup .auth-header {
        text-align: center;
    }

    #auth-popup .back-button {
        position: relative;
        left: var(--space-auto);
        top: var(--space-auto);
        transform: none;
        margin: var(--space-0) var(--space-auto) var(--space-10);
    }

    #auth-popup .back-button:active {
        transform: translateX(-2px);
    }

    #auth-popup .code-inputs {
        gap: var(--space-6);
    }

    .form .checkbox-label:active span {
        color: var(--primary-text-secondary);
    }

    #auth-popup .code-input {
        width: 42px;
        height: 50px;
        font-size: var(--font-size-20);
        line-height: 50px;
        padding: var(--space-0);
    }

    #auth-popup .floating-input.success .password-toggle:active,
    #auth-popup .floating-input.success .password-toggle.active {
        background: none;
    }

    #auth-popup .password-toggle:active .icon.eye {
        animation-duration: var(--duration-fast);
        animation-iteration-count: 1;
        animation-timing-function: var(--ease-out);
    }

    #auth-popup .status-icon {
        width: 56px;
        height: 56px;
    }

    #auth-popup .status-icon .icon {
        width: 28px;
        height: 28px;
    }

    .form .password-toggle {
        right: var(--space-12);
        width: 26px;
        height: 26px;
    }

    #auth-popup .password-toggle {
        right: var(--space-12);
        width: 26px;
        height: 26px;
    }

    #auth-popup .password-strength {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    #auth-popup .strength-bar {
        width: 100%;
    }

    #burger-menu {
        padding-top: calc(var(--space-110) + var(--safe-area-top));
        padding-left: var(--space-16);
        padding-right: var(--space-16);
        gap: var(--space-30);
        align-items: stretch;
    }

    #burger-menu .pages {
        grid-template-columns: 1fr;
        gap: var(--space-10);
        margin-top: var(--space-10);
    }

    #burger-menu .burger-home-link {
        justify-content: start;
        margin-top: var(--space-10);
    }

    #burger-menu .pages a {
        padding: var(--space-12) var(--space-16);
        width: 100%;
        height: auto;
    }

    #burger-menu .bg-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    #burger-menu .icon {
        width: 20px;
        height: 20px;
    }

    #burger-menu .pages a .info,
    #burger-menu .burger-home-link .info {
        gap: var(--space-2);
    }

    #burger-menu .sections {
        gap: var(--space-0);
    }

    #burger-menu .sections a {
        padding: var(--space-15) var(--space-0);
        border-bottom: 1px solid var(--background-page-5);
    }

    #burger-menu .sections a:last-child {
        border-bottom: none;
    }

    #burger-menu .caption-page {
        margin-bottom: var(--space-10);
        text-align: left;
        opacity: 0.7;
    }

    .accordion.faq .accordion-item:not(.active):active {
        background: var(--background-dark-surface);
        border-color: var(--background-page-5);
        transform: none;
    }

    .accordion.faq .accordion-item:not(.active):active .bg-more {
        background-color: transparent;
        transform: none;
    }

    .floating-nav-trigger,
    .side-nav-panel,
    .side-nav-overlay {
        display: none !important;
    }

    html {
        scroll-padding-top: var(--space-100);
    }

    #faq img {
        display: none;
    }

    .accordion .accordion-item.active .accordion-content {
        margin-top: var(--space-10);
    }

    #steps .card {
        flex-shrink: 0;
        padding: var(--space-10);
        width: 254px;
        min-width: 254px;
    }

    #steps .cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-bottom: var(--space-20);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #steps .cards::-webkit-scrollbar {
        display: none;
    }

    #steps .card {
        flex-shrink: 0;
        scroll-snap-align: center;
        margin: var(--space-0);
        width: 260px;
        min-width: 260px;
    }

    .mobile-item {
        display: flex;
    }

    a.phone-copy,
    a.email-copy,
    a.copy-value,
    span.phone-copy,
    span.email-copy {
        gap: var(--space-6);
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    a.phone-copy .copy-icon,
    a.email-copy .copy-icon,
    a.copy-value .copy-icon,
    span.phone-copy .copy-icon,
    span.email-copy .copy-icon {
        width: 16px;
        height: 16px;
        opacity: 0.8;
    }

    a.phone-copy:active .copy-icon,
    a.email-copy:active .copy-icon,
    span.phone-copy:active .copy-icon,
    span.email-copy:active .copy-icon {
        opacity: 1;
        transform: scale(0.9);
    }

    #steps button {
        margin-top: var(--space-20);
    }

    #steps .bg-icon {
        width: 40px;
        height: 40px;
    }

    #steps .bg-icon .icon {
        width: 20px;
        height: 20px;
    }

    .copy-toast {
        bottom: var(--space-20);
        gap: var(--space-8);
        padding: var(--space-12) var(--space-18);
        max-width: calc(100% - 40px);
    }

    .cookie-banner {
        flex-direction: column;
        gap: var(--space-16);
        align-items: center;
        padding: var(--space-20);
        text-align: center;
    }

    .cookie-banner-text {
        align-items: center;
    }

    .cookie-banner-accept {
        width: 100%;
    }

    .cookie-banner-accept button {
        width: 100%;
    }

    .bot-platforms {
        flex-direction: column;
        gap: var(--space-5);
        width: 100%;
    }

    .bot-platforms .platform-card,
    .platform-card {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .knowledge-map-preview {
        padding: var(--space-14);
    }

    .knowledge-map-preview .knowledge-map-header {
        margin: var(--space-0) var(--space-n14) var(--space-14);
    }

    .knowledge-map-preview .km-summary-item {
        gap: var(--space-6);
        padding: var(--space-10) var(--space-12);
    }

    .knowledge-map-preview .km-subject-item {
        padding: var(--space-10) var(--space-12);
    }

    .knowledge-map-preview .km-action-group {
        gap: var(--space-6);
    }

    body:not(.demo-layout):not(.trainer-layout):not(.onboarding-layout) .knowledge-map-preview .km-action-btn {
        padding: var(--space-0) !important;
        width: 44px !important;
        height: 44px !important;
    }
}

@keyframes olympus-skeleton-shift {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: calc(var(--skeleton-shimmer-size) + 200px) 0;
    }
}

.account-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.account-skeleton-list.compact {
    gap: var(--space-10);
}

.account-skeleton-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--primary-text-main-10);
    border-radius: var(--radius-m);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: var(--skeleton-shimmer-size) 100%;
    animation: olympus-skeleton-shift var(--duration-smooth) linear infinite;
}

.account-skeleton-list.compact .account-skeleton-row {
    padding: var(--space-10) var(--space-12);
}

.account-skeleton-block {
    display: block;
    flex: 1;
    height: var(--skeleton-line-height-lg);
    min-width: 0;
    background: var(--skeleton-highlight);
    border-radius: var(--radius-s);
}

.account-skeleton-block.short {
    flex: 0 0 96px;
    max-width: 96px;
}

.account-inline-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    min-height: 120px;
    text-align: center;
    color: var(--primary-text-main-50);
    background: var(--primary-text-main-5);
    border: 1px dashed var(--primary-text-main-10);
    border-radius: var(--radius-l);
}

.trainer-step-panel.trainer-api-loading .trainer-prose,
.trainer-step-panel.trainer-api-loading .trainer-choice-answers,
.trainer-step-panel.trainer-api-loading .trainer-input,
.trainer-step-panel.trainer-api-loading .trainer-textarea,
.trainer-step-panel.trainer-api-loading .trainer-board {
    opacity: 0.45;
}

.trainer-step-panel.trainer-api-loading .trainer-actions-row,
.selector-item.active {
    pointer-events: none;
}