/* Simple, clean, responsive layout */
* { box-sizing: border-box; }
:root {
  --maxw: 1080px;
  --pad: 20px;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --text: #111;
  --muted: #666;
}
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
header { position: sticky; top:0; background: #fff; border-bottom: 1px solid #eee; z-index: 10; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.nav .left, .nav .right { display: flex; align-items: center; gap: 16px; }
.lang-toggle { border:1px solid #ddd; padding:6px 10px; border-radius: 8px; cursor:pointer; }
main { padding: 40px 0; }
.hero { display:grid; gap: 16px; grid-template-columns: 1.2fr 1fr; align-items: center; }
.hero-card { background:#fff; padding: 28px; border-radius: 16px; box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(28px, 3.2vw, 44px); margin: 0 0 12px; }
.hero p { color: var(--muted); margin: 0 0 16px; }
.button { display:inline-block; padding: 12px 16px; border:1px solid #111; border-radius: 10px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background:#fff; padding: 12px; border-radius: 14px; box-shadow: var(--shadow); }
.card h3 { margin: 10px 0 6px; }
footer { border-top: 1px solid #eee; padding: 28px 0; color: var(--muted); font-size: 14px; }
.tag { font-size: 12px; opacity: .7; border:1px solid #eee; border-radius: 999px; padding: 4px 8px; display:inline-block; margin-right:6px;}
@media (max-width:900px){
  .hero { grid-template-columns: 1fr; }
}