:root{
  --bg:#06070d; --card:rgba(16,18,34,.62); --muted:rgba(255,255,255,.60);
  --text:rgba(255,255,255,.94); --accent:#8b5cf6; --accent2:#7c3aed;
  --ok:#34d399; --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%,rgba(139,92,246,.16),transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 15%,rgba(236,72,153,.06),transparent 58%);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 72px}
/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:32px;height:32px;border-radius:9px}
.brand b{font-size:17px;letter-spacing:-.02em}
.top a.login{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 14px;border-radius:10px;border:1px solid var(--border)}
.top a.login:hover{color:var(--text);background:rgba(255,255,255,.04)}
/* герой */
.hero{text-align:center;padding:34px 0 8px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  border:1px solid var(--border);background:rgba(255,255,255,.03);padding:6px 12px;border-radius:999px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
h1{font-size:clamp(27px,6vw,40px);line-height:1.12;letter-spacing:-.035em;margin:18px 0 12px;font-weight:800}
.lead{color:var(--muted);font-size:16px;margin:0 auto;max-width:520px}
/* кнопки */
.btn{display:block;text-align:center;text-decoration:none;font-weight:650;font-size:15px;
  padding:15px 20px;border-radius:14px;border:1px solid var(--border);color:var(--text);
  background:rgba(255,255,255,.05);transition:background .18s ease,transform .12s ease}
.btn:hover{background:rgba(255,255,255,.09)}
.btn:active{transform:scale(.99)}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.cta{margin:26px auto 0;max-width:420px}
/* карточки-фичи */
.feats{margin:34px 0 0;border:1px solid var(--border);background:var(--card);border-radius:18px;overflow:hidden}
.feat{display:flex;gap:14px;padding:18px 16px;align-items:flex-start}
.feat+.feat{border-top:1px solid var(--border)}
.feat .ic{font-size:20px;line-height:1.2}
.feat b{display:block;font-size:15px;margin-bottom:3px}
.feat span{color:var(--muted);font-size:13px}
/* секции */
section{margin-top:52px}
h2{font-size:24px;letter-spacing:-.03em;margin:0 0 6px;text-align:center;font-weight:800}
.sub{color:var(--muted);font-size:14px;text-align:center;margin:0 0 22px}
/* тарифы */
.plans{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.plan{display:block;text-decoration:none;color:var(--text);border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:18px 16px;transition:border-color .18s,transform .12s,background .18s}
.plan:hover{border-color:rgba(139,92,246,.5);background:rgba(124,58,237,.10)}
.plan:active{transform:scale(.99)}
.plan .name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.plan .price{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.plan .per{display:block;font-size:12px;color:var(--muted)}
.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(52,211,153,.16);color:var(--ok);padding:3px 7px;border-radius:6px}
/* шаги */
.steps{counter-reset:s;display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:16px}
.step .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;background:rgba(139,92,246,.18);color:#c4b5fd}
.step b{display:block;font-size:15px;margin-bottom:3px}
.step span{color:var(--muted);font-size:13px}
/* faq */
details{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:0 16px;margin-bottom:10px}
summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:400;font-size:19px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:0 0 15px;color:var(--muted);font-size:14px}
/* подвал */
.foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--border);text-align:center;
  color:rgba(255,255,255,.38);font-size:13px}
