@font-face {
font-family: "SpellFister";
src: url("assets/fonts/vinque-rg.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
}

:root {
--bg: #070407;
--bg-soft: #120a10;
--text: #fff4e8;
--muted: #d6b6a6;
--muted-dark: #9b7f74;
--accent: #ff6a2a;
--accent-2: #ffd166;
--border: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at 20% 10%, rgba(255, 106, 42, 0.16), transparent 34rem),
radial-gradient(circle at 80% 0%, rgba(255, 209, 102, 0.09), transparent 30rem),
var(--bg);
color: var(--text);
line-height: 1.6;
}

a {
color: inherit;
}

.site-header {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
padding: 18px 32px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(7, 4, 7, 0.76);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}

.brand {
font-family: "SpellFister", Inter, ui-sans-serif, system-ui, sans-serif;
font-size: 1.35rem;
font-weight: normal;
text-decoration: none;
letter-spacing: 0.02em;
}

nav {
display: flex;
gap: 22px;
}

nav a {
color: var(--muted);
text-decoration: none;
font-size: 0.95rem;
}

nav a:hover {
color: var(--text);
}

.hero {
position: relative;
min-height: 84vh;
display: flex;
align-items: center;
padding: 120px 32px 72px;
overflow: hidden;
background:
linear-gradient(90deg, rgba(7, 4, 7, 0.96), rgba(7, 4, 7, 0.74), rgba(7, 4, 7, 0.38)),
url("assets/hero.png") center / cover;
}

.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to top, var(--bg), transparent 48%),
radial-gradient(circle at 30% 52%, rgba(255, 106, 42, 0.18), transparent 28rem);
}

.hero-content {
position: relative;
max-width: 1120px;
margin: 0 auto;
width: 100%;
}

.eyebrow {
margin: 0 0 12px;
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 900;
font-size: 0.78rem;
}

h1 {
margin: 0;
max-width: 980px;
font-family: "SpellFister", Inter, ui-sans-serif, system-ui, sans-serif;
font-size: clamp(5rem, 13vw, 10rem);
line-height: 0.9;
letter-spacing: 0.02em;
text-transform: none;
text-shadow: 0 0 42px rgba(255, 106, 42, 0.32);
}

h2 {
margin: 0 0 18px;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -0.055em;
}

p {
color: var(--muted);
font-size: 1.05rem;
}

.tagline {
max-width: 760px;
margin-top: 28px;
color: var(--text);
font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-weight: 900;
text-decoration: none;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover {
transform: translateY(-2px);
}

.button.primary {
background: linear-gradient(135deg, var(--accent), #ffb000);
color: #170706;
box-shadow: 0 12px 34px rgba(255, 106, 42, 0.22);
}

.button.secondary {
border: 1px solid var(--border);
color: var(--text);
background: rgba(255, 255, 255, 0.07);
}

.section {
max-width: 1120px;
margin: 0 auto;
padding: 72px 32px;
}

#about {
padding-top: 88px;
}

.two-column {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 64px;
align-items: start;
}

.section-copy {
max-width: 640px;
padding-top: 18px;
}

.section-copy p:first-child {
margin-top: 0;
}

.section-heading-row {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: end;
}

.media-note {
max-width: 380px;
margin: 0 0 24px;
color: var(--muted-dark);
font-size: 0.98rem;
}

.media-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 18px;
margin-top: 28px;
}

.media-grid img:first-child {
grid-row: span 2;
}

.media-grid img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--bg-soft);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
}

.cta {
text-align: center;
max-width: 820px;
padding-top: 90px;
padding-bottom: 90px;
}

.cta p {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}

.cta .hero-buttons {
justify-content: center;
}

.site-footer {
max-width: 1120px;
margin: 0 auto;
padding: 36px 32px;
border-top: 1px solid var(--border);
}

.site-footer p {
margin: 0;
color: var(--muted-dark);
font-size: 0.95rem;
}

@media (max-width: 900px) {
.site-header {
position: absolute;
}

nav {
display: none;
}

.hero {
min-height: 88vh;
padding: 120px 24px 72px;
}

.section {
padding: 58px 24px;
}

.two-column,
.media-grid {
grid-template-columns: 1fr;
}

.media-grid img:first-child {
grid-row: auto;
}

.section-heading-row {
display: block;
}

.media-note {
max-width: none;
margin-top: 10px;
}
}