/* Главная. Всё под .ld, чтобы не задевать подстраницы: у них свои .card и .panel.
   Цвета — из переменных style.css; окно почты и терминал (.screen) всегда тёмные,
   это «снимки экрана», а не часть страницы. */
:root{
  --well:rgba(0,0,0,.25);--icon-ink:#c7d2fe;--radius:20px;
  --mark-bg:rgba(250,204,21,.18);--mark-ink:#fde68a;
}
:root[data-theme="light"]{
  --well:rgba(17,19,28,.035);--icon-ink:#4f46e5;
  --mark-bg:rgba(250,204,21,.35);--mark-ink:#78350f;
}
.screen{
  --ink:#eceef6;--ink-2:#a3a9bd;--ink-3:#6f7690;
  --rule:rgba(255,255,255,.14);--rule-2:rgba(255,255,255,.08);--tint:rgba(255,255,255,.045);
  --violet:#a78bfa;--indigo:#818cf8;--cyan:#22d3ee;--lime:#a3e635;
  color:var(--ink);color-scheme:dark;
}

.ld h2{font:600 clamp(26px,4.4vw,50px)/1.1 var(--display);letter-spacing:-.04em;margin:18px 0 0;text-wrap:balance}
.ld h3{margin:0;font:700 19px/1.3 Manrope,sans-serif;letter-spacing:-.01em}
.ld p{margin:0}

/* ---------- hero ---------- */
.ld .hero{padding:72px 0 24px;text-align:center;position:relative}
.ld .badge{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;
  border:1px solid var(--rule);background:var(--tint);font-size:13px;font-weight:500;color:var(--ink-2);
  text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s}
.ld .badge:hover{border-color:color-mix(in srgb,var(--violet) 55%,transparent);text-decoration:none}
.ld .badge b{font:400 11px/1 var(--mono);padding:5px 9px;border-radius:999px;color:var(--ink);letter-spacing:.06em;
  text-transform:uppercase;background:linear-gradient(115deg,color-mix(in srgb,var(--violet) 35%,transparent),color-mix(in srgb,var(--cyan) 30%,transparent))}
.ld .hero h1{font:600 clamp(32px,8.2vw,78px)/1.06 var(--display);letter-spacing:-.04em;margin:26px auto 22px;
  max-width:1000px;text-wrap:balance}
.ld .lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:640px;margin:0 auto}

.ld .claim{display:flex;gap:10px;justify-content:center;margin:38px auto 0;max-width:620px}
.ld .claim-field{flex:1;min-width:0;display:flex;align-items:center;height:52px;padding:0 6px 0 18px;
  border-radius:14px;border:1px solid var(--rule);background:color-mix(in srgb,var(--glass) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .25s}
.ld .claim-field:focus-within{border-color:color-mix(in srgb,var(--violet) 60%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--indigo) 14%,transparent),0 0 40px -6px color-mix(in srgb,var(--indigo) 45%,transparent)}
.ld .claim-field input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--ink);font:16px var(--mono)}
.ld .claim-field input::placeholder{color:var(--ink-3)}
.ld .claim-domain{font:15px var(--mono);color:var(--ink-2);padding-right:12px;white-space:nowrap}
.ld .claim-hint{margin:14px 0 0;font:13px var(--mono);color:var(--ink-3);min-height:20px;transition:color .2s}
.ld .claim-hint.ok{color:var(--lime)}
.ld .claim-hint.err{color:var(--err)}
.ld .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* ---------- окно почты ---------- */
.ld .mock-wrap{position:relative;max-width:1120px;margin:72px auto 0;perspective:1800px}
.ld .mock-glow{position:absolute;left:8%;right:8%;top:4%;height:70%;z-index:-1;filter:blur(70px);opacity:.7;
  background:radial-gradient(closest-side,rgba(129,140,248,.55),transparent),radial-gradient(closest-side at 80% 60%,rgba(34,211,238,.4),transparent)}
