:root {
  --bg: #0a0f1c;
  --fg: #eaf1ff;
  --muted: #9fb0c9;
  --accent: #5aa9e6;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', sans-serif; color: var(--fg); background: var(--bg); line-height: 1.5; }
.hero { position: relative; min-height: 75vh; display: grid; place-items: center; overflow: hidden; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(1.1); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, transparent, rgba(10,15,28,.75)); pointer-events: none; }
.hero .content { position: relative; text-align: center; padding: 2rem; backdrop-filter: blur(2px); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 .25rem; letter-spacing: .5px; }
.tagline { color: var(--muted); margin-top: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.gallery { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; } }
.card { display: inline-block; width: 100%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; margin: 0 0 1rem; overflow: hidden; box-shadow: var(--shadow); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #111827; }
.card .meta { padding: .75rem .9rem; color: var(--muted); font-size: .95rem; }
.footer { text-align: center; color: var(--muted); padding: 2rem 1rem; }
#lightbox { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.82); z-index: 50; padding: 2rem; }
#lightbox.open { display: grid; }
#lightbox img { max-width: 100%; max-height: 85vh; border-radius: 10px; box-shadow: var(--shadow); }
#lightbox .close { position: absolute; top: 16px; right: 16px; font-size: 28px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: white; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.hero.no-video { background: radial-gradient(circle at 20% 10%, #15223a, transparent 40%), linear-gradient(180deg, #0a0f1c 0%, #111a2d 100%); }