/* ===================================
   HERO SECTION
=================================== */

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    gap:80px;

    max-width:1400px;

    margin:auto;

    padding-top:140px;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 18px;

    border-radius:999px;

    background:
        rgba(0,208,132,.08);

    border:
        1px solid
        rgba(0,208,132,.2);

    color:var(--primary);

    margin-bottom:25px;

}

.hero h1{

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height:1.05;

    font-weight:800;

}

.hero p{

    margin-top:30px;

    max-width:650px;

    color:var(--text-secondary);

    font-size:1.1rem;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:40px;

}

.hero-image{

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            rgba(0,132,255,.25),
            transparent
        );

    filter:blur(100px);

    z-index:-1;

}

/* ===================================
   STATS
=================================== */

.stats{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:25px;

}

.stats .stat-card{

    min-height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ===================================
   FEATURES SECTION
=================================== */

.features-section{

    position:relative;

}

.feature-grid{

    display:grid;

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

    gap:25px;

    max-width:1400px;

    margin:auto;

}

.feature-grid .feature-card{

    min-height:260px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ===================================
   USE CASE
=================================== */

.usecase-section{

    position:relative;

}

.usecase-grid{

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:auto;

}

/* ===================================
   GALLERY
=================================== */

.gallery-section{

    position:relative;

}

.screenshotSwiper{

    max-width:1200px;

    margin:auto;

    overflow:hidden;

    padding-bottom:60px;

}

.swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

}

.swiper-slide img{

    width:100%;

    max-width:350px;

    border-radius:35px;

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

    box-shadow:
        0 30px 60px rgba(0,0,0,.4);

}

.swiper-pagination-bullet{

    background:white !important;

}

.swiper-pagination-bullet-active{

    background:
        var(--primary)
        !important;

}

/* ===================================
   DOWNLOAD CTA
=================================== */

.download-section{

    position:relative;

}

.download-card{

    position:relative;

    overflow:hidden;

}

.download-card h2{

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    margin-bottom:25px;

}

.download-card p{

    font-size:1.1rem;

    line-height:1.8;

}

/* ===================================
   FAQ
=================================== */

.faq-section{

    max-width:1100px;

    margin:auto;

}

.faq-container{

    margin-top:50px;

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-question::after{

    content:"+";

    font-size:1.5rem;

    color:var(--primary);

}

.faq-item.active
.faq-question::after{

    content:"−";

}

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

.footer{

    position:relative;

}

.footer-contact{

    margin-top:25px;

}

.footer-contact a{

    transition:
        var(--transition);

}

.footer-contact a:hover{

    color:white;

}

/* ===================================
   DECORATION
=================================== */

.features-section::before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    top:0;
    left:-200px;

    background:
        radial-gradient(
            rgba(0,208,132,.12),
            transparent
        );

    filter:blur(100px);

}

.gallery-section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-250px;
    top:50%;

    background:
        radial-gradient(
            rgba(0,132,255,.12),
            transparent
        );

    filter:blur(120px);

}

/* ===================================
   GLASS OVERLAY GRID
=================================== */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    pointer-events:none;

    z-index:-1;

}