*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:#ffffff;
color:#102416;

}

a{
text-decoration:none;
}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

header{

position:fixed;
top:0;
left:0;
width:100%;
padding:18px 0;
background:rgba(255, 255, 255, 0.92);
backdrop-filter:blur(18px);
z-index:999;

border-bottom:1px solid rgba(255,193,7,.15);

}

nav{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

font-size:28px;
font-weight:800;
color:#102416;

}

.logo span{

color:#fff;

}

nav ul{

display:flex;
gap:35px;
list-style:none;

}

nav ul a{

color:#000000;
font-weight:500;
transition:.3s;

}

nav ul a:hover{

color:#102416;

}

.download-btn{

padding:12px 22px;
border-radius:40px;
background:#102416;
color:#ffffff;
font-weight:700;

}

.hero{

min-height:100vh;

display:flex;
align-items:center;

background:
linear-gradient(rgba(233, 255, 239, 0.75),rgba(0,0,0,.8)),
url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80');

background-size:cover;
background-position:center;

}

.hero-content{

max-width:760px;

}

.tag{

display:inline-block;

padding:8px 18px;

background:#102416;
color:#ffffff;

font-size:13px;
font-weight:700;

border-radius:40px;

margin-bottom:25px;

}

.hero h1{

font-size:62px;
line-height:1.1;
margin-bottom:25px;

}

.hero p{

font-size:20px;
line-height:1.8;
color:#cfcfcf;

margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.btn{

padding:16px 28px;

border-radius:12px;

font-weight:700;

display:inline-flex;
align-items:center;
gap:12px;

transition:.3s;

}

.primary{

background:#102416;
color:#ffffff;

}

.secondary{

border:1px solid #e6e6e6;
color:#fff;

}

.btn:hover{

transform:translateY(-5px);

}

.quick{

padding:90px 0;

}

.title{

font-size:42px;
margin-bottom:15px;

}

.subtitle{

color:#22402b;
margin-bottom:50px;

}

.grid{

display:grid;

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

gap:30px;

}

.card{

background:#deffe7;

padding:35px;

border-radius:20px;

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

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

border-color:#102416;

}

.card i{

font-size:42px;
color:#102416;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

}

.card p{

color:#2b2b2b;
line-height:1.8;

}

.store{

padding:100px 0;

background:#edfff2;

}

.store-box{

display:flex;
flex-wrap:wrap;
gap:30px;

}

.store-btn{

flex:1;

padding:28px;

background:#181818;

border-radius:18px;

display:flex;
align-items:center;
gap:20px;

color:#fff;

border:1px solid rgba(255,193,7,.1);

transition:.3s;

}

.store-btn:hover{

transform:translateY(-8px);

border-color:#ffffff;

}

.store-btn i{

font-size:55px;
color:#ffffff;

}

footer{

padding:35px 0;

text-align:center;

color:#ffffff;

border-top:1px solid rgba(213, 213, 213, 0.05);

}

@media(max-width:768px){

.hero h1{

font-size:40px;

}

nav ul{

display:none;

}

.hero-buttons{

flex-direction:column;

}

}





.getting-started{

padding:100px 0;

background:#ffffff;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

padding:8px 18px;

background:#102416;

color:#ffffff;

font-size:13px;

font-weight:700;

border-radius:30px;

margin-bottom:18px;

}

.section-heading h2{

font-size:46px;

margin-bottom:20px;

}

.section-heading p{

max-width:720px;

margin:auto;

color:#bbb;

line-height:1.8;

}

.timeline{

display:flex;

flex-direction:column;

gap:40px;

}

.timeline-item{

display:flex;

gap:25px;

align-items:flex-start;

}

.timeline-number{

width:70px;

height:70px;

background:#102416;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

color:#ffffff;

flex-shrink:0;

}

.timeline-content{

background:#102416;

padding:35px;

border-radius:18px;

border:1px solid rgba(255,193,7,.1);

width:100%;

transition:.3s;

}

.timeline-content:hover{

transform:translateY(-6px);

border-color:#ffffff;

}

.timeline-content i{

font-size:36px;

color:#ffffff;

margin-bottom:15px;

display:inline-block;

}

.timeline-content h3{

font-size:28px;

margin-bottom:15px;

}

.timeline-content p{

color:#cfcfcf;

line-height:1.8;

margin-bottom:20px;

}

.timeline-content ul{

padding-left:20px;

margin-bottom:20px;

}

.timeline-content li{

margin-bottom:10px;

color:#ddd;

}

.tip{

background:#111;

border-left:4px solid #ffffff;

padding:18px;

border-radius:10px;

display:flex;

gap:15px;

align-items:flex-start;

color:#ddd;

}

.tip i{

font-size:22px;

margin:0;

}

@media(max-width:768px){

.timeline-item{

flex-direction:column;

}

.timeline-number{

width:60px;

height:60px;

font-size:24px;

}

.section-heading h2{

font-size:34px;

}

}





.dashboard-section{

padding:120px 0;

background:#e6ffed;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#102416;

color:#ffffff;

font-weight:700;

border-radius:30px;

margin-bottom:18px;

}

.section-title h2{

font-size:46px;

margin-bottom:20px;

}

.section-title p{

max-width:760px;

margin:auto;

line-height:1.9;

color:#8d8d8d;

}

.dashboard-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:60px;

align-items:center;

margin-top:60px;

}

