/* --- 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;
    }

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

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

/* --- LAPTOP & SHORT SCREENS OPTIMIZATION --- */
@media (min-width: 992px) and (max-width: 1440px), (min-width: 992px) and (max-height: 850px) {

    /* Reduce gap between cards (was 3rem) */
    .steps-col {
        gap: 1rem;
        justify-content: center;
    }

    /* Reduce internal card padding */
    .step-card {
        padding: 0.8rem 0 0.8rem 1.5rem;
        border-left-width: 3px; /* Slightly thinner */
    }

    /* Shrink the number circle */
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Reduce step title size */
    .step-title {
        font-size: 1.5rem;
        margin-bottom: 0.3rem;
    }

    /* Reduce descriptive text and line height */
    .step-text {
        font-size: 1rem;
        line-height: 1.3;
    }

    /* Reduce left image to maintain proportions */
    .visual-col img {
        max-height: 60vh;
    }

    /* Adjust general layout to give more side spacing if necessary */
    .split-layout {
        gap: 3rem;
    }
}

/* --- 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;
        padding: 4rem 0; /* Restore padding on mobile */
    }

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

    .professional-caption {
        text-align: center;
    }

    .professional-image-col {
        position: relative; /* Reset from absolute */
        top: auto;
        right: auto;
        bottom: auto; /* Reset bottom */
        height: auto; /* Reset height 100% */
        width: 100%;
        order: 2;
        justify-content: center;
        margin-top: 2rem;
        transform: none;
    }

    .professional-image-col img {
        max-height: 400px;
        height: auto; /* Reset height 100% */
        width: 100%;
        object-fit: cover;
        border-radius: var(--border-radius-lg) !important;
        box-shadow: none !important;
    }

    .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-container {
        padding: 0 2vw;
    }

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

    .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;
    }

    /* Landing Pages */
    .landing-title {
        font-size: 2.5rem;
    }

    .landing-image-col {
        max-width: 400px;
    }
}

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

    .hero-content {
        gap: 1rem;
    }

    .hero-caption {
        font-size: 1rem;
    }

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

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

    .store-badges {
        margin-top: 0;
    }

    .store-label {
        font-size: 1rem;
    }

    .store-links {
        gap: 0;
    }

    .hero-mockup {
        margin-top: 1rem;
    }

    .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;
    }

    /* Landing Pages */
    .landing-title {
        font-size: 2rem;
    }

    .landing-text {
        font-size: 1.1rem;
    }

    .landing-image-col {
        max-width: 350px;
    }
}