:root {
    --brand-blue-bright: #067BFD; 
    --brand-blue-dark: #203B71;
    --brand-pink: #E94DFF;
    --text-color: #2c3e50;
    --bg-gray: #e9ecef;
}

/* FIX: scrollbar-gutter prevents layout shift (jump) when modal opens */
html { 
    scrollbar-gutter: stable; 
    /* FIX: Global guardrail against horizontal scroll */
    width: 100%;
    overflow-x: hidden;
}

body { 
    font-family: 'Comfortaa', sans-serif; 
    color: var(--text-color); 
    padding-bottom: 100px; 
    position: relative; 
    margin: 0; 
    /* FIX: Global guardrail against horizontal scroll */
    max-width: 100%;
    width: 100%;
    overflow-x: hidden; 
}

h1, h2, h3 { color: var(--brand-blue-dark); font-weight: 700; letter-spacing: -1px; }
p { font-weight: 300; line-height: 1.6; color: #4a4a4a; font-size: 1.05rem; }

.section-padding { 
    padding: 80px 0; 
    /* FIX: Removed overflow-x here so vertical animation parts aren't clipped */
    /* We rely on body { overflow-x: hidden } to stop side scrolling now */
}

.custom-indicators { display: flex; gap: 12px; margin-top: 25px; }
.indicator-dot { width: 15px; height: 15px; background-color: transparent; border: 2px solid #ccc; border-radius: 3px; cursor: pointer; padding: 0; transition: all 0.3s; }
.indicator-dot.active { background-color: var(--brand-blue-bright); border-color: var(--brand-blue-bright); }

/* HEADER */
header { padding: 30px 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }
.logo-img { width: 376px; height: auto; max-width: 80%; }

/* --- HERO SECTION --- */
.hero-section { height: calc(100vh - 80px); min-height: 650px; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-grid-wrapper { position: relative; height: 100%; display: flex; align-items: center; }
.hero-text-col { z-index: 10; position: relative; }
.hero-title { font-size: 4.5rem; line-height: 1.1; margin-bottom: 1.5rem; color: var(--brand-blue-dark); }

/* VARIANT A - Desktop Shutter Positioning */
.hero-img-container {
    position: absolute;
    left: calc(41.666667% + 55px); 
    bottom: 0;    
    height: 100%; 
    width: auto; 
    z-index: 0;
    display: flex; align-items: flex-end; pointer-events: none; 
}
.hero-img { 
    height: 100%; width: auto; max-width: none; display: block;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.2));
    transition: filter 0.1s linear;
}
.hero-phone { display: none; }

/* VARIANT B - Desktop Tweaks */
body.variant-b .hero-phone {
    display: block;
    position: absolute;
    height: 75%;      
    width: auto;
    bottom: 15%;       
    left: 15%;        
    z-index: 2;
    filter: drop-shadow(15px 15px 30px rgba(0,0,0,0.4)); 
    transform: rotate(5deg);
    transition: filter 0.1s linear;
}
body.variant-b .hero-img { filter: none !important; }

/* --- Other UI --- */
.blue-bar { background-color: var(--brand-blue-bright); color: white; padding: 15px 0; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); text-align: center; transition: transform 0.4s ease-in-out; transform: translateY(0); }
.blue-bar.hidden { transform: translateY(101%); }
.blue-bar-content { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* FIX: Prevent wrapping on tablet so text/buttons stay side-by-side */
    flex-wrap: nowrap; 
    gap: 20px; 
}
.store-badge { height: 40px; width: auto; transition: transform 0.2s; }
.store-link:hover .store-badge { transform: translateY(-2px); }
.collage-img { width: 130%; max-width: none; margin-left: -30%; height: auto; display: block; }
.slider-viewport { width: 100%; overflow: hidden; position: relative; padding: 10px 0; }
.slider-track { display: flex; transition: transform 0.5s ease-out; gap: 20px; }

/* SLIDE CARD SIZING LOGIC */
.slide-card {
    /* Default: Mobile (1 item) */
    flex: 0 0 100%; 
    background-color: #a0a0a0; aspect-ratio: 1 / 1; border-radius: 4px; opacity: 0.3; transition: opacity 0.5s ease; 
    padding: 20px 20px 0 20px; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; position: relative; overflow: hidden;
}

/* Tablet (2 items) */
@media (min-width: 768px) and (max-width: 1199px) {
    .slide-card { flex: 0 0 calc((100% - 20px) / 2); }
}
/* Desktop (3 items) */
@media (min-width: 1200px) {
    .slide-card { flex: 0 0 calc((100% - 40px) / 3); }
}

