/* Blank canvas for new design work — neutral background, no inherited styles. */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth;}  /* Smooth anchor jumps + iOS Safari fix */

/* ============================================================
   Scroll-reveal — sections fade-up smoothly when entering the viewport.
   Added by JS via IntersectionObserver: element gets .is-visible.
   ============================================================ */
.dx-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}
.dx-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}
/* Staggered children for grids (cards reveal one after another) */
.dx-reveal.is-visible > *{
    animation:dx-reveal-stagger .6s cubic-bezier(.22,.61,.36,1) backwards;
}
.dx-reveal.is-visible > *:nth-child(1){animation-delay:.05s;}
.dx-reveal.is-visible > *:nth-child(2){animation-delay:.12s;}
.dx-reveal.is-visible > *:nth-child(3){animation-delay:.19s;}
.dx-reveal.is-visible > *:nth-child(4){animation-delay:.26s;}
.dx-reveal.is-visible > *:nth-child(5){animation-delay:.33s;}
.dx-reveal.is-visible > *:nth-child(6){animation-delay:.40s;}
@keyframes dx-reveal-stagger{
    from{opacity:0; transform:translateY(14px);}
    to  {opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .dx-reveal, .dx-reveal.is-visible > *{
        opacity:1;
        transform:none;
        animation:none;
        transition:none;
    }
}
html,body{margin:0;padding:0;}
img{max-width:100%; height:auto; display:block;}              /* Universal fluid image baseline */
a{-webkit-tap-highlight-color:rgba(0,87,183,.18);}            /* Subtle tap feedback on mobile Safari */
button,input,select,textarea{font:inherit;}                   /* Form controls inherit the page font (Safari quirk) */
body.dev-page{
    /* Google Sans Flex — Google's brand typeface, publicly released 2026. Variable axes (8..144 opsz, 400..900 wght). */
    font-family:"Google Sans Flex","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#1f2937;
    background:#ffffff;
    min-height:100vh;
}

/* Language switcher in topbar — small pill with flag + 2-letter code */
.dx-langswitch{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    background:#f4f6fb;
    color:#0f172a;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    transition:background-color .18s ease, transform .18s ease;
    flex:0 0 auto;
}
.dx-langswitch:hover{background:#e6ebf5; transform:translateY(-1px);}
.dx-langswitch__flag{
    display:inline-flex;
    width:22px; height:15px;
    border-radius:3px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(15,23,42,.1);
}
.dx-langswitch__flag svg{display:block; width:100%; height:100%;}
.dx-langswitch--toggle{
    display:inline-flex;
    gap:2px;
    padding:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
}
.dx-langswitch__seg{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 7px;
    border-radius:4px;
    font:700 11px/1 'Google Sans Flex','Google Sans',system-ui,sans-serif;
    letter-spacing:.04em;
    color:rgba(15,23,42,.55);
    text-decoration:none;
    transition:background .2s ease, color .2s ease;
}
.dx-langswitch__seg:hover{color:#0c1e4d;}
.dx-langswitch__seg.is-active{
    background:#0c1e4d;
    color:#fff;
    cursor:default;
}
@media (max-width:600px){
    .dx-langswitch__seg{padding:2px 6px;font-size:10.5px;}
}

/* ============================================================
   Top promo ribbon — globally linked to /dev/pochta (mail-in scrap)
   Brand yellow → blue diagonal with traveling shine + nudge arrow.
   ============================================================ */
.dx-ribbon{
    position:relative;
    background:linear-gradient(95deg, #0057B7 0%, #0a4a9e 45%, #FFD500 100%);
    color:#fff;
    z-index:9999;
    margin-bottom:0;
    transition:box-shadow .25s ease, backdrop-filter .25s ease, transform .35s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
.dx-ribbon.is-stuck{
    animation:dx-ribbon-dock .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes dx-ribbon-dock{
    0%{transform:translateY(-6px);opacity:.92}
    60%{transform:translateY(2px)}
    100%{transform:translateY(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
    .dx-ribbon.is-stuck{animation:none}
}
.dx-ribbon__clip{
    position:absolute; inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.dx-ribbon__shine{
    position:absolute;
    top:0; left:-30%;
    width:30%;
    height:100%;
    background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform:skewX(-20deg);
    animation:dx-ribbon-shine 5.5s cubic-bezier(.4,0,.2,1) infinite;
    pointer-events:none;
}
@keyframes dx-ribbon-shine{
    0%   { left:-30%; }
    55%  { left:130%; }
    100% { left:130%; }
}
.dx-ribbon__inner{
    max-width:1600px;
    margin:0 auto;
    padding:10px clamp(16px, 3vw, 28px);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    position:relative;
    z-index:1;
}
.dx-ribbon__link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    letter-spacing:.01em;
    transition:filter .2s ease;
    min-width:0;
    flex:1 1 auto;            /* let the link grow, but arrow still hugs the text via margin-right:auto on langswitch */
}
.dx-ribbon__link:hover{filter:brightness(1.08);}
.dx-ribbon__icon{
    flex:0 0 32px;
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    animation:dx-ribbon-bob 1.8s ease-in-out infinite;
}
.dx-ribbon__icon svg{width:16px; height:16px;}
@keyframes dx-ribbon-bob{
    0%, 100% { transform:translateY(0) rotate(0); }
    25%      { transform:translateY(-3px) rotate(-6deg); }
    50%      { transform:translateY(0) rotate(0); }
    75%      { transform:translateY(-3px) rotate(6deg); }
}
.dx-ribbon__text{line-height:1.35; min-width:0;}
.dx-ribbon__text strong{color:#FFD500; font-weight:700;}
.dx-ribbon__arrow{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    margin-left:6px;
    margin-right:auto;
    position:relative;
    transition:transform .2s ease, background .2s ease;
    animation:dx-ribbon-arrow-pulse 1.8s ease-in-out infinite;
}
.dx-ribbon__arrow::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.45);
    animation:dx-ribbon-arrow-ring 1.8s ease-out infinite;
    pointer-events:none;
}
.dx-ribbon__arrow svg{width:14px; height:14px;}
.dx-ribbon__link:hover .dx-ribbon__arrow{
    transform:translateX(4px);
    background:rgba(255,255,255,.32);
}
@keyframes dx-ribbon-arrow-pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.08)}
}
@keyframes dx-ribbon-arrow-ring{
    0%{transform:scale(.85);opacity:.85}
    100%{transform:scale(1.35);opacity:0}
}
@media (prefers-reduced-motion:reduce){
    .dx-ribbon__arrow,
    .dx-ribbon__arrow::before{animation:none}
}

/* Language switcher variant for the ribbon — light pill on the dark/yellow gradient.
   Sits in its own column with a visible divider line + clear padding so it never looks
   merged with the promo arrow next to it. */
.dx-langswitch--ribbon{
    background:rgba(255,255,255,.95);
    color:#0f172a;
    flex:0 0 auto;
    padding:5px 10px;
    font-size:11px;
    margin-left:20px;
    position:relative;
}
.dx-langswitch--ribbon::before{
    content:"";
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
    height:22px;
    width:1px;
    background:rgba(255,255,255,.45);
}
.dx-langswitch--ribbon:hover{background:#fff;}
.dx-langswitch--ribbon .dx-langswitch__flag{width:20px; height:13px;}

/* Language dropdown inside the ribbon — L12: typography pill «UA/RU». */
.dx-lang--single{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;
    background:#053ed2;
    color:#fff;
    text-decoration:none;
    font:900 12px/1 'Google Sans Flex','Google Sans',system-ui,sans-serif;
    letter-spacing:.06em;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    transition:background .22s ease, transform .22s ease, box-shadow .22s ease;
    margin-left:auto;
    position:relative;
    flex:0 0 auto;
    box-sizing:border-box;
}
.dx-lang--single::before{
    content:"";
    position:absolute;
    left:-10px; top:50%;
    transform:translateY(-50%);
    height:22px; width:1px;
    background:rgba(255,255,255,.45);
    pointer-events:none;
}
.dx-lang--single:hover{background:#163a84; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.32);}
.dx-lang--single .dx-lang__globe{display:none;}
.dx-lang--single .dx-lang__code{
    display:inline-block;
    font:900 12px/1 'Google Sans Flex','Google Sans',system-ui,sans-serif;
    letter-spacing:.06em;
    color:#fff;
    line-height:2.7;
    text-align:center;
    width:100%;
}
.dx-lang{
    position:relative;
    flex:0 0 auto;
    margin-left:20px;
    display:inline-block;
}
.dx-lang:not(.dx-lang--single)::before{
    content:"";
    position:absolute;
    left:-10px; top:50%;
    transform:translateY(-50%);
    height:22px; width:1px;
    background:rgba(255,255,255,.45);
    pointer-events:none;
}
.dx-lang summary.dx-lang__btn{
    list-style:none;
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 10px 5px 12px;
    border-radius:6px;
    background:rgba(255,255,255,.95);
    color:#0f172a;
    font:700 11px/1 'Google Sans Flex','Google Sans',system-ui,sans-serif;
    letter-spacing:.06em;
    cursor:pointer;
    transition:background .18s ease;
    -webkit-user-select:none;
    user-select:none;
}
.dx-lang summary.dx-lang__btn::-webkit-details-marker{display:none;}
.dx-lang summary.dx-lang__btn::marker{display:none; content:"";}
.dx-lang summary.dx-lang__btn:hover{background:#fff;}
.dx-lang__chev{
    display:inline-block;
    width:7px; height:7px;
    border:1.5px solid #0f172a;
    border-top:0; border-left:0;
    transform:rotate(45deg) translate(-1px,-2px);
    transition:transform .2s ease;
}
.dx-lang[open] .dx-lang__chev{transform:rotate(-135deg) translate(-2px,-1px);}
.dx-lang__menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:#fff;
    color:#0f172a;
    border-radius:6px;
    padding:4px;
    min-width:72px;
    box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(15,23,42,.08);
    z-index:1050;
    display:flex; flex-direction:column; gap:2px;
    animation:dx-lang-pop .18s ease;
}
@keyframes dx-lang-pop{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:translateY(0);}
}
.dx-lang__opt{
    padding:6px 12px;
    border-radius:4px;
    font:700 11px/1 'Google Sans Flex','Google Sans',system-ui,sans-serif;
    letter-spacing:.06em;
    color:#0f172a;
    text-decoration:none;
    text-align:center;
    transition:background .15s ease, color .15s ease;
}
.dx-lang__opt:hover{background:#f4f6fb;}
.dx-lang__opt.is-active{background:#0c1e4d; color:#fff; cursor:default;}
@media (max-width:560px){
    .dx-lang{margin-left:14px;}
    .dx-lang summary.dx-lang__btn{padding:4px 8px 4px 10px; font-size:10.5px;}
}

@media (prefers-reduced-motion:reduce){
    .dx-ribbon__shine, .dx-ribbon__icon{ animation:none; }
}
@media (max-width:560px){
    .dx-ribbon__inner{font-size:11.5px; line-height:1.3; gap:8px; padding:5px 12px;}
    .dx-ribbon__link{font-size:11.5px; gap:8px;}
    .dx-ribbon__icon{width:22px; height:22px; flex-basis:22px;}
    .dx-ribbon__icon svg{width:13px; height:13px;}
    .dx-topbar{padding:2px 0 !important;}
    .dx-topbar.is-scrolled{padding:1px 0 !important;}
    .dx-topbar__inner{padding-inline:10px !important; min-height:42px !important;}
    .dx-topbar .dx-contact-group{padding:2px 2px !important; gap:6px !important;}
    .dx-topbar .dx-burger{margin-left:8px !important;}
}
@media (max-width:420px){
    .dx-ribbon__inner{padding:5px 10px; gap:6px;}
    .dx-topbar__inner{padding-inline:8px !important;}
    .dx-topbar .dx-contact-group{gap:4px !important;}
}

/* ============================================================
   Top bar (sticky + fixed feel) — logo left, menu right
   ============================================================ */
.dx-topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:#ffffff;
    padding:6px 0;
    margin:0;
    box-sizing:border-box;
    backdrop-filter:saturate(180%) blur(6px);
    -webkit-backdrop-filter:saturate(180%) blur(6px);
    transition:padding .55s cubic-bezier(.65,0,.35,1), background-color .55s ease, backdrop-filter .55s ease;
    will-change:padding,background;
}
.dx-topbar.is-scrolled{
    padding:2px 0;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.dx-topbar__inner,
.dx-topbar__link,
.dx-logo__mark,
.dx-logo__text,
.dx-nav-ico{transition:all .55s cubic-bezier(.65,0,.35,1) !important;}
.dx-topbar.is-scrolled .dx-topbar__inner{
    min-height:44px;
}
@media (max-width:960px){
    .dx-topbar{ position:sticky !important; top:0 !important; }
    .dx-topbar.is-scrolled .dx-topbar__inner{ min-height:42px; }
    .dx-topbar__inner{
        display:flex !important;
        justify-content:flex-start;
        align-items:center;
        gap:0 !important;
        grid-template-columns:none !important;
    }
    .dx-topbar__logo{order:1;margin-right:auto !important;justify-self:auto !important;}
    .dx-topbar .dx-contact-group{order:2;margin:0 !important;margin-left:auto !important;justify-self:auto !important;padding:3px 4px;gap:10px !important;background:transparent;width:fit-content !important;flex:0 0 auto !important;display:inline-flex !important;}
    .dx-topbar .dx-burger{order:3;margin-left:12px !important;}
    .dx-topbar__nav{order:4;}
}
@media (prefers-reduced-motion: reduce){
    .dx-topbar{ transition:none; }
}
.dx-topbar__inner{
    max-width:1600px;
    margin:0 auto;
    padding:0 24px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    min-height:48px;
    gap:14px;
}
.dx-topbar__logo{justify-self:start;grid-column:1;}
.dx-topbar .dx-burger{justify-self:start;grid-column:1;}
.dx-topbar__nav{justify-self:center;grid-column:2;margin:0 !important;}
.dx-topbar .dx-contact-group{justify-self:end;grid-column:3;margin:0 !important;}
/* Logo #21 — wordmark inside a solid blue plate, with breathing room around it */
.dx-topbar__logo{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    padding:5px 14px 5px 10px;
    margin:0;
    color:inherit;
    background:#0057B7;
    border-radius:12px;
    box-shadow:0 8px 20px -10px rgba(0,87,183,.55);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, background-color .22s ease;
}
.dx-topbar__logo:hover{
    transform:translateY(-1px);
    background:#0061cc;
    box-shadow:0 12px 24px -10px rgba(0,87,183,.7);
}
.dx-topbar__logo picture{display:block; line-height:0;}
.dx-topbar__logo img{
    display:block;
    height:34px;          /* Compact; srcset delivers 2x for crisp retina rendering */
    width:auto;
    max-width:none;
    transition:transform .25s cubic-bezier(.22,.61,.36,1), filter .25s ease;
}
.dx-topbar__logo:hover img{
    transform:translateY(-1px) scale(1.02);
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

/* Logo mark — yellow recycle ring; arcs slowly spin around the centre dot */
.dx-logo__mark{
    width:clamp(30px, 3vw, 38px);
    height:clamp(30px, 3vw, 38px);
    margin-right:8px;
    flex:0 0 auto;
}
.dx-logo__mark > path{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:dx-logo-spin 6s linear infinite;
}
@keyframes dx-logo-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
    .dx-logo__mark > path{ animation:none; }
}

/* Wordmark — sits on the blue plate; LIFE white + MET yellow */
.dx-logo__text{
    position:relative;
    display:inline-flex;
    align-items:baseline;
    font-family:"Google Sans Flex","Google Sans",sans-serif;
    font-weight:900;
    font-size:clamp(22px, 2.4vw, 28px);
    line-height:1;
    letter-spacing:-.01em;
}
.dx-logo__a{
    color:#ffffff;                                    /* LIFE — white on the blue plate */
}
.dx-logo__b{
    color:#FFD500;                                    /* MET — solid yellow on the blue plate */
    -webkit-text-stroke:0;
    text-shadow:none;
}
.dx-topbar__logo:hover .dx-logo__text{
    transform:translateY(-1px) scale(1.03);
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

@media (max-width:768px){
    .dx-topbar__logo img{height:28px;}
    .dx-logo__text{font-size:24px;}
}
@media (max-width:420px){
    .dx-topbar__logo img{height:24px;}
    .dx-logo__text{font-size:21px;}
}

.dx-topbar__nav{flex:0 1 auto;}
.dx-topbar__list{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
    gap:6px;
}
.dx-topbar__item{margin:0; position:relative;}
.dx-topbar__list{position:relative;}

/* Pill-Nav — each menu item is its own capsule. Soft grey baseline, blue capsule on hover, lift + shadow */
.dx-topbar__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 16px;
    color:#1f2937;
    font-family:inherit;
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-decoration:none;
    background:#f4f6fb;                              /* soft baseline pill */
    border-radius:999px;
    white-space:nowrap;
    transition:color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.dx-nav-ico{
    width:16px; height:16px;
    flex:0 0 16px;
    color:#0057B7;
    transition:color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.dx-topbar__link:hover,
.dx-topbar__link:focus-visible{
    background:#0057B7;
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 8px 18px -6px rgba(0,87,183,.55);
    outline:none;
}
.dx-topbar__link:hover .dx-nav-ico,
.dx-topbar__link:focus-visible .dx-nav-ico{
    color:#FFD500;
    transform:scale(1.1);
}
.dx-topbar__item.is-active > .dx-topbar__link{
    background:#0057B7;
    color:#ffffff;
    box-shadow:0 8px 18px -6px rgba(0,87,183,.5);
}
.dx-topbar__item.is-active > .dx-topbar__link .dx-nav-ico{color:#FFD500;}

/* Active item WITH submenu — paint the whole pill blue (link itself stays transparent
   to inherit the pill bg), so the white label keeps contrast and the yellow chevron
   visually anchors as the dropdown trigger. */
.dx-topbar__item.is-active.has-menu{
    background:#0057B7;
    box-shadow:0 8px 18px -6px rgba(0,87,183,.5);
}
.dx-topbar__item.is-active.has-menu > .dx-topbar__link{
    background:transparent;
    box-shadow:none;
    color:#ffffff;
}
.dx-topbar__item.is-active.has-menu > .dx-topbar__link .dx-nav-ico{color:#FFD500;}
.dx-topbar__item.is-active.has-menu > .dx-topbar__chevron{
    background:#FFD500;
    color:#0a1428;
}

/* Items with submenu — link + chevron live INSIDE one shared pill */
.dx-topbar__item.has-menu{
    display:inline-flex;
    align-items:stretch;
    background:#f4f6fb;
    border-radius:999px;
    transition:background-color .2s ease, transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.dx-topbar__item.has-menu > .dx-topbar__link{
    background:transparent;
    box-shadow:none;
    padding-right:6px;
}
.dx-topbar__item.has-menu > .dx-topbar__link:hover,
.dx-topbar__item.has-menu > .dx-topbar__link:focus-visible{
    background:transparent;
    color:inherit;
    transform:none;
    box-shadow:none;
}
.dx-topbar__item.has-menu > .dx-topbar__chevron{
    background:#FFD500;
    color:#0a1428;
    width:24px; height:24px;
    margin:0 8px 0 4px;
    padding:0;
    border-radius:50%;
    align-self:center;
    flex:0 0 24px;
    box-shadow:0 2px 6px -2px rgba(255,213,0,.55);
}
.dx-topbar__item.has-menu > .dx-topbar__chevron:hover{
    background:#ffdf2b;
    color:#0a1428;
    transform:scale(1.05);
}
.dx-topbar__item.has-menu > .dx-topbar__chevron svg{width:11px; height:11px; stroke-width:3;}
.dx-topbar__item.has-menu:hover,
.dx-topbar__item.has-menu:focus-within{
    background:#0057B7;
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 8px 18px -6px rgba(0,87,183,.55);
}
.dx-topbar__item.has-menu:hover > .dx-topbar__link,
.dx-topbar__item.has-menu:focus-within > .dx-topbar__link{color:#ffffff;}
.dx-topbar__item.has-menu:hover > .dx-topbar__chevron,
.dx-topbar__item.has-menu:focus-within > .dx-topbar__chevron{background:#FFD500; color:#0a1428;}
.dx-topbar__item.has-menu:hover .dx-nav-ico,
.dx-topbar__item.has-menu:focus-within .dx-nav-ico{color:#FFD500; transform:scale(1.1);}

/* ============================================================
   Contact group — Viber / Telegram / WhatsApp / Phone in same circular style
   ============================================================ */
/* Style #17 — Floating-pill: 4 buttons packed inside one wide white capsule with strong shadow */
.dx-contact-group{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    padding:4px 6px;
    background:#ffffff;
    border-radius:999px;
    flex:0 0 auto;
    width:fit-content;
}

/* Messenger circles — packed inside the white pill, brand colors, white pictograms */
.dx-callbtn--ico{
    width:48px; height:48px;
    padding:0;
    margin-left:0;
    color:#ffffff;
    border-radius:50%;
    overflow:hidden;
}
.dx-callbtn--ico .dx-callbtn__icon{width:48px; height:48px; color:inherit; display:inline-flex; align-items:center; justify-content:center;}
.dx-callbtn--ico .dx-callbtn__icon svg{width:26px; height:26px;}
@media (max-width:420px){
    .dx-callbtn--secondary{display:none;}
}
@media (min-width:421px) and (max-width:640px){
    .dx-callbtn--ico{width:42px;height:42px;}
    .dx-callbtn--ico .dx-callbtn__icon{width:42px;height:42px;}
}
.dx-callbtn.dx-callbtn--viber   {background:#7360F2; box-shadow:0 6px 16px -6px rgba(115,96,242,.55);}
.dx-callbtn.dx-callbtn--viber:hover   {background:#8275ff; box-shadow:0 10px 22px -6px rgba(115,96,242,.7);}
.dx-callbtn.dx-callbtn--telegram{background:#229ED9; box-shadow:0 6px 16px -6px rgba(34,158,217,.55);}
.dx-callbtn.dx-callbtn--telegram:hover{background:#33b3ec; box-shadow:0 10px 22px -6px rgba(34,158,217,.7);}
.dx-callbtn.dx-callbtn--whatsapp{background:#25D366; box-shadow:0 6px 16px -6px rgba(37,211,102,.55);}
.dx-callbtn.dx-callbtn--whatsapp:hover{background:#3ee07c; box-shadow:0 10px 22px -6px rgba(37,211,102,.7);}
/* Messenger buttons don't expand and don't pulse */
.dx-callbtn--ico::before{display:none;}
.dx-callbtn--ico.is-open{width:42px; padding:0;}

/* ============================================================
   Call button — yellow brand pill, expands left to reveal the number on click
   ============================================================ */
.dx-callbtn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    height:42px;
    width:42px;
    padding:0;
    background:#FFD500;
    color:#0a1428;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
    letter-spacing:.01em;
    border-radius:999px;
    overflow:hidden;
    cursor:pointer;
    transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease, width .35s cubic-bezier(.22,.61,.36,1), padding .35s cubic-bezier(.22,.61,.36,1);
}
.dx-callbtn:hover{background:#ffdf2e;}
.dx-callbtn__icon{
    flex:0 0 42px;
    width:42px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#0057B7;
}
.dx-callbtn__icon svg{width:24px; height:24px;}
.dx-callbtn__num{
    display:none;                                    /* hidden by default — collapses out of flex flow so the icon centers in the 42px circle */
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
/* Expanded state — phone number drops DOWN below the row as a separate yellow pill */
.dx-callbtn.is-open{
    overflow:visible;
}
.dx-callbtn.is-open .dx-callbtn__num{
    display:inline-flex;
    align-items:center;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    padding:10px 18px;
    background:#FFD500;
    color:#0a1428;
    border-radius:999px;
    box-shadow:0 10px 24px -6px rgba(255,213,0,.85), 0 4px 12px -4px rgba(15,23,42,.18);
    white-space:nowrap;
    font-weight:800;
    font-size:14px;
    animation:dx-callbtn-num-in .3s cubic-bezier(.22,.61,.36,1);
    z-index:6;
}
.dx-callbtn.is-open .dx-callbtn__num::before{
    content:'';
    position:absolute;
    bottom:100%;
    right:14px;
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #FFD500;
}
@keyframes dx-callbtn-num-in{
    from{opacity:0; transform:translateY(-6px);}
    to  {opacity:1; transform:translateY(0);}
}
/* Soft pulse ring while idle to draw attention */
.dx-callbtn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(255,213,0,.6);
    animation:dx-callbtn-pulse 2.4s ease-out infinite;
    pointer-events:none;
}
.dx-callbtn{position:relative;}
@keyframes dx-callbtn-pulse{
    0%   {box-shadow:0 0 0 0 rgba(255,213,0,.55);}
    70%  {box-shadow:0 0 0 12px rgba(255,213,0,0);}
    100% {box-shadow:0 0 0 0 rgba(255,213,0,0);}
}
.dx-callbtn.is-open::before{animation:none;}

/* Mobile: collapse phone pill to a round icon-only button; tel: link triggers call directly */
@media (max-width:768px){
    .dx-callbtn{width:38px; height:38px; padding:0; gap:0;}
    .dx-callbtn__icon{width:38px; height:38px; flex-basis:38px;}
    .dx-callbtn__num{display:none;}
}
@media (prefers-reduced-motion: reduce){
    .dx-callbtn::before{animation:none;}
}

/* Chevron toggler beside parent links that have a submenu */
.dx-topbar__chevron{
    appearance:none;
    background:transparent;
    border:0;
    cursor:pointer;
    width:28px; height:28px;
    margin-left:-4px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1f2937;
    border-radius:50%;
    transition:background-color .2s ease, color .2s ease, transform .35s cubic-bezier(.65,0,.35,1);
}
.dx-topbar__chevron svg{width:14px; height:14px; transition:transform .35s cubic-bezier(.65,0,.35,1);}
.dx-topbar__chevron:hover{background:#f3f4f6; color:#0057b7;}
.dx-topbar__item.is-open .dx-topbar__chevron{color:#0057b7;}
.dx-topbar__item.is-open .dx-topbar__chevron svg{transform:rotate(-180deg);}

/* Submenu — appears below parent */
.dx-submenu__grouplabel{
    padding:10px 14px 4px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#64748b;
    pointer-events:none;
}
.dx-submenu__link{display:inline-flex;align-items:center;gap:12px;font-size:14.5px;}
.dx-submenu__item{padding:2px 0;}
.dx-submenu__link{padding:10px 12px;}
.dx-submenu__elem{
    flex:0 0 26px;
    width:26px;
    height:26px;
    border-radius:7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 2px 6px -2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.dx-submenu__grouplabel:first-child{padding-top:6px;}
.dx-submenu__item--g-drag .dx-submenu__link{font-weight:700;}
.dx-submenu__item--g-drag .dx-submenu__link::after{
    content:" \2726";
    color:#FFD500;
    font-size:12px;
    margin-left:4px;
}
.dx-submenu{
    position:absolute;
    top:100%;
    left:0;
    margin:6px 0 0;
    padding:8px;
    list-style:none;
    min-width:280px;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:10px;
    box-shadow:0 12px 36px -8px rgba(15,23,42,.25), 0 4px 12px -4px rgba(15,23,42,.12);
    opacity:0;
    transform:translateY(-8px) scale(.98);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
    z-index:5;
}
/* Desktop dropdown layout: 2 columns only for the long Цветной лом list
   (`.dx-submenu--with-side` is the cvetmet variant). Металлопрокат
   (`.dx-submenu--with-side-right`) keeps its single-column layout. */
@media (min-width:961px){
    .dx-submenu--with-side{
        display:grid;
        grid-template-columns:repeat(2, minmax(180px, 1fr));
        column-gap:6px;
        grid-auto-flow:row;
        min-width:480px;
    }
}
.dx-topbar__item.is-open .dx-submenu{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

/* Submenu side-label ribbons (e.g. "приём" on cvetmet left, contacts on prokat right).
   The .dx-submenu is already position:absolute, so it's a containing block for the pseudos. */
.dx-submenu--with-side      {padding-left:44px;}
.dx-submenu--with-side-right{padding-right:44px;}
.dx-submenu--with-side::before,
.dx-submenu--with-side-right::after{
    position:absolute;
    top:0; bottom:0;
    width:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(220,223,228,.6);
    color:#1a1f2e;
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    writing-mode:vertical-rl;
    user-select:none;
    pointer-events:none;
    white-space:nowrap;
}
.dx-submenu--with-side::before{
    content:attr(data-side);
    left:0;
    transform:rotate(180deg);                /* read bottom-to-top */
    border-radius:10px 0 0 10px;
    font-size:10.5px;
    letter-spacing:.12em;
    padding-bottom:22px;                     /* leave room for the status dot at top */
}
.dx-submenu--with-side-right::after{
    content:attr(data-side-right);
    right:0;
    transform:rotate(180deg);          /* read bottom-to-top, like the left ribbon */
    border-radius:0 10px 10px 0;
    font-size:10.5px;
    letter-spacing:.12em;
    padding-bottom:22px;               /* leave room at the (now-bottom of text) top */
}

/* ============================================================
   Burger button — circular UA-flag pill with animated open/close
   ============================================================ */
.dx-burger{
    display:none;
    align-items:center;
    justify-content:center;
    position:relative;
    width:44px;
    height:44px;
    padding:0;
    background:linear-gradient(135deg, #0057B7 0%, #1a72d9 50%, #003a82 100%);
    border-radius:50%;
    border:0;
    cursor:pointer;
    flex:0 0 auto;
    order:3;
    margin-left:auto;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -2px 4px rgba(0,0,0,.2),
        0 6px 14px -4px rgba(0,87,183,.5),
        0 2px 4px rgba(0,0,0,.15);
    transition:transform .25s ease, box-shadow .25s ease;
}
.dx-burger:hover{
    transform:scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -2px 4px rgba(0,0,0,.2),
        0 10px 20px -4px rgba(0,87,183,.6),
        0 3px 6px rgba(0,0,0,.2);
}
.dx-burger:focus-visible{ outline:2px solid #FFD500; outline-offset:3px; }
.dx-burger__bars{
    position:relative;
    display:inline-block;
    width:20px; height:14px;
    flex:0 0 auto;
}
.dx-burger__bars > span{
    position:absolute;
    left:0;
    width:100%; height:2.5px;
    background:#ffffff;
    border-radius:2px;
    transform-origin:center;
    transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .2s ease, top .35s ease, bottom .35s ease;
}
.dx-burger__bars > span:nth-child(1){ top:0; }
.dx-burger__bars > span:nth-child(2){ top:50%; transform:translateY(-50%); }
.dx-burger__bars > span:nth-child(3){ bottom:0; }

body.is-menu-open .dx-burger__bars > span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
body.is-menu-open .dx-burger__bars > span:nth-child(2){ opacity:0; }
body.is-menu-open .dx-burger__bars > span:nth-child(3){ top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg); }

/* === v46 Bouncing dots burger === */
.dx-burger__dots{display:inline-flex;align-items:center;gap:4px;}
.dx-burger__dots i{
    display:block;
    width:5px;height:5px;
    border-radius:50%;
    background:#ffffff;
    animation:dxBurgerBounce 1.2s ease-in-out infinite;
}
.dx-burger__dots i:nth-child(2){animation-delay:.15s;}
.dx-burger__dots i:nth-child(3){animation-delay:.3s;}
@keyframes dxBurgerBounce{
    0%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-5px);}
}
body.is-menu-open .dx-burger__dots i{animation:none;}
body.is-menu-open .dx-burger__dots i:nth-child(1){transform:translate(7px,0);}
body.is-menu-open .dx-burger__dots i:nth-child(2){opacity:0;}
body.is-menu-open .dx-burger__dots i:nth-child(3){transform:translate(-7px,0);}
.dx-burger__dots i{transition:transform .25s ease, opacity .15s ease;}
@media (prefers-reduced-motion: reduce){
    .dx-burger__dots i{animation:none;}
}

/* ============================================================
   Responsive: compact pills at mid-widths, drawer menu on mobile
   ============================================================ */
@media (max-width:1500px){
    .dx-topbar__inner{ gap:16px; padding:0 18px; }
    .dx-topbar__list{ gap:4px; flex-wrap:nowrap; }
    .dx-topbar__link{ padding:0 11px; font-size:12px; height:38px; letter-spacing:.03em; gap:6px; }
    .dx-topbar__item.has-menu > .dx-topbar__chevron{ width:22px; height:22px; flex:0 0 22px; margin:0 6px 0 2px; }
    .dx-contact-group{ gap:8px; padding:6px 8px; margin-left:8px; }
    .dx-callbtn,
    .dx-callbtn--ico{ width:38px; height:38px; }
    .dx-callbtn--ico .dx-callbtn__icon,
    .dx-callbtn__icon{ width:38px; height:38px; flex-basis:38px; }
    .dx-callbtn--ico .dx-callbtn__icon svg,
    .dx-callbtn__icon svg{ width:20px; height:20px; }
}
@media (max-width:1400px){
    .dx-topbar__label{ display:none; }                    /* icon-only at mid widths */
    .dx-topbar__link{ padding:0 10px; gap:0; }
    .dx-topbar__item.has-menu > .dx-topbar__link{ padding:0 6px 0 10px; }
}
@media (max-width:1100px){
    .dx-topbar__inner{ gap:12px; padding:0 14px; }
    .dx-topbar__list{ gap:3px; }
    .dx-topbar__link{ padding:0 8px; height:36px; }
    .dx-nav-ico{ width:15px; height:15px; flex-basis:15px; }
    .dx-topbar__item.has-menu > .dx-topbar__chevron{ width:20px; height:20px; flex:0 0 20px; margin:0 4px 0 2px; }
    .dx-topbar__logo{ padding:8px 14px 8px 10px; }
}

/* Mobile drawer */
@media (max-width:960px){
    .dx-burger{ display:inline-flex; }
    .dx-topbar__nav{
        position:absolute;
        top:100%;
        left:0; right:0;
        background:#ffffff;
        padding:14px 16px 20px;
        max-height:calc(100vh - 60px);
        overflow-y:auto;
        box-shadow:0 14px 30px -10px rgba(15,23,42,.25);
        opacity:0;
        transform:translateY(-10px);
        pointer-events:none;
        transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
        z-index:50;
    }
    body.is-menu-open .dx-topbar__nav{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }
    .dx-topbar__list{ flex-direction:column; gap:6px; align-items:stretch; }
    .dx-topbar__item{ width:100%; }
    .dx-topbar__item.has-menu{ width:100%; }
    .dx-topbar__link{
        width:100%;
        height:46px;
        font-size:13px;
        justify-content:flex-start;
        letter-spacing:.04em;
        padding:0 16px;
        gap:12px;                                         /* breathing room between icon and label */
    }
    .dx-topbar__label{ display:inline; }                  /* labels back on mobile */
    .dx-nav-ico{ width:16px; height:16px; flex-basis:16px; }
    .dx-topbar__item.has-menu > .dx-topbar__link{ flex:1 1 auto; }
    .dx-submenu{
        position:static;
        opacity:1;
        transform:none;
        pointer-events:auto;
        box-shadow:none;
        border:0;
        margin:4px 0 0;
        padding:6px 0 6px 14px;
        background:transparent;
        min-width:0;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
    }
    .dx-topbar__item.is-open .dx-submenu{
        max-height:1400px;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        column-gap:6px;
        row-gap:2px;
    }
    .dx-submenu__link{
        padding:8px 10px !important;
        font-size:14.5px !important;
        min-height:38px;
        line-height:1.25;
    }
    .dx-submenu--with-side,
    .dx-submenu--with-side-right{ padding-left:14px; padding-right:0; }
    .dx-submenu--with-side::before,
    .dx-submenu--with-side-right::after{ display:none; }  /* hide side ribbons on mobile */
    .dx-submenu__status{ display:none; }                  /* lamps in dropdowns hidden on mobile */
    .dx-contact-group{
        margin-left:auto;
        flex:1 1 auto;
        justify-content:space-around;
        min-width:0;
    }
    /* (Mobile popup rules moved AFTER base .dx-contact-popup styles below — иначе они переопределяются.) */
}
@media (max-width:600px){
    .dx-topbar__inner{ min-height:44px; padding:0 10px; gap:8px; }
    .dx-topbar__logo{ padding:2px 8px 2px 6px; }
    .dx-topbar__logo img{ height:22px; }
    .dx-contact-group{ gap:6px; padding:3px 5px; }
    .dx-callbtn,
    .dx-callbtn--ico{ width:34px; height:34px; }
    .dx-callbtn--ico .dx-callbtn__icon,
    .dx-callbtn__icon{ width:34px; height:34px; flex-basis:34px; }
    .dx-callbtn--ico .dx-callbtn__icon svg,
    .dx-callbtn__icon svg{ width:17px; height:17px; }
}
@media (max-width:420px){
    /* All 4 icons stay visible — pill stretches the full width between logo and burger. */
    .dx-callbtn,
    .dx-callbtn--ico{ width:32px; height:32px; }
    .dx-callbtn--ico .dx-callbtn__icon,
    .dx-callbtn__icon{ width:32px; height:32px; flex-basis:32px; }
    .dx-callbtn--ico .dx-callbtn__icon svg,
    .dx-callbtn__icon svg{ width:16px; height:16px; }
    .dx-contact-group{ padding:3px 6px; gap:4px; }
}

/* Working-hours status dot — sits inside the ribbon's top edge.
   JS toggles .is-closed when current Kyiv time is outside the relevant schedule. */
.dx-submenu__status{
    position:absolute;
    top:8px;
    width:8px; height:8px;
    border-radius:50%;
    background:#10b981;                                       /* green = open */
    box-shadow:0 0 8px rgba(16,185,129,.65), 0 0 0 2px rgba(16,185,129,.18);
    margin:0; padding:0;
    list-style:none;
    z-index:2;
    animation:dx-status-blink 1.4s ease-in-out infinite;
    pointer-events:none;
}
.dx-submenu__status--left { left:11px;  }
.dx-submenu__status--right{ right:11px; }
.dx-submenu__status.is-closed{
    background:#ef4444;                                       /* red = closed, blinking too */
    box-shadow:0 0 6px rgba(239,68,68,.5), 0 0 0 2px rgba(239,68,68,.15);
    animation:dx-status-blink-red .95s ease-in-out infinite;
}
@keyframes dx-status-blink{
    0%, 100% { opacity:1;   }
    50%      { opacity:.45; }
}
@keyframes dx-status-blink-red{
    0%, 100% { opacity:1;   }
    50%      { opacity:.35; }
}

/* Messenger / phone icons wiggle continuously to draw attention.
   Per request 2026-05-21: always animate, not just after-hours.
   Set covers: topbar (.dx-callbtn--ico + phone button), footer messengers,
   category-page hero & CTA messengers (.dx-cat__msgr). */
@keyframes dx-msg-wiggle{
    0%, 60%, 100% { transform:scale(1)    rotate(0deg);    }
    8%            { transform:scale(1.08) rotate(-9deg);   }
    16%           { transform:scale(1.08) rotate(8deg);    }
    24%           { transform:scale(1.06) rotate(-6deg);   }
    32%           { transform:scale(1.04) rotate(4deg);    }
    40%           { transform:scale(1.02) rotate(-2deg);   }
}
.dx-footer__msgr,
.dx-callbtn--ico,
.dx-callbtn:not(.dx-callbtn--ico),
.dx-cat__msgr{
    animation:dx-msg-wiggle 2.4s ease-in-out infinite;
}
/* Stagger so the four icons don't pulse in unison */
.dx-footer__social li:nth-child(2) .dx-footer__msgr,
.dx-callbtn--telegram,
.dx-cat__msgr--telegram{ animation-delay:.25s; }
.dx-footer__social li:nth-child(3) .dx-footer__msgr,
.dx-callbtn--whatsapp,
.dx-cat__msgr--viber{ animation-delay:.5s; }
.dx-callbtn:not(.dx-callbtn--ico){ animation-delay:.75s; transform-origin:center center; }
@media (prefers-reduced-motion:reduce){
    .dx-footer__msgr,
    .dx-callbtn--ico,
    .dx-callbtn:not(.dx-callbtn--ico),
    .dx-cat__msgr{ animation:none; }
}
@media (prefers-reduced-motion:reduce){
    .dx-submenu__status,
    .dx-footer__status-dot{ animation:none; }
}

/* Footer brand promo — encourages messenger contact, two states (open/closed).
   Both <p> variants live in the same grid cell so the container reserves the height
   of the LARGER text — switching state never shifts the messenger icons below. */
.dx-footer__col--brand{ position:relative; }
.dx-footer__promo{
    position:relative;
    margin:0 0 18px;
    display:grid;
    grid-template-areas:"msg";
}
.dx-footer__led-arrow{display:none;}
.dx-footer__promo-msg{
    grid-area:msg;
    margin:0;
    font-size:13.5px;
    font-weight:600;
    line-height:1.4;
    color:#fff;
    visibility:hidden;
}
.dx-footer__promo[data-state="open"]   .dx-footer__promo-msg--open  { visibility:visible; }
.dx-footer__promo[data-state="closed"] .dx-footer__promo-msg--closed{ visibility:visible; }
.dx-footer__promo-sub{
    display:block;
    margin-top:4px;
    font-size:11.5px;
    font-weight:400;
    color:rgba(226,232,240,.6);
}
.dx-footer__promo-sub strong{
    color:#FFD500;
    font-weight:700;
}


/* Topbar auto-callout pointing at the messenger/phone icons.
   JS adds .is-visible on load for 10s, then removes it. Won't reappear. */
.dx-contact-popup{
    position:absolute;
    top:100%;
    right:0;
    margin-top:14px;
    min-width:380px;
    padding:14px 16px;
    background:rgba(15,23,42,.88);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
    color:#fff;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px -10px rgba(0,0,0,.55), 0 6px 14px -6px rgba(0,0,0,.4);
    opacity:0;
    transform:translateY(-6px) scale(.97);
    pointer-events:none;
    transition:opacity .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1);
    z-index:60;
}
.dx-contact-popup.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}
.dx-contact-popup::before{
    content:"";
    position:absolute;
    top:-6px;
    right:46px;
    width:12px; height:12px;
    background:rgba(15,23,42,.88);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    transform:rotate(45deg);
    border-top:1px solid rgba(255,255,255,.12);
    border-left:1px solid rgba(255,255,255,.12);
}
.dx-contact-popup__today{
    margin:0 0 10px;
    font-size:12px;
    color:#cbd5e1;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.dx-contact-popup__today-state{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(16,185,129,.18);
    color:#10b981;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dx-contact-popup__today-state::before{
    content:"●";
    font-size:7px;
    animation:dx-popup-blink 1.4s ease-in-out infinite;
}
.dx-contact-popup__today-state.is-off{
    background:rgba(239,68,68,.2);
    color:#fca5a5;
}
.dx-contact-popup__countdown{
    display:block;
    width:100%;
    margin-top:2px;
    font-size:11px;
    color:#fbbf24;
    font-weight:600;
}
@keyframes dx-popup-blink{50%{opacity:.4}}
.dx-contact-popup__msg{
    margin:0;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    color:#fff;
}
.dx-contact-popup__msg--closed{ display:none; }
.dx-contact-popup[data-state="closed"] .dx-contact-popup__msg--open  { display:none; }
.dx-contact-popup[data-state="closed"] .dx-contact-popup__msg--closed{ display:block; }
.dx-contact-popup__sub{
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,.6);
}
.dx-contact-popup__sub strong{
    color:#FFD500;
    font-weight:700;
}
/* «Сейчас все операторы на связи» — заголовок + список с зелёными точками и телефонами */
.dx-contact-popup__head{
    margin:0 0 10px;
    font-size:14px;
    font-weight:700;
    color:#fff;
    line-height:1.3;
    letter-spacing:.01em;
}
.dx-contact-popup__ops{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dx-contact-popup__ops li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    transition:background .15s ease;
}
.dx-contact-popup__ops li:hover{ background:rgba(255,255,255,.1); }
.dx-contact-popup__dot{
    flex:0 0 8px;
    width:8px; height:8px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 8px rgba(16,185,129,.7), 0 0 0 2px rgba(16,185,129,.2);
    animation:dx-status-blink 1.6s ease-in-out infinite;
}
.dx-contact-popup__dot.is-closed{
    background:#ef4444;
    box-shadow:0 0 8px rgba(239,68,68,.7), 0 0 0 2px rgba(239,68,68,.2);
}
.dx-contact-popup__close{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    padding:0;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    color:rgba(255,255,255,.75);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dx-contact-popup__close svg{width:14px; height:14px;}
.dx-contact-popup__close:hover,
.dx-contact-popup__close:focus-visible{
    background:rgba(239,68,68,.85);
    color:#fff;
    transform:scale(1.08);
    outline:none;
}
.dx-contact-popup__today{
    margin:0 28px 10px 0;
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,.85);
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dx-contact-popup__today-state{color:#10b981;}
.dx-contact-popup__today-state.is-off{color:#ef4444;}
.dx-contact-popup__op-meta{
    display:flex; flex-direction:column;
    flex:1 1 auto;
    min-width:0;
}
.dx-contact-popup__op-role{
    font-size:11px;
    font-weight:500;
    color:rgba(255,255,255,.62);
    letter-spacing:.01em;
    margin-top:1px;
}
.dx-contact-popup__op-name{
    flex:0 0 auto;
    font-size:13px;
    font-weight:600;
    color:#fff;
}
.dx-contact-popup__op-tel{
    margin-left:auto;
    font-size:13.5px;
    font-weight:700;
    color:#FFD500;
    font-variant-numeric:tabular-nums;
    text-decoration:none;
    letter-spacing:.01em;
    white-space:nowrap;
    flex:0 0 auto;
}
.dx-contact-popup__op-tel:hover{ color:#fff; text-decoration:underline; }
@media (prefers-reduced-motion:reduce){
    .dx-contact-popup__dot{ animation:none; }
}

@media (max-width:960px){
    .dx-contact-popup{
        position:fixed !important;
        top:62px !important;
        bottom:auto !important;
        right:8px !important;
        left:auto !important;
        margin-top:0 !important;
        min-width:0;
        max-width:none;
        width:min(380px, calc(100vw - 16px));
        padding:14px 16px;
        border-radius:14px;
        box-shadow:0 18px 40px -10px rgba(0,0,0,.65), 0 6px 14px -6px rgba(0,0,0,.45);
        transform:translateY(-10px) scale(.97);
    }
    .dx-contact-popup.is-visible{ transform:translateY(0) scale(1); }
    .dx-contact-popup::before{
        top:-6px !important;
        bottom:auto !important;
        left:auto !important;
        right:32px !important;
        transform:rotate(45deg) !important;
        border-top:1px solid rgba(255,255,255,.08) !important;
        border-left:1px solid rgba(255,255,255,.08) !important;
        border-right:none !important;
        border-bottom:none !important;
    }
    .dx-contact-popup__msg{ font-size:14.5px; }
    .dx-contact-popup__sub{ font-size:12.5px; }
    .dx-contact-popup__head{ font-size:13.5px; }
    .dx-contact-popup__op-name{ font-size:13px; }
    .dx-contact-popup__op-tel{ font-size:14px; }
}
.dx-submenu__item{margin:0;}
.dx-submenu__link{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 16px 11px 30px;
    color:#1f2937;
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    border-radius:8px;
    transition:background-color .15s ease, color .15s ease, transform .15s ease, padding-left .2s ease;
    letter-spacing:0;
    text-transform:none;
    line-height:1.2;
}
.dx-submenu__link::before{
    content:"";
    position:absolute;
    left:12px;
    top:50%;
    width:6px; height:6px;
    border-radius:50%;
    background:#FFD500;
    box-shadow:0 0 0 2px rgba(255,213,0,.22);
    transform:translateY(-50%) scale(.85);
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.dx-submenu__link:hover{
    background:#eef3fb;
    color:#0057b7;
    padding-left:32px;
}
.dx-submenu__link:hover::before{
    background:#0057B7;
    box-shadow:0 0 0 3px rgba(0,87,183,.18);
    transform:translateY(-50%) scale(1);
}
.dx-submenu__item.is-active .dx-submenu__link{
    background:#eef3fb;
    color:#0057b7;
    font-weight:700;
}
.dx-submenu__item.is-active .dx-submenu__link::before{
    background:#0057B7;
    box-shadow:0 0 0 3px rgba(0,87,183,.2);
    transform:translateY(-50%) scale(1);
}

/* Sticky bar scroll-shrink animation — smooth transitions on every changing property */
.dx-topbar{
    transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.dx-topbar.is-scrolled{
    box-shadow:0 2px 0 rgba(0,0,0,.04), 0 12px 24px -10px rgba(15,23,42,.25);
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(10px);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
}
.dx-topbar.is-scrolled .dx-topbar__logo img{height:26px;}
.dx-topbar.is-scrolled .dx-logo__mark{width:30px; height:30px;}
.dx-topbar.is-scrolled .dx-logo__text{font-size:clamp(22px, 2.4vw, 30px);}
.dx-topbar.is-scrolled .dx-topbar__link{height:34px; padding:0 14px;}
.dx-topbar.is-scrolled .dx-nav-ico{width:15px; height:15px; flex-basis:15px;}
.dx-topbar__inner{transition:min-height .35s cubic-bezier(.22,.61,.36,1);}
.dx-topbar__logo img{transition:height .35s cubic-bezier(.22,.61,.36,1);}
.dx-topbar__link{transition:height .35s cubic-bezier(.22,.61,.36,1), color .25s ease, background-color .25s ease;}
.dx-logo__mark{transition:width .35s cubic-bezier(.22,.61,.36,1), height .35s cubic-bezier(.22,.61,.36,1);}
.dx-logo__text{transition:font-size .35s cubic-bezier(.22,.61,.36,1);}
.dx-nav-ico{transition:width .35s cubic-bezier(.22,.61,.36,1), height .35s cubic-bezier(.22,.61,.36,1), color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);}
/* Pill-Nav replaces the old underline accents — keep empty placeholder to avoid affecting structure */

/* Logo: micro-grow on hover */
.dx-topbar__logo img{
    transition:transform .28s cubic-bezier(.22,.61,.36,1), filter .25s ease;
}
.dx-topbar__logo:hover img{
    transform:scale(1.06);
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

@media (max-width:768px){
    .dx-topbar{padding:4px 0;}
    .dx-topbar.is-scrolled{padding:2px 0;}
    .dx-topbar__inner{padding:0 12px; min-height:44px; gap:10px;}
    .dx-topbar__logo img{height:22px;}
    
    .dx-nav-ico{width:15px; height:15px; flex-basis:15px;}
    .dx-contact-group{gap:6px}
}
/* Progressive disclosure of social icons by viewport width.
   Уровень: ≤419 → Viber+phone; ≤559 → +Telegram; ≤767 → +WhatsApp; ≥768 → все 4. */
@media (max-width:419px){
    .dx-callbtn--whatsapp,
    .dx-callbtn--telegram{display:none !important;}
}
@media (min-width:420px) and (max-width:559px){
    .dx-callbtn--whatsapp{display:none !important;}
}
@media (max-width:960px){
    .dx-topbar{padding:3px 0;}
}

/* ============================================================
   Hero — animated gradient backdrop
   ============================================================ */
.dx-hero{
    position:relative;
    z-index:5;
    min-height:clamp(460px, 68vh, 680px);
    display:flex;
    align-items:center;
    color:#fff;
    isolation:isolate;
    background:
        radial-gradient(ellipse 85% 60% at 50% 0%, rgba(96,165,250,.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 25% 90%, rgba(30,64,175,.45) 0%, transparent 65%),
        linear-gradient(160deg, #0c1e4d 0%, #112f6e 30%, #163a84 50%, #102a64 70%, #0a1838 100%);
}
.dx-hero__bg{
    position:absolute; inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}
/* Three soft blobs that drift around — creates a "переливающийся" feel without WebGL. */
.dx-hero__blob{
    position:absolute;
    width:60vmax; height:60vmax;
    border-radius:50%;
    filter:blur(80px);
    opacity:.55;
    mix-blend-mode:screen;
    will-change:transform;
}
/* Flat flag — no decorative blobs */
.dx-hero__blob{display:none;}
@keyframes dx-blob-a{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(8vmax,4vmax) scale(1.15);}
}
@keyframes dx-blob-b{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(-6vmax,-3vmax) scale(.9);}
}
@keyframes dx-blob-c{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(-5vmax,6vmax) scale(1.1);}
}
/* Flat flag — no grid, no seam */
/* Тёмная сетка-overlay поверх флага — слегка «приглушает» насыщенный сине-жёлтый,
   делает hero техно-стильным (как на инженерных макетах). Радиальная маска убирает
   сетку к краям, чтобы рамки страницы не пересекались с линиями. */
.dx-hero__grid,
.dx-hero__tetris{display:none;}
.dx-hero__wordmark{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.dx-hero__wordmark span{
    font-size:clamp(120px, 26vw, 420px);
    font-weight:900;
    letter-spacing:.04em;
    color:rgba(255,255,255,.045);
    white-space:nowrap;
    line-height:1;
    user-select:none;
    text-transform:uppercase;
    display:inline-block;
}
@media (min-width:901px){
    .dx-hero__wordmark span{
        animation:dxWordmarkTypewriter 2s ease-out 1 both;
    }
}
@keyframes dxWordmarkTypewriter{
    0%{clip-path:inset(0 100% 0 0);}
    100%{clip-path:inset(0 0 0 0);}
}
@media (prefers-reduced-motion: reduce){
    .dx-hero__wordmark span{animation:none;}
}
.dx-hero__h1-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:-12px;
    width:clamp(48px, 5vw, 64px);
    height:clamp(48px, 5vw, 64px);
    margin-right:14px;
    filter:drop-shadow(0 4px 10px rgba(255,213,0,.35));
}
.dx-hero__h1-ico svg{width:100%; height:100%;}
.dx-hero__chip-wrap{
    display:inline-block;
    position:relative;
    margin:0 8px 0 6px;
    vertical-align:baseline;
}
.dx-hero__chip-wrap::before{
    content:"";
    position:absolute;
    inset:-3px 2px;
    clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0% 50%);
    background:transparent;
    border:0;
    box-shadow:inset 0 0 0 2px rgba(253,224,71,.7);
    animation:dx-dorogo-pulse 1.8s ease-out infinite;
    pointer-events:none;
    z-index:1;
    opacity:.7;
}
@keyframes dx-dorogo-pulse{
    0%{transform:scale(1);opacity:.7}
    70%{transform:scale(1.35);opacity:0}
    100%{transform:scale(1.35);opacity:0}
}
.dx-hero__chip{
    display:inline-block;
    padding:6px 30px;
    background:#334155;
    color:#fde047;
    clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0% 50%);
    font-weight:900;
    font-size:.92em;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-shadow:none;
    position:relative;
    z-index:2;
    white-space:nowrap;
    transition:transform .2s ease;
}
.dx-hero__chip-wrap:hover .dx-hero__chip{
    transform:scale(1.05);
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));
}
.dx-hero__coins{
    position:absolute;
    top:-78px;
    left:-32px;
    right:-32px;
    bottom:-12px;
    pointer-events:none;
    z-index:1;
}
.dx-hero__coins i{
    position:absolute;
    top:0;
    width:20px;
    height:11px;
    border-radius:2px;
    background:
        linear-gradient(135deg, #2d7a3e 0%, #4d9e5f 45%, #1e5c2c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        inset 0 0 0 2px rgba(20,60,30,.5),
        0 2px 4px rgba(0,0,0,.35);
    opacity:0;
    animation:dx-bill-fall 3.6s cubic-bezier(.35,.05,.55,1) infinite;
    font-style:normal;
}
.dx-hero__coins i::after{
    content:"$";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d8f0d8;
    font-size:9px;
    font-weight:900;
    font-family:Georgia, 'Times New Roman', serif;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.dx-hero__coins i:nth-child(1){left:4%;  width:18px; height:10px; animation-delay:0s;}
.dx-hero__coins i:nth-child(2){left:20%; width:22px; height:12px; animation-delay:.6s;}
.dx-hero__coins i:nth-child(3){left:36%; width:18px; height:10px; animation-delay:1.2s;}
.dx-hero__coins i:nth-child(4){left:52%; width:20px; height:11px; animation-delay:.3s;}
.dx-hero__coins i:nth-child(5){left:68%; width:22px; height:12px; animation-delay:1.7s;}
.dx-hero__coins i:nth-child(6){left:84%; width:18px; height:10px; animation-delay:.9s;}
.dx-hero__coins i:nth-child(7){left:46%; width:16px; height:9px;  animation-delay:2.2s;}
@keyframes dx-bill-fall{
    0%   { transform:translateY(0) rotate(-25deg) scale(.7); opacity:0; }
    12%  { opacity:1; transform:translateY(12px) rotate(8deg) scale(1); }
    50%  { transform:translateY(50px) rotate(-12deg) scale(1); }
    75%  { opacity:1; }
    100% { transform:translateY(105px) rotate(28deg) scale(.85); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
    .dx-hero__coins{display:none;}
}
.dx-hero__deco{
    position:absolute;
    z-index:0;
    top:40%;
    left:-2%;
    transform:rotate(-8deg);
    font-size:clamp(80px, 14vw, 240px);
    font-weight:900;
    color:rgba(255,213,0,.06);
    line-height:1;
    pointer-events:none;
    user-select:none;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-shadow:0 0 30px rgba(255,213,0,.04);
}
.dx-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(ellipse 60% 80% at 28% 45%, rgba(0,0,0,.35), transparent 70%),
        linear-gradient(180deg, rgba(8,15,32,.18) 0%, rgba(8,15,32,.28) 100%);
}
.dx-hero__inner{
    position:relative; z-index:2;
    max-width:1600px;
    margin:0 auto;
    padding:clamp(40px, 6vh, 72px) clamp(20px, 4vw, 48px);
    width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
    align-items:center;
    gap:clamp(24px, 4vw, 64px);
}
.dx-hero__copy{min-width:0;}

/* Art column — sits on the yellow flag half. Holds the absolute-positioned pricecard. */
.dx-hero__art{
    position:relative;
    min-width:0;
    justify-self:end;
    width:100%;
    max-width:440px;
    min-height:380px;          /* Reserves vertical space for collapsed card so hero doesn't reflow when expanded */
    align-self:stretch;
}
.dx-art{
    width:100%;
    max-width:320px;                                         /* Magnet shrunk; price card is now the focal point */
    margin:0 auto;
    height:auto;
    display:block;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));
}

/* Slowly drifting outer rings */
.dx-art__ring{
    transform-origin:210px 200px;
    animation:dx-ring-spin 60s linear infinite;
}
@keyframes dx-ring-spin{
    from{transform:rotate(0deg);}
    to  {transform:rotate(360deg);}
}

/* Magnet sways gently like swinging on a chain */
.dx-art__magnet{
    transform-origin:235px 60px;
    animation:dx-magnet-sway 5s ease-in-out infinite;
}
@keyframes dx-magnet-sway{
    0%,100%{transform:rotate(-3deg);}
    50%    {transform:rotate(3deg);}
}

/* Magnetic field — dashes flow downward */
.dx-art__field path{
    stroke-dashoffset:0;
    animation:dx-field-flow 1.6s linear infinite;
}
@keyframes dx-field-flow{
    to{stroke-dashoffset:-14;}
}

/* Scrap pieces bob with different delays + tiny rotation */
.dx-art__scrap{
    transform-origin:center;
    animation:dx-scrap-bob 4s ease-in-out infinite;
}
.dx-art__scrap--1{animation-delay:0s;   transform-origin:137px 284px;}
.dx-art__scrap--2{animation-delay:.6s;  transform-origin:236px 288px;}
.dx-art__scrap--3{animation-delay:1.2s; transform-origin:302px 287px;}
.dx-art__scrap--4{animation-delay:.3s;  transform-origin:170px 306px;}
.dx-art__scrap--5{animation-delay:.9s;  transform-origin:261px 323px;}
@keyframes dx-scrap-bob{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%    {transform:translateY(-4px) rotate(2deg);}
}

/* Sparkle particles rising toward magnet */
.dx-art__spark{
    opacity:0;
    transform-origin:center;
    animation:dx-spark-rise 2.4s ease-in-out infinite;
}
.dx-art__spark--a{animation-delay:.0s;}
.dx-art__spark--b{animation-delay:.6s;}
.dx-art__spark--c{animation-delay:1.2s;}
.dx-art__spark--d{animation-delay:1.8s;}
@keyframes dx-spark-rise{
    0%  {opacity:0; transform:translateY(40px) scale(.6);}
    20% {opacity:1;}
    80% {opacity:1;}
    100%{opacity:0; transform:translateY(-50px) scale(1.2);}
}

@media (prefers-reduced-motion: reduce){
    .dx-art__ring, .dx-art__magnet, .dx-art__field path,
    .dx-art__scrap, .dx-art__spark{animation:none;}
    .dx-art__spark{opacity:.7;}
}

/* Stack on tablet & below — illustration goes below the copy, slightly smaller */
@media (max-width:900px){
    .dx-hero__inner{
        grid-template-columns:1fr;
        gap:clamp(20px, 4vh, 40px);
    }
    .dx-hero__art{max-width:340px; justify-self:start;}
}
@media (max-width:480px){
    .dx-hero__art{max-width:280px; align-self:center; justify-self:center;}
    .dx-hero__inner{padding:60px 26px 64px;}
    .dx-hero__title{margin-bottom:16px;}
    .dx-hero__lead{margin-bottom:24px;}
    .dx-hero__cta{gap:14px;}
    .dx-faq__q{padding:16px 20px;}
    .dx-faq__a{padding:0 20px 18px;}
    .dx-article__cta{padding:18px 22px; border-radius:18px;}
    .dx-cat__pricetable{padding:12px;}
}
.dx-hero__title{
    position:relative;
    margin:0 0 clamp(8px, .9vh, 14px);
    font-size:clamp(33px, 5.1vw, 60px);
    line-height:1.1;
    font-weight:600;
    letter-spacing:-.02em;
    color:#fff;
    max-width:820px;
    text-wrap:balance;
    /* Same shimmer as primary CTA button — bright white stripe sweeps left → right across the text.
       Wider, brighter, faster cycle so it reads as "alive" like the button. */
    background-image:linear-gradient(110deg,
        #ffffff 0%,
        #ffffff 35%,
        #fff8c8 47%,
        #ffffff 53%,
        #ffffff 100%);
    background-size:280% 100%;
    background-repeat:no-repeat;
    background-position:0% 0;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    /* Merge with .dx-anim's fade-up so entrance animation still plays. */
    animation:
        dx-fade-up .7s cubic-bezier(.22,.61,.36,1) var(--d, 0ms) forwards,
        dx-title-shimmer 3.2s ease-in-out 1s infinite;
    filter:drop-shadow(0 2px 16px rgba(0,0,0,.35));
}
.dx-hero__title::after{                                       /* Bright glow stripe layered on top, like the button shimmer */
    content:attr(data-text);
    position:absolute; inset:0;
    background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    background-size:280% 100%;
    background-position:-30% 0;
    animation:dx-title-shimmer-glow 3.2s ease-in-out 1s infinite;
    pointer-events:none;
    filter:blur(.3px) drop-shadow(0 0 6px rgba(255,255,255,.45));
}
@keyframes dx-title-shimmer{
    0%,  18% {background-position:0% 0;}
    52%      {background-position:100% 0;}
    82%, 100%{background-position:100% 0;}
}
@keyframes dx-title-shimmer-glow{
    0%,  18% {background-position:-30% 0;}
    52%      {background-position:130% 0;}
    82%, 100%{background-position:130% 0;}
}
@media (prefers-reduced-motion: reduce){
    .dx-hero__title{animation:none;}
}
.dx-hero__lead{
    margin:clamp(28px, 3.4vh, 44px) 0 clamp(34px, 3.8vh, 48px);
    font-size:clamp(17px, 1.85vw, 21px);
    line-height:1.5;
    font-weight:400;
    color:rgba(255,255,255,.92);
    max-width:680px;
    text-shadow:0 1px 8px rgba(0,0,0,.35);
    text-wrap:pretty;
}
/* Optional: emphasize "сдать металлолом дорого" via tag */
.dx-hero__lead strong{font-weight:700; color:#fff;}
.dx-hero__cta{display:flex; flex-wrap:wrap; gap:12px;}

/* Stagger-in animation: each element fades + slides up with per-element delay (--d). */
.dx-anim{
    opacity:0;
    transform:translateY(14px);
    animation:dx-fade-up .7s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:var(--d, 0ms);
}
@keyframes dx-fade-up{
    to{opacity:1; transform:translateY(0);}
}
/* LCP-fix: hero-заголовок (крупнейший текст экрана) виден сразу, без fade-in задержки —
   опускаем opacity:0/translateY и оставляем только декоративный shimmer. Снижает LCP. */
.dx-hero__title.dx-anim{
    opacity:1;
    transform:none;
    animation:dx-title-shimmer 3.2s ease-in-out 1s infinite;
}
@media (prefers-reduced-motion: reduce){
    .dx-anim{animation:none; opacity:1; transform:none;}
    .dx-hero__blob{animation:none;}
}

/* Mail pill — solid white card, brand-blue title, dark-grey description, yellow icon plate */
.dx-hero__mail{
    margin:0 0 24px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 22px 14px 16px;
    background:
        radial-gradient(circle at 88% 22%, #FFD500 0, #FFD500 4px, transparent 5px),
        radial-gradient(circle at 94% 72%, #FFD500 0, #FFD500 3px, transparent 4px),
        radial-gradient(circle at 78% 50%, #FFD500 0, #FFD500 2.5px, transparent 3.5px),
        radial-gradient(circle at 84% 92%, #FFD500 0, #FFD500 2px, transparent 3px),
        radial-gradient(circle at 70% 14%, #FFD500 0, #FFD500 2px, transparent 3px),
        linear-gradient(135deg, #003a82 0%, #0057B7 100%);
    color:#fff;
    border-radius:14px;
    line-height:1.3;
    position:relative;
    box-shadow:0 14px 30px -14px rgba(2,8,30,.5), inset 0 0 0 1px rgba(255,213,0,.18);
    animation:dx-fade-up .7s cubic-bezier(.22,.61,.36,1) var(--d, 0ms) forwards;
    max-width:600px;
    width:100%;
    overflow:hidden;
}
.dx-hero__mail::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:transparent;
}
@media (prefers-reduced-motion:reduce){
    .dx-hero__mail::after{ animation:none; opacity:.5; }
}
.dx-hero__mail-icon{
    flex:0 0 auto;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #FFD500, #ffdf2e);
    color:#003a82;
    border-radius:10px;
    padding:8px;
    box-shadow:0 4px 12px -4px rgba(255,213,0,.7), 0 0 0 2px rgba(255,213,0,.22);
    position:relative; z-index:1;
}
.dx-hero__mail-icon svg{width:100%; height:100%;}
.dx-hero__mail-text{flex:1 1 auto; min-width:0; position:relative; z-index:1;}
.dx-hero__mail-title{
    margin:0;
    font-size:17px;
    font-weight:600;
    color:#ffffff;
    line-height:1.2;
    letter-spacing:-.005em;
    text-wrap:balance;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.dx-hero__mail-desc{
    margin:4px 0 0;
    font-size:14px;
    font-weight:500;
    color:rgba(255,255,255,.82);
    line-height:1.4;
    text-wrap:pretty;
}
.dx-hero__mail{
    text-decoration:none;
    cursor:pointer;
}
.dx-hero__mail--v4{
    background:#fff !important;
    color:#0f172a;
    padding:0 !important;
    flex-direction:column;
    align-items:stretch;
    gap:0 !important;
    border:1px solid #e2e8f0;
    box-shadow:0 14px 30px -14px rgba(2,8,30,.25), 0 2px 6px -2px rgba(15,23,42,.08);
}
.dx-hero__mail--v4 .dx-hero__mail-top{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:#dc2626;
    color:#fff;
    font-size:11.5px;
    font-weight:800;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.dx-hero__mail--v4 .dx-hero__mail-top::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 0 rgba(255,255,255,.6);
    animation:dx-mail-top-blink 1.4s ease-in-out infinite;
    position:relative;
    z-index:2;
}
.dx-hero__mail--v4 .dx-hero__mail-top > *{ position:relative; z-index:2; }
.dx-hero__mail--v4 .dx-hero__mail-top::after{
    content:"";
    position:absolute;
    top:-30%;
    bottom:-30%;
    left:-30%;
    width:55%;
    background:linear-gradient(110deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 28%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.22) 72%,
        rgba(255,255,255,0) 100%);
    filter:blur(10px);
    transform:translateX(0);
    animation:dx-mail-top-shimmer 3.6s cubic-bezier(.55,.05,.45,.95) infinite;
    pointer-events:none;
    z-index:1;
}
@keyframes dx-mail-top-shimmer{
    0%   { transform:translateX(0); opacity:0; }
    8%   { opacity:1; }
    55%  { transform:translateX(360%); opacity:1; }
    65%  { opacity:0; }
    100% { transform:translateX(360%); opacity:0; }
}
@keyframes dx-mail-top-blink{
    0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6);opacity:1}
    50%{box-shadow:0 0 0 6px rgba(255,255,255,0);opacity:.5}
}
.dx-hero__mail--v4 .dx-hero__mail-body{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px 14px 16px;
}
.dx-hero__mail--v4 .dx-hero__mail-icon{
    background:linear-gradient(135deg,#dc2626,#b91c1c) !important;
    color:#fff !important;
    box-shadow:0 4px 12px -4px rgba(220,38,38,.5), 0 0 0 2px rgba(220,38,38,.18) !important;
}
.dx-hero__mail--v4 .dx-hero__mail-title{
    color:#0f172a !important;
    text-shadow:none !important;
    font-weight:700;
    font-size:15.5px;
}
.dx-hero__mail--v4 .dx-hero__mail-desc{
    color:#64748b !important;
    font-size:13px;
}
.dx-hero__mail--v4 .dx-hero__mail-go{
    background:#0f172a !important;
    color:#FFD500 !important;
    box-shadow:0 4px 10px -2px rgba(0,0,0,.35) !important;
}
@media (prefers-reduced-motion:reduce){
    .dx-hero__mail--v4 .dx-hero__mail-top::before{animation:none}
}

/* === v8 — Сплит 50/50 с резкими краями (синий | белый | жёлтый CTA) === */
.dx-hero__mail--v8{
    background:#fff !important;
    color:#0f172a;
    padding:0 !important;
    gap:0 !important;
    border-radius:8px !important;
    overflow:hidden;
    box-shadow:0 14px 30px -12px rgba(15,23,42,.32);
    flex-direction:row;
    align-items:stretch;
    border:0;
}
.dx-hero__mail--v8 .dx-hero__mail-top{ display:none !important; }
.dx-hero__mail--v8 .dx-hero__mail-body{
    display:flex !important;
    align-items:stretch;
    gap:0 !important;
    padding:0 !important;
    flex:1 1 auto;
    min-width:0;
}
.dx-hero__mail--v8 .dx-hero__mail-icon{
    flex:0 0 56px;
    width:56px !important;
    height:auto !important;
    background:#0057B7 !important;
    color:#fff !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
}
.dx-hero__mail--v8 .dx-hero__mail-icon svg{ width:100%; height:auto; max-height:28px; }
.dx-hero__mail--v8 .dx-hero__mail-text{
    flex:1 1 auto;
    min-width:0;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
}
.dx-hero__mail--v8 .dx-hero__mail-title{
    color:#0f172a !important;
    text-shadow:none !important;
    font-weight:700;
    font-size:15.5px;
    line-height:1.2;
    margin:0;
}
.dx-hero__mail--v8 .dx-hero__mail-desc{
    color:#64748b !important;
    font-size:13px;
    line-height:1.3;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dx-hero__mail--v8 .dx-hero__mail-np{
    flex:0 0 56px;
    width:56px !important;
    height:auto !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:-1px 0 0 #e2e8f0 inset !important;
    margin:0 !important;
    animation:none !important;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.dx-hero__mail--v8 .dx-hero__mail-np svg{ width:100%; height:auto; max-height:32px; }
.dx-hero__mail--v8 .dx-hero__mail-go{
    flex:0 0 56px;
    width:56px !important;
    height:auto !important;
    background:#FFD500 !important;
    color:#0f172a !important;
    border-radius:0 !important;
    box-shadow:-1px 0 0 rgba(0,0,0,.06) inset !important;
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
}
.dx-hero__mail--v8 .dx-hero__mail-go svg{
    width:50%;
    height:auto;
    animation:dx-mail-go 1.4s ease-in-out infinite;
}
@media (max-width:768px){
    .dx-hero__mail--v8 .dx-hero__mail-icon{ flex-basis:46px; width:46px !important; }
    .dx-hero__mail--v8 .dx-hero__mail-np{ flex-basis:46px; width:46px !important; }
    .dx-hero__mail--v8 .dx-hero__mail-go{ flex-basis:46px; width:46px !important; }
    .dx-hero__mail--v8 .dx-hero__mail-title{ font-size:14px; }
    .dx-hero__mail--v8 .dx-hero__mail-desc{ font-size:12px; }
}

.dx-hero__mail-np{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:8px;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    box-shadow:0 6px 14px -4px rgba(229,21,27,.45), 0 0 0 1px rgba(255,255,255,.12);
    animation:dx-np-bob 2.4s ease-in-out infinite;
}
.dx-hero__mail-np svg{display:block; width:100%; height:100%;}
.dx-hero__mail-go{
    flex:0 0 auto;
    width:32px;
    height:32px;
    background:#ffffff;
    color:#0066d6;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 4px 10px -2px rgba(0,0,0,.35),
        0 0 0 1px rgba(0,87,183,.15);
    margin-left:-2px;
}
.dx-hero__mail-go svg{
    width:62%;
    height:62%;
    display:block;
    stroke-width:3;
    animation:dx-mail-go 1.4s ease-in-out infinite;
}
.dx-hero__mail:hover .dx-hero__mail-go{transform:scale(1.08);}
@keyframes dx-np-bob{
    0%,100% { transform:translateY(0) rotate(-3deg) scale(1); }
    50%     { transform:translateY(-4px) rotate(3deg) scale(1.06); }
}
@keyframes dx-mail-go{
    0%, 100% { transform:translateX(0); }
    25%      { transform:translateX(7px); }
    50%      { transform:translateX(0); }
    75%      { transform:translateX(-5px); }
}
@media (prefers-reduced-motion:reduce){
    .dx-hero__mail-np{animation:none;}
    .dx-hero__mail-go{animation:none;}
}
@media (max-width:768px){
    .dx-hero__mail:not(.dx-hero__mail--v4):not(.dx-hero__mail--v8){display:none !important;}
    .dx-hero__mail--v4{margin:0 0 18px;}
    .dx-hero__mail--v8{margin:0 0 18px;}
    .dx-hero__mail--v4 .dx-hero__mail-body{padding:12px 14px;gap:10px;}
    .dx-hero__mail--v4 .dx-hero__mail-icon{width:34px;height:34px;padding:6px;}
    .dx-hero__mail--v4 .dx-hero__mail-title{font-size:14px;}
    .dx-hero__mail--v4 .dx-hero__mail-desc{font-size:12px;line-height:1.35}
    .dx-hero__mail--v4 .dx-hero__mail-np{width:32px;height:32px}
    .dx-hero__mail--v4 .dx-hero__mail-go{width:28px;height:28px}
}

/* Buttons — ×1.5 */
.dx-btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    height:52px; padding:0 24px;
    font-family:inherit;
    font-size:19px; font-weight:600;
    letter-spacing:.005em;
    border-radius:8px;
    text-decoration:none;
    transition:transform .12s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
    cursor:pointer;
    border:2px solid transparent;
    white-space:nowrap;
    overflow:hidden;
    isolation:isolate;
}
.dx-btn__label{position:relative; z-index:1;}
.dx-btn--primary{
    background:#ffd500; color:#0a1428;
    box-shadow:0 6px 18px -8px rgba(255,213,0,.7);
    animation:dx-btn-pulse 2.6s ease-in-out infinite;
}
@keyframes dx-btn-pulse{
    0%,100%{box-shadow:0 6px 18px -8px rgba(255,213,0,.7), 0 0 0 0 rgba(255,213,0,.45);}
    60%   {box-shadow:0 6px 22px -6px rgba(255,213,0,.9), 0 0 0 14px rgba(255,213,0,0);}
}
.dx-btn--primary:hover,
.dx-btn--primary:focus-visible{
    background:#ffdf2e; color:#0a1428;
    transform:translateY(-1px);
    box-shadow:0 10px 22px -8px rgba(255,213,0,.85);
    outline:none;
}
/* Shimmer blick passing across the primary button */
.dx-btn__shimmer{
    position:absolute; inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform:translateX(-110%);
    animation:dx-shimmer 3.2s ease-in-out infinite;
    animation-delay:1.5s;
    pointer-events:none;
    z-index:0;
}
@keyframes dx-shimmer{
    0%  {transform:translateX(-110%);}
    55% {transform:translateX(110%);}
    100%{transform:translateX(110%);}
}

.dx-btn--ghost{
    background:rgba(255,255,255,.06); color:#fff;
    border-color:rgba(255,255,255,.45);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:transform .12s ease, background-color .18s ease, border-color .18s ease;
}
.dx-btn--ghost:hover,
.dx-btn--ghost:focus-visible{
    background:rgba(255,255,255,.12); color:#fff;
    border-color:#fff;
    transform:translateY(-1px);
    outline:none;
}

@media (prefers-reduced-motion: reduce){
    .dx-btn--primary{animation:none;}
    .dx-btn__shimmer{animation:none; display:none;}
}

/* Tablet & below — buttons stay compact but a touch taller for tap targets */
@media (max-width:768px){
    .dx-hero{min-height:clamp(440px, 64vh, 580px);}
    .dx-btn{height:48px; padding:0 18px; font-size:17px;}
    .dx-hero__cta{gap:10px;}
    .dx-topbar__link{height:42px; padding:0 14px; font-size:16px;}
    .dx-hero__mail{padding:12px 16px; gap:10px;}
    .dx-hero__mail-icon{width:28px; height:28px; padding:5px;}
    .dx-hero__mail-title{font-size:15px;}
    .dx-hero__mail-desc{font-size:13px;}
}

/* Small phones — buttons full-width for thumb reachability */
@media (max-width:420px){
    .dx-hero__title{font-size:clamp(28px, 8vw, 38px);}
    .dx-hero__lead{font-size:17px;}
    .dx-hero__cta{flex-direction:column; align-items:stretch;}
    .dx-btn{width:100%;}
    .dx-hero__mail{padding:10px 13px; gap:8px;}
    .dx-hero__mail-icon{width:24px; height:24px; padding:4px;}
    .dx-hero__mail-title{font-size:13.5px;}
    .dx-hero__mail-desc{font-size:12px;}
}

/* Short-landscape phones — keep hero compact, don't dominate viewport */
@media (max-height:520px) and (orientation:landscape){
    .dx-hero{min-height:auto;}
    .dx-hero__inner{padding:28px 16px;}
    .dx-hero__title{font-size:clamp(22px, 4vw, 30px);}
    .dx-hero__lead{font-size:14px; margin-bottom:14px;}
    .dx-hero__mail{margin-top:12px;}
}

/* Very wide screens — cap blob movement so it doesn't push content off-canvas */
@media (min-width:1600px){
    .dx-hero__blob--a, .dx-hero__blob--b{width:50vmax; height:50vmax;}
}

/* ============================================================
   Price card — semi-transparent dark glass over the hero gradient
   ============================================================ */
.dx-pricecard{
    position:absolute;
    top:0; right:0;
    width:100%;
    background:#ffffff;
    color:#0a1428;
    border-radius:16px;
    padding:14px 18px 12px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.35),
               0 1px 0 rgba(255,255,255,.7) inset;
    border:1px solid rgba(15,23,42,.06);
    font-size:13.5px;
    z-index:50;
}
.dx-pricecard.is-expanded{
    z-index:60;
}
.dx-pricecard__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:8px;
}
.dx-pricecard__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:700;
    color:#0057B7;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dx-pricecard__dot{
    width:8px; height:8px; border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);
    animation:dx-pc-dot 1.8s ease-out infinite;
}
@keyframes dx-pc-dot{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
    70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
.dx-pricecard__title{
    margin:2px 0 0;
    font-size:17px;
    font-weight:700;
    color:#0a1428;
    letter-spacing:-.01em;
}
.dx-pricecard__all{
    display:inline-flex; align-items:center; gap:4px;
    color:#0057B7;
    font-size:12px; font-weight:700;
    text-decoration:none;
    padding:5px 9px; border-radius:8px;
    background:#eef3fb;
    border:1px solid #d8e3f2;
    transition:background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.dx-pricecard__all:hover{background:#dceaf7; border-color:#0057B7; transform:translateX(2px);}
.dx-pricecard__all--compact{
    padding:7px 11px;
    border-radius:999px;
    gap:6px;
}
.dx-pricecard__all--compact .dx-pricecard__all-icon{
    font-size:20px;
    font-weight:900;
    line-height:1;
    color:#0057B7;
    display:inline-block;
    transform-origin:50% 80%;
    animation: dx-uah-blink 1.8s ease-in-out infinite;
    text-shadow:0 0 0 rgba(0,87,183,0);
}
.dx-pricecard__all--compact svg{
    animation: dx-arrow-blink 1.8s ease-in-out infinite;
    transform-origin:left center;
}
@keyframes dx-uah-blink{
    0%,100% { transform:rotate(0deg)   scale(1);    color:#0057B7; }
    25%     { transform:rotate(-12deg) scale(1.18); color:#003d80; text-shadow:0 0 10px rgba(0,87,183,.45); }
    50%     { transform:rotate(0deg)   scale(1);    color:#0057B7; }
    75%     { transform:rotate( 12deg) scale(1.18); color:#003d80; text-shadow:0 0 10px rgba(0,87,183,.45); }
}
@keyframes dx-arrow-blink{
    0%,100% { transform:translateX(0)   scale(1);   opacity:.85; }
    50%     { transform:translateX(3px) scale(1.1); opacity:1;   }
}
@media (prefers-reduced-motion: reduce){
    .dx-pricecard__all--compact .dx-pricecard__all-icon,
    .dx-pricecard__all--compact svg{ animation:none; }
}
.dx-pricecard__list{
    list-style:none;
    margin:0;
    padding:0;
}
.dx-pricecard__row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:9px 4px 9px 12px;
    margin-top:3px;
    border-top:1px dashed rgba(15,23,42,.10);
    position:relative;
}
.dx-pricecard__row + .dx-pricecard__row{margin-top:3px;}
.dx-pricecard__row[hidden]{display:none;}
.dx-pricecard__row:first-child{border-top:none;}
.dx-pricecard__row::before{                                  /* shared left marker slot — invisible for regular rows */
    content:"";
    position:absolute;
    left:0; top:8px; bottom:8px;
    width:3px;
    background:transparent;
    border-radius:2px;
}
.dx-pricecard__row.is-hot{
    background:linear-gradient(90deg, rgba(255,213,0,.28), rgba(255,213,0,0) 75%);
    border-radius:8px;
    border-top:none;
}
.dx-pricecard__row.is-hot::before{background:#FFD500;}      /* yellow bar appears in the same slot, no row shift */
.dx-pricecard__row.is-hot + .dx-pricecard__row{border-top:none;}
.dx-pricecard__name{
    display:inline-flex; align-items:center; gap:8px;
    font-size:15.5px;
    font-weight:500;
    color:#0f172a;
    min-width:0;
    letter-spacing:-.005em;
}
.dx-pricecard__row.is-hot .dx-pricecard__name{font-weight:600; color:#0a1525;}
.dx-mailbar{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:999;
    background:transparent;
    color:#001a3d;
    border-radius:14px;
    padding-top:0;
    border:0;
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
    transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
    max-width:520px;
    margin:0 auto;
    overflow:visible;
}
.dx-mailbar > .dx-mailbar__top,
.dx-mailbar > .dx-mailbar__row{
    background:#ffffff;
    border-left:1px solid #e2e8f0;
    border-right:1px solid #e2e8f0;
}
.dx-mailbar > .dx-mailbar__top{
    border-top:1px solid #e2e8f0;
    border-top-left-radius:14px;
    border-top-right-radius:14px;
    position:relative;
    overflow:hidden;
}
.dx-mailbar > .dx-mailbar__row{
    border-bottom:1px solid #e2e8f0;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
}
.dx-mailbar::before{display:none;}
.dx-mailbar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.dx-mailbar__dismiss{
    position:absolute;
    top:12px;
    right:14px;
    background:rgba(15,23,42,.85);
    color:#fff;
    border:0;
    border-radius:999px;
    padding:5px 6px 5px 12px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.01em;
    transition:background .18s, transform .18s;
    z-index:3;
}
.dx-mailbar__dismiss:hover{background:#0f172a;transform:translateY(-1px)}
.dx-mailbar__dismiss-x{
    display:inline-grid;
    place-items:center;
    width:18px;height:18px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
}
.dx-mailbar__dismiss-x svg{width:11px;height:11px}
.dx-mailbar__top{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#001a3d;
    padding:12px 14px 6px 18px;
}
.dx-mailbar__icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    background:transparent;
    border-radius:9px;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px -6px rgba(229,21,27,.45);
}
.dx-mailbar__icon svg{
    width:100%;
    height:100%;
    display:block;
    border-radius:9px;
}
.dx-mailbar__head strong{
    display:block;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    color:#001a3d;
}
.dx-mailbar__head small{
    display:block;
    font-size:11.5px;
    color:#64748b;
    margin-top:2px;
}
.dx-mailbar__row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px 12px 18px;
}
.dx-mailbar__phone{
    flex:1;
    background:linear-gradient(180deg, #0057B7 0%, #003a82 100%);
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
    font-weight:800;
    font-size:13.5px;
    text-align:center;
    box-shadow:0 4px 14px -6px rgba(0,87,183,.55);
    text-decoration:none;
    transition:filter .15s, transform .15s;
}
.dx-mailbar__phone:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dx-mailbar__msgrs{
    display:flex;
    gap:5px;
}
.dx-mailbar__msgrs .dx-cat__msgr{width:36px;height:36px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.06);}
.dx-mailbar__msgrs .dx-cat__msgr svg{width:18px;height:18px}
.dx-mailbar__msgrs .dx-cat__msgr--whatsapp{color:#25D366;}
.dx-mailbar__msgrs .dx-cat__msgr--telegram{color:#229ED9;}
.dx-mailbar__msgrs .dx-cat__msgr--viber{color:#7360F2;}
.dx-mailbar__msgrs .dx-cat__msgr:hover{filter:none;background:#f8fafc;}
@media (min-width:768px){
    .dx-mailbar{left:auto;right:24px;bottom:24px;width:580px;max-width:580px}
}
@media (max-width:767px){
    .dx-mailbar{padding-top:32px;}
    .dx-mailbar__dismiss{top:0;right:8px;}
}
@media (prefers-reduced-motion:reduce){
    .dx-mailbar{transition:opacity .2s ease}
}
.dx-stati-hero{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:24px;
    align-items:center;
}
.dx-stati-hero__art{
    width:100%;
    aspect-ratio:1/.78;
    background-image:var(--hero-icon, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><rect x='30' y='20' width='140' height='120' rx='10' fill='%23FFD500'/><rect x='40' y='30' width='120' height='100' rx='6' fill='%230057B7'/><rect x='52' y='44' width='96' height='4' rx='2' fill='%23FFD500'/><rect x='52' y='56' width='80' height='4' rx='2' fill='%23FFD500' opacity='.65'/><rect x='52' y='68' width='90' height='4' rx='2' fill='%23FFD500' opacity='.65'/><rect x='52' y='84' width='40' height='4' rx='2' fill='%23FFD500' opacity='.35'/><rect x='100' y='84' width='48' height='4' rx='2' fill='%23FFD500' opacity='.35'/></svg>"));
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    filter:drop-shadow(0 10px 24px rgba(0,87,183,.18));
}
.dx-stati-hero__meta{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:18px;
    padding:10px 14px;
    background:linear-gradient(95deg, rgba(0,87,183,.07), rgba(255,213,0,.1));
    border-radius:12px;
    border:1px solid rgba(0,87,183,.12);
}
.dx-stati-hero__op{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#0f172a;
}
.dx-stati-hero__op .dx-footer__contact-dot{flex:0 0 9px;width:9px;height:9px}
.dx-stati-hero__tel{
    margin-left:auto;
    color:#0057B7;
    font-weight:800;
    font-size:14px;
    text-decoration:none;
    padding:6px 12px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 10px -4px rgba(0,87,183,.35);
}
.dx-stati-hero__tel:hover{background:#FFD500;color:#0f172a}
@media(max-width:768px){
    .dx-stati-hero{grid-template-columns:1fr;gap:14px}
    .dx-stati-hero__art{max-width:220px;margin:0 auto;order:-1}
}
.dx-stati-cta{
    margin:32px 0;
    padding:0;
    border-radius:18px;
    background:linear-gradient(135deg,#0b1d3a 0%,#0f172a 100%);
    color:#fff;
    overflow:hidden;
    position:relative;
}
.dx-stati-cta::before{
    content:"";
    position:absolute;
    top:-40%;right:-10%;
    width:60%;height:180%;
    background:radial-gradient(circle, rgba(255,213,0,.18) 0%, transparent 60%);
    pointer-events:none;
}
.dx-stati-cta__inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
    padding:28px 32px;
    align-items:center;
}
.dx-stati-cta__title{
    margin:0 0 8px;
    font-size:22px;
    font-weight:800;
    color:#fff;
}
.dx-stati-cta__lead{
    margin:0;
    font-size:14px;
    color:#cbd5e1;
    line-height:1.5;
}
.dx-stati-cta__card{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.dx-stati-cta__person{display:flex;align-items:center;gap:12px}
.dx-stati-cta__avatar{
    flex:0 0 48px;
    width:48px; height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,#FFD500,#bf9d00);
    color:#0f172a;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:20px;
}
.dx-stati-cta__avatar::before{content:attr(data-name)}
.dx-stati-cta__name{display:block;font-weight:800;font-size:15px;color:#fff}
.dx-stati-cta__role,.dx-stati-cta__hours{display:block;font-size:11.5px;color:#94a3b8}
.dx-stati-cta__phone{width:100%;text-align:center;font-size:14.5px}
.dx-stati-cta__msgrs{display:flex;align-items:center;gap:8px}
.dx-stati-cta__msgrs small{font-size:11px;color:#94a3b8;margin-right:4px}
.dx-stati-cta__msgrs .dx-cat__msgr{width:38px;height:38px}
.dx-stati-cta__msgrs .dx-cat__msgr svg{width:18px;height:18px}
@media(max-width:768px){
    .dx-stati-cta__inner{grid-template-columns:1fr;padding:22px 18px;gap:16px}
    .dx-stati-cta__title{font-size:20px}
}
.dx-pricecard__badge{
    display:inline-flex; align-items:center;
    background:#FFD500;
    color:#7a5500;
    font-size:10px; font-weight:800;
    padding:2px 6px;
    border-radius:99px;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 1px 0 rgba(0,0,0,.05), 0 0 12px rgba(255,213,0,.45);
    white-space:nowrap;
    animation:dx-top-wiggle 1.8s ease-in-out infinite;
    transform-origin:center center;
}
@keyframes dx-top-wiggle{
    0%, 100%{transform:rotate(0) scale(1)}
    15%{transform:rotate(-8deg) scale(1.06)}
    30%{transform:rotate(8deg) scale(1.06)}
    45%{transform:rotate(-5deg) scale(1.03)}
    60%{transform:rotate(5deg) scale(1.03)}
    75%{transform:rotate(0) scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
    .dx-pricecard__badge{animation:none}
}
.dx-pricecard__price{
    font-weight:900;
    color:#0057B7;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    margin-left:auto;
    text-align:center;
}
.dx-pricecard__price small{
    display:block;
    font-size:10px; font-weight:600; color:#6b7280;
    margin-top:1px;
    text-align:center;
}
.dx-pricecard__foot{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(15,23,42,.08);
}
.dx-pricecard__more{
    appearance:none;
    width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(180deg, #FFD500, #f0b900);
    color:#0a1428;
    border:0;
    padding:9px 14px;
    border-radius:9px;
    font:inherit;
    font-weight:800;
    font-size:12.5px;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .25s ease;
    box-shadow:0 8px 20px -8px rgba(255,213,0,.55), 0 1px 0 rgba(255,255,255,.4) inset;
}
.dx-pricecard__more:hover{
    background:linear-gradient(180deg, #ffde33, #ffc107);
    transform:translateY(-1px);
    box-shadow:0 12px 24px -8px rgba(255,213,0,.7), 0 1px 0 rgba(255,255,255,.5) inset;
}
.dx-pricecard__more svg{transition:transform .25s ease;}
.dx-pricecard__more.is-expanded svg{transform:rotate(-180deg);}
.dx-pricecard__more strong{font-weight:900;}
.dx-pricecard__note{
    margin:6px 0 0;
    font-size:10.5px;
    color:#6b7280;
    text-align:center;
    line-height:1.35;
}
.dx-pricecard__row--more{
    animation:dx-pc-reveal .35s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes dx-pc-reveal{
    from{opacity:0; transform:translateY(-6px);}
    to{opacity:1; transform:translateY(0);}
}
@media (max-width:768px){
    .dx-hero__art{max-width:100%;}
    .dx-art{max-width:240px;}
    .dx-pricecard{font-size:13px;}
    .dx-pricecard__title{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
    .dx-logo__mark, .dx-logo__mark > circle, .dx-logo__text::after,
    .dx-hero__title::after, .dx-pc-dot, .dx-pricecard__row--more{animation:none;}
}

/* ============================================================
   Districts band — light yellow tint above the main footer
   ============================================================ */
.dx-districts{
    background:linear-gradient(180deg,#fff 0%,#fafbfc 100%);
    padding:clamp(40px,5vh,64px) clamp(16px,4vw,48px);
    border-top:1px solid #eef0f4;
}
.dx-districts__inner{max-width:1280px; margin:0 auto;}
.dx-districts__live{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px 8px 12px;
    background:#0a1428;
    color:#fff;
    border-radius:100px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    margin:0 0 20px auto;
    align-self:flex-end;
    float:right;
    clear:both;
    box-shadow:0 4px 14px -6px rgba(10,20,40,.4);
}
.dx-districts__inner::after{content:''; display:block; clear:both;}
.dx-districts__live-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:#22c55e;
    position:relative;
    box-shadow:0 0 0 0 rgba(34,197,94,.7);
    animation:dxLivePulse 1.6s ease-out infinite;
    flex:0 0 8px;
}
@keyframes dxLivePulse{
    0%   {box-shadow:0 0 0 0 rgba(34,197,94,.75);}
    70%  {box-shadow:0 0 0 10px rgba(34,197,94,0);}
    100% {box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
.dx-districts__live-label{color:#fff; text-transform:uppercase; letter-spacing:.08em; font-size:11px;}
.dx-districts__live-time{
    color:#FFD500;
    font-variant-numeric:tabular-nums;
    padding-left:10px;
    margin-left:2px;
    border-left:1px solid rgba(255,255,255,.18);
    font-weight:700;
}
@media (prefers-reduced-motion:reduce){
    .dx-districts__live-dot{animation:none;}
}
.dx-districts__head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:24px;
    padding-bottom:18px;
    border-bottom:1px solid #f0f1f4;
    flex-wrap:wrap;
}
.dx-districts__head-text{display:flex; flex-direction:column; gap:4px;}
.dx-districts__title{
    margin:0;
    font-size:clamp(22px,2.4vw,28px);
    font-weight:700;
    color:#0a1428;
    letter-spacing:-.01em;
}
.dx-districts__sub{
    margin:0;
    font-size:13px;
    color:#6b7280;
}
.dx-districts__legend{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    color:#6b7280;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dx-districts__legend-item{display:inline-flex; align-items:center; gap:5px;}
.dx-districts__legend-dot{
    display:inline-block;
    width:11px; height:11px;
    border-radius:2px;
}
.dx-districts__listwrap{position:relative;}
.dx-districts__more{display:none;}        /* hidden on desktop — full grid visible */

/* Mobile + tablet: collapse list with blur teaser + "Show more" CTA */
@media (max-width:960px){
    .dx-districts__listwrap{
        max-height:520px;
        overflow:hidden;
        transition:max-height .6s cubic-bezier(.22,.61,.36,1);
    }
    .dx-districts__listwrap.is-expanded{
        max-height:6000px;
    }
    .dx-districts__listwrap::after{
        content:"";
        position:absolute;
        left:0; right:0; bottom:0;
        height:180px;
        pointer-events:none;
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        background:linear-gradient(to bottom, rgba(248,250,253,0) 0%, rgba(248,250,253,.85) 65%, rgba(248,250,253,1) 100%);
        opacity:1;
        transition:opacity .35s ease;
    }
    .dx-districts__listwrap.is-expanded::after{
        opacity:0;
    }
    .dx-districts__more{
        position:absolute;
        left:50%;
        bottom:14px;
        transform:translateX(-50%);
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:11px 22px;
        background:linear-gradient(135deg, #FFD500, #ffdf2e);
        color:#0a1428;
        border:0;
        border-radius:99px;
        font-size:13px;
        font-weight:700;
        letter-spacing:.02em;
        cursor:pointer;
        box-shadow:0 8px 20px -6px rgba(255,213,0,.65), 0 2px 6px rgba(0,0,0,.08);
        transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
        z-index:2;
    }
    .dx-districts__more:hover{
        transform:translateX(-50%) translateY(-2px);
        box-shadow:0 12px 24px -6px rgba(255,213,0,.8), 0 3px 8px rgba(0,0,0,.1);
    }
    .dx-districts__more svg{
        transition:transform .35s cubic-bezier(.22,.61,.36,1);
    }
    .dx-districts__listwrap.is-expanded .dx-districts__more{
        position:relative;
        left:auto;
        transform:none;
        bottom:auto;
        margin:18px auto 0;
        display:flex;
    }
    .dx-districts__listwrap.is-expanded .dx-districts__more:hover{
        transform:translateY(-2px);
    }
    .dx-districts__listwrap.is-expanded .dx-districts__more svg{
        transform:rotate(180deg);
    }
}

.dx-districts__grid{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:8px;
}
.dx-districts__row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
    padding:10px 14px;
    background:#fff;
    border-radius:8px;
    border:1px solid #f1f3f6;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    cursor:default;
}
.dx-districts__row:hover{
    border-color:#0057B7;
    box-shadow:0 4px 12px -4px rgba(0,87,183,.2);
    transform:translateY(-1px);
}
.dx-districts__name{
    font-size:13px;
    color:#0a1428;
    font-weight:500;
}
.dx-districts__bar{display:flex; gap:1.5px; align-items:flex-end; height:20px;}
.dx-districts__bar span{
    width:3.5px; height:18px;
    border-radius:1px;
    background:#eef0f4;
}
.dx-districts__bar span.is-lo{background:#fee29f;}
.dx-districts__bar span.is-md{background:#FFD500;}
.dx-districts__bar span.is-hi{background:#0057B7;}
/* Activity flash — next-empty bar lights up in row's tone, then fades back */
.dx-districts__bar span.act1{
    animation:dxBarAct var(--dur, 5s) ease-in-out infinite;
    animation-delay:var(--d, 0s);
}
.dx-districts__bar span.act2{
    animation:dxBarAct2 var(--dur, 5s) ease-in-out infinite;
    animation-delay:calc(var(--d, 0s) + 1.4s);
}
@keyframes dxBarAct{
    0%, 38%, 78%, 100% {background:#eef0f4;}
    50%, 70%           {background:var(--tone, #FFD500);}
}
@keyframes dxBarAct2{
    0%, 58%, 90%, 100% {background:#eef0f4;}
    70%, 82%           {background:var(--tone, #FFD500);}
}
@media (prefers-reduced-motion:reduce){
    .dx-districts__row{transition:none;}
    .dx-districts__row:hover{transform:none;}
    .dx-districts__bar span{animation:none !important;}
}

/* ============================================================
   Footer — dark navy with UA flag stripe, 4 columns
   ============================================================ */
/* ============================================================
   Footer — Gradient mesh background + Floating frosted cards
   ============================================================ */
.dx-footer{
    background:linear-gradient(135deg,#0057B7 0%,#0a1428 50%,#1a2746 100%);
    color:#cbd5e1;
    position:relative;
    overflow:hidden;
    padding:56px clamp(16px,4vw,48px) 0;
    font-size:14px;
}
.dx-footer::before{
    content:'';
    position:absolute;
    width:540px; height:540px;
    border-radius:50%;
    background:radial-gradient(#FFD500,transparent 60%);
    opacity:.22;
    filter:blur(80px);
    top:-160px; right:-110px;
    pointer-events:none;
    /* Sweep: drifts from top-right toward bottom-left and back over 18s for ambient light. */
    animation:dx-footer-sweep 18s ease-in-out infinite;
}
.dx-footer::after{
    content:'';
    position:absolute;
    width:440px; height:440px;
    border-radius:50%;
    background:radial-gradient(#0057B7,transparent 60%);
    opacity:.42;
    filter:blur(80px);
    bottom:-170px; left:-90px;
    pointer-events:none;
    /* Counter-sweep: drifts bottom-left toward top-right, offset by half-cycle for crossing light. */
    animation:dx-footer-sweep-rev 22s ease-in-out infinite;
}
@keyframes dx-footer-sweep{
    0%, 100% { transform:translate(0, 0)        scale(1);   opacity:.22; }
    50%      { transform:translate(-65vw, 65vh) scale(1.15); opacity:.35; }
}
@keyframes dx-footer-sweep-rev{
    0%, 100% { transform:translate(0, 0)        scale(1);   opacity:.42; }
    50%      { transform:translate(55vw, -55vh) scale(1.1); opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
    .dx-footer::before,
    .dx-footer::after{ animation:none; }
}
.dx-footer__inner{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr 2fr 1.2fr;
    gap:24px;
}
.dx-footer__col{
    padding:32px;
    border-radius:20px;
    background:rgba(15,15,29,.7);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
    transition:transform .25s ease, box-shadow .25s ease;
    min-width:0;
}
.dx-footer__col:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,213,0,.2);
}
.dx-footer__h{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    font-size:12px;
    font-weight:700;
    color:#FFD500;
    text-transform:uppercase;
    letter-spacing:.16em;
}

/* Brand column */
.dx-footer__logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    margin-bottom:14px;
}
.dx-footer__logo svg{width:32px; height:32px;}
.dx-footer__logo span{font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1;}
.dx-footer__logo-a{color:#fff;}
.dx-footer__logo-b{color:#FFD500;}
.dx-footer__about{
    margin:0 0 20px;
    font-size:13px;
    line-height:1.6;
    color:rgba(226,232,240,.75);
}
.dx-footer__social{
    display:inline-flex;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}
.dx-footer__msgr{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
    transition:transform .2s ease, box-shadow .2s ease;
}
.dx-footer__msgr svg{width:20px; height:20px;}
.dx-footer__msgr:nth-child(1) a, .dx-footer__social li:nth-child(1) a{background:#7360F2;}  /* Viber */
.dx-footer__social li:nth-child(2) a{background:#229ED9;}                                    /* Telegram */
.dx-footer__social li:nth-child(3) a{background:#25D366;}                                    /* WhatsApp */
.dx-footer__msgr:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px -4px currentColor;
}

/* Contacts column gets the Ukrainian crest in the corner */
.dx-footer__col--contacts{position:relative; overflow:hidden;}
.dx-footer__crest{
    position:absolute;
    top:6px;
    right:6px;
    width:60px;
    height:60px;
    display:block;
    pointer-events:none;
    z-index:1;
    filter:drop-shadow(0 4px 12px rgba(0,87,183,.28));
}
.dx-footer__crest img{width:100%; height:100%; display:block;}
.dx-footer__col--contacts .dx-footer__h,
.dx-footer__col--contacts .dx-footer__contacts{position:relative; z-index:2;}

/* Services — bracket-tag chips, split into two labeled groups */
.dx-footer__chips-group{margin-bottom:16px;}
.dx-footer__chips-group:last-child{margin-bottom:0;}
.dx-footer__chips-label{
    display:block;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:lowercase;
    color:rgba(226,232,240,.45);
    margin:0 0 8px 4px;
}
.dx-footer__chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
}
.dx-footer__chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 4px;
    color:rgba(226,232,240,.88);
    text-decoration:none;
    font-size:13.5px;
    line-height:1.3;
    transition:color .15s ease;
}
.dx-footer__chip::before{content:"["; color:#FFD500; font-weight:700;}
.dx-footer__chip::after {content:"]"; color:#FFD500; font-weight:700;}
.dx-footer__chip:hover{color:#FFD500;}

/* Contacts */
.dx-footer__contacts{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.dx-footer__contacts li{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:12px;
    align-items:start;
    font-size:13px;
    line-height:1.5;
    color:rgba(226,232,240,.88);
}
.dx-footer__contacts svg{
    width:18px; height:18px;
    color:#FFD500;
    margin-top:1px;
}
.dx-footer__contacts a{
    color:#fff;
    font-weight:500;
    text-decoration:none;
    transition:color .15s ease;
}
.dx-footer__contacts a:hover{color:#FFD500;}
.dx-footer__contacts small{color:rgba(226,232,240,.55); font-size:11px; display:block; margin-top:2px;}

/* Manager name + status dot next to phone in contacts column */
.dx-footer__contact-row{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.dx-footer__contact-name{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:rgba(226,232,240,.7);
    font-size:12px;
    font-weight:500;
}
.dx-footer__contact-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 6px rgba(16,185,129,.55), 0 0 0 2px rgba(16,185,129,.18);
    animation:dx-status-blink 1.4s ease-in-out infinite;
}

/* "график работы" tiny caption above the Пн-Сб 8:00-17:00 line in footer contacts list */
.dx-footer__schedule-label{
    display:block;
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(226,232,240,.5);
    margin-bottom:3px;
}
.dx-footer__contact-dot.is-closed{
    background:#ef4444;
    box-shadow:0 0 6px rgba(239,68,68,.55), 0 0 0 2px rgba(239,68,68,.18);
    animation:dx-status-blink-red .95s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
    .dx-footer__contact-dot{ animation:none; }
}

/* "Полезная информация" CTA — pill button below the contacts list */
.dx-footer__more-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding:9px 16px;
    color:#FFD500;
    background:transparent;
    border:1.5px solid rgba(255,213,0,.4);
    border-radius:99px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    line-height:1;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    position:relative;
    z-index:2;
}
.dx-footer__more-link svg{
    width:16px; height:16px;
    flex:0 0 auto;
}
.dx-footer__more-link__arr{
    width:14px; height:14px;
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.dx-footer__more-link:hover{
    background:#FFD500;
    color:#0a1428;
    border-color:#FFD500;
    transform:translateY(-1px);
    box-shadow:0 8px 18px -6px rgba(255,213,0,.45);
}
.dx-footer__more-link:hover .dx-footer__more-link__arr{
    transform:translateX(4px);
}

/* Blog tag chips — horizontal strip below the 3 cards */
.dx-footer__tags-wrap{
    position:relative;
    max-width:1280px;
    margin:32px auto 0;
    padding:24px 0;
    border-top:1px solid rgba(255,255,255,.08);
}
.dx-footer__tags-h{
    font-size:11px;
    font-weight:700;
    color:#FFD500;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin:0 0 12px;
}
.dx-footer__tags{
    margin:0; padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.dx-footer__tags a{
    display:inline-block;
    padding:6px 13px;
    border-radius:99px;
    background:rgba(255,255,255,.06);
    color:rgba(226,232,240,.78);
    font-size:12px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:all .2s ease;
}
.dx-footer__tags a:hover{
    background:#FFD500;
    color:#0a1428;
    border-color:#FFD500;
    transform:translateY(-1px);
}

/* Bottom copyright bar */
.dx-footer__bottom{
    position:relative;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);
    margin-top:8px;
}
.dx-footer__bottom-inner{
    max-width:1280px;
    margin:0 auto;
    padding:16px clamp(16px,4vw,48px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:12px;
    color:rgba(226,232,240,.55);
}
.dx-footer__by a{
    color:#FFD500;
    text-decoration:none;
    font-weight:700;
}
.dx-footer__by a:hover{text-decoration:underline;}

@media (max-width:960px){
    .dx-footer__inner{grid-template-columns:1fr;}
}
@media (max-width:560px){
    .dx-footer__inner{gap:18px;}
    .dx-footer__col{padding:24px;}
    .dx-footer__bottom-inner{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
    .dx-footer__col{transition:none;}
    .dx-footer__col:hover{transform:none;}
}

/* ============================================================
   Process / Services / Mail section — minimalist style (variant #20)
   ============================================================ */
.dx-proc{
    background:#ffffff;
    padding:clamp(40px, 6vh, 80px) clamp(16px, 4vw, 32px);
    color:#0a1428;
}
.dx-proc__inner{
    max-width:1200px;
    margin:0 auto;
}
.dx-proc__title{
    margin:0 0 clamp(20px, 3vh, 32px);
    font-size:clamp(22px, 2.6vw, 32px);
    font-weight:700;
    color:#0a1428;
    letter-spacing:-.01em;
}
.dx-proc__title--svc,
.dx-proc__title--mail{
    margin-top:clamp(40px, 6vh, 64px);
    padding-top:clamp(20px, 3vh, 28px);
    border-top:1px solid #eef1f6;
}
.dx-proc__title--mail{
    display:inline-flex;
    align-items:center;
    gap:14px;
}
.dx-proc__np{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 6px 14px -6px rgba(229,21,27,.5);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.dx-proc__np svg{width:100%; height:100%; display:block;}
.dx-proc__title--mail:hover .dx-proc__np{
    transform:rotate(45deg) scale(1.05);
}
.dx-proc__lead{
    margin:-18px 0 24px;
    font-size:15px;
    color:#52607a;
    line-height:1.5;
    max-width:680px;
}

/* 3-step process and 4-step mail grids */
.dx-proc__grid,
.dx-proc__mail{
    display:grid;
    gap:clamp(14px, 2vw, 22px);
}
.dx-proc__grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
.dx-proc__mail{grid-template-columns:repeat(4, minmax(0, 1fr));}

/* Minimalist step card — yellow left border, large blue number, no icon */
.dx-proc__step{
    background:transparent;
    border-left:3px solid #FFD500;
    padding:14px 20px 16px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-width:0;
}
.dx-proc__num{
    font-family:"Bebas Neue","Inter",sans-serif;
    font-weight:400;
    font-size:clamp(36px, 4vw, 48px);
    line-height:.9;
    color:#0057B7;
    letter-spacing:.01em;
}
.dx-proc__t{
    margin:0;
    font-size:clamp(15px, 1.4vw, 17px);
    font-weight:600;
    color:#0a1428;
    line-height:1.25;
    letter-spacing:-.005em;
}
.dx-proc__d{
    margin:0;
    font-size:14px;
    color:#52607a;
    line-height:1.5;
    text-wrap:pretty;
}

/* Services row — same minimalist treatment but no number */
.dx-proc__svc{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(14px, 2vw, 22px);
}
.dx-proc__svc-card{
    background:transparent;
    border-left:3px solid #0057B7;
    padding:14px 20px 16px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}
.dx-proc__svc-t{
    margin:0;
    font-size:clamp(15px, 1.4vw, 17px);
    font-weight:800;
    color:#0a1428;
    text-transform:uppercase;
    letter-spacing:.03em;
    line-height:1.25;
}
.dx-proc__svc-d{
    margin:0;
    font-size:13.5px;
    color:#52607a;
    line-height:1.5;
}

/* Payment card badges under step 4 "Деньги на карту" — Font Awesome paths in UA flag colors */
.dx-paycards{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
}
.dx-paycard{
    display:inline-flex;
    width:52px; height:52px;
    align-items:center; justify-content:center;
    transition:transform .2s cubic-bezier(.22,.61,.36,1), filter .2s ease;
}
.dx-paycard svg{width:100%; height:100%; display:block;}
.dx-paycard:hover{transform:translateY(-2px) scale(1.06); filter:drop-shadow(0 6px 10px rgba(15,23,42,.2));}

/* Clickable messenger icons inside the first mail step */
.dx-proc__msgrs{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
}
.dx-msgr{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    text-decoration:none;
    color:#fff;
    overflow:hidden;
    transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
    will-change:transform;
}
.dx-msgr svg{width:20px; height:20px;}
.dx-msgr--wa{background:#25D366; box-shadow:0 4px 12px -4px rgba(37,211,102,.55); animation:dx-msgr-bob 2.4s ease-in-out infinite;}
.dx-msgr--tg{background:#229ED9; box-shadow:0 4px 12px -4px rgba(34,158,217,.55); animation:dx-msgr-bob 2.4s ease-in-out .3s infinite;}
.dx-msgr--vi{background:#7360F2; box-shadow:0 4px 12px -4px rgba(115,96,242,.55); animation:dx-msgr-bob 2.4s ease-in-out .6s infinite;}
.dx-msgr:hover{
    transform:translateY(-3px) scale(1.12) rotate(-6deg);
    box-shadow:0 10px 22px -6px currentColor;
    animation-play-state:paused;
}
.dx-msgr:active{transform:translateY(-1px) scale(1.06);}
@keyframes dx-msgr-bob{
    0%, 100% {transform:translateY(0);}
    50%      {transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
    .dx-msgr{animation:none;}
}

/* ============================================================
   Article — Прием металлолома Харьков (long-form text + photo)
   ============================================================ */
.dx-article{
    background:#f4f6fb;
    padding:clamp(40px, 6vh, 72px) clamp(16px, 4vw, 32px);
    color:#1f2937;
}
.dx-article__inner{
    max-width:1100px;
    margin:0 auto;
    background:#ffffff;
    border-radius:20px;
    padding:clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
    box-shadow:
        0 1px 0 rgba(15,23,42,.04),
        0 22px 50px -22px rgba(15,23,42,.18),
        inset 0 0 0 1px rgba(15,23,42,.05);
    position:relative;
}
.dx-article__inner::before{
    content:none;
}
.dx-article__title{
    margin:0 0 14px;
    font-size:clamp(22px, 2.6vw, 32px);
    font-weight:900;
    color:#0a1428;
    letter-spacing:-.01em;
    text-transform:uppercase;
    text-align:center;
}
.dx-article__rule{
    border:0;
    height:3px;
    background:#0057B7;
    max-width:80px;
    margin:0 auto 28px;
    border-radius:2px;
}
.dx-article__lead{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:28px;
    align-items:center;                                      /* photo vertically centered against the text block */
    margin-bottom:18px;
}
.dx-article__lead .dx-article__text{
    display:flex;
    flex-direction:column;
    justify-content:center;                                  /* text content centered top↔bottom */
}
.dx-article__photo{
    margin:0 auto;
    width:100%;
    max-width:520px;
    aspect-ratio:1 / 1;
    border-radius:14px;
    overflow:hidden;
    background:#f4f6fb;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border:0;
    box-shadow:none;
}
.dx-article__photo.is-empty{
    border:2px dashed #cbd5e1;
}
.dx-article__photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    border-radius:12px;
}
.dx-article__photo.is-empty{
    border-style:dashed;
}
.dx-article__photo:not(.is-empty){border:0;}
.dx-article__photo:not(.is-empty) .dx-article__ph-hint{display:none;}
.dx-article__ph-hint{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    color:#94a3b8;
    font-size:12px;
    padding:18px;
    line-height:1.5;
}
.dx-article__ph-hint span{font-size:34px; line-height:1;}
.dx-article__ph-hint code{
    font-family:"JetBrains Mono","Consolas",monospace;
    background:#eef1f6;
    padding:2px 6px;
    border-radius:4px;
    color:#0057B7;
    font-size:11px;
}
.dx-article__text p{
    margin:0 0 16px;
    font-size:17px;
    line-height:1.7;
    color:#3b4759;
    text-align:justify;
    text-wrap:pretty;
}
.dx-article__text p:last-child{margin-bottom:0;}
.dx-article__text strong{color:#0a1428; font-weight:700;}

.dx-article__note{
    margin:18px 0 32px;
    padding:16px 20px;
    background:linear-gradient(90deg, rgba(255,213,0,.18), rgba(255,213,0,0) 70%);
    border-left:4px solid #FFD500;
    border-radius:0 8px 8px 0;
    font-size:16px;
    color:#0a1428;
    line-height:1.6;
}

.dx-article__sub{
    margin:32px 0 14px;
    font-size:clamp(18px, 1.8vw, 22px);
    font-weight:800;
    color:#0a1428;
    letter-spacing:-.005em;
    position:relative;
    padding-left:14px;
}
.dx-article__sub::before{
    content:"";
    position:absolute;
    left:0; top:6px; bottom:6px;
    width:4px;
    background:#0057B7;
    border-radius:2px;
}

.dx-article__list{
    margin:0 0 18px;
    padding:0;
    list-style:none;
    counter-reset:art-num;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 24px;
}
.dx-article__list li{
    counter-increment:art-num;
    position:relative;
    padding:9px 0 9px 42px;
    font-size:16px;
    line-height:1.55;
    color:#1f2937;
}
.dx-article__list li::before{
    content:counter(art-num);
    position:absolute;
    left:0; top:7px;
    width:30px; height:30px;
    border-radius:50%;
    background:#FFD500;
    color:#0057B7;
    font-weight:900;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.dx-article__p{
    margin:0 0 16px;
    font-size:17px;
    line-height:1.7;
    color:#3b4759;
    text-wrap:pretty;
}
.dx-article__p strong{color:#0a1428; font-weight:700;}
.dx-article__p a{color:#0057B7; text-decoration:none; font-weight:600; border-bottom:1px solid rgba(0,87,183,.25);}
.dx-article__p a:hover{border-bottom-color:#0057B7;}

.dx-article__bullets{
    margin:0 0 18px;
    padding:0 0 0 22px;
    list-style:none;
}
.dx-article__bullets li{
    position:relative;
    padding:4px 0 4px 18px;
    font-size:16px;
    line-height:1.6;
    color:#3b4759;
}
.dx-article__bullets li::before{
    content:"";
    position:absolute;
    left:0; top:14px;
    width:8px; height:8px;
    border-radius:50%;
    background:#FFD500;
    box-shadow:0 0 0 3px rgba(255,213,0,.2);
}

.dx-article__more{display:none;}
.dx-article__more-hide{display:none;}
@media (max-width:640px){
    .dx-article__collapsible{
        position:relative;
        max-height:1100px;
        overflow:hidden;
        transition:max-height .35s ease;
    }
    .dx-article__collapsible::after{
        content:'';
        position:absolute;
        left:0;right:0;bottom:0;
        height:120px;
        background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 92%);
        pointer-events:none;
        transition:opacity .25s ease;
    }
    .dx-article__collapsible.is-expanded{max-height:none;}
    .dx-article__collapsible.is-expanded::after{opacity:0;}
    .dx-article__more{
        display:inline-flex;
        align-items:center;
        gap:8px;
        margin:14px auto 0;
        padding:11px 22px;
        background:#0057B7;
        color:#fff;
        border:0;
        border-radius:999px;
        font:600 14px/1 'Google Sans Flex','Google Sans',system-ui,Arial,sans-serif;
        cursor:pointer;
        box-shadow:0 8px 22px -10px rgba(0,87,183,.45);
    }
    .dx-article__more svg{transition:transform .25s ease;}
    .dx-article__more[aria-expanded="true"] svg{transform:rotate(180deg);}
    .dx-article__more[aria-expanded="true"] .dx-article__more-show{display:none;}
    .dx-article__more[aria-expanded="true"] .dx-article__more-hide{display:inline;}
    .dx-article__inner{display:flex;flex-direction:column;align-items:center;}
}

.dx-article__cta{
    margin:36px 0 0;
    padding:22px 32px;
    display:flex;
    align-items:center;
    gap:22px;
    background:#0057B7;
    color:#fff;
    border-radius:14px 14px 32px 32px;
    box-shadow:0 14px 30px -10px rgba(0,87,183,.45);
    position:relative;
    overflow:hidden;
}
@keyframes dx-cta-breath{
    0%, 100% {box-shadow:0 22px 44px -14px rgba(0,87,183,.6), 0 0 0 3px #FFD500, 0 0 0 6px rgba(255,213,0,.18);}
    50%      {box-shadow:0 26px 52px -10px rgba(0,87,183,.75), 0 0 0 3px #FFD500, 0 0 0 12px rgba(255,213,0,.0);}
}
.dx-article__cta::before{
    content:"";
    position:absolute;
    right:-60px; top:-60px;
    width:240px; height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,213,0,.35), transparent 70%);
    pointer-events:none;
    animation:dx-cta-glow 4.5s ease-in-out infinite;
}
.dx-article__cta::after{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:50%; height:100%;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    transform:skewX(-18deg);
    animation:dx-cta-shimmer 4s ease-in-out 1.2s infinite;
    pointer-events:none;
}
@keyframes dx-cta-glow{
    0%, 100% {transform:scale(1);   opacity:1;}
    50%      {transform:scale(1.18); opacity:.7;}
}
@keyframes dx-cta-shimmer{
    0%   {left:-60%;}
    60%  {left:120%;}
    100% {left:120%;}
}
.dx-article__cta-ico{
    flex:0 0 auto;
    width:54px; height:54px;
    border-radius:50%;
    background:#FFD500;
    color:#0c1e4d;
    font-size:30px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px -2px rgba(0,0,0,.25);
    position:relative;
    z-index:1;
}
@keyframes dx-cta-pulse{
    0%   {transform:scale(1);    box-shadow:0 6px 14px -4px rgba(0,0,0,.3), 0 0 0 0 rgba(255,213,0,.65);}
    70%  {transform:scale(1.06); box-shadow:0 6px 14px -4px rgba(0,0,0,.3), 0 0 0 14px rgba(255,213,0,0);}
    100% {transform:scale(1);    box-shadow:0 6px 14px -4px rgba(0,0,0,.3), 0 0 0 0 rgba(255,213,0,0);}
}
.dx-article__cta p{
    margin:0;
    font-size:17px;
    line-height:1.4;
    font-weight:700;
    color:#fff;
    position:relative;
    z-index:1;
    text-wrap:pretty;
    letter-spacing:.005em;
}
.dx-article__cta-body{flex:1 1 auto; min-width:0; position:relative; z-index:1;}
.dx-article__cta-phone{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:6px;
    color:#FFD500;
    font-weight:900;
    font-size:16px;
    text-decoration:none;
    letter-spacing:.01em;
}
.dx-article__cta-phone:hover{color:#fff;}
@media (prefers-reduced-motion:reduce){
    .dx-article__cta, .dx-article__cta::before, .dx-article__cta::after, .dx-article__cta-ico{animation:none;}
}
@media (max-width:560px){
    .dx-article__cta{flex-direction:column; text-align:center; padding:24px;}
}

@media (max-width:768px){
    .dx-article__lead{grid-template-columns:1fr; gap:18px;}
    .dx-article__photo{max-width:280px; margin:0 auto; aspect-ratio:1;}
    .dx-article__text p{text-align:left;}
    .dx-article__list{grid-template-columns:1fr;}
}

/* ============================================================
   Reviews carousel — UA flag styling (blue + yellow), horizontal scroll
   ============================================================ */
.dx-reviews{
    background:#ffffff;
    padding:clamp(40px, 6vh, 80px) 0;
    position:relative;
    overflow:hidden;
}
.dx-reviews::before{                                              /* Subtle flag-stripe accent under the section heading */
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:6px;
    background:linear-gradient(90deg, #0057B7 0 50%, #FFD500 50% 100%);
    pointer-events:none;
}
.dx-reviews__inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 clamp(16px, 4vw, 32px);
}
.dx-reviews__head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:clamp(14px, 2vw, 28px);
    margin-bottom:clamp(20px, 3vh, 32px);
}
.dx-reviews__title{
    margin:0;
    font-size:clamp(22px, 2.6vw, 32px);
    font-weight:900;
    color:#0a1428;
    letter-spacing:-.01em;
    text-transform:uppercase;
}
.dx-reviews__rating{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#52607a;
    min-width:0;
}
.dx-reviews__stars{
    color:#FFD500;
    font-size:18px;
    letter-spacing:1px;
    text-shadow:0 1px 0 rgba(0,0,0,.08);
    line-height:1;
}
.dx-reviews__avg{color:#0a1428; font-weight:900; font-size:18px;}
.dx-reviews__count{color:#52607a; font-size:13px;}
.dx-reviews__source{
    display:inline-flex; align-items:center; gap:5px;
    color:#52607a; text-decoration:none;
    padding:2px 8px; border-radius:8px;
    background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.1), inset 0 0 0 1px rgba(15,23,42,.08);
    font-weight:600; transition:transform .15s ease, box-shadow .15s ease;
}
.dx-reviews__source:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgba(15,23,42,.15), inset 0 0 0 1px rgba(15,23,42,.1);}
.dx-reviews__source svg{flex:0 0 auto;}
.dx-reviews__sync{
    margin:18px auto 0; max-width:760px;
    text-align:center; font-size:13px; color:#64748b;
}
.dx-review{position:relative;}
.dx-review__link{
    display:block; color:inherit; text-decoration:none;
    height:100%;
}
.dx-review__ext{
    box-sizing:content-box;
    width:16px; height:16px; color:#94a3b8;
    margin-left:auto; flex:0 0 auto;
    padding-left:18px;
    transition:color .15s ease, transform .15s ease;
}
.dx-review__link:hover .dx-review__ext{color:#0057B7; transform:translate(2px,-2px);}
.dx-reviews__nav{display:inline-flex; gap:8px;}
.dx-reviews__btn{
    appearance:none;
    width:42px; height:42px;
    border:0;
    border-radius:50%;
    background:#FFD500;
    color:#0057B7;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px -6px rgba(255,213,0,.65);
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.dx-reviews__btn svg{width:18px; height:18px;}
.dx-reviews__btn:hover{background:#ffdf2e; transform:translateY(-2px); box-shadow:0 10px 20px -6px rgba(255,213,0,.8);}
.dx-reviews__btn:active{transform:translateY(0);}
.dx-reviews__btn:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none;}

.dx-reviews__viewport{
    position:relative;
    overflow:hidden;
    margin:0 -8px;
}
.dx-reviews__track{
    display:flex;
    gap:18px;
    margin:0;
    padding:8px;
    list-style:none;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.dx-reviews__track::-webkit-scrollbar{display:none;}
.dx-review{
    flex:0 0 320px;
    max-width:320px;
    background:#ffffff;
    border-radius:16px;
    padding:22px 22px 18px;
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 14px 28px -16px rgba(15,23,42,.3);
    position:relative;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:transform .25s ease, box-shadow .25s ease;
}
.dx-review:hover{transform:translateY(-3px); box-shadow:0 1px 0 rgba(15,23,42,.04), 0 22px 36px -16px rgba(15,23,42,.4);}
.dx-review__head{display:flex; align-items:center; gap:18px;}
.dx-review__avatar{
    width:46px; height:46px;
    flex:0 0 46px;
    border-radius:50%;
    background:linear-gradient(135deg, #0057B7 0 50%, #FFD500 50% 100%);
    color:#ffffff;
    font-weight:900;
    font-size:20px;
    display:inline-flex; align-items:center; justify-content:center;
    text-transform:uppercase;
    box-shadow:0 4px 10px -4px rgba(0,87,183,.5);
}
.dx-review__meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.dx-review__author{font-weight:600; color:#0a1428; font-size:15px;}
.dx-review__rating{display:inline-flex; gap:1px; font-size:13px;}
.dx-review__star{color:#e2e8f0; line-height:1;}
.dx-review__star.is-on{color:#FFD500;}
.dx-review__text{
    margin:14px 0 0;
    font-size:14px;
    line-height:1.55;
    color:#3b4759;
    flex:1;
    quotes:"«" "»";
}
.dx-review__text::before{content:open-quote; color:#0057B7; font-weight:900; margin-right:2px;}
.dx-review__text::after{content:close-quote; color:#0057B7; font-weight:900; margin-left:2px;}
.dx-review__date{
    font-size:11px;
    color:#64748b;
    font-variant-numeric:tabular-nums;
    letter-spacing:.04em;
}
@media (max-width:560px){
    .dx-review{flex-basis:280px; max-width:280px;}
    .dx-reviews__head{grid-template-columns:1fr; gap:10px;}
    .dx-reviews__nav{justify-self:start;}
}

/* ============================================================
   FAQ accordion — clean stack, brand accents, smooth open/close
   ============================================================ */
.dx-faq{
    background:#f4f6fb;
    padding:clamp(40px, 6vh, 80px) clamp(16px, 4vw, 32px);
}
.dx-faq__inner{max-width:980px; margin:0 auto;}
.dx-faq__title{
    margin:0 0 clamp(20px, 3vh, 32px);
    font-size:clamp(22px, 2.6vw, 32px);
    font-weight:700;
    color:#0a1428;
    letter-spacing:-.01em;
    text-transform:uppercase;
}
.dx-faq__list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.dx-faq__item{
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 6px 18px -14px rgba(15,23,42,.3);
    border:1px solid transparent;
    transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    overflow:hidden;
}
.dx-faq__item[open]{
    border-color:rgba(15,23,42,.08);
    box-shadow:0 1px 0 rgba(15,23,42,.04), 0 14px 28px -16px rgba(15,23,42,.25);
}
.dx-faq__q{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 22px;
    font-size:clamp(14px, 1.4vw, 16px);
    font-weight:600;
    color:#0a1428;
    text-transform:uppercase;
    letter-spacing:.03em;
    line-height:1.3;
    user-select:none;
    transition:color .2s ease;
}
.dx-faq__q::-webkit-details-marker{display:none;}
.dx-faq__q:hover{color:#0057B7;}
.dx-faq__icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px; height:30px;
    border-radius:50%;
    background:#FFD500;
    color:#0057B7;
    transition:transform .35s cubic-bezier(.65,0,.35,1), background-color .25s ease;
}
.dx-faq__icon svg{width:14px; height:14px;}
.dx-faq__item[open] .dx-faq__icon{transform:rotate(-180deg);}
.dx-faq__a{
    padding:0 22px 20px;
    color:#3b4759;
    font-size:14px;
    line-height:1.6;
    animation:dx-faq-open .35s cubic-bezier(.22,.61,.36,1);
}
.dx-faq__a p{margin:0;}
.dx-faq__a strong{color:#0a1428; font-weight:700;}
.dx-faq__a a{color:#0057B7; text-decoration:none; font-weight:600; border-bottom:1px solid rgba(0,87,183,.25);}
.dx-faq__a a:hover{border-bottom-color:#0057B7;}
@keyframes dx-faq-open{
    from{opacity:0; transform:translateY(-6px);}
    to  {opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
    .dx-faq__a, .dx-faq__icon, .dx-faq__item{animation:none; transition:none;}
}
@media (max-width:560px){
    .dx-faq__q{padding:14px 16px; font-size:13px;}
    .dx-faq__a{padding:0 16px 16px; font-size:13.5px;}
}

/* Responsive */
@media (max-width:900px){
    .dx-proc__grid{grid-template-columns:1fr 1fr;}
    .dx-proc__mail{grid-template-columns:1fr 1fr;}
    .dx-proc__svc{grid-template-columns:1fr;}
}
@media (max-width:560px){
    .dx-proc__grid,
    .dx-proc__mail{grid-template-columns:1fr;}
}

/* ============================================================
   CATEGORY PAGE  ( /dev/cat/{slug} )
   ─ Universal template for 17 category landing pages.
   ─ Each category sets its own --cat / --cat-soft brand colour
     via inline style on .dx-cat (see category.php <style> block).
   ============================================================ */
.dx-cat{
    --cat:#0057B7;
    --cat-soft:#FFD500;
    max-width:1200px;
    margin:0 auto;
    padding:24px 24px 96px;
    font-family:"Google Sans Flex","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Breadcrumbs */
.dx-cat__crumbs{
    font-size:13px;
    color:#64748b;
    margin:8px 0 24px;
    display:flex;
    flex-wrap:wrap;
    gap:6px 8px;
    align-items:center;
}
.dx-cat__crumbs a{color:#475569; text-decoration:none;}
.dx-cat__crumbs a:hover{color:var(--cat); text-decoration:underline;}
.dx-cat__crumbs span[aria-current]{color:#0f172a; font-weight:500;}

/* ─── HERO ─── */
.dx-cat__hero{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);
    gap:48px;
    align-items:stretch;
    margin-bottom:64px;
    background:#ffffff;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--cat) 14%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--cat-soft) 18%, transparent) 0%, transparent 55%),
        #ffffff;
    border-radius:28px;
    padding:48px;
    box-shadow:0 28px 60px -28px rgba(15,23,42,.18), 0 2px 0 rgba(15,23,42,.04);
    position:relative;
    overflow:hidden;
}
.dx-cat__hero::before{
    /* Decorative grid lines — subtle technical-blueprint vibe */
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
    background-size:36px 36px;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(circle at 30% 50%, transparent 0%, #000 70%);mask-image:radial-gradient(circle at 30% 50%, transparent 0%, #000 70%);
}
/* Hero theme illustration — animated SVG anchored to the empty right column.
   Applied only on .dx-cat[data-kind="..."] pages (main page has no data-kind).
   Skip on pages whose hero already has a price-card aside (category pages). */
.dx-cat[data-kind] .dx-cat__hero:has(.dx-cat__hero-card)::after{display:none;}
.dx-cat[data-kind] .dx-cat__hero::after{
    content:'';
    position:absolute;
    right:6%;
    top:50%;
    width:280px;
    height:280px;
    background:var(--hero-icon, none) center/contain no-repeat;
    opacity:.22;
    z-index:0;
    pointer-events:none;
    transform:translateY(-50%);
    animation:dx-hero-float 7s ease-in-out infinite;
}
@keyframes dx-hero-float{
    0%,100%{transform:translateY(-50%) rotate(-1deg);}
    50%    {transform:translateY(calc(-50% - 10px)) rotate(1deg);}
}
@media (prefers-reduced-motion: reduce){
    .dx-cat[data-kind] .dx-cat__hero::after{animation:none;}
}
@media (max-width:880px){
    .dx-cat[data-kind] .dx-cat__hero::after{display:none;}
}
/* Per-kind icons — full-colour SVG illustrations in LIFEMET palette (blue #0057B7 + yellow #FFD500 + dark accents) */

/* /metalloprokat (overall) — stack of three steel profiles with yellow ends, in isometric view */
.dx-cat[data-kind="prokat"]   {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 140'><path d='M10 20 L130 20 L160 40 L40 40 Z' fill='%23FFD500'/><path d='M40 40 L40 90 L10 70 L10 20 Z' fill='%23003d80'/><path d='M40 40 L160 40 L160 90 L40 90 Z' fill='%230057B7'/><path d='M50 50 L150 50 L150 80 L50 80 Z' fill='%23004ea3'/><path d='M30 70 L150 70 L170 90 L50 90 Z' fill='%23FFD500'/><path d='M50 90 L50 130 L30 110 L30 70 Z' fill='%23004391'/><path d='M50 90 L170 90 L170 130 L50 130 Z' fill='%230057B7'/><path d='M70 102 L150 102 L150 118 L70 118 Z' fill='%23FFD500'/></svg>");}

/* armatura — two ribbed reinforcement bars at angle, with yellow ribs and dark ends */
.dx-cat[data-slug="armatura"]            {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g transform='rotate(-15 70 70)'><rect x='30' y='10' width='22' height='120' rx='3' fill='%230057B7'/><rect x='30' y='10' width='22' height='8' fill='%231a1a1a'/><rect x='30' y='122' width='22' height='8' fill='%231a1a1a'/><path d='M30 28 L52 38 M30 44 L52 54 M30 60 L52 70 M30 76 L52 86 M30 92 L52 102 M30 108 L52 118' stroke='%23FFD500' stroke-width='4'/></g><g transform='rotate(20 70 70)'><rect x='86' y='10' width='22' height='120' rx='3' fill='%230057B7'/><rect x='86' y='10' width='22' height='8' fill='%231a1a1a'/><rect x='86' y='122' width='22' height='8' fill='%231a1a1a'/><path d='M86 28 L108 38 M86 44 L108 54 M86 60 L108 70 M86 76 L108 86 M86 92 L108 102 M86 108 L108 118' stroke='%23FFD500' stroke-width='4'/></g></svg>");}

/* balka — isometric I-beam with depth, yellow caps */
.dx-cat[data-slug="balka"]               {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><path d='M10 18 L100 18 L130 40 L40 40 Z' fill='%23FFD500'/><path d='M10 18 L10 30 L40 52 L40 40 Z' fill='%23004391'/><path d='M40 40 L130 40 L130 52 L40 52 Z' fill='%230057B7'/><path d='M64 52 L94 52 L94 96 L64 96 Z' fill='%230057B7'/><path d='M94 52 L114 64 L114 108 L94 96 Z' fill='%23003d80'/><path d='M10 100 L100 100 L130 122 L40 122 Z' fill='%23FFD500'/><path d='M40 96 L40 108 L100 108 L100 96 Z' fill='%23004ea3'/><path d='M40 108 L130 108 L130 122 L40 122 Z' fill='%230057B7'/></svg>");}

/* shveller — isometric U-channel ([) with yellow rims */
.dx-cat[data-slug="shveller"]            {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><path d='M14 18 L94 18 L120 38 L38 38 Z' fill='%23FFD500'/><path d='M14 18 L14 122 L38 130 L38 38 Z' fill='%23003d80'/><path d='M38 38 L38 130 L120 122 L120 38 Z' fill='%230057B7'/><path d='M50 50 L108 50 L108 110 L50 110 Z' fill='%23004ea3'/><path d='M50 50 L108 50 L108 60 L50 60 Z' fill='%23FFD500'/></svg>");}

/* ugolok — isometric L-angle, three faces of different shades + yellow edge */
.dx-cat[data-slug="ugolok"]              {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><path d='M14 18 L40 18 L40 92 L120 92 L120 122 L14 122 Z' fill='%230057B7'/><path d='M14 18 L40 18 L48 26 L22 26 Z' fill='%23FFD500'/><path d='M40 92 L48 100 L48 26 L40 18 Z' fill='%23003d80'/><path d='M120 92 L128 100 L48 100 L40 92 Z' fill='%23FFD500'/><path d='M120 92 L128 100 L128 130 L120 122 Z' fill='%23003d80'/><path d='M14 122 L22 130 L128 130 L120 122 Z' fill='%23004ea3'/></svg>");}

/* list — stack of three steel sheets in isometric view, alternating blue/yellow edges */
.dx-cat[data-slug="list"]                {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'><path d='M10 22 L100 10 L150 24 L60 36 Z' fill='%23FFD500'/><path d='M10 22 L10 30 L60 44 L60 36 Z' fill='%23004391'/><path d='M60 36 L150 24 L150 32 L60 44 Z' fill='%230057B7'/><path d='M14 46 L104 34 L154 48 L64 60 Z' fill='%23004ea3'/><path d='M14 46 L14 54 L64 68 L64 60 Z' fill='%23003d80'/><path d='M64 60 L154 48 L154 56 L64 68 Z' fill='%230057B7'/><path d='M18 70 L108 58 L158 72 L68 84 Z' fill='%23FFD500'/><path d='M18 70 L18 78 L68 92 L68 84 Z' fill='%23004391'/><path d='M68 84 L158 72 L158 80 L68 92 Z' fill='%230057B7'/></svg>");}

/* truba-profilnaya — isometric square tube with cavity, blue + yellow front-face */
.dx-cat[data-slug="truba-profilnaya"]    {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><path d='M14 30 L94 14 L126 30 L46 46 Z' fill='%23FFD500'/><path d='M14 30 L14 110 L46 126 L46 46 Z' fill='%23003d80'/><path d='M46 46 L126 30 L126 110 L46 126 Z' fill='%230057B7'/><path d='M32 36 L82 26 L102 36 L52 46 Z' fill='%23fff8d8'/><path d='M52 46 L102 36 L102 102 L52 112 Z' fill='%23fff8d8' fill-opacity='.6'/></svg>");}

/* truba-kruglaya — isometric round tube/pipe with hollow centre */
.dx-cat[data-slug="truba-kruglaya"]      {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><ellipse cx='70' cy='30' rx='44' ry='16' fill='%23FFD500'/><path d='M26 30 L26 110 A44 16 0 0 0 114 110 L114 30 A44 16 0 0 1 26 30 Z' fill='%230057B7'/><path d='M26 30 A44 16 0 0 0 70 46 L70 126 A44 16 0 0 1 26 110 Z' fill='%23003d80'/><ellipse cx='70' cy='30' rx='44' ry='16' fill='%23FFD500'/><ellipse cx='70' cy='30' rx='28' ry='10' fill='%231a1a1a'/><ellipse cx='70' cy='30' rx='22' ry='7' fill='%23404040'/></svg>");}

/* profnastil — corrugated metal sheet, blue waves with yellow tops */
.dx-cat[data-slug="profnastil"]          {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'><path d='M10 50 L26 50 L30 30 L46 30 L50 50 L66 50 L70 30 L86 30 L90 50 L106 50 L110 30 L126 30 L130 50 L146 50 L150 30 L160 30 L156 50 L156 110 L150 110 L146 90 L130 90 L126 110 L110 110 L106 90 L90 90 L86 110 L70 110 L66 90 L50 90 L46 110 L30 110 L26 90 L10 90 Z' fill='%230057B7'/><path d='M30 30 L46 30 L46 18 L30 18 Z M70 30 L86 30 L86 18 L70 18 Z M110 30 L126 30 L126 18 L110 18 Z M150 30 L160 30 L160 18 L150 18 Z' fill='%23FFD500'/><path d='M14 110 L156 110 L156 120 L14 120 Z' fill='%23003d80'/></svg>");}

/* metalloprokat-b-u — recycle arrow circle with bold Б/У label */
.dx-cat[data-slug="metalloprokat-b-u"]   {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><circle cx='70' cy='70' r='58' fill='%23FFD500'/><path d='M70 22 A48 48 0 0 1 118 70' stroke='%230057B7' stroke-width='10' fill='none'/><path d='M118 70 L130 64 L122 86 L108 76 Z' fill='%230057B7'/><path d='M70 118 A48 48 0 0 1 22 70' stroke='%230057B7' stroke-width='10' fill='none'/><path d='M22 70 L10 76 L18 54 L32 64 Z' fill='%230057B7'/><text x='70' y='82' font-family='Arial,sans-serif' font-weight='900' font-size='32' text-anchor='middle' fill='%230057B7'>Б/У</text></svg>");}

/* kuplyu-metalloprokat — blue circle with yellow ₴ inside (we buy / payment) */
.dx-cat[data-slug="kuplyu-metalloprokat"]{--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><circle cx='70' cy='70' r='58' fill='%230057B7'/><circle cx='70' cy='70' r='48' fill='%23004391'/><path d='M58 38 L84 38 L78 56 L88 56 L88 64 L74 64 L72 70 L88 70 L88 78 L68 78 L58 102 L48 102 L58 78 L48 78 L48 70 L62 70 L64 64 L48 64 L48 56 L66 56 Z' fill='%23FFD500'/></svg>");}
/* Vyvoz — flat truck silhouette in the same minimal style as /kontakty map-pin:
   yellow ground-shadow ellipses, single blue body, yellow accents (LIFEMET tag + wheel hubs),
   black wheel centres. Inherits default opacity .22 watermark look. */
.dx-cat[data-kind="vyvoz"]    {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><ellipse cx='220' cy='180' rx='160' ry='8' fill='%23FFD500'/><ellipse cx='220' cy='180' rx='120' ry='5' fill='%23d4a200'/><line x1='8' y1='86' x2='62' y2='86' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'/><line x1='14' y1='108' x2='54' y2='108' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'/><line x1='4' y1='130' x2='72' y2='130' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'/><line x1='20' y1='150' x2='60' y2='150' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'/><path d='M70 50 L320 50 L360 86 L360 156 L70 156 Z' fill='%230057B7'/><path d='M70 50 L320 50 L320 64 L70 64 Z' fill='%23003d80'/><path d='M320 50 L360 86 L320 86 Z' fill='%23003d80'/><path d='M326 60 L354 88 L320 88 L320 60 Z' fill='%23FFD500'/><rect x='268' y='96' width='42' height='28' rx='2' fill='%23FFD500'/><rect x='276' y='100' width='34' height='20' rx='1' fill='%23bce0ff'/><rect x='82' y='80' width='190' height='62' rx='4' fill='%23FFD500'/><text x='177' y='121' fill='%230057B7' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-size='28' text-anchor='middle' letter-spacing='2'>LIFEMET</text><rect x='70' y='154' width='290' height='8' fill='%23334155'/><circle cx='120' cy='164' r='20' fill='%231a1a1a'/><circle cx='120' cy='164' r='11' fill='%23FFD500'/><circle cx='120' cy='164' r='4' fill='%231a1a1a'/><circle cx='300' cy='164' r='20' fill='%231a1a1a'/><circle cx='300' cy='164' r='11' fill='%23FFD500'/><circle cx='300' cy='164' r='4' fill='%231a1a1a'/><circle cx='200' cy='28' r='11' fill='%2316a34a'/><text x='200' y='33' font-family='Arial,sans-serif' font-weight='900' font-size='12' text-anchor='middle' fill='%23ffffff'>%E2%82%B4</text><circle cx='235' cy='38' r='7' fill='%2316a34a'/><circle cx='168' cy='40' r='6' fill='%2316a34a'/><circle cx='255' cy='20' r='5' fill='%2316a34a'/></svg>");}
.dx-cat[data-kind="vyvoz"] .dx-cat__hero::after{width:440px; height:240px;}
/* contacts — map pin on a yellow ground disk with shadow */
.dx-cat[data-kind="contacts"] {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><ellipse cx='70' cy='118' rx='44' ry='10' fill='%23FFD500'/><ellipse cx='70' cy='118' rx='30' ry='6' fill='%23d4a200'/><path d='M70 14 a36 36 0 0 0-36 36c0 28 36 64 36 64s36-36 36-64a36 36 0 0 0-36-36z' fill='%230057B7'/><path d='M70 14 a36 36 0 0 0-36 36c0 4 1 8 2 12 L70 26 Z' fill='%231c6fc7'/><circle cx='70' cy='50' r='16' fill='%23FFD500'/><circle cx='70' cy='50' r='8' fill='%231a1a1a'/></svg>");}
/* Nova Poshta brand mark — red rounded square + white "Н" + arrow → */
/* Nova Poshta — official brand-mark SVG provided by client (red square + white 4-arrows + central H-block) */
.dx-cat[data-kind="pochta"]   {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23e5151b' d='M512 472c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V40C0 17.9 17.9 0 40 0h432c22.1 0 40 17.9 40 40z'/><g fill='%23fff'><path d='M374.1 339.1c-.3 0-.5 0-.8-.2-.7-.3-1.2-1-1.2-1.9l.3-159.6c0-2.2 0-3.8 2-3.8.6 0 1.1.3 1.5.7l80.5 80.5c.8.8.8 2 0 2.8l-80.8 80.8c-.4.5-1 .7-1.5.7z'/><path d='M137.6 339.1c-.6 0-1.1-.3-1.5-.7l-80.5-80.4c-.4-.4-.6-.9-.6-1.4s.2-1 .6-1.4l80.8-80.8c.4-.4.9-.6 1.4-.6.3 0 .5 0 .8.2.7.3 1.2 1 1.2 1.9l-.3 159.6c.1 2 .1 3.6-1.9 3.6z'/><path d='M221.2 218.4c-1.1 0-2-.9-2-2v-70.9h-48.9c-.8 0-1.5-.5-1.8-1.2s-.1-1.6.4-2.2l84.8-84.8c.4-.4.9-.6 1.4-.6s1 .2 1.4.6l83.4 83.4c.6.6.7 1.4.4 2.2-.3.7-1 1.2-1.8 1.2h-43.5v72.3c0 1.1-.9 2-2 2z'/><path d='M257.3 455.3c-.5 0-1-.2-1.4-.6l-83.4-83.4c-.6-.6-.7-1.4-.4-2.2.3-.7 1-1.2 1.8-1.2h43.5v-72.3c0-1.1.9-2 2-2h71.8c1.1 0 2 .9 2 2v70.9h48.9c.8 0 1.5.5 1.8 1.2s.1 1.6-.4 2.2l-84.8 84.8c-.4.3-.9.6-1.4.6z'/></g></svg>");}
/* Stronger opacity for the brand mark so colour reads clearly */
.dx-cat[data-kind="pochta"] .dx-cat__hero::after{opacity:.42;}
/* prices — 4-bar chart with rising green arrow on yellow ground */
.dx-cat[data-kind="prices"]   {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'><rect x='8' y='118' width='148' height='14' fill='%23FFD500'/><rect x='20' y='80' width='24' height='38' fill='%230057B7'/><rect x='20' y='80' width='24' height='6' fill='%23003d80'/><rect x='52' y='60' width='24' height='58' fill='%230057B7'/><rect x='52' y='60' width='24' height='6' fill='%23003d80'/><rect x='84' y='42' width='24' height='76' fill='%230057B7'/><rect x='84' y='42' width='24' height='6' fill='%23003d80'/><rect x='116' y='24' width='24' height='94' fill='%230057B7'/><rect x='116' y='24' width='24' height='6' fill='%23003d80'/><path d='M16 110 L46 86 L72 96 L100 60 L128 70 L150 32' stroke='%23FFD500' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M150 32 L140 30 L148 48 Z' fill='%2316a34a'/><circle cx='150' cy='32' r='6' fill='%2316a34a'/></svg>");}
/* stati / article — newspaper / article card with LIFEMET-yellow band header */
.dx-cat[data-kind="stati"],
.dx-cat[data-kind="article"]  {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><path d='M16 16 L94 16 L122 44 L122 124 L16 124 Z' fill='%230057B7'/><path d='M94 16 L122 44 L94 44 Z' fill='%23003d80'/><rect x='24' y='52' width='90' height='14' fill='%23FFD500'/><rect x='24' y='74' width='90' height='6' fill='%23a8d4ff'/><rect x='24' y='86' width='90' height='6' fill='%23a8d4ff'/><rect x='24' y='98' width='62' height='6' fill='%23a8d4ff'/><rect x='24' y='110' width='90' height='6' fill='%23a8d4ff'/></svg>");}
/* ferrous (чёрный лом) — heap of scrap steel under crane grab */
.dx-cat[data-kind="ferrous"], .dx-cat[data-kind="black"] {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'><path d='M70 8 L70 38' stroke='%231a1a1a' stroke-width='3'/><path d='M58 38 L70 28 L82 38 L82 64 L70 56 L58 64 Z' fill='%23475569'/><circle cx='70' cy='42' r='4' fill='%23FFD500'/><path d='M14 122 C24 100 40 92 58 96 C76 88 92 92 108 94 C124 88 140 96 150 106 C152 110 154 116 154 122 Z' fill='%231e293b'/><rect x='30' y='100' width='22' height='14' rx='2' fill='%23475569' transform='rotate(-10 41 107)'/><rect x='66' y='98' width='26' height='12' rx='2' fill='%23334155' transform='rotate(8 79 104)'/><rect x='100' y='102' width='24' height='14' rx='2' fill='%23475569' transform='rotate(-5 112 109)'/><rect x='40' y='112' width='30' height='10' rx='2' fill='%23334155'/><rect x='84' y='114' width='30' height='10' rx='2' fill='%23475569'/><path d='M10 122 L154 122 L154 132 L10 132 Z' fill='%23FFD500'/></svg>");}
/* nonferrous (цветной) — overlapping copper / brass / aluminum discs */
.dx-cat[data-kind="nonferrous"], .dx-cat[data-kind="colored"] {--hero-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'><circle cx='44' cy='52' r='32' fill='%23B87333'/><circle cx='44' cy='52' r='22' fill='%23a8602b'/><circle cx='44' cy='52' r='12' fill='%23B87333'/><circle cx='100' cy='70' r='32' fill='%23D4A95C'/><circle cx='100' cy='70' r='22' fill='%23b0863e'/><circle cx='100' cy='70' r='12' fill='%23D4A95C'/><circle cx='70' cy='100' r='28' fill='%23c0c8d0'/><circle cx='70' cy='100' r='18' fill='%2398a1ad'/><circle cx='70' cy='100' r='8' fill='%23c0c8d0'/></svg>");}
.dx-cat__hero-text{position:relative; z-index:1; display:flex; flex-direction:column; gap:18px;}

.dx-cat__eyebrow{
    display:inline-grid;
    grid-template-columns:min-content max-content;
    column-gap:10px;
    row-gap:6px;
    align-items:center;
    width:fit-content;
    max-width:100%;
    color:#475569;
    font-size:13px;
    font-weight:500;
    letter-spacing:.04em;
    margin:0;
    text-transform:uppercase;
}
/* Stacked "график работы" / "Пн-Сб 8:00-17:00" pair (caption above hours only) */
.dx-cat__eyebrow-block{
    display:inline-flex;
    flex-direction:column;
    gap:2px;
    line-height:1.1;
    align-items:flex-start;
}
.dx-cat__eyebrow-label{
    font-size:10px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#64748b;
}
.dx-cat__eyebrow-value{
    font-size:13px;
    font-weight:500;
    letter-spacing:.04em;
    color:#475569;
}
.dx-cat__eyebrow-sep{
    color:#cbd5e1;
    font-weight:400;
    align-self:center;
    margin:0 -2px;
}
.dx-cat__chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 12px;
    border-radius:10px;
    background:var(--cat);
    color:#fff;
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
    box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cat) 60%, transparent);
}

.dx-cat__hero .dx-cat__status{display:none !important;}
.dx-cat__eyebrow .dx-cat__status{display:none !important;}
.dx-pt__bx,.dx-cat__chart-col,.dx-cat__chart-cell,.dx-tick{display:none !important;}

/* No-shadow override — site-wide; убирает box-shadow / text-shadow / drop-shadow на статике и при hover/анимациях */
*,*::before,*::after{
    box-shadow:none !important;
    text-shadow:none !important;
}
*:hover,*:focus,*:active,*:focus-visible{
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
}
.dx-cat__status .dx-cat__status-off{display:none;}
.dx-cat__status .dx-footer__contact-dot.is-closed ~ .dx-cat__status-off{display:inline;}
.dx-cat__status .dx-footer__contact-dot.is-closed ~ .dx-cat__status-on{display:none;}

/* ── Status badge: ярко выделяем «на связи» / «не на связи» ────────────── */
.dx-status-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 12px 5px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
    line-height:1.2;
    margin-top:4px;
    border:1px solid transparent;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    /* ON-state defaults — переопределяется при is-closed ниже */
    background:rgba(22,163,74,.12);
    color:#15803d;
    border-color:rgba(22,163,74,.35);
    box-shadow:0 0 0 3px rgba(22,163,74,.08);
}
.dx-status-badge .dx-cat__status-on,
.dx-status-badge .dx-cat__status-off{
    font-weight:700;
    color:inherit;
    white-space:nowrap;
}
.dx-status-badge .dx-footer__contact-dot{
    flex:0 0 auto;
    width:9px; height:9px;
    border-radius:50%;
    background:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,.20);
    position:relative;
    animation:dx-status-pulse 1.8s ease-in-out infinite;
}
.dx-status-badge:has(.dx-footer__contact-dot.is-closed),
.dx-status-badge .dx-footer__contact-dot.is-closed{ /* fallback for ::has-less browsers */ }
.dx-status-badge:has(.dx-footer__contact-dot.is-closed){
    background:rgba(220,38,38,.10);
    color:#b91c1c;
    border-color:rgba(220,38,38,.35);
    box-shadow:0 0 0 3px rgba(220,38,38,.08);
}
.dx-status-badge .dx-footer__contact-dot.is-closed{
    background:#dc2626;
    box-shadow:0 0 0 3px rgba(220,38,38,.22);
    animation:none;
}
@keyframes dx-status-pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.20)}
    50%   {box-shadow:0 0 0 6px rgba(22,163,74,.08)}
}
@media (prefers-reduced-motion: reduce){
    .dx-status-badge .dx-footer__contact-dot{animation:none}
}
.dx-cat__eyebrow-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    line-height:1;
}
.dx-cat__eyebrow-label .dx-footer__contact-dot{
    width:9px;
    height:9px;
    flex:0 0 9px;
}
.dx-cat__chip{ grid-column:1; grid-row:1; justify-self:start; }
.dx-cat__eyebrow-block{ grid-column:2; grid-row:1; }
.dx-cat__eyebrow-break{ display:none; }
@media (max-width:640px){
    /* Mobile breathing room: don't let hero/sections touch viewport edges. */
    .dx-cat{ padding:16px 14px 64px; }
    .dx-cat__hero{ padding:22px 18px; border-radius:18px; gap:20px; }
    /* H1 in hero: allow soft word-break so long compound words don't overflow. */
    .dx-cat__h1{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
}
@media (max-width:420px){
    .dx-cat{ padding:12px 10px 48px; }
    .dx-cat__hero{ padding:18px 14px; border-radius:14px; gap:14px; }
    .dx-cat__h1{ font-size:clamp(24px, 7.5vw, 34px); }
    .dx-cat__lead{ font-size:14.5px; }
    .dx-cat__btn{ font-size:15px; padding:14px 18px; }
}
@media (max-width:380px){
    .dx-cat{ padding:10px 8px 36px; }
    .dx-cat__hero{ padding:14px 12px; gap:12px; }
    .dx-cat__chip{ min-width:30px; height:30px; padding:0 8px; font-size:12px; }
    .dx-cat__h1{ font-size:23px; line-height:1.18; }
    .dx-cat__lead{ font-size:14px; line-height:1.45; }
}
/* Mobile hero collapse — JS adds .is-mobile-collapsed on ≤640px so the price table
   sits closer to the fold. Eyebrow + H1 stay; lead becomes a white blurred peek; CTA hides.
   Toggle button sits ON the hero's bottom edge (overlap). */
.dx-cat__hero-expand-wrap{ display:none; }
@media (max-width:640px){
    .dx-cat__hero.is-mobile-collapsed{ gap:6px; position:relative; overflow:visible; }
    .dx-cat__hero.is-mobile-collapsed .dx-cat__lead{
        max-height:22px; overflow:hidden; margin-bottom:0;
        position:relative;
        transition:max-height .42s ease;
        filter:blur(2.4px);
    }
    .dx-cat__hero.is-mobile-collapsed .dx-cat__lead::after{
        content:''; position:absolute; left:-8px; right:-8px; top:-4px; bottom:-12px;
        pointer-events:none;
        background:linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.5) 30%,
            rgba(255,255,255,.92) 65%,
            #fff 92%,
            #fff 100%);
    }
    .dx-cat__hero:not(.is-mobile-collapsed) .dx-cat__lead{
        animation:dxHeroLeadIn .38s ease both;
    }
    .dx-cat__hero.is-mobile-collapsed .dx-cat__hero-cta{ display:none; }
    /* When wrap is INSIDE hero (mobile), absolutely position it overlapping the bottom edge. */
    .dx-cat__hero .dx-cat__hero-expand-wrap{
        display:flex; justify-content:center;
        position:absolute; left:0; right:0; bottom:-18px;
        margin:0; z-index:3;
    }
    .dx-cat__hero:not(.is-mobile-collapsed) .dx-cat__hero-expand-wrap{
        position:static; margin:14px 0 4px;
    }
    /* Below-hero breathing room so the floating button doesn't kiss the next section. */
    .dx-cat__hero.is-mobile-collapsed{ margin-bottom:32px; }
    .dx-cat__hero-expand{
        appearance:none; border:0; cursor:pointer;
        background:#fff; color:var(--cat, #0057B7);
        box-shadow:0 0 0 1.5px color-mix(in srgb, var(--cat,#0057B7) 32%, #fff),
                   0 10px 22px -10px rgba(15,23,42,.32);
        border-radius:999px; padding:11px 18px 11px 20px;
        font:600 14.5px/1 'Google Sans Flex', system-ui, sans-serif;
        display:inline-flex; align-items:center; gap:9px;
        transition:transform .14s ease, box-shadow .22s ease;
    }
    .dx-cat__hero-expand:hover, .dx-cat__hero-expand:focus-visible{
        transform:translateY(-1px); outline:none;
        box-shadow:0 0 0 1.8px color-mix(in srgb, var(--cat,#0057B7) 55%, #fff),
                   0 14px 28px -10px rgba(15,23,42,.42);
    }
    .dx-cat__hero-expand:active{ transform:translateY(0); }
    .dx-cat__hero-expand svg{ width:14px; height:14px; transition:transform .3s ease; }
    .dx-cat__hero-expand.is-open svg{ transform:rotate(180deg); }
}
@keyframes dxHeroLeadIn{ from{ opacity:.0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
    .dx-cat__hero.is-mobile-collapsed .dx-cat__lead{ transition:none; filter:none; }
    .dx-cat__hero:not(.is-mobile-collapsed) .dx-cat__lead{ animation:none; }
    .dx-cat__hero-expand svg{ transition:none; }
}
/* Global horizontal-overflow guard — works around sub-elements that briefly
   exceed viewport during transforms/animations on iOS Safari + Android Chrome. */
html, body{ overflow-x:clip; max-width:100%; }
.dx-cat__pricetable{ max-width:100%; position:relative; z-index:20; }

.dx-cat__accept-mark[data-sym="Fe"],.dx-cat__related-mark[data-sym="Fe"]{background:#71797E;color:#fff;}
.dx-cat__accept-mark[data-sym="Cu"],.dx-cat__related-mark[data-sym="Cu"]{background:#b87333;color:#fff;}
.dx-cat__accept-mark[data-sym="Cu·Zn"],.dx-cat__related-mark[data-sym="Cu·Zn"]{background:#b5a642;color:#0c1e4d;font-size:11px;}
.dx-cat__accept-mark[data-sym="Cu·Sn"],.dx-cat__related-mark[data-sym="Cu·Sn"]{background:#cd7f32;color:#fff;font-size:11px;}
.dx-cat__accept-mark[data-sym="Al"],.dx-cat__related-mark[data-sym="Al"]{background:#d6d9dc;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Ni"],.dx-cat__related-mark[data-sym="Ni"]{background:#b4b4b4;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Pb"],.dx-cat__related-mark[data-sym="Pb"]{background:#4d5359;color:#fff;}
.dx-cat__accept-mark[data-sym="Pb+"],.dx-cat__related-mark[data-sym="Pb+"]{background:#3a3f47;color:#FFD500;font-size:11px;}
.dx-cat__accept-mark[data-sym="Zn"],.dx-cat__related-mark[data-sym="Zn"]{background:#b7c7cb;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Sn"],.dx-cat__related-mark[data-sym="Sn"]{background:#d5d5d5;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Sb"],.dx-cat__related-mark[data-sym="Sb"]{background:#9fa0a8;color:#fff;}
.dx-cat__accept-mark[data-sym="Bi"],.dx-cat__related-mark[data-sym="Bi"]{background:#c7b0ac;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Mo"],.dx-cat__related-mark[data-sym="Mo"]{background:#a0a8b0;color:#fff;}
.dx-cat__accept-mark[data-sym="Ag"],.dx-cat__related-mark[data-sym="Ag"]{background:#c0c0c0;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Au"],.dx-cat__related-mark[data-sym="Au"]{background:#d4af37;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Cr"],.dx-cat__related-mark[data-sym="Cr"]{background:#bfc2c5;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="Ti"],.dx-cat__related-mark[data-sym="Ti"]{background:#878681;color:#fff;}
.dx-cat__accept-mark[data-sym="Mg"],.dx-cat__related-mark[data-sym="Mg"]{background:#cfd2d6;color:#0c1e4d;}
.dx-cat__accept-mark[data-sym="W"],.dx-cat__related-mark[data-sym="W"]{background:#5a6064;color:#fff;}
.dx-cat__accept-mark[data-sym="Co"],.dx-cat__related-mark[data-sym="Co"]{background:#5379a0;color:#fff;}
.dx-cat__accept-mark[data-sym="Cd"],.dx-cat__related-mark[data-sym="Cd"]{background:#a3a3a8;color:#fff;}

.dx-vyvoz__truck{
    margin:18px 0 24px;
    background:linear-gradient(135deg,#fff7d1 0%,#fbe994 100%);
    border-radius:22px;
    padding:28px 24px;
    box-shadow:0 14px 38px -18px rgba(15,23,42,.18), inset 0 0 0 1px rgba(255,213,0,.45);
    position:relative;
    overflow:hidden;
}
.dx-vyvoz__truck::before{
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:42px;
    background:repeating-linear-gradient(90deg, rgba(255,213,0,.55) 0 26px, transparent 26px 52px);
    opacity:.4;
    pointer-events:none;
}
.dx-vyvoz__truck-art{
    max-width:540px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.dx-vyvoz__truck-art svg{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 10px 18px rgba(15,23,42,.25));
}
@media (max-width:640px){
    .dx-vyvoz__truck{padding:18px 14px;border-radius:18px;}
    .dx-vyvoz__truck-art{max-width:380px;}
}

.dx-mobnav__lico{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#e0eaff;
    color:#0057B7;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
    letter-spacing:.02em;
    margin-right:12px;
    transition:background .2s ease, color .2s ease;
}
.dx-mobnav__item.is-active .dx-mobnav__lico,
.dx-mobnav__item.has-menu.is-open .dx-mobnav__lico{
    background:#0057B7;
    color:#fff;
}
.dx-mobnav__link{align-items:center;}
.dx-mobnav__link .dx-nav-ico{display:none;}

.dx-cat__h1-row,
.dx-cat__h2-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.dx-cat__h1-row .dx-cat__h1,
.dx-cat__h2-row .dx-cat__h2{flex:1 1 auto; min-width:0; margin:0;}
.dx-cat__dl-prajs{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:#0057B7;
    color:#fff;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    box-shadow:0 6px 16px -6px rgba(0,87,183,.5);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
    flex:0 0 auto;
    margin-top:6px;
    white-space:nowrap;
}
.dx-cat__dl-prajs svg{width:16px; height:16px; flex:0 0 auto;}
.dx-cat__dl-prajs:hover{
    background:#003a82;
    transform:translateY(-1px);
    box-shadow:0 10px 20px -6px rgba(0,87,183,.6);
}
@media(max-width:560px){
    .dx-cat__dl-prajs{width:100%; justify-content:center;}
}

.dx-cat__h1{
    font-size:clamp(32px, 4.6vw, 56px);
    line-height:1.05;
    margin:0;
    color:#0f172a;
    font-weight:700;
    letter-spacing:-.02em;
}
.dx-cat__lead{
    font-size:clamp(16px, 1.4vw, 19px);
    line-height:1.55;
    color:#334155;
    margin:0;
    max-width:54ch;
}
.dx-cat__hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:8px;
    align-items:center;
}
@media (max-width:640px){
    .dx-cat__hero-cta{
        flex-direction:column;
        align-items:stretch;
        gap:18px;
    }
    .dx-cat__hero-cta > .dx-cat__btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }
    .dx-cat__msgrs{
        justify-content:center;
        width:100%;
        padding:8px 0 12px;
    }
}

.dx-cat__btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:12px;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    white-space:nowrap;
}
.dx-cat__btn svg{width:18px; height:18px;}
.dx-cat__btn--primary{
    background:var(--cat);
    color:#fff;
    box-shadow:0 10px 20px -10px color-mix(in srgb, var(--cat) 70%, transparent);
}
.dx-cat__btn--primary:hover{transform:translateY(-1px); box-shadow:0 14px 24px -10px color-mix(in srgb, var(--cat) 80%, transparent);}
.dx-cat__btn--ghost{
    background:rgba(255,255,255,.85);
    color:#0f172a;
    border:1px solid #e2e8f0;
}
.dx-cat__btn--ghost:hover{background:#fff; transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(15,23,42,.18);}
.dx-cat__btn--whatsapp{
    background:#25d366;
    color:#fff;
    box-shadow:0 10px 20px -10px rgba(37,211,102,.7);
}
.dx-cat__btn--whatsapp:hover{transform:translateY(-1px); background:#22c55e;}

/* Hero messenger trio — round 48px icon buttons next to the blue phone button */
.dx-cat__msgrs{
    display:inline-flex;
    gap:10px;
    align-items:center;
}
.dx-cat__msgr{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.dx-cat__msgr svg{width:22px; height:22px; display:block;}
.dx-cat__msgr:hover{transform:translateY(-2px) scale(1.05); filter:saturate(1.1);}
.dx-cat__msgr--whatsapp{background:#25D366; box-shadow:0 10px 20px -10px rgba(37,211,102,.7);}
.dx-cat__msgr--whatsapp:hover{box-shadow:0 14px 26px -10px rgba(37,211,102,.85);}
.dx-cat__msgr--telegram{background:#2AABEE; box-shadow:0 10px 20px -10px rgba(42,171,238,.7);}
.dx-cat__msgr--telegram:hover{box-shadow:0 14px 26px -10px rgba(42,171,238,.85);}
.dx-cat__msgr--viber   {background:#7360F2; box-shadow:0 10px 20px -10px rgba(115,96,242,.7);}
.dx-cat__msgr--viber:hover{box-shadow:0 14px 26px -10px rgba(115,96,242,.85);}

/* Hero side card with today's prices */
.dx-cat__hero-card{
    position:relative;
    z-index:1;
    background:#ffffff;
    border-radius:20px;
    padding:22px;
    box-shadow:0 18px 40px -20px rgba(15,23,42,.22), inset 0 0 0 1px rgba(15,23,42,.04);
    display:flex;
    flex-direction:column;
    gap:16px;
}
@media (max-width:900px){
    .dx-cat__hero-card{ display:none !important; }
}
.dx-cat__hero-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.dx-cat__hero-card-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(0,87,183,.12);
    background:color-mix(in srgb, var(--cat) 12%, transparent);
    color:var(--cat);
    font-weight:600;
    font-size:12px;
    padding:6px 12px;
    border-radius:999px;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dx-cat__hero-card-pill::before{
    content:"";
    width:8px; height:8px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 8px rgba(16,185,129,.65), 0 0 0 2px rgba(16,185,129,.18);
    animation:dx-status-blink 1.4s ease-in-out infinite;
    flex:0 0 8px;
}
@media (prefers-reduced-motion:reduce){
    .dx-cat__hero-card-pill::before{ animation:none; }
}
/* «Цены сегодня» — заметная пилюля с shimmer-градиентом + лёгкая scale-пульсация */
.dx-cat__hero-card-pill--shimmer{
    background:linear-gradient(135deg, rgba(0,87,183,.18) 0%, rgba(255,213,0,.30) 100%);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--cat) 18%, transparent) 0%,
        color-mix(in srgb, #FFD500 30%, transparent) 100%);
    box-shadow:0 4px 14px -6px rgba(0,87,183,.5), inset 0 0 0 1px rgba(0,87,183,.22);
    box-shadow:0 4px 14px -6px color-mix(in srgb, var(--cat) 50%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cat) 22%, transparent);
    padding:7px 14px;
    font-size:12.5px;
    animation:dx-pill-pulse 2.6s ease-in-out infinite;
}
.dx-cat__hero-card-pill-text{
    position:relative;
    background:linear-gradient(90deg, var(--cat) 0%, var(--cat) 38%, #f59e0b 50%, var(--cat) 62%, var(--cat) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:dx-pill-shimmer 3.4s linear infinite;
    font-weight:700;
}
@keyframes dx-pill-shimmer{
    0%   { background-position:200% 50%; }
    100% { background-position:-20% 50%; }
}
@keyframes dx-pill-pulse{
    0%,100% { transform:translateY(0); box-shadow:0 4px 14px -6px color-mix(in srgb, var(--cat) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cat) 22%, transparent); }
    50%     { transform:translateY(-1px); box-shadow:0 8px 22px -8px color-mix(in srgb, var(--cat) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cat) 35%, transparent); }
}
@media (prefers-reduced-motion:reduce){
    .dx-cat__hero-card-pill--shimmer{ animation:none; }
    .dx-cat__hero-card-pill-text{ animation:none; background:none; color:var(--cat); -webkit-text-fill-color:var(--cat); }
}
.dx-cat__hero-card-date{
    font-size:13px;
    color:#0f172a;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    padding:5px 12px;
    background:linear-gradient(135deg, #e3ebf5 0%, #f7f0d2 100%);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--cat) 10%, #f1f5f9) 0%,
        color-mix(in srgb, #FFD500 18%, #f1f5f9) 100%);
    background-size:200% 100%;
    border-radius:999px;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent);
    letter-spacing:.01em;
    animation:dx-date-sweep 4.2s ease-in-out infinite;
}
@keyframes dx-date-sweep{
    0%, 100% { background-position:0% 50%; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent); }
    50%      { background-position:100% 50%; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat) 35%, transparent); }
}
@media (prefers-reduced-motion:reduce){
    .dx-cat__hero-card-date{ animation:none; }
}
.dx-cat__highlights{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.dx-cat__highlight{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:12px 14px;
    background:#f8fafc;
    border-radius:12px;
    border:1px solid #eef2f7;
    transition:background-color .18s ease, transform .18s ease;
}
.dx-cat__highlight:hover{background:#f1f5f9; transform:translateX(2px);}
.dx-cat__highlight-name{font-size:14px; color:#334155; font-weight:500;}
.dx-cat__highlight-price{font-variant-numeric:tabular-nums; white-space:nowrap;}
.dx-cat__highlight-price strong{font-size:16px; color:var(--cat); font-weight:700; margin-right:4px;}
.dx-cat__highlight-unit{font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.04em;}
.dx-cat__hero-card-foot{
    margin:0;
    font-size:12px;
    color:#64748b;
    line-height:1.5;
    padding-top:10px;
    border-top:1px dashed #e2e8f0;
}

/* ─── SECTIONS ─── */
.dx-cat__section{margin:64px 0;}
.dx-cat__h2{
    font-size:clamp(22px, 2.4vw, 30px);
    line-height:1.2;
    margin:0 0 28px;
    color:#0f172a;
    font-weight:700;
    letter-spacing:-.01em;
    position:relative;
    padding-left:18px;
}
.dx-cat__h2::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:24px;
    background:var(--cat);
    border-radius:3px;
}

/* ─── ACCEPT (subtypes) grid ─── */
.dx-cat__accept{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:18px;
}
.dx-cat__accept-card{
    display:flex;
    gap:16px;
    padding:22px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.dx-cat__accept-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px -12px rgba(15,23,42,.18), inset 0 0 0 1px color-mix(in srgb, var(--cat) 20%, transparent);
}
.dx-cat__accept-mark{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(0,87,183,.12);
    background:color-mix(in srgb, var(--cat) 12%, transparent);
    color:var(--cat);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
}
.dx-cat__accept-body{display:flex; flex-direction:column; gap:6px;}
.dx-cat__accept-name{margin:0; font-size:16px; font-weight:600; color:#0f172a;}
.dx-cat__accept-desc{margin:0; font-size:14px; line-height:1.55; color:#475569;}

/* ─── PRICE TABLE ─── */
.dx-cat__pricetable{
    background:#fff;
    border-radius:18px;
    padding:8px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    overflow-x:auto;
    position:relative;
    /* Edge-fade indicators on mobile: shows that table scrolls horizontally. */
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
        radial-gradient(farthest-side at 0 50%, rgba(0,87,183,.18), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,87,183,.18), rgba(0,0,0,0));
    background-color:#fff;
    background-repeat:no-repeat;
    background-attachment:local, local, scroll, scroll;
    background-position:left center, right center, left center, right center;
    background-size:30px 100%, 30px 100%, 12px 100%, 12px 100%;
}
/* Mobile swipe hint — анимированные стрелки + лейбл «Свайп / скролл».
   Показываем только если JS пометил таблицу как `--scrollable`. Прячем,
   когда юзер сам прокрутил таблицу (класс .is-hidden). */
.dx-cat__pt-hint{
    display:inline-flex;
    margin:0 auto 12px;
    width:fit-content;
    align-items:center;
    gap:10px;
    padding:8px 16px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.04em;
    color:#0f172a;
    background:linear-gradient(135deg, #e6effa 0%, #fff8d6 100%);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--cat, #0057B7) 10%, #fff) 0%,
        color-mix(in srgb, #FFD500 18%, #fff) 100%);
    border-radius:999px;
    box-shadow:0 4px 12px -4px color-mix(in srgb, var(--cat, #0057B7) 30%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cat, #0057B7) 18%, transparent);
    text-transform:uppercase;
    transition:opacity .35s ease, transform .35s ease;
}
/* JS вставляет .dx-cat__pt-hint только если таблица скроллится — отдельный селектор уже не нужен.
   Чтобы блок занял всю строку (по центру), оборачиваем его в визуальный flex-row через display:flex родителя. */
.dx-cat__pricetable--scrollable{ /* placeholder — actual rules above */ }
.dx-cat__pt-hint + .dx-cat__pricetable{ margin-top:0; }
.dx-cat__pt-hint-arr{
    width:18px; height:18px;
    color:var(--cat, #0057B7);
    flex:0 0 18px;
}
.dx-cat__pt-hint-arr--l{ animation:dx-arr-left  1.6s ease-in-out infinite; }
.dx-cat__pt-hint-arr--r{ animation:dx-arr-right 1.6s ease-in-out infinite; }
@keyframes dx-arr-left {
    0%,100% { transform:translateX(0);   opacity:.55; }
    50%     { transform:translateX(-5px); opacity:1;  }
}
@keyframes dx-arr-right{
    0%,100% { transform:translateX(0);   opacity:.55; }
    50%     { transform:translateX(5px); opacity:1;  }
}
@media (prefers-reduced-motion:reduce){
    .dx-cat__pt-hint-arr--l, .dx-cat__pt-hint-arr--r{ animation:none; }
}
/* НЕ ставим scroll-behavior:smooth на таблицу — иначе CSS smooth-scroll конкурирует
   с JS requestAnimationFrame, итог — рывок вместо плавной анимации. JS сам управляет. */
.dx-cat__pricetable{ scroll-behavior:auto; }

/* Стрелки в hint кликабельные — таб клик/тап двигает таблицу в направлении стрелки. */
.dx-cat__pt-hint-arr{ cursor:pointer; transition:transform .15s ease; }
.dx-cat__pt-hint-arr:active{ transform:scale(.9); }
.dx-cat__pt-hint-arr--l:hover, .dx-cat__pt-hint-arr--r:hover{ filter:brightness(1.2); }
.dx-cat__pricetable table{
    width:100%;
    border-collapse:collapse;
    font-variant-numeric:tabular-nums;
}
.dx-cat__pt-row td:first-child{font-weight:700;color:#0f172a;}
.dx-cat__pt-row td{font-size:15.5px;}
.dx-cat__pt-row td strong{font-size:16.5px;font-weight:800;color:#0a1428;}
.dx-cat__pricetable th,
.dx-cat__pricetable td{
    padding:14px 18px;
    text-align:left;
    font-size:14px;
}
.dx-cat__pricetable thead th{
    background:color-mix(in srgb, var(--cat) 6%, transparent);
    color:var(--cat);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:700;
    border-bottom:2px solid color-mix(in srgb, var(--cat) 14%, transparent);
}
.dx-cat__pricetable tbody tr{border-bottom:1px solid #f1f5f9;}
.dx-cat__pricetable tbody tr:last-child{border-bottom:0;}
.dx-cat__pricetable tbody tr:hover{background:#fafbfd;}
.dx-cat__pricetable td strong{color:#0f172a; font-weight:700;}
.dx-cat__pricetable tbody tr.is-collapsed-row{display:none;}
.dx-cat__pt-expand{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:14px auto 0;
    padding:11px 22px;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.02em;
    color:#0057B7;
    background:linear-gradient(135deg, #fff 0%, #fffae0 100%);
    background:linear-gradient(135deg, #fff 0%, color-mix(in srgb, #FFD500 12%, #fff) 100%);
    border:0;
    border-radius:999px;
    box-shadow:0 4px 14px -6px rgba(0,87,183,.35), inset 0 0 0 1.5px color-mix(in srgb, #0057B7 24%, transparent);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease;
}
.dx-cat__pt-expand:hover{transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(0,87,183,.5), inset 0 0 0 1.5px color-mix(in srgb, #0057B7 38%, transparent);}
.dx-cat__pt-expand:active{transform:translateY(0); }
.dx-cat__pt-expand svg{width:14px; height:14px; transition:transform .25s ease;}
.dx-cat__pt-expand[aria-expanded="true"] svg{transform:rotate(180deg);}
.dx-cat__pt-expand-wrap{display:flex; justify-content:center;}
.dx-pt__row.is-collapsed-row{display:none;}
.dx-pt__expand-wrap{display:flex; justify-content:center; margin-top:6px;}
.dx-pt__expand{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px;
    font-size:13.5px; font-weight:600; letter-spacing:.02em;
    color:#0057B7;
    background:linear-gradient(135deg, #fff 0%, #fffae0 100%);
    background:linear-gradient(135deg, #fff 0%, color-mix(in srgb, #FFD500 12%, #fff) 100%);
    border:0; border-radius:999px;
    box-shadow:0 4px 14px -6px rgba(0,87,183,.35), inset 0 0 0 1.5px rgba(0,87,183,.24);
    box-shadow:0 4px 14px -6px rgba(0,87,183,.35), inset 0 0 0 1.5px color-mix(in srgb, #0057B7 24%, transparent);
    cursor:pointer; transition:transform .15s ease, box-shadow .2s ease;
}
.dx-pt__expand:hover{transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(0,87,183,.5), inset 0 0 0 1.5px color-mix(in srgb, #0057B7 38%, transparent);}
.dx-pt__expand:active{transform:translateY(0);}
.dx-pt__expand svg{width:14px; height:14px; transition:transform .25s ease;}
.dx-pt__expand[aria-expanded="true"] svg{transform:rotate(180deg);}
.dx-cat__num{text-align:right!important; font-variant-numeric:tabular-nums;}


/* Per-row live "биржа" ticker column */
.dx-cat__chart-col{width:140px; text-align:center!important;}
.dx-cat__chart-cell{padding:8px 12px!important; vertical-align:middle; text-align:right;}
@media (max-width:640px){
    .dx-cat__chart-col,
    .dx-cat__chart-cell,
    .dx-cat__exchange-col{display:none !important;}
    .dx-cat__pricetable{ overflow-x:hidden; padding:6px; background-image:none; }
    .dx-cat__pricetable th,
    .dx-cat__pricetable td{ padding:12px 8px; font-size:14.5px; }
    .dx-cat__pricetable thead th{ font-size:12px; letter-spacing:.04em; }
    .dx-cat__pricetable td strong{ font-size:15.5px; }
    .dx-cat__pricetable td:first-child,
    .dx-cat__pricetable th:first-child{ padding-left:12px; }
    .dx-cat__pricetable td:last-child,
    .dx-cat__pricetable th:last-child{ padding-right:12px; }
    .dx-cat__pt-hint{ display:none !important; }
}
@media (max-width:380px){
    .dx-cat__pricetable th,
    .dx-cat__pricetable td{ padding:10px 6px; font-size:13.5px; }
    .dx-cat__pricetable thead th{ font-size:11px; }
    .dx-cat__pricetable td strong{ font-size:14.5px; }
}
.dx-tick{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    min-width:90px;
    padding:6px 10px;
    border-radius:8px;
    background:#f8fafc;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
    font-variant-numeric:tabular-nums;
    transition:background .4s ease, box-shadow .4s ease;
}
.dx-tick__price{
    font-size:14px;
    font-weight:700;
    color:#0f172a;
    transition:color .3s ease;
}
.dx-tick__delta{
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1;
}
.dx-tick__delta--up      {color:#16a34a;}
.dx-tick__delta--down    {color:#dc2626;}
.dx-tick__delta--neutral {color:#94a3b8;}
.dx-tick__delta--up::before   {content:'▲ ';}
.dx-tick__delta--down::before {content:'▼ ';}
.dx-tick__delta--neutral::before{content:'— ';}
.dx-tick--flash.dx-tick--up   {background:#ecfdf5; box-shadow:inset 0 0 0 1px #86efac;}
.dx-tick--flash.dx-tick--down {background:#fef2f2; box-shadow:inset 0 0 0 1px #fca5a5;}

/* ─── PROKAT product cards with images (used on /metalloprokat) ─── */
.dx-prokat-cards{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:18px;
}
.dx-prokat-cards > li{display:block;}
.dx-prokat-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
}
a.dx-prokat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px -12px rgba(0,87,183,.28), inset 0 0 0 1px rgba(0,87,183,.18);
}
.dx-prokat-card__media{
    display:block;
    aspect-ratio:5/3;
    background:linear-gradient(180deg, #f5f8fb 0%, #e8edf3 100%);
    overflow:hidden;
}
.dx-prokat-card__media img,
.dx-prokat-card__media picture{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
a.dx-prokat-card:hover .dx-prokat-card__media img{transform:scale(1.05);}
.dx-prokat-card__body{
    padding:16px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.dx-prokat-card__name{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#0f172a;
    line-height:1.25;
}
.dx-prokat-card__desc{
    margin:0;
    font-size:14px;
    color:#475569;
    line-height:1.5;
}
.dx-prokat-card__more{
    margin-top:auto;
    padding-top:8px;
    font-size:13px;
    font-weight:700;
    color:#0057B7;
    letter-spacing:.02em;
}

/* ─── MEMO (Памятка отправителя, /dev/pochta) ─── */
.dx-cat__memo-intro{
    font-size:17px;
    line-height:1.6;
    color:#334155;
    max-width:880px;
    margin:0 0 24px;
}
.dx-cat__memo-intro strong{color:#0f172a;}
.dx-cat__memo-intro em{color:#0057B7; font-style:normal; font-weight:600;}
.dx-cat__memo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:18px;
}
.dx-cat__memo-card{
    background:#fff;
    border-radius:16px;
    padding:22px 24px 20px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.06);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.dx-cat__memo-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#0f172a;
    line-height:1.3;
}
.dx-cat__memo-step{
    flex:0 0 32px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:linear-gradient(135deg, #0057B7 0%, #003d80 100%);
    color:#fff;
    font-size:14px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    letter-spacing:0;
}
.dx-cat__memo-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.dx-cat__memo-list li{
    position:relative;
    padding-left:18px;
    font-size:14.5px;
    line-height:1.55;
    color:#334155;
}
.dx-cat__memo-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:9px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#FFD500;
    box-shadow:0 0 0 2px color-mix(in srgb, #FFD500 35%, transparent);
}
.dx-cat__memo-list strong{color:#0f172a;}

/* ─── PROCESS steps ─── */
.dx-cat__process{
    list-style:none;
    margin:0;
    padding:0;
    counter-reset:dxstep;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}
.dx-cat__step{
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
}
.dx-cat__step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:var(--cat);
    color:#fff;
    font-weight:700;
    font-size:18px;
    line-height:1;
    box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cat) 60%, transparent);
}
.dx-cat__step-title{margin:0; font-size:16px; font-weight:600; color:#0f172a;}
.dx-cat__step-desc{margin:0; font-size:14px; line-height:1.55; color:#475569;}

/* ─── FAQ accordion ─── */
.dx-cat__faq{display:flex; flex-direction:column; gap:10px;}
.dx-cat__faq-item{
    background:#fff;
    border-radius:14px;
    padding:0;
    box-shadow:0 2px 8px -4px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.04);
    overflow:hidden;
    transition:box-shadow .18s ease;
}
.dx-cat__faq-item[open]{box-shadow:0 8px 24px -10px rgba(15,23,42,.16), inset 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent);}
.dx-cat__faq-item summary{
    cursor:pointer;
    padding:18px 22px;
    font-weight:600;
    font-size:15px;
    color:#0f172a;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.dx-cat__faq-item summary::-webkit-details-marker{display:none;}
.dx-cat__faq-item summary::after{
    content:'+';
    font-size:22px;
    font-weight:300;
    color:var(--cat);
    transition:transform .2s ease;
    line-height:1;
    flex:0 0 auto;
}
.dx-cat__faq-item[open] summary::after{transform:rotate(45deg);}
.dx-cat__faq-item p{
    margin:0;
    padding:0 22px 20px;
    font-size:14px;
    line-height:1.6;
    color:#475569;
}

/* ─── CTA ─── */
.dx-cat__cta{
    margin:80px 0 0;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:32px;
    padding:40px 44px;
    background:linear-gradient(135deg, var(--cat) 0%, #00468f 100%);
    border-radius:24px;
    color:#fff;
    box-shadow:0 28px 60px -28px color-mix(in srgb, var(--cat) 60%, transparent);
    position:relative;
    overflow:hidden;
}
.dx-cat__cta::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 90% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events:none;
}
.dx-cat__cta-text{position:relative; z-index:1;}
.dx-cat__cta-title{margin:0 0 8px; font-size:clamp(22px, 2.4vw, 28px); font-weight:700; line-height:1.2;}
.dx-cat__cta-lead{margin:0; font-size:15px; opacity:.92; line-height:1.55;}
.dx-cat__cta-buttons{position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap;}
.dx-cat__cta-buttons .dx-cat__btn--primary{background:#fff; color:var(--cat); box-shadow:0 10px 20px -10px rgba(0,0,0,.3);}
.dx-cat__cta-buttons .dx-cat__btn--primary:hover{background:#f8fafc;}

/* ─── RELATED ─── */
.dx-cat__related{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
}
.dx-cat__related-card{
    --cat:#0057B7;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    min-height:64px;
    background:#fff;
    border-radius:14px;
    text-decoration:none;
    color:#0f172a;
    box-shadow:0 2px 8px -4px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dx-cat__related-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -10px rgba(15,23,42,.18), inset 0 0 0 1px color-mix(in srgb, var(--cat) 25%, transparent);
}
.dx-cat__related-mark{
    flex:0 0 52px;
    width:52px;
    height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--cat) 18%, transparent), color-mix(in srgb, #FFD500 14%, transparent));
    color:var(--cat);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
    line-height:1;
    box-shadow:0 4px 12px -4px color-mix(in srgb, var(--cat) 30%, transparent);
    animation:dx-related-float 3.2s ease-in-out infinite;
    will-change:transform;
}
.dx-cat__related-card:nth-child(2n) .dx-cat__related-mark{animation-delay:.4s;}
.dx-cat__related-card:nth-child(3n) .dx-cat__related-mark{animation-delay:.8s;}
.dx-cat__related-card:nth-child(4n) .dx-cat__related-mark{animation-delay:1.2s;}
.dx-cat__related-mark svg{width:28px; height:28px;}
.dx-cat__related-card:hover .dx-cat__related-mark{animation-play-state:paused; transform:scale(1.08) rotate(-4deg);}
@keyframes dx-related-float{
    0%,100% { transform:translateY(0)   rotate(0deg);   box-shadow:0 4px 12px -4px color-mix(in srgb, var(--cat) 30%, transparent); }
    50%     { transform:translateY(-3px) rotate(-3deg); box-shadow:0 10px 20px -6px color-mix(in srgb, var(--cat) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce){
    .dx-cat__related-mark{animation:none;}
}
.dx-cat__related-name{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    color:#0f172a;
    overflow-wrap:break-word;
    word-break:normal;
    text-transform:uppercase;
    letter-spacing:.02em;
}

/* ─── INDEX PAGE ─── */
.dx-cat--index .dx-cat__index-head{margin-bottom:48px; max-width:720px;}
.dx-cat__index-grid{
    list-style:none;
    margin:0 0 56px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
}
.dx-cat__index-grid--top{grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));}

/* Unified grid (one section with ferr + non-ferr categories mixed) — tops span 2 cols on wide screens */
.dx-cat__index-grid--unified{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
@media (min-width:760px){
    .dx-cat__index-grid--unified .dx-cat__index-li--top{grid-column:span 2;}
}
.dx-cat__index-card{
    --cat:#0057B7;
    --cat-soft:#FFD500;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
    padding:20px 22px;
    background:#fff;
    border-radius:18px;
    text-decoration:none;
    color:#0f172a;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
    position:relative;
    overflow:hidden;
}
.dx-cat__index-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, color-mix(in srgb, var(--cat) 6%, transparent) 0%, transparent 60%);
    pointer-events:none;
    opacity:0;
    transition:opacity .22s ease;
}
.dx-cat__index-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px -14px rgba(15,23,42,.2), inset 0 0 0 1px color-mix(in srgb, var(--cat) 24%, transparent);
}
.dx-cat__index-card:hover::before{opacity:1;}
.dx-cat__index-card--top{padding:26px 28px;}
.dx-cat__index-card--top .dx-cat__index-mark{width:54px; height:54px; font-size:18px; border-radius:14px;}
.dx-cat__index-mark{
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--cat);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
    position:relative;
    z-index:1;
    box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cat) 60%, transparent);
}
.dx-cat__index-body{display:flex; flex-direction:column; gap:4px; min-width:0; position:relative; z-index:1;}
.dx-cat__index-name{font-size:16px; font-weight:600; color:#0f172a;}
.dx-cat__index-short{font-size:13px; color:#64748b; line-height:1.4;}
.dx-cat__index-arrow{
    flex:0 0 auto;
    color:var(--cat);
    font-size:20px;
    transition:transform .22s ease;
    position:relative;
    z-index:1;
}
.dx-cat__index-card:hover .dx-cat__index-arrow{transform:translateX(4px);}

/* ─── SEO body (legacy long-form article pulled in at the bottom) ─── */
.dx-cat__seo-body{
    background:#fff;
    border-radius:18px;
    padding:40px 44px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    font-size:16px;
    line-height:1.75;
    color:#334155;
    column-rule:1px solid #f1f5f9;
    position:relative;
}
.dx-cat__seo-body > p:first-of-type::first-letter{
    font-size:inherit;
    font-weight:inherit;
    float:none;
    color:inherit;
    padding:0;
}
@media (max-width:640px){
    .dx-cat__seo-body.is-collapsible{
        position:relative;
        max-height:280px;
        overflow:hidden;
        transition:max-height .55s cubic-bezier(.22,.61,.36,1);
    }
    .dx-cat__seo-body.is-collapsible::after{
        content:'';
        position:absolute; left:0; right:0; bottom:0;
        height:80px;
        background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
        pointer-events:none;
        transition:opacity .35s ease;
    }
    .dx-cat__seo-body.is-collapsible.is-expanded{ max-height:6000px; }
    .dx-cat__seo-body.is-collapsible.is-expanded::after{ opacity:0; }
}
.dx-cat__seo-toggle{
    display:none;
    margin:14px auto 0;
    align-items:center; gap:8px;
    padding:11px 22px;
    font-size:13.5px; font-weight:600;
    color:#0057B7;
    background:linear-gradient(135deg,#fff 0%, #fffae0 100%);
    background:linear-gradient(135deg,#fff 0%, color-mix(in srgb, #FFD500 12%, #fff) 100%);
    border:0; border-radius:999px;
    box-shadow:0 4px 14px -6px rgba(0,87,183,.35), inset 0 0 0 1.5px rgba(0,87,183,.24);
    box-shadow:0 4px 14px -6px rgba(0,87,183,.35), inset 0 0 0 1.5px color-mix(in srgb, #0057B7 24%, transparent);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease;
}
.dx-cat__seo-toggle:hover{transform:translateY(-1px);}
.dx-cat__seo-toggle svg{width:14px; height:14px; transition:transform .3s ease;}
.dx-cat__seo-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.dx-cat__seo-toggle-wrap{display:flex; justify-content:center;}
@media (max-width:640px){
    .dx-cat__seo-toggle{display:inline-flex;}
}
/* Paragraphs that begin with a <strong> highlight — стилизуем как «акцентный блок» с жёлтым маркером */
.dx-cat__seo-body p:has(> strong:first-child){
    position:relative;
    background:color-mix(in srgb, var(--cat,#0057B7) 4%, transparent);
    border-left:3px solid var(--cat,#0057B7);
    border-radius:0 10px 10px 0;
    padding:14px 18px 14px 22px;
    margin:1.4em 0;
}
.dx-cat__seo-body p:has(> strong:first-child) > strong:first-child{
    display:block;
    color:#0f172a;
    font-size:17px;
    margin-bottom:4px;
    letter-spacing:-.005em;
}
/* Subtle bottom-separator between non-accent paragraphs to give air. */
.dx-cat__seo-body > p + p:not(:has(> strong:first-child)){
    margin-top:1.1em;
}
/* Decorative quote-mark at top-right corner */
.dx-cat__seo-body::before{
    content:'❝';
    position:absolute;
    top:14px;
    right:22px;
    font-size:64px;
    line-height:1;
    color:color-mix(in srgb, var(--cat,#0057B7) 12%, transparent);
    pointer-events:none;
}
.dx-cat__seo-body::after{content:''; display:block; clear:both;}
/* Float metal illustration on the left of the article; text wraps around it. */
.dx-cat__seo-illus{
    float:left;
    width:240px;
    height:240px;
    margin:0 28px 12px 0;
    padding:0;
    border-radius:14px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--cat) 8%, white) 0%, white 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
    shape-outside:inset(0 round 14px);
    overflow:hidden;
}
.dx-cat__seo-illus svg{width:100%; height:100%;}
@media (max-width:640px){
    .dx-cat__seo-illus{
        float:none;
        width:200px;
        height:200px;
        margin:0 auto 16px;
    }
}
.dx-cat__seo-body > :first-child{margin-top:0;}
.dx-cat__seo-body > :last-child{margin-bottom:0;}
.dx-cat__seo-body p,
.dx-cat__seo-body ul,
.dx-cat__seo-body ol{margin:0 0 1em;}
.dx-cat__seo-body .lead{
    font-size:17px;
    color:#0f172a;
    padding:18px 22px;
    background:color-mix(in srgb, var(--cat) 6%, transparent);
    border-left:3px solid var(--cat);
    border-radius:10px;
    margin-bottom:1.5em;
}
.dx-cat__seo-body h2{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    margin:1.8em 0 .8em;
    letter-spacing:-.01em;
}
.dx-cat__seo-body h3{
    font-size:17px;
    font-weight:600;
    color:#0f172a;
    margin:1.4em 0 .5em;
}
.dx-cat__seo-body ul,
.dx-cat__seo-body ol{padding-left:1.3em;}
.dx-cat__seo-body li{margin:.4em 0;}
.dx-cat__seo-body strong{color:#0f172a; font-weight:600;}
.dx-cat__seo-body a{color:var(--cat); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}
.dx-cat__seo-body a:hover{color:color-mix(in srgb, var(--cat) 80%, #000); text-decoration-thickness:2px;}
.dx-cat__seo-body table{
    width:100%;
    border-collapse:collapse;
    margin:1em 0 1.5em;
    font-size:14px;
}
.dx-cat__seo-body th,
.dx-cat__seo-body td{
    padding:10px 14px;
    text-align:left;
    border-bottom:1px solid #eef2f7;
}
.dx-cat__seo-body th{
    background:color-mix(in srgb, var(--cat) 6%, transparent);
    color:var(--cat);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

@media (max-width:560px){
    .dx-cat__seo-body{padding:24px 20px;}
    .dx-cat__seo-body h2{font-size:19px;}
}

/* ─── Telegram channel price digest (/dev/tseny) ─── */
.dx-cat__tg .dx-cat__h2{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.dx-cat__tg-link{
    font-size:12px; font-weight:600; letter-spacing:.02em;
    color:#2AABEE; background:rgba(42,171,238,.1); padding:4px 10px; border-radius:999px;
    text-decoration:none; text-transform:none;
}
.dx-cat__tg-link:hover{background:rgba(42,171,238,.18);}
.dx-cat__tg-meta{margin:-12px 0 18px; font-size:13px; color:#64748b;}
.dx-cat__tg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:10px;
}
@media (max-width:640px){
    .dx-cat__tg-grid,
    .dx-cat__related,
    .dx-prokat-cards,
    .dx-cat__accept{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:10px;
    }
    .dx-cat__memo-grid{grid-template-columns:1fr !important; gap:14px;}
    .dx-cat__tg-card{padding:10px 12px;}
    .dx-cat__tg-name{font-size:12px;}
    .dx-cat__tg-price strong{font-size:18px;}
    .dx-cat__tg-price small{font-size:10.5px;}
    .dx-prokat-card__media{aspect-ratio:5/4;}
    .dx-prokat-card__body{padding:10px 12px 12px;}
    .dx-prokat-card__name{font-size:14px;}
    .dx-prokat-card__desc{font-size:12.5px;}
    .dx-cat__related-card{padding:12px 14px; min-height:54px; gap:10px;}
    .dx-cat__related-mark{flex:0 0 34px; width:34px; height:34px; font-size:12.5px;}
    .dx-cat__related-name{font-size:13px;}
    .dx-cat__memo-card{padding:14px 14px 12px;}
    .dx-cat__accept-card{padding:14px 14px;}
}
.dx-cat__tg-card{
    background:#fff;
    border-radius:12px;
    padding:12px 14px;
    box-shadow:0 2px 8px -4px rgba(15,23,42,.1), inset 0 0 0 1px rgba(15,23,42,.04);
    border-left:3px solid #2AABEE;
    transition:transform .18s ease, box-shadow .18s ease;
}
.dx-cat__tg-card:hover{transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(15,23,42,.16);}
.dx-cat__tg-name{font-size:13px; color:#0f172a; font-weight:500; margin-bottom:4px;}
.dx-cat__tg-price{font-variant-numeric:tabular-nums;}
.dx-cat__tg-price strong{font-size:16px; color:#0057B7; font-weight:700;}
.dx-cat__tg-price small{font-size:11px; color:#64748b; margin-left:4px; text-transform:uppercase; letter-spacing:.04em;}
.dx-cat__tg-price em{font-size:11px; color:#94a3b8; font-style:normal; margin-left:6px; padding:1px 6px; background:#f1f5f9; border-radius:4px;}
.dx-cat__tg-card.is-hidden{display:none;}

/* TG-прайс — кнопка «Показать ещё N позиций / Свернуть» */
.dx-cat__tg-more{
    appearance:none;
    -webkit-appearance:none;
    margin:18px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:11px 22px 11px 24px;
    background:linear-gradient(135deg, #2AABEE 0%, #1d8dc7 100%);
    color:#fff;
    border:0;
    border-radius:999px;
    font:600 14px/1 inherit;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 6px 18px -6px rgba(42,171,238,.55), inset 0 0 0 1px rgba(255,255,255,.16);
    transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, background .18s ease;
}
.dx-cat__tg-more svg{
    width:14px; height:14px;
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.dx-cat__tg-more:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px -8px rgba(42,171,238,.7), inset 0 0 0 1px rgba(255,255,255,.22);
    background:linear-gradient(135deg, #3bb5f0 0%, #2197d2 100%);
}
.dx-cat__tg-more:active{transform:translateY(0);}
.dx-cat__tg-more:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(42,171,238,.35), 0 6px 18px -6px rgba(42,171,238,.55);
}
.dx-cat__tg-more.is-open svg{transform:rotate(180deg);}
@media (max-width:640px){
    .dx-cat__tg-more{padding:10px 18px; font-size:13.5px;}
}

/* Price preview on /dev/cat index cards */
.dx-cat__index-price{
    display:inline-block;
    margin-top:6px;
    font-size:12px;
    color:#475569;
    font-variant-numeric:tabular-nums;
    padding:3px 8px;
    background:color-mix(in srgb, var(--cat) 8%, transparent);
    border-radius:6px;
    line-height:1.3;
}
.dx-cat__index-price strong{color:var(--cat); font-weight:700;}

/* ─── LME quotes section (/dev/tseny → TradingView mini widgets) ─── */
.dx-cat__quotes-note{
    margin:-8px 0 24px;
    font-size:14px;
    line-height:1.55;
    color:#475569;
    max-width:780px;
}
.dx-cat__quotes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
}
.dx-cat__quote-card{
    background:#fff;
    border-radius:18px;
    padding:16px 18px 6px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.dx-cat__quote-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -14px rgba(15,23,42,.2), inset 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent);
}
.dx-cat__quote-label{
    font-size:13px;
    font-weight:600;
    color:#0f172a;
    letter-spacing:.01em;
    padding:0 4px;
}
.dx-cat__quote-widget{min-height:160px;}
.dx-cat__quote-widget .tradingview-widget-container{height:160px;}

/* ─── STATI cards (article grid for /dev/stati) ─── */
.dx-stati-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:20px;
}
.dx-stati-card{
    --bg:#0057B7;
    --accent:#FFD500;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.04);
    text-decoration:none;
    color:inherit;
    overflow:hidden;
    transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
    height:100%;
}
.dx-stati-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 38px -16px rgba(15,23,42,.25), inset 0 0 0 1px color-mix(in srgb, var(--bg) 24%, transparent);
}
.dx-stati-card__media{
    position:relative;
    aspect-ratio:16/10;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.dx-stati-card__media::before{
    content:'';
    position:absolute;
    inset:-20%;
    background:radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 55%);
    pointer-events:none;
}
.dx-stati-card__media::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:24px 24px;
    pointer-events:none;
}
.dx-stati-card__glyph{
    position:relative;
    z-index:1;
    font-size:64px;
    line-height:1;
    color:var(--accent);
    font-weight:700;
    letter-spacing:-.02em;
    text-shadow:0 4px 16px rgba(0,0,0,.25);
}
.dx-stati-card__shine{
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
    background-size:300% 100%;
    background-position:200% 0;
    transition:background-position .8s ease;
    pointer-events:none;
}
.dx-stati-card:hover .dx-stati-card__shine{background-position:-100% 0;}
.dx-stati-card__body{
    padding:18px 22px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}
.dx-stati-card__title{
    margin:0;
    font-size:16px;
    font-weight:600;
    line-height:1.35;
    color:#0f172a;
}
.dx-stati-card__cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--bg);
    font-size:13px;
    font-weight:600;
    margin-top:auto;
    transition:gap .2s ease;
}
.dx-stati-card:hover .dx-stati-card__cta{gap:10px;}

@media (max-width:560px){
    .dx-stati-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
    .dx-stati-card__body{padding:14px 16px 16px;}
    .dx-stati-card__title{font-size:14px;}
    .dx-stati-card__glyph{font-size:48px;}
}

/* ─── RESPONSIVE ─── */
@media (max-width:900px){
    .dx-cat{padding:16px 16px 80px;}
    .dx-cat__hero{
        grid-template-columns:1fr;
        gap:28px;
        padding:32px 28px;
        border-radius:22px;
    }
    .dx-cat__cta{
        grid-template-columns:1fr;
        text-align:center;
        padding:32px 24px;
    }
    .dx-cat__cta-buttons{justify-content:center;}
    .dx-cat__section{margin:48px 0;}
}
@media (max-width:560px){
    .dx-cat__hero{padding:24px 20px;}
    .dx-cat__hero-card{padding:18px;}
    .dx-cat__btn{width:100%; justify-content:center;}
    .dx-cat__accept{grid-template-columns:1fr !important;}
    .dx-cat__process{grid-template-columns:1fr;}
    .dx-cat__related{grid-template-columns:repeat(2, 1fr);}
    .dx-cat__memo-grid{grid-template-columns:1fr;}
    .dx-cat__memo-card{padding:18px 18px 16px;}
    .dx-cat__memo-intro{font-size:15.5px;}
}

/* ─── Responsive audit fixes (2026-05-21) ─── */
/* Allow related cards to shrink in grid cells on very narrow viewports.
   Without min-width:0 a long chip name (e.g. "швеллер стальной в Харькове")
   forces the card wider than its grid cell on 360px, causing page overflow. */
.dx-cat__related-card{min-width:0;}
.dx-cat__related-name{min-width:0; overflow-wrap:anywhere;}

/* Fallback: collapse Related grid to 1 column at very narrow viewports so
   long chip labels never push the card off-screen. */
@media (max-width:400px){
    .dx-cat__related{grid-template-columns:1fr;}
}

/* Defensive: make sure body never scrolls horizontally on any viewport.
   If decorative pseudo-elements (footer ::before/::after) ever push past
   the viewport, the html-level clip catches it without affecting layout. */
html{overflow-x:clip;}

/* ============================================================
   Desktop in-bar live status (Александр / Максим) — 2026-05-21
   Shown only ≥ 961px. Sits inside the .has-status pill below the title.
   ============================================================ */
.dx-nav-status{
    display:none;                                                  /* hidden by default; desktop MQ enables */
    align-items:center;
    gap:5px;
    margin-left:6px;
    padding:2px 7px 2px 6px;
    font-size:10px;
    font-weight:600;
    text-transform:none;
    letter-spacing:.02em;
    line-height:1;
    color:#0f5132;
    background:rgba(16,185,129,.14);
    border-radius:999px;
    white-space:nowrap;
    transition:color .25s ease, background-color .25s ease;
}
.dx-nav-status__dot{
    width:7px; height:7px; border-radius:50%;
    background:#10b981;
    box-shadow:0 0 6px rgba(16,185,129,.7);
    animation:dx-status-blink 1.4s ease-in-out infinite;
    flex:0 0 7px;
}
.dx-nav-status.is-closed{
    color:#9b1c1c;
    background:rgba(239,68,68,.13);
}
.dx-nav-status.is-closed .dx-nav-status__dot{
    background:#ef4444;
    box-shadow:0 0 6px rgba(239,68,68,.6);
    animation:dx-status-blink-red .95s ease-in-out infinite;
}
/* On the blue active pill, status text needs to stay readable */
.dx-topbar__item.is-active .dx-nav-status{
    color:#ffffff;
    background:rgba(255,255,255,.18);
}
.dx-topbar__item.is-active .dx-nav-status.is-closed{
    background:rgba(255,200,200,.22);
    color:#ffe4e4;
}
@media (min-width:961px){
    .dx-nav-status{ display:inline-flex; }
    /* Slight extra padding on pills carrying the status so it never feels cramped */
    .dx-topbar__item.has-status > .dx-topbar__link{ padding-right:10px; }
}
/* Compact bar widths — hide status text, keep just the colored dot to save space */
@media (min-width:961px) and (max-width:1400px){
    .dx-nav-status__text{ display:none; }
    .dx-nav-status{ padding:3px; margin-left:4px; }
}
@media (prefers-reduced-motion: reduce){
    .dx-nav-status__dot{ animation:none; }
}

/* ============================================================
   Mobile drawer — full off-canvas panel (slides in from the right).
   Replaces the old in-flow .dx-topbar__nav at ≤960px.
   ============================================================ */
.dx-mobnav{
    position:fixed;
    inset:0;
    z-index:1100;
    pointer-events:none;
    visibility:hidden;
    transition:visibility 0s linear .32s;
}
.dx-mobnav__overlay{
    position:absolute;
    inset:0;
    background:rgba(10,20,40,.46);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .3s ease;
}
.dx-mobnav__panel{
    position:absolute;
    top:0; right:0; bottom:0;
    width:min(420px, 88vw);
    background:#ffffff;
    box-shadow:-18px 0 38px -12px rgba(15,23,42,.35);
    transform:translateX(110%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
body.is-menu-open .dx-mobnav{
    pointer-events:auto;
    visibility:visible;
    transition:visibility 0s linear 0s;
}
body.is-menu-open .dx-mobnav__overlay{ opacity:1; }
body.is-menu-open .dx-mobnav__panel{ transform:translateX(0); }
body.is-menu-open{ overflow:hidden; }

.dx-mobnav__head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:#0057B7;
    color:#fff;
    box-shadow:0 4px 14px -8px rgba(0,87,183,.5);
}
.dx-mobnav__brand{
    font-family:"Google Sans Flex","Google Sans",sans-serif;
    font-weight:900;
    font-size:22px;
    letter-spacing:-.01em;
    line-height:1;
}
.dx-mobnav__brand-a{ color:#ffffff; }
.dx-mobnav__brand-b{ color:#FFD500; }
.dx-mobnav__close{
    width:36px; height:36px;
    border:0; padding:0;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background-color .2s ease, transform .2s ease;
}
.dx-mobnav__close:hover,
.dx-mobnav__close:focus-visible{ background:rgba(255,255,255,.28); transform:rotate(90deg); outline:none; }
.dx-mobnav__close svg{ width:18px; height:18px; }

.dx-mobnav__nav{ padding:8px 12px 4px; }
.dx-mobnav__list{ list-style:none; margin:0; padding:0; }
.dx-mobnav__item{
    border-bottom:1px solid #eef1f5;
}
.dx-mobnav__item:last-child{ border-bottom:0; }
.dx-mobnav__row{
    display:flex;
    align-items:center;
    gap:4px;
}
.dx-mobnav__link{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:16px 12px;
    color:#0a1428;
    text-decoration:none;
    font-weight:700;
    font-size:17px;
    letter-spacing:.01em;
    min-height:54px;
    -webkit-tap-highlight-color:transparent;
}
.dx-mobnav__link:active{ background:#f4f6fb; border-radius:8px; }
.dx-mobnav__link .dx-nav-ico{ width:22px; height:22px; flex:0 0 22px; color:#0057B7; }
.dx-mobnav__title{ flex:1 1 auto; }
.dx-mobnav__item.is-active > .dx-mobnav__row .dx-mobnav__link{ color:#0057B7; }
.dx-mobnav__item.is-active > .dx-mobnav__row .dx-mobnav__link .dx-nav-ico{ color:#FFD500; }

.dx-mobnav__status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px; height:14px;
    margin-left:4px;
    flex:0 0 14px;
}
.dx-mobnav__status-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 6px rgba(16,185,129,.6);
    animation:dx-status-blink 1.4s ease-in-out infinite;
}
.dx-mobnav__status.is-closed .dx-mobnav__status-dot{
    background:#ef4444;
    box-shadow:0 0 6px rgba(239,68,68,.55);
    animation:dx-status-blink-red .95s ease-in-out infinite;
}

.dx-mobnav__chev{
    flex:0 0 40px;
    width:40px; height:40px;
    border:0;
    background:#f4f6fb;
    color:#0a1428;
    border-radius:50%;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color .2s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.dx-mobnav__chev:hover{ background:#e5eaf2; }
.dx-mobnav__chev svg{ width:14px; height:14px; }
.dx-mobnav__item.is-open .dx-mobnav__chev{
    background:#FFD500;
    transform:rotate(180deg);
}

.dx-mobnav__sub{
    overflow:hidden;
    animation:dx-mob-acc-in .28s cubic-bezier(.22,.61,.36,1);
}
.dx-mobnav__sub[hidden]{ display:none; }
.dx-mobnav__sub ul{
    list-style:none;
    margin:0;
    padding:6px 10px 14px 14px;
}
.dx-mobnav__sub li{ margin:0; }
.dx-mobnav__sub a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 10px;
    color:#0f172a;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    border-radius:8px;
    transition:background-color .15s ease, color .15s ease;
}
.dx-mobnav__sub a:hover,
.dx-mobnav__sub a:active{ background:#f4f6fb; color:#0057B7; }
.dx-mobnav__sub li.is-active a{ color:#0057B7; font-weight:700; background:#eef3fc; }
.dx-mobnav__elem{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 32px;
    width:32px; height:32px;
    border-radius:8px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
}
.dx-mobnav__sub-title{flex:1;}

@keyframes dx-mob-acc-in{
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Contacts block at the bottom of the drawer */
.dx-mobnav__contacts{
    margin:16px 12px 24px;
    padding:18px 14px 16px;
    background:linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    border:1px solid #e5eaf2;
    border-radius:14px;
}
.dx-mobnav__contacts-title{
    margin:0 0 14px;
    font-family:"Google Sans Flex","Google Sans",sans-serif;
    font-size:16px;
    font-weight:800;
    color:#0a1428;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.dx-mobnav__person{
    padding:14px 0 14px;
    border:0;
    border-radius:0;
    background:transparent;
    margin-bottom:0;
    box-shadow:none;
}
/* First card has no top divider; subsequent cards get a thin separator line so the
   merged contacts panel reads as one block with two sections. */
.dx-mobnav__person + .dx-mobnav__person{
    border-top:1px solid #e5eaf2;
    margin-top:2px;
    padding-top:14px;
}
.dx-mobnav__person:last-child{ padding-bottom:2px; }
.dx-mobnav__person-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}
.dx-mobnav__person-name{
    font-weight:800;
    font-size:13.5px;
    color:#0a1428;
    line-height:1.2;
}
.dx-mobnav__person-role{
    display:block;
    font-weight:500;
    font-size:10.5px;
    color:#64748b;
    text-transform:none;
    letter-spacing:0;
    margin-top:1px;
}
.dx-mobnav__person-status{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 7px;
    font-size:10.5px;
    font-weight:600;
    color:#0f5132;
    background:rgba(16,185,129,.14);
    border-radius:999px;
    white-space:nowrap;
    flex:0 0 auto;
}
.dx-mobnav__person-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 4px rgba(16,185,129,.65);
    animation:dx-status-blink 1.4s ease-in-out infinite;
}
.dx-mobnav__person.is-closed .dx-mobnav__person-status{
    background:rgba(239,68,68,.13);
    color:#9b1c1c;
}
.dx-mobnav__person.is-closed .dx-mobnav__person-dot{
    background:#ef4444;
    box-shadow:0 0 4px rgba(239,68,68,.55);
    animation:dx-status-blink-red .95s ease-in-out infinite;
}
.dx-mobnav__person-hours{
    font-size:11.5px;
    color:#64748b;
    margin-bottom:10px;
    line-height:1.2;
}
.dx-mobnav__phone{
    display:block;
    font-size:16.5px;
    font-weight:800;
    color:#0057B7;
    text-decoration:none;
    margin-bottom:12px;
    letter-spacing:.01em;
}
.dx-mobnav__phone:hover,
.dx-mobnav__phone:active{ color:#003e85; }
.dx-mobnav__msgrs{
    display:flex;
    gap:8px;
}
.dx-mobnav__msgr{
    width:32px; height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
}
.dx-mobnav__msgr svg{ width:15px; height:15px; }
.dx-mobnav__msgr--wa{ background:#25D366; box-shadow:0 6px 14px -6px rgba(37,211,102,.55); }
.dx-mobnav__msgr--tg{ background:#229ED9; box-shadow:0 6px 14px -6px rgba(34,158,217,.55); }
.dx-mobnav__msgr--vb{ background:#7360F2; box-shadow:0 6px 14px -6px rgba(115,96,242,.55); }
.dx-mobnav__msgr:hover,
.dx-mobnav__msgr:active{ transform:translateY(-2px) scale(1.04); }

/* Hide the old in-flow mobile nav and old drop-from-top drawer now that
   we have the off-canvas .dx-mobnav. Keeps desktop intact (≥961px). */
@media (max-width:960px){
    .dx-topbar__nav{ display:none !important; }
    /* The body.is-menu-open used to translate the old nav; overlay class above already handles new drawer. */
    .dx-nav-status{ display:none !important; }                   /* no inline status on mobile bar */
}
@media (min-width:961px){
    .dx-mobnav{ display:none; }
}

/* Reduced motion → swap transforms for instant snaps */
@media (prefers-reduced-motion: reduce){
    .dx-mobnav__panel{ transition:none; }
    .dx-mobnav__overlay{ transition:none; }
    .dx-mobnav__sub{ animation:none; }
    .dx-mobnav__chev{ transition:background-color .2s ease; }
    .dx-mobnav__person-dot,
    .dx-mobnav__status-dot{ animation:none; }
}

/* Very narrow phones: panel goes full-width, head padding tightens */
@media (max-width:640px){
    .dx-mobnav__panel{ width:100vw; }
    .dx-mobnav__head{ padding:12px 14px; }
    .dx-mobnav__contacts{ margin:14px 10px 20px; padding:14px 12px 12px; }
    .dx-mobnav__person{ padding:10px 10px 8px; }
    .dx-mobnav__phone{ font-size:17px; }
}
@media (max-width:380px){
    .dx-mobnav__link{ font-size:15.5px; padding:14px 10px; min-height:48px; }
    .dx-mobnav__chev{ width:36px; height:36px; flex-basis:36px; }
    .dx-mobnav__msgr{ width:40px; height:40px; }
    .dx-mobnav__msgr svg{ width:20px; height:20px; }
}

/* ============================================================
   Price Table (V8 sidebar-sections from /tseny, reusable)
   ============================================================ */
.dx-pt{display:flex;align-items:stretch;gap:22px;margin:24px 0}
/* Одиночная категория: тот же карточный стиль, что у секций раздела «Цены» (.dx-pt__sect) */
.dx-pt--flat{display:block;margin:24px 0;padding:24px 26px;background:linear-gradient(180deg,#fafbfd,#fff);border:1px solid #e5eaf2;border-radius:14px}
.dx-pt--flat .dx-pt__right{flex:none}
.dx-pt__nav-col{flex:0 0 260px;position:relative}
.dx-pt__nav{position:sticky;top:96px;background:linear-gradient(180deg,#fff,#fafbfd);border:1px solid #e5eaf2;border-radius:14px;padding:8px;box-shadow:0 4px 16px -10px rgba(15,23,42,.1);max-height:calc(100vh - 112px);overflow-y:auto;display:block}
.dx-pt__nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;color:#0f172a;text-decoration:none;border-left:3px solid transparent;transition:.18s}
.dx-pt__nav-item:hover{background:#f7f8fb;border-left-color:#dbe1ec}
.dx-pt__nav-item.is-on{background:linear-gradient(135deg,#0057b7,#003e85);color:#fff;border-left-color:#ffd500}
.dx-pt__nav-item.is-on .dx-pt__nav-text small{color:rgba(255,255,255,.7)}
.dx-pt__nav-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;flex:0 0 auto;letter-spacing:.02em}
.dx-pt__nav-text{display:flex;flex-direction:column;min-width:0}
.dx-pt__nav-text strong{font-size:15.5px;font-weight:700;line-height:1.3}
.dx-pt__nav-text small{font-size:12.5px;color:#64748b;margin-top:3px}
.dx-pt__right{flex:1;min-width:0}
.dx-pt__sect{padding:24px 26px;background:linear-gradient(180deg,#fafbfd,#fff);border:1px solid #e5eaf2;border-radius:14px;margin-bottom:14px;scroll-margin-top:80px}
.dx-pt__h2{margin:0 0 18px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:14px;color:#0f172a}
.dx-pt__h2-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;flex:0 0 auto}
.dx-pt__h2-count{margin-left:auto;font-size:13px;color:#5b6b80;font-weight:500;background:#eef1f7;padding:5px 12px;border-radius:999px}
.dx-pt__rows{display:grid;grid-template-columns:1fr;gap:0 28px}
.dx-pt__row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dotted #e5eaf2;font-size:15.5px;position:relative}
.dx-pt__row:not([data-row-id]){grid-template-columns:1fr auto}
.dx-pt__row:hover{background:#f7f8fb}
.dx-pt__nm{color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-pt__pr{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0;white-space:nowrap}
.dx-pt__pr-val{font-variant-numeric:tabular-nums;font-weight:700;color:#0f172a;font-size:16px}
.dx-pt__pr-sep{font-weight:400;color:#64748b;margin:0 2px}
.dx-pt__pr-un{font-size:11.5px;color:#64748b;font-weight:400;text-align:right;width:100%}
.dx-pt__bx{margin-left:auto;white-space:nowrap}
.dx-pt__bx .dx-tick{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border-radius:8px;background:#fff;border:1px solid #e5eaf2;font-size:12px}
.dx-pt__bx .dx-tick__price{font-weight:700;font-variant-numeric:tabular-nums;color:#0f172a}
.dx-pt__bx .dx-tick__delta{font-size:11px}
.dx-pt__row--colored{border-left:4px solid transparent;padding-left:12px;border-radius:4px}
@media (max-width:900px){
    .dx-pt{flex-direction:column;gap:14px}
    .dx-pt__nav-col{flex:1 1 auto;width:100%}
    .dx-pt__nav{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;padding:10px;max-height:none;overflow:visible;width:100%}
    .dx-pt__nav-item{padding:8px 10px}
    .dx-pt__rows{grid-template-columns:1fr}
}
@media (max-width:640px){
    .dx-pt__sect,.dx-pt--flat{padding:16px 14px}
    .dx-pt__h2{font-size:16px}
    .dx-pt__nav{grid-template-columns:repeat(2,1fr)}
    .dx-pt__nav-text strong{font-size:12.5px}
    .dx-pt__bx{display:none}
    .dx-pt__row{grid-template-columns:1fr auto}
}
@media (max-width:420px){
    .dx-pt__nav{grid-template-columns:1fr}
}
.dx-pricecard__divider{padding:5px 12px;margin:6px -12px 2px;background:linear-gradient(90deg,#0057B7,transparent);border-radius:6px 0 0 6px;font-size:10px;font-weight:800;color:#fff;letter-spacing:.04em;text-transform:uppercase;list-style:none}

/* ============================================================
   Metal Calculator (V20 Mobile-First) — replaces hero illustration
   ============================================================ */
.dx-cat__hero:has(.dx-calc)::after{display:none !important;}
.dx-calc{
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 32px -12px rgba(0,87,183,.18),0 0 0 1px rgba(0,87,183,.06);
    overflow:visible;
    align-self:start;
    z-index:1;
    position:relative;
}
.dx-calc__head{border-radius:16px 16px 0 0;}
.dx-calc__head{
    background:linear-gradient(135deg,#0057B7,#0070e0);
    padding:10px 14px;
    color:#fff;
    text-align:center;
}
.dx-calc__title{
    font-size:14px;
    font-weight:800;
    margin:0;
    line-height:1.2;
}
.dx-calc__sub{
    font-size:11px;
    opacity:.75;
    margin:2px 0 0;
}
.dx-calc__types-wrap{position:relative;background:#f4f6fb;overflow:visible;}
.dx-calc__types{
    display:flex;
    gap:2px;
    padding:8px 10px;
    background:#f4f6fb;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    cursor:grab;
}
.dx-calc__types::-webkit-scrollbar{display:none;}
.dx-calc__types.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.dx-calc__arrow{
    position:absolute;
    top:50%;
    width:32px;height:32px;
    border:none;background:#0057B7;
    border-radius:50%;
    box-shadow:0 3px 12px rgba(0,87,183,.35);
    cursor:pointer;
    z-index:2;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    transition:opacity .25s,box-shadow .2s;
}
.dx-calc__arrow:hover{box-shadow:0 4px 16px rgba(0,87,183,.5);}
.dx-calc__arrow--left{left:-16px;}
.dx-calc__arrow--right{right:-16px;}
.dx-calc__arrow svg{width:16px;height:16px;}
.dx-calc__arrow.is-hidden{opacity:0;pointer-events:none;}
@keyframes dx-calc-nudge-left{
    0%,100%{transform:translateY(-50%) translateX(0);}
    50%{transform:translateY(-50%) translateX(-5px);}
}
@keyframes dx-calc-nudge-right{
    0%,100%{transform:translateY(-50%) translateX(0);}
    50%{transform:translateY(-50%) translateX(5px);}
}
.dx-calc__arrow--left:not(.is-hidden){animation:dx-calc-nudge-left 1.2s ease-in-out infinite;}
.dx-calc__arrow--right:not(.is-hidden){animation:dx-calc-nudge-right 1.2s ease-in-out infinite;}
@media (max-width:880px){
    .dx-calc__arrow{width:28px;height:28px;}
    .dx-calc__arrow svg{width:14px;height:14px;}
    .dx-calc__arrow--left{left:-14px;}
    .dx-calc__arrow--right{right:-14px;}
}
@media (max-width:420px){
    .dx-calc__arrow{width:26px;height:26px;}
    .dx-calc__arrow--left{left:-10px;}
    .dx-calc__arrow--right{right:-10px;}
}
.dx-calc__icon{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:8px 6px 6px;
    min-width:56px;
    flex-shrink:0;
    border:none;
    background:transparent;
    border-radius:10px;
    cursor:pointer;
    font-family:inherit;
    color:#64748b;
    transition:.15s;
    scroll-snap-align:start;
}
.dx-calc__icon svg{width:48px;height:48px;flex-shrink:0;}
.dx-calc__icon span{font-size:12px;font-weight:700;line-height:1.15;white-space:nowrap;letter-spacing:.01em;}
.dx-calc__icon:hover{color:#0057B7;background:rgba(0,87,183,.06);}
.dx-calc__icon.is-active{color:#0057B7;background:rgba(0,87,183,.12);box-shadow:inset 0 -2px 0 #0057B7;}
.dx-calc__icon.is-active svg{filter:drop-shadow(0 1px 3px rgba(0,87,183,.35));}
.dx-calc__body{padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;}
.dx-calc__btn,.dx-calc__result{grid-column:1/-1;}
.dx-calc__field{}
.dx-calc__field label{
    display:block;
    font-size:10px;
    font-weight:700;
    color:#64748b;
    margin-bottom:2px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.dx-calc__field input,
.dx-calc__field select{
    width:100%;
    padding:5px 8px;
    border:1.5px solid rgba(15,23,42,.1);
    border-radius:8px;
    font-size:13px;
    font-family:inherit;
    background:#fff;
    transition:border-color .15s;
}
.dx-calc__field input:focus,
.dx-calc__field select:focus{
    outline:none;
    border-color:#0057B7;
    box-shadow:0 0 0 2px rgba(0,87,183,.1);
}
.dx-calc__btn{
    width:100%;
    padding:7px;
    background:#0057B7;
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:.2s;
    margin-top:2px;
}
.dx-calc__btn:hover{background:#003d80;transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(0,87,183,.4);}
.dx-calc__result{
    margin-top:6px;
    background:linear-gradient(135deg,#f0f7ff,#e8f0fe);
    border-radius:10px;
    padding:8px 12px;
    text-align:center;
}
.dx-calc__result-val{
    font-size:22px;
    font-weight:800;
    color:#0057B7;
}
.dx-calc__result-unit{
    font-size:12px;
    font-weight:600;
    color:#475569;
    margin-left:3px;
}
.dx-calc__result-extra{
    display:block;
    font-size:11px;
    color:#64748b;
    margin-top:1px;
}
@media (max-width:880px){
    .dx-cat__hero:has(.dx-calc){grid-template-columns:1fr !important;}
    .dx-calc{max-width:100%;overflow:hidden;}
    .dx-calc__types-wrap{overflow:visible;}
    .dx-calc__types{padding:12px 8px;gap:4px;}
    .dx-calc__icon{min-width:0;flex:0 0 calc((100% - 40px) / 6);padding:8px 2px 6px;gap:6px;}
    .dx-calc__icon svg{width:44px;height:44px;}
    .dx-calc__icon span{font-size:12px;}
    .dx-calc__arrow{width:28px;height:28px;}
    .dx-calc__arrow svg{width:13px;height:13px;}
    .dx-calc__arrow--left{left:4px;}
    .dx-calc__arrow--right{right:4px;}
}
@media (max-width:640px){
    .dx-calc__body{grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px 14px;}
    .dx-calc__icon{flex:0 0 calc((100% - 32px) / 5);}
    .dx-calc__icon svg{width:40px;height:40px;}
    .dx-calc__icon span{font-size:11px;}
}
@media (max-width:420px){
    .dx-calc__head{padding:8px 12px;}
    .dx-calc__body{padding:10px;}
    .dx-calc__result-val{font-size:22px;}
    .dx-calc__icon{flex:0 0 calc((100% - 24px) / 5);}
    .dx-calc__icon svg{width:36px;height:36px;}
    .dx-calc__icon span{font-size:10px;}
    .dx-calc__arrow{width:24px;height:24px;}
    .dx-calc__arrow svg{width:11px;height:11px;}
    .dx-calc__arrow--left{left:2px;}
    .dx-calc__arrow--right{right:2px;}
}
@media (max-width:360px){
    .dx-calc__icon{flex:0 0 calc((100% - 20px) / 4);}
    .dx-calc__icon svg{width:34px;height:34px;}
    .dx-calc__icon span{font-size:9.5px;}
}

/* White messenger pictograms on coloured circle buttons (TG/WA/Viber + Phone) */
.dx-callbtn,
.dx-callbtn--ico,
.dx-callbtn--ico .dx-callbtn__icon,
.dx-callbtn .dx-callbtn__icon,
.dx-mobnav__msgr,
.dx-footer__msgr{ color:#fff; }
.dx-callbtn .dx-callbtn__icon svg,
.dx-callbtn--ico .dx-callbtn__icon svg,
.dx-mobnav__msgr svg,
.dx-footer__msgr svg{ fill:#fff; color:#fff; }
.dx-cat__msgrs:not(.dx-mailbar__msgrs) > .dx-cat__msgr,
.dx-cat__msgrs--on-cta .dx-cat__msgr{ color:#fff; }
.dx-cat__msgrs:not(.dx-mailbar__msgrs) > .dx-cat__msgr svg,
.dx-cat__msgrs--on-cta .dx-cat__msgr svg{ fill:#fff; color:#fff; }
.dx-callbtn__num{ color:#0a1428; }
.dx-mailbar__msgrs .dx-cat__msgr--whatsapp svg{ fill:#25D366; color:#25D366; }
.dx-mailbar__msgrs .dx-cat__msgr--telegram svg{ fill:#229ED9; color:#229ED9; }
.dx-mailbar__msgrs .dx-cat__msgr--viber svg{ fill:#7360F2; color:#7360F2; }

/* Top / hot positions in /tseny: amber badge near name */
.dx-pt__hot-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#FFD500;color:#0a1428;border-radius:50%;font-size:11px;font-weight:800;margin-left:6px;box-shadow:0 1px 3px rgba(212,160,0,.45);vertical-align:middle}
.dx-pt__row--hot{background:linear-gradient(to right, rgba(255,213,0,.08), transparent 55%)}
.dx-pt__row--hot .dx-pt__nm{font-weight:600}

/* Tag picker for inline editor */
.dx-pt__edit-tags{position:relative;display:inline-flex;align-items:center;gap:6px}
.dx-pt__edit-tags-btn{padding:4px 10px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;font:inherit;font-size:12px;cursor:pointer;color:#0f172a}
.dx-pt__edit-tags-btn:hover{background:#eff6ff;border-color:#0057B7}
.dx-pt__edit-tags-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 36px rgba(15,23,42,.18);padding:10px;min-width:260px;max-height:50vh;overflow-y:auto;display:none}
.dx-pt__edit-tags-pop.is-open{display:block}
.dx-pt__edit-tags-pop label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;font-size:13px;cursor:pointer;color:#0f172a}
.dx-pt__edit-tags-pop label:hover{background:#f1f5f9}
.dx-pt__edit-hot{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;user-select:none}
.dx-pt__edit-hot input{margin:0;cursor:pointer}
.dx-pt__edit-hot:has(input:checked){background:#fef3c7;border-color:#fbbf24;color:#d97706;font-weight:700}

/* Inline add-form: ★ toggle + categories popover (parity with row-edit) */
.dx-pt__add-hot{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}
.dx-pt__add-hot input{margin:0;cursor:pointer}
.dx-pt__add-hot:has(input:checked){background:#fef3c7;border-color:#fbbf24;color:#d97706;font-weight:700}
.dx-pt__add-tags{position:relative;display:inline-flex;align-items:center;gap:6px}
.dx-pt__add-tags-btn{padding:6px 10px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;color:#0f172a;white-space:nowrap}
.dx-pt__add-tags-btn:hover{background:#eff6ff;border-color:#0057B7}
.dx-pt__add-tags-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 36px rgba(15,23,42,.18);padding:10px;min-width:280px;max-height:50vh;overflow-y:auto;display:none}
.dx-pt__add-tags-pop.is-open{display:block}
.dx-pt__add-tags-pop label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;font-size:13px;cursor:pointer;color:#0f172a}
.dx-pt__add-tags-pop label:hover{background:#f1f5f9}

/* Editing row — label-above-field layout */
.dx-pt__row--editing{display:flex !important;flex-wrap:wrap;align-items:flex-end;gap:10px 8px;padding:14px 6px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;grid-template-columns:none !important}
.dx-pt__edit-fld{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:0 0 auto}
.dx-pt__edit-fld:first-of-type{flex:1 1 200px;min-width:160px}
.dx-pt__edit-fld > input,.dx-pt__edit-fld > label,.dx-pt__edit-fld > span{align-self:stretch}
.dx-pt__edit-lbl{color:#0f172a;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;padding-left:2px;line-height:1.2}
.dx-pt__edit-actbox{display:flex;align-items:flex-end;gap:6px;align-self:flex-end;margin-left:auto}
.dx-pt__edit-actbox > button{height:36px}

/* /tseny editor — mobile adapt */
@media (max-width:640px){
    .dx-pt__row[data-row-id]{
        display:flex !important;
        flex-wrap:wrap;
        align-items:center;
        grid-template-columns:none !important;
        gap:8px 10px;
        padding:10px 0;
    }
    .dx-pt__row[data-row-id] > .dx-pt__nm{flex:1 1 100%;min-width:0;font-size:14px;display:flex;align-items:center;gap:6px}
    .dx-pt__row[data-row-id] > .dx-pt__pr{flex:0 0 auto;font-size:14px}
    .dx-pt__row[data-row-id] > .dx-pt__row-actions{margin-left:auto;flex-shrink:0}
    .dx-pt__row[data-row-id] > .dx-pt__bx{display:none}
    .dx-pt__row[data-row-id].dx-pt__row--editing{flex-direction:column;align-items:stretch;flex-wrap:nowrap !important;height:auto}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-fld{flex:0 0 auto !important;align-self:stretch}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-fld input.dx-pt__edit-inp{width:100% !important;min-width:0;font-size:15px;padding:9px 10px}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-fld .dx-pt__edit-tags{align-self:stretch}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-tags-btn{width:100%}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-actbox{flex-direction:row;width:100%;gap:6px}
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-save,
    .dx-pt__row[data-row-id].dx-pt__row--editing .dx-pt__edit-cancel{flex:1 1 calc(50% - 4px);width:auto;height:42px;font-size:18px}
    .dx-pt__edit-tags-pop{position:fixed;left:8px;right:8px;top:auto;bottom:8px;max-width:none;min-width:0;max-height:60vh}
    .dx-pt__add-form{flex-direction:column;align-items:stretch}
    .dx-pt__add-form > input.dx-pt__add-input{width:100% !important;min-width:0;font-size:15px;padding:10px 12px}
    .dx-pt__add-form > .dx-pt__add-submit,
    .dx-pt__add-form > .dx-pt__add-cancel{width:100%;padding:10px 14px;font-size:14px}
    .dx-pt__row--editing input.dx-pt__edit-inp{flex:0 0 auto !important;height:auto !important}
    .dx-pt__row--editing > input.dx-pt__edit-inp[data-ef="min"],
    .dx-pt__row--editing > input.dx-pt__edit-inp[data-ef="max"],
    .dx-pt__row--editing > input.dx-pt__edit-inp[data-ef="markup"]{width:100% !important}
}

/* ===== dx-pkt — прайс-таблица проката (перенесено из inline-style prokat-item, W3C valid) ===== */
.dx-pkt{background:#fff;border:1px solid #e6eaf0;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.06)}
.dx-pkt__ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:linear-gradient(135deg,#0057B7,#003d80);color:#fff;padding:14px 18px}
.dx-pkt__ribbon-main{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.dx-pkt__title{margin:0;font-size:18px;color:#fff;font-weight:800}
.dx-pkt__upd{font-size:12.5px;color:#cfe0f7}
.dx-pkt__seg{display:inline-flex;background:rgba(255,255,255,.16);border-radius:9px;padding:3px}
.dx-pkt__seg-btn{border:0;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:13px;padding:7px 14px;border-radius:7px;cursor:pointer;opacity:.85}
.dx-pkt__seg-btn.is-on{background:#FFD500;color:#0c1e4d;opacity:1}
.dx-pkt__dl{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25)}
.dx-pkt__dl:hover{background:rgba(255,255,255,.24)}
.dx-pkt__dl svg{width:16px;height:16px}
.dx-pkt__scroll{overflow-x:auto}
.dx-pkt__table{width:100%;border-collapse:collapse;font-size:14px}
.dx-pkt__table th{background:#f6f9fc;padding:10px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#64748b;font-weight:700;white-space:nowrap;border-bottom:2px solid #e6eaf0}
.dx-pkt__table th.dx-pkt__num{text-align:right}
.dx-pkt__table td{padding:9px 12px;border-bottom:1px solid #eef2f7}
.dx-pkt__table tbody tr:nth-child(even) td{background:#fafbfd}
.dx-pkt__table tbody tr:hover td{background:#eef4ff}
.dx-pkt__num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-pkt__table strong{color:#0c1e4d}
.dx-pkt__muted{color:#94a3b8}
.dx-pkt--yur [data-pkt-fiz]{display:none}
.dx-pkt--yur [data-pkt-yur]{display:inline!important}
.dx-pkt__note{margin:12px 16px 16px;font-size:12.5px;color:#64748b}
@media(max-width:560px){.dx-pkt__ribbon{padding:12px 14px}.dx-pkt__title{font-size:16px}.dx-pkt__ribbon-main{margin-right:0;width:100%}}

/* ===== dx-xlinks — контекстная перелинковка (SEO internal links) ===== */
.dx-xlinks__title{margin-bottom:2px}
.dx-xlinks__list{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:14px 0 0;list-style:none}
.dx-xlinks__link{display:inline-flex;align-items:center;gap:7px;background:#f3f6fb;border:1px solid #e1e8f2;color:#0c1e4d;text-decoration:none;font-weight:600;font-size:14px;padding:9px 15px;border-radius:999px;transition:background .15s,border-color .15s}
.dx-xlinks__link::before{content:"→";color:#0057B7;font-weight:800}
.dx-xlinks__link:hover{background:#e7f0ff;border-color:#bcd3f5}
@media(max-width:560px){.dx-xlinks__link{font-size:13px;padding:8px 13px}}

/* ===== dx-art — оформление статей (figure / note / table) ===== */
.dx-cat__seo-body .dx-art-fig{margin:20px 0;text-align:center}
.dx-cat__seo-body .dx-art-fig svg{max-width:100%;height:auto}
.dx-cat__seo-body .dx-art-fig figcaption{margin-top:8px;font-size:13px;color:#64748b}
.dx-cat__seo-body .dx-art-note{margin:20px 0;padding:14px 16px 14px 18px;background:#f3f8ff;border-left:4px solid #0057B7;border-radius:8px;color:#1e293b}
.dx-cat__seo-body .dx-art-note strong{color:#0c1e4d}
.dx-cat__seo-body .dx-art-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.dx-cat__seo-body .dx-art-table th,.dx-cat__seo-body .dx-art-table td{border:1px solid #e6eaf0;padding:9px 12px;text-align:left;vertical-align:top}
.dx-cat__seo-body .dx-art-table th{background:#f6f9fc;font-weight:700;color:#0c1e4d}
.dx-cat__seo-body .dx-art-table tbody tr:nth-child(even){background:#fafbfd}
.dx-cat__seo-body h2{margin:24px 0 10px;font-size:21px;color:#0c1e4d}

/* ===== dx-specs — блок «Характеристики» на прокат-страницах ===== */
.dx-specs{margin:14px 0 0;padding:0}
.dx-specs__row{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #eef2f7}
.dx-specs__row:last-child{border-bottom:0}
.dx-specs__row dt{flex:0 0 150px;margin:0;font-weight:700;color:#64748b;font-size:13.5px}
.dx-specs__row dd{margin:0;color:#0c1e4d;font-size:14.5px}
@media(max-width:560px){.dx-specs__row{flex-direction:column;gap:2px}.dx-specs__row dt{flex-basis:auto}}

/* Prokat cost calculator (partials/prokat_price_calc.php) */
.dx-pcalc{background:#fff;border:1px solid #e3e8ef;border-radius:16px;padding:20px 22px;box-shadow:0 2px 12px rgba(16,40,80,.05)}
.dx-pcalc__title{margin:0 0 16px;font-size:1.15rem;color:#0a2540}
.dx-pcalc__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.dx-pcalc__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.dx-pcalc__field--wide{grid-column:1/2}
.dx-pcalc__field label{font-size:.82rem;color:#516b8b;font-weight:600}
.dx-pcalc__field select,.dx-pcalc__field input{height:44px;border:1px solid #cfd9e6;border-radius:10px;padding:0 12px;font-size:1rem;background:#f8fafc;color:#0a2540;width:100%}
.dx-pcalc__field select:focus,.dx-pcalc__field input:focus{outline:2px solid #0057B7;outline-offset:1px;background:#fff}
.dx-pcalc__seg{display:inline-flex;margin:16px 0 0;border:1px solid #0057B7;border-radius:10px;overflow:hidden}
.dx-pcalc__seg-btn{appearance:none;border:0;background:#fff;color:#0057B7;font-weight:600;font-size:.92rem;padding:9px 20px;cursor:pointer}
.dx-pcalc__seg-btn.is-on{background:#0057B7;color:#fff}
.dx-pcalc__out{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px;padding-top:16px;border-top:1px dashed #dbe3ee}
.dx-pcalc__out-label{font-size:.9rem;color:#516b8b}
.dx-pcalc__out-val{font-size:1.7rem;font-weight:800;color:#0a2540}
.dx-pcalc__out-each{font-size:.85rem;color:#64748b}
.dx-pcalc__note{margin:12px 0 0;font-size:.8rem;color:#64748b;line-height:1.45}
@media(max-width:640px){.dx-pcalc__grid{grid-template-columns:1fr 1fr}.dx-pcalc__field--wide{grid-column:1/3}}
@media(max-width:420px){.dx-pcalc__grid{grid-template-columns:1fr}.dx-pcalc__field--wide{grid-column:auto}}

/* E-E-A-T «в цифрах» (canvas.php) — вариант 13: карточки с hover-подъёмом, иконка-круг */
.dx-stats{padding:8px 0 clamp(40px, 6vh, 64px)}
.dx-stats__inner{max-width:1180px;margin:0 auto;padding:0 20px}
/* Заголовок и числа — в стиле заголовков сайта (как .dx-proc__title) */
.dx-stats__title{text-align:center;font-family:"Google Sans Flex","Google Sans",sans-serif;font-size:clamp(22px, 2.6vw, 32px);color:#0a1428;font-weight:700;letter-spacing:-.01em;margin:0 0 clamp(20px, 3vh, 30px)}
.dx-stats__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dx-stats__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:24px 16px;transition:transform .2s,box-shadow .2s,border-color .2s}
.dx-stats__item:hover{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(0,87,183,.45);border-color:#cfe0f6}
.dx-stats__ic{width:44px;height:44px;border-radius:50%;background:conic-gradient(#FFD500 0 25%,#eaf2fe 25% 100%);color:#0057B7;display:grid;place-items:center;padding:10px;flex:0 0 auto}
.dx-stats__ic svg{width:100%;height:100%;display:block}
.dx-stats__num{font-family:"Google Sans Flex","Google Sans",sans-serif;font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-.02em;color:#0a1428}
.dx-stats__lbl{font-size:.92rem;color:#516b8b;line-height:1.35}
@media(max-width:640px){.dx-stats__grid{grid-template-columns:1fr 1fr;gap:10px}.dx-stats__num{font-size:1.7rem}.dx-stats__item{padding:18px 12px}}
@media(max-width:380px){.dx-stats__grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.dx-stats__item{transition:none}.dx-stats__item:hover{transform:none}}

/* ── Индекс цен (/indeks-tsen) — фирменный стиль таблиц (как dx-pt) ── */
.dx-idx__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dx-idx__card{background:#fff;border:1px solid #e5eaf2;border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.dx-idx__card-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.dx-idx__card-name{font-weight:700;font-size:14px;color:#0f172a}
.dx-idx__card-price{font-size:22px;font-weight:800;color:#0f172a;margin-bottom:8px;font-variant-numeric:tabular-nums}
.dx-idx__card-price small{font-size:12px;font-weight:500;color:#64748b}
.dx-idx__card .dx-idx__spark{display:block;width:100%;height:44px}
.dx-idx__group{margin-bottom:14px;padding:24px 26px;background:linear-gradient(180deg,#fafbfd,#fff);border:1px solid #e5eaf2;border-radius:14px}
.dx-idx__group-title{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:800;color:#0f172a;margin:0 0 12px}
.dx-idx__twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dx-idx__table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
.dx-idx__table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:700;padding:4px 12px 9px 0;border-bottom:1px solid #e5eaf2;white-space:nowrap}
.dx-idx__table td{padding:12px 12px 12px 0;border-bottom:1px dotted #e5eaf2;vertical-align:middle}
.dx-idx__table tbody tr:last-child td{border-bottom:none}
.dx-idx__table tbody tr:hover{background:#f7f8fb}
.dx-idx__nm{color:#0f172a;font-weight:500}
.dx-idx__pr{white-space:nowrap;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
.dx-idx__pr small{display:block;font-weight:400;font-size:11.5px;color:#64748b}
.dx-idx__sp{width:120px}
.dx-idx__d{display:inline-block;font-weight:700;font-size:13px;white-space:nowrap}
.dx-idx__d--up{color:#16a34a}
.dx-idx__d--down{color:#dc2626}
.dx-idx__d--flat,.dx-idx__d--na{color:#64748b;font-weight:600}
.dx-idx__text{font-size:15px;line-height:1.65;color:#334155;max-width:860px;margin:0 0 12px}
.dx-idx__links-h{font-size:15px;font-weight:800;color:#0f172a;margin:18px 0 8px}
.dx-idx__links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.dx-idx__links a{display:inline-block;background:#f1f5f9;border:1px solid #e5eaf2;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:#0057B7;text-decoration:none;transition:background .15s}
.dx-idx__links a:hover{background:#e2e8f0}
@media (max-width:640px){
  .dx-idx__cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .dx-idx__card-price{font-size:18px}
  .dx-idx__group{padding:16px 14px}
  .dx-idx__table{font-size:14px;min-width:560px}
}

/* ── Аудит 2026-06-11: совместимость и доступность ── */
@supports (color: color-mix(in srgb, red, blue)){
  .dx-stati-card__media{background:linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, #000 30%) 100%);}
}
/* добиваем infinite-анимации, не накрытые точечными reduce-правилами */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ── Фото в SEO-блоке категорий (вариант 5: blur-подложка) ── */
.dx-cat__seo-photo{position:relative;overflow:hidden;border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:14px 14px 8px}
.dx-seo-photo__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(18px) saturate(1.1);transform:scale(1.18)}
.dx-cat__seo-photo img{position:relative;display:block;width:100%;height:auto;border-radius:10px;border:3px solid #fff;box-shadow:0 6px 18px rgba(15,23,42,.25)}
.dx-seo-photo__credit{position:relative;font-size:10.5px;color:rgba(255,255,255,.9);text-align:right;margin:6px 2px 2px;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ── Стоковые фото в статьях блога (.st-photo, tools/inject_stati_photos.php) ── */
.st-photo{margin:18px 0}
.st-photo img{width:100%;height:auto;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.st-photo figcaption{font-size:11px;color:#64748b;margin-top:6px;text-align:right}