*{box-sizing:border-box}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
min-height:100vh;
background:
linear-gradient(135deg,rgba(0,190,210,.12) 0 10%,transparent 10% 25%,rgba(255,255,255,.04) 25% 35%,transparent 35%),
linear-gradient(135deg,#031b32,#062d4b);
color:white;
}
.shell{padding:40px;max-width:1200px;margin:auto}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 0 40px;
}
h1{font-size:42px;margin:0}
h1 span{color:#20d6e8}
header p{letter-spacing:3px;color:#b8d2e5}
.badge{border:1px solid #20d6e8;padding:14px 22px;border-radius:30px}
.card{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(12px);
border-radius:20px;
padding:25px;
box-shadow:0 20px 50px #0005;
}
.grid,.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metrics{margin:20px 0}
label{display:block;color:#9fc4d8;font-size:14px;margin-bottom:8px}
h2{font-size:36px;color:#20d6e8}
input,button{
width:100%;
padding:16px;
margin:10px 0;
border-radius:10px;
border:1px solid #8aaec2;
}
button{
background:#13c7db;
font-weight:bold;
cursor:pointer;
}
footer{text-align:center;margin-top:40px;color:#9fc4d8}
@media(max-width:800px){.grid,.metrics{grid-template-columns:1fr}header{display:block}}