*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 80% 0%,#403181,transparent 39%),radial-gradient(ellipse at 10% 28%,#12465d,transparent 37%),#070d1c;color:#f5f7ff;font:16px/1.65 system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:#8cf4f1}
.wrap{width:min(1160px,100%);margin:auto;padding:0 22px}
.nav{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
.nav nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.logo{font-weight:900;font-size:22px}
.logo b{color:#7df1e8}
.hero{padding-top:90px;padding-bottom:95px}
.eyebrow{color:#afe6ff;font-size:12px;letter-spacing:.12em;font-weight:800;border:1px solid #586b9d;border-radius:40px;padding:8px 14px;display:inline-block}
h1{font-size:clamp(42px,7vw,82px);line-height:1.09;letter-spacing:-.055em;margin:22px 0}
h2{font-size:clamp(28px,4vw,43px);line-height:1.16}
p{color:#b8c7dd}
.lead{font-size:20px;max-width:720px}
.grad{background:linear-gradient(96deg,#75eee1,#a99cff 63%,#f1b0da);color:transparent;background-clip:text}
.btn,button{font:inherit;padding:11px 19px;margin:5px 8px 5px 0;border:1px solid #506a86;border-radius:11px;color:white;background:#182a46;cursor:pointer;display:inline-block}
.primary{border:0;color:#101b31;font-weight:850;background:linear-gradient(100deg,#7ae5e4,#b6a4ff)}
.sec{padding-top:38px;padding-bottom:38px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:27px 0}
.card,.panel{padding:25px;border:1px solid #405277;background:linear-gradient(145deg,#192948,#11182c);border-radius:19px}
.card:hover{border-color:#78d7eb}
.card h3{margin:14px 0 5px}
.card p{font-size:14px}
.icon{font-size:29px}
.panel{margin:25px 0}
label{display:block;margin:12px 0 5px}
input,textarea{display:block;width:100%;padding:12px;background:#0a1425;color:#fff;border:1px solid #4d6380;border-radius:10px;font:inherit}
textarea{min-height:115px;resize:vertical}
pre{padding:14px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;background:#090f21}
#qrout img,#qrout canvas{background:white;padding:8px;max-width:100%;height:auto}
.banner{padding:30px;background:linear-gradient(100deg,#1a5262,#332d66);border:1px solid #6277a3;border-radius:18px}
footer{padding:36px 22px;margin-top:40px;border-top:1px solid #32425e;color:#afbfda}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ad9fff;outline-offset:3px}
@media(max-width:760px){
.grid{grid-template-columns:1fr}
.hero{padding-top:55px;padding-bottom:55px}
.lead{font-size:17px}
}