/* /mk/ — македонска страница за работодавачи во Северна Македонија (2026-11-01, v2).
   Сопствен изглед по примерот на parkich.com/arirang (не е превод на српската почетна):
   ноќна фотографија со центриран наслов и картичка „готови CV“ во првиот екран, темна лента со бројки,
   секции на хартиена позадина со големи наслови со точка, бенто мрежа со фотографии, лента со фотографии,
   темна секција за агенцијата, временска линија, ЧПП во две колони, темна секција со формулар, плутачка навигација.
   Ефекти само во првиот екран (бавно зумирање, наслов по зборови, пауза); prefers-reduced-motion ги исклучува.
   Фонтови: Onest (наслови) + Golos Text (текст), со македонска кирилица (Ѓ Ќ Ѕ Џ Љ Њ Ј). Копчиња правоаголни (8 px). */

.mk2 {
  --paper: #f6f3ec; --card: #fffdf9; --line: #e3dccf; --ink: #121a2b; --mute: #535a67;
  --navy: #0f1a2e; --night: #0b1424; --red: #c8303e; --red-h: #a92633; --gold: #f2c56b; --sky: #a9bcff;
  --display: "Onest", "Golos Text", system-ui, sans-serif;
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1180px; --pad: clamp(84px, 11vw, 136px); --ease: cubic-bezier(.2, .8, .2, 1);
  margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: anywhere;
}
.mk2 *, .mk2 *::before, .mk2 *::after { box-sizing: border-box; }
.mk2 img { display: block; max-width: 100%; height: auto; }
.mk2 a { color: inherit; text-underline-offset: 3px; }
.mk2 :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mk2 h1, .mk2 h2, .mk2 h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.mk2 p { margin: 0; }
html:has(.mk2) { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html:has(.mk2) { scroll-behavior: auto; } }
.mk-in { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* копчиња */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px; border-radius: 8px; border: 1px solid transparent;
  font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.mk2 .mk-btn-red { background: var(--red); color: #fff; }
.mk2 .mk-btn-red:hover { background: var(--red-h); }
.mk2 .mk-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }
.mk2 .mk-btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.mk2 .mk-btn-ink { background: var(--navy); color: #fff; }
.mk2 .mk-btn-ink:hover { background: #000; }

/* ── прв екран ── */
.mk-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 920px); display: flex; flex-direction: column; background: var(--night); color: #fff; }
.mk-hero-media { position: absolute; inset: 0; z-index: -2; }
.mk-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.mk-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 50% 38%, rgba(11, 20, 36, .55), rgba(11, 20, 36, .2) 70%),
  linear-gradient(180deg, rgba(11, 20, 36, .75) 0%, rgba(11, 20, 36, .25) 28%, rgba(11, 20, 36, .35) 60%, rgba(11, 20, 36, .92) 100%); }
