#hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-30);
    align-items: center;
    padding-bottom: var(--space-20);
    width: 100%;
}

#hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

#hero .section-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: center;
}

#hero .section-subtitle {
    max-width: 700px;
    color: var(--primary-text-secondary);
}

#hero .buttons {
    display: flex;
    gap: var(--space-10);
    justify-content: center;
}

#bot-path {
    display: flex;
    flex-direction: column;
    gap: var(--space-30);
    padding: var(--space-80) var(--space-0);
}

#bot-path .path-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    align-items: center;
    width: 100%;
}

#bot-path .path-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#bot-path .path-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-16);
    width: 100%;
}

#bot-path .path-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    align-items: center;
    padding: var(--space-24) var(--space-20);
    text-align: center;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

#bot-path .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--text-inverted);
    background: var(--primary-main);
    border-radius: var(--radius-full);
    transition: transform var(--transition-bounce);
}

#bot-path .path-step .body-l {
    color: var(--primary-text-secondary);
}

#bot-path .caption-note {
    margin-top: var(--space-10);
}

#bot-path .caption-note .caption {
    color: var(--primary-text-muted);
}

#bot-path .platform-card {
    background: var(--primary-main-5);
}

#plans .secondary {
    margin-top: var(--space-50);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    width: 100%;
    max-width: 1240px;
    margin: var(--space-0) var(--space-auto);
    padding: var(--space-0) var(--space-40);
    margin-bottom: var(--space-80);
}

.features-grid .feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.features-grid .feature-card .bg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--primary-main);
    background: var(--primary-main-10);
    border-radius: var(--radius-m);
    transition: transform var(--transition-bounce);
}

.features-grid .feature-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.features-grid .feature-info .h4 {
    color: var(--primary-text-main);
}

.features-grid .feature-info .body-m {
    color: var(--primary-text-secondary);
}

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

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

#why .why-content {
    width: 100%;
}

#why .why-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    width: 100%;
}

#why .why-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-24);
    text-align: center;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

#why .why-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

#why .why-info .h4 {
    color: var(--primary-text-main);
}

#why .why-info .body-m {
    color: var(--primary-text-secondary);
}

#progress {
    padding-bottom: var(--space-80);
    padding-top: var(--space-20);
}

#progress .psychology {
    background: var(--green-background);
    border: 1px solid var(--green-main-50);
}

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

#progress .content {
    display: flex;
    gap: var(--space-30);
    align-items: center;
    margin-bottom: var(--space-30);
    width: 100%;
}

#progress .advantages {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    flex: 1;
    width: 40%;
}

#progress .advantage {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-20);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast), background var(--transition-fast);
}

#progress .advantage .h4 {
    color: var(--primary-text-main);
}

#progress .advantage .body-l {
    color: var(--primary-text-secondary);
}

#progress .content img {
    width: 50%;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

#balance .balance-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    width: 100%;
}

#balance .balance-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
    border-radius: var(--radius-m);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-normal);
}

#balance .feature-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

#balance .feature-info .h4 {
    color: var(--text-inverted);
}

#balance .feature-info .body-l,
#balance .feature-info .body-m {
    color: var(--primary-text-muted);
}

#advantages .buttons {
    display: flex;
    gap: var(--space-10);
    margin-top: var(--space-50);
}

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

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

#reviews .reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-20);
    width: 100%;
}

#reviews .reviewer-avatar.blue .h4 {
    color: var(--blue-main-50);
}

#reviews .reviewer-avatar.green .h4 {
    color: var(--green-main-50);
}

#reviews .reviewer-avatar.pink .h4 {
    color: var(--pink-main-50);
}

#reviews .reviewer-avatar.orange .h4 {
    color: var(--orange-main-50);
}

#reviews .review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

#reviews .review-header {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
}

#reviews .reviewer-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
}

#reviews .reviewer-avatar.green {
    color: var(--green-main);
    background: var(--green-main-15);
}

#reviews .reviewer-avatar.blue {
    color: var(--blue-main);
    background: var(--blue-main-15);
}

#reviews .reviewer-avatar.pink {
    color: var(--pink-main);
    background: var(--pink-main-15);
}

#reviews .reviewer-avatar.orange {
    color: var(--orange-main);
    background: var(--orange-main-15);
}

#reviews .reviewer-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#reviews .reviewer-info .body-l-accent {
    color: var(--primary-text-main);
}

#reviews .reviewer-info .body-s {
    color: var(--primary-text-secondary);
}

