/* COLOURS: change the theme here only */
:root{--bg:#f7f8fc;--alt:#eceefa;--card:#fff;--text:#1d2030;--muted:#555b73;--primary:#3730a3;--accent:#0d9488;--on-primary:#fff;--line:#d9dcee}
[data-theme="dark"]{--bg:#12141f;--alt:#191c2b;--card:#1f2336;--text:#eceefa;--muted:#a9aec7;--primary:#a5a1ff;--accent:#2dd4bf;--on-primary:#12141f;--line:#2e3350}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
h1,h2,h3,.logo,.btn{font-family:Poppins,system-ui,Arial,sans-serif}
a{color:var(--primary)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1050px;margin:auto;padding:0 20px}
.narrow{max-width:760px}
/* Navigation */
.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:8px;height:62px}
.logo{font-weight:600;text-decoration:none;color:var(--text);margin-right:auto}
nav a{text-decoration:none;color:var(--muted);font-size:.92rem;padding:6px 10px;border-radius:6px}
nav a:hover,nav a.active{color:var(--primary);background:var(--alt)}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--text);font-size:1.1rem;cursor:pointer}
#burger{display:none}
@media(max-width:820px){
  #burger{display:block}
  nav{display:none;position:absolute;top:62px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 20px;flex-direction:column}
  nav.open{display:flex}
}
/* Hero */
.hero{padding:70px 0 60px}
.hero-in{display:grid;gap:40px;align-items:center}
.hello{color:var(--accent);font-weight:500}
h1{font-size:clamp(2.4rem,7vw,4rem);line-height:1.1;color:var(--primary);margin:6px 0}
.title{font-family:Poppins,sans-serif;font-size:1.4rem;font-weight:500}
.lead{color:var(--muted);margin:16px 0 26px;max-width:520px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:11px 22px;border:2px solid var(--primary);border-radius:8px;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--primary);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.small{padding:7px 16px;font-size:.85rem;margin-top:10px}
.photo{position:relative;width:min(320px,80%);aspect-ratio:1;justify-self:center;border-radius:50%;box-shadow:14px 14px 0 var(--accent);overflow:hidden;background:var(--primary)}
.photo img,.thumb img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;position:relative;z-index:1}
.fallback{position:absolute;inset:0;display:grid;place-items:center;font:700 3rem Poppins,sans-serif;color:var(--on-primary)}
@media(min-width:820px){.hero-in{grid-template-columns:1.3fr 1fr}}
/* Sections */
.sec{padding:64px 0}
.alt{background:var(--alt)}
h2{font-size:1.9rem;color:var(--primary);margin-bottom:24px}
h3{font-size:1.05rem;margin-bottom:4px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.project{transition:transform .25s,box-shadow .25s}
.project:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(55,48,163,.18)}
.thumb{position:relative;height:160px;border-radius:8px;overflow:hidden;margin-bottom:14px;background:linear-gradient(135deg,var(--primary),var(--accent))}
.meta{color:var(--muted);font-size:.9rem;margin-top:8px}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tags li{background:var(--alt);border-radius:999px;padding:4px 14px;font-size:.88rem}
.timeline{list-style:none;padding:0 0 0 22px;border-left:3px solid var(--accent)}
.timeline li{position:relative;margin-bottom:26px}
.timeline li::before{content:"";position:absolute;left:-30px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--primary)}
.timeline p{color:var(--muted)}
.timeline span{font-size:.88rem;color:var(--accent);font-weight:500}
.contact{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.contact a{font-weight:500}
footer{text-align:center;padding:26px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
#top{position:fixed;right:18px;bottom:18px;z-index:10}
/* Scroll reveal (set by script.js) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.js .reveal{opacity:1;transform:none}}