@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; background: #08090b; color: #f7f7f5; }
h1, h2, h3, .display { font-family: 'Barlow Condensed', sans-serif; }
.grain { background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; }
.red-line { background: linear-gradient(90deg, #e50914 0%, #ff3440 50%, transparent 100%); }
.hero-grid { background: radial-gradient(circle at 78% 22%, rgba(229,9,20,.22), transparent 31%), #08090b; }
.hero-image { box-shadow: 18px 18px 0 rgba(229,9,20,.9); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.photo-tile img { transition: transform .5s ease; }
.photo-tile:hover img { transform: scale(1.04); }
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
@media (max-width: 640px) {
  .hero-image { box-shadow: 10px 10px 0 rgba(229,9,20,.9); }
}