.mk-bar { display: flex; align-items: center; gap: 24px; width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 18px 0; }
.mk-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mk-brand svg { width: 36px; height: 36px; }
.mk-brand b { font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.mk-brand small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.mk-bar nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 500; }
.mk-bar nav a { text-decoration: none; color: rgba(255, 255, 255, .85); }
.mk-bar nav a:hover { color: #fff; }
.mk2 .mk-bar .mk-lang { padding: 9px 14px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.mk-hero-c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px 230px; }
.mk2 .mk-news { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(11, 20, 36, .45);
  font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: none; }
.mk-news i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.mk-hero h1 { margin-top: 22px; max-width: 16ch; font-size: clamp(40px, 6.4vw, 86px); line-height: 1.02; letter-spacing: -.045em; }
.mk-hero h1 em { font-style: normal; background: linear-gradient(90deg, #f2c56b 0%, #ffb08a 55%, #ff8d8d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-w { display: inline-block; }
.mk-sub { margin-top: 20px; max-width: 46ch; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.mk-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.mk-card { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: min(880px, calc(100% - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px; padding: 14px 14px 14px 16px; border-radius: 14px; background: rgba(255, 253, 249, .97); color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); }
.mk-card-ph { display: flex; }
.mk-card-ph img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.mk-card-ph img + img { margin-left: -18px; transform: rotate(4deg); }
.mk-card-t { display: grid; gap: 2px; text-align: left; }
.mk-card-t span { font-size: 12.5px; font-weight: 700; color: var(--red); }
.mk-card-t b { font: 800 18px/1.25 var(--display); letter-spacing: -.02em; }
.mk-card-t p { font-size: 14px; color: var(--mute); line-height: 1.45; }
.mk-card .mk-btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
.mk-pause { position: absolute; right: 20px; top: 50%; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 20, 36, .4); color: #fff; cursor: pointer; }
.mk-pause svg { width: 16px; height: 16px; fill: currentColor; }
.mk-pause .i-play, .mk-pause[aria-pressed="true"] .i-pause { display: none; }
.mk-pause[aria-pressed="true"] .i-play { display: block; }
.mk-credit { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 11.5px; color: rgba(255, 255, 255, .5); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .mk-hero-media img { animation: mk-kb 24s ease-out both; }
  .mk-hero.paused .mk-hero-media img { animation-play-state: paused; }
  .mk-news, .mk-sub, .mk-cta, .mk-card { animation: mk-rise .9s var(--ease) both; }
  .mk-sub { animation-delay: .55s; } .mk-cta { animation-delay: .7s; } .mk-card { animation-name: mk-rise-c; animation-delay: .9s; }
  .mk-w { animation: mk-word .8s var(--ease) both; animation-delay: calc(var(--i) * 70ms + .15s); }
}
@media (prefers-reduced-motion: reduce) { .mk-pause { display: none; } }
@keyframes mk-kb { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mk-rise-c { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mk-word { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ── темна лента со бројки ── */
.mk-facts { background: var(--night); color: #fff; padding: 56px 0 72px; }
.mk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mk-nums > div { padding: 26px 22px 24px; }
.mk-nums > div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.mk-nums b { display: block; font: 800 clamp(38px, 4.6vw, 60px)/1 var(--display); letter-spacing: -.045em; }
.mk-nums span { display: block; margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .7); line-height: 1.45; }
.mk-nums > div:last-child b { color: var(--gold); }
.mk-need { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 48px; margin-top: 52px; align-items: start; }
.mk-need h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; }
.mk-need h2 + p { margin-top: 12px; color: rgba(255, 255, 255, .72); font-size: 16px; }
.mk-need ol { list-style: none; counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.mk-need li { counter-increment: n; padding: 18px 18px 18px 56px; position: relative; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); font-size: 15px; color: rgba(255, 255, 255, .78); }
.mk-need li::before { content: counter(n); position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--gold); color: var(--night); font: 800 14px/1 var(--display); }
.mk-need li b { display: block; color: #fff; font-size: 16.5px; margin-bottom: 2px; }

/* ── секции на хартија ── */
.mk-sec { padding: var(--pad) 0 0; }
.mk-sec:last-of-type { padding-bottom: var(--pad); }
.mk-k { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--red); }
.mk-h2 { margin-top: 10px; font-size: clamp(38px, 5.6vw, 72px); line-height: .98; letter-spacing: -.05em; color: var(--ink); }
.mk-lead { margin-top: 18px; max-width: 60ch; font-size: 17.5px; color: var(--mute); }

/* бенто */
.mk-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 14px; margin-top: 44px; }
.mk-b { position: relative; overflow: hidden; border-radius: 16px; background: var(--card); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.mk-b.ph { padding: 0; border: 0; background: var(--navy); color: #fff; }
.mk-b.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mk-b.ph:hover img { transform: scale(1.04); }
.mk-b.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 20, 36, .88) 0%, rgba(11, 20, 36, .1) 60%); }
.mk-b.ph > div { position: relative; z-index: 1; padding: 22px 24px; }
.mk-b h3 { font-size: 24px; line-height: 1.12; letter-spacing: -.03em; }
.mk-b p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.mk-b.ph p { color: rgba(255, 255, 255, .8); }
.mk-b .tag { align-self: flex-start; margin-bottom: auto; padding: 4px 9px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; }
.mk-b.ph .tag { position: absolute; left: 22px; top: 20px; z-index: 1; }
.mk-b.big { grid-column: span 2; grid-row: span 2; }
.mk-b.big h3 { font-size: clamp(28px, 3vw, 38px); }
.mk-b.tall { grid-row: span 2; }
.mk-b.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.mk-b.navy p { color: rgba(255, 255, 255, .74); }
.mk-b .big-n { font: 800 64px/1 var(--display); letter-spacing: -.05em; color: var(--red); margin-bottom: auto; }
.mk-b.navy .big-n { color: var(--gold); }

/* три картички */
.mk-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mk-three > div { padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mk-three span { font-size: 13px; font-weight: 700; color: var(--red); }
.mk-three h3 { margin-top: 6px; font-size: 22px; line-height: 1.15; }
.mk-three p { margin-top: 8px; font-size: 15px; color: var(--mute); }

/* лента со фотографии */
.mk-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: var(--pad); padding: 0 20px; }
.mk-strip figure { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--line); }
.mk-strip img { width: 100%; height: 100%; object-fit: cover; }
.mk-strip figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.mk-strip figcaption small { display: block; font-weight: 400; opacity: .75; }

/* ── темна секција: агенцијата ── */
.mk-dark { margin-top: var(--pad); padding: var(--pad) 0; background: var(--navy); color: #fff;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; }
.mk-dark .mk-k { color: var(--gold); }
.mk-dark .mk-h2 { color: #fff; }
.mk-dark .mk-lead { color: rgba(255, 255, 255, .72); }
.mk-ag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-top: 44px; align-items: start; }
.mk-ag-lic { position: relative; border-radius: 16px; overflow: hidden; background: #fff; padding: 16px; }
.mk-ag-lic img.logo { height: 42px; width: auto; margin-bottom: 14px; }
.mk-ag-lic a img { opacity: .55; filter: grayscale(.25) contrast(.92); border-radius: 8px; border: 1px solid #e6e8ee; }
.mk-ag-lic p { margin-top: 10px; font-size: 13px; color: var(--mute); }
.mk-kv { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 16px; }
.mk-kv dt, .mk-kv dd { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mk-kv dt { padding-right: 24px; color: rgba(255, 255, 255, .6); font-weight: 600; }
.mk-kv dd { margin: 0; color: #fff; }
.mk-contact { margin-top: 24px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 15px; color: rgba(255, 255, 255, .78); }
.mk-contact b { color: #fff; }

/* ── временска линија ── */
.mk-tl { list-style: none; margin: 48px 0 0; padding: 0; position: relative; }
.mk-tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--red), #e8a46b 70%, var(--line)); }
.mk-tl li { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px 48px; padding: 0 0 56px 44px; }
.mk-tl li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--paper); }
.mk-tl li:last-child::before { background: var(--paper); border: 2px solid #c9c2b4; }
.mk-tl .n { display: block; font-size: 13px; font-weight: 700; color: var(--red); }
.mk-tl h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -.04em; }
.mk-tl .who { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: #a2753a; }
.mk-tl p { font-size: 16.5px; color: var(--ink); }
.mk-tl .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mk-tl .chips span { padding: 8px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font-size: 14px; }
.mk-law { margin-top: 8px; padding: 22px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mk-law b { font: 800 18px/1.3 var(--display); }
.mk-law ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 15.5px; color: var(--mute); }
.mk-law p { margin-top: 10px; font-size: 13.5px; color: var(--mute); }

/* ── ЧПП ── */
.mk-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.mk-faq-l { position: sticky; top: 96px; }
.mk-faq-l p { margin-top: 16px; color: var(--mute); }
.mk-faq-l a { color: var(--red); }
.mk-faq details { border-bottom: 1px solid var(--line); }
.mk-faq details:first-child { border-top: 1px solid var(--line); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 700 18px/1.35 var(--display); letter-spacing: -.015em; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; font: 500 18px/1 var(--sans); }
.mk-faq details[open] summary::after { content: "−"; background: var(--navy); border-color: var(--navy); color: #fff; }
.mk-faq details p { padding: 0 44px 20px 0; color: var(--mute); font-size: 16px; }

/* ── темна секција со формулар ── */
.mk-form-sec { margin-top: var(--pad); padding: var(--pad) 0 48px; background: var(--night); color: #fff; }
.mk-form-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.mk-form-sec .mk-k { color: var(--gold); }
.mk-form-sec .mk-h2 { color: #fff; font-size: clamp(44px, 6.4vw, 84px); }
.mk-form-sec .mk-lead { color: rgba(255, 255, 255, .74); }
.mk-dash { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; color: rgba(255, 255, 255, .8); font-size: 16px; }
.mk-dash li::before { content: "—"; margin-right: 12px; color: rgba(255, 255, 255, .45); }
.mk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 28px; border-radius: 16px; background: var(--card); color: var(--ink); }
.mk-form h3 { grid-column: 1 / -1; font-size: 24px; }
.mk-form h3 + p { grid-column: 1 / -1; margin-top: -8px; font-size: 13.5px; color: var(--mute); }
.mk-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.mk-form .full { grid-column: 1 / -1; }
.mk-form input, .mk-form select, .mk-form textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: #f7f5f0; color: var(--ink); font: 400 16px var(--sans); }
.mk-form input:focus, .mk-form select:focus, .mk-form textarea:focus { outline: none; background: #fff; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 48, 62, .14); }
.mk-form textarea { min-height: 110px; resize: vertical; }
.mk-form .check { display: flex; gap: 10px; font-weight: 400; color: var(--mute); font-size: 13.5px; }
.mk-form .check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--red); }
.mk-form .mk-btn { width: 100%; }
.mk-form .hp { position: absolute; left: -9999px; }
.mk-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .14); }
.mk-info > div { padding: 20px 20px 0 0; }
.mk-info > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .14); }
.mk-info span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.mk-info b, .mk-info a { font-size: 15px; font-weight: 600; color: #fff; }
.mk-foot { background: var(--night); color: rgba(255, 255, 255, .5); font-size: 12.5px; padding: 28px 0 40px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mk-foot .mk-in { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.mk-foot a { color: rgba(255, 255, 255, .78); }

/* ── плутачка навигација ── */
.mk-dock { position: fixed; z-index: 60; top: 10px; left: 50%; width: min(820px, calc(100% - 20px)); transform: translate(-50%, -140%); visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s .35s; }
.mk-dock.on { transform: translate(-50%, 0); visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.mk-dock-in { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(15, 26, 46, .94); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-dock-in > a:first-child { display: grid; place-items: center; width: 38px; height: 38px; }
.mk-dock-in > a:first-child svg { width: 30px; height: 30px; }
.mk-dock nav { display: flex; gap: 2px; margin: 0 auto; }
.mk-dock nav a { padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 500; text-decoration: none; }
.mk-dock nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mk-dock .mk-btn { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

/* појавување при лизгање */
@media (prefers-reduced-motion: no-preference) {
  html.js .mk-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  html.js .mk-rv.in { opacity: 1; transform: none; }
}

/* ── телефон ── */
@media (max-width: 960px) {
  .mk-bar nav { display: none; }
  .mk-bar .mk-lang { margin-left: auto; }
  .mk-need, .mk-ag, .mk-faq, .mk-form-g { grid-template-columns: minmax(0, 1fr); }
  .mk-faq-l { position: static; }
  .mk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .mk-b.big { grid-column: span 2; grid-row: span 2; }
  .mk-tl li { grid-template-columns: minmax(0, 1fr); }
  .mk-dock nav { display: none; }
  .mk-dock .mk-btn { margin-left: auto; }
}
@media (max-width: 700px) {
  .mk-hero-c { padding: 28px 16px 40px; }
  .mk-card { position: relative; left: auto; bottom: auto; transform: none; margin: 0 16px 20px; width: auto; grid-template-columns: auto minmax(0, 1fr); }
  .mk-card .mk-btn { grid-column: 1 / -1; }
  @media (prefers-reduced-motion: no-preference) { .mk-card { animation-name: mk-rise; } }
  .mk-credit { position: static; transform: none; display: block; text-align: center; padding: 0 0 14px; }
  .mk-pause { top: auto; bottom: 6px; right: 12px; width: 34px; height: 34px; }
  .mk-credit { padding-left: 52px; padding-right: 52px; }
  .mk-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-nums > div:nth-child(3) { border-left: 0; }
  .mk-nums > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .mk-need ol, .mk-three { grid-template-columns: minmax(0, 1fr); }
  .mk-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 230px; }
  .mk-b.big, .mk-b.tall { grid-column: auto; grid-row: span 1; }
  .mk-b.big { grid-row: span 2; }
  .mk-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; }
  .mk-strip figure { flex: 0 0 62%; scroll-snap-align: start; }
  .mk-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .mk-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-info > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .mk-info > div { padding-bottom: 16px; }
  .mk-in { width: calc(100% - 32px); }
}