/* ========================================
HERO
======================================== */

.investor-hero{
height:100vh;
position:relative;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;
}

.hero-video{
position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.45),
rgba(0,0,0,0.92)
);
}

.hero-content{
position:relative;
z-index:2;

max-width:950px;
text-align:center;

padding:20px;
}

.hero-tag{
display:inline-block;

padding:10px 18px;

border:1px solid rgba(255,255,255,0.15);

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

border-radius:50px;

font-size:13px;
letter-spacing:2px;
text-transform:uppercase;

margin-bottom:30px;

color:var(--gold);
}

.hero-content p{
max-width:760px;
margin:30px auto 40px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* ========================================
VISION
======================================== */

.vision-grid{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:40px;
align-items:center;
}

.vision-text{
display:flex;
flex-direction:column;
gap:25px;
}

.vision-card{
padding:45px;
}

/* ========================================
MARKET
======================================== */

.market-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.market-card{
padding:40px 30px;
min-height:260px;
}

.market-card h3{
margin-bottom:20px;
}

/* ========================================
BUSINESS
======================================== */

.business{
background:#0f0f0f;
}

.business-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.business-card{
background:#141414;

padding:40px 30px;

border-radius:14px;

transition:0.4s;

border:1px solid rgba(255,255,255,0.05);
}

.business-card:hover{
transform:translateY(-10px);
border-color:rgba(212,175,55,0.4);
}

.business-number{
font-size:54px;
font-weight:700;
color:rgba(212,175,55,0.18);

margin-bottom:20px;
}

/* ========================================
IMPACT
======================================== */

.impact-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.impact-card{
background:#141414;
padding:45px 25px;
border-radius:14px;
text-align:center;
}

.impact-card h3{
font-size:52px;
color:var(--gold);
margin-bottom:15px;
}

/* ========================================
ROADMAP
======================================== */

.timeline{
position:relative;
max-width:900px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;

top:0;
bottom:0;
left:50%;

width:2px;

background:rgba(212,175,55,0.3);

transform:translateX(-50%);
}

.timeline-item{
position:relative;
margin-bottom:50px;
}

.timeline-dot{
position:absolute;

top:35px;
left:50%;

width:18px;
height:18px;

background:var(--gold);

border-radius:50%;

transform:translateX(-50%);
}

.timeline-content{
width:45%;
padding:35px;
}

.timeline-item:nth-child(odd) .timeline-content{
margin-right:auto;
}

.timeline-item:nth-child(even) .timeline-content{
margin-left:auto;
}

/* ========================================
CTA
======================================== */

.investor-cta{
text-align:center;

background:
linear-gradient(
rgba(0,0,0,0.82),
rgba(0,0,0,0.92)
),
url('../images/cta-bg.jpg') center/cover;
}

.investor-cta p{
max-width:700px;
margin:25px auto 40px;
}

/* ========================================
FOOTER
======================================== */

footer{
padding:30px;
text-align:center;
background:black;
}

/* ========================================
RESPONSIVE
======================================== */

@media(max-width:1100px){

.market-grid,
.business-grid,
.impact-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:900px){

.vision-grid{
grid-template-columns:1fr;
}

.timeline::before{
left:20px;
}

.timeline-dot{
left:20px;
}

.timeline-content{
width:100%;
padding-left:70px;
}

}

@media(max-width:768px){

.hero-buttons{
flex-direction:column;
align-items:center;
}

.market-grid,
.business-grid,
.impact-grid{
grid-template-columns:1fr;
}

}