.dashboard-image img{

width:100%;

border-radius:30px;

box-shadow:0 30px 70px rgba(255,193,7,.15);

}

.dashboard-content{

display:flex;

flex-direction:column;

gap:22px;

}

.feature-card{

display:flex;

gap:20px;

padding:25px;

background:#102416;

border-radius:18px;

border:1px solid rgba(255,193,7,.12);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-6px);

border-color:#ffffff;

}

.icon{

width:65px;

height:65px;

border-radius:15px;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

color:#000;

font-size:28px;

flex-shrink:0;

}

.feature-card h3{

margin-bottom:8px;

font-size:22px;

}

.feature-card p{

color:#bdbdbd;

line-height:1.8;

}

.steps-area{

margin-top:100px;

}

.steps-area h2{

text-align:center;

font-size:40px;

margin-bottom:50px;

}

.steps-grid{

display:grid;

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

gap:25px;

}

.step-box{

background:#102416;

padding:35px;

border-radius:18px;

border:1px solid rgba(255,193,7,.12);

transition:.3s;

}

.step-box:hover{

transform:translateY(-8px);

border-color:#ffffff;

}

.step-box span{

display:inline-flex;

width:55px;

height:55px;

border-radius:50%;

background:#ffffff;

color:#000;

font-weight:700;

align-items:center;

justify-content:center;

margin-bottom:20px;

font-size:22px;

}

.step-box h4{

margin-bottom:12px;

font-size:22px;

}

.step-box p{

line-height:1.8;

color:#bdbdbd;

}

@media(max-width:991px){

.dashboard-grid{

grid-template-columns:1fr;

}

.dashboard-image{

max-width:380px;

margin:auto;

}

.section-title h2{

font-size:36px;

}

}




.business-section{

padding:120px 0;

background:#ffffff;

}

.business-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.business-card{

background:#102416;

padding:35px;

border-radius:20px;

border:1px solid rgba(255,193,7,.12);

transition:.35s;

}

.business-card:hover{

transform:translateY(-8px);

border-color:#ffffff;

}

.card-icon{

width:70px;

height:70px;

background:#ffffff;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.card-icon i{

font-size:32px;

color:#102416;

}

.business-card h3{

margin-bottom:15px;

font-size:24px;

}

.business-card p{

line-height:1.8;

color:#cfcfcf;

margin-bottom:20px;

}

.business-card ul{

padding-left:20px;

}

.business-card li{

margin-bottom:10px;

color:#ddd;

}

