*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#071a45}
body{background:#eef7ff}
.page{position:relative;min-height:100vh;overflow:hidden;background:
linear-gradient(135deg,#ffffff 0%,#f9fcff 45%,#e8f4ff 100%);padding:38px 4vw 28px}

.wave{position:absolute;border-radius:50%;pointer-events:none;opacity:.55}
.wave-1{width:95vw;height:34vw;right:-30vw;top:31vw;border:70px solid #d8ecff;transform:rotate(20deg)}
.wave-2{width:90vw;height:25vw;left:-42vw;bottom:-8vw;border:65px solid #d3eaff;transform:rotate(10deg)}
.wave-3{width:75vw;height:20vw;right:-28vw;bottom:-3vw;border:38px solid #e0f1ff;transform:rotate(-14deg)}

.top{display:flex;justify-content:space-between;position:relative;z-index:2}
.top-left,.services{font-size:15px;letter-spacing:4px;line-height:1.65}
.top-left{margin-left:1vw}.services{text-align:left;margin-right:1vw;color:#6b88b0}
.top-left span,.services span{display:block}
.top i,.services i,.left-copy i,.keywords i{display:block;width:235px;height:5px;margin-top:10px;background:linear-gradient(90deg,#168cff 0 25%,#ffc400 25% 50%,#883cff 50% 75%,#19bd78 75%)}
.services i{width:60px;background:#168cff}

.left-copy{position:absolute;left:4vw;top:155px;z-index:2}
.left-copy h2{font-size:42px;line-height:1.12;margin:0;color:#1555a5;letter-spacing:1px}
.left-copy i{width:58px;background:#168cff;margin:20px 0}
.left-copy p{font-size:15px;letter-spacing:4px;line-height:1.55;color:#7392bb}

.right-copy{position:absolute;right:4vw;top:255px;z-index:2;font-family:cursive;font-size:42px;line-height:1.1;color:#218af0;transform:rotate(-8deg)}

.hero{position:relative;z-index:3;text-align:center;max-width:900px;margin:0 auto;padding-top:5px}
.logo{display:block;width:145px;height:145px;object-fit:contain;margin:0 auto 5px}
.hero h1{font-size:88px;line-height:.95;margin:0;font-weight:900;letter-spacing:-4px}
.hero h1 span{color:#071a45}.hero h1 b,.coming b{color:#138af1}
.subbrand{font-size:24px;letter-spacing:9px;margin-top:13px}
.coming{font-size:72px;font-weight:900;letter-spacing:-3px;margin-top:20px;color:#071a45}
.accent{width:340px;height:6px;margin:8px auto 12px;display:flex}
.accent span{flex:1}.accent span:nth-child(1){background:#168cff}.accent span:nth-child(2){background:#ffc400}.accent span:nth-child(3){background:#883cff}.accent span:nth-child(4){background:#19bd78}
.tagline{font-size:21px;letter-spacing:7px;font-weight:700}
.intro{font-size:20px;line-height:1.45;margin:20px 0 0}

.tech-visual{position:absolute;left:0;bottom:45px;width:33vw;height:350px;z-index:2}
.laptop{position:absolute;left:2vw;bottom:0;width:410px;transform:perspective(700px) rotateY(8deg) rotateX(2deg)}
.screen{height:245px;border:10px solid #103a70;border-bottom-width:18px;border-radius:16px 16px 8px 8px;background:#071a45;box-shadow:0 18px 35px #8bb8e8;padding:18px;color:#75b9ff}
.dots{font-size:9px;margin-bottom:15px;color:#8ed1ff}
pre{font:12px/1.65 monospace;color:#8fd0ff;margin:0}
.base{height:28px;background:linear-gradient(#cfe8ff,#7da9d6);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 12px 20px #8bb8e8}
.floating{position:absolute;width:90px;height:75px;border-radius:14px;background:#dff0ffcc;border:1px solid #fff;box-shadow:0 8px 20px #9dc8ef;display:grid;place-items:center;font-size:38px;color:#168cff}
.cloud{left:145px;top:10px}.gear{left:250px;top:15px;color:#873cf5}.code{left:270px;top:115px;color:#168cff;font:bold 24px monospace}.bulb{left:205px;top:205px;font-size:30px}

.features{position:relative;z-index:3;display:flex;justify-content:center;gap:0;margin:30px auto 0;max-width:850px}
.features article{width:210px;text-align:center;border-right:1px solid #b9cbe0}
.features article:last-child{border:0}
.icon{font-size:48px;height:58px}.blue{color:#168cff}.purple{color:#873cf5}.green{color:#19bd78}.yellow{color:#ffc000}
.features strong{font-size:15px;letter-spacing:1px;line-height:1.35}

footer{position:relative;z-index:3;text-align:center;margin-top:32px}
.social-title{font-size:14px;letter-spacing:2px}
.social{display:flex;justify-content:center;gap:16px;margin:10px 0 15px}
.social a{width:44px;height:44px;border-radius:50%;background:#071a45;color:#fff;text-decoration:none;display:grid;place-items:center;font-weight:bold;font-size:20px}
.copyright{font-size:14px}
.keywords{position:absolute;right:5vw;bottom:35px;z-index:3;font-size:15px;line-height:1.55;letter-spacing:4px;color:#7191ba}
.keywords i{width:58px;height:4px;background:#168cff;margin-top:10px}

@media(max-width:1050px){
 .left-copy,.right-copy,.tech-visual,.keywords{display:none}
 .hero h1{font-size:68px}.coming{font-size:58px}.features{margin-top:25px}
}
@media(max-width:700px){
 .page{padding:22px 18px}
 .top-left,.services{font-size:10px;letter-spacing:2px}
 .top i{width:150px}.services{display:none}
 .logo{width:115px;height:115px}
 .hero h1{font-size:48px;letter-spacing:-2px}.subbrand{font-size:13px;letter-spacing:4px}
 .coming{font-size:42px;letter-spacing:-1px}.accent{width:220px}
 .tagline{font-size:13px;letter-spacing:3px}.intro{font-size:15px}
 .features{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:35px}
 .features article{width:auto;border-right:0}
 footer{margin-top:28px}
}