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

body{
    background:#0b0b0b;
    color:white;
}

/* NAVBAR */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    background:#111;
    position:sticky;
    top:0;
    z-index:1000;
}

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

.logo img{
    width:40px;
    height:40px;
    border: 2px solid #ffcc00;
    border-radius:10px;
}
.logo a{
    text-decoration: none;
}
/* Links */
.nav-links{
    display:flex;
    gap:20px;
}

.nav-links a{
    color:white;
    text-decoration:none;
}

/* Hamburger */
.hamburger{
    display:none;
    font-size:28px;
    cursor:pointer;
}

/* HERO */
.hero{
    text-align:center;
    padding:20px 20px;
    background:linear-gradient(135deg,#1a1a1a,#000);
}

.hero img{
    width:140px;
    border: 5px solid #ffcc00;
    border-radius:35px;
}

.hero h1{
    font-size:38px;
    margin-bottom:20px;
}

.hero p{
    margin-bottom:40px;
    color:#ccc;
}

.btn{
    position: fixed;
    left: 15%;
    width: 70%;
    padding:15px 0px;
    background:#ffcc00;
    color:black;
    text-decoration: none;
    border-radius:100px;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    border:none;
    overflow:hidden;
    z-index:1;
}
.btn:hover{
    scale: 1.05;
    transition: scale 0.3s ease;
}
/* Animated border layer */
.btn::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:100px;
    background:linear-gradient(90deg,#ff9100,#ffcc00,#ff9100,#ffcc00);
    background-size:300% 300%;
    animation:moveBorder 3s linear infinite;
    z-index:-1;
}

/* Inner background to keep button clean */
.btn::after{
    content:"";
    position:absolute;
    inset:5px;
    background:#ffcc00;
    border-radius:100px;
    z-index:-1;
}

/* Animation */
@keyframes moveBorder{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}
/* FEATURES */
.features{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:20px 20px;
    flex-wrap:wrap;
}

.card{
    background:#1a1a1a;
    padding:20px;
    border-radius:10px;
    width:250px;
    text-align:center;
}

/* TABLE */
.app-details{
    padding:20px 20px;
    max-width:900px;
    margin:auto;
    font-family: Arial, sans-serif;
}

.section-title{
    text-align:center;
    margin-bottom:30px;
    font-size:28px;
    color:#ffffff;
}

.details-table{
    width:100%;
    border-collapse:collapse;
    background:linear-gradient(135deg,#071220,#081222);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:10px;
    overflow:hidden;
}

.details-table th,
.details-table td{
    padding:18px 20px;
    border-bottom:1px solid rgba(255,255,255,0.2);
    text-align:left;
}

.details-table th{
    width:35%;
    font-weight:600;
    color:#ffffff;
    border-right:1px solid rgba(255,255,255,0.2);
}

.details-table td{
    color:#e0e0e0;
}

/* Hover effect */
.details-table tr:hover{
    background:rgba(255,255,255,0.05);
}

/* Responsive */
@media (max-width:600px){
    .details-table th,
    .details-table td{
        padding:14px;
        font-size:14px;
    }
}

/* SCREENSHOTS */
.screenshots{
    padding:20px 20px;
    text-align:center;
}

.screenshots img{
    width:300px;
    margin:10px;
    border-radius:10px;
}
/* ARTICLE */
.article{
    padding: 20px;
}
h1,h2,h3{
    margin-top:30px;
    margin-bottom:15px;
}
h2{
    color: #ffcc00;
}
a{
    color: white;
}
p{
    margin-bottom:15px;
    color:#ddd;
}

ul{
    margin-left:20px;
    margin-bottom:15px;
}

li{
    margin-bottom:8px;
}

.section{
    margin-bottom:40px;
}
/* FAQ */
.faq{
    padding:10px 20px;
}

.faq h3{
    margin-bottom:10px;
}

.faq p{
    margin-bottom:20px;
    color:#ccc;
}

/* FOOTER */
.footer{
    text-align:center;
    padding:10px;
    background:#111;
    font-size:14px;
}

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

    .hamburger{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:60px;
        left:0;
        width:100%;
        background:#111;
        flex-direction:column;
        align-items:center;
        display:none;
        padding:20px 0;
    }

    .nav-links a{
        margin:10px 0;
    }

    .nav-links.active{
        display:flex;
    }
}