/* =========================================================
   DEDUPED CSS
   Cleaned to remove repeated selectors and repeated rule blocks
   while preserving the existing structure and final visuals.
========================================================= */

/* =========================
   VARIABLES + RESET
========================= */
:root{
    --primary:#594F9D;
    --white:#ffffff;
    --text:#1D1D1F;
    --light:#F4F2FF;
    --gray:#6B7280;
    --border:#ECECEC;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    background:#ffffff;
    color:var(--text);
    transition:
        background .3s ease,
        color .3s ease;
}

/* =========================
   GLOBAL LAYOUT SYSTEM
========================= */

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 6%;
}

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.section-title span{
    display:inline-block;
    color:var(--primary);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:0;
    margin-bottom:15px;
}

.section-title h2{
    font-size:clamp(2.2rem,5vw,3.5rem);
    line-height:1.2;
    font-weight:800;
    margin-bottom:20px;
}

.section-title p{
    font-size:1.05rem;
    color:var(--gray);
    line-height:1.8;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
    hyphens:none;
    word-break:normal;
    overflow-wrap:normal;
}

/* =========================
   GRID SYSTEM
========================= */

.features-grid,
.trusted-grid,
.steps-grid,
.testimonial-grid,
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

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

.why-grid,
.app-grid,
.contact-grid,
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CARD SYSTEM
========================= */

.feature-card,
.step-card,
.testimonial-card,
.pricing-card,
.trusted-card,
.faq-item{
    background:#fff;
    border-radius:28px;
    padding:35px;
    transition:.35s ease;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.feature-card:hover,
.step-card:hover,
.testimonial-card:hover,
.pricing-card:hover,
.trusted-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(89,79,157,.12);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    margin-bottom:25px;
}

.feature-card h3,
.step-card h3,
.pricing-card h3{
    font-size:1.4rem;
    margin-bottom:15px;
}

.feature-card p,
.step-card p,
.testimonial-card p{
    color:var(--gray);
    line-height:1.8;
}

/* =====================
   TRUSTED SECTION
========================= */
.trusted-section{
    background:#fafafe;
}

.trusted-section .container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.trusted-text{
    max-width:760px;
    margin:0 auto 56px;
    color:var(--gray);
    font-size:1.05rem;
    line-height:1.8;
    text-align:center;
}

.trusted-grid{
    width:100%;
    max-width:1040px;
    margin:0 auto;
    align-items:stretch;
}

.trusted-card{
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:165px;
    padding:34px 24px;
}

.trusted-card h2{
    font-size:clamp(1.8rem,3vw,2.25rem);
    line-height:1.1;
    color:var(--primary);
    margin-bottom:10px;
}

.trusted-card p{
    color:var(--gray);
    font-size:1rem;
    font-weight:600;
    line-height:1.65;
}

/* =========================
   CTA SECTION
========================= */

.cta-box{
    background:linear-gradient(
        135deg,
        #594F9D,
        #6C63FF
    );
    color:#fff;
    text-align:center;
    border-radius:36px;
    padding:80px 40px;
    box-shadow:0 30px 70px rgba(89,79,157,.25);
}

.cta-box h2{
    font-size:clamp(2rem,5vw,3rem);
    margin-bottom:20px;
}

.cta-box p{
    max-width:700px;
    margin:0 auto 35px;
    line-height:1.8;
}

/* =========================
   FOOTER SYSTEM
========================= */

.footer-grid{
    display:grid;
    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;
    gap:50px;
}

.footer{
    background:#F8F8FC;
    padding:100px 0 60px;
}

.footer h2,
.footer h4{
    margin-bottom:20px;
}

.footer ul{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer p,
.footer a{
    color:var(--gray);
    line-height:1.8;
}

.footer a:hover{
    color:var(--primary);
}

.footer-bottom{
    grid-column:1/-1;
    text-align:center;
    padding-top:50px;
    margin-top:50px;
    border-top:1px solid rgba(0,0,0,.08);
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

a, button{
    transition:all .25s ease;
}

a:hover{
    opacity:.85;
}

ul{
    list-style:none;
}

/* selection */
::selection{
    background:#594F9D;
    color:#fff;
}

/* =========================
   GLOBAL SPACING
========================= */
section{
    padding:110px 0;
    position:relative;
    width:100%;
    overflow:hidden;
}

section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:85%;
    height:1px;
    background:rgba(0,0,0,.04);
    display:none; /* your later file disables this */
}

.hero,
.page-hero,
.download-page,
.thank-you-page{
    padding-top:140px;
}

/* =========================
   PREMIUM HEADER
========================= */
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    transition:.35s ease;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(0,0,0,.05);
}

.header.scrolled{
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;
    transition:.3s ease;
}

.header.scrolled .nav-container{
    height:75px;
}

/* =========================
   LOGO
========================= */
.logo,
.logo a{
    display:flex;
    align-items:center;
}

.logo-img{
    height:auto;
    object-fit:contain;
    transition:.35s ease;
    max-height:60px;
    width:auto;
    border-radius:14px;
    padding:4px;
    background:transparent;
}

.logo-img:hover{
    transform:scale(1.03);
}

/* Dark mode logo fix */
body.dark-mode .logo-img{
    mix-blend-mode:screen;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.08)) brightness(1.08) contrast(1.08);
}

/* =========================
   NAVIGATION
========================= */
.nav-links,
.nav-buttons{
    display:flex;
    align-items:center;
}

.nav-links{
    gap:35px;
}

.nav-links a{
    position:relative;
    color:var(--text);
    font-weight:600;
    transition:.3s ease;
}

.nav-links a:hover{
    color:var(--primary);
}

.nav-links a.active{
    color:var(--primary);
    font-weight:700;
}

.nav-links a.active::after,
.nav-links a:hover::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    width:100%;
    height:3px;
    border-radius:100px;
    background:var(--primary);
}

