/* Smart vCard styles – matches reference layout & colors */
:root { --accent: #b3542e; --text: #222; --muted: #5b5b5b; --bg: #ffffff; --panel: #f7eae5; }
html, body { margin:0; padding:0; background:#f6f6f6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--text); }
.smart-vcard-body { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.smart-card {
    width:min(420px, 94vw);
    background:var(--bg);
    border-radius:22px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    padding:24px 24px 84px;
    position:relative;
}
.avatar-wrap {
    display:flex; align-items:center; justify-content:center; margin-top:6px; margin-bottom:8px;
}
.avatar {
    width:260px; height:260px; object-fit:cover; border-radius:50%;
    border:14px solid var(--accent);
    display:block;
}
.avatar.placeholder { background:#ddd; }

.header { text-align:center; margin-top:8px; }
.header .name { font-size:34px; line-height:1.15; margin:10px 0 6px; font-weight:800; }
.header .title { font-size:18px; color:#333; margin-bottom:4px; }
.header .org { font-size:22px; font-weight:700; }

.cta-row {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
    margin:20px 6px;
}
.cta {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-decoration:none; border-radius:14px; padding:14px 10px; text-color:#fff;
    background:#b94f26; transition:transform .14s ease;
    border: none;
}
.cta:hover { transform: translateY(-8px); }
.cta .ico svg { width:28px; height:28px; display:block;fill:#fff; }
.cta span { margin-top:6px; font-weight:700; color:#fff; }

.bio {
    background: var(--panel);
    padding:16px 16px 24px;
    border-radius: 12px;
    color:#121212;
    font-size:16px;
}

.add-contact {
    Position:fixed; right:18px; bottom:16px;
    background: var(--accent);
    color:#fff; text-decoration:none; font-weight:800;
    padding:14px 18px; border-radius:999px;
    display:flex; gap:10px; align-items:center;
    box-shadow: 0 12px 22px rgba(179,84,46,.44);
transition:transform .14s ease;
}
.add-contact:hover { transform: translateY(-8px);color:#fff; }
.add-contact .ico svg { width:22px; height:22px; fill:#fff }
@media (max-width:420px){
    .avatar { width:220px; height:220px; border-width:12px; }
    .header .name { font-size:28px; }
    .header .org { font-size:20px; }
}