:root {
  --space: #000; --panel: rgba(255,255,255,.04); --panel-hi: rgba(255,255,255,.07); --line: rgba(255,255,255,.09);
  --starlight: #f2f2f7; --dust: #8b8ca0; --streak: #ff1f78; --streak-soft: rgba(255,31,120,.14); --streak-glow: rgba(255,31,120,.4);
  --ok: #4ade80; --r: 20px; --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html, body { margin: 0; background: var(--space); color: var(--starlight); }
body { font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--streak); outline-offset: 3px; }
.muted { color: var(--dust); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--starlight); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.sky {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .75;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 44%, #fff, transparent), radial-gradient(1px 1px at 30% 62%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 64% 78%, rgba(255,255,255,.7), transparent), radial-gradient(1.3px 1.3px at 8% 88%, #fff, transparent),
    radial-gradient(.8px .8px at 50% 34%, rgba(255,255,255,.6), transparent), radial-gradient(.8px .8px at 94% 90%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 55%, rgba(255,255,255,.5), transparent);
}
main, .footer, .nav { position: relative; z-index: 1; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: transform .12s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn-accent { background: var(--streak); color: #fff; box-shadow: 0 0 30px var(--streak-glow); }
.btn-accent:hover { box-shadow: 0 0 44px var(--streak-glow); }
.btn-ghost { background: var(--panel); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-hi); }

/* шапка */
.nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px max(20px, calc((100% - var(--max)) / 2)); background: rgba(0,0,0,.72); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 300; letter-spacing: .42em; font-size: 15px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; color: var(--dust); }
.nav-links a:hover { color: var(--starlight); }
.nav-cta { display: flex; gap: 8px; }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 480px) { .nav-cta .btn-ghost { display: none; } .brand span { letter-spacing: .3em; } }

main { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* первый экран */
.hero { display: grid; grid-template-columns: 1.25fr .9fr; gap: 48px; align-items: center; padding: 72px 0 48px; }
.kicker { font-weight: 300; letter-spacing: .6em; font-size: 14px; margin-bottom: 22px; }
.kicker span { color: var(--dust); }
.hero h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; }
.lead { color: var(--dust); font-size: 19px; margin: 22px 0 30px; max-width: 34em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust { color: var(--dust); font-size: 14px; margin-top: 18px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 44px; gap: 36px; } }

