/* ===== MKR — Каталог. Тёмный шоурум, bento-витрина, язык сайта ===== */
.mkr-kat{
  --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-l:16px; --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% 4%,rgba(46,105,246,.16),transparent 34vw),
    radial-gradient(circle at 88% 22%,rgba(212,92,255,.12),transparent 36vw),
    radial-gradient(circle at 8% 40%,rgba(105,66,251,.13),transparent 38vw),
    radial-gradient(circle at 85% 58%,rgba(46,105,246,.11),transparent 38vw),
    radial-gradient(circle at 12% 76%,rgba(212,92,255,.10),transparent 36vw),
    radial-gradient(circle at 80% 92%,rgba(105,66,251,.11),transparent 38vw),
    linear-gradient(180deg,#030409 0%,#07080d 46%,#050608 100%);
}
.mkr-kat *{box-sizing:border-box}
.mkr-kat p{margin:0;color:var(--muted);text-wrap:pretty}
.mkr-kat h1,.mkr-kat h2,.mkr-kat h3{margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.mkr-kat a{text-decoration:none;color:inherit}
.kat-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.kat-wrap{width:var(--frame);max-width:1180px;margin:0 auto}
.kat-section{position:relative;padding:clamp(40px,6vh,84px) 0}
.kat-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.kat-eyebrow::before{content:"";width:28px;height:1px;background:var(--grad)}
.kat-lead{font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--muted);line-height:1.6;max-width:760px;margin-top:16px}

/* ---- Эталонная CTA ---- */
.kat-cta{display:inline-grid;grid-template-columns:minmax(0,auto) 40px;gap:7px;width:max-content;max-width:100%;text-decoration:none;outline:none}
.kat-cta__label,.kat-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}
.kat-cta:hover .kat-cta__label,.kat-cta:hover .kat-cta__icon,
.kat-cta:focus-visible .kat-cta__label,.kat-cta:focus-visible .kat-cta__icon{
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box, var(--c) border-box}
.kat-cta__label{display:flex;align-items:center;padding-inline:32px;font-size:.98rem;font-weight:680;line-height:1;letter-spacing:.005em;white-space:nowrap}
.kat-cta__icon{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:hidden}
.kat-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)}
.kat-arrow--next{transform:translate(calc(-50% - 36px),calc(-50% + 36px))}
.kat-cta:hover .kat-arrow,.kat-cta:focus-visible .kat-arrow{transform:translate(calc(-50% + 36px),calc(-50% - 36px))}
.kat-cta:hover .kat-arrow--next,.kat-cta:focus-visible .kat-arrow--next{transform:translate(-50%,-50%)}
.kat-cta--ghost .kat-cta__label,.kat-cta--ghost .kat-cta__icon{
  --cdim:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.16))}
/* Маркетплейсы — фирменные градиенты, как .pro-cta--wb/--ym на лендингах */
.kat-cta--wb .kat-cta__label,.kat-cta--wb .kat-cta__icon{
  --c:linear-gradient(135deg,#cb11ab 0%,#7a1fa2 100%);
  --cdim:linear-gradient(135deg,rgba(203,17,171,.6),rgba(122,31,162,.6))}
.kat-cta--ym .kat-cta__label,.kat-cta--ym .kat-cta__icon{
  --c:linear-gradient(135deg,#ffd23d 0%,#ff9d00 100%);
  --cdim:linear-gradient(135deg,rgba(255,210,61,.62),rgba(255,157,0,.62))}

/* ---- ГЕРОЙ ---- */
.kat-hero{padding-top:clamp(120px,15vh,180px);padding-bottom:clamp(20px,3vh,40px)}
.kat-hero__title{font-size:clamp(2.4rem,4.6vw,4rem);font-weight:740;letter-spacing:-.03em;line-height:1.02;margin:18px 0 6px}
/* Плитки статистики — как .abt-stats__row на «О компании» */
.kat-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0;padding:0;list-style:none}
.kat-hero__stats li{display:flex;flex-direction:column;gap:6px;padding:clamp(22px,2.6vw,32px);border-radius:var(--radius-l);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 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .4s var(--ease)}
.kat-hero__stats li:hover{transform:translateY(-4px)}
.kat-hero__stats b{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:780;letter-spacing:-.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kat-hero__stats b i{-webkit-text-fill-color:#ffd23d;font-style:normal;font-size:.7em;margin-left:.06em}
.kat-hero__stats span{color:var(--muted-2);font-size:.92rem}

/* ---- Шапка направления ---- */
.kat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3.6vh,40px)}
.kat-head h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:730;margin-top:14px}
.kat-head__sub{margin-top:12px;max-width:640px;font-size:1rem;line-height:1.55;color:var(--muted-2)}
.kat-head .kat-cta{flex:none;margin-bottom:4px}

