/* ==========================
   LARGE TABLETS
========================== */

@media(max-width:1100px){

.hero-grid,
.why-grid,
.app-grid,
.about-grid{
    grid-template-columns:1fr;
    gap:50px;
}

.hero-content,
.app-content{
    text-align:center;
}

.hero-buttons,
.hero-stats{
    justify-content:center;
}

.phone-mockup,
.phone-showcase{
    margin:auto;
}

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

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

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

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

}


/* ==========================
   TABLETS
========================== */

@media(max-width:900px){

.nav-links,
.nav-buttons{
    display:none;
}

.hamburger{
    display:flex;
    font-size:2rem;
    cursor:pointer;
}

.hero-content h1,
.page-hero h1{
    font-size:3rem;
}

.section-title h2,
.cta-box h2,
.app-content h2{
    font-size:2.3rem;
}

.hero{
    padding-top:150px;
}

.hero-stats{
    flex-wrap:wrap;
}

.features-grid,
.pricing-grid,
.testimonial-grid,
.steps-grid,
.trusted-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.footer ul{
    padding:0;
}

.cta-box{
    padding:60px 35px;
}

.phone-mockup{
    width:300px;
    height:600px;
}

.phone-showcase{
    width:310px;
    height:610px;
}

}


/* ==========================
   MOBILE
========================== */

@media(max-width:600px){

.container{
    width:92%;
}

.header{
    padding:0 10px;
}

.logo-img{
    width:130px;
}

.hero{
    min-height:auto;
    padding-top:140px;
    padding-bottom:70px;
}

.hero-content h1,
.page-hero h1{
    font-size:2.2rem;
    line-height:1.2;
}

.hero-content p,
.page-hero p{
    font-size:1rem;
}

.section-title{
    margin-bottom:45px;
}

.section-title h2,
.cta-box h2,
.app-content h2{
    font-size:2rem;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.hero-buttons a{
    width:100%;
    text-align:center;
}

.hero-stats{
    flex-direction:column;
    gap:20px;
}

.phone-mockup{
    width:260px;
    height:520px;
}

.phone-showcase{
    width:270px;
    height:530px;
}

.feature-card,
.step-card,
.pricing-card,
.testimonial-card,
.faq-item{
    padding:30px;
}

.page-hero{
    padding:150px 0 90px;
}

.cta-box{
    border-radius:28px;
    padding:50px 25px;
}

.footer{
    text-align:center;
}

.whatsapp-btn{
    width:58px;
    height:58px;
    font-size:1.7rem;
    bottom:20px;
    right:20px;
}

.contact-form form{
    padding:28px;
}

.contact-form input,
.contact-form textarea{
    padding:18px;
}

.theme-toggle{
    margin-left:10px;
}

}


/* ==========================
   SMALL MOBILE DEVICES
========================== */

@media(max-width:400px){

.hero-content h1,
.page-hero h1{
    font-size:1.9rem;
}

.section-title h2,
.cta-box h2,
.app-content h2{
    font-size:1.7rem;
}

.phone-mockup{
    width:230px;
    height:470px;
}

.phone-showcase{
    width:240px;
    height:480px;
}

.logo-img{
    width:110px;
}

}

/* ==========================
   TABLET RESPONSIVE
========================== */

@media (max-width: 1024px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
gap:50px;
}

.hero-content{
display:flex;
flex-direction:column;
align-items:center;
}

.hero-content h1{
font-size:52px;
max-width:700px;
}

.hero-content p{
font-size:18px;
max-width:700px;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}

.hero-stats{
justify-content:center;
flex-wrap:wrap;
}

.hero-main-image{
max-width:430px;
}

/* FLOATING CARDS */
.sales-card{
top:5%;
left:-20px;
}

.order-card{
right:-20px;
}

.secure-card{
bottom:8%;
left:-10px;
}

}


