:root{
  --bg:#0A0A0D; --surface:#17171A; --line:rgba(255,255,255,.10);
  --text:#F2F3F4; --dim:rgba(255,255,255,.62); --glow:#6BC7A8; --accent:#59C7D9;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(520px 520px at 18% -8%, rgba(107,199,168,.16), transparent 70%),
    radial-gradient(420px 420px at 88% 22%, rgba(89,199,217,.10), transparent 70%);
}
.wrap{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:56px 24px 96px}
header{display:flex; align-items:center; gap:16px; margin-bottom:48px}
.mark{
  width:56px; height:56px; border-radius:14px; flex:none;
  background:radial-gradient(circle at 50% 45%, #A8F0D2, #6BC7A8 42%, #1B4038 100%);
  box-shadow:0 0 40px rgba(107,199,168,.35);
}
h1{font-size:28px; margin:0; letter-spacing:-.01em}
header p{margin:2px 0 0; color:var(--dim); font-size:15px}
h2{font-size:21px; margin:44px 0 12px; letter-spacing:-.01em}
h3{font-size:16px; margin:26px 0 6px; color:var(--glow)}
p,li{color:var(--dim)}
strong{color:var(--text); font-weight:600}
a{color:var(--accent)}
ul{padding-left:20px}
li{margin:6px 0}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; margin:20px 0;
}
.card p:last-child, .card ul:last-child{margin-bottom:0}
.lead{color:var(--text); font-size:17px}
nav{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap}
nav a{
  text-decoration:none; color:var(--text); font-size:14px;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
}
nav a[aria-current]{background:rgba(107,199,168,.16); border-color:rgba(107,199,168,.4)}
footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--dim); font-size:14px}
@media (max-width:520px){ .wrap{padding:36px 18px 72px} h1{font-size:24px} }