/* ===== MKR — заглушка товарного лендинга. Тёмный премиум, язык сайта ===== */
.mkr-stub{
  --ink:#f8faff; --muted:rgba(216,222,234,.74); --muted-2:rgba(216,222,234,.5);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --grad:linear-gradient(135deg,#2e69f6 0%,#6942fb 48%,#d45cff 100%);
  --grad-dim:linear-gradient(135deg,rgba(46,105,246,.6),rgba(105,66,251,.6) 48%,rgba(212,92,255,.6));
  --ease:cubic-bezier(.22,1,.36,1);
  --frame:calc(100vw - clamp(40px,5vw,96px));
  --radius:8px; --radius-xl:22px;
  position:relative;isolation:isolate;color:var(--ink);
  font-family:"Inter","Akzidenz-Grotesk Pro","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background:
    radial-gradient(circle at 50% 8%,rgba(46,105,246,.13),transparent 36vw),
    radial-gradient(circle at 82% 70%,rgba(212,92,255,.09),transparent 38vw),
    linear-gradient(180deg,#030409 0%,#07080d 46%,#050608 100%);
}
.mkr-stub *{box-sizing:border-box}
.mkr-stub p{margin:0;color:var(--muted);text-wrap:pretty}
.mkr-stub h1{margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.mkr-stub a{text-decoration:none;color:inherit}
.stub-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stub-nowrap{white-space:nowrap}

.stub-wrap{width:var(--frame);max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.stub-hero{min-height:100svh;display:flex;align-items:center;padding:clamp(110px,14vh,160px) 0 clamp(50px,7vh,90px)}

.stub-scene{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(15,18,28,.72),rgba(7,9,16,.86)) padding-box, var(--grad-dim) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}

/* ---- «Терминал сборки»: бегущие строки кода ---- */
.stub-code{position:relative;display:flex;flex-direction:column;height:clamp(320px,30vw,430px);
  background:
    radial-gradient(circle at 78% 18%,rgba(105,66,251,.16),transparent 55%),
    radial-gradient(circle at 18% 85%,rgba(46,105,246,.12),transparent 50%),
    #0a0c14}
.stub-code__bar{display:flex;align-items:center;gap:7px;flex:none;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(5,6,10,.6)}
.stub-code__bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.stub-code__bar i:nth-child(1){background:rgba(255,95,86,.75)}
.stub-code__bar i:nth-child(2){background:rgba(255,189,46,.75)}
.stub-code__bar i:nth-child(3){background:rgba(39,201,63,.7)}
.stub-code__bar span{margin-left:8px;font-size:.78rem;letter-spacing:.04em;color:var(--muted-2)}
.stub-code__body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:18px 20px 20px;overflow:hidden;
  font-family:ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
  font-size:clamp(.7rem,.82vw,.82rem);line-height:1.8;color:rgba(216,222,234,.88);
  white-space:pre-wrap;overflow-wrap:break-word;text-align:left}
.stub-code__body .k{color:#6f9dff}
.stub-code__body .s{color:#e08bff}
.stub-code__body .c{color:rgba(216,222,234,.38)}
.stub-code__body .g{color:#6fe3a5}
.stub-code__body .p{color:#a88bff}
.stub-code__body .cur{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:text-bottom;border-radius:2px;
  background:var(--grad);animation:stubCur 1s steps(2,start) infinite}
@keyframes stubCur{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.stub-code__body .cur{animation:none;opacity:0}}
.mkr-stub .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.stub-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.stub-eyebrow::before{content:"";width:28px;height:1px;background:var(--grad)}
.stub-title{font-size:clamp(2rem,3.8vw,3.2rem);font-weight:740;letter-spacing:-.03em;margin:16px 0 6px}
.stub-lead{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.6;max-width:520px;margin-top:12px}

.stub-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Баннер интерактивной инструкции — тот же приём, что у баннеров на лендингах:
   тёмная плашка, брендовый паттерн подложкой, свечение и эталонная CTA. */
.stub-guide{position:relative;overflow:hidden;display:block;margin-top:28px;
  padding:22px 24px;border-radius:var(--radius-xl);border:1px solid var(--line-2);
  background:radial-gradient(circle at 16% 0,rgba(105,66,251,.34),transparent 66%),
    linear-gradient(180deg,#0b0d16,#060710);
  box-shadow:0 28px 70px rgba(0,0,0,.44);transition:border-color .35s var(--ease)}
.stub-guide:hover{border-color:rgba(212,92,255,.48)}
.stub-guide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("mkr-pattern.webp");background-size:260px;
  filter:grayscale(1) brightness(.7);opacity:.08}
.stub-guide__eyebrow{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.stub-guide__eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--grad)}
.stub-guide__title{position:relative;z-index:1;display:block;margin-top:12px;
  font-size:clamp(1.08rem,1.5vw,1.32rem);font-weight:700;line-height:1.28;color:var(--ink);text-wrap:balance}
.stub-guide__go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  min-height:40px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(5,6,8,.86),rgba(5,6,8,.86)) padding-box,var(--grad-dim) border-box;
  font-size:.92rem;font-weight:680;color:var(--ink);transition:background 320ms ease}
.stub-guide:hover .stub-guide__go{background:linear-gradient(180deg,rgba(5,6,8,.86),rgba(5,6,8,.86)) padding-box,var(--grad) border-box}
.stub-guide__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.stub-guide:hover .stub-guide__go svg{transform:translate(3px,-3px)}

.stub-buy{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.stub-buy__note{display:block;margin-bottom:12px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.stub-buy__btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Эталонная CTA ---- */
.stub-cta{display:inline-grid;grid-template-columns:minmax(0,auto) 40px;gap:7px;width:max-content;max-width:100%;text-decoration:none;outline:none}
.stub-cta__label,.stub-cta__icon{
  --c:linear-gradient(135deg,#2e69f6 0%,#6942fb 48%,#d45cff 100%);
  --cdim:linear-gradient(135deg,rgba(46,105,246,.72) 0%,rgba(105,66,251,.72) 48%,rgba(212,92,255,.72) 100%);
  min-height:40px;border:1px solid transparent;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box, var(--cdim) border-box;
  transition:background 320ms ease;color:#f8faff}
.stub-cta:hover .stub-cta__label,.stub-cta:hover .stub-cta__icon,
.stub-cta:focus-visible .stub-cta__label,.stub-cta:focus-visible .stub-cta__icon{
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box, var(--c) border-box}
.stub-cta__label{display:flex;align-items:center;padding-inline:24px;font-size:.96rem;font-weight:680;line-height:1;white-space:nowrap}
.stub-cta__icon{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:hidden}
.stub-arrow{position:absolute;left:50%;top:50%;width:18px;height:18px;fill:none;stroke:#f8faff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%);transition:transform 420ms cubic-bezier(.4,0,.2,1)}
.stub-arrow--next{transform:translate(calc(-50% - 36px),calc(-50% + 36px))}
.stub-cta:hover .stub-arrow,.stub-cta:focus-visible .stub-arrow{transform:translate(calc(-50% + 36px),calc(-50% - 36px))}
.stub-cta:hover .stub-arrow--next,.stub-cta:focus-visible .stub-arrow--next{transform:translate(-50%,-50%)}
.stub-cta--ghost .stub-cta__label,.stub-cta--ghost .stub-cta__icon{
  --cdim:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.16))}
.stub-cta--wb .stub-cta__label,.stub-cta--wb .stub-cta__icon{
  --c:linear-gradient(135deg,#cb11ab 0%,#7a1fa2 100%);
  --cdim:linear-gradient(135deg,rgba(203,17,171,.6),rgba(122,31,162,.6))}
.stub-cta--ym .stub-cta__label,.stub-cta--ym .stub-cta__icon{
  --c:linear-gradient(135deg,#ffd23d 0%,#ff9d00 100%);
  --cdim:linear-gradient(135deg,rgba(255,210,61,.62),rgba(255,157,0,.62))}

/* Плавное появление сцены */
.stub-scene{animation:stubFloat 7s ease-in-out infinite}
@keyframes stubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.stub-scene{animation:none}}

@media (max-width: 900px){
  .stub-wrap{grid-template-columns:1fr;gap:28px}
  .stub-hero{min-height:0;padding-top:clamp(96px,12vh,130px)}
  .stub-scene{order:-1;max-width:520px}
}
@media (max-width: 560px){
  .stub-actions .stub-cta,.stub-buy__btns .stub-cta{width:100%;grid-template-columns:minmax(0,1fr) 40px}
  .stub-cta__label{justify-content:center}
}