:root{--bg:#F6F7FB;--ink:#101A3A;--muted:#566083;--line:#D8DCEB;--blue:#3D3BF3;--mint:#7EE8C7;--white:#fff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 "Segoe UI",Arial,sans-serif}
a{color:var(--blue);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;flex-wrap:wrap;gap:1rem}
.brand{font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none}
.top nav a{margin-left:1.4rem;color:var(--muted);text-decoration:none;font-weight:500}
.top nav a:hover{color:var(--ink)}
.hero{padding:4rem 0}
h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.05;letter-spacing:-.03em;max-width:16ch}
.lead{margin-top:1.3rem;max-width:34rem;color:var(--muted);font-size:1.15rem}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:8px;font-weight:600;text-decoration:none;border:2px solid var(--ink)}
.btn.main{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.main:hover{background:#2c2ad1;border-color:#2c2ad1}
.btn.alt{color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:#fff}
section{padding:3rem 0;border-top:1px solid var(--line)}
.hero{border-top:0}
h2{font-size:clamp(1.7rem,4vw,2.2rem);letter-spacing:-.02em;margin-bottom:1.2rem}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1.4rem}
.card h3{font-size:1.2rem;margin-bottom:.2rem}
.card .when{color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.card a{font-weight:600;margin-right:1rem}
.skills{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin-top:1.4rem}
.skills li{background:var(--white);border:1px solid var(--line);padding:.35rem .9rem;border-radius:999px;font-weight:500}
.contact{background:var(--ink);color:#fff;border-radius:18px;padding:2.5rem 2rem;border-top:0;margin-bottom:2rem}
.contact p{color:#B9C0DC}
.mail{display:inline-block;margin:1rem 0 1.4rem;font-size:clamp(1.3rem,4vw,2rem);font-weight:800;color:var(--mint)}
.socials{display:flex;gap:.7rem;flex-wrap:wrap}
.socials a{color:#fff;border:1.5px solid #5C668F;padding:.5rem 1.1rem;border-radius:8px;text-decoration:none;font-weight:600}
.socials a:hover{background:#fff;color:var(--ink)}
footer{padding-bottom:3rem;color:var(--muted);font-size:.95rem}