/* =====================================================
   CVCB AMERICA
   Collector Vehicle Club of America
   United by Passion. Driven by Heritage.
===================================================== */

:root{

--navy:#071526;
--navy-light:#0d2139;
--gold:#d7b36a;
--gold-soft:#e2c98f;
--red:#b32626;
--white:#ffffff;
--gray:#c9d1d9;
--dark:#02060c;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--navy);
font-family:'Inter',sans-serif;
color:var(--white);
overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:92%;
max-width:1400px;
margin:auto;
}

/* =====================================================
HEADER
===================================================== */

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;

background:rgba(2,8,18,.72);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(215,179,106,.12);

box-shadow:
0 10px 40px rgba(0,0,0,.35),
0 1px 0 rgba(255,255,255,.03);

transition:.35s;

}

.header-container{

height:90px;

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

}

.logo img{

height:62px;

transition:.35s;

filter:
drop-shadow(0 0 10px rgba(215,179,106,.15));

}

.logo img:hover{

transform:scale(1.05);

filter:
drop-shadow(0 0 20px rgba(215,179,106,.35));

}

nav{

display:flex;
gap:35px;

}

nav a{

position:relative;

color:#fff;
font-size:15px;
font-weight:600;
letter-spacing:.5px;

transition:.3s;

}

nav a::after{

content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:var(--gold);

transition:.35s;

}

nav a:hover{

color:var(--gold);

}

nav a:hover::after{

width:100%;

}

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

.btn-primary{

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

padding:15px 30px;

border-radius:50px;

background:linear-gradient(
135deg,
#d23434,
#b32626
);

color:#fff;

font-weight:700;

box-shadow:
0 10px 30px rgba(179,38,38,.35);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:
0 18px 40px rgba(179,38,38,.55);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

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

padding:15px 30px;

border-radius:50px;

border:1px solid rgba(255,255,255,.25);

color:#fff;

transition:.3s;

}

.btn-secondary:hover{

border-color:var(--gold);
color:var(--gold);

}

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

.hero{

min-height:100vh;

position:relative;

display:flex;
align-items:center;

padding-top:100px;

background:
linear-gradient(
135deg,
rgba(7,21,38,.95),
rgba(7,21,38,.88)
);

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

top:-250px;
right:-250px;

width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(215,179,106,.15),
transparent 70%
);

}

.hero::after{

content:'';

position:absolute;

bottom:-250px;
left:-250px;

width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(179,38,38,.15),
transparent 70%
);

}

.hero-container{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:80px;
align-items:center;

position:relative;
z-index:2;

}

.hero-kicker{

display:inline-block;

color:var(--gold);

letter-spacing:4px;

font-size:12px;
font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-family:'Oswald',sans-serif;

font-size:clamp(4rem,8vw,7rem);

line-height:.95;

margin-bottom:25px;

text-transform:uppercase;

}

.hero p{

font-size:24px;

color:var(--gold-soft);

margin-bottom:40px;

}

