:root{
--purple:#5425f5;
--blue:#6ea8ff;
--navy:#080c35;
--text:#101638;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",Arial,sans-serif;
}

*{box-sizing:border-box}

body{
margin:0;
color:var(--text);
background:#fff;
}

.header{
height:88px;
padding:0 7%;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #eee;
}

.logo{
font-size:30px;
font-weight:800;
letter-spacing:-1px;
}

nav span{
margin:0 18px;
color:#555;
}

button{
background:var(--purple);
color:white;
border:0;
border-radius:18px;
padding:15px 28px;
font-weight:700;
}


.hero{
min-height:900px;
padding:100px 7%;
display:grid;
grid-template-columns:1fr 420px;
gap:90px;
align-items:center;
}


.eyebrow{
color:var(--purple);
font-weight:800;
letter-spacing:2px;
}

h1{
font-size:120px;
line-height:.85;
letter-spacing:-6px;
margin:30px 0;
}

h1 span,h2 span{
color:var(--purple);
}

.hero-copy p{
font-size:28px;
line-height:1.5;
}

.programs span{
display:inline-block;
padding:10px 14px;
border:1px solid #ddd;
border-radius:14px;
margin:5px;
}


.engine{
background:#faf9ff;
padding:40px;
border-radius:42px;
box-shadow:0 35px 90px rgba(0,0,0,.08);
}


.engine-title{
font-weight:800;
margin-bottom:25px;
}


.node{
background:white;
padding:18px;
border-radius:22px;
text-align:center;
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.5s;
}

.node small{
display:block;
font-weight:400;
margin-top:6px;
}

.node.active,.node.kavo{
border:2px solid var(--purple);
}


.line{
height:28px;
width:2px;
margin:auto;
background:linear-gradient(var(--purple),var(--blue));
}


.evidence{
padding:0 7% 100px;
}


.card{
max-width:560px;
padding:40px;
border-radius:40px;
box-shadow:0 30px 90px rgba(0,0,0,.1);
}


.metric,.next{
margin-top:16px;
padding:18px;
background:#f2eeff;
border-radius:18px;
}


.metric strong{
display:block;
margin-top:8px;
}


.thinking{
padding:100px 7%;
background:#fafaff;
text-align:center;
}


.flow{
display:flex;
gap:20px;
justify-content:center;
margin-top:40px;
}

.flow div{
padding:25px 45px;
background:white;
border-radius:25px;
}


footer{
padding:100px 7%;
background:var(--navy);
color:white;
}


@media(max-width:900px){
.hero{
grid-template-columns:1fr;
}

h1{
font-size:70px;
}

.flow{
flex-direction:column;
}

nav{
display:none;
}
}