/* 777like (03.10): главная — реклама конфигуратора зрителей и анимации. Подключается только на главной (landing/index.php), после lk-shell.css.
   Все движения выключены при prefers-reduced-motion; без JS контент виден сразу (классы анимации ставит lk-home.js). */

/* ---------- факты */
a.lk-fact--link{color:inherit!important;text-decoration:none!important;transition:background-color .15s var(--lk-ease)}
a.lk-fact--link:hover{background:var(--lk-signal-soft)}
a.lk-fact--link .lk-fact__v{color:var(--lk-signal)}
.lk-plat-note{font-size:13.5px;color:var(--lk-subtle)}

/* ---------- конфигуратор зрителей */
.lk-cfgad{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px;border-radius:var(--lk-r-xl);overflow:hidden;
  border:1px solid transparent;background:linear-gradient(var(--lk-surface),var(--lk-surface)) padding-box,var(--lk-brand-grad) border-box;box-shadow:var(--lk-shadow)}
.lk-cfgad::before{content:"";position:absolute;inset:-40% -10% auto 40%;height:120%;background:radial-gradient(50% 50% at 50% 50%,rgba(118,88,255,.16),transparent 70%);pointer-events:none}
.lk-cfgad > *{position:relative;min-width:0}
.lk-cfgad__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.lk-cfgad__list{display:flex;flex-direction:column;gap:10px;margin:4px 0 8px;padding:0;list-style:none}
.lk-cfgad__list li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15.5px}
.lk-cfgad__ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--lk-accent-soft);color:var(--lk-accent)}
.lk-cfgad__ico .lk-i{width:18px;height:18px}

