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

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#f8fafc;
    color:#1f2937;
}

#hero{

    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:40px;

}

h1{

    font-size:40px;

    font-weight:700;

    line-height:1.25;

    max-width:760px;

    margin-bottom:22px;

}

p{

    font-size:18px;

    color:#6b7280;

    max-width:660px;

    line-height:1.65;

    margin-bottom:42px;

}

nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:22px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:white;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

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

    text-decoration:none;
    color:inherit;

}

.logo img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.logo span{
    font-size: 30px;
    font-weight: 700;
    color: #1e293b;
}

nav ul{

    display:flex;

    list-style:none;

    gap:30px;

    align-items:center;

}

nav a{

    text-decoration:none;

    color:#374151;

    font-weight:500;

}

#languageButton{

    border:none;

    background:#22c55e;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

}

.tagline{

    font-size:22px;

    font-weight:500;

    color:#4b5563;

    margin-bottom:18px;

}

.store-buttons{

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

    margin-top:35px;

}

.store-buttons a{

    display:inline-flex;

}

.store-buttons img:first-child{
    height:44px;
}

.store-buttons img:last-child{
    height:42px;
}

#mission{

    padding:120px 40px;

    background:white;

}

#mission h2{

    text-align:center;

    font-size:38px;

    margin-bottom:70px;

    color:#1f2937;

}

.cards{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:35px;

}

.card{

    background:#f8fafc;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.25s;

    box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.card:hover{

    transform:translateY(-6px);

}

.icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

}

.icon img{

    width:80px;

    height:80px;

    object-fit:contain;

}

.card h3{

    font-size:24px;

    margin-bottom:18px;

    color:#1f2937;

}

.card p{

    font-size:17px;

    line-height:1.7;

    color:#6b7280;

}

/* WHY SECTION */

#why{

    padding:120px 60px;

    background:white;

}

#why h2{

    text-align:center;

    font-size:38px;

    font-weight:700;

    margin-bottom:70px;

    color:#1f2937;

}

.why-grid{

    display:grid;

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

    gap:30px;

    max-width:1100px;

    margin:auto;

}

.why-card{

    background:#f8fafc;

    border-radius:24px;

    padding:44px;

    transition:.25s;

}

.why-card:hover{

    transform:translateY(-6px);

}

.why-card h3{

    font-size:22px;

    font-weight:600;

    margin-bottom:16px;

    color:#1f2937;

}

.why-card p{

    font-size:18px;

    line-height:1.7;

    color:#6b7280;

    margin:0;

    max-width:none;

}

.why-icon{

    display:flex;

    justify-content:flex-start;

    margin-bottom:24px;

}

.why-icon img{

    width:74px;

    height:74px;

    object-fit:contain;

}

/* PRIVACY */

#privacy{

    padding:120px 60px;

    background:#ffffff;

}

#privacy h2{

    text-align:center;

    font-size:38px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:20px;

}

.privacy-subtitle{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

    font-size:20px;

    color:#6b7280;

}

.privacy-grid{

    display:grid;

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

    gap:30px;

    max-width:1100px;

    margin:auto;

}

.privacy-card{

    background:#f8fafc;

    border-radius:24px;

    padding:40px;

    transition:.25s;

}

.privacy-card:hover{

    transform:translateY(-6px);

}

.privacy-card h3{

    font-size:24px;

    font-weight:600;

    margin-bottom:18px;

    color:#1f2937;

}

.privacy-card p{

    font-size:18px;

    color:#6b7280;

    line-height:1.7;

    margin:0;

}

/* FAQ */

#faq{

    padding:120px 60px;

    background:#f8fafc;

}

#faq h2{

    text-align:center;

    font-size:38px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:70px;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:white;

    border-radius:20px;

    padding:30px;

    margin-bottom:20px;

    box-shadow:0 4px 14px rgba(0,0,0,.04);

}

.faq-item h3{

    font-size:22px;

    font-weight:600;

    margin-bottom:12px;

    color:#1f2937;

}

.faq-item p{

    font-size:17px;

    color:#6b7280;

    line-height:1.7;

    margin:0;

}