.hero-buttons{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.hero-image{
display:flex;
justify-content:center;
align-items:center;
}

.hero-image img{
width:100%;
max-width:700px;
border-radius:24px;
box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.hero-logo-area img{

max-width:430px;

filter:
drop-shadow(0 20px 40px rgba(0,0,0,.5));

}

/* =====================================================
SECTIONS
===================================================== */

.section{

padding:120px 0;

}

.section-dark{

background:#0a1c30;

}

.section-label{

display:inline-block;

color:var(--gold);

font-size:12px;
font-weight:700;
letter-spacing:4px;

margin-bottom:20px;

text-transform:uppercase;

}

.section h2{

font-family:'Oswald',sans-serif;

font-size:clamp(2.6rem,5vw,4.2rem);

line-height:1;

margin-bottom:25px;

}

.section p{

font-size:19px;
line-height:1.9;

color:var(--gray);

margin-bottom:18px;

}

.section-heading{

text-align:center;
margin-bottom:60px;

}

.split{

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;

}

/* =====================================================
PLACEHOLDER FUTURO
===================================================== */

.future-art{

height:500px;

border:2px dashed rgba(255,255,255,.12);

border-radius:25px;

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

text-align:center;

font-size:30px;
font-weight:700;

color:rgba(255,255,255,.25);

background:
linear-gradient(
135deg,
rgba(255,255,255,.02),
rgba(255,255,255,.04)
);

}

/* =====================================================
WHY GRID
===================================================== */

.why-grid{

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

}

.why-card{

padding:35px;

border-radius:20px;

background:#102742;

border-top:4px solid var(--gold);

transition:.3s;

}

.why-card:hover{

transform:translateY(-8px);

}

.why-card h3{

margin-bottom:15px;

font-family:'Oswald',sans-serif;

font-size:28px;

color:var(--gold);

}

.why-card p{

margin:0;

font-size:16px;

}

/* =====================================================
PILLARS
===================================================== */

.pillars{

display:grid;
grid-template-columns:repeat(5,1fr);

gap:25px;

}

.pillar{

background:#0f2742;

padding:35px;

border-radius:20px;

transition:.3s;

}

.pillar:hover{

transform:translateY(-10px);

}

.pillar-number{

font-family:'Oswald';

font-size:55px;

color:rgba(215,179,106,.18);

margin-bottom:15px;

}

.pillar h3{

font-family:'Oswald';

font-size:28px;

margin-bottom:15px;

color:var(--gold);

}

.pillar p{

margin:0;
font-size:15px;

}

/* =====================================================
NUMBERS
===================================================== */

.numbers{

padding:100px 0;

background:#08111d;

}

.numbers .container{

display:grid;
grid-template-columns:repeat(4,1fr);

gap:30px;

}

.number-box{

text-align:center;

}

.number-box h3{

font-family:'Oswald';

font-size:90px;

color:var(--gold);

}

.number-box span{

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

}

/* =====================================================
TIMELINE
===================================================== */

.timeline-section{

padding:140px 0;

background:
linear-gradient(
180deg,
#08111d,
#071526
);

}

.timeline{

position:relative;

max-width:1000px;

margin:70px auto 0;

}

.timeline::before{

content:'';

position:absolute;

left:50%;

top:0;
bottom:0;

width:2px;

background:
linear-gradient(
180deg,
transparent,
#d7b36a,
transparent
);

transform:translateX(-50%);

}

.timeline-item{

position:relative;

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:80px;

}

.timeline-item:nth-child(even){

flex-direction:row-reverse;

}

.timeline-year{

width:180px;

height:180px;

border-radius:50%;

background:#102742;

border:2px solid rgba(215,179,106,.35);

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

font-family:'Oswald';

font-size:42px;

color:#d7b36a;

z-index:2;

}

.timeline-content{

width:42%;

background:#102742;

padding:35px;

border-radius:20px;

border:1px solid rgba(255,255,255,.06);

}

.timeline-content h3{

font-family:'Oswald';

font-size:32px;

margin-bottom:15px;

color:#d7b36a;

}

.timeline-content p{

margin:0;

font-size:17px;

line-height:1.8;

color:#c9d1d9;

}

@media(max-width:900px){

.timeline::before{
display:none;
}

.timeline-item,
.timeline-item:nth-child(even){

flex-direction:column;

gap:25px;

}

.timeline-content{

width:100%;

}

.timeline-year{

width:130px;
height:130px;

font-size:30px;

}

}

/* =====================================================
FEATURED VEHICLES
===================================================== */

.featured{

padding:120px 0;

background:
linear-gradient(
180deg,
#071526,
#0a1c30
);

}

.featured-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.featured-card{

background:#102742;

border-radius:24px;

overflow:hidden;

transition:.35s;

border:1px solid rgba(255,255,255,.06);

}

.featured-card:hover{

transform:translateY(-12px);

box-shadow:
0 25px 60px rgba(0,0,0,.35);

border-color:
rgba(215,179,106,.35);

}

.featured-card img{

width:100%;

height:280px;

object-fit:cover;

display:block;

}

.featured-content{

padding:30px;

}

.featured-content h3{

font-family:'Oswald';

font-size:34px;

margin-bottom:15px;

color:var(--gold);

}

.featured-content p{

margin:0;

font-size:17px;

line-height:1.8;

color:var(--gray);

}

/* =====================================================
HERITAGE
===================================================== */

.heritage-banner{

position:relative;

min-height:850px;

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

text-align:center;

overflow:hidden;

}

.heritage-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;
object-position:center top;

opacity:.45;

z-index:1;

}

.heritage-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(2,8,18,.70);

z-index:2;

}

