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


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


:root{

--bg:#F8FAFC;

--white:#FFFFFF;

--deep:#132633;

--text:#1B2B38;

--muted:#6B7E8C;

--trust:#496B82;

--trust-dark:#294657;

--soft:#EEF4F8;

--border:#DCE5EB;

}



html{

scroll-behavior:smooth;

}



body{

font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}



a,
button{

-webkit-tap-highlight-color:transparent;

}



a:focus,
button:focus{

outline:none;

}





/* =====================================
SECTION 01
HEADER + MENU
===================================== */


.header{

position:fixed;

top:0;

left:0;

width:100%;

height:78px;

padding:0 24px;

display:flex;

align-items:center;

justify-content:space-between;

z-index:100;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(19,38,51,.06);

}



.logo{

font-size:23px;

font-weight:700;

letter-spacing:-.7px;

color:var(--deep);

}



.menu-button{

width:44px;

height:44px;

border:0;

border-radius:50%;

background:var(--trust);

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

gap:5px;

}



.menu-button span{

width:18px;

height:2px;

background:white;

}



.menu-overlay{

position:fixed;

inset:0;

background:

linear-gradient(
145deg,
#132633,
#496B82
);

z-index:90;

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.4s ease;

}



.menu-overlay.active{

opacity:1;

visibility:visible;

}



.menu-overlay a{

display:block;

color:white;

text-decoration:none;

font-size:40px;

font-weight:600;

letter-spacing:-1px;

margin:24px 0;

}





/* =====================================
SECTION 02
HERO
===================================== */


.hero{

min-height:100svh;

display:flex;

align-items:center;

padding:120px 24px 70px;

background:

radial-gradient(
circle at top right,
rgba(73,107,130,.16),
transparent 45%
),

linear-gradient(
180deg,
#FFFFFF,
#EEF4F8
);

}



.hero-content{

max-width:780px;

}



.eyebrow{

font-size:12px;

font-weight:600;

letter-spacing:3px;

color:var(--trust);

margin-bottom:28px;

}



.hero h1{

font-size:

clamp(40px,9vw,72px);

line-height:1.12;

letter-spacing:-2px;

font-weight:700;

color:var(--deep);

}



.hero p{

margin-top:30px;

max-width:620px;

font-size:20px;

line-height:1.75;

color:var(--muted);

}



.button{

display:inline-flex;

margin-top:38px;

padding:16px 30px;

border-radius:30px;

background:var(--trust);

color:white;

text-decoration:none;

font-weight:600;

box-shadow:

0 15px 35px rgba(73,107,130,.22);

transition:.25s ease;

}



.button:active{

transform:scale(.97);

}





/* =====================================
SECTION 03-09
GENERAL
===================================== */


.section{

padding:100px 24px;

}



.section h2{

max-width:900px;

font-size:

clamp(34px,7vw,64px);

line-height:1.15;

letter-spacing:-1.5px;

font-weight:650;

color:var(--deep);

}



.section p{

max-width:760px;

margin-top:28px;

font-size:19px;

line-height:1.75;

color:var(--muted);

}





/* =====================================
SECTION 04
OUR BELIEF
===================================== */


.dark{

background:

linear-gradient(
135deg,
#132633,
#294657
);

}



.dark h2{

color:white;

}



.dark p{

color:#CBD6DD;

}





/* =====================================
SECTION 05
FRAMEWORK
===================================== */


.framework{

display:grid;

gap:20px;

margin-top:55px;

}



.framework-item{

background:white;

padding:35px;

border-radius:30px;

border:1px solid var(--border);

box-shadow:

0 20px 50px rgba(19,38,51,.05);

}



.framework-item span{

font-size:13px;

color:var(--trust);

}



.framework-item h3{

margin-top:18px;

font-size:34px;

letter-spacing:-1px;

color:var(--deep);

}



.framework-item p{

font-size:17px;

}





/* =====================================
SECTION 07
NETWORK
===================================== */


.network-card{

margin-top:45px;

padding:45px 35px;

border-radius:35px;

background:

linear-gradient(
145deg,
#FFFFFF,
#EAF1F5
);

border:1px solid var(--border);

}



.network-card h3{

font-size:80px;

letter-spacing:-5px;

color:var(--deep);

}





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


footer{

padding:50px 24px;

text-align:center;

background:white;

color:var(--muted);

}



footer h3{

color:var(--deep);

}





/* =====================================
ANIMATION
===================================== */


.animate{

opacity:0;

transform:translateY(25px);

transition:.8s ease;

}



.visible{

opacity:1;

transform:none;

}





/* =====================================
DESKTOP
===================================== */


@media(min-width:900px){


.hero,
.section{

padding-left:10%;

padding-right:10%;

}


.framework{

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

}


}