:root{
  --bg:#ffffff;
  --card:#f5f5f5;
  --accent:#ff9800;
  --muted:#666666;
  --radius:16px;
  --maxw:1100px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
}
.header{
  background: var(--accent);
  padding:18px 24px;
}
.container{max-width:var(--maxw); margin:28px auto; padding:0 20px;}
.nav{display:flex; align-items:center; gap:20px;}
.logo{height:56px;}
.navlinks{margin-left:auto; display:flex; gap:14px; align-items:center;}
a.link{color:#222; text-decoration:none; padding:8px 12px; border-radius:10px; background:var(--accent);}
a.link:hover{background:#e68900; color:white}
.hero{display:flex; gap:28px; align-items:center; margin-top:28px;}
.hero .lead{flex:1}
h1{font-size:32px; margin:0 0 8px 0; color:#222}
.lead p{color:var(--muted); margin:0 0 14px 0; line-height:1.5}
.card{background:var(--card); padding:18px; border-radius:var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:18px;}
.image{width:100%; border-radius:12px; overflow:hidden; background:#ddd; display:block;}
.image img{width:100%; height:auto; display:block;}
.section-title{font-size:18px; margin:6px 0 12px 0; color:#333}
.footer{margin:48px 0 28px 0; color:var(--muted); font-size:14px; text-align:center}

/* simple responsive */
@media (max-width:800px){
  .hero{flex-direction:column; text-align:center}
  .navlinks{display:none}
  .logo{height:48px}
}