/* ---- Bento-сетка ---- */
.kat-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.kat-col-7{grid-column:span 7}
.kat-col-6{grid-column:span 6}
.kat-col-5{grid-column:span 5}
.kat-stack{display:grid;gap:20px;align-content:stretch}

/* ---- Карточка товара ---- */
.kat-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl);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 20px 54px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.kat-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(105,66,251,.12)}
.kat-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease)}
.kat-card:hover::after{opacity:1}

.kat-flag{position:absolute;z-index:2;top:18px;left:18px;padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:680;letter-spacing:.06em;text-transform:uppercase;color:#f8faff;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(9,9,20,.88),rgba(9,9,20,.88)) padding-box, var(--grad) border-box}

.kat-stage{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0a0c14}
/* img — абсолютом: иначе интринсик-высота фото раздувает грид-ряд bento */
.kat-stage img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kat-card:hover .kat-stage img{transform:scale(1.045)}
.kat-glow{position:absolute;inset:-20%;z-index:0;background:radial-gradient(circle at 50% 60%,rgba(105,66,251,.28),transparent 62%)}
.kat-glow--m{background:radial-gradient(circle at 50% 60%,rgba(46,105,246,.24),transparent 62%)}
/* Вертикальные карточки bento: hero-сцена 16:9 (широкие фото *-wide.jpg
   генерятся под этот формат). Сцене соседней узкой карточки задаём ту же
   высоту, что у hero (ширина col-7 × 9/16), чтобы заголовки обеих карточек
   ряда начинались на одной линии: (frame − gap) × 7/12 × 9/16 = 0.328125 */
.kat-card--hero .kat-stage{aspect-ratio:16/9;flex:none}
.kat-bento>.kat-card:not(.kat-card--hero):not(.kat-card--row):not(.kat-card--wide) .kat-stage{flex:none;height:calc((min(var(--frame),1180px) - 20px)*0.328125)}

/* flex:1 — тело заполняет карточку до низа, .kat-actions прижаты к низу */
.kat-body{display:flex;flex-direction:column;flex:1;gap:14px;padding:clamp(20px,2.2vw,28px)}
.kat-name{font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:740;letter-spacing:-.02em}
.kat-name span{display:block;margin-top:4px;font-size:.86rem;font-weight:640;letter-spacing:.08em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kat-specs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.kat-specs li{position:relative;padding-left:18px;font-size:.95rem;line-height:1.5;color:var(--muted)}
.kat-specs li::before{content:"";position:absolute;left:0;top:.56em;width:8px;height:2px;border-radius:2px;background:var(--grad)}
.kat-specs b{color:var(--ink);font-weight:660}

.kat-price{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.kat-price__num{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:780;letter-spacing:-.02em;color:var(--ink)}
.kat-price__mp{font-size:.85rem;color:var(--muted-2)}

/* Ряд кнопок карточки: все кнопки одной высоты и одной ширины (ровная сетка;
   на широкой карточке — в строку, на узкой — столбиком одинаковой ширины) */
.kat-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:auto;padding-top:8px}
.kat-actions .kat-cta{width:100%;grid-template-columns:minmax(0,1fr) 40px}
.kat-actions .kat-cta__label{justify-content:center;white-space:normal;text-align:center;padding:0 16px}

/* Горизонтальные карточки (M5/M4, O2) */
.kat-card--row{flex-direction:row;align-items:stretch}
.kat-card--row .kat-stage{flex:0 0 42%;aspect-ratio:auto;min-height:100%}
.kat-card--row .kat-body{flex:1;gap:10px;padding:clamp(18px,1.8vw,24px)}
.kat-card--row .kat-name{font-size:1.2rem}
.kat-card--row .kat-specs li{font-size:.88rem}
.kat-card--row .kat-price__num{font-size:1.3rem}
.kat-card--wide{flex-direction:row;align-items:stretch}
.kat-card--wide .kat-stage{flex:0 0 46%;aspect-ratio:auto}
.kat-card--wide .kat-body{flex:1}

/* Мини-сравнение */
.kat-card--cmp .kat-body{height:100%;gap:16px}
.kat-cmp{width:100%;border-collapse:collapse;font-size:.92rem}
.kat-cmp th,.kat-cmp td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line)}
.kat-cmp tbody th{text-align:left;font-weight:500;color:var(--muted-2)}
.kat-cmp thead th{font-weight:700;color:var(--ink);font-size:.95rem}
.kat-cmp td{color:var(--muted-2)}
.kat-cmp td.y{color:var(--ink)}
.kat-cmp .kat-cmp__hot{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;font-weight:700}
.kat-card--cmp .kat-cta{margin-top:auto}