/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width: 768px){

.hero{
padding:120px 0 50px;
min-height:auto;
}

.hero-grid{
grid-template-columns:1fr;
gap:45px;
text-align:center;
}

.hero-content{
display:flex;
flex-direction:column;
align-items:center;
}

.hero-badge{
font-size:13px;
}

.hero-content h1{
font-size:38px;
line-height:1.2;
max-width:100%;
}

.hero-content p{
font-size:17px;
line-height:1.7;
max-width:100%;
}

.hero-buttons{
display:flex;
flex-direction:column;
width:100%;
gap:15px;
}

.hero-buttons a{
width:100%;
text-align:center;
}

.hero-stats{
flex-direction:column;
gap:18px;
}

.hero-main-image{
max-width:340px;
}

/* FLOATING CARDS */
.floating-card{
padding:14px 18px;
min-width:140px;
}

.floating-card h3{
font-size:18px;
}

.sales-card{
top:2%;
left:0;
}

.order-card{
right:0;
top:40%;
}

.secure-card{
left:0;
bottom:0;
}

/* NAV BUTTONS */
.nav-buttons{
display:none;
}

/* MOBILE MENU */
.navbar{
display:none;
}

.hamburger{
display:block;
font-size:30px;
cursor:pointer;
}

}


/* ==========================
   SMALL PHONE DEVICES
========================== */

@media (max-width: 480px){

.hero-content h1{
font-size:32px;
}

.hero-content p{
font-size:16px;
}

.hero-main-image{
max-width:300px;
}

.logo-img{
height:48px;
}

.page-hero h1{
font-size:36px;
}

.page-hero p{
font-size:16px;
}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
gap:30px;
}

}

/* ==========================
   CLIENT REVIEW RESPONSIVE FIXES
========================== */

@media (max-width:1024px){
    .hero-grid,
    .app-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content,
    .app-content{
        align-items:center;
    }

    .hero-content p,
    .app-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .app-screenshot-stack{
        margin:20px auto 0;
        max-width:560px;
    }

    .hero-main-image{
        max-width:none;
    }
}

