#installHeader{

margin:0;
top:0;

}

.installHero:first-child{

margin-top:0;

}

#heroBannerSlider:first-child{

margin-top:0;

}



#installNowBtn.installed{

    background:#16a34a;

    color:#fff;

    cursor:default;

    box-shadow:0 8px 20px rgba(22,163,74,.25);

}

#installNowBtn.installed:active{

    transform:none;

}

.installMainCard{

background:#fff;

border-radius:24px;

padding:28px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

margin:25px auto;

max-width:460px;

}

.installMini{

font-size:13px;

color:#666;

text-transform:uppercase;

letter-spacing:2px;

margin-bottom:8px;

}
#appVersion{

display:inline-block;

padding:8px 16px;

background:#f3f4f6;

border-radius:999px;

font-weight:700;

font-size:13px;

margin-top:10px;

}

.installDesc{

margin:22px 0;

color:#555;

line-height:1.7;

}

#installNowBtn{

width:100%;

height:58px;

border-radius:16px;

font-size:18px;

font-weight:700;

background:#111827;

box-shadow:0 10px 25px rgba(17,24,39,.25);

}


#installNowBtn:active{

    transform:scale(.98);

}

#installProgressBox{

    width:100px;

    height:10px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

    margin-top:18px;

    display:none;

}

#installProgressBar{

    width:100%;

    height:100%;

    background:#10b981;

    transition:.25s;

}

#installStatus{

margin-top:14px;

font-weight:600;

font-size:14px;

color:#666;

}

/* ===================================
FULL WIDTH HERO BANNER
=================================== */

#heroBannerSlider{

width:calc(100% + 40px);

margin:0 -20px 0px;

overflow:hidden;

border-radius:15px;

}

.heroBannerTrack{

display:flex;

overflow-x:auto;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

gap:0;

}

.heroBannerTrack img{

display:block;

width:100%;

min-width:100%;

height:220px;

object-fit:contain;

border-radius:5px;

}

@media(min-width:768px){

.heroBannerTrack img{

height:340px;

}

}


#installHeader{

position:fixed;

top:0;

left:0;

right:0;

height:65px;

background:#fff;
color:#111;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 18px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

z-index:1000;

}

.headerLogo{

display:flex;

align-items:center;

gap:10px;

font-weight:bold;

}

.headerLogo img{

width:50px;

height:50px;

border-radius:12px;

}

.headerTitle{

    position:absolute;

    left:50%;
    top:14px;

    transform:translateX(-50%);

    margin:0;

    font-size:20px;

    font-weight:700;

    letter-spacing:1px;

    pointer-events:none;

}

#menuToggle{

    background:none;
    border:none;
    color:#111;
    font-size:30px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:right;
    justify-content:right;

}

#menuToggle:hover{
    color:#000;
}

#menuToggle:focus{
    outline:none;
}

#menuToggle::before{
    color:#111;
}

#sbpInstallScreen{

min-height:100vh;

padding:60px 20px 40px;

box-sizing:border-box;

background:#f7f8fc;

}
#sideMenu{

position:fixed;

top:0;

right:-280px;

width:260px;

height:100%;

background:#fff;

transition:.30s;

box-shadow:4px 0 20px rgba(0,0,0,.18);

z-index:1200;

overflow:auto;

}

#sideMenu.active{

right:0;

}

.sideMenuHeader{

padding:30px 20px;

font-size:22px;

font-weight:bold;

background:#111827;

color:#fff;

}

#sideMenu a{

display:block;

padding:18px 20px;

color:#333;

text-decoration:none;

border-bottom:1px solid #eee;

}

#sideMenu a:hover{

background:#f5f5f5;

}

#menuOverlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

display:none;

z-index:1100;

}

#menuOverlay.active{

display:block;

}

.landingSection{

margin-top:70px;

max-width:950px;

width:100%;

}

.featureGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:18px;

margin-top:20px;

}

.featureCard{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 4px 18px rgba(0,0,0,.08);

}

.featureList{

padding-left:20px;

line-height:2;

}

#landingFooter{

margin:60px 0;