.heritage-banner .container{

position:relative;

z-index:3;

}

.heritage-banner h2{

font-family:'Oswald';

font-size:clamp(3rem,6vw,6rem);

margin-bottom:20px;

}

.heritage-banner p{

font-size:24px;

color:var(--gold);

}

.heritage-banner h2{

font-family:'Oswald';

font-size:clamp(3rem,6vw,6rem);

margin-bottom:20px;

}

.heritage-banner p{

font-size:24px;

color:var(--gold);

}

/* =====================================================
MEMBERSHIP
===================================================== */

.membership{

position:relative;

padding:140px 0;

text-align:center;

background:url('assets/img/membership.jpg');

background-size:cover;
background-position:center;

overflow:hidden;

}

.membership::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(120,10,10,.78);

z-index:1;

}

.membership .container{

position:relative;
z-index:2;

}

.membership h2{

font-family:'Oswald';

font-size:clamp(3rem,6vw,5rem);

margin-bottom:25px;

}

.membership p{

max-width:700px;
margin:0 auto 40px;

font-size:20px;

}

/* =====================================================
SOCIAL
===================================================== */

.social{

position:relative;

padding:120px 0;

text-align:center;

background:url('assets/img/social.jpg');

background-size:cover;
background-position:center;

overflow:hidden;

}

.social::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(3,12,25,.82);

z-index:1;

}

.social .container{

position:relative;
z-index:2;

}

.social-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:30px;

margin-top:50px;

}

.social-card{

padding:50px;

background:#102742;

border-radius:25px;

text-align:center;

}

.social-card h3{

font-family:'Oswald';

font-size:36px;

margin-bottom:15px;

color:var(--gold);

}

.social-card p{

margin:0;

font-size:22px;

color:#fff;

}

/* =====================================================
CONTACT
===================================================== */

.contact-container{

max-width:900px;

}

form{

margin-top:30px;

}

form input,
form textarea{

width:100%;

padding:18px 20px;

margin-bottom:15px;

background:#102742;

border:1px solid rgba(255,255,255,.08);

border-radius:12px;

color:#fff;

font-size:16px;

}

form textarea{

height:180px;
resize:none;

}

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

footer{

padding:90px 0;

text-align:center;

background:var(--dark);

border-top:1px solid rgba(255,255,255,.05);

}

footer img{

height:110px;

margin:0 auto 25px;

}

footer h3{

font-family:'Oswald';

font-size:42px;

margin-bottom:10px;

}

footer p{

color:#c9d1d9;

margin-bottom:25px;

}

.footer-social{

display:flex;
justify-content:center;
gap:40px;

margin-bottom:25px;

color:#fff;

}

.footer-slogan{

color:var(--gold);

font-size:18px;
font-weight:600;

}

/* =====================================================
RESPONSIVO
===================================================== */

