:root{
  --bg:#0A0B0E; --bg2:#121418; --card:#181A1F; --tp:#ECEEF1; --ts:#9BA1AD; --tt:#6A7079;
  --hair:rgba(255,255,255,.08); --ink1:#7b6bf7; --ink2:#6aa8f0; --accent:#8f8bff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--tp);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 50% -10%, rgba(75,64,230,.18), transparent 60%);
  background-repeat:no-repeat;
}
.wrap{max-width:720px; margin:0 auto; padding:0 24px}
header{padding:48px 0 28px; text-align:center}
.brand{display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--tp)}
.brand svg{width:44px; height:44px; display:block}
.brand .name{font-size:26px; font-weight:800; letter-spacing:-.5px}
nav{display:flex; gap:26px; justify-content:center; margin-top:22px; flex-wrap:wrap}
nav a{color:var(--ts); text-decoration:none; font-weight:600; font-size:16px}
nav a:hover,nav a.active{color:var(--accent)}
main{padding:24px 0 60px}
h1{font-size:40px; font-weight:800; letter-spacing:-1px; margin:18px 0 8px; text-wrap:balance}
.lede{font-size:19px; color:var(--ts); margin-bottom:8px}
h2{font-size:22px; font-weight:700; margin:34px 0 10px; letter-spacing:-.3px}
p{margin:12px 0; color:#d3d7de}
ul{margin:12px 0 12px 22px}
li{margin:8px 0; color:#d3d7de}
strong{color:var(--tp)}
a{color:var(--accent)}
.updated{color:var(--tt); font-size:14px; margin-bottom:6px}
.callout{background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:20px 22px; margin:22px 0}
.cta{display:inline-block; margin-top:14px; background:linear-gradient(135deg,var(--ink1),var(--ink2));
     color:#fff; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:999px}
.grid{display:grid; gap:16px; margin:20px 0}
.faq{background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:20px 22px}
.faq h3{font-size:18px; font-weight:700; margin-bottom:6px}
.faq p{margin:0; color:var(--ts)}
.mail{font-weight:700}
footer{border-top:1px solid var(--hair); padding:28px 0 48px; text-align:center; color:var(--tt); font-size:14px}
footer a{color:var(--ts); text-decoration:none; margin:0 10px}
@media (max-width:520px){ h1{font-size:32px} header{padding:36px 0 20px} }