.lk-cfgad__demo{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--lk-r-xl);background:var(--lk-bg-2);border:1px solid var(--lk-line)}
.lk-cfgad__screen{--p:var(--lk-p-twitch);position:relative;display:flex;flex-direction:column;gap:6px;height:190px;padding:14px 16px 0;border-radius:14px;overflow:hidden;color:#fff;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--p) 55%,transparent),transparent 60%),linear-gradient(160deg,#171A2E,#0B0C15);transition:background-color .3s}
.lk-cfgad__screen[data-p="youtube"]{--p:var(--lk-p-youtube)}
.lk-cfgad__screen[data-p="kick"]{--p:#53FC18}
.lk-cfgad__screen[data-p="vk"]{--p:var(--lk-p-vk)}
.lk-cfgad__bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lk-cfgad__live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:#E5233F;font:800 11px/1 var(--lk-font-ui);letter-spacing:.08em}
.lk-cfgad__live i{width:6px;height:6px;border-radius:50%;background:#fff}
.lk-cfgad__pname{font:650 13px/1 var(--lk-font-ui);opacity:.85}
.lk-cfgad__viewers{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.lk-cfgad__viewers .lk-i{width:20px;height:20px;align-self:center;opacity:.85}
.lk-cfgad__viewers b{font:750 clamp(30px,3.4vw,40px)/1 var(--lk-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lk-cfgad__viewers span{font-size:14px;opacity:.75}
.lk-cfgad__graph{position:absolute;left:16px;right:16px;bottom:0;height:72px;display:flex;align-items:flex-end;gap:4px}
.lk-cfgad__graph i{flex:1;height:var(--h,8%);min-height:4px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--p),color-mix(in srgb,var(--p) 25%,transparent));opacity:.9;transition:height .45s var(--lk-ease)}

.lk-cfgad__ctrl{display:flex;flex-direction:column;gap:14px;padding:4px 4px 2px}
.lk-cfgad__plats{display:flex;flex-wrap:wrap;gap:6px}
.lk-cfgad__plat{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:var(--lk-pill);border:1px solid var(--lk-line);background:var(--lk-surface);color:var(--lk-text);font:600 13.5px/1 var(--lk-font-ui);cursor:pointer;transition:border-color .15s var(--lk-ease),background-color .15s var(--lk-ease)}
.lk-cfgad__plat:hover{border-color:var(--lk-accent-line)}
.lk-cfgad__plat[aria-pressed="true"]{border-color:var(--lk-accent);background:var(--lk-accent-soft)}
.lk-cfgad__range{display:flex;flex-direction:column;gap:8px;margin:0}
.lk-cfgad__rlabel{display:flex;justify-content:space-between;font-size:13.5px;color:var(--lk-muted)}
.lk-cfgad__rlabel b{color:var(--lk-text);font-variant-numeric:tabular-nums}
.lk-cfgad__range input{width:100%;margin:0;accent-color:var(--lk-accent);cursor:pointer;height:24px}
.lk-cfgad__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding-top:12px;border-top:1px solid var(--lk-line-soft)}
.lk-cfgad__per{font-size:13.5px;color:var(--lk-muted);margin-right:auto}
.lk-cfgad__price{font-variant-numeric:tabular-nums}
.lk-cfgad__price s{font-size:14px;color:var(--lk-subtle)}
.lk-cfgad__price b{font:750 26px/1 var(--lk-font-display);letter-spacing:-.02em;border-radius:6px;transition:background-color .15s ease-out}
.lk-cfgad__price b.is-flash{background:var(--lk-accent-soft)}
.lk-cfgad__disc[hidden],.lk-cfgad__price s[hidden]{display:none}
.lk-cfgad__hint{margin:-6px 0 0;min-height:1.4em;font-size:13px;color:var(--lk-signal);font-weight:600}
.lk-cfgad__hint:empty{visibility:hidden}

@media (max-width:1023.98px){.lk-cfgad{grid-template-columns:1fr;gap:28px;padding:32px}}
@media (max-width:479.98px){.lk-cfgad{padding:22px 16px;border-radius:var(--lk-r-lg)}.lk-cfgad__demo{padding:12px}.lk-cfgad__screen{height:170px}.lk-cfgad__text > .lk-row{align-self:stretch}.lk-cfgad .lk-btn--lg{width:100%}}

/* ---------- наведение (только мышь) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .lk-plat,.lk-prov__card,.lk-post,.lk-cfgad__plat{transition:transform .16s var(--lk-ease),border-color .15s var(--lk-ease),background-color .15s var(--lk-ease),box-shadow .16s var(--lk-ease)}
  .lk-plat:hover,.lk-prov__card:hover{transform:translateY(-2px);box-shadow:var(--lk-shadow)}
}

/* ---------- движение (только если пользователь не просил его убрать) */
@media (prefers-reduced-motion:no-preference){
  /* первый экран: текст и кнопки видны сразу, «Пример заказа» въезжает */
  .lk-hero-ticket{animation:lk-h-in .7s var(--lk-ease) .12s both}
  .lk-hero .lk-trust li{animation:lk-h-fade .5s var(--lk-ease) both}
  .lk-hero .lk-trust li:nth-child(2){animation-delay:.08s}
  .lk-hero .lk-trust li:nth-child(3){animation-delay:.16s}
  @keyframes lk-h-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes lk-h-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* появление при прокрутке (классы ставит lk-home.js) */
  html.lk-anim .lk-rv{opacity:0;transform:translateY(16px)}
  html.lk-anim .lk-rv.is-in{opacity:1;transform:none;transition:opacity .5s ease-out var(--d,0ms),transform .6s var(--lk-ease) var(--d,0ms)}

  /* «Мы провайдер»: наценки посредников всплывают по очереди, наш сервер подсвечивается */
  html.lk-anim .lk-prov__chains.lk-rv .lk-chain__n i{display:inline-block;opacity:0;transform:scale(.4)}
  html.lk-anim .lk-prov__chains.is-in .lk-chain__n i{opacity:1;transform:none;transition:opacity .25s ease-out,transform .4s cubic-bezier(.34,1.56,.64,1)}
  html.lk-anim .lk-prov__chains.is-in .lk-chain__row > :nth-child(3) i{transition-delay:.45s}
  html.lk-anim .lk-prov__chains.is-in .lk-chain__row > :nth-child(5) i{transition-delay:.7s}
  html.lk-anim .lk-prov__chains.is-in .lk-chain__n--us{animation:lk-us-glow 1.2s var(--lk-ease) .9s both}
  @keyframes lk-us-glow{0%{box-shadow:var(--lk-brand-shadow)}40%{box-shadow:0 0 0 6px rgba(118,88,255,.25),var(--lk-brand-shadow)}100%{box-shadow:var(--lk-brand-shadow)}}

  /* финальный призыв: один блик по кнопке */
  .lk-final__btn{position:relative;overflow:hidden}
  html.lk-anim .lk-final.is-in .lk-final__btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:lk-shine 1s ease-out .5s 1 both;pointer-events:none}
  @keyframes lk-shine{to{left:130%}}

  /* конфигуратор: индикатор эфира */
  .lk-cfgad__live i{animation:lk-live 1.6s ease-in-out infinite}
  @keyframes lk-live{50%{opacity:.35}}
}

/* ---------- 03.10: знаки площадок (официальные цвета брендов) */
.lk-brand{--b:var(--lk-surface-3);--f:var(--lk-muted);flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--b);color:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lk-brand .lk-brand__g{width:17px;height:17px;fill:currentColor}
.lk .lk-brand svg.lk-i{width:17px;height:17px}
.lk-brand--xs{width:20px;height:20px;border-radius:6px}
.lk-brand--xs .lk-brand__g,.lk .lk-brand--xs svg.lk-i{width:12px;height:12px}
.lk-brand--twitch{--b:#9146FF;--f:#fff}
.lk-brand--youtube{--b:#FF0000;--f:#fff}
.lk-brand--telegram{--b:#26A5E4;--f:#fff}
.lk-brand--kick{--b:#53FC19;--f:#000}
.lk-brand--vk{--b:#0077FF;--f:#fff}
.lk-brand--instagram{--b:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);--f:#fff}
.lk-brand--facebook{--b:#0866FF;--f:#fff}
.lk-brand--tiktok{--b:#000;--f:#fff}
.lk-brand--twitter{--b:#000;--f:#fff}
.lk-brand--discord{--b:#5865F2;--f:#fff}
.lk-brand--rutube{--b:#00A1E7;--f:#fff}
.lk-brand--dzen{--b:#000;--f:#fff}
.lk-brand--trovo{--b:#19D66B;--f:#000}
.lk-brand--tiktok,.lk-brand--twitter,.lk-brand--dzen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-theme="light"] .lk-brand--tiktok,html[data-theme="light"] .lk-brand--twitter,html[data-theme="light"] .lk-brand--dzen{box-shadow:none}
.lk-plat__top .lk-brand{margin-right:2px}
.lk-cfgad__plat .lk-brand{margin-left:-4px}

/* ---------- 03.10: «Подробнее о продвижении» — плашки со знаками */
.lk-guides{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;padding:16px 18px;border-radius:var(--lk-r-lg);background:var(--lk-surface);border:1px solid var(--lk-line-soft)}
.lk-guides__t{display:inline-flex;align-items:center;gap:8px;font:650 14px/1.2 var(--lk-font-ui);color:var(--lk-text)}
.lk-guides__t .lk-i{color:var(--lk-accent)}
.lk-guides__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lk-guide{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px 0 7px;border-radius:var(--lk-pill);border:1px solid var(--lk-line);background:var(--lk-bg);color:var(--lk-text)!important;font:600 13.5px/1 var(--lk-font-ui);text-decoration:none!important;transition:border-color .15s var(--lk-ease),background-color .15s var(--lk-ease)}
.lk-guide:hover{border-color:var(--lk-accent-line);background:var(--lk-accent-soft)}
@media (max-width:639.98px){.lk-guides{padding:14px}.lk-guides__t{width:100%}}

/* ---------- 03.10: SEO-текст на всю ширину: заголовок сверху, текст в две колонки */
@media (min-width:1024px){
  body.lk-site--home .lk-seo .lk-prose{max-width:none;columns:2;column-gap:56px;column-rule:1px solid var(--lk-line-soft)}
  body.lk-site--home .lk-seo .lk-prose > h1,body.lk-site--home .lk-seo .lk-prose > h2{column-span:all;max-width:22ch;margin-bottom:20px}
  body.lk-site--home .lk-seo .lk-prose p{margin-top:0;break-inside:auto}
  body.lk-site--home .lk-seo.is-clamped .lk-prose{max-height:none;height:520px;column-fill:auto}
}

/* ---------- 06.10: «Пример заказа» — карусель частых заказов ---------- */
.lk-ex__track{display:grid}
.lk-ex__slide{grid-area:1/1;display:flex;flex-direction:column;min-width:0;visibility:hidden}
.lk-ex__slide.is-on{visibility:visible}
.lk-ex__slide .lk-hero-ticket__foot{margin-top:auto}
.lk-ex__num{margin-left:4px;color:var(--lk-subtle);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lk-ex__num b{color:var(--lk-text);font-weight:700}
.lk-ex .lk-hero-ticket__svc{gap:14px}
.lk-ex .lk-hero-ticket__svc .lk-brand{width:42px;height:42px;border-radius:12px}
.lk-ex .lk-hero-ticket__svc .lk-brand__g,.lk .lk-ex .lk-hero-ticket__svc .lk-brand svg.lk-i{width:22px;height:22px}
.lk-ex__svc-text{min-width:0}
.lk-ex .lk-hero-ticket__name{font:700 18px/1.25 var(--lk-font-display);letter-spacing:-.015em}
.lk-ex__det{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--lk-muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lk-ex .lk-hero-ticket__total .lk-price{font-size:34px;letter-spacing:-.02em}
.lk-ex__nav{display:flex;gap:6px;padding:0 22px 18px}
.lk-ex:not(.is-js) .lk-ex__nav{display:none}
.lk-ex__dot{flex:1;min-width:0;height:22px;padding:0;margin:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;border-radius:6px}
.lk-ex__dot i{position:relative;display:block;width:100%;height:4px;border-radius:4px;background:var(--lk-line);overflow:hidden}
.lk-ex__dot i::after{content:"";position:absolute;inset:0;background:var(--lk-brand-line);transform:scaleX(var(--p,0));transform-origin:left}
.lk-ex__dot.is-done i::after{transform:none;opacity:.55}
.lk-ex__dot:hover i{background:var(--lk-line-strong)}
.lk-ex__dot:focus-visible{outline:none;box-shadow:var(--lk-focus)}
.lk-ex:not(.is-auto) .lk-ex__dot[aria-current] i::after{transform:none}
@media (prefers-reduced-motion:no-preference){
  .lk-ex__slide.is-in{animation:lk-ex-in .6s var(--lk-ease) both}
  .lk-ex__slide.is-out{visibility:visible;animation:lk-ex-out .38s cubic-bezier(.4,0,1,1) both;pointer-events:none}
  .lk-ex__slide.is-in .lk-brand{animation:lk-ex-pop .55s cubic-bezier(.34,1.56,.64,1) .08s both}
  .lk-ex__slide.is-in .lk-hero-ticket__cell{animation:lk-ex-up .5s var(--lk-ease) .14s both}
  .lk-ex__slide.is-in .lk-hero-ticket__cell + .lk-hero-ticket__cell{animation-delay:.22s}
  .lk-ex__slide.is-in .lk-hero-ticket__total .lk-price{animation:lk-ex-flash 1.2s ease-out .3s both}
  @keyframes lk-ex-in{from{opacity:0;transform:translateX(calc(32px * var(--dir,1)));filter:blur(6px)}}
  @keyframes lk-ex-out{to{opacity:0;transform:translateX(calc(-32px * var(--dir,1)));filter:blur(6px)}}
  @keyframes lk-ex-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
  @keyframes lk-ex-up{from{opacity:0;transform:translateY(10px)}}
  @keyframes lk-ex-flash{0%{text-shadow:none}35%{text-shadow:0 0 18px rgba(62,230,166,.75)}100%{text-shadow:none}}
}

/* ---------- 06.10: «Свои серверы» — серверная на фоне (всегда тёмная, в обеих темах) ---------- */
.lk-srv{
  color-scheme:dark;position:relative;overflow:hidden;isolation:isolate;
  --lk-bg:#0B0C15; --lk-bg-2:#07080F; --lk-surface:#141626; --lk-surface-2:#1C1F33; --lk-surface-3:#242842;
  --lk-line:#2A2E48; --lk-line-soft:#1E2136; --lk-line-strong:#666C94;
  --lk-text:#F2F3FA; --lk-muted:#A6ABC8; --lk-subtle:#8A90B0;
  --lk-accent:#8B7CFF; --lk-link:#B3A9FF; --lk-signal:#3EE6A6; --lk-danger:#FF7A8A;
  --lk-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -12px rgba(0,0,0,.55);
  background:radial-gradient(60% 70% at 85% 10%, rgba(118,88,255,.22), transparent 70%),radial-gradient(50% 60% at 10% 100%, rgba(240,51,95,.12), transparent 70%),#07080F;
  color:var(--lk-text)
}
html[data-theme="light"] .lk-srv{border-block:1px solid #1E2136}
.lk-srv__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 45%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 45%,#000 100%)}
.lk-srv__racks{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.lk-srv__rack{fill:#10122A;stroke:#262A47;stroke-width:1.5}
.lk-srv__unit{fill:#161933;stroke:#22264A}
.lk-srv__vent{stroke:#2C3157;stroke-width:2;stroke-linecap:round}
.lk-srv__bay{fill:#0D0F22;stroke:#22264A}
.lk-srv__leds .g{fill:#3EE6A6}.lk-srv__leds .v{fill:#8B7CFF}.lk-srv__leds .p{fill:#F0335F}.lk-srv__leds .y{fill:#FFC35A}
.lk-srv__in{position:relative}
.lk-srv__top{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:8px 32px}
.lk-srv__deskwrap{margin:4px auto 8px;width:100%;max-width:440px}
.lk-srv__desk{display:block;width:100%;height:auto}
@media (max-width:767.98px){.lk-srv__racks{left:50%;width:1300px;height:520px;transform:translateX(-50%)}}
@media (min-width:1024px){
  .lk-srv__top{grid-template-columns:minmax(0,720px) minmax(0,1fr);margin-bottom:28px}
  .lk-srv__top .lk-sec__head{margin-bottom:0}
  .lk-srv__deskwrap{max-width:none;margin:-40px -20px -30px 0}
  .lk-srv__desk{display:block;width:100%;max-width:520px;height:auto;margin-left:auto}
}
.lk-srv__bezel{fill:#0B0C15;stroke:#2A2E48;stroke-width:1.5}
.lk-srv__screen{fill:#0F1126}
.lk-srv__stand{fill:#1C1F33}
.lk-srv__table{fill:#1C1F33}
.lk-srv__grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.lk-srv__txt{font:700 9.5px/1 var(--lk-font-ui);fill:#fff;letter-spacing:.06em}
.lk-srv__txt--m{fill:#A6ABC8}
.lk-srv__bar{fill:#3EE6A6;opacity:.8;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.55)}
.lk-srv__bar.e1{fill:#8B7CFF;transform:scaleY(.8)}.lk-srv__bar.e2{transform:scaleY(.35)}.lk-srv__bar.e3{fill:#7CC4FF;transform:scaleY(.7)}.lk-srv__bar.e4{fill:#F0335F;transform:scaleY(.45)}
/* карточки и цепочка — «стекло» поверх серверной */
.lk-srv .lk-prov__chains,.lk-srv .lk-prov__card{background:rgba(20,22,38,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lk-srv .lk-chain--us{background:linear-gradient(rgba(20,22,38,.92),rgba(20,22,38,.92)) padding-box,var(--lk-brand-grad) border-box}
.lk-srv .lk-badge--signal{color:var(--lk-signal)}
@media (prefers-reduced-motion:no-preference){
  .lk-srv__leds .b1{animation:lk-led 1.3s steps(1) infinite}
  .lk-srv__leds .b2{animation:lk-led 2.1s steps(1) infinite}
  .lk-srv__leds .b3{animation:lk-led-fast .55s steps(1) infinite}
  .lk-srv__leds .b4{animation:lk-led 3.4s steps(1) infinite}
  .lk-srv__leds .d1{animation-delay:-.3s}.lk-srv__leds .d2{animation-delay:-.7s}.lk-srv__leds .d3{animation-delay:-1.1s}.lk-srv__leds .d4{animation-delay:-1.6s}.lk-srv__leds .d5{animation-delay:-2.3s}
  .lk-srv__term{animation:lk-term 9s linear infinite}
  .lk-srv__chart{animation:lk-chart 12s linear infinite}
  .lk-srv__rec{animation:lk-led 1.4s steps(1) infinite}
  .lk-srv__bar{animation:lk-srv-bar 1.8s ease-in-out infinite alternate}
  .lk-srv__bar.e1{animation-duration:1.3s;animation-delay:-.4s}.lk-srv__bar.e2{animation-duration:2.2s;animation-delay:-.9s}
  .lk-srv__bar.e3{animation-duration:1.6s;animation-delay:-1.2s}.lk-srv__bar.e4{animation-duration:1.1s;animation-delay:-.2s}
  .lk-srv.is-off *{animation-play-state:paused!important}
  @keyframes lk-led{0%{opacity:1}55%{opacity:.18}}
  @keyframes lk-led-fast{0%{opacity:1}50%{opacity:.3}}
  @keyframes lk-term{to{transform:translateY(-120px)}}
  @keyframes lk-chart{to{transform:translateX(-480px)}}
  @keyframes lk-srv-bar{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}} /* r12: было lk-bar — перекрывало keyframes полосы загрузки из lk-shell.css */
}

/* ======================================================================
   r12 (07.10): главная — лаконичнее, удобнее на телефоне, больше движения.
   Всё движение — внутри prefers-reduced-motion:no-preference; скрытые до появления состояния — только под html.lk-anim.
   ====================================================================== */

/* ---------- 3. акцент в H1: градиентная заливка слова (без поддержки — сплошной цвет) */
.lk-grad-text{color:var(--lk-brand-a)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lk-grad-text{background:linear-gradient(100deg,var(--lk-brand-a) 0%,#B04BD8 52%,var(--lk-brand-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
html[data-theme="dark"] .lk-grad-text{background-image:linear-gradient(100deg,#8B7CFF 0%,#C66BFF 50%,#FF5C83 100%)}

/* ---------- 2. первый экран на телефоне */
@media (max-width:767.98px){
  .lk-hero{padding:28px 0 36px}
  .lk-hero__text{gap:16px}
  .lk-hero__h1{font-size:clamp(30px,8.4vw,44px);line-height:1.04;max-width:none;text-wrap:balance}
  .lk-hero__lead{font-size:16px;line-height:1.55}
  .lk-hero__cta{gap:10px;width:100%}
  .lk-trust{align-self:stretch;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent)}
  .lk-trust::-webkit-scrollbar{display:none}
  .lk-trust li{flex:none;white-space:nowrap;min-height:34px;padding:0 12px 0 10px;border-radius:var(--lk-pill);border:1px solid var(--lk-line-soft);background:color-mix(in srgb,var(--lk-surface) 80%,transparent);font-size:13px}
  .lk-trust .lk-i{width:16px;height:16px}
  .lk-hero__grid{gap:44px;grid-template-columns:minmax(0,1fr)}
  .lk-hero__text{min-width:0}
}
@media (max-width:639.98px){.lk-hero__note{display:none}}

/* ---------- 4. «живой» фон первого экрана: мягкая аура дрейфует (только ≥768px) */
.lk-hero{isolation:isolate}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .lk-hero::after{content:"";position:absolute;z-index:-1;inset:-25% -15% -10%;pointer-events:none;will-change:transform;
    background:radial-gradient(34% 40% at 30% 30%,rgba(118,88,255,.20),transparent 70%),radial-gradient(30% 36% at 72% 60%,rgba(240,51,95,.13),transparent 70%);
    animation:lk-aura 18s ease-in-out infinite alternate}
  html[data-theme="light"] .lk-hero::after{opacity:.6}
  .lk-hero.is-off::after{animation-play-state:paused}
  @keyframes lk-aura{0%{transform:translate3d(-4%,-2%,0) scale(1)}50%{transform:translate3d(3%,3%,0) scale(1.06)}100%{transform:translate3d(6%,-3%,0) scale(.98)}}
}

/* ---------- 5. «Пример заказа»: наклон к курсору и блик (только мышь; JS ставит --rx/--ry/--mx/--my) */
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .lk-hero-art.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--lk-ease-out);transform-style:flat}
  .lk-hero-art.is-tilt.is-moving{transition:transform .12s linear}
  .lk-hero-ticket::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s var(--lk-ease);
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 45%)}
  html[data-theme="light"] .lk-hero-ticket::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 45%)}
  .lk-hero-art.is-moving .lk-hero-ticket::after{opacity:1}
}

/* ---------- 6. площадки: карточка — блок со ссылкой на всю площадь, «Гайд» — отдельная ссылка внутри */
.lk-plat-grid{grid-auto-rows:1fr}
.lk-plat{position:relative;--brand:var(--lk-accent)}
.lk-plat__link{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0;color:inherit!important;text-decoration:none!important}
.lk-plat__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.lk-plat__link:focus-visible{box-shadow:none!important;outline:none}
.lk-plat__link:focus-visible::after{box-shadow:var(--lk-focus)}
.lk-plat__top{min-width:0}
.lk-plat__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-plat.has-guide .lk-plat__top > .lk-i{display:none}
.lk-plat.has-guide .lk-plat__top{padding-right:70px}
.lk-plat__meta{flex-wrap:wrap;row-gap:2px;margin-top:auto}
.lk-plat__from,.lk-plat__cnt{white-space:nowrap}
.lk-plat__guide{position:absolute;z-index:2;top:16px;right:14px;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 7px;border-radius:var(--lk-pill);border:1px solid var(--lk-line);background:var(--lk-bg);color:var(--lk-muted)!important;font:600 12px/1 var(--lk-font-ui);text-decoration:none!important;transition:color .15s var(--lk-ease),border-color .15s var(--lk-ease),background-color .15s var(--lk-ease)}
.lk-plat__guide .lk-i{width:14px;height:14px}
.lk-plat__guide:hover{color:var(--lk-text)!important;border-color:color-mix(in srgb,var(--brand) 55%,var(--lk-line));background:var(--lk-surface-2)}
.lk-plat:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--lk-line-soft))}
@media (max-width:639.98px){
  .lk-plat{gap:10px}
  .lk-plat__meta{flex-direction:column;align-items:flex-start;gap:3px}
  .lk-plat.has-guide .lk-plat__top{padding-right:0}
  .lk-plat__top{font-size:15px;gap:8px}
  .lk-plat__guide{top:auto;bottom:10px;right:10px;width:32px;height:32px;padding:0;justify-content:center}
  .lk-plat__guide span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .lk-plat .lk-brand{transition:transform .5s var(--lk-ease-spring)}
  .lk-plat:hover .lk-brand{transform:rotate(-6deg) scale(1.06)}
  .lk-plat:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent),0 14px 34px -16px color-mix(in srgb,var(--brand) 70%,transparent)}
}
/* «О сервисе»: абзац, перенесённый из «Площадок» */
.lk-about__lead{margin:24px 0 0;max-width:80ch;font-size:15px;line-height:1.65;color:var(--lk-muted)}

/* ---------- 7. появление: заголовки «проявляются» сверху вниз, элементы сетки — лесенкой (--d ставит JS) */
@media (prefers-reduced-motion:no-preference){
  html.lk-anim .lk-rv .lk-sec__title{clip-path:inset(-.2em -.1em 100% -.1em)}
  html.lk-anim .lk-rv.is-in .lk-sec__title{clip-path:inset(-.2em -.1em -.35em -.1em);transition:clip-path .7s var(--lk-ease-out) calc(var(--d,0ms) + 60ms)}
}

/* ---------- 8. «Как это работает»: линия прогресса и «пружинные» номера шагов */
@media (min-width:768px){
  .lk-steps{position:relative}
  .lk-steps::before,.lk-steps::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;pointer-events:none}
  .lk-steps::before{background:var(--lk-line-soft)}
  .lk-steps::after{background:var(--lk-brand-line);transform-origin:left}
}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.lk-anim .lk-steps.is-wait::after{transform:scaleX(0)}
  html.lk-anim .lk-steps.is-wait.is-fill::after{transform:none;transition:transform 1.4s var(--lk-ease-out) .15s}
}
@media (prefers-reduced-motion:no-preference){
  html.lk-anim .lk-steps > .lk-step.lk-rv::before{transform-origin:left center;transform:scale(.3);opacity:0}
  html.lk-anim .lk-steps > .lk-step.lk-rv.is-in::before{transform:none;opacity:1;transition:transform .6s var(--lk-ease-spring) calc(var(--d,0ms) + 180ms),opacity .25s ease-out calc(var(--d,0ms) + 180ms)}
}
.lk-steps > .lk-step::before{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:9px 9px 9px 3px;background:var(--lk-accent-soft)}

/* ---------- #free: компактный баннер (r12) */
.lk-free.lk-free--bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text cta" "list list";gap:14px 32px;padding:22px 28px}
.lk-free--bar .lk-free__text{grid-area:text;display:flex;flex-direction:column;gap:6px;min-width:0}
.lk-free--bar .lk-kicker{display:none} /* r12: «Бесплатно» уже в заголовке */
.lk-free--bar .lk-sec__title{font-size:clamp(22px,2.2vw,28px)}
.lk-free--bar .lk-sec__lead{margin:0;font-size:14.5px;max-width:none}
.lk-free__cta{grid-area:cta;align-self:center}
.lk-free--bar .lk-free__list{grid-area:list;flex-direction:row;flex-wrap:wrap;gap:8px;max-height:36px;overflow:hidden}
.lk-free--bar .lk-free__item{flex:0 1 auto;max-width:280px;min-height:34px;padding:0 12px;border-radius:var(--lk-pill);font-size:13px;white-space:nowrap}
.lk-free--bar .lk-free__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lk-free__name.is-caps{text-transform:lowercase}
.lk-free__name.is-caps::first-letter{text-transform:uppercase}
@media (max-width:767.98px){
  .lk-free.lk-free--bar{grid-template-columns:1fr;grid-template-areas:"text" "list" "cta";padding:22px 18px;gap:14px}
  .lk-free--bar .lk-free__list{flex-wrap:nowrap;max-height:none;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}
  .lk-free--bar .lk-free__list::-webkit-scrollbar{display:none}
  .lk-free--bar .lk-free__item{flex:none;max-width:240px}
  .lk-free__cta .lk-btn{width:100%}
}

/* ---------- 10. популярные услуги на телефоне: компактная строка (~80px) */
@media (max-width:767px){
  .lk-home-pop .lk-table--cards tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"svc svc svc price" "id mm . price";gap:4px 6px;align-items:center;padding:12px 14px;margin-bottom:8px}
  .lk-home-pop .lk-table--cards td{display:block;width:auto;padding:0;text-align:left;min-width:0}
  .lk-home-pop .lk-table--cards td::before{display:none}
  .lk-home-pop .lk-table--cards td:nth-child(1){grid-area:id;font-size:12px;color:var(--lk-subtle)}
  .lk-home-pop .lk-table--cards td:nth-child(1)::before{display:inline;content:"ID\00a0";font-size:inherit;color:inherit}
  .lk-home-pop .lk-table--cards td:nth-child(2){grid-area:svc}
  .lk-home-pop .lk-table--cards td:nth-child(3){grid-area:price;align-self:center;padding-left:10px;text-align:right}
  .lk-home-pop .lk-table--cards td:nth-child(4){grid-area:mm;font-size:12px;white-space:nowrap}
  .lk-home-pop .lk-table--cards td:nth-child(4)::before{display:inline;content:"·\00a0";color:var(--lk-subtle)}
  .lk-home-pop .lk-pop__svc{gap:8px;font-size:14px;line-height:1.35}
  .lk-home-pop .lk-pop__svc .lk-dot{margin-top:6px}
  .lk-home-pop .lk-pop__svc > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lk-home-pop .lk-price{font:700 17px/1.1 var(--lk-font-display);letter-spacing:-.01em}
}

/* ---------- 11. FAQ: плавное раскрытие (где поддерживается) и единый значок +/× */
.lk-faq-ico{position:relative;flex:none;width:22px;height:22px;border-radius:7px;color:var(--lk-subtle);transition:transform .3s var(--lk-ease-out),color .15s var(--lk-ease)}
.lk-faq-ico::before,.lk-faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:currentColor}
.lk-faq-ico::after{transform:rotate(90deg)}
.lk-home-faq__item[open] .lk-faq-ico{transform:rotate(45deg);color:var(--lk-accent)}
.lk-home-faq__q:hover .lk-faq-ico{color:var(--lk-text)}
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    .lk-home-faq__list{interpolate-size:allow-keywords}
    .lk-home-faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--lk-ease-out),content-visibility .4s allow-discrete}
    .lk-home-faq__item[open]::details-content{block-size:auto}
  }
}

/* ---------- 12. финальный призыв: медленный блик по градиенту; «О сервисе» — тише */
.lk-final{position:relative;overflow:hidden;isolation:isolate}
.lk-final::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-50%;width:200%;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%)}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .lk-final::before{animation:lk-final-sheen 11s ease-in-out infinite alternate}
  .lk-final.is-off::before{animation-play-state:paused}
  @keyframes lk-final-sheen{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
}
@media (max-width:767.98px){.lk-final::before{display:none}}
#about .lk-seo .lk-prose{font-size:14.5px;line-height:1.7;color:var(--lk-muted)}
#about .lk-seo .lk-prose h1,#about .lk-seo .lk-prose h2{color:var(--lk-text)}

/* ---------- 13. серверная в светлой теме: мягкие края вместо жёстких границ; мелкий текст контрастнее */
html[data-theme="light"] .lk-srv{border-block:0;padding-block:128px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%)}
@media (max-width:767.98px){html[data-theme="light"] .lk-srv{padding-block:96px}}
.lk-srv .lk-prov__fine{color:var(--lk-muted)}
@media (max-width:767.98px){
  .lk-srv__leds *,.lk-srv__term,.lk-srv__chart,.lk-srv__rec,.lk-srv__bar{animation:none!important}
}

/* ---------- 14. мелкие исправления */
/* финальная кнопка на телефоне переносит текст и не вылезает */
@media (max-width:767.98px){
  .lk-final{padding:24px 20px}
  .lk-final__btn{width:100%;max-width:100%;height:auto;min-height:52px;padding:12px 18px;white-space:normal;text-align:center;line-height:1.25}
}
/* «Все услуги / вопросы / статьи» — прозрачная кнопка ровно по краю контейнера */
.lk-sec__head--row > .lk-btn--ghost{margin-right:-18px}
.lk-faq .lk-btn--ghost{margin-left:-18px}
@media (max-width:639.98px){body.lk-site--home .lk-sec__head--row{flex-direction:column;align-items:flex-start;gap:8px}.lk-sec__head--row > .lk-btn--ghost{margin-right:0;margin-left:-18px}}
/* точки карусели: зона нажатия 40px */
.lk-ex__dot{position:relative}
.lk-ex__dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:40px;margin-top:-20px}
/* конфигуратор на телефоне: скидка в строке с ценой, платформы ровной сеткой */
@media (max-width:479.98px){
  .lk-cfgad__plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lk-cfgad__plat{justify-content:center}
  .lk-cfgad__per{flex-basis:100%}
  .lk-cfgad__sum{align-items:center}
  .lk-cfgad__disc{margin-left:auto}
}
/* картинки блога: заглушка, если файл не загрузился */
.lk-post__media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--lk-r-lg);overflow:hidden;
  background:radial-gradient(80% 90% at 85% 0%,color-mix(in srgb,var(--lk-brand-b) 26%,transparent),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--lk-brand-a) 30%,var(--lk-surface)),var(--lk-surface-2))}
.lk-post__media .lk-post__img{position:absolute;inset:0;height:100%;border:0}
.lk-post__media .lk-post__ph{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;color:var(--lk-text);opacity:.55}
.lk-post__media.is-broken .lk-post__img{visibility:hidden}
.lk-post__media{border:1px solid var(--lk-line-soft)}
@supports not (aspect-ratio:16/9){.lk-post__media::before{content:"";display:block;padding-top:56.25%}} /* Safari 14 */

/* ---------- 9. мобильная плашка с главной кнопкой (только гостю, только ≤767px) */
.lk-dock{display:none}
@media (max-width:767.98px){
  .lk-dock.is-ready{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 76px calc(10px + env(safe-area-inset-bottom)) 12px;
    background:var(--lk-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--lk-line-soft);
    transform:translateY(110%);visibility:hidden}
  .lk-dock.is-ready.is-on{transform:none;visibility:visible}
  .lk-dock__btn{width:100%;--h:48px;padding:0 14px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:767.98px) and (prefers-reduced-motion:no-preference){
  .lk-dock.is-ready{transition:transform .35s var(--lk-ease-out),visibility 0s linear .35s}
  .lk-dock.is-ready.is-on{transition:transform .35s var(--lk-ease-out),visibility 0s}
}
#about .lk-seo__more{margin-left:-18px}

/* r12: полупрозрачный фон плашки — только где есть color-mix (Safari < 16.2 — сплошной) */
@supports (background:color-mix(in srgb,#000 86%,transparent)){@media (max-width:767.98px){.lk-dock.is-ready{background:color-mix(in srgb,var(--lk-bg) 86%,transparent)}}}