:root { --overlay: rgba(0,0,0,.45); font-family: system-ui, Inter, Arial; }
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin: 0; color: #fff; background: #0a0a0a; }
a { color: inherit; text-decoration: none; }
.container { width: min(1080px, 92%); margin: 0 auto; }

.nav {
  position: sticky; top:0; backdrop-filter: blur(8px);
  background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.12);
  z-index: 10;
}
.nav .inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.nav .links a { margin-left: 16px; opacity:.9; }
.lang { font-size: 14px; opacity:.85; }

.hero { position: relative; min-height: 70svh; display: grid; place-items: center; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: saturate(110%) contrast(105%);
}
.hero__overlay { position: absolute; inset:0; background: var(--overlay); z-index:-1; }
.hero__content { text-align: center; padding: clamp(16px,4vw,40px); }
h1 { font-size: clamp(28px, 5vw, 56px); margin: 0 0 8px; }
p { opacity: .92; margin: 0 0 16px; font-size: clamp(14px,2.5vw,18px); }

.btn { display:inline-block; padding:12px 18px; border-radius:14px; background:#fff; color:#000; font-weight:600; text-decoration:none; margin:6px; }
.btn--ghost { background: rgba(255,255,255,.15); color:#fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); }

.section { padding: 48px 0; }
.grid { display:grid; gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.card { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 18px; padding: 18px; }
.card h3 { margin: 6px 0 8px; }
.badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.15); display:inline-block; }

footer { border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; color: rgba(255,255,255,.75); }

/* Mobile data saver: hide video and use poster */
@media (max-width: 768px) {
  .hero__video { display:none; }
  .hero { background: url('/media/hero.jpg') center/cover no-repeat; }
}