
:root{
--gold:#d8a843;
--gold2:#f3cf7a;
--black:#050505;
--cream:#f5efe3;
}

*{box-sizing:border-box}
body{
margin:0;
background:#050505;
color:white;
font-family:Georgia,serif;
}

html{scroll-behavior:smooth}

.nav{
position:fixed;
top:0;
left:0;
right:0;
padding:22px 5vw;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,.82);
backdrop-filter:blur(8px);
z-index:100;
}

.brand{
font-family:Arial,sans-serif;
font-size:13px;
font-weight:800;
letter-spacing:.25em;
color:var(--gold2);
}

.navlinks{
display:flex;
gap:22px;
}

.navlinks a{
color:white;
text-decoration:none;
font-family:Arial,sans-serif;
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:80px 20px;
background:
linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.82)),
url('https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=1600&auto=format&fit=crop');
background-size:cover;
background-position:center;
}

.hero-content{
max-width:1100px;
}

.eyebrow,.section-kicker{
font-family:Arial,sans-serif;
text-transform:uppercase;
letter-spacing:.28em;
font-size:12px;
color:var(--gold2);
font-weight:700;
}

h1{
font-size:clamp(4rem,10vw,10rem);
line-height:.82;
margin:30px 0;
letter-spacing:-.05em;
}

h1 span{
color:var(--gold);
}

.tagline{
font-size:clamp(1.6rem,3vw,3rem);
font-style:italic;
color:#f4f0e6;
}

.hero-buttons{
margin-top:40px;
display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:16px 28px;
border-radius:999px;
text-decoration:none;
font-family:Arial,sans-serif;
font-weight:800;
text-transform:uppercase;
font-size:12px;
letter-spacing:.1em;
}

.primary{
background:var(--gold);
color:black;
}

.ghost{
border:1px solid rgba(255,255,255,.35);
color:white;
}

.section{
padding:110px 8vw;
}

.intro{
background:var(--cream);
color:#111;
text-align:center;
}

.intro h2,
.timeline-section h2,
.tourism h2,
.ecosystem h2,
.partners h2{
font-size:clamp(2.2rem,5vw,5rem);
line-height:1.05;
max-width:1100px;
margin:18px auto;
}

.intro p,
.tourism-text{
font-size:1.25rem;
line-height:1.7;
max-width:900px;
margin:30px auto;
}

.quote{
margin:50px auto 0;
max-width:850px;
padding:30px;
font-size:2rem;
font-style:italic;
border-top:1px solid var(--gold);
border-bottom:1px solid var(--gold);
color:#7c560f;
}

.dark-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.card{
padding:34px;
border-radius:24px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}

.card.large{
grid-column:span 3;
}

.card h3,
.timeline-item h3{
color:var(--gold2);
font-size:2rem;
}

.timeline{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
margin-top:50px;
}

.timeline-item{
padding:30px;
background:rgba(255,255,255,.04);
border-left:3px solid var(--gold);
border-radius:0 24px 24px 0;
}

.timeline-item span{
font-family:Arial,sans-serif;
font-size:12px;
text-transform:uppercase;
letter-spacing:.2em;
color:var(--gold);
font-weight:800;
}

.tourism{
background:#0d0a06;
text-align:center;
}

.tourism-grid,
.pillars,
.partner-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:45px;
}

.tourism-grid div,
.pillars div,
.partner-grid div{
padding:24px;
border-radius:18px;
background:rgba(216,168,67,.08);
border:1px solid rgba(216,168,67,.35);
font-family:Arial,sans-serif;
font-weight:700;
}

.ecosystem{
background:#15100a;
text-align:center;
}

.partners{
background:var(--cream);
color:#111;
text-align:center;
}

.partner-grid div{
color:#111;
}

.finale{
min-height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:80px 20px;
background:black;
}

.finale h2{
font-size:clamp(4rem,10vw,10rem);
color:var(--gold);
margin:20px 0;
}

.finale p{
font-size:1.5rem;
}

@media(max-width:900px){
.dark-grid,
.timeline,
.tourism-grid,
.pillars,
.partner-grid{
grid-template-columns:1fr;
}
.card.large{
grid-column:auto;
}
.navlinks{
display:none;
}
}