color:#666;

}

.installHero{

max-width:500px;

margin:0 auto;

text-align:center;

padding:0px 15px;

}




body{

    margin:0;
    padding:0;
    background:#f7f8fc;
    font-family:Arial,sans-serif;

}



.installLogo{

    width:120px;
    height:120px;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    margin-bottom:25px;

}

.installLogo img{

    width:100%;
    height:100%;
    object-fit:cover;

}

#sbpInstallScreen h1{

    margin:0;
    font-size:34px;
    color:#111827;

}

#sbpInstallScreen p{

    max-width:420px;

    margin:18px auto;

    line-height:1.7;

    color:#555;

    font-size:16px;

}







#appPreviewSlider{

width:100%;

margin:30px 0;

overflow:hidden;

}

/* Smaller App Screenshots */

.previewTrack{

display:flex;

gap:12px;

overflow-x:auto;

padding:8px;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

}

.previewTrack::-webkit-scrollbar{

display:none;

}



.previewTrack img{

width:92px;

height:185px;

border-radius:14px;

object-fit:contain;

flex-shrink:0;

cursor:pointer;

transition:.25s;

}

.previewTrack img:active{

transform:scale(.97);

}

.trustBadges{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin:30px 0;

}

.trustBadges span{

background:#fff;

padding:10px 18px;

border-radius:30px;

box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.statsGrid{

display:grid;

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

gap:20px;

margin:50px auto;

max-width:700px;

text-align:center;

}

.statsGrid div{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}


/*best css*/


/* =====================================
FINAL MOBILE + HEADER FIX
ADD AT END OF CSS
===================================== */

/* Main Container */


/* Header */
#installHeader{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:60px;
    z-index:99999;
}

/* Menu */
#sideMenu{
    z-index:99998;
}

#menuOverlay{
    z-index:99997;
}

/* Hero */
.installHero{
    max-width:500px;
    margin:auto;
    padding:20px 15px;
}

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

    .installLogo{
        width:90px;
        height:90px;
        margin-bottom:15px;
    }

    #sbpInstallScreen h1{
        font-size:26px;
    }

    #sbpInstallScreen p{
        font-size:14px;
        line-height:1.6;
    }

    #installNowBtn{
        width:100%;
        max-width:260px;
        height:48px;
        font-size:16px;
    }

    /* Screenshot Slider */

    .previewTrack{
        gap:12px;
    }

    .previewTrack img{
        width:150px;
        border-radius:16px;
    }

    /* Badges */

    .trustBadges{
        gap:8px;
    }

    .trustBadges span{
        font-size:12px;
        padding:8px 12px;
    }

    /* Stats */

    .statsGrid{
        grid-template-columns:1fr;
        gap:12px;
        max-width:320px;
    }

    .statsGrid div{
        padding:18px;
    }

    /* Features */

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

    .featureCard{
        padding:18px;
    }

    .landingSection{
        margin-top:35px;
    }

}



/* Hero Banner */

.landingHeroBanner{

background:#fff;

padding:35px 20px;

margin:35px auto;

border-radius:20px;

text-align:center;

box-shadow:0 6px 20px rgba(0,0,0,.08);

max-width:900px;

}

.heroBadge{

display:inline-block;

background:#111827;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:13px;

margin-bottom:15px;

}

.heroButtons{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

margin-top:25px;

}

.heroInstallBtn,
.heroStoreBtn{

padding:12px 22px;

border-radius:12px;

text-decoration:none;

border:none;

cursor:pointer;

font-size:15px;

}

.heroInstallBtn{

background:#111827;

color:#fff;

}

.heroStoreBtn{

background:#10b981;

color:#fff;

}

.categoryGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(130px,1fr));

gap:15px;

margin-top:20px;

}

.categoryBox{

background:#fff;

padding:25px 10px;

border-radius:16px;

text-align:center;

box-shadow:0 5px 18px rgba(0,0,0,.08);

font-size:34px;

}

.categoryBox p{

margin-top:10px;

font-size:14px;

font-weight:bold;

}

