/* =========================================================
   MIRIDEA · «Техническая поддержка сайтов» — дополнение к dorabotka.css
   Первый экран: живая панель мониторинга. Только transform/opacity — без фильтров.
   ========================================================= */
.m-mon { position: relative; padding: 18px; border-radius: 12px 28px 12px 28px; background: #fff;
  box-shadow: 0 34px 80px -44px rgba(24,78,174,.6), 0 0 0 1px var(--line); }
.m-mon::before { content: ""; position: absolute; inset: -30px -20px auto auto; width: 180px; height: 180px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(160,104,248,.35), transparent 70%); }
.m-mon__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--ink); }
.m-mon__top b { font-weight: 600; }
.m-mon__dots { display: flex; gap: 5px; } .m-mon__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e1e5ee; } .m-mon__dots i:first-child { background: var(--red); }
.m-mon__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #1f9a52; }
.m-mon__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f9a52; animation: m-mon-blink 1.6s ease-in-out infinite; }
@keyframes m-mon-blink { 50% { opacity: .25; } }

.m-mon__stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.m-mon__stat { padding: 10px 12px; border-radius: 8px 14px 8px 14px; background: var(--soft); }
.m-mon__stat span { display: block; font-size: 11px; color: var(--mute); white-space: nowrap; }
.m-mon__stat b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-mon__stat b.ok { color: #1f9a52; }

.m-mon__chart { position: relative; height: 92px; margin-bottom: 12px; overflow: hidden; border-radius: 8px 14px 8px 14px; background: var(--soft); }
.m-mon__chart p { position: absolute; left: 12px; top: 8px; z-index: 1; margin: 0; font-size: 11px; color: var(--mute); }
.m-mon__chart p b { color: var(--ink); font-variant-numeric: tabular-nums; }
.m-mon__wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 64px; animation: m-mon-scroll 9s linear infinite; }
.m-mon__wave svg { display: block; width: 100%; height: 100%; }
@keyframes m-mon-scroll { to { transform: translateX(-50%); } }

.m-mon__feed { position: relative; height: 176px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.m-mon__feed li { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px 14px 8px 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--ink); transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .5s; }
.m-mon__feed li.is-new { opacity: 0; transform: translateY(-16px) scale(.97); }
.m-mon__feed li.is-out { opacity: 0; }
.m-mon__feed time { flex: none; width: 38px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.m-mon__feed i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #1f9a52; }
.m-mon__feed i.w { background: linear-gradient(135deg,#a068f8,#3f55c3); }
.m-mon__feed i.r { background: linear-gradient(135deg,#f93c3c,#cd0973); }
.m-mon__feed span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-mon__foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.m-mon__bar { flex: 1; height: 6px; border-radius: 3px; background: #eef1f7; overflow: hidden; }
.m-mon__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg,#f93c3c,#cd0973); transform-origin: 0 50%; transform: scaleX(var(--p,.4)); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.m-mon__foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .m-mon__stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .m-mon__feed { height: 132px; }
}

/* Кому помогаем: бизнесу и студиям */
.m-tp-who { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 768px) { .m-tp-who { grid-template-columns: 1fr; } }
.m-tp-who > div { position: relative; padding: 30px 30px 28px; border-radius: 12px 28px 12px 28px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  transition: translate .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.m-tp-who > div:hover { translate: 0 -6px; box-shadow: 0 28px 56px -32px rgba(63,85,195,.55), 0 0 0 1px var(--line); }
.m-tp-who > div.m-tp-who--a { background: linear-gradient(140deg,#a068f8 0%,#3f55c3 55%,#184eae 100%); box-shadow: 0 26px 50px -30px rgba(63,85,195,.9); }
.m-tp-who small { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.m-tp-who h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--ink); }
.m-tp-who p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: #5d6578; }
.m-tp-who ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.m-tp-who li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.m-tp-who li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 8px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.m-tp-who--a small, .m-tp-who--a p { color: rgba(255,255,255,.8); }
.m-tp-who--a h3, .m-tp-who--a li { color: #fff; }
.m-tp-who--a li::before { border-color: #fff; }
.m-tp-who--a .m-dr-link { color: #fff; }
@media (prefers-reduced-motion: reduce) { .m-mon *, .m-mon *::before { animation: none !important; transition: none !important; } }