.ld .mock{--tilt:16deg;--sc:.94;position:relative;border-radius:18px;overflow:hidden;text-align:left;
  background:rgba(10,12,20,.92);border:1px solid var(--rule);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;
  transform:rotateX(var(--tilt)) scale(var(--sc));transform-origin:50% 0;will-change:transform}
.ld .mock::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.8),rgba(34,211,238,.8),transparent)}
.ld .mock-bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border-bottom:1px solid var(--rule-2);background:rgba(255,255,255,.02)}
.ld .dots{display:flex;gap:7px}
.ld .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.12)}
.ld .mock-url{margin:0 auto;display:flex;align-items:center;gap:8px;height:26px;padding:0 14px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--rule-2);font:12px var(--mono);color:var(--ink-2)}
.ld .mock-url svg{width:12px;height:12px;color:var(--lime)}
.ld .mock-bar .dots + .mock-url{margin-right:auto}
.ld .mock-bar::after{content:"";width:47px}   /* уравновешивает точки слева, адрес по центру */
.ld .mock-body{display:grid;grid-template-columns:208px minmax(0,1fr) minmax(0,1.15fr);height:500px}

.ld .m-side{border-right:1px solid var(--rule-2);padding:16px 12px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.ld .m-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--ink-2)}
.ld .m-link svg{width:15px;height:15px;flex:none;opacity:.8}
.ld .m-link em{margin-left:auto;font:11px var(--mono);font-style:normal;color:var(--ink-3)}
.ld .m-link.active{background:rgba(129,140,248,.12);color:var(--ink)}
.ld .m-link.active em{color:var(--indigo)}
.ld .m-storage{margin-top:auto;padding:12px 10px 4px;font:11px var(--mono);color:var(--ink-3)}
.ld .m-storage .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.07);margin-top:8px;overflow:hidden}
.ld .m-storage .bar i{display:block;height:100%;width:19%;background:var(--grad);border-radius:inherit}

.ld .m-list{border-right:1px solid var(--rule-2);overflow:hidden;display:flex;flex-direction:column}
.ld .m-list-head{padding:14px 16px;border-bottom:1px solid var(--rule-2);font-weight:700;font-size:14px}
.ld .mail{position:relative;display:flex;gap:12px;padding:13px 16px;border:0;border-bottom:1px solid rgba(255,255,255,.05);
  cursor:pointer;transition:background .2s;width:100%;text-align:left;background:none;font:inherit;color:inherit}
.ld .mail:hover{background:rgba(255,255,255,.025)}
.ld .mail.active{background:linear-gradient(90deg,rgba(129,140,248,.13),rgba(129,140,248,.03))}
.ld .mail.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--grad)}
.ld .av{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font:700 12px Manrope,sans-serif;
  color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.ld .mail-main{min-width:0;flex:1}
.ld .mail-top{display:flex;align-items:baseline;gap:8px;font-size:13px}
.ld .mail-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld .mail.unread .mail-top b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);margin-left:7px;vertical-align:middle;box-shadow:0 0 8px var(--cyan)}
.ld .mail-top time{margin-left:auto;font:11px var(--mono);color:var(--ink-3);white-space:nowrap}
.ld .mail-subj{font-size:13px;color:#d4d7e4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld .mail-snip{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.ld .clip{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font:10.5px var(--mono);padding:2px 8px;border-radius:6px;
  color:#fca5a5;background:rgba(252,165,165,.1);border:1px solid rgba(252,165,165,.25)}
.ld .clip svg{width:11px;height:11px}

.ld .m-read{padding:22px 24px;overflow:hidden;display:flex;flex-direction:column;gap:18px}
.ld .m-read h4{margin:0;font:600 17px/1.35 Manrope,sans-serif;letter-spacing:-.01em}
.ld .read-from{display:flex;align-items:center;gap:12px;font-size:13px}
.ld .read-from div span{display:block;font:11px var(--mono);color:var(--ink-3)}
.ld .pbox{position:relative;border-radius:14px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(129,140,248,.1),rgba(34,211,238,.04));
  border:1px solid rgba(129,140,248,.28);box-shadow:0 0 40px -12px rgba(129,140,248,.45)}
