
:root{
  --navy:#061936;
  --navy2:#0b2850;
  --blue:#1677d2;
  --cyan:#5eb6ff;
  --white:#fff;
  --off:#f5f8fc;
  --ink:#0b1d35;
  --muted:#65758a;
  --line:#dbe4ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
h1,h2,h3{font-family:"Space Grotesk",Inter,Arial,sans-serif;line-height:1.08}
a{text-decoration:none;color:inherit}
.nav{position:fixed;z-index:1000;top:0;width:100%;height:76px;background:rgba(6,25,54,.94);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.5px}
.brand-mark{width:35px;height:35px;border:2px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--cyan)}
.brand small{display:block;font-size:8px;letter-spacing:1.4px;color:#9eb3cc;font-weight:500}
.navlinks{display:flex;gap:25px;align-items:center}
.navlinks a{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#d7e2ef}
.navlinks a:hover{color:var(--cyan)}
.navcta{border:1px solid #7e95ae;border-radius:30px;padding:9px 17px;font-size:9px;text-transform:uppercase;letter-spacing:1px}
.hero{min-height:100vh;background:radial-gradient(circle at 78% 48%,#173f6d 0,#0b2850 32%,#061936 72%);color:#fff;padding:150px 5% 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px}
.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:800}
.hero .eyebrow{color:var(--cyan)}
.hero h1{font-size:clamp(48px,6vw,82px);letter-spacing:-3px;margin:20px 0}
.hero h1 span{color:var(--cyan)}
.hero p{max-width:620px;color:#b8c9dc;font-size:16px}
.buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{padding:13px 21px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:800}
.btn.primary{background:var(--blue);color:#fff}
.btn.outline{border:1px solid #7890aa;color:#fff}
.hero-img{position:relative;min-height:470px;display:grid;place-items:center}
.hero-img:before{content:"";position:absolute;width:470px;height:470px;border-radius:50%;background:rgba(94,182,255,.14);filter:blur(35px)}
.hero-img img{position:relative;width:min(100%,650px);max-height:520px;object-fit:contain;mix-blend-mode:screen;border-radius:18px}
.section{padding:110px 5%}
.container{max-width:1250px;margin:auto}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:60px}
.section-head h2{font-size:clamp(40px,5vw,64px);letter-spacing:-2px;margin-top:18px}
.section-head p{color:var(--muted);font-size:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{padding:35px 25px;border-right:1px solid var(--line)}
.card:last-child{border:0}
.num{font-size:10px;color:#91a0b0;font-weight:800}
.icon{width:48px;height:48px;background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center;margin:22px 0;font-size:18px}
.card h3{font-size:18px;margin-bottom:10px}
.card p{font-size:12px;color:var(--muted)}
.question{max-width:1000px;margin:60px auto 0;border-left:3px solid var(--blue);padding:5px 28px}
.question p{font:600 24px "Space Grotesk";margin-top:8px}
.dark{background:var(--navy);color:#fff}
.dark .section-head p{color:#9cb0c8}
.arch{border:1px solid rgba(255,255,255,.14);padding:30px}
.flow{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.node{min-width:115px;padding:17px 10px;text-align:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035)}
.node b{display:block;font-size:9px}
.node small{font-size:7px;color:#8fa4bc}
.arrow{color:var(--cyan);font-size:20px}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:65px;align-items:center;margin-top:70px}
.two img{width:100%;background:#eef3f7;padding:25px;display:block}
.two h3{font-size:38px;margin:18px 0}
.two p{color:#9cb0c8;font-size:13px}
.list{list-style:none;margin-top:25px}
.list li{font-size:12px;color:#c9d6e4;margin:10px 0}
.list li:before{content:"✓";color:var(--cyan);font-weight:800;margin-right:9px}
.off{background:var(--off)}
.path{background:#fff;border:1px solid var(--line);padding:30px}
.path-title{font-size:9px;letter-spacing:1.5px;color:#55708c;font-weight:800;margin-bottom:25px}
.enggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:60px}
.eng{background:#fff;padding:32px;min-height:215px}
.eng h3{font-size:20px;margin:20px 0 10px}
.eng p{font-size:12px;color:var(--muted)}
.tag{display:inline-block;margin-top:18px;border:1px solid #cad7e4;padding:4px 8px;font-size:7px;letter-spacing:1px;color:#55708c}
.demo{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.demo .card{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.13);min-height:240px}
.demo .card h3{color:#fff}
.demo .card p{color:#9bb0c7}
.circle{width:29px;height:29px;background:var(--cyan);color:var(--navy);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;max-width:1050px;margin:90px auto}
.road .card{border:1px solid var(--line);border-right:1px solid var(--line);padding:40px 28px;position:relative}
.road .card.active{border-color:#68aee9;box-shadow:0 20px 50px rgba(6,25,54,.1)}
.road .badge{position:absolute;top:-20px;left:25px;background:var(--navy);color:#fff;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:10px;font-weight:800}
.road .active .badge{background:var(--blue)}
.center{text-align:center;max-width:950px;margin:auto}
.center h2{font-size:clamp(34px,4vw,54px);margin:20px 0}
.center p{color:var(--blue);font-weight:800}
footer{background:#020d1e;color:#fff;padding:50px 5%;display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}
footer p{color:#8195aa;font-size:11px;max-width:370px;margin-top:15px}
footer a{display:block;color:#aebfd1;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin:8px 0}
.disclaimer{font-size:8px;letter-spacing:1px;color:#60758e;text-align:right}
.page-hero{background:var(--navy);color:#fff;padding:150px 5% 80px}
.page-hero h1{font-size:clamp(48px,6vw,78px);margin:20px 0}
.page-hero p{max-width:720px;color:#aebfd1}
@media(max-width:950px){
 .navlinks{display:none}.hero,.two,.section-head{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}.enggrid{grid-template-columns:1fr 1fr}.demo{grid-template-columns:1fr 1fr}.road{grid-template-columns:1fr}
}
@media(max-width:600px){
 .hero{padding:125px 22px 60px}.section{padding:80px 22px}.grid4,.enggrid,.demo{grid-template-columns:1fr}.flow,.path .flow{flex-direction:column}.arrow{transform:rotate(90deg)}footer{grid-template-columns:1fr}.disclaimer{text-align:left}
}
