.mockup-img{border-radius:16px}

/* Desktop only: keep every existing mobile rule unchanged. */
@media screen and (min-width: 1024px) {
    .app-wrapper { max-width: none; box-shadow: none; }
    .container { max-width: 1160px; margin-inline: auto; padding-inline: 32px; }
    .scarcity-top-bar { padding-block: 14px; font-size: 14px; }
    .hero-section { padding: 72px 0; }
    .hero-content {
        width: 100%; display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas: "title visual" "subtitle visual" "cta visual";
        column-gap: 40px; align-items: center; text-align: left;
    }
    .hero-title { grid-area: title; font-size: clamp(40px, 3.5vw, 54px); margin-bottom: 20px; align-self: end; }
    .hero-subtitle { grid-area: subtitle; font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
    .hero-visual { grid-area: visual; margin-bottom: 0; min-width: 0; }
    .mockup-container { max-width: 620px; }
    .hero-cta-group { grid-area: cta; align-items: flex-start; align-self: start; }
    .hero-cta-group .btn { max-width: 460px; }
    .target-audience, .benefits-section, .demo-images-section,
    .bonus-section, .pricing-section, .faq-section { padding-block: 60px; }
    .section-header { max-width: 760px; margin-inline: auto; }
    .audience-grid, .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .context-image-section .container { max-width: 960px; }
    .bonus-wrapper { padding: 48px 32px 32px; }
    .bonus-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .bonus-summary-card { max-width: 650px; margin-inline: auto; }
    .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 960px; margin-inline: auto; align-items: stretch; }
    .price-card { min-width: 0; padding: 40px 32px; }
    .price-card .plan-product-img { max-width: 300px; }
    .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .guarantee-container, .faq-list { max-width: 800px; margin-inline: auto; }
    .demo-images-section, .bonus-section, .target-audience,
    .faq-section, .main-footer { content-visibility: visible; }
}