/* ===================================== */
/* 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:1240px;

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 */
/* ===================================== */

.gdt-hero{

position:relative;

min-height:82vh;

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

overflow:hidden;

padding:
140px 0 95px;

background:
radial-gradient(
circle at top,
rgba(18,52,92,.92),
#071426 58%,
#020817 100%
);
}

.gdt-hero::before{

content:'';

position:absolute;

top:-240px;
right:-200px;

width:650px;
height:650px;

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

filter:blur(28px);
}

.gdt-hero::after{

content:'';

position:absolute;

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

width:520px;
height:520px;

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

filter:blur(35px);
}

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

.hero-content{

max-width:960px;

margin:auto;

text-align:center;

position:relative;
z-index:2;
}

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

.hero-line,
.mini-line{

width:78px;
height:3px;

margin:
0 auto 24px;

border-radius:999px;

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

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

/* ===================================== */
/* TOP */
/* ===================================== */

.hero-top{

font-size:11px;

font-weight:700;

letter-spacing:4px;

color:#d4af37;

margin-bottom:20px;
}

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

.hero-title{

font-size:
clamp(52px,6vw,88px);

line-height:.94;

font-weight:900;

letter-spacing:-3px;

margin-bottom:28px;

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

.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:820px;

margin:auto;

font-size:17px;

line-height:1.95;

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

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

.hero-buttons{

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

gap:14px;

margin-top:36px;
}

.btn-gold,
.btn-outline{

height:50px;

padding:0 26px;

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

border-radius:15px;

text-decoration:none;

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

transition:.32s ease;
}

.btn-gold{

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

color:#071426;

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

.btn-gold:hover{

transform:
translateY(-3px);

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

.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 STRIP */
/* ===================================== */

.trust-strip{

padding:22px 0;

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

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

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

backdrop-filter:blur(10px);
}

.trust-grid{

display:grid;

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

gap:14px;
}

.trust-item{

height:48px;

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

border-radius:14px;

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

letter-spacing:1px;

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

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

color:#d4af37;
}

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

.section-head{

max-width:860px;

margin:auto auto 52px;
}

.section-head.center{

text-align:center;
}

.section-head h2{

font-size:54px;

line-height:1;

font-weight:900;

letter-spacing:-3px;

margin-bottom:22px;
}

.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:16px;

line-height:1.9;

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

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

.grid{

display:grid;

gap:18px;
}

.four-grid{

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

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

.glass-card,
.solution-card,
.mission-card,
.pillar-card,
.position-card,
.model-card,
.donation-card,
.impact-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::before,
.solution-card::before,
.mission-card::before,
.pillar-card::before,
.position-card::before,
.model-card::before,
.donation-card::before,
.impact-card::before{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
145deg,
rgba(255,255,255,.06),
transparent 45%
);

opacity:.35;
}

.glass-card:hover,
.solution-card:hover,
.mission-card:hover,
.pillar-card:hover,
.position-card:hover,
.model-card:hover,
.donation-card:hover,
.impact-card:hover{

transform:
translateY(-6px);

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

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

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

.card-number{

font-size:11px;

font-weight:800;

letter-spacing:2px;

margin-bottom:14px;

color:#d4af37;
}

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

.glass-card h3,
.solution-card h3,
.mission-card h3,
.pillar-card h3,
.position-card h3,
.model-card h3,
.donation-card h3{

font-size:22px;

line-height:1.25;

margin-bottom:14px;
}

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

.glass-card p,
.solution-card p,
.mission-card p,
.pillar-card p,
.position-card p,
.model-card p,
.donation-card p{

font-size:14px;

line-height:1.85;

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

/* ===================================== */
/* SOLUTION */
/* ===================================== */

.solution-grid{

display:grid;

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

gap:18px;
}

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

.vision-box{

display:grid;

grid-template-columns:
1fr 1fr;

gap:22px;
}

.vision-main{

font-size:18px;

line-height:1.95;

font-weight:500;

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

.vision-right{

display:grid;

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

gap:18px;
}

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

.pillar-grid{

display:grid;

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

gap:18px;
}

.pillar-icon{

width:58px;
height:58px;

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

border-radius:18px;

margin-bottom:22px;

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

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

color:#071426;

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

/* ===================================== */
/* POSITION */
/* ===================================== */

.position-grid{

display:grid;

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

gap:18px;
}

/* ===================================== */
/* MODEL */
/* ===================================== */

.model-grid{

display:grid;

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

gap:18px;
}

.model-number{

font-size:46px;

font-weight:900;

margin-bottom:18px;

color:#d4af37;
}

/* ===================================== */
/* DONATION */
/* ===================================== */

.donation-grid{

display:grid;

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

gap:18px;
}

.small-btn{

margin-top:22px;

height:46px;

padding:0 22px;

border-radius:14px;
}

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

.impact-grid{

display:grid;

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

gap:18px;
}

.impact-card{

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

text-align:center;

min-height:145px;

font-size:18px;

font-weight:700;

line-height:1.5;
}

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

.cta-section{

position:relative;

overflow:hidden;

padding:
110px 0;

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

.cta-box{

max-width:860px;

margin:auto;

text-align:center;
}

.center-line{

margin:auto auto 22px;
}

.cta-title{

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

line-height:.92;

font-weight:900;

letter-spacing:-3px;
}

.cta-title span{

display:block;

margin-top:6px;

color:#d4af37;
}

.cta-subtitle{

font-size:38px;

margin-top:8px;

font-weight:800;
}

.cta-desc{

max-width:720px;

margin:
26px auto 0;

font-size:17px;

line-height:1.9;

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

.cta-btn{

margin-top:34px;
}

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

.footer-premium{

padding:
90px 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:112px;
height:112px;

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-ring:hover{

transform:scale(1.04);

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

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

.footer-logo{

width:86px;
height:86px;

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;
}

/* ===================================== */
/* FOOTER 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:19px;

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){

.four-grid,
.solution-grid,
.model-grid,
.impact-grid{

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

.vision-box{

grid-template-columns:1fr;
}

.vision-right{

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

.donation-grid,
.pillar-grid,
.position-grid{

grid-template-columns:1fr;
}

.trust-grid{

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

.footer-grid{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.container{

padding:0 20px;
}

.section{

padding:70px 0;
}

.hero-title{

font-size:42px;

letter-spacing:-2px;
}

.hero-sub{

font-size:14px;

line-height:1.85;
}

.section-head h2{

font-size:38px;

letter-spacing:-2px;
}

.section-head p{

font-size:14px;
}

.four-grid,
.solution-grid,
.model-grid,
.impact-grid,
.vision-right,
.trust-grid{

grid-template-columns:1fr;
}

.cta-title{

font-size:40px;
}

.cta-subtitle{

font-size:28px;
}

.footer-top{

flex-direction:column;

text-align:center;
}

.footer-brand h3{

font-size:24px;
}

.btn-gold,
.btn-outline{

width:100%;
}

}
/* ===================================== */
/* HERO FIX PREMIUM */
/* ===================================== */

.gdt-hero{

min-height:72vh;

padding:
120px 0 80px;
}

.hero-content{

max-width:1080px;

padding:0 20px;
}

/* GOLD LINE */

.hero-line{

width:70px;
height:3px;

margin:
0 auto 22px;
}

/* TOP TEXT */

.hero-top{

font-size:10px;

letter-spacing:5px;

margin-bottom:18px;
}

/* TITLE FIX */

.hero-title{

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

line-height:1.02;

letter-spacing:-3px;

margin-bottom:24px;

max-width:1000px;

margin-left:auto;
margin-right:auto;
}

/* GOLD TEXT */

.hero-title span{

display:block;

margin-top:4px;
}

/* SUBTITLE */

.hero-sub{

max-width:920px;

font-size:15px;

line-height:2;

margin-top:10px;

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

/* BUTTONS */

.hero-buttons{

margin-top:34px;

gap:14px;
}

.btn-gold,
.btn-outline{

height:48px;

padding:0 24px;

font-size:13px;

border-radius:14px;
}

/* MOBILE */

@media(max-width:768px){

.gdt-hero{

min-height:auto;

padding:
110px 0 70px;
}

.hero-title{

font-size:40px;

line-height:1.06;

letter-spacing:-2px;
}

.hero-sub{

font-size:14px;

line-height:1.9;
}

.hero-buttons{

flex-direction:column;
}

.btn-gold,
.btn-outline{

width:100%;
}

}