@media(max-width:768px){

.heroButtons{

flex-direction:column;

}

.heroInstallBtn,
.heroStoreBtn{

width:100%;

}

.categoryBox{

padding:18px 8px;

font-size:28px;

}

}



/* ===============================
Reviews
=============================== */

.reviewGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:18px;

margin-top:20px;

}

.reviewCard{

background:#fff;

padding:20px;

border-radius:18px;

box-shadow:0 4px 16px rgba(0,0,0,.08);

}

/* FAQ */

.faqBox details{

background:#fff;

margin:12px 0;

padding:15px;

border-radius:12px;

box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.faqBox summary{

cursor:pointer;

font-weight:bold;

}

/* Floating WhatsApp */

#floatingWhatsapp{

position:fixed;

bottom:95px;

right:18px;

width:58px;

height:58px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

text-decoration:none;

box-shadow:0 5px 18px rgba(0,0,0,.25);

z-index:9999;

}


/* Sticky Install */

/* ===============================
STICKY SHARE BAR
=============================== */

#stickyInstallBar{

position:fixed;

left:0;
right:0;
bottom:0;

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

padding:10px 12px;

background:#111827;

z-index:99999;

}

#stickyInstallBar button{

width:95px;

height:42px;

border:none;

border-radius:10px;

font-size:14px;

font-weight:600;

cursor:pointer;

}

#stickyInstallBar #shareAppBtn{

background:#2563eb;

color:#fff;

}

#stickyInstallBar #copyLinkBtn{

background:#fff;

color:#111827;

}

.stickyInviteCenter{

flex:1;

text-align:center;

line-height:1.2;

}

.stickyInviteTitle{

color:#fff;

font-size:13px;

font-weight:700;

}

#stickyInstallBar #inviteCodeText{

margin-top:2px;

font-size:11px;

font-weight:500;

letter-spacing:1px;

color:#d1d5db;

}
/* ==========================================
PROFESSIONAL SHARE CARD
========================================== */

.inviteArea{

    width:100%;
    max-width:380px;
    margin:22px auto 0;

}

#inviteInfoCard{

    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.08);

}

.inviteTitle{

    font-size:14px;
    color:#666;
    text-align:center;
    margin-bottom:8px;

}

#inviteCodeText{

    text-align:center;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    color:#111827;
    margin-bottom:16px;

}

.inviteButtons{

    display:flex;
    gap:12px;

}

.inviteButtons button{

    flex:1;
    height:46px;
    border:none;
    border-radius:12px;
    background:#f3f4f6;
    color:#111827;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;

}

.inviteButtons button:hover{

    background:#e5e7eb;

}

.inviteButtons button:active{

    transform:scale(.97);

}

#shareAppBtn{

    background:#2563eb;
    color:#fff;

}

#shareAppBtn:hover{

    background:#1d4ed8;

}

#copyLinkBtn{

    background:#ffffff;
    border:1px solid #d1d5db;
    color:#111827;

}

#copyLinkBtn:hover{

    background:#f9fafb;

}

@media(max-width:768px){

    .inviteArea{

        max-width:100%;

    }

    .inviteButtons{

        gap:10px;

    }

    .inviteButtons button{

        height:44px;
        font-size:14px;

    }

}



/* =====================================
INVITE HERO
===================================== */

#inviteHeroBanner{

display:none;

margin:20px auto;

padding:22px;

max-width:700px;

background:linear-gradient(135deg,#ff8a00,#ff5f00);

border-radius:22px;

color:#fff;

text-align:center;

box-shadow:0 10px 30px rgba(255,120,0,.25);

}

.inviteHeroIcon{

font-size:46px;

margin-bottom:10px;

}

#inviteHeroBanner h2{

margin:0;

font-size:28px;

}

#inviteHeroBanner p{

margin-top:12px;

color:#fff;

font-size:16px;

line-height:1.7;

}

@media(max-width:768px){

#inviteHeroBanner{

margin:15px;

padding:18px;

border-radius:18px;

}

#inviteHeroBanner h2{

font-size:22px;

}

#inviteHeroBanner p{

font-size:14px;

}

}