
:root{--gold:#f2c200;--bg:#000;--muted:#bdbdbd;--maxw:1100px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--bg);color:#fff;}
.header{background:linear-gradient(90deg, rgba(10,10,10,0.95), rgba(0,0,0,0.7));position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,0.03)}
.header .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px;}
.logo img{height:56px;}
nav{margin-left:auto}
nav a{color:var(--gold);text-decoration:none;margin-left:18px;font-weight:700;opacity:0.95}
.container{max-width:var(--maxw);margin:34px auto;padding:0 18px;}
.hero{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));padding:40px;border-radius:12px;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.35) saturate(0.9);transform:scale(1.03);}
.hero .content{position:relative;z-index:2;color:#fff;}
.h-eyebrow{color:var(--gold);font-weight:800;letter-spacing:1px;margin-bottom:8px}
.h-title{font-size:34px;margin:0 0 10px;line-height:1.05}
.h-sub{color:var(--muted);margin:0 0 18px}
.cta{background:var(--gold);color:#000;padding:12px 18px;border-radius:8px;font-weight:800;text-decoration:none}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px}
.card{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.projects{margin-top:28px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.project img{width:100%;height:180px;object-fit:cover;border-radius:8px;display:block;border:3px solid rgba(255,255,255,0.04)}

footer{background:#070707;padding:26px 0;margin-top:36px;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}
footer .inner{max-width:var(--maxw);margin:0 auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}

@media(min-width:900px){.hero{grid-template-columns:1fr 460px}.h-title{font-size:44px}}
/* small animation */
.pulse{display:inline-block;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
`