/* Basic reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Page */
:root {
  --bg: #1d1d1d;
  --panel: #222;
  --text: #eaeaea;
  --muted: #a0a0a0;
  --accent: #ffffff;
  --dim: rgba(234,234,234,0.55);
  --divider: #2e2e2e;
  --border: #000000;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}

/* Top nav */
.topbar { padding: 24px 28px 0 28px; max-width: 1280px; margin: 0 auto; }
.nav {
  display: flex; gap: 20px; align-items: baseline; font-weight: 600;
}
.nav a {
  text-decoration: none; transition: opacity .15s ease, color .15s ease;
}
.nav__brand.dim { color: var(--dim); }
.nav__item.bright { color: var(--text); }
.nav a:hover { opacity: .9; }
.divider { border: 0; border-top: 4px solid var(--divider); margin: 10px 0 0 0; }

/* Main */
.container { max-width: 1100px; margin: 0 auto; padding: 36px 28px 80px; text-align: center; }
.title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 14px 0 10px;
  font-weight: 800;
}
.subtitle {
  color: var(--muted);
  font-size: clamp(16px, 2vw, 22px);
  margin: 0 0 40px;
}

/* Video */
.video-wrap {
  display: flex; justify-content: center; align-items: center;
  margin: 30px auto 0;
}
.video {
  width: min(100%, 1060px);
  aspect-ratio: 16 / 9;
  background: #7a7a7a; /* grey placeholder */
  border: 4px solid var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  /* Hide native controls by default; they appear on hover via JS */
}

/* Improve hover affordance on desktop */
@media (hover:hover) and (pointer:fine) {
  .video { transition: box-shadow .2s ease; }
  .video:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.45); }
}