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

html{
scroll-behavior:smooth;
}

body{

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

background:
linear-gradient(
180deg,
#06101d,
#081a2f,
#06101d
);

color:white;

overflow-x:hidden;
}

/* TOPBAR */

.topbar-running{

position:fixed;

top:0;
left:0;

width:100%;
height:42px;

display:flex;
align-items:center;

overflow:hidden;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

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

z-index:999999;
}

.topbar-running span{

white-space:nowrap;

padding-left:100%;

animation:runText 24s linear infinite;
}

@keyframes runText{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}

/* CONTAINER */

.container{

width:100%;
max-width:1280px;

margin:auto;

padding:0 28px;

position:relative;
z-index:2;
}

.narrow{
max-width:980px;
}

/* HERO */

.hero-impact{

min-height:100vh;

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

text-align:center;

position:relative;

overflow:hidden;

padding:
170px 24px 120px;

background:
radial-gradient(
circle at top,
rgba(15,45,80,.95),
#071426 58%,
#020817 100%
);
}

/* GLOW */

.hero-impact::before{

content:'';

position:absolute;

top:-180px;
right:-140px;

width:760px;
height:760px;

background:
radial-gradient(
circle,
rgba(212,175,55,.14),
transparent 72%
);

filter:blur(30px);
}

.hero-impact::after{

content:'';

position:absolute;

left:-240px;
bottom:-240px;

width:620px;
height:620px;

background:
radial-gradient(
circle,
rgba(0,140,255,.12),
transparent 72%
);

filter:blur(40px);
}

/* HERO CONTENT */

.hero-content{

display:flex;
flex-direction:column;
align-items:center;

max-width:1100px;
}

/* LINE */

.hero-line{

width:90px;
height:4px;

margin-bottom:34px;

border-radius:999px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);
}

/* TITLE */

.hero-content h1{

font-size:
clamp(64px,7vw,120px);

font-weight:900;

line-height:.92;

letter-spacing:-4px;

text-shadow:
0 10px 35px rgba(0,0,0,.35);
}

.hero-content h1 span{

display:block;

margin-top:12px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700,
#fff0a8
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* SUB */

.hero-sub{

margin-top:36px;

max-width:900px;

font-size:20px;

line-height:2;

color:
rgba(255,255,255,.78);
}

/* BUTTON */

.hero-buttons{

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:18px;

margin-top:50px;
}

.btn-gold,
.btn-outline-light{

height:58px;

padding:0 30px;

display:inline-flex;

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

border-radius:18px;

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

text-decoration:none;

transition:.35s ease;
}

.btn-gold{

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

box-shadow:
0 15px 35px rgba(212,175,55,.28);
}

.btn-outline-light{

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

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

color:white;
}

.btn-gold:hover,
.btn-outline-light:hover{

transform:
translateY(-4px);
}

/* SECTION */

.section{

position:relative;

padding:120px 0;

overflow:hidden;
}

.dark{

background:
linear-gradient(
180deg,
#071426,
#0b1f3a
);
}

/* TITLE */

h2{

font-size:68px;

font-weight:900;

line-height:1.05;

letter-spacing:-3px;

margin-bottom:70px;

text-align:center;

position:relative;
}

h2::after{

content:'';

position:absolute;

left:50%;
bottom:-18px;

transform:translateX(-50%);

width:90px;
height:4px;

border-radius:999px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);
}

/* IMPACT */

.impact-grid{

display:grid;

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

gap:24px;
}

.impact-card{

padding:40px 32px;

border-radius:28px;

text-align:center;

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(16px);

box-shadow:
0 24px 55px rgba(0,0,0,.28);

transition:.35s ease;
}

.impact-card:hover{

transform:
translateY(-8px);

border:
1px solid rgba(212,175,55,.26);

box-shadow:
0 35px 70px rgba(0,0,0,.36);
}

.impact-number{

font-size:64px;

font-weight:900;

color:#d4af37;

margin-bottom:18px;
}

.impact-card h3{

font-size:28px;

margin-bottom:14px;
}

.impact-card p{

font-size:14px;

line-height:1.9;

color:
rgba(255,255,255,.76);
}

/* GRID */

.grid{

display:grid;

gap:24px;
}

.four-grid{

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

/* CARD */

.card{

padding:30px;

min-height:240px;

border-radius:28px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.055),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(16px);

transition:.35s ease;

box-shadow:
0 24px 55px rgba(0,0,0,.28);
}

.card:hover{

transform:
translateY(-8px);

border:
1px solid rgba(212,175,55,.26);

box-shadow:
0 35px 70px rgba(0,0,0,.36);
}

.card h3{

font-size:24px;

margin-bottom:16px;
}

.card p{

font-size:14px;

line-height:1.95;

color:
rgba(255,255,255,.76);
}

/* TEXT */

.text-block{

max-width:920px;

margin:auto;

text-align:center;
}

.text-block p{

font-size:18px;

line-height:2;

margin-bottom:24px;

color:
rgba(255,255,255,.78);
}

/* CTA */

.cta-section{

padding:120px 0;

text-align:center;
}

.cta-section p{

max-width:860px;

margin:
36px auto 0;

font-size:19px;

line-height:1.9;

color:
rgba(255,255,255,.78);
}

/* FOOTER */

footer{

text-align:center;

padding:30px 20px;

font-size:14px;

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

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

/* MOBILE */

@media(max-width:1100px){

.four-grid{

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

.impact-grid{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.hero-impact{

padding:
140px 20px 90px;
}

.hero-content h1{

font-size:54px;

line-height:1.02;

letter-spacing:-2px;
}

.hero-sub{

font-size:15px;

line-height:1.9;
}

h2{

font-size:42px;

margin-bottom:50px;
}

.four-grid{

grid-template-columns:1fr;
}

.card{

min-height:auto;

padding:26px;
}

.hero-buttons{

flex-direction:column;
}

.btn-gold,
.btn-outline-light{

width:100%;
}

.text-block p{

font-size:15px;
}

.section{

padding:80px 0;
}

.impact-number{

font-size:48px;
}

}