.foot a{color:rgba(255,255,255,.55);text-decoration:none;margin:0 7px}
.foot a:hover{color:var(--text)}
.tgline{margin-top:30px;text-align:center;color:var(--muted);font-size:14px}
.tgline a{color:#a78bfa;text-decoration:none}
/* статьи + оферта */
.doc{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:22px 20px;margin-top:18px}
.doc h3{margin:26px 0 8px;font-size:17px;letter-spacing:-.02em}
.doc h3:first-child{margin-top:0}
.doc p,.doc li{color:var(--muted);font-size:14px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--border);padding:8px 10px;text-align:left;white-space:nowrap}
.doc th{color:var(--text);font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tabs a{font-size:13px;padding:9px 14px;border-radius:11px;border:1px solid var(--border);
  color:var(--muted);text-decoration:none}
.tabs a.on{background:rgba(124,58,237,.18);border-color:rgba(139,92,246,.45);color:var(--text)}
.crumbs{color:var(--muted);font-size:13px;margin-top:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.card-link{display:block;text-decoration:none;border:1px solid var(--border);background:var(--card);
  border-radius:16px;padding:18px;margin-top:14px;color:var(--text)}
.card-link:hover{border-color:rgba(139,92,246,.45)}
.card-link b{display:block;font-size:16px;margin-bottom:6px}
.card-link span{color:var(--muted);font-size:13px}
.card-link .meta{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.38)}
@media (max-width:520px){.wrap{padding:0 14px 60px}.feat{padding:15px 13px}}
.fld{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0f1120;color:var(--text);font-size:15px;font-family:inherit}
.fld:focus{outline:none;border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.fld::placeholder{color:rgba(255,255,255,.30)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.choice label{display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:block;text-align:center;padding:14px 10px;border-radius:13px;
  border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:600}
.choice input:checked+span{border-color:rgba(139,92,246,.6);background:rgba(124,58,237,.16)}
.plan.on{border-color:rgba(139,92,246,.6);background:rgba(124,58,237,.14)}

/* ── выбор тарифа с кружком (как на референсе) ── */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pgrid .wide,.pgrid .trial{grid-column:1 / -1}
.pcard{position:relative;display:block;cursor:pointer;border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:16px 44px 16px 16px;
  transition:border-color .16s,background .16s}
.pcard input{position:absolute;opacity:0;pointer-events:none}
.pcard .dot{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);transition:border-color .16s}
.pcard .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .16s}
.pcard input:checked~.dot{border-color:var(--accent)}
.pcard input:checked~.dot::after{transform:scale(1)}
.pcard:has(input:checked){border-color:var(--accent);background:rgba(124,58,237,.14)}
.pcard .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.pcard .v{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.pcard .m{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.pcard.trial:has(input:checked){border-color:var(--ok);background:rgba(52,211,153,.12)}
.pcard.trial input:checked~.dot{border-color:var(--ok)}
.pcard.trial input:checked~.dot::after{background:var(--ok)}
/* сводка */
.sum{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:18px 16px;margin-top:14px}
.sum .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum .row+.row{margin-top:8px}
.sum .row b{font-size:16px}
.sum .row .big{font-size:22px;font-weight:800;letter-spacing:-.03em}
.sum .row span{color:var(--muted);font-size:14px}
.sum .hint{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.sum ul{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--border);padding-top:14px}
.sum li{position:relative;padding-left:18px;font-size:14px;color:var(--muted);margin-bottom:8px}
.sum li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sum .btn{margin-top:16px}
.paynote{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
.paynote a{color:#a78bfa;text-decoration:none}
@media (min-width:700px){
  .wrap{max-width:860px}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pgrid .wide{grid-column:auto}
}

/* ── кабинет ── */
.lkhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0 6px;border-bottom:1px solid var(--border);margin-bottom:16px}
.lkhead .who{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lktabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.lktabs::-webkit-scrollbar{display:none}
.lktabs a{flex:0 0 auto;font-size:14px;padding:9px 16px;border-radius:999px;text-decoration:none;
  border:1px solid var(--border);color:var(--muted);background:var(--card)}
.lktabs a.on{background:#fff;color:#0d0f1a;border-color:#fff;font-weight:600}
.pane{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:18px 16px;margin-bottom:14px}
.pane h3{margin:0 0 6px;font-size:17px;letter-spacing:-.02em}
.pane p{margin:0 0 12px;color:var(--muted);font-size:14px}
.pane p:last-child{margin-bottom:0}
.stat{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;margin-bottom:4px}
.stat i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.stat.off i{background:#f0a58a}
.linkbox{display:block;width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--border);
  background:#0f1120;color:var(--muted);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:10px 0}
.dev{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
.dev:first-of-type{border-top:0}
.dev .ic{font-size:20px;flex:0 0 auto}
.dev .mid{flex:1;min-width:0}
.dev b{display:block;font-size:14px;font-weight:600}
.dev span{display:block;font-size:12px;color:var(--muted)}
.dev .rm{flex:0 0 auto;font-size:13px;color:#f0a58a;text-decoration:none;padding:7px 12px;
  border:1px solid rgba(240,165,138,.32);border-radius:10px;background:none;cursor:pointer;font-family:inherit}
.dev .rm:hover{background:rgba(240,165,138,.10)}
.pay-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 0;border-top:1px solid var(--border)}
.pay-row:first-of-type{border-top:0}
.pay-row .l b{display:block;font-size:14px}
.pay-row .l span{font-size:12px;color:var(--muted)}
.pay-row .r{font-size:15px;font-weight:700;white-space:nowrap}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini a{display:block;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.03);
  border-radius:13px;padding:13px;text-align:center;color:var(--text)}
.mini a:hover{border-color:rgba(139,92,246,.5)}
.mini a b{display:block;font-size:13px;color:var(--muted);font-weight:500}
.mini a span{display:block;font-size:18px;font-weight:800;margin-top:3px}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:22px 0}
.wrap a.login,.wrap a.login:hover{text-decoration:none}
.lkhead .login{font-size:13px;padding:7px 13px}