.ld .pbox-head{display:flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#c7d2fe}
.ld .pbox-head svg{width:13px;height:13px}
.ld .pbox-text{margin-top:10px;font-size:14px;line-height:1.6;color:#e4e7f3;min-height:45px}
.ld .caret{display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--indigo);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ld .pbox-act{display:flex;gap:8px;margin-top:12px;min-height:30px}
.ld .pbox-act span{font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;
  background:rgba(129,140,248,.2);border:1px solid rgba(129,140,248,.45);color:#dfe3f2;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ld .pbox-act.show span{opacity:1;transform:none}
.ld .read-body{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.ld .sk{height:9px;border-radius:5px;background:rgba(255,255,255,.06);margin-top:11px}

/* ---------- цифры и бегущая строка ---------- */
.ld .stats{text-align:left;display:grid;grid-template-columns:repeat(4,1fr);margin-top:88px;border:1px solid var(--rule-2);
  border-radius:var(--radius);background:color-mix(in srgb,var(--glass) 35%,transparent)}
.ld .stat{padding:26px 28px}
.ld .stat + .stat{border-left:1px solid var(--rule-2)}
.ld .stat b{display:block;font:500 clamp(26px,3vw,36px)/1.1 var(--display);letter-spacing:-.03em}
.ld .stat > span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
.ld .marquee{margin-top:56px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ld .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.ld .track span{display:flex;align-items:center;gap:44px;padding-right:44px;font:14px var(--mono);color:var(--ink-3);white-space:nowrap;letter-spacing:.04em}
.ld .track span::after{content:"✦";color:color-mix(in srgb,var(--violet) 55%,transparent);font-size:10px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- секции ---------- */
.ld section.block{padding-top:130px}
.ld .sec-head{max-width:760px}
.ld .sec-head.mid{margin:0 auto;text-align:center}
.ld .eyebrow{display:inline-flex;align-items:center;gap:10px;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.ld .eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.ld .sec-head p{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:580px}
.ld .sec-head.mid p{margin-left:auto;margin-right:auto}

/* ---------- карточки ---------- */
.ld .lc{--mx:50%;--my:0%;position:relative;overflow:hidden;border-radius:var(--radius);padding:28px;
  border:1px solid var(--rule-2);isolation:isolate;
  background:linear-gradient(180deg,color-mix(in srgb,var(--glass) 72%,transparent),color-mix(in srgb,var(--glass) 38%,transparent));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ld .lc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(129,140,248,.13),transparent 45%)}
.ld .lc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(167,139,250,.75),rgba(34,211,238,.25) 35%,transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ld .lc:hover::before,.ld .lc:hover::after{opacity:1}
.ld .lc p{margin-top:8px;color:var(--ink-2);font-size:14.5px}
.ld .card-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.25);color:var(--icon-ink)}
.ld .card-ico svg{width:20px;height:20px}

.ld .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px}
.ld .bento .lc{display:flex;flex-direction:column}
.ld .span-2{grid-column:span 2}
.ld .span-3{grid-column:span 3}
.ld .span-4{grid-column:span 4}
.ld .viz{margin-top:auto;padding-top:26px}

/* спам-фильтр: поток писем через фильтр */
.ld .stream{container-type:inline-size;position:relative;height:44px;border-radius:12px;border:1px dashed var(--rule);overflow:hidden;background:var(--well)}
.ld .gate{position:absolute;right:0;top:0;bottom:0;display:grid;place-items:center;padding:0 14px;z-index:1;
  font:12px var(--mono);color:#0b0b14;background:linear-gradient(115deg,#d8ccff,#a5b4fc 40%,#67e8f9)}
.ld .pkt{position:absolute;top:11px;left:-60px;height:22px;padding:0 9px;border-radius:6px;display:flex;align-items:center;gap:6px;
  font:10.5px var(--mono);white-space:nowrap;color:var(--tc);
  background:color-mix(in srgb,var(--tc) 14%,var(--paper));border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);
  animation:flow 8s linear infinite}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(calc(100cqw + 60px))}}
.ld .buckets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.ld .bucket{padding:12px 14px;border-radius:12px;border:1px solid var(--rule-2);background:var(--tint)}
.ld .bucket div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.ld .bucket b{display:block;font:500 22px var(--display);margin-top:6px;letter-spacing:-.03em}
.ld .bucket .bar{height:3px;border-radius:3px;background:var(--tint);margin-top:8px;overflow:hidden}
.ld .bucket .bar i{display:block;height:100%;width:var(--w);background:var(--tc);border-radius:inherit;transform-origin:left;
  transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.ld .vis .bucket .bar i{transform:scaleX(1)}
.ld .cdot{width:8px;height:8px;border-radius:3px;flex:none;background:var(--tc)}

/* шифрование соединения */
.ld .cipher{font:13px/1.6 var(--mono);padding:14px 16px;border-radius:12px;background:var(--well);border:1px solid var(--rule-2);
  color:var(--ink);word-break:break-all;min-height:76px}
.ld .cipher .x{color:var(--violet)}
.ld .cipher-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font:11px var(--mono);color:var(--ink-3)}
.ld .cipher-meta b{color:var(--lime);font-weight:400;white-space:nowrap}

/* без следящих картинок */
.ld .pix{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:118px;border-radius:12px;
  border:1px dashed var(--rule);text-align:center;padding:14px;
  background:repeating-linear-gradient(135deg,var(--tint) 0 8px,transparent 8px 16px)}
.ld .pix span{display:flex;align-items:center;gap:7px;font:11.5px var(--mono);color:var(--ink-3)}
.ld .pix span svg{width:14px;height:14px}
.ld .pix b{font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;color:var(--ink);
  background:color-mix(in srgb,var(--indigo) 18%,transparent);border:1px solid color-mix(in srgb,var(--indigo) 40%,transparent)}

/* строки-переключатели */
.ld .row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--rule-2);
  background:var(--tint);font:12px var(--mono);color:var(--ink)}
