:root { --bg:#0D0819; --surface:#191230; --line:#2E2452; --ink:#F4F0FF; --soft:#A79DC6; --violet:#6C2BFF; --coral:#FF4D6D; --sun:#FFC93C; --accent:#B69CFF; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { --bg:#FBF8FF; --surface:#FFFFFF; --line:#E4DCF5; --ink:#1E1238; --soft:#6A6285; --accent:#5A22E0; color-scheme: light; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 20px 20px 60px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; max-width:1040px; margin:0 auto; }
.mark { font-weight:900; font-size:30px; letter-spacing:-0.05em; text-decoration:none;
  background:linear-gradient(90deg,var(--violet),var(--coral) 60%,var(--sun)); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav a { color: var(--soft); text-decoration:none; margin-left:18px; font-size:15px; }
nav a:hover { color: var(--ink); }
.cta { display:inline-block; padding:14px 26px; border-radius:16px; font-weight:800; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--violet),var(--coral)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.muted { color: var(--soft); }
h1 { font-size: clamp(34px, 6vw, 58px); line-height:1.05; letter-spacing:-0.035em; margin: 0 0 14px; }
h2 { letter-spacing:-0.02em; }
footer { border-top:1px solid var(--line); margin-top:40px; padding:24px 20px; text-align:center; color:var(--soft); font-size:14px; }
footer a { color: var(--soft); margin: 0 10px; }
.ring { border-radius:50%; padding:3px; background:conic-gradient(var(--violet),var(--coral),var(--sun),var(--violet)); flex:none; }
.ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--surface); border:2px solid var(--surface); display:block; }