.nav-buttons{
    gap:15px;
}

.hamburger{
    display:none;
    width:48px;
    height:48px;
    border-radius:14px;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:2rem;
    cursor:pointer;
    user-select:none;
}

.hamburger:focus{
    outline:none;
}

.hamburger:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.theme-toggle{
    cursor:pointer;
    margin-left:20px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(89,79,157,.08);
    transition:.3s ease;
    font-size:1.2rem;
}

.theme-toggle:hover{
    transform:rotate(15deg);
}

/* =========================
   BUTTON SYSTEM
========================= */
.btn-primary,
.btn-secondary,
.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    border:none;
    outline:none;
    cursor:pointer;
    transition:all .35s ease;
    font-weight:600;
    line-height:1.2;
    text-align:center;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 30px rgba(89,79,157,.25);
}

.btn-primary:hover{
    box-shadow:0 18px 35px rgba(89,79,157,.35);
    scale:1.02;
}

.btn-secondary{
    color:var(--primary);
    padding:14px 18px;
    border-radius:14px;
}

.btn-secondary:hover{
    background:#594F9D;
    color:#fff;
}

.btn-outline{
    border:1px solid var(--border);
    color:var(--text);
    background:transparent;
}

.btn-primary,
.btn-outline{
    padding:14px 24px;
    border-radius:14px;
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active{
    transform:scale(.98);
}

/* Common hover up */
.btn-primary:hover,
.btn-outline:hover,
.btn-secondary:hover{
    transform:translateY(-4px);
}

/* =========================
   HERO (Final structure)
========================= */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative;
    padding:180px 0 100px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
}

.hero-content{
    position:relative;
    z-index:5;
}

.hero-content h1{
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.05;
    font-weight:800;
    max-width:700px;
    margin-bottom:24px;
}

.hero-content h1 span{
    color:var(--primary);
}

.hero-content p{
    font-size:1.15rem;
    line-height:1.9;
    color:var(--gray);
    margin-bottom:35px;
    max-width:620px;
    hyphens:none;
    word-break:normal;
    overflow-wrap:normal;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    padding:12px 22px;
    border-radius:999px;
    background:rgba(89,79,157,.12);
    color:var(--primary);
    font-weight:700;
    margin-bottom:30px;
}

.hero-buttons,
.hero-stats{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

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

.stat{
    background:#fff;
    padding:22px;
    border-radius:22px;
    min-width:160px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    max-width:620px;
}

.stat{
    min-width:0;
    width:100%;
}

.stat h3{
    color:var(--primary);
    font-size:1.6rem;
    margin-bottom:8px;
}

.hero-image{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translateY(-30px);
}

.hero-image-wrapper{
    position:relative;
    width:100%;
    max-width:470px;
    animation:floatPhone 5s ease-in-out infinite;
}

@keyframes floatPhone{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
    100%{ transform:translateY(0); }
}

.hero-phone{
    width:100%;
    max-width:460px;
}

.phone-frame,
.mini-phone-frame{
    overflow:hidden;
    position:relative;
    background:#111827;
}

.phone-frame{
    width:390px;
    height:760px;
    border-radius:50px;
    padding:14px;
    box-shadow:
        0 35px 80px rgba(89,79,157,.25),
        0 15px 40px rgba(0,0,0,.2);
}

.phone-frame::before,
.mini-phone-frame::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background:#000;
    z-index:10;
}

.phone-frame::before{
    width:180px;
    height:34px;
    border-radius:0 0 25px 25px;
}

.phone-screen,
.hero-main-image,
.mini-phone-frame img{
    width:100%;
    height:100%;
}

.phone-screen{
    border-radius:42px;
    overflow:hidden;
    background:#fff;
}

.hero-main-image{
    object-fit:cover;
    border-radius:42px;
}

.floating-card{
    position:absolute;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);
    border-radius:22px;
    padding:18px 24px;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
    z-index:8;
}

.floating-card span{
    display:block;
    font-size:.9rem;
    color:var(--gray);
    margin-bottom:6px;
}

.floating-card h3{
    font-size:1.2rem;
    color:var(--primary);
}

.sales-card{ top:10%; left:-80px; }
.order-card{ top:45%; right:-70px; }
.secure-card{ bottom:10%; left:-60px; }

/* =========================
   PAGE HERO
========================= */
.page-hero{
    min-height:auto;
    padding:90px 0 60px;
}

.page-hero-grid{
    display:grid;
    grid-template-columns:1fr 450px;
    gap:60px;
    align-items:center;
}

.page-hero-content h1{
    font-size:clamp(2.8rem,5vw,4rem);
    line-height:1.1;
    margin-bottom:20px;
}

.page-hero-content p{
    font-size:18px;
    line-height:1.8;
    max-width:550px;
}

.mini-phone-frame{
    width:320px;
    height:620px;
    margin:auto;
    padding:12px;
    border-radius:45px;
    box-shadow:0 30px 80px rgba(89,79,157,.25);
}

.mini-phone-frame::before{
    width:150px;
    height:30px;
    border-radius:0 0 20px 20px;
}

.mini-phone-frame img{
    object-fit:cover;
    border-radius:35px;
}

/* =========================
   MOBILE MENU
========================= */
.mobile-menu{
    position:fixed;
    top:85px;
    left:-100%;
    width:100%;
    height:calc(100vh - 85px);
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    padding:40px 30px;
    transition:.35s ease;
    z-index:999;
}

.mobile-menu.active{
    left:0;
}

