:root{
  --green:#1E2F28;
  --green-2:#233b32;
  --gold:#C7A35E;
  --text:#e9edea;
  --muted:#b9c4bf;
  --container:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background:#0f1714;
}
a{color:var(--text);text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:100;background:rgba(15,23,20,.7);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;letter-spacing:.5px}
.nav-links a{margin-left:24px;opacity:.9}
.nav-links a:hover{color:var(--gold)}
.banner{height:86vh;min-height:520px;position:relative;display:grid;place-items:center;background:url('hero.jpg') center/cover no-repeat fixed}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,23,20,.5), rgba(15,23,20,.85))}
.banner-content{position:relative;text-align:center;max-width:900px;padding:0 20px}
.banner h1{font-size:44px;letter-spacing:.5px;margin:0 0 12px}
.banner p{color:var(--muted);margin:0 0 24px}
.btn{display:inline-block;padding:12px 22px;border:1px solid var(--gold);color:var(--text);border-radius:999px;transition:.25s background-color,.25s color,.25s transform}
.btn:hover{background:var(--gold);color:#101512;transform:translateY(-1px)}
.section{padding:80px 0}
.section-title{font-size:28px;margin:0 0 20px;color:#fff}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.about-text p{color:var(--muted)}
.about-img{height:380px;border-radius:18px;background:url('about.jpg') center/cover no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.projects .grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;height:240px;border-radius:16px;overflow:hidden;background:url('project.jpg') center/cover no-repeat;transform:translateZ(0)}
.card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.55));transition:.35s opacity;opacity:.6}
.card:hover::before{opacity:.9}
.card-info{position:absolute;left:14px;bottom:14px;right:14px;padding:12px;border-left:2px solid var(--gold);color:#fff;background:rgba(30,47,40,.35);backdrop-filter:blur(4px)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:#d7dbc8;font-size:13px}
.contact{background:linear-gradient(180deg, var(--green-2), var(--green))}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.contact-text p{color:var(--muted)}
.contact-map{height:300px;border-radius:16px;background:url('map.jpg') center/cover no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:22px 0;background:#0f1714}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer .socials a{margin-left:16px;color:var(--muted)}
.footer .socials a:hover{color:var(--gold)}
@media (max-width: 900px){.about, .contact-inner{grid-template-columns:1fr}.about-img,.contact-map{height:260px}.projects .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.banner{background-attachment:scroll}}
@media (max-width: 560px){.nav-links{display:none}.projects .grid{grid-template-columns:1fr}.banner h1{font-size:30px}}
.reveal{opacity:0;transform:translateY(12px)}
.reveal.visible{opacity:1;transform:none;transition:600ms ease;transition-property:opacity,transform;transition-delay:var(--d,0s)}