@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Grotesk:wght@400;700&display=swap');
body{margin:0;background:#f5f0e6;color:#111;font-family:'Space Grotesk',sans-serif}
.hero{height:100vh;background:url('synth.jpg') center/cover;position:relative}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
h1{font-family:'Syne';font-size:clamp(4rem,10vw,8rem);color:#fff;margin:0}
.hero p{color:#fff;font-size:1.4rem;letter-spacing:.2rem}
.btn{display:inline-block;background:#c7372f;color:#fff;padding:15px 28px;text-decoration:none;font-weight:bold}
section{max-width:1200px;margin:auto;padding:90px 30px}
h2{font-family:'Syne';font-size:3rem;border-left:10px solid #c7372f;padding-left:15px}
.about,.grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about img,.grid img,.studio img{width:100%;border:4px solid #111}
.contact a{color:#111;font-weight:bold}
footer{background:#111;color:#f5f0e6;text-align:center;padding:40px}
@media(max-width:800px){.about,.grid{grid-template-columns:1fr}}