:root{
  --bg:#f6fbff;
  --paper:#ffffff;
  --ink:#101a2c;
  --muted:#667892;
  --teal-1:#17B4AD;
  --teal-2:#2480B5;
  --teal-3:#0B6E99;
  --accent:#58D0D4;
  --ring:rgba(36,128,181,.25);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:linear-gradient(180deg,#fafdff 0%, #eef8ff 100%);}
img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
.header{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid #e7eef8}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; text-decoration:none}
.brand span{letter-spacing:.4px}
.nav__toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer}
.nav__toggle span{width:26px; height:2px; background:var(--ink); border-radius:2px}
.nav__list{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.nav__list a{color:var(--ink); opacity:.8; text-decoration:none; font-weight:700}
.nav__list a:hover{opacity:1}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 20px; border-radius:999px; font-weight:800; letter-spacing:.2px; text-decoration:none}
.btn--primary{background:linear-gradient(90deg, var(--teal-2), var(--teal-1)); color:#fff; box-shadow:0 10px 26px rgba(36,128,181,.35)}
.btn--ghost{border:1px solid #d9e7f5; color:var(--teal-3); background:#fff}
.btn--sm{padding:10px 14px; font-size:14px}

/* Hero */
.hero{position:relative; min-height:84vh; display:grid; place-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(105%) saturate(110%) brightness(1.05)}
.hero__inner{position:relative; padding:120px 0 80px; text-align:center}
.eyebrow{font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--teal-2); font-size:12px}
.hero__title{font-size:clamp(34px, 5.5vw, 72px); margin:.2em 0 .3em; line-height:1.05; font-weight:900}
.hero__lead{color:#3e546e; max-width:900px; margin:0 auto 28px; font-size:clamp(16px,1.8vw,20px)}
.hero__cta{display:flex; gap:14px; justify-content:center}
.hero__stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:36px}
.stat{background:#ffffffc4; border:1px solid #e6eef7; border-radius:var(--radius); padding:16px 18px; box-shadow:0 8px 24px rgba(10,30,60,.05)}
.stat__num{font-size:28px; font-weight:900; color:var(--teal-3)}
.stat__unit{font-weight:800; margin-left:4px; color:var(--teal-2)}
.stat__label{font-size:12px; color:var(--muted)}

/* Sections */
.section{padding:84px 0}
.section--alt{background:linear-gradient(180deg, #ffffff90, #ffffff00 30%)}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:18px}

.card{border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid #e5eef8; box-shadow:0 10px 40px rgba(10,30,60,.06)}
.card img{width:100%; height:260px; object-fit:cover}
.card__body{padding:18px}
.card__body h3{margin:0 0 8px}
.card__body p{margin:0 0 10px; color:#3a526d}
.glass{background:#ffffffb8; border:1px solid #e7eef8; box-shadow:0 20px 60px rgba(10,30,60,.08)}

.list-check, .list-dot{padding:0; margin:14px 0 0; list-style:none; display:grid; gap:10px}
.list-check li::before{content:"✓"; margin-right:10px; color:var(--teal-2); font-weight:900}
.list-dot li::before{content:"•"; margin-right:10px; color:var(--teal-2); font-size:22px; line-height:0}

/* Roadmap */
.roadmap{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:10px}
.rm{position:relative; padding:18px; border-radius:var(--radius); background:#fff; border:1px solid #e5eef8; box-shadow:0 10px 30px rgba(10,30,60,.05)}
.rm__year{font-weight:900; color:var(--teal-2); margin-bottom:6px}

/* CTA form */
.form{display:flex; gap:10px; flex-wrap:wrap}
.form input{flex:1 1 260px; padding:14px 16px; border-radius:999px; border:1px solid #d8e7f5; background:#fff; color:var(--ink); outline:none}
.form input:focus{box-shadow:0 0 0 4px var(--ring)}

/* Footer */
.footer{border-top:1px solid #e6eef8; background:#fbfeff}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:24px 0; flex-wrap:wrap}
.foot__nav a{color:#34506e; margin-right:16px; text-decoration:none}
.copy{color:#58708e}

/* Animations on scroll */
.a-fade, .a-fade-up, .a-rise{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.a-fade-up{transform:translateY(24px)}
.a-delay-1{transition-delay:.07s}
.a-delay-2{transition-delay:.14s}
.a-delay-3{transition-delay:.21s}
.in-view{opacity:1 !important; transform:none !important}

/* Responsive */
@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr; gap:20px}
  .hero__inner{padding-top:92px}
  .hero__stats{grid-template-columns:1fr 1fr; gap:12px}
}
@media (max-width: 720px){
  .nav__toggle{display:flex}
  .nav__list{position:fixed; inset:60px 0 auto 0; background:#fffffff2; backdrop-filter:blur(10px);
             flex-direction:column; padding:16px; gap:16px; transform:translateY(-130%); transition:transform .35s ease}
  .nav.open .nav__list{transform:translateY(0)}
  .hero__cta{flex-direction:column}
  .hero__stats{grid-template-columns:1fr}
}