@media (max-width:768px){
    .hero{
        padding:125px 0 60px;
    }

    .hero-grid{
        gap:34px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .hero-buttons{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .store-button{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:none;
        border-radius:22px;
    }

    .hero-mobile-shot{
        position:relative;
        right:auto;
        bottom:auto;
        width:60%;
        max-width:220px;
        margin:-45px auto 0;
    }

    .pricing-grid,
    .features-grid,
    .steps-grid,
    .testimonial-grid,
    .trusted-grid{
        grid-template-columns:1fr;
    }

    .app-screenshot-frame{
        width:min(100%,330px);
        border-radius:34px;
    }
}

@media (max-width:480px){
    .hero{
        padding:115px 0 50px;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-mobile-shot{
        width:68%;
        margin-top:-28px;
    }

    .section-title{
        margin-bottom:36px;
    }

    .feature-card,
    .step-card,
    .pricing-card,
    .testimonial-card,
    .faq-item{
        padding:26px;
    }
}

/* ==========================
   FINAL RESPONSIVE POLISH
========================== */

@media (max-width:1100px){
    .trusted-grid,
    .steps-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (min-width:769px) and (max-width:1024px){
    .hero{
        padding:120px 0 70px;
    }

    .hero-grid{
        gap:38px;
    }

    .hero-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:680px;
        margin-left:auto;
        margin-right:auto;
    }

    .app-screenshot-stack{
        max-width:480px;
        transform:none;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:440px;
    }

    .hero-mobile-shot{
        max-width:170px;
        right:-18px;
        bottom:-12px;
    }
}

@media (max-width:768px){
    .hero-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:100%;
        gap:14px;
    }

    .stat{
        min-width:0;
        padding:20px 14px;
        border-radius:20px;
    }

    .stat h3{
        font-size:1.35rem;
    }

    .stat p{
        font-size:.95rem;
        line-height:1.45;
    }

    .trusted-grid,
    .steps-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .trusted-text{
        margin-bottom:36px;
    }

    .why-grid{
        gap:36px;
    }

    .why-image{
        min-height:360px;
        padding:24px;
    }

    .why-card,
    .why-item{
        padding:24px;
    }

    .app-screenshot-stack{
        max-width:430px;
        transform:none;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:420px;
    }
}

@media (max-width:560px){
    .hero{
        padding:110px 0 46px;
    }

    .hero-badge{
        max-width:100%;
        padding:10px 16px;
        text-align:center;
        justify-content:center;
    }

    .hero-buttons{
        margin-bottom:28px;
    }

    .hero-stats,
    .trusted-grid,
    .steps-grid{
        grid-template-columns:1fr;
    }

    .trusted-grid{
        max-width:340px;
    }

    .trusted-card{
        min-height:145px;
    }

    .why-image{
        min-height:auto;
        padding:0;
        background:transparent;
        box-shadow:none;
    }

    .why-card,
    .why-item{
        border-radius:22px;
    }

    .why-item{
        gap:14px;
    }

    .hero-stats{
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
    }

    .app-screenshot-stack{
        max-width:320px;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:330px;
    }

    .hero-mobile-shot{
        width:58%;
        max-width:155px;
        margin-top:-24px;
    }
}

@media (max-width:991px){
    .hamburger{
        display:flex !important;
    }
}

@media (min-width:992px) and (max-height:760px){
    .hero{
        padding:108px 0 54px;
    }

    .hero-content h1{
        font-size:4rem;
        line-height:1.04;
        margin-bottom:16px;
    }

    .hero-content p{
        font-size:1rem;
        line-height:1.6;
        margin-bottom:22px;
    }

    .hero-badge{
        margin-bottom:18px;
    }

    .hero-buttons{
        margin-bottom:22px;
    }

    .stat{
        padding:16px;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:500px;
    }
}

/* ==========================
   RESPONSIVE LAYOUT CLEANUP
========================== */

@media (max-width:1100px){
    section{
        padding:88px 0;
    }

    .section-title{
        margin-bottom:48px;
    }

    .features-grid,
    .trusted-grid,
    .steps-grid,
    .testimonial-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
    }

    .pricing-grid{
        grid-template-columns:1fr;
        max-width:620px;
        margin-inline:auto;
        gap:24px;
    }

    .trusted-grid{
        max-width:860px;
    }

    .why-grid{
        gap:48px;
    }

    .why-content{
        gap:24px;
    }
}

@media (max-width:768px){
    .container{
        width:min(100% - 32px,1280px);
        padding:0;
    }

    section{
        padding:76px 0;
    }

    .hero{
        padding:112px 0 54px;
    }

    .section-title{
        margin-bottom:40px;
    }

    .section-title h2,
    .cta-box h2,
    .app-content h2{
        font-size:clamp(1.9rem,7vw,2.35rem);
        line-height:1.2;
    }

    .features-grid,
    .trusted-grid,
    .steps-grid,
    .pricing-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
        max-width:540px;
        margin-inline:auto;
        gap:22px;
    }

    .hero-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:520px;
        margin-inline:auto;
        gap:16px;
    }

    .stat{
        min-height:112px;
    }

    .trusted-text{
        margin-bottom:32px;
    }

    .trusted-card,
    .feature-card,
    .step-card,
    .pricing-card,
    .testimonial-card,
    .faq-item{
        padding:28px;
    }
}

@media (max-width:560px){
    .container{
        width:min(100% - 24px,1280px);
    }

    section{
        padding:64px 0;
    }

    .hero{
        padding:104px 0 44px;
    }

    .section-title{
        margin-bottom:32px;
    }

    .hero-stats{
        grid-template-columns:1fr;
        max-width:320px;
    }

    .stat{
        min-height:104px;
    }

    .trusted-grid,
    .features-grid,
    .steps-grid,
    .pricing-grid,
    .testimonial-grid,
    .why-content{
        max-width:360px;
    }

    .why-grid,
    .why-image,
    .why-card,
    .why-content,
    .why-item{
        width:100%;
        max-width:360px;
        margin-inline:auto;
    }

    .trusted-card{
        min-height:auto;
        padding:28px 22px;
    }

    .why-card,
    .why-item{
        padding:24px;
    }
}

