:root{
    --bg: #1E2A38; /* 0xFF1E2A38 */
    --card: rgba(255,255,255,0.04);
    --muted: rgba(255,255,255,0.65);
    --accent: #0a84ff;
    --glass: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    --radius: 12px;
    --container: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: "Inter", Arial, sans-serif;
    background: var(--bg);
    color: #eef3f7;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding:24px;
}

/* layout */
.container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.site-header{
    padding:12px 0;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.logo{width:140px; height:auto; display:block}
.nav{display:flex; gap:14px; align-items:center}
.nav-link{color:var(--muted); text-decoration:none; font-weight:600; font-size:0.95rem}
.btn{border-radius:10px; padding:10px 14px; text-decoration:none; display:inline-block; font-weight:600}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px}
.btn-icon{width:18px; height:18px; margin-right:8px; display:inline-block; vertical-align:middle}

/* hero */
.hero{padding:40px 0 30px}
.hero-grid{display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:center; margin:0 auto; width:fit-content; max-width:100%}
@media (max-width:860px){
    .hero-grid{grid-template-columns:1fr; text-align:center}
    .hero-visual{order:-1}
}

.hero-content{max-width:600px}
.hero-title{
    font-size:2.4rem;
    margin:0 0 8px;
    letter-spacing:-0.5px;
}
.hero-sub{color:var(--muted); margin:0 0 18px}

.cta-row{display:flex; gap:12px; align-items:center; margin-bottom:18px}
@media (max-width:520px){ .cta-row{justify-content:center; flex-direction:column} }

.btn-primary{
    background: linear-gradient(90deg,var(--accent), #3aa0ff);
    color:#fff;
    box-shadow: 0 8px 30px rgba(10,132,255,0.14);
    border:none;
}
.btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
}

/* benefits */
.benefits{list-style:none; padding:0; margin:18px 0 0; display:flex; gap:14px; flex-wrap:wrap}
.benefits li{background:var(--card); padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600; font-size:0.95rem}

/* phone mock */
.hero-visual{display:flex; justify-content:center}
.phone-mock{
    width:320px;
    height:680px;
    border-radius:34px;
    background: var(--glass);
    border:1px solid rgba(255,255,255,0.03);
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}
.phone-media{
    width:100%;
    height:100%;
    border-radius:18px;
    object-fit:cover;
    display:block;
}
.screenshot{width:100%; height:auto; border-radius:18px; object-fit:cover}

/* features cards */
.features{padding:28px 0}
.features h2{margin:0 0 18px; text-align:center; font-size:1.6rem}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

.card{
    background: var(--card);
    border-radius: var(--radius);
    padding:18px;
    min-height:120px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    transition:transform .18s ease, box-shadow .18s ease;
    border:1px solid rgba(255,255,255,0.02);
}
.card:hover{transform:translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.5)}
.card-emoji{font-size:1.6rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,0.02); flex-shrink:0}
.card h3{margin:0 0 6px}
.card p{margin:2px; color:var(--muted); font-size:0.95rem}

/* powered & footer */
.powered{padding:20px 0; text-align:center; color:var(--muted); font-size:0.95rem}
.site-footer{border-top:1px solid rgba(255,255,255,0.02); padding:18px 0; margin-top:28px; text-align:center; color:var(--muted); font-size:0.9rem}

/* small utilities */
a{color:inherit}
p a{color:var(--muted); text-decoration:underline}