.important-box{

margin-top:70px;

display:flex;

gap:20px;

align-items:flex-start;

padding:30px;

background: #151515;;

border-left:5px solid #8e8e8e;

border-radius:18px;

}

.important-box i{

font-size:40px;

color:#ffffff;

}

.important-box h3{

margin-bottom:10px;

}

.important-box p{

line-height:1.9;

color:#ccc;

}

@media(max-width:768px){

.important-box{

flex-direction:column;

}

}





.support-section{

padding:120px 0;

background:#edfff3;

}

.share-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.share-card{

background:#102416;

padding:35px;

border-radius:18px;

border:1px solid rgba(255,193,7,.12);

transition:.35s;

}

.share-card:hover{

border-color:#ffffff;

transform:translateY(-6px);

}

.share-icon{

width:70px;

height:70px;

background:#ffffff;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.share-icon i{

font-size:32px;

color:#102416;

}

.share-card h3{

margin-bottom:15px;

}

.share-card p{

line-height:1.8;

color:#cfcfcf;

}

.faq-section{

margin-top:100px;

}

.faq-section h2{

text-align:center;

margin-bottom:40px;

}

.faq-item{

background:#171717;

padding:25px;

border-radius:15px;

margin-bottom:20px;

border-left:4px solid #ffffff;

}

.faq-item h3{

margin-bottom:10px;

}

.faq-item p{

color:#bbb;

line-height:1.8;

}

.trouble-box{

margin-top:70px;

background:#181818;

padding:35px;

border-radius:18px;

}

.trouble-box ul{

padding-left:20px;

margin-top:20px;

}

.trouble-box li{

margin-bottom:15px;

color:#ddd;

}

.contact-support{

margin-top:80px;

text-align:center;

}

.support-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:30px;

}

.support-buttons a{

padding:15px 25px;

background:#102416;

color:#ffffff;

font-weight:700;

border-radius:12px;

text-decoration:none;

transition:.3s;

}

.support-buttons a:hover{

transform:translateY(-5px);

}

