:root{--bg:#0b0c10;--text:#1a1a1a;--muted:#6b7280;--accent:#eab308;--accent-ink:#111;--surface:#fff;--surface-2:#f6f7f9;--radius:14px;--shadow:0 10px 25px rgba(0,0,0,.08);--container:1200px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:50;background:var(--surface);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.nav-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:800;letter-spacing:.2px;text-decoration:none;color:#111;font-size:1.1rem}
.brand small{font-weight:600;color:var(--muted);margin-left:.35rem}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#111;text-decoration:none;padding:8px 10px;border-radius:10px;transition:transform .15s ease, background .2s ease}
.menu a:hover{background:#f2f3f5;transform:translateY(-1px)}
.menu a.active{background:#eef2ff}
.burger{display:none;background:transparent;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#111;margin:5px 0}
@media(max-width:880px){.menu{display:none;position:absolute;right:12px;top:58px;background:var(--surface);padding:10px;border:1px solid #eee;border-radius:12px;box-shadow:var(--shadow);flex-direction:column}.menu.show{display:flex}.burger{display:block}}
.hero{position:relative;min-height:64vh;display:grid;place-items:center;color:#fff}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35))}
.hero-content{position:relative;z-index:1;text-align:center;max-width:900px;padding:40px 20px}
.kicker{display:inline-block;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.9;margin-bottom:8px}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.12;margin:6px 0 10px}
.hero p{font-size:clamp(16px,2.4vw,19px);opacity:.95;margin:0 auto 18px;max-width:760px}
.cta,.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none;border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 16px rgba(234,179,8,.25);transition:transform .15s ease, box-shadow .15s ease}
.cta:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(234,179,8,.35)}
.section{padding:52px 0}
.section.light{background:var(--surface-2)}
.section h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 8px}
.lead{color:var(--muted);max-width:900px}
.card{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
.card h3{margin-top:0}
.grid,.gallery,.projects-grid,.portfolio-grid,.thumbs,.img-grid{display:grid;gap:16px}
.grid img,.gallery img,.projects-grid img,.portfolio-grid img,.thumbs img,.img-grid img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
img.logo,img[alt*="logo" i],img[alt*="icon" i]{aspect-ratio:auto !important;object-fit:contain !important;border-radius:0 !important}
.grid{grid-template-columns:1fr}
@media(min-width:1024px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid:not(.cols-3):not(.cols-4){grid-template-columns:repeat(3,1fr)}}
.actions{text-align:center}.actions .cta,.actions .btn{margin:0 8px}
footer{background:#0f1115;color:#d1d5db}
footer a{color:#fff}
footer p{margin:0;padding:22px}