/* SLM Framework · Landing styles (mobile-first, marketing-oriented) */
* { box-sizing: border-box; }
:root {
    --slm-bg:        #ffffff;
    --slm-surface:   #f6f7fb;
    --slm-border:    #e6e8ef;
    --slm-text:      #0f1320;
    --slm-muted:     #5c6275;
    --slm-primary:   #517e96;
    --slm-primary-h: #476f84;
    --slm-radius:    14px;
}

html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--slm-text);
    background: var(--slm-bg);
    line-height: 1.6;
}

a { color: var(--slm-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================ TOPBAR */
.slm-topbar {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--slm-border);
    display: flex; align-items: center;
    padding: 1rem 1.5rem; gap: 1rem;
}
.slm-brand { font-weight: 800; font-size: 1.1rem; color: var(--slm-text); }
.slm-topbar nav { display: flex; gap: 1.2rem; flex: 1; }
.slm-topbar nav a { color: var(--slm-muted); font-size: .95rem; }
.slm-topbar nav a:hover { color: var(--slm-text); text-decoration: none; }
.slm-cta {
    background: var(--slm-primary); color: #fff;
    padding: .55rem 1.1rem; border-radius: 999px;
    font-weight: 600; font-size: .9rem;
}
.slm-cta:hover { background: var(--slm-primary-h); text-decoration: none; }

/* ============================================================ HERO */
.slm-hero {
    padding: 5rem 1.5rem 4rem; text-align: center;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slm-primary) 5%, transparent) 0%,
        transparent 100%);
}
.slm-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 1rem; letter-spacing: -.02em; }
.slm-hero p  { font-size: 1.15rem; color: var(--slm-muted); max-width: 600px; margin: 0 auto 2rem; }

/* ============================================================ FEATURES */
.slm-features {
    max-width: 1100px; margin: 0 auto; padding: 4rem 1.5rem;
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.slm-feature {
    background: var(--slm-surface);
    border: 1px solid var(--slm-border);
    border-radius: var(--slm-radius);
    padding: 1.5rem;
}
.slm-feature h3 { margin: 0 0 .5rem; }
.slm-feature p  { margin: 0; color: var(--slm-muted); font-size: .95rem; }

/* ============================================================ FOOTER */
.slm-footer {
    border-top: 1px solid var(--slm-border);
    text-align: center; padding: 2rem 1.5rem;
    color: var(--slm-muted); font-size: .85rem;
}

/* ============================================================ MOBILE */
@media (max-width: 640px) {
    .slm-topbar nav { display: none; }
}