:root { --bg:#0f1115; --card:#151924; --text:#e9ecf1; --muted:#aab3c2; --link:#7fb2ff; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.wrap { width:min(980px, 92vw); margin:0 auto; }
.top { position:sticky; top:0; background:rgba(15,17,21,.85); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06); }
.top .wrap { display:flex; align-items:center; gap:18px; padding:14px 0; }
.brand { font-weight:700; letter-spacing:.2px; }
.nav { display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; }
.nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:10px; }
.nav a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.nav a.active { color:var(--text); background:rgba(127,178,255,.18); }
.content { padding:28px 0 40px; }
h1 { font-size:34px; margin:0 0 10px; }
.lead { color:var(--muted); margin:0 0 18px; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px 18px; margin:14px 0; }
a { color:var(--link); }
.foot { border-top:1px solid rgba(255,255,255,.06); padding:18px 0; color:var(--muted); }
.muted { color: var(--muted); }
.note { margin-top: 10px; color: var(--muted); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .dl-grid { grid-template-columns: 1fr; }
}

.dl-btn {
  width: 100%;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
  );
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dl-btn .dl-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  color: #ffffff;
}

.dl-btn .dl-sub {
  display: block;
  font-size: 13px;
  color: #c2c9d6;
}

.dl-btn.locked {
  cursor: not-allowed;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.dl-btn.locked::after {
  content: "🔒";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 16px;
  opacity: .8;
}

.dl-btn:not(.locked):hover {
  transform: translateY(-1px);
  border-color: rgba(127,178,255,.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}


.dl-title {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.dl-sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.hint {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(127,178,255,.12);
  border: 1px solid rgba(127,178,255,.18);
  color: var(--text);
}

.cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(127,178,255,.18);
  border: 1px solid rgba(127,178,255,.22);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.cta:hover {
  background: rgba(127,178,255,.24);
}

.small { font-size: 13px; }

.card-lite {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.card-lite h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.nav a.active {
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(102, 0, 204, 0.35),
    rgba(102, 0, 204, 0.15)
  );
  border: 1px solid rgba(102, 0, 204, 0.45);
}

.nav a:hover:not(.active) {
  color: #ffffff;
  background: rgba(102, 0, 204, 0.12);
}

.cta {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    #7a1fff,
    #6600cc
  );
  border: 1px solid rgba(102, 0, 204, 0.8);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(102, 0, 204, 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(102, 0, 204, 0.5);
}

.dl-btn.locked {
  border-color: rgba(102, 0, 204, 0.35);
}

.dl-btn.locked::after {
  content: "🔒";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 16px;
  opacity: .85;
}

.card h2 {
  background: linear-gradient(
    90deg,
    #ffffff,
    #cbb3ff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.brand-link:hover {
  background: rgba(102, 0, 204, 0.12);
  border-color: rgba(102, 0, 204, 0.35);
  transform: translateY(-1px);
}