#reviews .reviewer-info .caption {
    margin-top: var(--space-4);
    color: var(--primary-main);
}

#reviews .review-content {
    padding: var(--space-16);
    background: var(--background-page);
    border-radius: var(--radius-s);
}

#reviews .review-content .body-m {
    font-style: italic;
    color: var(--primary-text-secondary);
}

#reviews .was-became {
    display: flex;
    gap: var(--space-16);
}

#reviews .was,
#reviews .became {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-s);
    flex: 1;
}

#reviews .was {
    background: var(--red-main-10);
}

#reviews .was .caption {
    color: var(--red-text-muted);
}

#reviews .was .body-m {
    color: var(--red-main);
}

#reviews .became {
    background: var(--green-main-10);
}

#reviews .became .caption {
    color: var(--green-text-muted);
}

#reviews .became .body-m {
    color: var(--green-main);
}

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

#final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-80) var(--space-40);
    text-align: center;
}

#final-cta .subtitle {
    margin-top: var(--space-20);
    color: var(--primary-text-secondary);
}

@media (max-width: 1024px) {
    #hero {
        padding-bottom: var(--space-60);
    }

    #plans .secondary {
        margin-top: var(--space-20);
        width: 450px;
        height: 52px;
    }

    #hero .buttons {
        flex-direction: row;
        width: 100%;
    }

    #hero .buttons .secondary {
        width: 85%;
    }

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

    #bot-path .path-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    #telegram-helper {
        flex-direction: column;
        text-align: center;
    }

    #telegram-helper button {
        width: 100%;
        max-width: 300px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        margin-bottom: var(--space-60);
        padding: var(--space-0) var(--space-20);
    }

    #what-bot-considers .considerations {
        grid-template-columns: 1fr 1fr;
    }

    #why .why-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #steps .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    #advantages .advantages {
        grid-template-columns: 1fr 1fr;
    }

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

    #progress .advantages .psychology {
        grid-column: 1 / -1;
    }

    #progress .content {
        margin-bottom: var(--space-0);
    }

    #progress .content img {
        width: 50%;
    }

    #balance .balance-features {
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
    }

    #reviews .reviews-grid {
        grid-template-columns: 1fr 1fr;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-16);
        padding: var(--space-0) var(--space-0) var(--space-20) var(--space-0);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #reviews .reviews-grid::-webkit-scrollbar {
        display: none;
    }

    #reviews .review-card {
        flex-shrink: 0;
        scroll-snap-align: center;
        width: 85%;
        min-width: 300px;
        box-shadow: none;
    }

    #plans #selector {
        margin-bottom: var(--space-20);
        width: 100%;
        max-width: 300px;
    }

    #faq .first-line {
        flex-direction: column;
        text-align: center;
    }

    #steps a {
        margin-top: var(--space-30);
    }

    #faq .first-line img {
        order: -1;
    }

    #bot-path {
        padding-top: var(--space-0);
        padding-bottom: var(--space-50);
    }

    #advantages .buttons {
        margin-top: var(--space-30);
    }
}

@media (min-width: 1025px) {
    #what-bot-considers .accordion.mobile-item {
        display: none !important;
    }

    #what-bot-considers .considerations.desktop-item {
        display: grid !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    #what-bot-considers .accordion.mobile-item {
        display: none !important;
    }

    #what-bot-considers .considerations.tablet-item {
        display: grid !important;
    }
}

