@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

:root {
  --bg: #0b0c10;
  --panel: #111218;
  --alt: #0f1016;
  --text: #e8eaf0;
  --muted: #b6b8c3;
  --brand: #4da3ff;
  --brand-2: #7b61ff;
  --border: #1f2130;
  --accent: #13d4a1;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(77,163,255,.08), transparent 60%), var(--bg);
  color: var(--text);
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--shadow); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1120px, 90%); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(11,12,16,.6);
  border-bottom: 1px solid var(--border);
}

.nav-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 0; }

.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: .3px; color: white; }

.nav { display: flex; gap: 18px; justify-content: center; align-items: center; }
.nav a { padding: 8px 10px; border-radius: 10px; color: var(--text); }
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.nav-cta { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white; padding: 8px 14px; border-radius: 12px; font-weight: 600; }
.nav-cta.secondary { background: transparent; border: 1px solid var(--brand); }

.nav-toggle { display: none; width: 36px; height: 36px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; border-radius: 10px; }

.section { padding: 56px 0; }
.section.alt { background: var(--alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.hero { padding-top: 72px; }
.hero-grid { display: grid; gap: 28px; align-items: start; }
.hero-content > h1 { font-size: clamp(2rem, 2.8vw + 1rem, 3rem); margin: 0 0 10px; }
.movie { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; box-shadow: var(--shadow); background: #000; }

.prose { font-size: 1.02rem; }
.prose h2 { font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem); margin-top: 0; }
.prose h3 { margin-top: 24px; font-size: 1.15rem; }
.prose p { color: var(--text); }
.prose em { color: var(--text); }
.prose strong { color: #fff; }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
thead tr { background: linear-gradient(135deg, rgba(77,163,255,.12), rgba(123,97,255,.12)); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:hover { background: rgba(255,255,255,.04); }

.site-footer { margin-top: 40px; border-top: 1px solid var(--border); background: var(--panel); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 24px 0; align-items: center; }
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-nav a { color: var(--muted); }
.footer-nav a:hover { color: var(--text); text-decoration: none; }
.copy { color: var(--muted); font-size: .95rem; margin-top: 6px; }

.map-wrap { height: 360px; border-top: 1px solid var(--border); }
.map-embed { width: 100%; height: 100%; border: 0; filter: grayscale(.1) contrast(1.05); }

@media (max-width: 980px) {
  .nav { display: none; }
  .nav.open { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 14px 0 8px; }
  .nav-toggle { display: inline-block; justify-self: end; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
}

@media (prefers-color-scheme: light) {
  :root { --bg: #ffffff; --panel: #f6f7fb; --alt: #f3f4fa; --text: #16181d; --muted: #4b5563; --border: #e5e7ef; }
  .site-header { background: rgba(255,255,255,.7); }
  .nav a { color: #111; }
  .footer-nav a { color: #4b5563; }
}