.manual-footer{

background:#111;

padding:70px 0;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-social{

margin-top:30px;

display:flex;

justify-content:center;

gap:20px;

}

.footer-social a{

width:55px;

height:55px;

background:#ffffff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#102416;

font-size:24px;

text-decoration:none;

}


.logo{
display:flex;
align-items:center;
}

.logo img{
height:48px;
width:auto;
display:block;
transition:.3s;
}

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



@media(max-width:768px){

.logo img{
height:38px;
}

}

.download-title{
    color:#ffffff; /* Yellow */
}



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

@media (max-width:768px){

    /* Section Titles */
    .title,
    .section-title h2,
    .section-heading h2,
    .steps-area h2,
    .faq-section h2,
    .contact-support h2,
    .trouble-box h2{
        font-size:30px;
        line-height:1.3;
    }

    /* FAQ */
    .faq-item{
        padding:20px;
    }

    .faq-item h3{
        font-size:22px;
        line-height:1.5;
        margin-bottom:12px;
    }

    .faq-item p{
        font-size:17px;
        line-height:1.8;
    }

    /* Cards */
    .share-card h3,
    .business-card h3,
    .feature-card h3,
    .timeline-content h3,
    .card h3{
        font-size:22px;
    }

    .share-card p,
    .business-card p,
    .feature-card p,
    .timeline-content p,
    .card p{
        font-size:16px;
        line-height:1.8;
    }

    .timeline-content li,
    .business-card li,
    .trouble-box li{
        font-size:16px;
        line-height:1.8;
    }

    /* Buttons */
    .support-buttons a,
    .store-btn{
        font-size:17px;
    }

}


/* =========================
   VIDEO SECTION
========================= */

.video-section{
    padding:80px 0;
    background:#fff;
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    margin-top:30px;
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}


/* ==========================
   VIDEO SECTION
========================== */

.video-section{
    padding:70px 0;
    background:#fff;
}

.video-section .title{
    text-align:center;
    font-size:48px;
    font-weight:700;
    margin-bottom:15px;
}

.video-section .subtitle{
    text-align:center;
    font-size:18px;
    color:#666;
    margin-bottom:35px;
}

.video-wrapper{
    width:100%;
    max-width:1000px;
    margin:auto;
    position:relative;
    padding-bottom:56.25%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.video-wrapper iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}


/* ==========================
   Tablet
========================== */

@media (max-width:991px){

.video-section{
    padding:60px 20px;
}

.video-section .title{
    font-size:38px;
}

.video-section .subtitle{
    font-size:17px;
}

.video-wrapper{
    border-radius:16px;
}

}


/* ==========================
   Mobile
========================== */

@media (max-width:768px){

.video-section{
    padding:50px 15px;
}

.video-section .title{
    font-size:30px;
    line-height:1.3;
}

.video-section .subtitle{
    font-size:15px;
    line-height:1.7;
    margin-bottom:25px;
}

.video-wrapper{
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

}




.ig-side-popup{

position:fixed;

right:20px;
bottom:20px;

width:340px;
max-height:85vh;

overflow:auto;

display:none;

z-index:999999;

animation:popup .5s ease;

}

.ig-close{

position:absolute;

top:8px;
right:8px;

width:34px;
height:34px;

border:none;

border-radius:50%;

background:#fff;

font-size:22px;

cursor:pointer;

z-index:9999;

box-shadow:0 5px 15px rgba(0,0,0,.2);

}

@keyframes popup{

from{

opacity:0;

transform:translateX(80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* Tablet */

@media(max-width:991px){

.ig-side-popup{

width:320px;

right:15px;
bottom:15px;

}

}

/* Mobile */

@media(max-width:768px){

.ig-side-popup{

width:92%;

left:50%;

right:auto;

bottom:10px;

transform:translateX(-50%);

max-height:70vh;

}

}

.step-images{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:25px 0;
}

.step-images img{
    width:100%;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

@media (max-width:768px){
    .step-images{
        grid-template-columns:1fr;
    }

    .step-images img{
        max-width:250px;
        margin:auto;
    }
}





.app-slider{
    display:flex;
    gap:15px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:15px 0;
    margin:25px 0;
}

.app-slider::-webkit-scrollbar{
    display:none;
}

.app-slider{
    scrollbar-width:none;
}

.app-slider img{
    flex:0 0 220px;
    width:220px;
    border-radius:20px;
    scroll-snap-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.3s;
}

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

@media(max-width:768px){

    .app-slider img{
        flex:0 0 180px;
        width:180px;
    }

}







/* ========================= */
/* RESPONSIVE INTRO VIDEO */
/* ========================= */

.intro-video-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}

.intro-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

.intro-video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* ========================= */
/* SOUND BUTTON */
/* ========================= */

.sound-btn {
    position: absolute;

    right: 30px;
    bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 13px 20px;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50px;

    background: rgba(0,0,0,0.65);

    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
    
    z-index: 10;
}

.sound-btn:hover {
    background: rgba(0,0,0,0.85);
    transform: translateY(-2px);
}

.sound-btn i {
    font-size: 17px;
}

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

@media (max-width: 1024px) {

    .intro-video-wrapper {
        aspect-ratio: 16 / 8;
    }

    .sound-btn {
        right: 22px;
        bottom: 22px;
    }

}

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

@media (max-width: 768px) {

    .intro-video-wrapper {
        aspect-ratio: 16 / 10;
    }

    .intro-video-wrapper video {
        object-fit: contain;
        object-position: center center;
    }

    .sound-btn {
        right: 15px;
        bottom: 15px;

        padding: 10px 14px;

        font-size: 12px;

        gap: 7px;
    }

    .sound-btn i {
        font-size: 15px;
    }
}

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

@media (max-width: 480px) {

    .intro-video-wrapper {
        aspect-ratio: 4 / 3;
    }

    .sound-btn {
        right: 12px;
        bottom: 12px;

        padding: 9px 12px;
    }

    .sound-btn span {
        font-size: 11px;
    }

}