/* Блок «Ремонт мышей Logitech»: посимвольный + пословный морфинг */
.mmorph {
    --bg: #0e1a22; --acc: #00c2ff; --ink: #f3f7f9;
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.6rem 0 1rem;
    background: var(--bg);
    color: var(--ink);
    font-family: Sora, Inter, system-ui, sans-serif;
    transition: background .9s ease;
}
.mmorph-title, .mmorph-body, .mmorph-meta {
    position: relative; display: flex; padding: 0 5cqw;
}
.mmorph-title { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(12px, 4.2cqw, 34px); line-height: 1.15; letter-spacing: -.01em; font-weight: 800; }
.mmorph-body  { flex-wrap: wrap; gap: .12em .3em; margin-top: 1.1rem; min-height: 3.7em; align-content: flex-start;
                font-size: clamp(16px, 5.2cqw, 34px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.mmorph-meta  { flex-wrap: nowrap; white-space: nowrap; margin-top: .9rem; font-size: clamp(12px, 3.4cqw, 20px); line-height: 1.2; font-weight: 800; }
.mmorph-meta .m-c { color: var(--acc); }
.m-c { display: block; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; color: var(--ink); transition: color .9s ease, font-weight .4s; }
.mmorph-title .m-c { color: var(--acc); }
.mmorph-title .m-c.fix { color: var(--ink); font-weight: 300; }
.m-c.sp { width: .3em; }
.m-c span { display: block; }
.m-c.gone { position: absolute; pointer-events: none; }

.mmorph-foot { padding: 0 5cqw; margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mmorph-dots { display: flex; gap: 6px; }
.mmorph-dot { width: 26px; height: 6px; border: 0; padding: 0; border-radius: 9999px; background: rgba(255,255,255,.22); cursor: pointer; transition: background .3s, width .3s; }
.mmorph-dot[aria-current="true"] { background: var(--acc); width: 40px; }
.mmorph-btn { font: 600 11px/1 Inter, system-ui, sans-serif; color: rgba(243,247,249,.8); background: rgba(255,255,255,.1); border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.mmorph-btn:hover { background: rgba(255,255,255,.18); }
.mmorph-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 Inter, system-ui, sans-serif; color: #04121a; background: var(--acc); border-radius: 12px; padding: 11px 16px; text-decoration: none; transition: background .9s ease, filter .2s; }
.mmorph-cta:hover { filter: brightness(1.1); }
.mmorph-models { padding: 0 5cqw; margin-top: 1rem; font: 500 11px/1.5 Inter, system-ui, sans-serif; color: rgba(243,247,249,.55); }
.mmorph-models b { color: rgba(243,247,249,.8); font-weight: 600; }
@media (max-width: 639px) {
    .mmorph-cta { margin-left: 0; width: 100%; justify-content: center; }
}

.mmorph .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@container (min-width: 600px) { .mmorph-body { min-height: 2.5em; } }