.mobile-menu ul{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.mobile-menu a{
    font-size:1.2rem;
    color:var(--text);
    font-weight:600;
}

.mobile-menu a:hover{
    color:var(--primary);
}

body.dark-mode .mobile-menu{
    background:linear-gradient(135deg,#1E1B4B,#312E81) !important;
}

body.dark-mode .mobile-menu a{
    color:#FFFFFF !important;
}

body.dark-mode .mobile-menu a:hover,
body.dark-mode .mobile-menu a.active{
    color:#C4B5FD !important;
}

/* =========================
   RESPONSIVE (merged)
========================= */
@media (max-width:991px){
    .hero-grid,
    .page-hero-grid,
    .about-grid,
    .contact-grid,
    .app-grid,
    .why-grid,
    .footer-grid,
    .features-grid,
    .steps-grid,
    .pricing-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero{ padding:150px 0 80px; min-height:auto; }
    .hero-content{ order:1; }
    .hero-image{ order:2; margin-top:40px; justify-content:center; }

    .hero-content h1{ font-size:42px; line-height:1.2; }
    .hero-content p{ margin:auto; max-width:100%; }

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

    .phone-frame{ width:320px; height:620px; margin:auto; }
    .sales-card,.order-card,.secure-card{
        position:relative;
        inset:auto;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        margin:15px auto;
        transform:none;
        width:100%;
        max-width:280px;
    }

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

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

    .hamburger{ display:block; }

    .footer{ text-align:center; }
    .footer-grid{ gap:40px; }

    .mini-phone-frame{ width:280px; height:540px; margin-top:40px; }
}

@media (max-width:576px){
    .hero-content h1,
    .page-hero-content h1{
        font-size:34px;
    }

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

    .btn-primary,
    .btn-outline,
    .btn-secondary{
        width:100%;
        text-align:center;
        justify-content:center;
    }

    .phone-frame{ max-width:300px; height:580px; }
    .mini-phone-frame{ width:280px; height:540px; }

}

/* =========================
   DARK MODE
========================= */
body.dark-mode{
    background:#1b1433;
    color:#ffffff;
}

body.dark-mode .header{
    background:rgba(31,23,59,0.92);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

body.dark-mode .header.scrolled{
    background:rgba(15,23,42,.96);
}

body.dark-mode .nav-links a,
body.dark-mode .nav-links a.active,
body.dark-mode .nav-links a:hover{
    color:#FFFFFF;
}

body.dark-mode .nav-links a:hover{
    color:var(--primary);
}

body.dark-mode .page-hero,
body.dark-mode .trusted-section,
body.dark-mode .why-us,
body.dark-mode .testimonials,
body.dark-mode .faq-section{
    background:#111827;
}

body.dark-mode .stat{ background:#1E293B; }

body.dark-mode .floating-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(25px);
}

body.dark-mode .floating-card h3{ color:#fff; }
body.dark-mode .floating-card span{ color:rgba(255,255,255,0.7); }

body.dark-mode .footer{ background:#130d26; }
body.dark-mode .footer h2,
body.dark-mode .footer h4,
body.dark-mode .footer p,
body.dark-mode .footer a{ color:#ffffff; }

body.dark-mode .btn-outline{
    border:1px solid #475569;
    color:#F8FAFC;
    background:rgba(255,255,255,.03);
}

body.dark-mode .btn-outline:hover{
    background:#fff;
    color:#594F9D;
}

/* keep contact form dark */
body.dark-mode .contact-form form{
    background:#1E293B;
    border-color:#334155;
}

/* contact inputs */
body.dark-mode input,
body.dark-mode textarea{
    background:#0F172A;
    border:1px solid #334155;
    color:#F8FAFC;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
    color:#94A3B8;
}

.whatsapp-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    z-index:999;
    box-shadow:0 15px 35px rgba(37,211,102,.4);
    transition:all .3s ease;
}

.whatsapp-btn:hover{ transform:scale(1.12); }

/* =========================
   FINAL VISUAL FIXES
========================= */
.loader{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    z-index:10000;
    transition:opacity .3s ease, visibility .3s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-logo img{
    width:110px;
    height:auto;
}

.page-hero{
    margin-top:0;
    padding:115px 0 60px;
}

.page-hero-grid{
    align-items:flex-start;
}

.page-hero-content,
.page-hero-image{
    padding-top:35px;
}

body.dark-mode .features,
body.dark-mode .how-it-works,
body.dark-mode .pricing,
body.dark-mode .app-section,
body.dark-mode .contact-section{
    background:#1b1433;
}

body.dark-mode .section-title h2,
body.dark-mode .section-title p,
body.dark-mode .feature-card h3,
body.dark-mode .step-card h3,
body.dark-mode .testimonial-card h4,
body.dark-mode .pricing-card h3,
body.dark-mode .pricing-card h2,
body.dark-mode .contact-info h2,
body.dark-mode .contact-info p{
    color:#fff;
}

body.dark-mode .feature-card,
body.dark-mode .step-card,
body.dark-mode .testimonial-card,
body.dark-mode .pricing-card,
body.dark-mode .faq-item{
    background:#251f45;
    border-color:rgba(255,255,255,.1);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

body.dark-mode .feature-card p,
body.dark-mode .step-card p,
body.dark-mode .testimonial-card p,
body.dark-mode .pricing-card li,
body.dark-mode .faq-answer p{
    color:rgba(255,255,255,.78);
}

body.dark-mode .step-card span,
body.dark-mode .section-title span{
    color:#C4B5FD;
}

/* =========================
   CLIENT REVIEW UPDATES
========================= */
section{
    scroll-margin-top:95px;
}

.hero{
    min-height:auto;
    padding:125px 0 80px;
}

.hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
    gap:70px;
}

.app-screenshot-stack{
    max-width:520px;
    margin-left:auto;
    animation:none;
    transform:translateX(-20px);
}

.app-screenshot-stack .hero-main-image{
    width:100%;
    height:auto;
    max-height:560px;
    object-fit:contain;
    border-radius:28px;
    box-shadow:0 30px 80px rgba(89,79,157,.18);
}

.hero-mobile-shot{
    position:absolute;
    right:-28px;
    bottom:-18px;
    width:40%;
    max-width:190px;
    border-radius:28px;
    box-shadow:0 24px 60px rgba(17,24,39,.22);
}

.store-button{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    min-width:150px;
    min-height:52px;
    padding:8px 14px;
    border-radius:16px;
    border:1px solid rgba(89,79,157,.2);
    background:#fff;
    color:var(--text);
    box-shadow:0 14px 35px rgba(0,0,0,.08);
    transition:.3s ease;
}

.store-button span{
    font-size:.65rem;
    line-height:1;
    color:var(--gray);
}

.store-button strong{
    font-size:.95rem;
    line-height:1.2;
}

.store-button:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(89,79,157,.16);
}

.store-button-dark{
    background:#111827;
    color:#fff;
    border-color:#111827;
}

.store-button-dark span{
    color:rgba(255,255,255,.72);
}

.app-section{
    background:#fafafe;
}

.app-content span{
    display:inline-block;
    color:var(--primary);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:0;
    margin-bottom:18px;
}

.app-content h2{
    font-size:clamp(2.2rem,5vw,3.4rem);
    line-height:1.15;
    margin-bottom:20px;
}

.app-content p{
    color:var(--gray);
    line-height:1.8;
    margin-bottom:35px;
    max-width:560px;
}

.app-screenshot-frame{
    width:min(100%,430px);
    margin:0 auto;
    padding:14px;
    border-radius:42px;
    background:#111827;
    box-shadow:0 30px 80px rgba(89,79,157,.22);
}

.app-screenshot-frame img{
    width:100%;
    height:auto;
    border-radius:30px;
}

.pricing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:860px;
    margin:0 auto;
}

.pricing-card ul{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:28px 0;
}

.pricing-card li{
    color:var(--gray);
    line-height:1.6;
}

.pricing-card li::before{
    content:"✓";
    color:var(--primary);
    font-weight:800;
    margin-right:10px;
}

.featured-plan{
    background:var(--primary);
    color:#fff;
    transform:none;
}

.featured-plan h3,
.featured-plan h2,
.featured-plan li{
    color:#fff;
}

.featured-plan li::before{
    color:#fff;
}

.popular-tag{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:18px;
}

body.dark-mode .store-button{
    background:#251f45;
    color:#fff;
    border-color:rgba(255,255,255,.1);
}

body.dark-mode .store-button span{
    color:rgba(255,255,255,.72);
}

body.dark-mode .store-button-dark{
    background:#fff;
    color:#111827;
    border-color:#fff;
}

body.dark-mode .store-button-dark span{
    color:#475569;
}

.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    margin-top:0;
}

.faq-item.active .faq-answer{
    max-height:200px;
    margin-top:20px;
}
/* =========================
   PREMIUM MOBILE MENU (DRAWER)
========================= */

.mobile-menu{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);

    transform:translateX(100%);
    transition:transform .35s ease;
    visibility:hidden;
    pointer-events:none;
    overflow-y:auto;

    z-index:9998;

    padding:100px 30px 40px;
}

.mobile-menu.active{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
}

body.menu-open{
    overflow:hidden;
}

/* WHY SECTION DARK MODE FIX */
body.dark-mode .why-card,
body.dark-mode .why-item{
    background:#251f45;
    border-color:rgba(255,255,255,.1);
}

body.dark-mode .why-card h3,
body.dark-mode .why-item h3{
    color:#ffffff;
}

body.dark-mode .why-card p,
body.dark-mode .why-item p{
    color:rgba(255,255,255,.78);
}

/* DARK MODE */
body.dark-mode .mobile-menu{
    background:rgba(17,24,39,.92);
}

.mobile-menu ul{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.mobile-menu li{
    opacity:1;
    transform:none;
    animation:none;
}

.mobile-menu.active li{
    opacity:0;
    transform:translateX(20px);
    animation:fadeInMenu .45s forwards;
}

@keyframes fadeInMenu{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

.mobile-menu a{
    font-size:1.2rem;
    font-weight:600;
    color:var(--text);
}

.mobile-cta{
    display:block;
    text-align:center;
    padding:14px 18px;
    border-radius:14px;
    font-weight:700;
    margin-top:10px;
}

.mobile-cta.primary{
    background:var(--primary);
    color:#fff !important;
    box-shadow:0 12px 30px rgba(89,79,157,.25);
}

.mobile-cta.secondary{
    border:1px solid var(--primary);
    color:var(--primary) !important;
    background:transparent;
}
/* =========================
   WHY WISHOP CONTENT SYSTEM
========================= */

.why-grid{
    gap:70px;
}

.why-card{
    width:100%;
    padding:35px;
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    border-radius:28px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    text-align:left;
}

.why-card h3,
.why-item h3{
    font-size:1.35rem;
    line-height:1.35;
    font-weight:700;
    margin-bottom:12px;
}

.why-card p,
.why-item p{
    color:var(--gray);
    font-size:1rem;
    line-height:1.8;
}

.why-content{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.why-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:28px;
    margin-bottom:0;
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    border-radius:28px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    text-align:left;
    transition:.35s ease;
}

.why-item:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.why-icon{
    width:46px;
    height:46px;
    margin-top:2px;
    border-radius:14px;
    background:rgba(89,79,157,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:var(--primary);
    flex-shrink:0;
}
/* =========================
   CONTACT FORM MOBILE FIX
========================= */

@media (max-width: 991px) {

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

    .contact-form form{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .contact-form input,
    .contact-form textarea{
        width: 100%;
        display: block;
    }

    .contact-form button,
    .contact-form .btn-primary,
    .contact-form .btn-outline{
        width: 100%;
        display: block;
        text-align: center;
    }
}

   @media (max-width:991px){

    /* smaller WhatsApp button */
    .whatsapp-btn{
        width:55px;
        height:55px;
        font-size:22px;
        right:18px;
        bottom:80px;
    }
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}

.contact-buttons{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:32px;
}

.contact-buttons a{
    min-width:220px;
    padding:14px 24px;
    text-align:center;
}

@media (max-width:991px){
    .contact-buttons{
        justify-content:center;
    }
}

@media (max-width:768px){

.contact-buttons{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:32px;
}

.contact-buttons a{
    width:220px;
    text-align:center;
    white-space:nowrap;
    padding:14px 24px;
}

}

/* ==========================
   STEP 1 — CARD ALIGNMENT FIX
========================== */

/* make cards equal height */
.features-grid,
.trusted-grid,
.steps-grid,
.testimonial-grid,
.pricing-grid{
    align-items:stretch;
}

/* consistent card structure */
.feature-card,
.step-card,
.testimonial-card,
.pricing-card,
.trusted-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* trusted cards alignment */
.trusted-card{
    justify-content:center;
    min-height:180px;
    text-align:center;
}

/* feature card spacing consistency */
.feature-card{
    justify-content:flex-start;
}

.feature-card h3,
.step-card h3,
.pricing-card h3{
    margin-bottom:12px;
}

.feature-card p,
.step-card p,
.testimonial-card p{
    margin-top:auto;
}

/* hero stats alignment */
.hero-stats{
    align-items:stretch;
}

.stat{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:120px;
    text-align:center;
}

/* ==========================
   STEP 2 — UI CONSISTENCY FIX
========================== */

/* consistent container spacing */
.container{
    width:min(100% - 40px, 1280px);
    margin-inline:auto;
    padding:0;
}

/* consistent section spacing */
section{
    padding:100px 0;
}

/* section title consistency */
.section-title{
    margin:0 auto 60px;
}

.section-title h2{
    max-width:780px;
    margin-inline:auto;
}

.section-title p{
    max-width:700px;
    margin-inline:auto;
}

/* consistent card spacing */
.feature-card,
.step-card,
.testimonial-card,
.pricing-card,
.trusted-card,
.faq-item{
    border-radius:28px;
    padding:32px;
}

/* button alignment consistency */
/* button alignment consistency */
.hero-buttons{
    gap:16px;
    align-items:center;
}

.contact-buttons{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:32px;
}

.contact-buttons a{
    width:220px;
    text-align:center;
    padding:14px 24px;
}

.contact-buttons .btn-primary,
.contact-buttons .btn-outline{
    padding:12px 18px;
    font-size:.95rem;
}

/* store button consistency */
.store-button{
    justify-content:center;
    text-align:left;
}

/* typography consistency */
.feature-card p,
.step-card p,
.pricing-card li,
.testimonial-card p,
.why-item p,
.app-content p{
    line-height:1.7;
}

/* fix why section spacing */
.why-content{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* image alignment */
.hero-image,
.app-preview{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* footer spacing cleanup */
.footer-grid{
    align-items:start;
}

/* pricing cards alignment */
.pricing-card{
    justify-content:space-between;
}

/* FAQ spacing */
.faq-question{
    gap:20px;
}

.faq-answer{
    padding-top:8px;
}
/* ==========================
   STEP 3 — RESPONSIVENESS FIX
========================== */

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

    .hero{
        padding:130px 0 70px;
    }

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

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

    .hero-content p,
    .app-content p{
        max-width:700px;
        margin-inline:auto;
    }

    .hero-image{
        transform:none;
    }

    .hero-main-image{
        max-width:100%;
        height:auto;
    }

    .app-preview{
        margin-top:10px;
    }

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

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

    .pricing-grid{
        grid-template-columns:1fr;
        max-width:550px;
        margin:auto;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }
}

/* ---------- TABLETS & MOBILE ---------- */
@media (max-width:768px){

    .hero{
        padding:120px 0 60px;
    }

    .hero-grid{
        gap:35px;
    }

    .hero-content h1{
        font-size:clamp(2.2rem,7vw,2.8rem);
        line-height:1.15;
    }

    .hero-content p{
        font-size:1rem;
        line-height:1.8;
    }

    /* buttons full width */
    .hero-buttons{
        width:100%;
        flex-direction:column;
    }

    .hero-buttons a,
    .store-button,
    .btn-primary,
    .btn-outline{
        width:100%;
        justify-content:center;
        text-align:center;
    }

        .store-button{
        max-width:220px;
        min-height:48px;
        padding:8px 14px;
        margin:auto;
    }

    .store-button span{
        font-size:.6rem;
    }

    .store-button strong{
        font-size:.9rem;
    }

    /* image scaling */
    .app-screenshot-frame,
    .app-screenshot-stack{
        max-width:320px;
        margin-inline:auto;
    }

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

    /* cards become single column */
    .features-grid,
    .pricing-grid,
    .testimonial-grid,
    .steps-grid,
    .trusted-grid{
        grid-template-columns:1fr;
    }

    /* hero stats stacking */
    .hero-stats{
        grid-template-columns:1fr;
        max-width:320px;
        margin:auto;
    }

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

    .footer ul{
        padding:0;
    }

    /* contact buttons */
    .contact-buttons{
        flex-direction:column;
        width:100%;
    }
.contact-buttons a{
    width:auto;
    min-width:140px;
    padding:10px 16px;
    font-size:.9rem;
}

    /* compact buttons */
.store-button{
    max-width:190px;
    min-height:45px;
    padding:7px 12px;
}

.store-button strong{
    font-size:.85rem;
}

.contact-buttons .btn-primary,
.contact-buttons .btn-outline{
    font-size:.9rem;
    padding:10px 16px;
}

.whatsapp-btn{
    width:50px;
    height:50px;
    font-size:20px;
}
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width:480px){

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

    .hero{
        padding:110px 0 50px;
    }

    .hero-content h1{
        font-size:2rem;
    }

    .section-title h2{
        font-size:1.9rem;
        line-height:1.2;
    }

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

    .logo-img{
        max-height:48px;
    }

    .whatsapp-btn{
        width:56px;
        height:56px;
        right:18px;
        bottom:18px;
        font-size:24px;
    }
}
/* DESKTOP CONTACT BUTTON FIX */

.contact-buttons{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:16px !important;
    flex-wrap:wrap;
}

.contact-buttons a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:220px !important;
    min-height:48px !important;
    padding:14px 24px !important;
    text-align:center !important;
    white-space:nowrap;
}

@media (max-width:1024px){
    .contact-buttons{
        justify-content:center !important;
    }
}

@media (max-width:768px){
    .contact-buttons{
        flex-direction:column !important;
        align-items:center !important;
        width:100%;
        gap:14px !important;
    }

    .contact-buttons a{
        width:min(100%,260px) !important;
    }
}

.store-badges{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:25px;
}

.store-badges img{
    height:55px;
    width:auto;
    display:block;
    transition:.3s ease;
}

.store-badges img:hover{
    transform:translateY(-3px);
}

/* ==========================
PAYMENT SETUP SECTION
========================== */


.payment-setup{

    padding:100px 0;

    background:#fafafa;

}



.payment-grid{


    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

    margin-top:50px;


}





.payment-card{


    background:#ffffff;

    padding:40px 30px;

    border-radius:20px;

    position:relative;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.06);

    transition:0.3s ease;


}



.payment-card:hover{


    transform:translateY(-8px);


}





.payment-number{


    position:absolute;

    top:20px;

    right:25px;


    font-size:45px;

    font-weight:800;

    color:#594F9D;

    opacity:0.15;


}




.payment-icon{


    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#594F9D;

    color:white;

    border-radius:15px;


    font-size:30px;


    margin-bottom:25px;


}




.payment-card h3{


    font-size:22px;

    margin-bottom:15px;

}



.payment-card p{


    color:#666;

    line-height:1.7;

    margin-bottom:20px;


}




.payment-card ul{


    list-style:none;

    padding:0;

}



.payment-card ul li{


    margin-bottom:10px;

    font-weight:500;

}



.payment-card ul li::before{


    content:"✓";

    color:#594F9D;

    font-weight:bold;

    margin-right:10px;


}





/* TABLET */

@media(max-width:900px){


.payment-grid{


grid-template-columns:
repeat(2,1fr);


}


}





/* MOBILE */

@media(max-width:600px){


.payment-grid{


grid-template-columns:
1fr;


}



.payment-setup{


padding:70px 0;


}


}

/* FIX PAYMENT SECTION HEADING VISIBILITY */

.payment-setup .section-title span {
    color: #594F9D !important;
}


.payment-setup .section-title h2 {
    color: #111827 !important;
}


.payment-setup .section-title p {
    color: #555 !important;
}

/* PAYMENT SECTION DARK BACKGROUND FIX */

.payment-setup {

    background:#594F9D !important;

    padding:100px 0;

}


/* PAYMENT SECTION HEADING */

.payment-setup .section-title span {

    color:#ffffff !important;

}


.payment-setup .section-title h2 {

    color:#ffffff !important;

}


.payment-setup .section-title p {

    color:rgba(255,255,255,0.8) !important;

}


/* PAYMENT CARDS */

.payment-setup .payment-card {

    background:#ffffff;

}

/* TRUSTED + PAYMENT CARD BACKGROUND FIX */


.trusted-section .trusted-card,
.payment-setup .payment-card {

    background:transparent !important;

    border:1px solid rgba(255,255,255,0.25);

    color:white;

}


/* HEADINGS */

.trusted-section .trusted-card h2,
.payment-setup .payment-card h3 {

    color:white !important;

}


/* TEXT */

.trusted-section .trusted-card p,
.payment-setup .payment-card p {

    color:rgba(255,255,255,0.8) !important;

}


/* LIST ITEMS IN PAYMENT CARDS */

.payment-setup .payment-card ul li {

    color:white;

}


.payment-setup .payment-card ul li::before {

    color:white;

}

/* HOW IT WORKS IMPROVEMENT */

.how-it-works .step-card span{

display:inline-flex;

width:55px;

height:55px;

align-items:center;

justify-content:center;

border-radius:50%;

background:#594F9D;

color:white;

font-weight:700;

font-size:18px;

margin-bottom:20px;

}


.how-it-works .step-card h3{

margin-bottom:15px;

}


.how-it-works .step-card p{

line-height:1.7;

}

/* =====================
CLIENT STORES SECTION
===================== */


.client-stores{

padding:100px 0;

background:#fafafa;

}




.stores-grid{


display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:50px;


}




.store-card{


background:white;

border-radius:20px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,0.08);

transition:.3s ease;


}



.store-card:hover{


transform:translateY(-8px);


}





.store-image{


height:260px;

overflow:hidden;


}



.store-image img{


width:100%;

height:100%;

object-fit:cover;


}





.store-content{


padding:25px;


}



.store-content h3{


font-size:22px;

margin-bottom:10px;


}




.store-content p{


color:#666;

line-height:1.6;


}





@media(max-width:900px){


.stores-grid{

grid-template-columns:
repeat(2,1fr);

}


}





@media(max-width:600px){


.stores-grid{

grid-template-columns:
1fr;

}


}

/* CLIENT STORES TEXT VISIBILITY FIX */


.client-stores .section-title span{

    color:#594F9D !important;

}



.client-stores .section-title h2{

    color:#111827 !important;

}



.client-stores .section-title p{

    color:#555 !important;

}

/* ================================
CLIENT STORES SECTION FINAL FIX
================================ */


/* SECTION BACKGROUND */

.client-stores {

    background:#594F9D !important;

}



/* SECTION TITLE */

.client-stores .section-title span {

    color:#ffffff !important;

}


.client-stores .section-title h2 {

    color:#ffffff !important;

}


.client-stores .section-title p {

    color:rgba(255,255,255,0.85) !important;

}





/* STORE CARDS */

.client-stores .store-card {

    background:rgba(255,255,255,0.12) !important;

    border:1px solid rgba(255,255,255,0.25);

}




/* STORE IMAGE AREA */

.client-stores .store-image {


    background:#3f3678;

    color:white;

}



/* ALT TEXT / BROKEN IMAGE TEXT */

.client-stores .store-image img {


    color:white !important;

}





/* STORE CONTENT */

.client-stores .store-content h3 {


    color:white !important;


}



.client-stores .store-content p {


    color:rgba(255,255,255,0.85) !important;


}

/* =================================
CLIENT STORES DARK PURPLE FIX
================================= */


/* MAIN SECTION */

.client-stores {

    background:#594F9D !important;

}



/* SECTION HEADINGS */

.client-stores .section-title span {

    color:#ffffff !important;

}


.client-stores .section-title h2 {

    color:#ffffff !important;

}


.client-stores .section-title p {

    color:#ffffff !important;

}



/* STORE CARD */

.client-stores .store-card {

    background:#ffffff !important;

    color:#111827 !important;

}



/* STORE IMAGE AREA */

.client-stores .store-image {

    background:#2f255f;

}



/* IMAGE ALT TEXT */

.client-stores .store-image img {

    color:#ffffff !important;

}



/* STORE CONTENT */

.client-stores .store-content {

    background:#ffffff;

}



.client-stores .store-content h3 {

    color:#111827 !important;

}



.client-stores .store-content p {

    color:#555555 !important;

}

/* =================================
   RESET MERCHANT + PAYMENT SECTION BACKGROUNDS
================================= */


/* MERCHANT STORES */

.client-stores {

    background:#ffffff !important;

}


.client-stores .store-card {

    background:#ffffff !important;

}




/* DIGITAL PAYMENTS */

.payment-setup {

    background:#ffffff !important;

}


.payment-setup .payment-card {

    background:#ffffff !important;

}

/* WHITE BACKGROUND TEXT FIX */


.client-stores .section-title span,
.payment-setup .section-title span {

    color:#594F9D !important;

}



.client-stores .section-title h2,
.payment-setup .section-title h2 {

    color:#111827 !important;

}



.client-stores .section-title p,
.payment-setup .section-title p {

    color:#555 !important;

}




.client-stores .store-content h3,
.payment-setup .payment-card h3 {

    color:#111827 !important;

}



.client-stores .store-content p,
.payment-setup .payment-card p {

    color:#555 !important;

}

/* =================================
TRUSTED SECTION WHITE BACKGROUND FIX
================================= */


/* SECTION */

.trusted-section {

    background:#ffffff !important;

}



/* TRUST CARDS */

.trusted-section .trusted-card {

    background:#ffffff !important;

}



/* CARD HEADING */

.trusted-section .trusted-card h2 {

    color:#111827 !important;

}



/* CARD DESCRIPTION */

.trusted-section .trusted-card p {

    color:#555555 !important;

}

/* =====================================
RESET SECTION BACKGROUNDS FOR DARK MODE
===================================== */


/* TRUSTED SECTION */

.trusted-section {

    background:#594F9D !important;

}



.trusted-section .trusted-card {

    background:rgba(255,255,255,0.12) !important;

    border:1px solid rgba(255,255,255,0.25);

}


.trusted-section .trusted-card h2 {

    color:white !important;

}


.trusted-section .trusted-card p {

    color:rgba(255,255,255,0.85) !important;

}




/* CLIENT STORES */

.client-stores {

    background:#594F9D !important;

}



.client-stores .store-card {

    background:rgba(255,255,255,0.12) !important;

}



.client-stores .store-content {

    background:transparent !important;

}



.client-stores .store-content h3 {

    color:white !important;

}



.client-stores .store-content p {

    color:rgba(255,255,255,0.85) !important;

}





/* DIGITAL PAYMENTS */

.payment-setup {

    background:#594F9D !important;

}



.payment-setup .payment-card {

    background:rgba(255,255,255,0.12) !important;

}



.payment-setup .payment-card h3 {

    color:white !important;

}



.payment-setup .payment-card p {

    color:rgba(255,255,255,0.85) !important;

}


.payment-setup .payment-card li {

    color:white !important;

}

/* =====================================
FIX SECTION LABELS + TEXT VISIBILITY
TRUSTED / MERCHANT / PAYMENT
===================================== */


/* RESET SECTION LABEL BACKGROUND */

.trusted-section .section-title span,
.client-stores .section-title span,
.payment-setup .section-title span {

    background:transparent !important;

    color:#594F9D !important;

    display:inline-block;

}



/* WHITE BACKGROUND MODE */

.trusted-section,
.client-stores,
.payment-setup {

    background:#ffffff !important;

}



/* HEADINGS */

.trusted-section .section-title h2,
.client-stores .section-title h2,
.payment-setup .section-title h2 {

    color:#111827 !important;

}



/* DESCRIPTION */

.trusted-section .section-title p,
.client-stores .section-title p,
.payment-setup .section-title p {

    color:#555 !important;

}

/* =========================
   CLIENT STORES SECTION
========================= */
.client-stores {
    background: #ffffff;
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.store-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
    transition: .35s ease;
    display: flex;
    flex-direction: column;
}

.store-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}

.store-image {
    width: 100%;
    height: 240px;
    background: var(--light);
    overflow: hidden;
    position: relative;
}

.store-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.store-card:hover .store-image img {
    transform: scale(1.05);
}

.store-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.store-content h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.store-content p {
    color: var(--gray);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Responsive adjustment for tablets and mobile */
@media (max-width: 992px) {
    .stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stores-grid {
        grid-template-columns: 1fr;
    }
    
    .store-image {
        height: 200px;
    }
}

/* =========================================
   NEW SECTION: CATALOG FEATURE MOCKUP
========================================= */
.catalog-feature {
    background: #ffffff;
}

.why-image-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    max-width: 320px;
    width: 100%;
    background: #111111;
    border-radius: 44px;
    padding: 12px;
    box-shadow: 0 30px 60px rgba(89, 79, 157, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.phone-frame img {
    width: 100%;
    height: auto;
    border-radius: 34px;
    display: block;
}

/* Checklist Layout Styles */
.feature-checklist {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.checklist-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(89, 79, 157, 0.1);
    color: var(--primary);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.checklist-item h4 {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 700;
}

.checklist-item p {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.5;
}

/* Fix ordering on mobile phones */
@media (max-width: 768px) {
    .catalog-feature .why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .catalog-feature .why-content {
        text-align: center;
    }
    .checklist-item {
        justify-content: center;
    }
}

/* ==========================
   SECTION THEME VISIBILITY FIX
========================== */
.trusted-section {
    background: #fafafe !important;
}

.client-stores,
.payment-setup,
.catalog-feature,
.why-us {
    background: #ffffff !important;
}

.trusted-section .trusted-card,
.client-stores .store-card,
.payment-setup .payment-card,
.why-card,
.why-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .05) !important;
    color: var(--text) !important;
}

.client-stores .store-content {
    background: #ffffff !important;
}

.trusted-text,
.trusted-section .trusted-card p,
.client-stores .section-title p,
.client-stores .store-content p,
.payment-setup .section-title p,
.payment-setup .payment-card p,
.catalog-feature .why-content p,
.catalog-feature .checklist-item p,
.why-card p,
.why-item p {
    color: var(--gray) !important;
}

.trusted-section .trusted-card h2,
.client-stores .section-title span,
.payment-setup .section-title span,
.catalog-feature .why-content > span,
.payment-setup .payment-card ul li::before {
    color: var(--primary) !important;
}

.client-stores .section-title h2,
.payment-setup .section-title h2,
.catalog-feature .why-content h2,
.catalog-feature .checklist-item h4,
.client-stores .store-content h3,
.payment-setup .payment-card h3,
.payment-setup .payment-card ul li,
.why-card h3,
.why-item h3 {
    color: var(--text) !important;
}

body.dark-mode .trusted-section,
body.dark-mode .client-stores,
body.dark-mode .payment-setup,
body.dark-mode .catalog-feature,
body.dark-mode .why-us {
    background: #111827 !important;
}

body.dark-mode .trusted-section .trusted-card,
body.dark-mode .client-stores .store-card,
body.dark-mode .payment-setup .payment-card,
body.dark-mode .why-card,
body.dark-mode .why-item {
    background: #251f45 !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24) !important;
    color: #ffffff !important;
}

body.dark-mode .client-stores .store-content {
    background: transparent !important;
}

body.dark-mode .client-stores .store-image,
body.dark-mode .check-icon {
    background: rgba(255, 255, 255, .08) !important;
}

body.dark-mode .trusted-text,
body.dark-mode .trusted-section .trusted-card p,
body.dark-mode .client-stores .section-title p,
body.dark-mode .client-stores .store-content p,
body.dark-mode .payment-setup .section-title p,
body.dark-mode .payment-setup .payment-card p,
body.dark-mode .payment-setup .payment-card ul li,
body.dark-mode .catalog-feature .why-content p,
body.dark-mode .catalog-feature .checklist-item p,
body.dark-mode .why-card p,
body.dark-mode .why-item p {
    color: rgba(255, 255, 255, .78) !important;
}

body.dark-mode .trusted-section .trusted-card h2,
body.dark-mode .client-stores .section-title h2,
body.dark-mode .client-stores .store-content h3,
body.dark-mode .payment-setup .section-title h2,
body.dark-mode .payment-setup .payment-card h3,
body.dark-mode .catalog-feature .why-content h2,
body.dark-mode .catalog-feature .checklist-item h4,
body.dark-mode .why-card h3,
body.dark-mode .why-item h3 {
    color: #ffffff !important;
}

body.dark-mode .client-stores .section-title span,
body.dark-mode .payment-setup .section-title span,
body.dark-mode .catalog-feature .why-content > span,
body.dark-mode .why-us .section-title span,
body.dark-mode .payment-setup .payment-card ul li::before,
body.dark-mode .check-icon {
    color: #c4b5fd !important;
}

/* ==========================
   APP SCREEN CAROUSEL
========================== */
.app-preview.app-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.app-carousel-phone {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 946 / 2048;
    padding: 12px;
    border-radius: 44px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 30px 80px rgba(89, 79, 157, .24);
}

.app-carousel-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 34px;
    background: #fff;
}

.app-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.app-carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
    background: #fff;
}

.app-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.app-carousel-control {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.app-carousel-control:hover,
.app-carousel-control:focus-visible {
    box-shadow: 0 18px 42px rgba(89, 79, 157, .22);
    outline: 0;
    transform: translateY(-50%) scale(1.05);
}

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

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

.app-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.app-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(89, 79, 157, .25);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, transform .25s ease;
}

.app-carousel-dot:hover,
.app-carousel-dot:focus-visible {
    outline: 0;
    transform: scale(1.2);
}

.app-carousel-dot.is-active {
    width: 26px;
    background: var(--primary);
}

body.dark-mode .app-carousel-phone {
    background: #0f172a;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}

body.dark-mode .app-carousel-control {
    background: #251f45;
    color: #fff;
}

body.dark-mode .app-carousel-dot {
    background: rgba(255, 255, 255, .24);
}

body.dark-mode .app-carousel-dot.is-active {
    background: #c4b5fd;
}