:root{
  --bg:#07060B; --elev:#100D18; --surface:#191322; --sunken:#221A2F;
  --text:#F5F2FA; --body:#D6D0E0; --muted:#A49CB4; --faint:#6A6379;
  --border:#241E33; --soft:#1B1626;
  --accent:#A855F7; --accent2:#2DE2E6; --glow:rgba(168,85,247,.45);
  --maxw:820px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---- nav ---- */
nav{
  position:sticky; top:0; z-index:20;
  background:rgba(7,6,11,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--soft);
}
nav .wrap{display:flex; align-items:center; gap:18px; height:60px}
nav img{height:22px; width:auto; display:block}
nav .links{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap}
nav .links a{color:var(--muted); font-size:14px}
nav .links a:hover,nav .links a[aria-current="page"]{color:var(--text); text-decoration:none}

/* ---- hero ---- */
header{padding:72px 0 56px; text-align:center; position:relative; overflow:hidden}
header::before{
  content:""; position:absolute; inset:-40% 20% auto; height:420px;
  background:radial-gradient(closest-side,var(--glow),transparent 70%);
  filter:blur(20px); pointer-events:none;
}
header .icon{
  width:96px; height:96px; border-radius:22px; display:block; margin:0 auto 24px;
  border:1px solid var(--border); box-shadow:0 0 60px var(--glow); position:relative;
}
h1{
  font-size:clamp(34px,7vw,52px); line-height:1.1; margin:0 0 16px;
  color:var(--text); letter-spacing:-.02em; position:relative;
}
h1 span{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header p{max-width:520px; margin:0 auto 28px; font-size:17px; color:var(--muted); position:relative}
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#7B2FC4);
  color:#fff; font-weight:600; font-size:16px;
  box-shadow:0 8px 32px var(--glow); position:relative;
}
.btn:hover{text-decoration:none; filter:brightness(1.08)}

/* ---- legal / doc pages ---- */
.doc{padding:56px 0 40px}
.doc h1{font-size:clamp(28px,5vw,38px); margin:0 0 8px; text-align:left}
.tag{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:10px; font-weight:600}
.updated{font-size:13px; color:var(--faint); margin:0 0 26px}
.doc h2{font-size:19px; color:var(--text); margin:32px 0 8px; letter-spacing:-.01em}
p,li{color:var(--body)}
ul{padding-left:20px}
li{margin:6px 0}
.back{display:inline-block; margin-top:36px; font-size:14px; color:var(--muted)}

/* ---- sections ---- */
section{padding:56px 0; border-top:1px solid var(--soft)}
section h2{font-size:26px; color:var(--text); margin:0 0 8px; letter-spacing:-.01em}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:28px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px}
.card h3{margin:0 0 6px; color:var(--text); font-size:16px}
.card p{margin:0; font-size:14px; color:var(--muted)}

.mail{
  display:inline-block; margin-top:8px; padding:12px 22px; border-radius:12px;
  background:var(--sunken); border:1px solid var(--border); color:var(--text); font-weight:600;
}
.mail:hover{border-color:var(--accent); text-decoration:none}

footer{padding:40px 0 60px; border-top:1px solid var(--soft); color:var(--faint); font-size:13px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
footer a{color:var(--muted)}
footer .sep{margin-left:auto}