/* --- TABLET & SMALL LAPTOPS (max 1200px) --- */
@media (max-width: 1200px) {
    :root {
        --container-width: 90%;
    }

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

    .professional-title {
        font-size: 2.5rem;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

/* --- TABLET PORTRAIT & LARGE PHONES (max 992px) --- */
@media (max-width: 992px) {
    /* Header */
    .header-nav {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }

    .header-logo {
        height: 60px;
    }

    /* Hero */
    .hero-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    /* General Layout */
    .split-layout,
    .app-showcase-layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .section-header.text-left {
        text-align: center;
    }

    .section-header.text-left .section-description {
        text-align: center;
        margin: 0 auto;
    }

    /* Professional Section */
    .professional-layout {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .professional-section {
        min-height: auto;
        display: block;
        /* Resetta il padding desktop (140px) per mobile */
        padding: 4rem 0;
    }

    .professional-content-col {
        max-width: 100%;
        order: 1;
        text-align: center;
        padding: 0;
    }

    .professional-image-col {
        /* Resetta il posizionamento assoluto del desktop */
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        order: 2;
        justify-content: center;
        margin-top: 2rem;
    }

    .professional-image-col img {
        max-height: 400px;
        width: 100%;
        object-fit: cover;
        border-radius: var(--border-radius-lg);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    .btn-cta-large {
        width: 100%;
        justify-content: center;
    }

    /* --- HOW IT WORKS (MOBILE SLIDER) --- */
    .scroll-sequence-container {
        height: auto;
    }

    .sticky-wrapper {
        position: static;
        height: auto;
    }

    .visual-col {
        display: none;
    }

    /* Horizontal Slider Container */
    .mobile-scroll-wrapper {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.5rem;
        padding: 0 7.5vw 1rem 7.5vw;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .mobile-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .step-card {
        /* Card Style */
        flex: 0 0 85vw;
        scroll-snap-align: center;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 24px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 1;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Spacer to allow the last card to be centered */
    .mobile-snap-spacer {
        display: block;
        flex: 0 0 1px;
    }

    /* Reset active state for step number on mobile */
    .step-card.active {
        border-left-color: rgba(255, 255, 255, 0.1);
    }

    .step-card.active .step-number {
        background-color: var(--color-white);
        color: var(--color-navy);
        box-shadow: none;
    }

    /* Specific style for the number inside the card */
    .step-number {
        margin-bottom: 1.5rem;
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }

    .mobile-step-img {
        display: block;
        max-height: 250px;
        object-fit: contain;
        margin-bottom: 1.5rem;
    }

    .step-title {
        font-size: 1.8rem;
    }

    /* Mobile Indicators */
    .mobile-step-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 0.5rem;
        width: 100%;
    }

    .indicator-line {
        width: 40px;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        transition: background-color 0.3s ease;
    }

    .indicator-line.active {
        background-color: var(--color-red);
    }

    .scroll-triggers {
        display: none;
    }

    /* Contact */
    .contact-form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-title {
        font-size: 3rem;
    }

    /* NUOVO: Adattamento label form su mobile */
    .form-section-label {
        font-size: 1.2rem;
        margin-top: 1rem;
    }

    /* Footer */
    .footer-main {
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        text-align: center;
    }

    .footer-links-group {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    .footer-col {
        min-width: auto;
    }

    .social-link {
        justify-content: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* App Showcase Fixes */
    .app-visual-glow {
        width: 100%;
        height: 100%;
        filter: blur(60px);
    }

    .app-points-list {
        order: 2;
    }

    .app-visual-wrapper {
        order: 1;
        margin-bottom: 2rem;
    }
}

/* --- SMARTPHONES (max 768px) --- */
@media (max-width: 768px) {
    :root {
        --header-height: 80px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-description {
        font-size: 1.1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .app-point-text {
        font-size: 1.3rem;
    }

    .app-point-icon {
        width: 40px;
        height: 40px;
    }

    .contact-section {
        padding: 5rem 0;
    }

    .contact-title {
        font-size: 2.5rem;
    }

    .btn-submit {
        width: 100%;
        padding: 1rem;
    }

    .store-links img {
        height: 50px;
    }
}