@media(max-width:1100px){

.hero-container,
.split{

grid-template-columns:1fr;

}

.hero-logo-area{

order:-1;

}

.why-grid{

grid-template-columns:1fr 1fr;

}

.pillars{

grid-template-columns:1fr 1fr;

}

.numbers .container{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

nav{
display:none;
}

.header-container{

height:80px;

}

.logo img{

height:52px;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-logo-area img{

max-width:280px;

}

.why-grid,
.pillars,
.social-grid,
.numbers .container,
.featured-grid{

grid-template-columns:1fr;

}

.section{

padding:90px 0;

}

.future-art{

height:280px;
font-size:20px;

}

.footer-social{

flex-direction:column;
gap:10px;

}

}

/* =====================================================
FASE 3
ANIMATIONS
===================================================== */

.scroll-progress{

position:fixed;

top:0;
left:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
#d7b36a,
#e2c98f
);

z-index:99999;

}

.reveal{

opacity:0;

transform:translateY(80px);

transition:
opacity .9s ease,
transform .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.why-card,
.pillar,
.social-card,
.number-box{

transition:
transform .35s,
box-shadow .35s;

}

.why-card:hover,
.pillar:hover,
.social-card:hover,
.number-box:hover{

transform:translateY(-12px);

box-shadow:
0 25px 50px rgba(0,0,0,.35);

}

.number-box{

padding:30px;

border-radius:20px;

transition:.35s;

}

.number-box:hover{

background:rgba(255,255,255,.03);

}

.hero-logo-area img{

animation:floatLogo 5s ease-in-out infinite;

}

@keyframes floatLogo{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

/* =====================================================
FASE 6
CTA + CONTACT PREMIUM + FOOTER
===================================================== */

.final-cta{

position:relative;

padding:180px 0;

text-align:center;

background:url('assets/img/hero.jpg');

background-size:cover;
background-position:center;

overflow:hidden;

}

.cta-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
135deg,
rgba(7,21,38,.88),
rgba(179,38,38,.78)
);

}

.final-cta .container{

position:relative;
z-index:2;

}

.final-cta h2{

font-family:'Oswald';

font-size:clamp(3rem,7vw,6rem);

margin:25px 0;

line-height:1;

}

.final-cta p{

max-width:700px;

margin:0 auto 40px;

font-size:22px;

color:#fff;

}

/* CONTACT PREMIUM */

.contact-premium{

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:start;

}

.contact-left h2{

margin-bottom:25px;

}

.contact-info{

margin-top:40px;

display:flex;
flex-direction:column;
gap:25px;

}

.contact-info strong{

display:block;

color:#d7b36a;

margin-bottom:6px;

font-size:18px;

}

.contact-info span{

color:#fff;

font-size:18px;

}

.contact-right form{

background:#102742;

padding:40px;

border-radius:25px;

border:1px solid rgba(255,255,255,.05);

}

/* FOOTER PREMIUM */

.footer-premium{

background:#01050b;

padding:100px 0;

text-align:center;

}

.footer-premium img{

height:120px;

margin:0 auto 25px;

}

.footer-premium h3{

font-family:'Oswald';

font-size:56px;

margin-bottom:15px;

}

.footer-divider{

width:120px;
height:2px;

background:#d7b36a;

margin:35px auto;

}

.footer-links{

display:flex;

justify-content:center;

gap:40px;

margin-bottom:35px;

flex-wrap:wrap;

}

.footer-links a{

color:#fff;

font-weight:600;

transition:.3s;

}

.footer-links a:hover{

color:#d7b36a;

}

.footer-copy{

margin-top:30px;

font-size:14px;

color:rgba(255,255,255,.45);

}

@media(max-width:900px){

.contact-premium{

grid-template-columns:1fr;

}

.footer-links{

flex-direction:column;

gap:15px;

}

}

.social-card{

text-decoration:none;

color:#fff;

cursor:pointer;

}

.social-link{

display:block;

margin-top:20px;

font-weight:700;

color:#d7b36a;

font-size:15px;

letter-spacing:1px;

}

.contact-social-link{

display:inline-block;

margin-top:6px;

color:#fff;

font-size:18px;

transition:.3s;

}

.contact-social-link:hover{

color:#d7b36a;

transform:translateX(6px);

}

.footer-social a{

color:#fff;

transition:.3s;

}

.footer-social a:hover{

color:#d7b36a;

}

.footer-origin{

max-width:900px;

margin:35px auto 0;

padding-top:35px;

border-top:1px solid rgba(215,179,106,.15);

font-size:17px;

line-height:1.9;

color:#c9d1d9;

}

.footer-origin strong{

color:#d7b36a;

font-weight:700;

}

.footer-brazil-links{

margin-top:18px;

display:flex;

justify-content:center;
align-items:center;
gap:12px;

flex-wrap:wrap;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

}

.footer-brazil-links a{

color:rgba(215,179,106,.75);

transition:.3s;

}

.footer-brazil-links a:hover{

color:#d7b36a;

}

.footer-brazil-links span{

color:rgba(255,255,255,.25);

}