@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#0b1e3c;
  --navy-deep:#071428;
  --blue:#2e7cf6;
  --white:#f7f9fc;
  --ink:#cfd9ec;
}

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

html,body{
  background:var(--navy-deep);
  color:var(--white);
  font-family:'Inter',sans-serif;
  scroll-behavior:smooth;
}

body{
  scroll-snap-type:y mandatory;
  overflow-y:scroll;
  height:100vh;
}

.slide{
  min-height:100vh;
  width:100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vh 8vw;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.slide .num{
  position:absolute;
  top:5vh;
  right:8vw;
  font-family:'Archivo Black',sans-serif;
  color:rgba(255,255,255,.18);
  font-size:3rem;
}

.tag{
  display:inline-block;
  color:var(--blue);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:1.2rem;
}

h1,h2{
  font-family:'Archivo Black',sans-serif;
  line-height:1.05;
  text-transform:uppercase;
}

h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,4.4vw,3rem); max-width:18ch}

.accent{color:var(--blue)}

.rule{
  width:72px;
  height:4px;
  background:var(--blue);
  margin:1.4rem 0;
}

p.lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:var(--ink);
  max-width:46ch;
  font-weight:500;
}

.cover{
  background:
    radial-gradient(circle at 85% 15%, rgba(46,124,246,.25), transparent 55%),
    var(--navy-deep);
}

.cover .brand{
  font-family:'Archivo Black',sans-serif;
  font-size:1.1rem;
  letter-spacing:.3em;
  color:var(--white);
  margin-bottom:2.4rem;
}

.cover h1{margin-bottom:.4rem}

.grid4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;
  margin-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.14);
}

.grid4 .col{
  padding:1.8rem 1.6rem;
  border-right:1px solid rgba(255,255,255,.14);
}

.grid4 .col:last-child{border-right:none}

.grid4 .icon{width:34px;height:34px;margin-bottom:1rem;color:var(--blue)}

.grid4 h3{
  font-family:'Inter',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:.95rem;
  letter-spacing:.04em;
  margin-bottom:.5rem;
}

.grid4 p{
  color:var(--ink);
  font-size:.92rem;
  line-height:1.4;
}

.grid4 ul{list-style:none;color:var(--ink);font-size:.92rem;line-height:1.6}
.grid4 ul li::before{content:"— ";color:var(--blue)}

.stat-row{display:flex;gap:4rem;margin-top:2.5rem;flex-wrap:wrap}
.stat{}
.stat .num-big{font-family:'Archivo Black',sans-serif;font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--blue)}
.stat .label{color:var(--ink);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-top:.3rem}

.steps{display:flex;flex-wrap:wrap;gap:0;margin-top:2.5rem;counter-reset:step}
.step{
  flex:1 1 150px;
  padding:1.4rem 1.2rem 1.4rem 0;
  position:relative;
}
.step .n{
  font-family:'Archivo Black',sans-serif;
  color:var(--blue);
  font-size:1.4rem;
  display:block;
  margin-bottom:.4rem;
}
.step p{color:var(--ink);font-size:.88rem;line-height:1.4}

.pillars{display:flex;gap:2.5rem;margin-top:2.2rem;flex-wrap:wrap}
.pillar{max-width:260px}
.pillar h3{font-size:1rem;text-transform:uppercase;font-weight:800;margin-bottom:.4rem;color:var(--white)}
.pillar p{color:var(--ink);font-size:.9rem}

.box{
  border:1px solid var(--blue);
  border-radius:10px;
  padding:1.6rem 1.8rem;
  margin-top:2.4rem;
  display:inline-block;
}

.box .wa{color:var(--blue);font-weight:800}

.cta{
  background:var(--navy);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.note{
  margin-top:3rem;
  font-size:.78rem;
  color:rgba(255,255,255,.35);
}

@media(max-width:640px){
  .slide{padding:7vh 6vw}
  .grid4 .col{border-right:none;border-bottom:1px solid rgba(255,255,255,.14)}
  .stat-row{gap:2rem}
}