/* Basic reset */
:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:#9fb4c8;
    --accent:#3ec6ff;
    --accent-2:#0ea5a6;
    --glass: rgba(255,255,255,0.03);
    --radius:12px;
    --container:1100px;
    --gap:1rem;
    --max-width:1100px;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:linear-gradient(180deg,#071422 0%, #071428 60%),var(--bg);
    color:#E6F2FB;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.4;
    font-size:16px;
}

/* Layout container */
.container{
    max-width:var(--container);
    margin:0 auto;
    padding:1rem;
}

/* Header */
.site-header{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-bottom:1px solid rgba(255,255,255,0.03);
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(6px);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.5rem 0;
}
.logo{
    display:flex;
    gap:.5rem;
    align-items:center;
    text-decoration:none;
    color:inherit;
    font-weight:700;
}
.logo-emoji{font-size:1.6rem}
.logo-text{letter-spacing:.6px}

.site-nav{position:relative}
.nav-toggle{
    display:none;
    background:none;
    border:0;
    color:var(--muted);
    font-size:1.2rem;
}
.nav-list{
    list-style:none;
    display:flex;
    gap:0.75rem;
    margin:0;
    padding:0;
    align-items:center;
}
.nav-list a{color:var(--muted); text-decoration:none; padding:.5rem .75rem; border-radius:8px}
.nav-list a:hover{background:var(--glass); color:var(--accent)}

.btn{
    display:inline-block;
    padding:.55rem .9rem;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}
.btn-primary{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#042027;
    box-shadow:0 6px 20px rgba(14,165,166,0.12);
}
.btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.04);
    color:var(--muted);
}

/* Hero */
.hero{
    display:flex;
    gap:2rem;
    align-items:center;
    padding:2.5rem 0;
}
.hero-content{flex:1}
.hero h1{font-size:2.1rem; margin:0 0 .5rem}
.lead{color:var(--muted); margin:0 0 1rem}
.hero-actions{display:flex; gap:0.75rem}
.hero-visual{width:260px; display:flex; align-items:center; justify-content:center}

/* Features grid */
.features{
    padding:1.5rem 0 2.5rem;
}
.features h2{margin:0 0 1rem}
.features-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:1rem;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
}
.card h3{margin:0 0 .5rem}
.card p{color:var(--muted); margin:0}

/* CTA */
.cta{
    background:linear-gradient(90deg, rgba(62,198,255,0.08), rgba(14,165,166,0.04));
    margin:1.5rem 0;
    padding:1.25rem;
    border-radius:12px;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cta-inner h2{margin:0}

/* Footer */
.site-footer{padding:1rem 0; border-top:1px solid rgba(255,255,255,0.02); color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* Small sections */
.small-section{padding:1rem 0; border-top:1px dashed rgba(255,255,255,0.02); margin-top:1rem}

/* Responsive */
@media (min-width:900px){
    .features-grid{grid-template-columns:repeat(3,1fr)}
    .hero h1{font-size:2.6rem}
}
@media (max-width:899px){
    .hero{flex-direction:column; text-align:center}
    .hero-visual{width:160px}
    .nav-toggle{display:inline-block}
    .nav-list{
        position:absolute;
        right:8px;
        top:56px;
        background:var(--card);
        padding:.5rem;
        border-radius:10px;
        box-shadow:0 10px 30px rgba(2,6,23,0.6);
        width:200px;
        display:none;
        flex-direction:column;
    }
    .nav-list.show{display:flex}
    .nav-list a{padding:.5rem 1rem}
}