/* ===================================== */
/* RESET */
/* ===================================== */

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

body{

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

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

color:white;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

/* ===================================== */
/* GLOBAL */
/* ===================================== */

.container{

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

margin:auto;

padding:0 26px;

position:relative;
z-index:2;
}

.section{

padding:88px 0;

position:relative;

overflow:hidden;
}

.dark{

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

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

.gdp-hero{

position:relative;

min-height:76vh;

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

overflow:hidden;

padding:
120px 0 85px;

background:
linear-gradient(
rgba(3,11,22,.82),
rgba(3,11,22,.92)
),

url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=1600')
center/cover;
}

.gdp-hero::before{

content:'';

position:absolute;

top:-240px;
right:-220px;

width:620px;
height:620px;

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

filter:blur(28px);
}

.gdp-hero::after{

content:'';

position:absolute;

left:-220px;
bottom:-220px;

width:520px;
height:520px;

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

filter:blur(32px);
}

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

.hero-content{

max-width:980px;

margin:auto;

text-align:center;
}

/* ===================================== */
/* LINE */
/* ===================================== */

.hero-line,
.mini-line{

width:72px;
height:3px;

margin:
0 auto 22px;

border-radius:999px;

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

/* ===================================== */
/* TOPLINE */
/* ===================================== */

.hero-topline{

font-size:11px;

font-weight:700;

letter-spacing:5px;

color:#d4af37;

margin-bottom:18px;
}

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

.hero-title{

font-size:
clamp(48px,5vw,82px);

line-height:.96;

font-weight:900;

letter-spacing:-3px;

margin-bottom:24px;
}

.hero-title span{

display:block;

margin-top:8px;

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

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

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

.hero-sub{

max-width:860px;

margin:auto;

font-size:16px;

line-height:1.95;

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

/* ===================================== */
/* BUTTON */
/* ===================================== */

.hero-buttons{

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

gap:14px;

margin-top:34px;
}

.btn-gold,
.btn-outline{

height:48px;

padding:0 24px;

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

border-radius:14px;

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

text-decoration:none;

transition:.32s ease;
}

.btn-gold{

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

color:#071426;

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

.btn-gold:hover{

transform:
translateY(-3px);
}

.btn-outline{

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

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

color:white;
}

.btn-outline:hover{

background:white;
color:#071426;
}

/* ===================================== */
/* TRUST */
/* ===================================== */

.trust-strip{

padding:22px 0;

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

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

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

.trust-grid{

display:grid;

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

gap:14px;
}

.trust-item{

height:46px;

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

border-radius:14px;

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

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

font-size:11px;

font-weight:700;

letter-spacing:1px;

color:#d4af37;
}

/* ===================================== */
/* HEAD */
/* ===================================== */

.section-head{

max-width:840px;

margin:auto auto 52px;
}

.section-head.center{

text-align:center;
}

.section-head h2{

font-size:52px;

line-height:1;

font-weight:900;

letter-spacing:-3px;

margin-bottom:20px;
}

.section-head h2 span{

display:block;

margin-top:6px;

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

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

.section-head p{

font-size:15px;

line-height:1.9;

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

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

.urgency-grid,
.pillar-grid,
.implement-grid,
.output-grid,
.donation-grid{

display:grid;

gap:18px;
}

.urgency-grid{

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

.pillar-grid{

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

.implement-grid{

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

.output-grid{

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

.donation-grid{

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

/* ===================================== */
/* CARD */
/* ===================================== */

.glass-card,
.pillar-card,
.output-card,
.donation-card,
.implement-card{

position:relative;

overflow:hidden;

padding:26px;

border-radius:24px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.018)
);

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

backdrop-filter:blur(14px);

transition:.32s ease;

box-shadow:
0 18px 45px rgba(0,0,0,.20);
}

.glass-card:hover,
.pillar-card:hover,
.output-card:hover,
.donation-card:hover,
.implement-card:hover{

transform:
translateY(-6px);

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

/* ===================================== */
/* NUMBER */
/* ===================================== */

.card-number,
.output-number{

font-size:11px;

font-weight:800;

letter-spacing:2px;

margin-bottom:14px;

color:#d4af37;
}

.output-number{

font-size:44px;

letter-spacing:-1px;
}

/* ===================================== */
/* TITLE */
/* ===================================== */

.glass-card h3,
.pillar-card h3,
.output-card h3,
.donation-card h3{

font-size:22px;

line-height:1.3;

margin-bottom:14px;
}

/* ===================================== */
/* TEXT */
/* ===================================== */

.glass-card p,
.pillar-card p,
.output-card p,
.donation-card p{

font-size:14px;

line-height:1.85;

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

/* ===================================== */
/* PILLAR */
/* ===================================== */

.pillar-icon{

width:56px;
height:56px;

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

border-radius:18px;

margin-bottom:20px;

font-size:17px;
font-weight:800;

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

color:#071426;
}

/* ===================================== */
/* IMPLEMENT */
/* ===================================== */

.implement-card{

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

min-height:135px;

text-align:center;

font-size:18px;

font-weight:700;
}

/* ===================================== */
/* SMALL BTN */
/* ===================================== */

.small-btn{

margin-top:22px;

height:44px;

padding:0 22px;

border-radius:14px;
}

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

.cta-section{

position:relative;

overflow:hidden;

padding:
110px 0;

background:
radial-gradient(
circle at center,
#12345c,
#071426
);
}

.cta-box{

max-width:820px;

margin:auto;

text-align:center;
}

.center-line{

margin:auto auto 22px;
}

.cta-title{

font-size:
clamp(42px,5vw,76px);

line-height:.95;

font-weight:900;

letter-spacing:-3px;
}

.cta-title span{

display:block;

margin-top:6px;

color:#d4af37;
}

.cta-desc{

max-width:700px;

margin:
24px auto 0;

font-size:16px;

line-height:1.9;

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

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

.footer-premium{

padding:
88px 0 34px;

background:
linear-gradient(
180deg,
#071426,
#020817
);

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

.footer-top{

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

gap:24px;

margin-bottom:48px;
}

/* ===================================== */
/* LOGO */
/* ===================================== */

.footer-logo-ring{

width:110px;
height:110px;

border-radius:50%;

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

border:
1.4px solid rgba(212,175,55,.24);

transition:.35s ease;
}

/* ========================= */
/* FOOTER LOGO HOVER PREMIUM */
/* ========================= */

.footer-logo-ring{

transition:all .35s ease;

cursor:pointer;

}

.footer-logo{

transition:all .35s ease;

}

.footer-logo img{

transition:all .35s ease;

}

.footer-logo-ring:hover{

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(212,175,55,.25),
0 0 60px rgba(212,175,55,.12);

}

.footer-logo-ring:hover .footer-logo{

transform:scale(1.06);

}

.footer-logo-ring:hover img{

transform:scale(1.08);

filter:
drop-shadow(
0 0 12px rgba(212,175,55,.45)
);

}

.footer-logo-ring{

position:relative;
overflow:hidden;

}

.footer-logo-ring::before{

content:'';

position:absolute;

top:-100%;
left:-100%;

width:250%;
height:250%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transform:rotate(25deg);

transition:.8s;

}

.footer-logo-ring:hover::before{

top:100%;
left:100%;

}

.footer-logo-ring:hover{

border:
1.4px solid rgba(212,175,55,.46);

box-shadow:
0 0 24px rgba(212,175,55,.18);
}

.footer-logo{

width:84px;
height:84px;

border-radius:50%;

overflow:hidden;

background:white;

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

padding:12px;
}

.footer-logo img{

width:100%;
height:100%;

object-fit:contain;
}

/* ===================================== */
/* BRAND */
/* ===================================== */

.footer-brand h3{

font-size:28px;

margin-bottom:8px;
}

.footer-brand p{

font-size:14px;

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

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

.footer-grid{

display:grid;

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

gap:18px;
}

.footer-box{

padding:26px;

border-radius:22px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.018)
);

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

.footer-box h4{

font-size:18px;

margin-bottom:18px;

color:#d4af37;
}

.footer-box p{

font-size:13px;

line-height:1.9;

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

margin-bottom:14px;
}

/* ===================================== */
/* BOTTOM */
/* ===================================== */

.footer-bottom{

margin-top:44px;

padding-top:22px;

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

text-align:center;

font-size:12px;

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

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.trust-grid,
.pillar-grid,
.implement-grid{

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

.urgency-grid,
.output-grid,
.donation-grid,
.footer-grid{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.container{

padding:0 20px;
}

.section{

padding:70px 0;
}

.hero-title{

font-size:40px;

letter-spacing:-2px;
}

.hero-sub{

font-size:14px;

line-height:1.9;
}

.section-head h2{

font-size:38px;

letter-spacing:-2px;
}

.section-head p{

font-size:14px;
}

.trust-grid,
.pillar-grid,
.implement-grid{

grid-template-columns:1fr;
}

.footer-top{

flex-direction:column;

text-align:center;
}

.footer-brand h3{

font-size:24px;
}

.hero-buttons{

flex-direction:column;
}

.btn-gold,
.btn-outline{

width:100%;
}

}