/* демо-устройство */
.device {
  position: relative; border-radius: 34px; padding: 22px 24px 26px; text-align: center; max-width: 360px; width: 100%; justify-self: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.device-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.device-brand { display: inline-flex; align-items: center; gap: 8px; }
.device-brand img { width: 22px; height: 22px; border-radius: 6px; }
.demo-tag { color: var(--dust); font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.power {
  position: relative; width: 150px; height: 150px; border-radius: 50%; margin: 34px auto 20px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #16161c, #07070a); border: 1px solid var(--line); transition: box-shadow .4s, border-color .4s;
}
.power svg { width: 52px; height: 52px; fill: none; stroke: var(--dust); stroke-width: 1.6; stroke-linecap: round; transition: stroke .4s; }
.power .ring { position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed var(--line); }
.power[aria-pressed="true"] { border-color: rgba(255,31,120,.7); box-shadow: 0 0 60px var(--streak-glow), inset 0 0 30px rgba(255,31,120,.2); }
.power[aria-pressed="true"] svg { stroke: #fff; }
.power[aria-pressed="true"] .ring { border: 1px solid rgba(255,31,120,.45); animation: spin 8s linear infinite; border-top-color: var(--streak); }
.power.is-busy .ring { border-top-color: var(--streak); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.device-state { font-size: 22px; font-weight: 500; }
.device-hint { color: var(--dust); font-size: 14px; margin-top: 2px; min-height: 21px; }
.device-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }
.device-stats div { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(0,0,0,.3); }
.device-stats dt { color: var(--dust); font-size: 12px; }
.device-stats dd { margin: 2px 0 0; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 15px; }

/* факты */
.facts { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.facts li { padding: 18px 20px; border-right: 1px solid var(--line); display: grid; gap: 2px; }
.facts li:last-child { border-right: 0; }
.facts b { font-weight: 500; font-size: 18px; }
.facts span { color: var(--dust); font-size: 14px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .facts li:nth-child(2) { border-right: 0; } .facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* секции */
.section { padding: 76px 0 10px; }
.eyebrow { color: var(--streak); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.section h2, .final h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; max-width: 20em; }
.section-lead { color: var(--dust); font-size: 18px; margin-top: 14px; max-width: 42em; }

/* схема */
.flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 14px; margin: 40px 0 16px; padding: 30px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.node { display: grid; justify-items: center; gap: 8px; text-align: center; }
.node b { font-weight: 500; }
.node small { color: var(--dust); font-size: 12px; min-height: 18px; opacity: 0; transition: opacity .4s; }
.node-ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(0,0,0,.4); }
.node-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--starlight); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.node-ico img { width: 34px; height: 34px; border-radius: 8px; }
.node-main .node-ico { opacity: .35; transition: opacity .4s, box-shadow .4s, border-color .4s; }
.wire { height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; }
.wire i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--dust), transparent); animation: flowdot 2.4s linear infinite; }
.flow.is-on .wire { background: rgba(255,31,120,.35); }
.flow.is-on .wire i { background: linear-gradient(90deg, transparent, var(--streak), transparent); box-shadow: 0 0 10px var(--streak); animation-duration: 1.2s; }
.flow.is-on .node-main .node-ico { opacity: 1; border-color: rgba(255,31,120,.6); box-shadow: 0 0 30px var(--streak-glow); }
.flow.is-on .node small { opacity: 1; }
@keyframes flowdot { to { left: 100%; } }
.flow-caption { color: var(--dust); font-size: 15px; }
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; justify-items: center; }
  .wire { width: 2px; height: 34px; }
  .wire i { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--dust), transparent); animation-name: flowdotv; }
  .flow.is-on .wire i { background: linear-gradient(180deg, transparent, var(--streak), transparent); }
}
@keyframes flowdotv { to { top: 100%; } }

/* возможности */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.feature { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 24px; display: grid; align-content: start; gap: 10px; }
.feature.wide { grid-column: span 2; }
.feature h3 { font-size: 21px; font-weight: 500; line-height: 1.2; }
.feature p { color: var(--dust); font-size: 16px; }
.feature.accent { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(255,31,120,.14), rgba(255,31,120,.03) 60%); border-color: rgba(255,31,120,.3); }
.tags { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 14px; color: var(--dust); }
.mini-steps { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; counter-reset: m; }
.mini-steps li { counter-increment: m; display: flex; gap: 10px; align-items: center; color: var(--dust); }
.mini-steps li::before { content: counter(m); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--starlight); }
.link { color: var(--streak); font-weight: 500; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } .feature.wide { grid-column: auto; } }

/* тарифы */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 36px; }
.plan { position: relative; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 24px; display: grid; gap: 6px; }
.plan.best { border-color: rgba(255,31,120,.55); box-shadow: 0 0 40px rgba(255,31,120,.14); }
.plan .badge { position: absolute; top: -11px; left: 20px; background: var(--streak); color: #fff; font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.plan h3 { font-size: 20px; font-weight: 500; }
.plan .price { font-size: 38px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; }
.plan .per { color: var(--dust); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 6px; color: var(--dust); font-size: 15px; }
.plan ul li::before { content: "✦ "; color: var(--streak); }
.plan .btn { margin-top: auto; }

/* установка */
.install-steps { list-style: none; padding: 0; margin: 34px 0 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: i; }
.install-steps li { counter-increment: i; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 22px; display: grid; gap: 6px; }
.install-steps li::before { content: counter(i); width: 32px; height: 32px; border-radius: 50%; background: var(--starlight); color: #000; display: grid; place-items: center; font-weight: 500; margin-bottom: 6px; }
.install-steps b { font-weight: 500; font-size: 18px; }
.install-steps span { color: var(--dust); font-size: 15px; }
@media (max-width: 760px) { .install-steps { grid-template-columns: 1fr; } }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.platforms button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 9px 16px; font-size: 15px; }
.platforms button[aria-selected="true"] { background: var(--starlight); color: #000; border-color: var(--starlight); }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.app { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app b { font-weight: 500; font-size: 18px; display: block; }
.app small { color: var(--dust); font-size: 13px; }

/* FAQ */
.faq { margin-top: 30px; max-width: 820px; }
.faq details { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; margin-bottom: 10px; padding: 0 22px; }
.faq summary { list-style: none; padding: 18px 0; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dust); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--dust); padding-bottom: 18px; }