.ld .row + .row{margin-top:8px}
.ld .row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld .tog{width:28px;height:16px;border-radius:16px;background:color-mix(in srgb,var(--indigo) 75%,transparent);position:relative;flex:none}
.ld .tog::after{content:"";position:absolute;top:2px;left:14px;width:12px;height:12px;border-radius:50%;background:#fff}
.ld .swatches{display:flex;gap:8px;margin-top:14px}
.ld .swatches i{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule)}

/* поиск */
.ld .search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--indigo) 40%,transparent);background:var(--well);font:13px var(--mono);
  box-shadow:0 0 30px -12px rgba(129,140,248,.6)}
.ld .search svg{width:16px;height:16px;color:var(--ink-2);flex:none}
.ld .search .q{color:var(--ink);white-space:nowrap;overflow:hidden}
.ld .search .t{margin-left:auto;color:var(--ink-3);font-size:11px;white-space:nowrap;opacity:0;transition:opacity .3s}
.ld .search .t.show{opacity:1}
.ld .results{margin-top:10px}
.ld .res{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;font-size:13px;color:var(--ink-2);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ld .res.show{opacity:1;transform:none}
.ld .res + .res{margin-top:2px}
.ld .res b{color:var(--ink);font-weight:600}
.ld .res mark{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;padding:0 2px}
.ld .res time{margin-left:auto;font:11px var(--mono);color:var(--ink-3);white-space:nowrap}

/* устройства */
.ld .devices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ld .dev{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px;border-radius:12px;border:1px solid var(--rule-2);
  background:var(--tint);font-size:12px;color:var(--ink-2);text-align:center}
.ld .dev svg{width:24px;height:24px;color:var(--icon-ink)}
.ld .proto{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ld .proto span{font:11px var(--mono);padding:4px 9px;border-radius:6px;border:1px solid var(--rule-2);color:var(--ink-2)}

/* ---------- безопасность ---------- */
.ld .split{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.ld .split .lead2{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:520px}
.ld .checks{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.ld .checks li{display:flex;gap:14px;align-items:flex-start;color:var(--ink);font-size:15px}
.ld .checks li svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--lime);padding:4px;border-radius:7px;
  background:color-mix(in srgb,var(--lime) 10%,transparent);border:1px solid color-mix(in srgb,var(--lime) 28%,transparent)}
.ld .term{border-radius:18px;overflow:hidden;border:1px solid var(--rule);background:rgba(8,9,15,.94);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(129,140,248,.4)}
.ld .term-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;border-bottom:1px solid var(--rule-2);font:12px var(--mono);color:var(--ink-3)}
.ld .term-bar .dots{margin-right:auto}
.ld .term-bar span:last-child{margin-left:auto}
.ld .term-body{padding:22px 22px 26px;font:13px/1.9 var(--mono);min-height:262px}
.ld .tl{display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.js .ld .tl{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.js .ld .tl.show{opacity:1;transform:none}
.ld .tl .k{color:#cfd3e3;overflow:hidden;text-overflow:ellipsis}
.ld .tl .k i{font-style:normal;color:var(--violet)}
.ld .tl .dotl{flex:1;min-width:12px;border-bottom:1px dotted rgba(255,255,255,.18);transform:translateY(-5px)}
.ld .tl .v{color:var(--lime)}
.ld .tl .v.c{color:var(--cyan)}
.ld .tl.cmd .k{color:var(--ink)}
.ld .tl.cmd .k b{color:var(--cyan);font-weight:400}
.ld .tl.done{margin-top:10px}
.ld .tl.done .k{color:var(--lime)}
.ld .term-note{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center}

/* ---------- шаги ---------- */
.ld .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.ld .step .big{font:500 44px/1 var(--display);letter-spacing:-.05em;margin-bottom:44px}
.ld .step .big.grad-text{animation:none}

/* ---------- бесплатно ---------- */
.ld .free{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:56px;border-color:transparent;
  background:linear-gradient(160deg,rgba(129,140,248,.14),color-mix(in srgb,var(--glass) 70%,transparent) 55%,rgba(34,211,238,.08))}
.ld .free-head p{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:480px}
.ld .free-head .b{margin-top:32px}
.ld .free-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld .free-list li{position:relative;padding:16px 16px 16px 44px;border-radius:14px;border:1px solid var(--rule-2);background:var(--tint);
  font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.4}
.ld .free-list li::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:6px;
  background:color-mix(in srgb,var(--lime) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lime) 32%,transparent)}
.ld .free-list li::after{content:"";position:absolute;left:21.5px;top:22px;width:7px;height:4px;
  border-left:1.6px solid var(--lime);border-bottom:1.6px solid var(--lime);transform:rotate(-45deg)}
.ld .ring{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ld .ring::before{content:"";position:absolute;inset:-60%;
  background:conic-gradient(from 0deg,transparent 0 55%,#a78bfa 70%,#22d3ee 85%,transparent 100%);animation:spin 6s linear infinite}
.ld .ring::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(129,140,248,.3)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- вопросы ---------- */
.ld .faq{max-width:820px;margin:48px auto 0}
.ld .faq details{border-bottom:1px solid var(--rule-2)}
.ld .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;
  cursor:pointer;font-size:17px;font-weight:700}
.ld .faq summary::-webkit-details-marker{display:none}
.ld .faq summary::after{content:"+";flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--rule);font:18px/1 var(--mono);color:var(--ink-2);transition:transform .3s var(--ease),color .2s,border-color .2s}
.ld .faq details[open] summary::after{transform:rotate(45deg);color:var(--ink);border-color:color-mix(in srgb,var(--violet) 55%,transparent)}
.ld .faq .ans{padding:0 60px 24px 4px;color:var(--ink-2)}
.ld .faq .ans p + p{margin-top:10px}
.ld .faq-all{text-align:center;margin-top:28px;font-size:15px}

/* ---------- призыв ---------- */
.ld .cta{margin-top:140px;padding:88px 32px;text-align:center;border-radius:28px}
.ld .cta::before{opacity:1;background:radial-gradient(600px circle at 50% 0%,rgba(129,140,248,.28),transparent 60%),
  radial-gradient(500px circle at 80% 120%,rgba(34,211,238,.18),transparent 60%)}
.ld .cta .cta-grid{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 10%,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 10%,transparent 75%)}
.ld .cta h2{max-width:760px;margin-left:auto;margin-right:auto}
.ld .cta p{margin:18px auto 0;color:var(--ink-2);max-width:520px;font-size:17px}
.ld .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}

/* ---------- появление при прокрутке ---------- */
.js .ld .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .ld .reveal.vis{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media(max-width:1024px){
  .ld .bento{grid-template-columns:repeat(2,1fr)}
  .ld .span-2,.ld .span-3{grid-column:span 1}
  .ld .span-4{grid-column:span 2}
  .ld .mock-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .ld .m-side{display:none}
}
@media(max-width:900px){
  .ld .split{grid-template-columns:1fr;gap:48px}
  .ld .steps{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .ld .free{grid-template-columns:1fr;gap:36px;padding:40px}
  .ld .step .big{margin-bottom:24px}
  .ld .stats{grid-template-columns:repeat(2,1fr)}
  .ld .stat:nth-child(3){border-left:0}
  .ld .stat:nth-child(n+3){border-top:1px solid var(--rule-2)}
}
@media(max-width:680px){
  .ld .mock-body{grid-template-columns:1fr;height:auto}
  .ld .m-list{display:none}
  .ld .m-read{padding:18px}
  .ld .read-body{display:none}
  .ld .mock-url{display:none}
}
@media(max-width:640px){
  .ld .hero{padding-top:48px}
  .ld .claim{flex-direction:column}
  .ld .claim-field{flex:none;width:100%}
  .ld .claim .b{width:100%}
  .ld .bento{grid-template-columns:1fr}
  .ld .span-2,.ld .span-3,.ld .span-4{grid-column:auto}
  .ld .devices{grid-template-columns:repeat(2,1fr)}
  .ld .lc{padding:22px}
  .ld .free-list{grid-template-columns:1fr}
  .ld .stat{padding:20px}
  .ld section.block{padding-top:96px}
  .ld .cta{padding:64px 20px;margin-top:100px}
  .ld .faq .ans{padding-right:4px}
  .ld .faq summary{font-size:16px}
  .ld .term-body{font-size:11px;padding:18px 14px 22px;min-height:250px}
}

@media(prefers-reduced-motion:reduce){
  .ld *,.ld *::before,.ld *::after{animation:none!important;transition:none!important}
  /* Без анимации письма некуда «течь»: все четыре оставались в точке старта, друг на друге
     и наполовину за краем. Выстраиваем их рядом, лишнее прячет плашка фильтра */
  .ld .stream{display:flex;align-items:center;gap:8px;padding:0 74px 0 12px}
  .ld .pkt{position:static;flex:none}
  .js .ld .reveal,.js .ld .tl{opacity:1;transform:none}
  .ld .mock{--tilt:0deg;--sc:1}
  .ld .bucket .bar i{transform:none}
}