.slide-card-img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; 
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); background: transparent; transition: transform 0.3s ease; display: block;
}
.slide-card:hover .slide-card-img { transform: scale(1.02); }
.slide-card:nth-child(4n + 1) { background-color: var(--brand-blue-bright); }
.slide-card:nth-child(4n + 2) { background-color: var(--brand-blue-dark); }
.slide-card:nth-child(4n + 3) { background-color: var(--brand-pink); }
.slide-card:nth-child(4n + 4) { background-color: #a0a0a0; }

.desc-container { display: grid; align-items: center; min-height: 250px; position: relative; }
.desc-item { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; pointer-events: none; }
.desc-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.modal-content { border: none; border-radius: 12px; overflow: hidden; }
.modal-body { padding: 0; }
.modal-img-container { background-color: #f8f9fa; height: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 20px; transition: background-color 0.3s ease; }
.modal-img { max-width: 100%; max-height: 500px; width: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2)); }
.modal-text-container { padding: 40px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.modal-text-container h3 { color: var(--brand-blue-dark); margin-bottom: 20px; font-size: 2rem; }
.testimonial-slide-container { display: flex; justify-content: center; align-items: center; height: 500px; }
.raw-polaroid-img { max-width: 100%; max-height: 480px; width: auto; height: auto; display: block; transition: transform 0.5s ease; }
.rot-1 { transform: rotate(-3deg); }
.rot-2 { transform: rotate(3deg); }
.rot-3 { transform: rotate(-2deg); }
.testimonial-author { color: var(--brand-blue-dark); font-weight: 700; font-size: 1.2rem; margin-top: 15px; }
.accordion-item { border: 1px solid var(--brand-blue-bright) !important; margin-bottom: 20px; background-color: white; border-radius: 0; }
.accordion-button { background-color: white; color: var(--brand-blue-bright); font-weight: 600; font-size: 1.1rem; box-shadow: none !important; padding: 20px; }
.accordion-button:not(.collapsed) { background-color: white; color: var(--brand-blue-bright); box-shadow: none; }
.accordion-button::after { background-image: none; content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--brand-blue-bright); transform: rotate(0deg) !important; transition: transform 0.2s; margin-left: auto; }
.accordion-button.collapsed::after { transform: rotate(-90deg) !important; }
.accordion-body { padding: 0 20px 20px 20px; color: #555; font-weight: 300; }
.footer-section { padding-top: 80px; padding-bottom: 100px; overflow: hidden; }
.footer-icon { width: 140%; max-width: none; margin-left: -40%; display: block; }
.copyright { margin-top: 60px; font-size: 0.9rem; color: var(--brand-blue-dark); }
.collage-wrapper { position: relative; width: 100%; height: 600px; margin-bottom: 50px; }
.collage-item { position: absolute; border: none; box-shadow: none; width: 35%; max-width: 250px; height: auto; display: block; transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: center center; z-index: 1; }
.c-1 { top: 5%; left: 5%; transform: rotate(-15deg); z-index: 1; }
.c-2 { top: 10%; right: 10%; transform: rotate(10deg); z-index: 2; }
.c-3 { bottom: 15%; left: 10%; transform: rotate(5deg); z-index: 3; }
.c-4 { bottom: 5%; right: 5%; transform: rotate(-8deg); z-index: 2; }
.c-5 { top: 40%; left: 0%; transform: rotate(-20deg); z-index: 4; }
.c-6 { top: 30%; right: 0%; transform: rotate(15deg); z-index: 3; }
.c-7 { bottom: 0%; left: 40%; transform: rotate(-5deg); z-index: 5; }
.c-8 { top: 0%; left: 40%; transform: rotate(8deg); z-index: 1; }
.c-9 { top: 25%; left: 30%; transform: rotate(0deg) scale(1.2); z-index: 10; }
.reveal-collage:not(.is-visible) .c-1 { transform: translate(-200%, -200%) rotate(-90deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-2 { transform: translate(200%, -200%) rotate(90deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-3 { transform: translate(-200%, 200%) rotate(-45deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-4 { transform: translate(200%, 200%) rotate(45deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-5 { transform: translate(-250%, 0) rotate(-120deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-6 { transform: translate(250%, 0) rotate(120deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-7 { transform: translate(0, 250%) rotate(180deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-8 { transform: translate(0, -250%) rotate(-180deg); filter: blur(15px); opacity: 0; }
.reveal-collage:not(.is-visible) .c-9 { transform: scale(3) rotate(360deg); filter: blur(30px); opacity: 0; }




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

.social-link {
    color: #067BFD;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    color: #E94DFF;
}

.footer-contact {
    font-size: 0.9rem;
    line-height: 1.4;
}

.footer-contact p {
    margin-bottom: 0.25rem;
}

.footer-email {
    color: #067BFD;
    text-decoration: none;
}

.footer-email:hover {
    text-decoration: underline;
    color: #E94DFF;
}

@media (min-width: 768px) {
    .social-icons {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .social-icons {
        justify-content: flex-start;
    }
}

/* --- RESPONSIVE --- */

/* TABLET & SMALL LAPTOP TWEAKS (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-title { font-size: 3rem; }
    h2 { font-size: 1.8rem; }
    .logo-img { width: 280px; }
    p { font-size: 1rem; }
    
    /* FIX: Ensure blue bar content doesn't wrap on tablet */
    .blue-bar-content { flex-wrap: nowrap; }
}

/* MOBILE (Stacked) View < 767px */
@media (max-width: 767px) {
    .hero-title { font-size: 2.5rem; text-align: left; }
    h2 { text-align: left; font-size: 1.8rem; margin-bottom: 20px; }
    p { text-align: left; }
    header { position: relative; padding: 20px 0; }
    
    /* FIX: Allow logo to be 100% width on mobile */
    .logo-img { width: 100%; max-width: 100%; }
    
    .hero-section { height: auto; min-height: auto; display: block; padding-top: 0; padding-bottom: 0; }
    .hero-grid-wrapper { display: flex; flex-direction: column; height: auto; }
    .hero-text-col { padding-top: 20px; text-align: left; order: 1; margin-bottom: 10px; z-index: 2; }
    
    .hero-img-container { 
        position: relative; width: 100%; height: auto; 
        left: 50%; right: auto; bottom: auto; top: auto; transform: translateX(-50%);
        order: 2; display: block; overflow: visible; margin-top: 30px; margin-bottom: 40px;
    }
    .hero-img { width: 140%; height: auto; max-width: none; margin-left: -20%; margin-right: 0; display: block; }
    
    body.variant-b .hero-img-container {
        width: 140%; margin-left: -20%; left: auto; transform: none; position: relative; margin-bottom: 0; overflow: visible;
    }
    body.variant-b .hero-img { width: 100%; margin: 0; }

    body.variant-b .hero-phone {
        display: block; 
        position: absolute; 
        top: 20%; 
        right: 5%; 
        left: auto; bottom: auto;
        width: 45%; 
        height: auto; 
        z-index: 10; 
        transform: rotate(5deg);
        filter: drop-shadow(20px 20px 50px rgba(0,0,0,0.5));
    }

    .collage-wrapper { height: 350px; transform: scale(0.9); }
    .blue-bar { padding: 10px 0; }
    .blue-bar-text { display: none; } 
    /* Allow wrapping on actual mobile phones only */
    .blue-bar-content { flex-wrap: wrap; } 

    .mobile-stack-top { order: 1; margin-bottom: 40px; text-align: left; }
    .mobile-stack-bottom { order: 2; text-align: left; }
    .custom-indicators { justify-content: flex-start; }
    .desc-container { min-height: auto; margin-bottom: 20px; }
    .desc-item { position: relative; opacity: 1; display: none; transform: none; }
    .desc-item.active { display: block; }
    .footer-section { text-align: left; padding-top: 40px; }
    .footer-section .mobile-stack-bottom { order: 1; margin-bottom: 30px; } 
    .footer-section .mobile-stack-top { order: 2; } 
    .footer-icon { width: 140%; margin-left: -20%; max-width: none; margin-right: 0; margin-bottom: 40px; }
    .text-col { padding-left: 30px; padding-right: 30px; }
    .slide-card { padding: 15px 15px 0 15px; }
    .modal-text-container { padding: 20px; }
    .modal-img { max-height: 300px; margin: 0 auto; }
    .footer-section .app-buttons { justify-content: flex-start !important; }
    
    #featureSection .row { display: flex; flex-direction: column; }
    #featureSection .col-md-7 { order: 1; margin-bottom: 30px; }
    #featureSection .col-md-5 { order: 2; }

    .feature-quote { height: 250px; }
    .desc-container { height: 370px; }
}

.no-transition { transition: none !important; }