@media (max-width:380px){
    section{
        padding:56px 0;
    }

    .hero{
        padding:98px 0 40px;
    }

    .why-item{
        gap:12px;
    }

    .why-icon{
        width:40px;
        height:40px;
    }
}

/* ==========================
   HERO CARD POLISH
========================== */

@media (min-width:561px) and (max-width:768px){
    .hero-stats .stat:nth-child(3):last-child{
        grid-column:1 / -1;
        justify-self:center;
        width:calc((100% - 16px) / 2);
    }
}

@media (max-width:560px){
    .hero-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:360px;
        gap:8px;
    }

    .stat{
        min-height:86px;
        padding:14px 8px;
        border-radius:16px;
    }

    .stat h3{
        font-size:1.08rem;
        line-height:1.15;
        margin-bottom:5px;
    }

    .stat p{
        font-size:.78rem;
        line-height:1.35;
    }

    .hero-image{
        margin-top:28px;
    }

    .app-screenshot-stack{
        max-width:min(100%,280px);
        margin-top:12px;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:260px;
    }

    .hero-mobile-shot{
        width:50%;
        max-width:125px;
        margin-top:-20px;
    }
}

@media (max-width:380px){
    .hero-stats{
        gap:7px;
    }

    .stat{
        min-height:82px;
        padding:12px 6px;
    }

    .stat h3{
        font-size:1rem;
    }

    .stat p{
        font-size:.72rem;
    }

    .app-screenshot-stack{
        max-width:min(100%,250px);
    }

    .app-screenshot-stack .hero-main-image{
        max-height:240px;
    }

    .hero-mobile-shot{
        max-width:112px;
    }
}

/* ==========================
   SECTION ALIGNMENT POLISH
========================== */

@media (max-width:560px){
    .why-grid{
        justify-items:center;
    }

    .why-card,
    .why-item{
        box-shadow:0 15px 40px rgba(0,0,0,.05);
    }

    .why-card h3,
    .why-card p{
        text-align:left;
    }

    .popular-tag{
        display:flex;
        width:100%;
        justify-content:center;
        align-items:center;
        margin:0 auto 18px;
        text-align:center;
    }
}

@media (min-width:561px){
    .popular-tag{
        justify-content:center;
        align-items:center;
        text-align:center;
    }
}

@media (min-width:561px) and (max-width:768px){
    .hero-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:620px;
        gap:16px;
    }

    .hero-stats .stat:nth-child(3):last-child{
        grid-column:auto;
        justify-self:stretch;
        width:100%;
    }

    .stat{
        min-height:104px;
    }

    .hero-image{
        margin-top:30px;
    }

    .app-screenshot-stack{
        max-width:min(100%,360px);
        margin-top:12px;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:340px;
    }

    .hero-mobile-shot{
        max-width:145px;
        margin-top:-26px;
    }
}

/* ==========================
   LARGER HERO IMAGE
========================== */

/* Tablets */
@media (max-width:1024px){

    .app-screenshot-stack{
        max-width:650px !important;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:none !important;
        width:100%;
    }
}

/* Mobile */
@media (max-width:768px){

    .app-screenshot-stack{
        max-width:500px !important;
    }

    .app-screenshot-stack .hero-main-image{
        max-height:none !important;
        width:100%;
    }

    .hero-mobile-shot{
        width:70% !important;
        max-width:260px !important;
    }
}

/* Small Phones */
@media (max-width:560px){

    .app-screenshot-stack{
        max-width:380px !important;
    }

    .hero-mobile-shot{
        width:65% !important;
        max-width:220px !important;
    }
}

