:root{--accent:#0b63a6;--muted:#6b7280;--bg:#f7fafc}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:var(--bg);color:#0f172a;line-height:1.4}
.wrap{max-width:900px;margin:36px auto;padding:28px;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(12,23,36,.08)}
header{display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:16px}
.name-block{line-height:1}
h1{margin:0;font-size:1.6rem}
h2{margin:2px 0 8px;font-size:1rem;color:var(--muted);font-weight:500}
.contact{font-size:0.9rem;color:var(--muted);text-align:right}
.contact a{color:var(--accent);text-decoration:none}
.profile{margin:18px 0;padding:12px 14px;background:#fbfdff;border-left:4px solid var(--accent);border-radius:6px}
/* avatar */
.avatar img{width:180px;height:144px;object-fit:cover;object-position:left top;border-radius:8px;border:1px solid #fff;box-shadow:0 6px 18px rgba(12,23,36,.12)}
section{margin-top:20px}
.section-title{font-weight:700;color:var(--accent);margin-bottom:10px}
.skills{display:flex;flex-wrap:wrap;gap:8px}
.skill{background:#eef6ff;color:var(--accent);padding:6px 10px;border-radius:999px;font-size:0.85rem}
.jobs{display:grid;gap:12px}
.job{padding:12px;border-radius:8px;border:1px solid #eef2f7}
.job-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.company{font-weight:700}
.dates{color:var(--muted);font-size:0.9rem}
ul{margin:8px 0 0 18px}
.education{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){header{flex-direction:column;align-items:flex-start}.contact{text-align:left}.avatar img{width:84px;height:64px;border-radius:6px}}

/* footer / visitor counter */
.footer{margin-top:20px;padding-top:12px;border-top:1px dashed #eef2f7;text-align:center;color:var(--muted);font-size:0.92rem}
.footer #visitor-counter{display:inline-block;padding:6px 10px;background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(12,23,36,.04)}