:root {
  --bg:#0b0c10;
  --fg:#111;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; }

.container { width:min(1100px, 92vw); margin:0 auto; }

.site-header {
  position: sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.logo img { height:34px; width:auto; display:block; }

.nav { display:flex; gap:14px; flex-wrap:wrap; }
.nav a { text-decoration:none; color:#111; font-size:14px; padding:6px 8px; border-radius:10px; }
.nav a:hover { background:#f3f4f6; }

.lang { display:flex; gap:8px; }
.pill { text-decoration:none; font-size:13px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:#111; }
.pill.active { background:#111; color:#fff; border-color:#111; }

.hero {
  position: relative;
  min-height: 62vh;
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:flex-end;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05));
}
.hero-inner {
  position: relative;
  padding: 72px 0;
  color:#fff;
}
.kicker { letter-spacing:.12em; text-transform:uppercase; font-size:12px; opacity:.9; margin:0 0 10px; }
.hero h1 { font-size: clamp(28px, 4vw, 52px); margin:0 0 18px; line-height:1.05; }

.section { padding:64px 0; background:#fff; }
.section.alt { background:#f7f7f8; }

.center { text-align:center; }
.muted { color: var(--muted); }

.btn {
  display:inline-block;
  text-decoration:none;
  background:#111;
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  font-weight:600;
}
.btn.ghost { background:transparent; color:#111; border:1px solid #111; }

.grid-3 {
  margin-top:34px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}
.card img {
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
}
.card a { color:#111; text-decoration:none; }
.card h3 { margin:14px 0 8px; font-size:16px; letter-spacing:.02em; }
.card p { margin:0; color:#374151; line-height:1.45; }
.card.compact img { display:none; }

.stats {
  margin:34px 0 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.stat {
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.stat img { width:100%; height:160px; object-fit:cover; display:block; }
.stat-text { padding:12px 14px; display:flex; gap:10px; align-items:baseline; }
.stat-text strong { font-size:26px; }
.stat-text span { color:#374151; line-height:1.2; }

.site-footer { background:#0b0c10; color:#cbd5e1; padding:34px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-logo { height:28px; width:auto; }

@media (max-width: 900px) {
  .grid-3, .stats { grid-template-columns: 1fr; }
  .nav { display:none; }
}