/* ===== Landing page styles (stand-alone) ===== */
:root{
    --bg: #f5f7fb;
    --panel: #ffffff;
    --line: #e9edf4;
    --muted: #6b7280;
    --text: #0f172a;
    --brand: #6f6df4;
    --brand-2: #8f8df7;
    --shadow: 0 6px 20px rgba(16,24,40,.06);
    --radius: 12px;
    --radius-lg: 16px;

    /* background image used across the project */
    --site-bg: url("martin-moore-Iv4UZyudMaM-unsplash.jpg");
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
    margin: 0;
    color: var(--text);
    font: 14px/1.35 system-ui, -apple-system, "Inter", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
}

/* soft wallpaper like the other pages */
body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
            linear-gradient(0deg, rgba(255,255,255,.70), rgba(255,255,255,.70)),
            var(--site-bg) center/cover no-repeat;
}

/* layout */
.container{
    width: min(1100px, 92vw);
    margin: 0 auto 28px;
}

/* header */
.landing .site-header{ text-align:center; padding:26px 12px 16px }
.landing .site-title{ margin:0 0 4px; font-weight:800; letter-spacing:.2px }
.landing .site-sub{ margin:0; color:var(--muted) }

/* hero card */
.hero-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-top: 10px;
    display: grid;
    gap: 18px;
    grid-template-columns: 1.1fr 1fr;
}
.hero-left h2{ margin:4px 0 8px; font-weight:800 }
.lead{ color:#111; line-height:1.55 }
.muted{ color: var(--muted) }

/* CTA + buttons */
.cta-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
.btn{
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    border-radius:10px;
    padding:10px 14px;
    min-height:38px;
    text-decoration:none;
    font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ background:#fafbff }
.btn.primary{
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    border:none; color:#fff;
    box-shadow: 0 10px 20px rgba(111,109,244,.22);
}
.btn.primary:hover{ filter:brightness(.98) }

/* team list */
.hero-right h3{ margin:4px 0 10px }
.team{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.team li{
    display:flex; align-items:center; gap:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
}
.avatar{
    width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; font-weight:700; color:#fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.pill{
    margin-left:auto;
    font-size:12px; font-weight:700; color:#3b3b3b;
    background:#f2f4ff; border:1px solid #e3e6ff; border-radius:999px; padding:4px 8px;
}

/* footer */
.footer{
    color: var(--muted);
    text-align:center;
    padding: 14px 12px 20px;
}

/* responsive */
@media (min-width: 1200px){
    body::before{
        background:
                linear-gradient(0deg, rgba(255,255,255,.60), rgba(255,255,255,.60)),
                var(--site-bg) center/cover no-repeat;
    }
}
@media (max-width: 900px){
    .hero-card{ grid-template-columns: 1fr }
}