/* ---- ФИНАЛ — общий стиль финальных баннеров (как .pro-final/.izm-final) ---- */
.kat-final{padding-bottom:clamp(70px,9vh,120px)}
.kat-final__card{position:relative;text-align:center;padding:clamp(44px,7vw,96px) clamp(24px,5vw,72px);border-radius:24px;overflow:hidden;
  background:radial-gradient(circle at 50% 0,rgba(105,66,251,.3),transparent 60%),linear-gradient(180deg,#0b0d16,#060710);border:1px solid var(--line-2);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.kat-final__pattern{position:absolute;inset:0;background-image:url("img/mkr-pattern.webp");background-size:300px;filter:grayscale(1) brightness(.7);opacity:.1}
.kat-final__card h2,.kat-final__card p,.kat-final__cta{position:relative;z-index:1}
.kat-final__card h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:730}
.kat-final__card .kat-lead{max-width:620px;margin:14px auto 30px}
.kat-final__cta{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:14px;justify-content:center}
.kat-final__cta .kat-cta{width:100%;grid-template-columns:minmax(0,1fr) 40px}
.kat-final__cta .kat-cta__label{justify-content:center;text-align:center;white-space:nowrap;padding-inline:16px}
@media(max-width:640px){.kat-final__cta{grid-template-columns:minmax(0,340px)}}

/* ============ Reveal «из темноты на свет» ============ */
/* Секции (шапки, финал) — мягкий подъём, как [data-reveal] на других страницах */
.has-reveal [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.has-reveal [data-reveal].is-revealed{opacity:1;transform:none}
/* Каждая карточка следит за собой (JS наблюдает [data-card] отдельно) и
   «выходит на свет» из тени, когда сама входит в экран; соседка по ряду —
   с лёгкой эстафетой через transition-delay */
.has-reveal [data-card]{opacity:0;transform:translateY(34px) scale(.985);filter:brightness(.3) saturate(.55);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter 1.2s ease}
.has-reveal [data-card].is-revealed{opacity:1;transform:none;filter:brightness(1) saturate(1)}
.has-reveal .kat-bento>*:nth-child(2)[data-card],
.has-reveal .kat-bento>*:nth-child(2) [data-card]:first-child{transition-delay:.14s}
.has-reveal .kat-stack [data-card]+[data-card]{transition-delay:.14s}
@media (prefers-reduced-motion: reduce){
  .has-reveal [data-reveal],.has-reveal [data-card]{opacity:1;transform:none;filter:none;transition:none}
}

/* ============ Адаптив ============ */
@media (max-width: 1024px){
  .kat-card--hero{min-height:480px}
}
@media (max-width: 900px){
  .kat-col-7,.kat-col-6,.kat-col-5{grid-column:span 12}
  .kat-head{flex-direction:column;align-items:flex-start}
  /* Мобилка: у всех карточек единый квадратный формат сцены — широкие фото
     режутся только по фону (продукт в центре), квадратные встают как есть */
  .kat-card--hero .kat-stage,
  .kat-bento>.kat-card:not(.kat-card--hero):not(.kat-card--row):not(.kat-card--wide) .kat-stage{aspect-ratio:1/1;flex:none;min-height:0;height:auto}
}
@media (max-width: 640px){
  .kat-flag{top:12px;left:12px;padding:5px 10px;font-size:.66rem;letter-spacing:.04em}
  .kat-card--row,.kat-card--wide{flex-direction:column}
  .kat-card--row .kat-stage,.kat-card--wide .kat-stage{flex:none;aspect-ratio:1/1;min-height:0}
  .kat-hero__stats{grid-template-columns:1fr;gap:12px}
  .kat-actions{gap:10px}
  .kat-cta__label{padding-inline:20px}
}