/* ==========================
   TYPOGRAPHY CONSISTENCY PASS
========================== */
:root{
    --type-hero:5rem;
    --type-section:3.25rem;
    --type-card:1.25rem;
    --type-stat:1.6rem;
    --type-body:1rem;
    --type-small:.95rem;
    --type-label:.85rem;
    --leading-tight:1.1;
    --leading-heading:1.18;
    --leading-body:1.75;
}

html{
    font-size:16px;
}

body,
button,
input,
textarea,
select{
    font-family:'Inter', sans-serif;
    font-size:var(--type-body);
    letter-spacing:0;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Inter', sans-serif;
    letter-spacing:0;
}

.hero-content h1{
    font-size:var(--type-hero);
    line-height:var(--leading-tight);
    font-weight:800;
}

.section-title h2,
.app-content h2,
.cta-box h2,
.catalog-feature .why-content h2{
    font-size:var(--type-section);
    line-height:var(--leading-heading);
    font-weight:800;
}

.feature-card h3,
.step-card h3,
.pricing-card h3,
.store-content h3,
.why-card h3,
.why-item h3,
.payment-card h3,
.faq-question h3,
.checklist-item h4{
    font-size:var(--type-card);
    line-height:1.32;
    font-weight:700;
}

.trusted-card h2,
.pricing-card h2,
.stat h3{
    font-size:var(--type-stat);
    line-height:1.12;
    font-weight:800;
}

p,
li,
.hero-content p,
.section-title p,
.trusted-text,
.app-content p,
.why-card p,
.why-item p,
.feature-card p,
.step-card p,
.payment-card p,
.testimonial-card p,
.faq-answer p{
    font-size:var(--type-body);
    line-height:var(--leading-body);
    font-weight:400;
    letter-spacing:0;
}

.store-content p,
.checklist-item p,
.trusted-card p,
.stat p{
    font-size:var(--type-small);
    line-height:1.65;
}

.section-title span,
.app-content span,
.hero-badge,
.popular-tag,
.client-stores .section-title span,
.payment-setup .section-title span,
.catalog-feature .why-content > span,
.why-us .section-title span{
    font-size:var(--type-label);
    line-height:1.2;
    font-weight:700;
    letter-spacing:0;
    text-transform:uppercase;
}

@media (max-width:1024px){
    :root{
        --type-hero:3.75rem;
        --type-section:2.75rem;
    }
}

@media (max-width:768px){
    :root{
        --type-hero:2.375rem;
        --type-section:2.125rem;
        --type-card:1.18rem;
        --type-stat:1.35rem;
    }
}

@media (max-width:480px){
    :root{
        --type-hero:2rem;
        --type-section:1.85rem;
        --type-card:1.1rem;
        --type-stat:1.08rem;
        --type-body:.98rem;
        --type-small:.9rem;
        --type-label:.78rem;
    }
}

/* ==========================
   APP CAROUSEL RESPONSIVE
========================== */
@media (max-width:1024px){
    .app-preview.app-carousel{
        margin-top:18px;
    }
}

@media (max-width:768px){
    .app-carousel-phone{
        width:min(100%, 310px);
        padding:10px;
        border-radius:38px;
    }

    .app-carousel-viewport{
        border-radius:29px;
    }

    .app-carousel-control{
        width:40px;
        height:40px;
        background:rgba(255, 255, 255, .94);
        font-size:1.75rem;
    }

    .app-carousel-prev{
        left:10px;
    }

    .app-carousel-next{
        right:10px;
    }
}

@media (max-width:480px){
    .app-carousel-phone{
        width:min(100%, 270px);
        border-radius:34px;
    }

    .app-carousel-viewport{
        border-radius:25px;
    }

    .app-carousel-control{
        width:36px;
        height:36px;
        font-size:1.55rem;
    }

    .app-carousel-dot{
        width:9px;
        height:9px;
    }

    .app-carousel-dot.is-active{
        width:22px;
    }
}