
:root {
  --bg: #070a12;
  --panel: #0e1422;
  --panel-2: #121a2c;
  --text: #f5f7fb;
  --muted: #aab4c5;
  --line: rgba(255,255,255,.10);
  --accent: #4dd8ff;
  --accent2: #7b5cff;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(77,216,255,.10), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(123,92,255,.12), transparent 30%),
    var(--bg);
  color: var(--text);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(7,10,18,.78);
  border-bottom: 1px solid var(--line);
}
.nav-inner { height: 72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em; }
.brand img { width:40px; height:40px; border-radius:11px; object-fit:cover; }
.links { display:flex; gap:22px; color:var(--muted); font-size:14px; }
.hero { padding: 110px 0 78px; text-align:center; }
.kicker {
  display:inline-block; padding:7px 12px; border:1px solid var(--line);
  border-radius:999px; color:#d8e4f7; font-size:13px; background:rgba(255,255,255,.03);
}
h1 { font-size: clamp(44px, 7vw, 84px); line-height:1.03; margin:24px 0 18px; letter-spacing:-.04em; }
.gradient {
  background: linear-gradient(90deg, var(--accent), #63a7ff, var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead { max-width:760px; margin:0 auto; color:var(--muted); font-size:19px; }
.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.badge { border:1px solid var(--line); background:rgba(255,255,255,.035); padding:9px 13px; border-radius:999px; font-size:13px; color:#dbe4f3; }
.section { padding: 42px 0 72px; }
.section h2 { font-size:32px; margin:0 0 12px; }
.section-intro { color:var(--muted); margin:0 0 26px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border:1px solid var(--line); border-radius:20px; padding:24px; }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.policy { max-width:820px; }
.policy h1 { font-size:44px; margin:56px 0 10px; }
.policy h2 { margin-top:36px; font-size:23px; }
.policy p, .policy li { color:#c3ccda; }
.policy .meta { color:var(--muted); font-size:14px; }
.notice { border-left:3px solid var(--accent); background:rgba(77,216,255,.06); padding:16px 18px; border-radius:10px; color:#dcefff; }
footer { border-top:1px solid var(--line); margin-top:40px; }
.footer-inner { padding:30px 0 44px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.footer-links { display:flex; gap:18px; }
@media (max-width: 760px) {
  .links { display:none; }
  .hero { padding-top:78px; }
  .grid { grid-template-columns:1fr; }
  .lead { font-size:17px; }
}
