:root{
    --bg:#0a0d12;
    --surface:#0f1318;
    --text:#f0ede8;
    --dim:#7a7568;
    --accent:#e07a5f;
    --border:rgba(240,237,232,0.05);
}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:48px;padding:0 24px;background:var(--bg)}
.nav-inner{max-width:1080px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-wordmark{font-size:0.8rem;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:0.015em}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-right a{font-size:0.75rem;color:var(--dim);text-decoration:none;transition:color 0.15s}
.nav-right a:hover{color:var(--text)}

/* HERO */
.hero{padding:120px 24px 64px;max-width:1080px;margin:0 auto}
.hero h1{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:600;line-height:1.18;letter-spacing:-0.025em;margin-bottom:16px;color:var(--text)}
.hero p{font-size:clamp(0.85rem,1.3vw,0.92rem);color:var(--dim);max-width:420px;line-height:1.65}

/* PRODUCTS */
.products{max-width:1080px;margin:0 auto;padding:0 24px 80px}
.row-1{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px;margin-bottom:12px}
.row-2{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px}

@media(max-width:700px){
    .row-1,.row-2{grid-template-columns:1fr}
}

.card{
    display:flex;flex-direction:column;
    background:var(--surface);border-radius:10px;
    overflow:hidden;text-decoration:none;transition:background 0.15s;
}
.card:hover{background:#12171e}

.card__body{padding:24px 24px 14px}
.card__dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-bottom:10px}
.card__name{font-size:0.85rem;font-weight:600;color:var(--text);margin-bottom:3px}
.card__desc{font-size:0.75rem;color:var(--dim);line-height:1.4}

.card__img{
    margin-top:auto;
    display:flex;align-items:flex-end;justify-content:center;
    position:relative;overflow:hidden;
}

.ph-phone{
    width:90px;height:150px;
    border-radius:10px 10px 0 0;
    border:1px solid rgba(240,237,232,0.06);border-bottom:none;
    background:rgba(240,237,232,0.012);
    margin-top:16px;
    display:flex;align-items:center;justify-content:center;
}
.ph-dashboard{
    width:92%;height:140px;
    border-radius:6px 6px 0 0;
    border:1px solid rgba(240,237,232,0.06);border-bottom:none;
    background:rgba(240,237,232,0.012);
    margin-top:16px;
    display:flex;align-items:center;justify-content:center;
}
.ph-desktop{
    width:92%;height:130px;
    border-radius:6px 6px 0 0;
    border:1px solid rgba(240,237,232,0.06);border-bottom:none;
    background:rgba(240,237,232,0.012);
    margin-top:16px;
    display:flex;align-items:center;justify-content:center;
}
.ph-tag{
    width:65px;height:65px;
    border-radius:10px;
    border:1px solid rgba(240,237,232,0.06);
    background:rgba(240,237,232,0.012);
    margin:20px 0;
    display:flex;align-items:center;justify-content:center;
}
.ph-card{
    width:120px;height:78px;
    border-radius:8px;
    border:1px solid rgba(240,237,232,0.06);
    background:rgba(240,237,232,0.012);
    margin:20px 0;
    display:flex;align-items:center;justify-content:center;
}
.ph-label{font-size:0.5rem;color:rgba(240,237,232,0.1);text-transform:uppercase;letter-spacing:0.12em}

/* NARRATIVE */
.narrative{max-width:520px;margin:0 auto;padding:20px 24px 100px}
.narrative p{font-size:0.9rem;color:#a09b90;line-height:1.85;margin-bottom:20px}
.narrative p:last-child{margin-bottom:0}
.narrative a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(224,122,95,0.2);transition:border-color 0.15s}
.narrative a:hover{border-color:var(--accent)}

/* FOOTER */
.site-footer{padding:36px 24px 28px;border-top:1px solid var(--border)}
.footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:18px}
.footer-links a{font-size:0.7rem;color:var(--dim);text-decoration:none;transition:color 0.15s}
.footer-links a:hover{color:var(--text)}
.footer-right{font-size:0.65rem;color:#3d3a35}
.footer-right a{color:#3d3a35;text-decoration:none}
.footer-right a:hover{color:var(--accent)}
@media(max-width:600px){
    .footer-inner{flex-direction:column;gap:12px;text-align:center}
    .footer-links{flex-wrap:wrap;justify-content:center}
}