/* ============================================================
   SUPPORT.CSS — стили страницы «Поддержка и обслуживание сайтов»
   Подключается после direct.css — переиспользует все его анимации
   ============================================================ */


/* ============================================================
   BADGE — shimmer-полоса (зелёный акцент для поддержки)
   ============================================================ */
@keyframes support-badge-shimmer {
  0%   { left: -80%; opacity: 1; }
  55%  { left: 130%; opacity: 1; }
  56%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
@keyframes support-badge-breathe {
  0%,100% {
    border-color: rgba(34,197,94,.3);
    box-shadow: none;
  }
  50% {
    border-color: rgba(34,197,94,.7);
    box-shadow: 0 0 14px rgba(34,197,94,.18);
  }
}

.support-hero .calculator-hero__badge {
  animation: support-badge-breathe 2.8s ease-in-out infinite;
  overflow: hidden;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  position: relative;
}
.support-hero .calculator-hero__badge::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: support-badge-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
.support-hero .calculator-hero__badge-wrap:hover .calculator-hero__badge {
  animation: support-badge-breathe .8s ease-in-out infinite;
  border-color: rgba(34,197,94,.75);
  box-shadow: 0 0 20px rgba(34,197,94,.22);
  letter-spacing: .16em;
}
.support-hero .calculator-hero__badge-dot {
  background: #22C55E;
}


/* ============================================================
   HERO
   ============================================================ */
.support-hero {
  padding: 110px 0 48px;
  background: var(--bg);
  overflow: hidden;
}
.support-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: center;
}
.support-hero__visual {
  position: relative;
}

/* Title */
.support-hero__title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
  min-height: 3.3em;
}
.support-hero__title em {
  font-style: normal;
  color: var(--accent);
}

