:root{
  --bg:#0f1720; /* dark slate */
  --card:#0b1220;
  --muted:#9aa4ad;
  --accent:#f6c166; /* warm accent from screenshot */
  --white:#ffffff;
  --glass: rgba(255,255,255,0.03);
  --max-width:1100px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
.container{
  width:90%;
  max-width:var(--max-width);
  margin:0 auto;
}

/* header */
.site-header{
  background:linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(4px);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand h1{font-size:1.05rem; margin:0}
.brand a{color:var(--white); text-decoration:none}
.main-nav{position:relative}
.nav-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); padding:6px 10px; border-radius:6px}
.nav-list{list-style:none; display:flex; gap:12px; margin:0; padding:0}
.nav-list li a{color:var(--muted); text-decoration:none; font-size:0.95rem}
.nav-list li a:hover{color:var(--white)}

/* hero */
.hero{
  padding:56px 0;
  background: linear-gradient(135deg, rgba(246,193,102,0.06), rgba(255,255,255,0));
}
.hero-inner{display:flex; gap:28px; align-items:center; justify-content:space-between}
.hero-copy{flex:1; min-width:240px}
.hero-copy h2{font-size:1.6rem; margin:0 0 10px}
.hero-copy p{color:var(--muted); margin:0 0 18px}
.hero-ctas .btn{margin-right:10px}
.hero-stats{text-align:center; width:260px}
.headshot{width:110px;height:110px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px;border:4px solid rgba(255,255,255,0.06)}
.stats{list-style:none;padding:0;margin:0;color:var(--muted)}
.stats li{margin:6px 0}

/* sections */
.section{padding:36px 0}
.section.alt{background:rgba(255,255,255,0.02)}
.section h3{margin-top:0}

/* skills */
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.skill{background:var(--card); padding:14px; border-radius:8px}

/* projects */
.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.project-card{background:var(--card); border-radius:8px; overflow:hidden; display:flex; flex-direction:column}
.project-card img{height:140px; width:100%; object-fit:cover; display:block}
.card-body{padding:12px}
.card-link{color:var(--accent); text-decoration:none}

/* lists and testimonials */
.project-list{list-style:none;padding:0;margin:0}
blockquote{margin:0;padding:12px 16px;background:var(--glass); border-left:4px solid var(--accent)}

/* footer */
.site-footer{padding:22px 0; color:var(--muted); font-size:0.9rem}

/* CV button fixed on right side */
.cv-button{
  position:fixed;
  right:14px;
  top:40%;
  transform:translateY(-50%);
  background:var(--accent);
  color:#111;
  padding:12px 14px;
  border-radius:26px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  z-index:60;
  font-weight:600;
}

/* buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.06);color:var(--white);background:transparent}
.btn-primary{background:var(--accent); color:#111; border:none}

/* responsive */
@media (max-width:840px){
  .hero-inner{flex-direction:column; align-items:flex-start}
  .hero-stats{width:100%; display:flex; gap:12px; align-items:center}
  .nav-toggle{display:inline-block}
  .nav-list{display:none; position:absolute; right:0; top:44px; background:var(--card); padding:10px; border-radius:8px; flex-direction:column; min-width:180px}
  .nav-list.open{display:flex}
}