@media (max-width: 480px) {
    #hero {
        padding: var(--space-0) var(--space-16) var(--space-40) var(--space-16) !important;
    }

    #balance>div.section-title {
        width: 110%;
    }

    #progress .advantage {
        text-align: center;
    }

    #hero .buttons {
        flex-direction: column;
    }

    #hero .section-subtitle br {
        display: none;
    }

    #bot-path {
        padding: var(--space-20) var(--space-16) var(--space-50) var(--space-16);
    }

    #bot-path .path-steps {
        grid-template-columns: 1fr;
    }

    #bot-path .path-step {
        flex-direction: row;
        text-align: left;
    }

    #bot-path .step-number {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }

    #why .why-cards {
        display: flex;
        flex-direction: column;
    }

    #telegram-helper {
        padding: var(--space-20);
    }

    .features-grid {
        margin-bottom: var(--space-40);
        padding: var(--space-0) var(--space-16);
    }

    #what-bot-considers {
        padding: var(--space-50) var(--space-16);
    }

    #why {
        padding: var(--space-50) var(--space-16);
    }

    #steps {
        padding: var(--space-50) var(--space-16);
    }

    #steps .cards {
        grid-template-columns: 1fr;
    }

    #steps .card .info {
        text-align: left;
    }

    #steps .card .bg-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
    }

    #advantages {
        padding: var(--space-50) var(--space-16);
        margin: var(--space-0);
        padding-bottom: var(--space-0);
    }

    #progress .advantages {
        gap: var(--space-10);
        width: 100%;
    }

    #progress .content {
        display: flex;
        flex-direction: column;
        gap: var(--space-16);
        margin-bottom: var(--space-0);
    }

    #steps a {
        margin-top: var(--space-20);
    }

    #advantages .secondary {
        margin-top: var(--space-5);
    }

    #advantages button {
        height: 68px !important;
    }

    #balance .balance-feature {
        text-align: center;
    }

    #progress>div.content>img {
        width: 100%;
    }

    #advantages .buttons {
        flex-direction: column;
        gap: var(--space-0);
        margin-top: var(--space-20);
        width: 100%;
    }

    #advantages .buttons button,
    #advantages .buttons a {
        width: 100%;
        height: 52px !important;
    }

    #balance .balance-features {
        display: flex;
        flex-direction: column;
    }

    #plans .secondary {
        width: 80%;
    }

    #progress {
        padding: var(--space-50) var(--space-16);
    }

    #balance {
        padding: var(--space-50) var(--space-16);
    }

    section#reviews {
        overflow: hidden !important;
        padding: var(--space-50) var(--space-16);
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    #reviews .reviews-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-16);
        padding: var(--space-0) var(--space-0) var(--space-20) var(--space-0);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #reviews .reviews-grid::-webkit-scrollbar {
        display: none;
    }

    #reviews .review-card {
        flex-shrink: 0;
        scroll-snap-align: center;
        width: 85%;
        min-width: 300px;
        box-shadow: none;
    }

    #reviews .review-card * {
        pointer-events: auto !important;
    }

    #reviews .was-became {
        flex-direction: column;
    }

    #plans {
        padding: var(--space-50) var(--space-16);
        padding-top: var(--space-0);
    }

    section#plans {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    #plans .pricing-cards button {
        margin-top: var(--space-10);
    }

    #plans .pricing-card {
        width: 85% !important;
        height: auto;
        min-height: auto;
    }

    #plans .pricing-card.maximum {
        height: auto;
        min-height: auto;
    }

    #plans .pricing-cards {
        height: max-content;
        align-items: stretch;
        scroll-snap-type: x mandatory;
        padding: var(--space-16) var(--space-0) var(--space-10) var(--space-0);
        gap: var(--space-5);
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    #plans .pricing-cards .pricing-card .card-content {
        height: max-content;
    }

    #plans .pricing-card.year-active {
        min-height: auto;
    }

    #plans #selector .selector-item span,
    #plans .period,
    #plans .badge span,
    #plans .savings-badge span {
        white-space: nowrap;
        word-break: keep-all;
    }

    #faq {
        padding: var(--space-50) var(--space-16);
    }

    #faq .first-line img {
        width: 80px;
    }

    #final-cta {
        padding: var(--space-50) var(--space-16);
    }

    #final-cta button {
        width: 100%;
    }

    button {
        min-height: 52px;
        touch-action: manipulation;
    }

    #what-bot-considers .considerations.desktop-item,
    #what-bot-considers .considerations.tablet-item {
        display: none !important;
    }

    #what-bot-considers .accordion.mobile-item {
        display: flex !important;
    }
}

#selector.page.parents-active::before {
    left: calc((var(--space-100p) - var(--space-17)) / var(--space-factor-3) + var(--space-6));
}

footer.bg-dark {
    border-radius: var(--radius-xl) !important;
}

@media (hover: hover) {
    #bot-path .path-step:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #bot-path .path-step:hover .step-number {
        transform: var(--scale-increase) var(--rotate-5);
    }

    #telegram-helper:hover {
        box-shadow: var(--primary-glow);
        transform: var(--up-shift-3);
    }

    .features-grid .feature-card:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    .features-grid .feature-card:hover .bg-icon {
        transform: var(--scale-increase) var(--rotate-5);
    }

    #why .why-card:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #progress .psychology a:hover {
        background-size: 100% 1px;
    }

    #progress .psychology:hover {
        border: 1px solid var(--green-main);
        box-shadow: var(--green-faint-glow) !important;
    }

    #progress .advantage:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }

    #balance .balance-feature:hover {
        border-color: var(--primary-main-25);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }

    #reviews .review-card:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }
}