/* Lead */
.support-hero__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 480px;
  margin-bottom: 32px;
  transition: opacity .6s ease, transform .6s ease;
}
.support-hero__lead.lead-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stats */
.support-hero__stats {
  display: flex;
  gap: 36px;
  margin-bottom: 36px;
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.support-hero__stats.stats-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Buttons */
.support-hero__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  transition: opacity .6s ease .2s, transform .6s ease .2s;
}
.support-hero__buttons.buttons-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Синяя пилюля */
.direct-stat-dot--blue { background: #3B82F6; }
.direct-stat-dot--blue::after { background: #3B82F6; }


/* ============================================================
   PROMO-CARD МОДИФИКАТОРЫ ДЛЯ ПОДДЕРЖКИ
   ============================================================ */
.promo-card--edits    { --pc-color: #22C55E; --pc-rgb: 34,197,94; }
.promo-card--security { --pc-color: #EF4444; --pc-rgb: 239,68,68; }
.promo-card--backup   { --pc-color: #3B82F6; --pc-rgb: 59,130,246; }
.promo-card--updates  { --pc-color: #F59E0B; --pc-rgb: 245,158,11; }

.promo-card--edits::before    { background: linear-gradient(180deg, #86EFAC, #16A34A, #86EFAC); background-size: 100% 200%; animation: border-spin 3s linear infinite; }
.promo-card--security::before { background: linear-gradient(180deg, #FCA5A5, #EF4444, #FCA5A5); background-size: 100% 200%; animation: border-spin 3s linear infinite .3s; }
.promo-card--backup::before   { background: linear-gradient(180deg, #93C5FD, #2563EB, #93C5FD); background-size: 100% 200%; animation: border-spin 3s linear infinite .6s; }
.promo-card--updates::before  { background: linear-gradient(180deg, #FCD34D, #F59E0B, #FCD34D); background-size: 100% 200%; animation: border-spin 3s linear infinite .9s; }

.promo-card--edits    .promo-card__glow { background: radial-gradient(circle, rgba(34,197,94,.12), transparent 70%); }
.promo-card--security .promo-card__glow { background: radial-gradient(circle, rgba(239,68,68,.12), transparent 70%); }
.promo-card--backup   .promo-card__glow { background: radial-gradient(circle, rgba(59,130,246,.12), transparent 70%); }
.promo-card--updates  .promo-card__glow { background: radial-gradient(circle, rgba(245,158,11,.12), transparent 70%); }

.promo-card--edits    .promo-card__btn { background: linear-gradient(135deg, #86EFAC, #16A34A); }
.promo-card--security .promo-card__btn { background: linear-gradient(135deg, #FCA5A5, #EF4444); }
.promo-card--backup   .promo-card__btn { background: linear-gradient(135deg, #93C5FD, #2563EB); }
.promo-card--updates  .promo-card__btn { background: linear-gradient(135deg, #FCD34D, #D97706); }

.promo-card--edits    .promo-card__bar-fill { background: linear-gradient(90deg, #86EFAC, #16A34A); }
.promo-card--security .promo-card__bar-fill { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.promo-card--backup   .promo-card__bar-fill { background: linear-gradient(90deg, #93C5FD, #2563EB); }
.promo-card--updates  .promo-card__bar-fill { background: linear-gradient(90deg, #FCD34D, #D97706); }


/* ============================================================
   BUDGET-STRIP — зелёный акцент вместо синего
   ============================================================ */
#support-pricing .budget-strip {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);
  border-top-color:    rgba(34,197,94,.15);
  border-bottom-color: rgba(34,197,94,.15);
}
#support-pricing .budget-orb--1 { background: rgba(34,197,94,.10); }
#support-pricing .budget-orb--2 { background: rgba(22,163,74,.07); }
#support-pricing .budget-orb--3 { background: rgba(74,222,128,.08); }

#support-pricing .budget-badge__ring {
  background:
    linear-gradient(#f0fdf4, #f0fdf4) padding-box,
    conic-gradient(#16A34A, #4ADE80, #86EFAC, #16A34A) border-box;
}
#support-pricing .budget-badge__icon { color: #16A34A; }

#support-pricing .budget-perk {
  border-color: rgba(34,197,94,.15);
  box-shadow: 0 2px 8px rgba(34,197,94,.07);
}
#support-pricing .budget-perk__icon {
  background: rgba(34,197,94,.10);
  color: #16A34A;
}
#support-pricing .budget-perk__val  { color: #16A34A; }
#support-pricing .budget-perk:hover {
  border-color: rgba(34,197,94,.4);
  box-shadow: 0 8px 20px rgba(34,197,94,.15);
}
#support-pricing .budget-perk:hover .budget-perk__icon {
  background: rgba(34,197,94,.18);
  color: #16A34A;
}
#support-pricing .budget-perk:hover .budget-perk__label { color: #16A34A; }

@keyframes support-budget-btn-glow {
  0%,100% { box-shadow: 0 4px 16px rgba(34,197,94,.25); }
  50%      { box-shadow: 0 8px 32px rgba(34,197,94,.48), 0 0 0 4px rgba(34,197,94,.08); }
}
#support-pricing .budget-strip__btn {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  animation: btn-magnetic-idle 2.8s ease-in-out infinite,
             support-budget-btn-glow 3s ease-in-out infinite;
}
#support-pricing .budget-strip__btn:hover {
  box-shadow: 0 16px 44px rgba(34,197,94,.5) !important;
}
#support-pricing .budget-strip::after {
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.5), transparent);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .support-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .support-hero__visual {
    max-width: 420px;
    margin: 0 auto;
  }
}
@media (max-width: 900px) {
  .support-hero__title { font-size: 38px; }
}
@media (max-width: 700px) {
  .support-hero { padding: 90px 0 32px; }
  .support-hero__title { font-size: 32px; }
  .support-hero__stats { gap: 20px; flex-wrap: wrap; }
  .support-hero__buttons { flex-direction: column; }
  .support-hero__buttons .btn-pr { width: 100%; justify-content: center; }
}


/* ============================================================
   SP-BADGE — уникальный badge с щитом для support
   ============================================================ */

@keyframes sp-badge-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sp-badge-shimmer {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}
@keyframes sp-pulse-ring {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes sp-shield-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-3px) rotate(-4deg); }
  70%      { transform: translateY(-1px) rotate(2deg); }
}
@keyframes sp-tag-blink {
  0%,90%,100% { opacity: 1; }
  95%          { opacity: .4; }
}

.sp-badge-wrap { margin-bottom: 24px; }

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 9px 16px 9px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #14532D;
  cursor: default;
  overflow: hidden;

  /* Анимированная рамка */
  background:
    linear-gradient(#f0fdf4, #f0fdf4) padding-box,
    linear-gradient(90deg, #22C55E, #4ADE80, #86EFAC, #22C55E) border-box;
  background-size: 200% auto;
  border: 1.5px solid transparent;
  animation: sp-badge-border 3s linear infinite;
  box-shadow: 0 2px 12px rgba(34,197,94,.15), 0 0 0 3px rgba(34,197,94,.06);
}

/* Shimmer sweep */
.sp-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%);
  animation: sp-badge-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* Hover */
.sp-badge:hover {
  background:
    linear-gradient(#dcfce7, #dcfce7) padding-box,
    linear-gradient(90deg, #16A34A, #22C55E, #4ADE80, #16A34A) border-box;
  box-shadow: 0 4px 20px rgba(34,197,94,.3), 0 0 0 4px rgba(34,197,94,.1);
  animation: sp-badge-border 1.2s linear infinite;
}

/* Щит-иконка */
.sp-badge__shield {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: rgba(34,197,94,.15);
  border-radius: 50%;
  flex-shrink: 0;
  animation: sp-shield-bob 3s ease-in-out infinite;
}
.sp-badge:hover .sp-badge__shield {
  background: rgba(34,197,94,.25);
  animation: sp-shield-bob .7s ease-in-out infinite;
}

/* Пульс-кольцо */
.sp-badge__pulse {
  position: absolute;
  left: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  pointer-events: none;
  display: none; /* скрыт, используем щит */
}

/* Текст */
.sp-badge__text {
  position: relative; z-index: 1;
  line-height: 1.3;
}
.sp-badge__text strong {
  color: #16A34A;
}

/* 24/7 тег */
.sp-badge__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #22C55E;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 50px;
  flex-shrink: 0;
  position: relative; z-index: 1;
  animation: sp-tag-blink 3s ease-in-out infinite;
}


/* ============================================================
   SP-DASHBOARD — уникальный hero-блок мониторинга
   ============================================================ */

@keyframes sp-dash-float {
  0%,100% { transform: translateY(0) rotate(-.3deg); }
  50%      { transform: translateY(-10px) rotate(.3deg); }
}
@keyframes sp-dash-appear {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sp-status-ping {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes sp-seg-pop {
  0%   { transform: scaleY(0); opacity: 0; }
  70%  { transform: scaleY(1.15); }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes sp-metric-slam {
  0%   { transform: scale(.5) translateY(8px); opacity: 0; }
  65%  { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes sp-feed-slide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sp-feed-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 4px transparent; }
}
@keyframes sp-uptime-fill {
  from { width: 0; }
  to   { width: var(--uw, 100%); }
}
@keyframes sp-float-1 {
  0%,100% { transform: translateY(0) translateX(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) translateX(4px) rotate(1deg); }
}
@keyframes sp-float-2 {
  0%,100% { transform: translateY(0) translateX(0) rotate(1deg); }
  50%      { transform: translateY(-12px) translateX(-4px) rotate(-1deg); }
}
@keyframes sp-float-3 {
  0%,100% { transform: translateY(0) rotate(.5deg); }
  50%      { transform: translateY(-7px) rotate(-1deg); }
}
@keyframes sp-dash-shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(350%) skewX(-12deg); }
}
@keyframes sp-avatar-spin {
  0%,80%,100% { transform: rotate(0deg) scale(1); }
  85%          { transform: rotate(-10deg) scale(1.1); }
  92%          { transform: rotate(8deg) scale(1.05); }
}
@keyframes sp-uptime-count {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Обёртка ── */
.sp-dashboard {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  border: 1.5px solid rgba(34,197,94,.2);
  box-shadow:
    0 4px 24px rgba(34,197,94,.1),
    0 20px 60px rgba(0,0,0,.08),
    0 0 0 1px rgba(34,197,94,.06);
  overflow: hidden;
  animation: sp-dash-float 6s ease-in-out infinite;
  transition: box-shadow .4s, border-color .4s;
  will-change: transform;
}
.sp-dashboard:hover {
  animation: none;
  box-shadow:
    0 8px 40px rgba(34,197,94,.2),
    0 30px 80px rgba(0,0,0,.12),
    0 0 0 2px rgba(34,197,94,.3);
  border-color: rgba(34,197,94,.45);
}

/* Shimmer sweep по карточке */
.sp-dashboard::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  animation: sp-dash-shimmer 6s ease-in-out infinite 2s;
  pointer-events: none;
  z-index: 0;
}

/* Зелёная полоса сверху */
.sp-dashboard::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22C55E, #4ADE80, #86EFAC, #4ADE80, #22C55E);
  background-size: 200% 100%;
  animation: sp-badge-border 3s linear infinite;
  border-radius: 24px 24px 0 0;
  z-index: 2;
}

/* ── Шапка ── */
.sp-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.sp-dash__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-dash__avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: sp-avatar-spin 4s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(34,197,94,.35);
}
.sp-dash__title {
  font-size: 13px; font-weight: 800; color: var(--text);
  line-height: 1.2;
}
.sp-dash__sub {
  font-size: 11px; color: var(--text-light);
}
.sp-dash__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px; font-weight: 700;
  color: #16A34A;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 50px;
  padding: 4px 10px;
}
.sp-dash__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22C55E;
  position: relative;
}
.sp-dash__status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22C55E;
  animation: sp-status-ping 1.6s ease-out infinite;
}

/* ── Uptime блок ── */
.sp-dash__uptime-block {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(34,197,94,.15);
  position: relative; z-index: 1;
}
.sp-dash__uptime-label {
  font-size: 11px; font-weight: 700; color: #16A34A;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 4px;
}
.sp-dash__uptime-val {
  font-size: 28px; font-weight: 900; color: #15803D;
  line-height: 1; margin-bottom: 10px;
  animation: sp-uptime-count .8s cubic-bezier(.34,1.56,.64,1) .5s both;
}
.sp-dash__uptime-segments {
  display: flex;
  gap: 3px;
  height: 28px;
  align-items: flex-end;
}
.sp-dash__uptime-seg {
  flex: 1;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: sp-seg-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.sp-dash__uptime-hint {
  font-size: 11px; color: #16A34A; opacity: .7;
  margin-top: 6px;
}

/* ── Метрики ── */
.sp-dash__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.sp-dash__metric {
  text-align: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
  cursor: default;
  position: relative; overflow: hidden;
}
.sp-dash__metric::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .45s ease;
  border-radius: inherit;
}
.sp-dash__metric:hover::after { transform: translateX(120%); }
.sp-dash__metric:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.sp-dash__metric--green:hover { border-color: rgba(34,197,94,.4); background: #f0fdf4; box-shadow: 0 8px 20px rgba(34,197,94,.15); }
.sp-dash__metric--blue:hover  { border-color: rgba(59,130,246,.4); background: #eff6ff; box-shadow: 0 8px 20px rgba(59,130,246,.15); }
.sp-dash__metric--orange:hover{ border-color: rgba(249,115,22,.4); background: #fff7ed; box-shadow: 0 8px 20px rgba(249,115,22,.15); }

.sp-dash__metric-icon { font-size: 18px; margin-bottom: 4px; }
.sp-dash__metric-val {
  font-size: 20px; font-weight: 900; line-height: 1; margin-bottom: 3px;
}
.sp-dash__metric--green .sp-dash__metric-val { color: #16A34A; }
.sp-dash__metric--blue  .sp-dash__metric-val { color: #2563EB; }
.sp-dash__metric--orange .sp-dash__metric-val { color: #EA580C; }
.sp-dash__metric-label { font-size: 9.5px; color: var(--text-light); line-height: 1.35; }

/* slam при появлении */
.sp-dashboard.revealed .sp-dash__metric:nth-child(1) .sp-dash__metric-val { animation: sp-metric-slam .6s cubic-bezier(.34,1.56,.64,1) both .2s; }
.sp-dashboard.revealed .sp-dash__metric:nth-child(2) .sp-dash__metric-val { animation: sp-metric-slam .6s cubic-bezier(.34,1.56,.64,1) both .35s; }
.sp-dashboard.revealed .sp-dash__metric:nth-child(3) .sp-dash__metric-val { animation: sp-metric-slam .6s cubic-bezier(.34,1.56,.64,1) both .5s; }

/* ── Feed ── */
.sp-dash__feed {
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.sp-dash__feed-title {
  font-size: 11px; font-weight: 800; color: var(--text-light);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.sp-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  font-size: 12px;
  transition: background .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
}
.sp-feed-item:hover {
  background: var(--bg);
  transform: translateX(4px);
}
.sp-feed-item__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sp-feed-item__dot--green  { background: #22C55E; }
.sp-feed-item__dot--orange { background: #F97316; }
.sp-feed-item__dot--blue   { background: #3B82F6; }
.sp-feed-item__text { flex: 1; color: var(--text); font-weight: 500; }
.sp-feed-item__time { font-size: 10.5px; color: var(--text-light); white-space: nowrap; flex-shrink: 0; }

/* Появление строк */
.sp-dashboard.revealed .sp-feed-item:nth-child(2) { animation: sp-feed-slide .5s cubic-bezier(.34,1.56,.64,1) both .4s; }
.sp-dashboard.revealed .sp-feed-item:nth-child(3) { animation: sp-feed-slide .5s cubic-bezier(.34,1.56,.64,1) both .55s; }
.sp-dashboard.revealed .sp-feed-item:nth-child(4) { animation: sp-feed-slide .5s cubic-bezier(.34,1.56,.64,1) both .7s; }
.sp-dashboard.revealed .sp-feed-item:nth-child(5) { animation: sp-feed-slide .5s cubic-bezier(.34,1.56,.64,1) both .85s; }

/* ── Footer ── */
.sp-dash__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}
.sp-dash__footer-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-light); font-weight: 600;
  flex: 1;
}
.sp-dash__footer-icon { font-size: 13px; }
.sp-dash__footer-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  box-shadow: 0 4px 14px rgba(34,197,94,.35);
  position: relative; overflow: hidden;
}
.sp-dash__footer-btn::before {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: left .4s;
}
.sp-dash__footer-btn:hover::before { left: 130%; }
.sp-dash__footer-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(34,197,94,.5);
}

/* ── Плавающие пилюли ── */
.sp-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sp-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 50px;
  padding: 7px 14px;
  font-size: 12px; font-weight: 700; color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  pointer-events: all;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  cursor: default;
}
.sp-float:hover {
  transform: scale(1.08) translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(34,197,94,.25);
  border-color: rgba(34,197,94,.5);
  animation: none !important;
}
.sp-float--1 {
  top: 18px; left: -20px;
  animation: sp-float-1 4.5s ease-in-out infinite;
}
.sp-float--2 {
  bottom: 100px; right: -16px;
  animation: sp-float-2 5s ease-in-out infinite .8s;
}
.sp-float--3 {
  bottom: 24px; left: -14px;
  animation: sp-float-3 4s ease-in-out infinite 1.4s;
}

/* ── responsive ── */
@media (max-width: 768px) {
  .sp-floats { display: none; }
  .sp-dashboard { padding: 18px; }
  .sp-dash__uptime-val { font-size: 22px; }
  .sp-dash__metric-val { font-size: 17px; }
}
@media (max-width: 480px) {
  .sp-dash__metrics { grid-template-columns: 1fr 1fr; }
  .sp-dash__metric:last-child { grid-column: 1/-1; }
}


/* ── disc-strip-section — ограничиваем полосу шириной контейнера ── */
.disc-strip-section {
  padding: 0;
  background: transparent;
}
.disc-strip-section .disc-strip {
  border-radius: 20px;
  overflow: hidden;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 768px) {
  .disc-strip-section .disc-strip {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 14px;
  }
}