:root{
  --bg:#0b0b0b;
  --text:#e8e8e8;
  --muted:#b7b7b7;
  --card:#131313;
  --accent:#d4af37; /* gold */
  --accent-weak: rgba(212,175,55,0.15);
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

/* Nav */
.site-header{position:relative}
.nav{
  max-width:1100px; margin:auto; padding:20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.5px}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.5rem}
.nav-links{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.nav a{color:var(--text); text-decoration:none}
.nav .btn{margin-left:8px}

/* Hero */
.hero{
  max-width:1100px; margin:30px auto 0; padding:20px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center;
}
.hero__text h1{font-size:clamp(2rem,4.5vw,3.2rem); margin:.2em 0}
.hero__text p{color:var(--muted)}
.cta{display:flex; gap:12px; margin:18px 0 8px}
.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:10px 0 0; list-style:none}
.tags li{border:1px solid var(--accent); color:var(--accent); padding:6px 10px; border-radius:999px; font-size:.85rem}

.hero__image img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow: var(--shadow);
  object-fit:cover;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  background:var(--accent);
  color:#111; font-weight:700; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px var(--accent-weak);
}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--accent) }
.btn--sm{padding:8px 12px; font-size:.9rem}

/* Sections */
.section{max-width:1100px; margin:60px auto; padding:0 20px}
.section__head h2{margin:.2em 0}
.section__head p{color:var(--muted); margin-top:6px}

/* Grid of projects */
.grid{
  display:grid; gap:18px; margin-top:18px;
  grid-template-columns: repeat(12,1fr);
}
.card{
  grid-column: span 12;
  background:var(--card); border:1px solid #1c1c1c; border-radius:var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
  display:grid; grid-template-columns: 1.2fr 1fr; min-height:240px;
}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__body{padding:18px}
.card h3{margin:0 0 6px}
.card p{color:var(--muted); margin-top:6px}
.pillrow{display:flex; gap:8px; margin:12px 0}
.pill{background:#0f0f0f; border:1px solid #262626; padding:6px 10px; border-radius:999px; font-size:.8rem; color:#cfcfcf}
.actions{display:flex; gap:8px; margin-top:10px}

/* About */
.section--alt{background:linear-gradient(180deg, rgba(212,175,55,0.06), transparent)}

/* Contact */
.contact{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.socials{display:flex; gap:14px}
.socials a{color:var(--muted); text-decoration:none}
.socials a:hover{color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid #1c1c1c; padding:24px 20px; text-align:center; color:#9a9a9a}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr}
  .card{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; right:20px; top:64px; background:#121212; border:1px solid #222; padding:12px; border-radius:10px; display:none; flex-direction:column; width:200px}
  .nav-links.show{display:flex}
}