/* CONTACT */

#contact{

    padding:120px 40px;

    background:white;

    text-align:center;

}

#contact h2{

    font-size:38px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:24px;

}

.contact-text{

    max-width:700px;

    margin:0 auto 45px;

    font-size:18px;

    line-height:1.7;

    color:#6b7280;

}

.contact-button{

    display:inline-block;

    background:#22c55e;

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

    transition:.25s;

}

.contact-button:hover{

    background:#16a34a;

    transform:translateY(-2px);

}

/* FOOTER */

footer{

    background:#ffffff;

    padding:70px 40px;

    border-top:1px solid #e5e7eb;

}

.footer-content{

    max-width:1100px;

    margin:auto;

    text-align:center;

}

.footer-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    text-decoration:none;

    color:inherit;

}

.footer-logo img{

    width:32px;

    height:32px;

}

.footer-logo span{

    font-size:28px;

    font-weight:700;

    color:#1f2937;

}

.footer-tagline{

    font-size:18px;

    color:#6b7280;

    text-align:center;

    max-width:none;

    width:100%;

    margin:0 auto 35px;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.footer-links a{

    text-decoration:none;

    color:#4b5563;

    font-weight:500;

    transition:.2s;

}

.footer-links a:hover{

    color:#22c55e;

}

.footer-copy{

    font-size:15px;

    color:#9ca3af;

    text-align:center;

    max-width:none;

    width:100%;

    margin:0;

}

/* ==========================
   LEGAL PAGES
========================== */

.legal-page{
    padding:110px 24px 80px;
}

.legal-container{

    max-width:900px;

    margin:auto;

}

.legal-header{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    margin-bottom:50px;

}

.legal-header img{
    width:90px;
    height:90px;
    margin-bottom:10px;
}

.legal-header h1{

    font-size:48px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:18px;

}

.legal-date{

    font-size:18px;

    color:#6b7280;

}

.legal-content{

    font-size:18px;

    line-height:1.9;

    color:#4b5563;

}

/* LEGAL CONTENT */

.legal-content h2{

    font-size:32px;

    font-weight:700;

    color:#1f2937;

    margin-top:60px;

    margin-bottom:22px;

}

.legal-content p{

    font-size:18px;

    line-height:1.9;

    color:#4b5563;

    margin-bottom:24px;

    max-width:none;

}

.legal-content ul{

    margin:25px 0 35px 28px;

}

.legal-content li{

    margin-bottom:14px;

    line-height:1.8;

    color:#4b5563;

}

.legal-content strong{

    color:#1f2937;

}

.legal-content hr{

    border:none;

    border-top:1px solid #e5e7eb;

    margin:60px 0;

}

/* PRIVACY ICONS */

.privacy-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}

.privacy-icon img{

    width:54px;

    height:54px;

    object-fit:contain;

}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 768px) {

    nav {
        position: fixed;
        padding: 16px 20px;
        justify-content: center;
        gap: 18px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .logo img {
        width: 34px;
        height: 34px;
    }

    .logo span {
        font-size: 28px;
    }

    nav ul {
        gap: 22px;
        flex-shrink: 0;
    }

    #hero,
    #mission,
    #why,
    #privacy,
    #faq,
    #contact {
        padding-left: 22px;
        padding-right: 22px;
        overflow-x: hidden;
    }

    #hero {
        min-height: auto;
        padding-top: 150px;
        padding-bottom: 90px;
    }

    h1 {
        font-size: 42px;
        line-height: 1.15;
    }

    #mission h2,
    #why h2,
    #privacy h2,
    #faq h2,
    #contact h2 {
        font-size: 40px;
        line-height: 1.15;
    }

    p,
    .tagline,
    .contact-text,
    .privacy-subtitle {
        font-size: 20px;
    }

    .cards,
    .why-grid,
    .privacy-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

    .card,
    .why-card,
    .privacy-card,
    .faq-item {
        width: 100%;
        max-width: 100%;
        padding: 34px 26px;
    }

    .store-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .store-buttons img:first-child,
    .store-buttons img:last-child {
        height: 44px;
    }
}