:root{
    --bg: #F7FBFF;
    --card: #FFFFFF;
    --primary: #2563EB; /* azul */
    --primary-600: #1D4ED8;
    --muted: #6B7280;
    --accent: #F59E0B; /* āmbar suave */
    --glass: rgba(255,255,255,0.6);
    --radius: 12px;
    --max-width: 1100px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.site {
    background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
    color: #0F172A;
    padding: 48px 16px;
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: var(--max-width);
}

header.brand {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.logo {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}

.logo svg { width:48px;height:48px; flex:0 0 48px; }
.brand-title { font-weight:700; font-size:1.15rem; letter-spacing: -0.02em; }
.brand-sub { color:var(--muted); font-size:0.85rem; margin-top:2px; }

nav.main-nav a {
    color:var(--muted);
    text-decoration:none;
    margin-left:18px;
    font-weight:600;
}

.hero {
    display:flex;
    gap:28px;
    align-items:center;
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(245,158,11,0.03));
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 6px 18px rgba(11, 15, 30, 0.04);
}

.hero-left { flex:1 1 55%; min-width: 260px; }
.hero-right { flex:1 1 45%; display:flex; justify-content:center; align-items:center; }

.hero h1 { margin:0 0 12px 0; font-size:1.8rem; color:var(--primary-600); }
.hero p.lead { margin:0 0 18px 0; color:var(--muted); line-height:1.5; }

.cta-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn {
    padding:10px 16px;
    border-radius:8px;
    font-weight:600;
    border: none;
    cursor:pointer;
}
.btn-primary {
    background: linear-gradient(180deg,var(--primary),var(--primary-600));
    color:white;
    box-shadow: 0 6px 14px rgba(37,99,235,0.18);
}
.btn-ghost {
    background:transparent;
    color:var(--primary-600);
    border: 1px solid rgba(29,78,216,0.08);
}

.features {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:18px;
    margin-top:22px;
}

.card {
    background:var(--card);
    border-radius:12px;
    padding:16px;
    box-shadow: 0 6px 18px rgba(11,15,30,0.04);
}

.card h3 { margin:0 0 8px 0; font-size:1rem; color:#0f172a; }
.card p { margin:0; color:var(--muted); font-size:0.9rem; }

footer.site-footer {
    margin-top:30px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    color:var(--muted);
    font-size:0.9rem;
}

@media (max-width:900px){
    .hero { flex-direction:column; text-align:center; }
    .hero-right { padding:12px 0; }
    .features { grid-template-columns:1fr; }
    header.brand { flex-direction:column; align-items:flex-start; gap:8px; }
}