:root{
  --bg:#0e0a16; --panel:#171022; --ink:#efe8fb; --mut:#a99ac4;
  --acc:#b06cff; --acc2:#ff4d9d; --line:rgba(176,108,255,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 system-ui,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:
    radial-gradient(900px 500px at 80% -10%,#2a1040 0,transparent 60%),
    var(--bg);min-height:100vh}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

header.site{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  background:rgba(14,10,22,.82);backdrop-filter:blur(10px)}
.brand{font-weight:800;font-size:20px;color:var(--ink);letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap}
nav a{margin-left:18px;color:var(--mut);font-weight:500}
nav a:hover{color:var(--ink);text-decoration:none}

main{max-width:840px;margin:0 auto;padding:0 20px 72px}
.hero{padding:72px 0 28px;text-align:center}
.hero h1{font-size:clamp(30px,6vw,44px);line-height:1.12;margin:0 0 22px;
  font-weight:800;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:inline-block;padding:13px 26px;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  color:#fff;font-weight:700;box-shadow:0 8px 30px rgba(176,108,255,.35)}
.cta:hover{text-decoration:none;filter:brightness(1.07)}

.content{font-size:17px;color:#e3d8f6}
.content h2{margin:40px 0 10px;font-size:25px;color:var(--ink)}
.content p{margin:0 0 16px}
.content ul{padding-left:22px;margin:0 0 16px}
.content li{margin:6px 0}

footer{border-top:1px solid var(--line);padding:32px 24px;text-align:center;
  color:var(--mut);font-size:14px}
footer p{margin:6px 0}
footer a{color:var(--mut)}

@media(max-width:600px){
  header.site{padding:12px 16px}
  .brand{font-size:18px}
  nav a{margin-left:14px;font-size:14px}
  main{padding:0 16px 56px}
  .hero{padding:48px 0 20px}
}
