:root{
  --bg:#0e0e10; --card:#17171b; --card2:#1e1e24; --card3:#49495367;
  --text:#f3f3f5; --muted:#a0a0ab; --line:#2a2a31;
  --accent:#7d5bbe; --accent-2:#6949a8; --accent-ink:#fff; --accent-hi:#9177c0;
  --ok:#4bb37b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 620px at 50% -240px, rgba(125,91,190,.28), transparent 70%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  min-height:100vh;
}
.wrap{max-width:640px;margin:0 auto;padding:56px 22px 64px}
.hero{text-align:center}
.logo{
  width:112px;height:112px;margin:0 auto 22px;border-radius:25px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 22px 60px -20px rgba(124,77,255,.7);
}
.logo svg{width:100%;height:100%;display:block}
h1{font-size:38px;line-height:1.1;margin:0 0 10px;letter-spacing:-.02em;font-weight:800}
.tagline{font-size:17px;color:var(--muted);margin:0 auto;max-width:26em}

.cta{margin:34px 0 12px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:17px 22px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);text-decoration:none;
  font-size:18px;font-weight:700;
  box-shadow:0 14px 34px -12px rgba(105,73,168,.85);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 40px -12px rgba(105,73,168,.95)}
.btn:active{transform:translateY(0)}
.btn svg{width:22px;height:22px;flex:none}
.meta{text-align:center;color:var(--muted);font-size:13.5px;margin-top:10px}
.meta b{color:var(--text);font-weight:600}
.note-android{display:inline-flex;align-items:center;gap:6px}

.section{margin-top:40px}
.section h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:0 0 14px}

.steps{counter-reset:s;display:grid;gap:10px}
.step{
  display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.step::before{
  counter-increment:s;content:counter(s);
  width:30px;height:30px;border-radius:50%;
  background:var(--card2);color:var(--accent);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.step p{margin:2px 0 0}
.step .h{font-weight:600}
.step .d{color:var(--muted);font-size:14px}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:460px){.feat{grid-template-columns:1fr}}
.f{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.f .t{font-weight:600;margin:0 0 3px}
.f .s{color:var(--muted);font-size:13.5px;margin:0}

.whatsnew{
  background:var(--card3);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
}
.whatsnew .wn-ver{margin:0 0 8px;font-weight:700;color:var(--accent)}
.whatsnew ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.whatsnew li{margin:4px 0}

.safe{
  margin-top:34px;background:var(--card2);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;color:var(--muted);font-size:13.5px;
}
.safe b{color:var(--text)}
code{background:#000;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12.5px;color:#d9d1ee}

footer{margin-top:40px;text-align:center;color:var(--muted);font-size:12.5px}
footer a{color:var(--accent)}

.about{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.about p{margin:0 0 10px}
.about p:last-child{margin:0}
.about a,.points a{color:#a78bff;text-decoration-color:rgba(167,139,255,.45);text-underline-offset:3px}
.about a:hover,.points a:hover{text-decoration-color:currentColor}
.points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.points li{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px 14px 46px;color:var(--muted);font-size:14.5px;
}
.points li b{color:var(--text);font-weight:600}
.points li::before{
  position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1;
}
.points.good li::before{content:"✓";color:var(--ok);background:rgba(75,179,123,.14)}
.points.bad li::before{content:"–";color:#e0806a;background:rgba(224,128,106,.14)}
.install .cta{margin:0 0 22px}

/* Десктоп: шире колонка, списки и шаги установки в несколько столбцов. */
@media(min-width:900px){
  .wrap{max-width:920px;padding-top:72px}
  .about{font-size:16px;padding:18px 22px}
  .points{grid-template-columns:1fr 1fr}
  .points li:last-child:nth-child(odd){grid-column:1 / -1}
  .install .cta{max-width:440px;margin:0 auto 22px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .whatsnew{padding:18px 24px}
}