*{box-sizing:border-box}body{font-family:Poppins,sans-serif;background:#f6f0e7;color:#222;margin:0;overflow-x:hidden}
header{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;padding:20px 8%;background:rgba(255,255,255,.75);backdrop-filter:blur(12px)}
.logo{font-weight:700;font-size:28px;color:#b78b2f}
nav a{text-decoration:none;color:#222;margin-left:20px}
.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:180px 20px 80px;
}
.hero h1{font-size:80px;margin:0}
.hero-title{
font-size:130px;
}
font-weight:800;
letter-spacing:-5px;
line-height:1;
margin-bottom:15px;
background:linear-gradient(
135deg,
#b78b2f,
#f0d18c,
#d4af37
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
font-weight:800;
letter-spacing:-3px;
background:linear-gradient(135deg,#b78b2f,#f0d18c);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:10px;
line-height:1;
}

.hero-subtitle{
font-size:28px;
font-weight:600;
margin-bottom:20px;
color:#444;
}

.hero-description{
max-width:850px;
font-size:20px;
line-height:1.9;
color:#666;
margin:auto;
}

@media(max-width:768px){

.hero-title{
font-size:65px;
}

.hero-subtitle{
font-size:20px;
}

.hero-description{
font-size:16px;
}

}
.btn{background:#b78b2f;color:#fff;padding:16px 28px;border-radius:999px;text-decoration:none}
section{padding:90px 8%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.card{background:rgba(255,255,255,.65);backdrop-filter:blur(15px);border-radius:30px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,.08);transition:.4s}
.card:hover{transform:translateY(-10px)}
.num{font-size:42px;color:#b78b2f;font-weight:700}
..chart{
height:450px;
display:flex;
align-items:flex-end;
justify-content:center;
gap:20px;
margin-top:60px;
}

.bar{
width:90px;
background:linear-gradient(
180deg,
#e8d5a8,
#b78b2f
);
border-radius:35px 35px 0 0;
position:relative;
animation:grow 2s ease;
box-shadow:0 15px 40px rgba(183,139,47,.25);
}

.bar span{
position:absolute;
bottom:-40px;
left:50%;
transform:translateX(-50%);
font-weight:700;
}

.bar p{
position:absolute;
top:-35px;
left:50%;
transform:translateX(-50%);
font-size:14px;
font-weight:600;
white-space:nowrap;
}

.h1{height:60px;}
.h2{height:120px;}
.h3{height:180px;}
.h4{height:250px;}
.h5{height:340px;}
.h6{height:430px;}
.h1{height:90px}.h2{height:150px}.h3{height:210px}.h4{height:260px}.h5{height:310px}
@keyframes grow{from{height:0}}
.blob{position:fixed;border-radius:50%;filter:blur(80px);z-index:-1}
.b1{width:300px;height:300px;background:#e8d7ae;top:50px;left:-50px}
.b2{width:350px;height:350px;background:#f0e4c7;right:-100px;top:300px}
.reveal{
opacity:0;
transform:translateY(80px) scale(.95);
transition:1.2s cubic-bezier(.17,.84,.44,1);
}

.reveal.active{
opacity:1;
transform:translateY(0) scale(1);
}
.form input,.form textarea,.form button{width:100%;margin:8px 0;padding:14px;border-radius:18px;border:1px solid #ddd}
.form button{background:#b78b2f;color:white;border:none}
.timeline-chart{
position:relative;
height:450px;
max-width:1100px;
margin:auto;
}

.timeline-chart svg{
position:absolute;
width:100%;
height:100%;
}

.point{
position:absolute;
text-align:center;
}

.dot{
width:22px;
height:22px;
border-radius:50%;
background:#b78b2f;
box-shadow:0 0 30px rgba(183,139,47,.6);
}

.point span{
display:block;
font-weight:700;
margin-top:10px;
}

.point p{
font-weight:600;
color:#b78b2f;
}

.p1{left:5%;bottom:45px;}
.p2{left:22%;bottom:95px;}
.p3{left:40%;bottom:145px;}
.p4{left:58%;bottom:205px;}
.p5{left:76%;bottom:275px;}
.p6{left:92%;bottom:355px;}