

/* Start:/local/css/kontur/mark.css?178225228040237*/
/* =====================================================
   markirovka.css — ЭДО для маркировки товаров
   Префикс: marking_
   ===================================================== */

.marking_hero,
.marking_capabilities,
.marking_value,
.marking_audience,
.marking_process,
.marking_codes,
.marking_upd,
.marking_advantages,
.marking_connect,
.marking_faq {
    --accent: #00bea2;
    --accent-hover: #00a88e;
    --accent-soft: rgba(0, 190, 162, .12);
    --dark: #013f54;
    --dark-2: #025a73;
    --ink: #13213a;
    --muted: #64748b;
    --line: #e5edf0;
    --surface: #ffffff;
    --surface-soft: #f5f9fa;
    --violet: #6466e9;
    --amber: #f3ae32;
    --blue: #3a89d9;
    --pink: #d562a0;
    --shadow: 0 18px 48px rgba(1, 63, 84, .10);
    color: var(--ink);
}

.marking_container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.marking_section-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.12;
    letter-spacing: -.046em;
    font-weight: 800;
}

.marking_section-title span { color: var(--accent); }
.marking_section-title--light { color: #fff; }
.marking_section-title--light span { color: #78efdf; }

.marking_section-copy {
    max-width: 680px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.marking_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.marking_eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.marking_eyebrow--light { color: #7eeee0; }

.marking_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.marking_btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.marking_btn:hover { transform: translateY(-2px); }
.marking_btn:hover svg { transform: translateX(3px); }
.marking_btn:focus-visible,
.marking_text-link:focus-visible,
.marking_accordion-item summary:focus-visible { outline: 3px solid rgba(0,190,162,.46); outline-offset: 4px; }

.marking_btn--primary { color: #fff; background: var(--accent); box-shadow: 0 12px 26px rgba(0,190,162,.26); }
.marking_btn--primary:hover { color: #fff; background: var(--accent-hover); box-shadow: 0 16px 34px rgba(0,190,162,.34); }
.marking_btn--outline { color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.marking_btn--outline:hover { color: #fff; border-color: rgba(255,255,255,.56); background: rgba(255,255,255,.11); }

/* ===== HERO ===== */
.marking_hero,
.marking_hero *,
.marking_hero *::before,
.marking_hero *::after { box-sizing: border-box; }

.marking_hero {
    position: relative;
    min-height: 690px;
    padding: 100px 0 104px;
    overflow: hidden;
    background: var(--dark);
}

.marking_hero-bg,
.marking_hero-gradient,
.marking_hero-grid,
.marking_hero-glow { position: absolute; inset: 0; pointer-events: none; }
.marking_hero-gradient { background: linear-gradient(124deg, #013f54 0%, #025b74 52%, #013f54 100%); }
.marking_hero-grid {
    opacity: .32;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 72% 76% at 60% 50%, #000 0%, transparent 82%);
}
.marking_hero-glow { border-radius: 50%; filter: blur(84px); }
.marking_hero-glow--one { inset: -180px -140px auto auto; width: 620px; height: 620px; background: rgba(0,190,162,.23); }
.marking_hero-glow--two { inset: auto auto -230px -160px; width: 600px; height: 600px; background: rgba(24,103,177,.22); }
.marking_hero-orb { position: absolute; border: 1px solid rgba(0,190,162,.22); border-radius: 50%; pointer-events: none; }
.marking_hero-orb--one { top: 22%; right: 4%; width: 220px; height: 220px; box-shadow: 0 0 0 28px rgba(0,190,162,.035), 0 0 0 60px rgba(0,190,162,.02); }
.marking_hero-orb--two { bottom: -100px; right: 29%; width: 190px; height: 190px; opacity: .6; }

.marking_hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(395px, .95fr); gap: 64px; align-items: center; }
.marking_hero-content { padding-top: 8px; }
.marking_hero-badge { display: inline-flex; align-items: center; gap: 9px; min-height: 33px; padding: 0 14px; color: #83f3e4; border: 1px solid rgba(0,190,162,.32); border-radius: 999px; background: rgba(0,190,162,.11); font-size: 13px; font-weight: 700; }
.marking_hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(0,190,162,.12); animation: marking_pulse 2s ease-in-out infinite; }
.marking_hero-title { max-width: 700px; margin: 22px 0 20px; color: #fff; font-size: clamp(42px, 5.2vw, 64px); font-weight: 800; line-height: 1.03; letter-spacing: -.06em; }
.marking_hero-title span { display: block; color: var(--accent); }
.marking_hero-lead { max-width: 650px; margin: 0; color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.66; }
.marking_hero-points { display: grid; gap: 12px; margin: 28px 0 34px; }
.marking_hero-point { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.87); font-size: 15px; line-height: 1.45; }
.marking_hero-point-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--accent); border: 1px solid rgba(0,190,162,.28); border-radius: 9px; background: rgba(0,190,162,.10); }
.marking_hero-point-icon svg { width: 16px; height: 16px; }
.marking_hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Карточка УПД */
.marking_hero-document {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 14px;
    width: 100%;
    padding: 21px;
    color: #1b2935;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 24px;
    background: rgba(255,255,255,.975);
    box-shadow: 0 26px 74px rgba(0,19,31,.28), 0 1px 0 rgba(255,255,255,.9) inset;
    animation: marking_visual-enter .75s cubic-bezier(.16,1,.3,1) .16s both;
}

.marking_hero-document::before { content: ''; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: linear-gradient(132deg, rgba(255,255,255,.9), rgba(0,190,162,.24), rgba(255,255,255,.68)); opacity: .72; }
.marking_doc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.marking_doc-title { display: flex; align-items: center; min-width: 0; gap: 11px; }
.marking_doc-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; color: var(--accent-hover); border-radius: 12px; background: var(--accent-soft); }
.marking_doc-icon svg { width: 23px; height: 23px; }
.marking_doc-title > span:last-child { display: grid; min-width: 0; gap: 2px; }
.marking_doc-title strong { overflow: hidden; color: #17232e; font-size: 17px; font-weight: 800; line-height: 1.18; letter-spacing: -.024em; text-overflow: ellipsis; white-space: nowrap; }
.marking_doc-title small { color: #7a8994; font-size: 10px; font-weight: 700; line-height: 1.25; }
.marking_doc-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 8px 10px; color: #078a77; border-radius: 9px; background: #e6f8f4; font-size: 11px; font-weight: 800; line-height: 1; }
.marking_doc-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(0,190,162,.11); }
.marking_doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 9px 2px 11px; border-bottom: 1px solid #e8eef0; color: #637481; font-size: 11px; font-weight: 650; }
.marking_doc-meta > span + span { position: relative; }
.marking_doc-meta > span + span::before { content: ''; position: absolute; top: 50%; left: -10px; width: 1px; height: 14px; transform: translateY(-50%); background: #dfe8eb; }
.marking_doc-meta-label { padding: 4px 8px; color: #38786f; border-radius: 7px; background: #ecf7f3; font-size: 10px; }
.marking_doc-parties { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #e8eff1; border-radius: 13px; background: #fbfdfd; }
.marking_doc-parties > div:not(.marking_doc-parties-arrow) { min-width: 0; }
.marking_doc-parties span { display: block; overflow: hidden; color: #7c8b95; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.marking_doc-parties strong { display: block; overflow: hidden; margin-top: 4px; color: #263542; font-size: 12px; font-weight: 760; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.marking_doc-parties-arrow { display: grid; place-items: center; width: 31px; height: 31px; color: var(--accent-hover); border-radius: 50%; background: #e9f8f4; }
.marking_doc-parties-arrow svg { width: 17px; height: 17px; }
.marking_doc-product { overflow: hidden; border: 1px solid #e5ecee; border-radius: 13px; background: #fff; }
.marking_doc-product-heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid #edf1f2; }
.marking_doc-product-heading strong { color: #2a3945; font-size: 11px; }
.marking_doc-product-heading span { color: #83939d; font-size: 10px; font-weight: 700; }
.marking_doc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 27px; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid #eef2f3; }
.marking_doc-row:last-child { border-bottom: 0; }
.marking_doc-product-mark { display: grid; place-items: center; width: 27px; height: 27px; color: #008f7c; border-radius: 8px; background: #e5f8f4; }
.marking_doc-product-mark--blue { color: #3f7fbd; background: #e8f3ff; }
.marking_doc-product-mark svg { width: 14px; height: 14px; }
.marking_doc-product-name { min-width: 0; }
.marking_doc-product-name strong, .marking_doc-product-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marking_doc-product-name strong { color: #2b3944; font-size: 10px; font-weight: 780; }
.marking_doc-product-name small { margin-top: 2px; color: #81909a; font-size: 9px; font-weight: 650; }
.marking_doc-product-count { display: grid; place-items: center; min-width: 24px; height: 21px; color: #038c78; border-radius: 6px; background: #e8f8f5; font-size: 10px; font-weight: 800; }
.marking_doc-product-count--neutral { color: #60727c; background: #edf2f3; }
.marking_doc-codes { padding: 1px 2px 0; }
.marking_doc-codes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.marking_doc-codes-head strong { color: #2a3945; font-size: 11px; }
.marking_doc-codes-head span { padding: 4px 7px; color: #058d7a; border-radius: 7px; background: #e9f8f4; font-size: 9px; font-weight: 800; }
.marking_doc-code-list { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.marking_doc-code-list i { display: block; height: 17px; border-radius: 4px; background: linear-gradient(90deg, #cdece6 0 14%, #57cbb9 14% 21%, #d3f1eb 21% 35%, #1f9c89 35% 41%, #e1f5f1 41% 57%, #59cbb9 57% 68%, #c6eae3 68% 100%); }
.marking_doc-code-list i:nth-child(3n) { opacity: .68; }
.marking_doc-timeline { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid #e5ecee; border-radius: 13px; background: #fff; }
.marking_doc-step { position: relative; padding: 10px 8px 9px 29px; border-right: 1px solid #e5ecee; }
.marking_doc-step:last-child { border-right: 0; }
.marking_doc-step > span { position: absolute; top: 12px; left: 8px; display: grid; place-items: center; width: 15px; height: 15px; color: #788a94; border-radius: 50%; background: #dfe7ea; font-size: 8px; font-weight: 800; }
.marking_doc-step strong, .marking_doc-step small { display: block; }
.marking_doc-step strong { overflow: hidden; color: #2c3a45; font-size: 9px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.marking_doc-step small { margin-top: 3px; color: #83939c; font-size: 8px; font-weight: 650; line-height: 1.2; }
.marking_doc-step--done > span { color: #fff; background: var(--accent); }
.marking_doc-step--current { background: #f3fffc; }
.marking_doc-step--current > span { color: #fff; background: var(--accent-hover); box-shadow: 0 0 0 4px rgba(0,190,162,.12); animation: marking_step-glow 2.3s ease-in-out infinite; }
.marking_doc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 2px 0; color: #4e6470; font-size: 10px; font-weight: 700; }
.marking_doc-footer > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.marking_doc-footer i { display: grid; place-items: center; width: 14px; height: 14px; color: #fff; border-radius: 50%; background: var(--accent); font-size: 9px; font-style: normal; }
.marking_doc-footer-lock { display: grid; place-items: center; width: 27px; height: 27px; color: #6d7f89; border-radius: 8px; background: #f0f5f6; }
.marking_doc-footer-lock svg { width: 14px; height: 14px; }

/* ===== КАРТОЧКИ ВОЗМОЖНОСТЕЙ ===== */
.marking_capabilities { padding: 104px 0 98px; background: #fff; }
.marking_section-heading--split { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.72fr); align-items: end; gap: 48px; }
.marking_section-heading--split .marking_section-copy { margin: 0; }
.marking_capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; }
.marking_capability-card { position: relative; min-height: 264px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg,#fff,#f7fbfb); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.marking_capability-card::after { content: ''; position: absolute; right: -58px; bottom: -62px; width: 170px; height: 170px; border: 24px solid rgba(0,190,162,.045); border-radius: 50%; }
.marking_capability-card:hover { transform: translateY(-5px); border-color: rgba(0,190,162,.32); box-shadow: var(--shadow); }
.marking_capability-index { position: absolute; top: 21px; right: 23px; color: #c6d5da; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.marking_capability-icon { display: grid; place-items: center; width: 53px; height: 53px; color: var(--accent-hover); border: 1px solid rgba(0,190,162,.14); border-radius: 15px; background: var(--accent-soft); }
.marking_capability-icon svg { width: 25px; height: 25px; }
.marking_capability-icon--violet { color: var(--violet); border-color: rgba(100,102,233,.16); background: rgba(100,102,233,.10); }
.marking_capability-icon--amber { color: #a87300; border-color: rgba(243,174,50,.18); background: rgba(243,174,50,.14); }
.marking_capability-icon--blue { color: #3078bd; border-color: rgba(58,137,217,.15); background: rgba(58,137,217,.11); }
.marking_capability-card h3 { position: relative; margin: 24px 0 10px; color: var(--ink); font-size: 20px; line-height: 1.22; letter-spacing: -.026em; }
.marking_capability-card p { position: relative; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.62; }

/* ===== ЗАЧЕМ НУЖЕН ===== */
.marking_value { padding: 98px 0 0; background: #fff; }
.marking_value-panel { position: relative; display: grid; grid-template-columns: minmax(0,.96fr) minmax(380px,1.04fr); gap: 64px; padding: 60px; overflow: hidden; color: #fff; border-radius: 30px; background: linear-gradient(135deg,#013f54,#075d73 100%); box-shadow: 0 24px 64px rgba(1,63,84,.18); }
.marking_value-panel::before { content: ''; position: absolute; top: -160px; right: -120px; width: 470px; height: 470px; border: 1px solid rgba(0,190,162,.22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(0,190,162,.04), 0 0 0 120px rgba(0,190,162,.02); }
.marking_value-copy, .marking_value-list { position: relative; z-index: 1; }
.marking_value-copy > p { max-width: 520px; margin: 22px 0 30px; color: rgba(255,255,255,.71); font-size: 16px; line-height: 1.68; }
.marking_value-list { display: grid; gap: 12px; }
.marking_value-item { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.marking_value-item > span { display: grid; place-items: center; width: 35px; height: 35px; color: #fff; border-radius: 10px; background: rgba(0,190,162,.26); font-size: 14px; font-weight: 900; }
.marking_value-item p { margin: 0; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.42; }

/* ===== АУДИТОРИЯ ===== */
.marking_audience { padding: 112px 0 104px; background: var(--surface-soft); }
.marking_audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px; }
.marking_audience-card { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.marking_audience-card:hover { transform: translateY(-4px); border-color: rgba(0,190,162,.3); box-shadow: 0 15px 36px rgba(1,63,84,.08); }
.marking_audience-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent-hover); border-radius: 14px; background: var(--accent-soft); }
.marking_audience-icon svg { width: 23px; height: 23px; }
.marking_audience-icon--violet { color: var(--violet); background: rgba(100,102,233,.10); }
.marking_audience-icon--amber { color: #a87300; background: rgba(243,174,50,.15); }
.marking_audience-icon--blue { color: #337cc2; background: rgba(58,137,217,.11); }
.marking_audience-icon--pink { color: #bc4f88; background: rgba(213,98,160,.11); }
.marking_audience-icon--green { color: #128975; background: rgba(0,190,162,.13); }
.marking_audience-card h3 { margin: 20px 0 8px; font-size: 18px; line-height: 1.27; letter-spacing: -.022em; }
.marking_audience-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }

/* ===== ПРОЦЕСС ===== */
.marking_process { padding: 106px 0 108px; overflow: hidden; color: #fff; background: linear-gradient(136deg,#013f54,#064d63); }
.marking_process-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(310px,.72fr); align-items: end; gap: 44px; }
.marking_process-top > p { margin: 0 0 3px; color: rgba(255,255,255,.67); font-size: 16px; line-height: 1.67; }
.marking_process-track { position: relative; margin-top: 55px; padding: 24px 18px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: rgba(255,255,255,.045); }
.marking_process-line { position: absolute; top: 78px; left: 9.4%; right: 9.4%; height: 2px; overflow: hidden; background: rgba(255,255,255,.19); }
.marking_process-line span { display: block; width: 32%; height: 100%; background: linear-gradient(90deg,transparent,var(--accent),transparent); animation: marking_line-move 3s linear infinite; }
.marking_process-list { position: relative; display: grid; grid-template-columns: repeat(5,minmax(110px,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.marking_process-step { display: grid; grid-template-rows: 58px 1fr; justify-items: center; gap: 17px; text-align: center; }
.marking_process-num { display: grid; place-items: center; width: 54px; height: 54px; color: rgba(255,255,255,.82); border: 2px solid rgba(255,255,255,.27); border-radius: 50%; background: #07556a; box-shadow: 0 0 0 7px rgba(5,79,99,.96); font-size: 14px; font-weight: 800; }
.marking_process-num svg { width: 24px; height: 24px; }
.marking_process-step--accent .marking_process-num { width: 62px; height: 62px; color: var(--accent); border-color: rgba(0,190,162,.60); background: rgba(0,190,162,.16); box-shadow: 0 0 0 7px rgba(5,79,99,.96),0 0 22px rgba(0,190,162,.35); }
.marking_process-step strong { display: block; color: #fff; font-size: 13px; line-height: 1.3; }
.marking_process-step p { display: block; margin: 7px 0 0; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.48; }
.marking_process-step--accent strong { color: #7eeee0; }

/* ===== КОДЫ ===== */
.marking_codes { padding: 110px 0 102px; background: #fff; }
.marking_codes-layout { display: grid; grid-template-columns: minmax(0,.93fr) minmax(420px,1.07fr); gap: 68px; align-items: center; }
.marking_codes-copy > p { max-width: 540px; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.marking_text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--accent-hover); font-size: 15px; font-weight: 800; text-decoration: none; }
.marking_text-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.marking_text-link:hover { color: var(--accent-hover); }
.marking_text-link:hover svg { transform: translateX(3px); }
.marking_operation-panel { padding: 20px; border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(145deg,#fff,#f6fbfb); box-shadow: 0 19px 48px rgba(1,63,84,.08); }
.marking_operation-panel-top { display: flex; align-items: center; justify-content: space-between; padding: 1px 4px 16px; color: #324350; font-size: 13px; font-weight: 800; }
.marking_operation-panel-top i { display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent-hover); border-radius: 8px; background: var(--accent-soft); font-size: 14px; font-style: normal; }
.marking_operation-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.marking_operation-grid > div { display: grid; grid-template-columns: 37px 1fr; gap: 11px; padding: 14px; border: 1px solid #e7eef0; border-radius: 15px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.marking_operation-grid > div:hover { transform: translateY(-2px); border-color: rgba(0,190,162,.28); box-shadow: 0 10px 21px rgba(1,63,84,.06); }
.marking_operation-icon { display: grid; place-items: center; width: 37px; height: 37px; color: #008e7b; border-radius: 11px; background: #e5f8f4; }
.marking_operation-icon svg { width: 19px; height: 19px; }
.marking_operation-icon--violet { color: var(--violet); background: rgba(100,102,233,.10); }
.marking_operation-icon--amber { color: #a87300; background: rgba(243,174,50,.14); }
.marking_operation-icon--blue { color: #337cc2; background: rgba(58,137,217,.11); }
.marking_operation-icon--pink { color: #bf4e89; background: rgba(213,98,160,.11); }
.marking_operation-icon--green { color: #118a76; background: rgba(0,190,162,.12); }
.marking_operation-grid strong { display: block; margin-top: 2px; color: #2b3a45; font-size: 13px; line-height: 1.25; }
.marking_operation-grid small { display: block; margin-top: 4px; color: #7d8e98; font-size: 10px; font-weight: 650; line-height: 1.3; }

/* ===== УПД ===== */
.marking_upd { padding: 8px 0 105px; background: #fff; }
.marking_upd-card { display: grid; grid-template-columns: minmax(390px,.78fr) minmax(0,1.22fr); gap: 52px; padding: 50px; overflow: hidden; color: #fff; border-radius: 29px; background: linear-gradient(132deg,#063f54,#0a6377); box-shadow: 0 22px 58px rgba(1,63,84,.18); }
.marking_upd-visual { position: relative; display: grid; min-height: 440px; place-items: center; }
.marking_upd-visual::before { content: ''; position: absolute; width: 360px; height: 360px; border: 1px solid rgba(0,190,162,.27); border-radius: 50%; box-shadow: 0 0 0 33px rgba(0,190,162,.04),0 0 0 79px rgba(0,190,162,.02); }
.marking_upd-paper { position: relative; z-index: 1; width: min(310px,84%); padding: 23px 22px; color: #273742; border-radius: 16px; background: #fff; box-shadow: 0 28px 44px rgba(0,25,35,.22); transform: rotate(-4deg); }
.marking_upd-paper-head { display: flex; align-items: center; justify-content: space-between; }
.marking_upd-paper-head span { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg,#dff9f4,#b6eee4); }
.marking_upd-paper-head i { width: 55px; height: 10px; border-radius: 99px; background: #ecf3f4; }
.marking_upd-paper-title { width: 68%; height: 16px; margin: 21px 0 17px; border-radius: 99px; background: #dbe8e9; }
.marking_upd-paper-lines { display: grid; gap: 9px; }
.marking_upd-paper-lines i { display: block; height: 8px; border-radius: 99px; background: #edf3f4; }
.marking_upd-paper-lines i:nth-child(2) { width: 86%; }
.marking_upd-paper-lines i:nth-child(3) { width: 73%; }
.marking_upd-paper-lines i:nth-child(4) { width: 91%; }
.marking_upd-paper-code { display: grid; grid-template-columns: repeat(17,1fr); gap: 3px; margin-top: 20px; padding: 11px; border-radius: 10px; background: #eefaf7; }
.marking_upd-paper-code i { display: block; height: 25px; background: repeating-linear-gradient(90deg,#057d6b 0 2px,transparent 2px 4px,#057d6b 4px 5px,transparent 5px 7px); opacity: .86; }
.marking_upd-paper-code i:nth-child(5n) { opacity: .45; }
.marking_upd-paper-sign { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; padding-top: 13px; border-top: 1px solid #e7eff0; }
.marking_upd-paper-sign span { color: #7d8f99; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.marking_upd-paper-sign i { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; border-radius: 50%; background: var(--accent); font-style: normal; font-weight: 900; }
.marking_upd-float { position: absolute; z-index: 2; padding: 9px 12px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.13); box-shadow: 0 10px 23px rgba(0,18,27,.15); backdrop-filter: blur(7px); font-size: 11px; font-weight: 800; }
.marking_upd-float--one { top: 19%; right: 5%; animation: marking_float 4.4s ease-in-out infinite; }
.marking_upd-float--two { bottom: 22%; left: 4%; color: #74eddd; animation: marking_float 4.4s ease-in-out .8s infinite; }
.marking_upd-content { padding: 4px 0; }
.marking_upd-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; margin-top: 34px; }
.marking_upd-items > div { padding-left: 16px; border-left: 2px solid rgba(0,190,162,.5); }
.marking_upd-items strong { display: block; color: #fff; font-size: 15px; line-height: 1.25; }
.marking_upd-items p { margin: 7px 0 0; color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.55; }

/* ===== ПРЕИМУЩЕСТВА ===== */
.marking_advantages { padding: 105px 0; background: var(--surface-soft); }
.marking_advantages-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 48px; }
.marking_advantages-grid article { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.marking_advantages-grid article:hover { transform: translateY(-4px); border-color: rgba(0,190,162,.3); box-shadow: 0 15px 36px rgba(1,63,84,.07); }
.marking_advantages-grid article > span { display: inline-grid; place-items: center; width: 35px; height: 27px; color: var(--accent-hover); border-radius: 8px; background: var(--accent-soft); font-size: 11px; font-weight: 850; }
.marking_advantages-grid h3 { margin: 19px 0 8px; font-size: 18px; line-height: 1.27; letter-spacing: -.023em; }
.marking_advantages-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }

/* ===== ПОДКЛЮЧЕНИЕ ===== */
.marking_connect { padding: 99px 0 106px; background: #fff; }
.marking_connect-panel { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(390px,1.12fr); gap: 56px; padding: 52px; overflow: hidden; color: #fff; border-radius: 30px; background: linear-gradient(135deg,#013f54,#07617a); box-shadow: 0 24px 64px rgba(1,63,84,.18); }
.marking_connect-panel::after { content: ''; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; border: 1px solid rgba(0,190,162,.24); border-radius: 50%; box-shadow: 0 0 0 45px rgba(0,190,162,.035); }
.marking_connect-content, .marking_connect-list { position: relative; z-index: 1; }
.marking_connect-content > p { max-width: 490px; margin: 22px 0 30px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.68; }
.marking_connect-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.marking_connect-list li { display: grid; grid-template-columns: 39px 1fr; gap: 13px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.075); backdrop-filter: blur(7px); transition: transform .22s ease, background .22s ease; }
.marking_connect-list li:hover { transform: translateX(4px); background: rgba(255,255,255,.11); }
.marking_connect-list li > span { display: grid; place-items: center; width: 39px; height: 39px; color: var(--accent); border-radius: 11px; background: rgba(0,190,162,.12); font-size: 13px; font-weight: 800; }
.marking_connect-list strong { display: block; margin-top: 1px; color: #fff; font-size: 15px; }
.marking_connect-list p { margin: 5px 0 0; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.5; }

/* ===== FAQ ===== */
.marking_faq { padding: 108px 0; background: var(--surface-soft); }
.marking_faq-layout { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: 76px; align-items: start; }
.marking_faq-intro { position: sticky; top: 24px; }
.marking_accordion { display: grid; gap: 10px; }
.marking_accordion-item { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.marking_accordion-item[open] { border-color: rgba(0,190,162,.28); box-shadow: 0 11px 30px rgba(1,63,84,.055); }
.marking_accordion-item summary { position: relative; display: block; padding: 22px 56px 22px 22px; color: var(--ink); cursor: pointer; font-size: 17px; font-weight: 750; line-height: 1.38; list-style: none; }
.marking_accordion-item summary::-webkit-details-marker { display: none; }
.marking_accordion-item summary span { position: absolute; top: 50%; right: 21px; width: 20px; height: 20px; transform: translateY(-50%); border: 1px solid #c9d9dd; border-radius: 50%; transition: transform .24s ease,border-color .24s ease; }
.marking_accordion-item summary span::before, .marking_accordion-item summary span::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.5px; transform: translate(-50%,-50%); background: var(--accent-hover); }
.marking_accordion-item summary span::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .24s ease; }
.marking_accordion-item[open] summary span { border-color: rgba(0,190,162,.42); transform: translateY(-50%) rotate(180deg); }
.marking_accordion-item[open] summary span::after { transform: translate(-50%,-50%) rotate(0deg); }
.marking_accordion-content { padding: 0 22px 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.marking_accordion-content p { margin: 0; }

/* ===== MOTION ===== */
@keyframes marking_pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .52; transform: scale(.8); } }
@keyframes marking_visual-enter { from { opacity: 0; transform: translateX(28px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes marking_step-glow { 0%,100% { box-shadow: 0 0 0 4px rgba(0,190,162,.1); } 50% { box-shadow: 0 0 0 7px rgba(0,190,162,.18); } }
@keyframes marking_line-move { from { transform: translateX(-110%); } to { transform: translateX(410%); } }
@keyframes marking_line-move-vertical { from { transform: translateY(-110%); } to { transform: translateY(410%); } }
@keyframes marking_float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (min-width: 861px) {
    .marking_capability-card,
    .marking_audience-card,
    .marking_advantages-grid article,
    .marking_connect-list li,
    .marking_accordion-item { opacity: 0; transform: translateY(18px); }
    .marking_capability-card.marking_is-visible,
    .marking_audience-card.marking_is-visible,
    .marking_advantages-grid article.marking_is-visible,
    .marking_connect-list li.marking_is-visible,
    .marking_accordion-item.marking_is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease, border-color .2s ease, box-shadow .2s ease; }
}

@media (max-width: 1120px) {
    .marking_hero-layout { grid-template-columns: minmax(0,1fr) 440px; gap: 42px; }
    .marking_hero-title { font-size: clamp(42px,5vw,58px); }
    .marking_capabilities-grid, .marking_advantages-grid { grid-template-columns: repeat(2,1fr); }
    .marking_codes-layout { gap: 44px; }
    .marking_value-panel, .marking_connect-panel { gap: 40px; padding: 44px; }
    .marking_upd-card { grid-template-columns: minmax(360px,.78fr) minmax(0,1.22fr); padding: 40px; gap: 38px; }
    .marking_faq-layout { gap: 52px; }
}

@media (max-width: 980px) {
    .marking_hero-layout { grid-template-columns: 1fr; gap: 42px; }
    .marking_hero-content { max-width: 720px; }
    .marking_hero-document { max-width: 590px; margin: 0 auto; }
    .marking_value-panel, .marking_connect-panel, .marking_codes-layout, .marking_upd-card { grid-template-columns: 1fr; }
    .marking_value-copy, .marking_connect-content { max-width: 680px; }
    .marking_upd-visual { min-height: 360px; }
    .marking_codes-copy { max-width: 680px; }
}

@media (max-width: 860px) {
    .marking_container { width: min(100% - 36px,660px); }
    .marking_hero { min-height: 0; padding: 78px 0 76px; }
    .marking_hero-layout { grid-template-columns: 1fr; gap: 42px; }
    .marking_hero-document { max-width: 590px; margin: 0 auto; }
    .marking_section-heading--split, .marking_process-top, .marking_faq-layout { grid-template-columns: 1fr; }
    .marking_section-heading--split .marking_section-copy, .marking_process-top > p { margin-top: 18px; }
    .marking_capabilities, .marking_audience, .marking_codes, .marking_advantages, .marking_faq { padding: 78px 0; }
    .marking_value, .marking_connect { padding-top: 76px; }
    .marking_value-panel, .marking_connect-panel { padding: 34px 26px; border-radius: 24px; }
    .marking_audience-grid { grid-template-columns: repeat(2,1fr); margin-top: 36px; }
    .marking_process { padding: 76px 0; }
    .marking_process-track { margin-top: 34px; padding: 12px 18px 16px; }
    .marking_process-line { top: 34px; bottom: 28px; left: 45px; right: auto; width: 2px; height: auto; }
    .marking_process-line span { width: 100%; height: 32%; background: linear-gradient(180deg,transparent,var(--accent),transparent); animation: marking_line-move-vertical 3s linear infinite; }
    .marking_process-list { grid-template-columns: 1fr; gap: 0; }
    .marking_process-step { grid-template-columns: 54px 1fr; grid-template-rows: 1fr; justify-items: start; gap: 14px; padding: 14px 0; text-align: left; }
    .marking_process-step--accent .marking_process-num { width: 54px; height: 54px; }
    .marking_process-step > div { padding-top: 7px; }
    .marking_upd-card { padding: 34px 26px; border-radius: 24px; }
    .marking_upd-visual { min-height: 330px; }
    .marking_upd-content { padding: 0; }
    .marking_faq-intro { position: static; }
}

@media (max-width: 560px) {
    .marking_container { width: calc(100% - 32px); }
    .marking_hero { padding-top: 62px; }
    .marking_hero-title { font-size: clamp(37px,11vw,48px); }
    .marking_hero-lead { font-size: 16px; }
    .marking_hero-actions { display: grid; grid-template-columns: 1fr; }
    .marking_btn { width: 100%; padding: 0 18px; white-space: normal; }
    .marking_hero-document { max-width: 590px; padding: 16px; border-radius: 20px; }
    .marking_doc-title strong { font-size: 14px; }
    .marking_doc-status { padding: 7px 8px; font-size: 10px; }
    .marking_doc-meta { gap: 7px 12px; font-size: 9px; }
    .marking_doc-meta > span + span::before { left: -7px; }
    .marking_doc-parties { grid-template-columns: 1fr 28px 1fr; padding: 10px; gap: 6px; }
    .marking_doc-parties strong { font-size: 10px; }
    .marking_doc-parties span { font-size: 8px; }
    .marking_doc-parties-arrow { width: 26px; height: 26px; }
    .marking_doc-parties-arrow svg { width: 14px; height: 14px; }
    .marking_doc-code-list { gap: 2px; }
    .marking_doc-code-list i { height: 14px; }
    .marking_doc-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .marking_doc-step { min-height: 56px; }
    .marking_doc-step:nth-child(2) { border-right: 0; }
    .marking_doc-step:nth-child(-n+2) { border-bottom: 1px solid #e5ecee; }
    .marking_doc-step strong { font-size: 8px; }
    .marking_doc-step small { font-size: 7px; }
    .marking_doc-footer { font-size: 9px; }
    .marking_section-title { font-size: clamp(29px,9.2vw,38px); }
    .marking_section-copy { font-size: 15px; }
    .marking_capabilities-grid, .marking_advantages-grid, .marking_audience-grid { grid-template-columns: 1fr; }
    .marking_capabilities-grid { margin-top: 36px; }
    .marking_capability-card { min-height: 0; padding: 25px; }
    .marking_value-panel, .marking_connect-panel { padding: 29px 20px; }
    .marking_value-item { grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; }
    .marking_value-item > span { width: 32px; height: 32px; }
    .marking_value-item p { font-size: 13px; }
    .marking_operation-panel { padding: 14px; border-radius: 20px; }
    .marking_operation-grid { grid-template-columns: 1fr; }
    .marking_upd-card { padding: 29px 20px; }
    .marking_upd-visual { min-height: 292px; }
    .marking_upd-visual::before { width: 250px; height: 250px; }
    .marking_upd-paper { width: 236px; padding: 19px 18px; }
    .marking_upd-float--one { top: 10%; right: 0; }
    .marking_upd-float--two { bottom: 13%; left: 0; }
    .marking_upd-items { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
    .marking_connect-list li { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; }
    .marking_connect-list li > span { width: 34px; height: 34px; border-radius: 9px; }
    .marking_accordion-item summary { padding: 18px 49px 18px 17px; font-size: 15px; }
    .marking_accordion-item summary span { right: 16px; }
    .marking_accordion-content { padding: 0 17px 18px; font-size: 13px; }
}

@media (max-width: 390px) {
    .marking_hero-document { padding: 13px; }
    .marking_doc-top { gap: 8px; }
    .marking_doc-icon { width: 33px; height: 33px; border-radius: 10px; }
    .marking_doc-icon svg { width: 19px; height: 19px; }
    .marking_doc-title strong { font-size: 12px; }
    .marking_doc-title small { font-size: 8px; }
    .marking_doc-status { font-size: 9px; }
    .marking_doc-product-heading { padding: 9px 10px; }
    .marking_doc-row { padding: 8px 10px; }
    .marking_doc-product-name strong { font-size: 9px; }
    .marking_doc-product-name small { font-size: 8px; }
    .marking_doc-product-count { min-width: 20px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .marking_hero *, .marking_capabilities *, .marking_value *, .marking_audience *, .marking_process *, .marking_codes *, .marking_upd *, .marking_advantages *, .marking_connect *, .marking_faq * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .marking_capability-card, .marking_audience-card, .marking_advantages-grid article, .marking_connect-list li, .marking_accordion-item { opacity: 1 !important; transform: none !important; }
}

/* End */
/* /local/css/kontur/mark.css?178225228040237 */