/* финал и подвал */
.final { margin: 90px 0 70px; padding: 56px 24px; text-align: center; border: 1px solid rgba(255,31,120,.3); border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,31,120,.18), transparent 70%); display: grid; justify-items: center; gap: 14px; }
.final h2 { max-width: none; }
.final p { color: var(--dust); margin-bottom: 8px; }
.footer { border-top: 1px solid var(--line); padding: 44px max(20px, calc((100% - var(--max)) / 2)) 36px; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; color: var(--dust); font-size: 15px; }
.footer a { display: block; margin-top: 8px; }
.footer a:hover { color: var(--starlight); }
.foot-brand .brand { color: var(--starlight); margin: 0 0 12px; }
.foot-h { color: var(--starlight); font-weight: 500; }
.copy { grid-column: 1 / -1; font-size: 13px; color: #55566a; margin-top: 10px; }
@media (max-width: 860px) { .footer { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- страница инструкции ---------- */
.ins-hero { padding: 64px 0 10px; max-width: 820px; }
.ins-hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; margin-top: 4px; }
.ins-start { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.card-lite { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 20px; display: grid; gap: 6px; align-content: start; }
.card-lite b { font-weight: 500; font-size: 18px; }
.card-lite span { color: var(--dust); font-size: 15px; margin-bottom: 8px; }
.card-lite .btn { justify-self: start; }
@media (max-width: 700px) { .ins-start { grid-template-columns: 1fr; } }
.platforms.big button { padding: 12px 20px; font-size: 16px; }
.hint { color: var(--dust); font-size: 14px; margin-top: 10px; min-height: 20px; }
h2.mt { margin-top: 30px; margin-bottom: 14px; font-size: clamp(22px, 2.6vw, 30px); }
.guide { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: g; display: grid; gap: 14px; max-width: 820px; }
.guide li { counter-increment: g; position: relative; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 22px 22px 22px 76px; display: grid; gap: 10px; }
.guide li::before { content: counter(g); position: absolute; left: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--starlight); color: #000; display: grid; place-items: center; font-weight: 500; }
.guide b { font-weight: 500; font-size: 19px; }
.guide p { color: var(--dust); }
.guide p b { font-size: inherit; color: var(--starlight); }
.guide .btn { justify-self: start; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-line { color: var(--ok) !important; }
@media (max-width: 560px) { .guide li { padding: 72px 18px 20px; } .guide li::before { left: 18px; top: 20px; } }
.section h2 + .platforms { margin-top: 16px; }

.how-link { display: inline-block; margin-top: 14px; color: var(--starlight); border-bottom: 1px solid rgba(255,31,120,.6); padding-bottom: 2px; font-size: 15px; }
.how-link:hover { color: var(--streak); }
.install-more { margin-top: 18px; }
.nav-ins { display: none; }
@media (max-width: 900px) { .nav-ins { display: inline-flex; } }
@media (max-width: 480px) { .nav-cta .nav-ins { display: inline-flex; padding: 10px 14px; } }
@media (max-width: 480px) {
  .nav { gap: 10px; }
  .brand span { display: none; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 9px 13px; font-size: 14px; }
}