/* ============================================================
   DORABOTKA.CSS — стили страницы «Доработка сайтов»
   ============================================================ */


/* ── Keyframes ── */
@keyframes card-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes btn-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes btn-glow {
  0%,100% { box-shadow: 0 4px 20px rgba(200,150,80,.25); }
  50%      { box-shadow: 0 8px 36px rgba(200,150,80,.5); }
}
@keyframes border-pulse {
  0%,100% { border-color: rgba(200,150,80,.4); }
  50%      { border-color: rgba(200,150,80,.9); }
}
@keyframes card-shimmer {
  0%   { left: -70%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes dot-glow {
  0%,100% { box-shadow: 0 0 4px currentColor; }
  50%      { box-shadow: 0 0 14px currentColor, 0 0 26px rgba(200,150,80,.4); }
}
@keyframes terminal-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes task-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float-card-drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-10px) rotate(1deg); }
  66%      { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes score-pop {
  0%   { transform: scale(.7); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progress-fill {
  from { width: 0; }
}
@keyframes step-appear {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll Reveal ── */
.will-animate {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease,
              transform .18s ease;
}
.will-animate.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Варианты направлений */
.will-animate.from-left  { transform: translateX(-28px); }
.will-animate.from-right { transform: translateX(28px); }
.will-animate.from-scale { transform: scale(.92) translateY(16px); }
.will-animate.from-left.revealed,
.will-animate.from-right.revealed,
.will-animate.from-scale.revealed { transform: none; }

/* Задержки для дочерних элементов внутри revealed-родителя */
.will-animate.revealed .rev-child { animation: rev-child-in .5s cubic-bezier(.4,0,.2,1) both; }
.will-animate.revealed .rev-child:nth-child(1)  { animation-delay: .05s; }
.will-animate.revealed .rev-child:nth-child(2)  { animation-delay: .12s; }
.will-animate.revealed .rev-child:nth-child(3)  { animation-delay: .19s; }
.will-animate.revealed .rev-child:nth-child(4)  { animation-delay: .26s; }
.will-animate.revealed .rev-child:nth-child(5)  { animation-delay: .33s; }
.will-animate.revealed .rev-child:nth-child(6)  { animation-delay: .40s; }

@keyframes rev-child-in {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── block-header ── */
.block-header {
  background: linear-gradient(135deg, #2A2018, #3D3020);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block-header__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C89650;
  animation: dot-glow 2.2s ease-in-out infinite;
}
.block-header__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #C89650;
}


/* ============================================================
   HERO
   ============================================================ */
.dr-hero {
  padding: 110px 0 80px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* ── Хлебные крошки — стиль как на about.php ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }



.dr-hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,150,80,.07) 0%, transparent 70%);
  pointer-events: none;
}

.dr-hero__inner {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: center;
  margin-top: 24px;
}

/* Бейдж */
.dr-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,150,80,.1);
  border: 1px solid rgba(200,150,80,.25);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}
.dr-hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #199812;
  animation: dot-glow 2.2s ease-in-out infinite;
  box-shadow: 0 0 6px #199812;
}

/* Заголовок */
.dr-hero__title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 24px;
  min-height: unset;
  letter-spacing: -.3px;
}
.dr-hero__title .typewriter-line[data-line="1"],
.dr-hero__title .typewriter-line[data-line="2"] {
  white-space: nowrap;
}
.typewriter-accent {
  color: var(--accent);
  font-style: normal;
}
.typewriter-cursor {
  display: inline-block;
  color: var(--accent);
  font-weight: 300;
  opacity: 0;
  transition: opacity .3s;
  margin-left: 2px;
}
.typewriter-cursor.active {
  opacity: 1;
  animation: terminal-blink .75s step-end infinite;
}
.typewriter-cursor.done {
  animation: none;
  transition: opacity .6s ease;
  opacity: 0;
}

/* Лид */
.dr-hero__lead {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.dr-hero__lead.lead-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Статы */
.dr-hero__stats {
  display: flex;
  gap: 36px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.dr-hero__stats.stats-visible {
  opacity: 1;
  transform: translateY(0);
}
.dr-stat__num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.dr-stat__label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

/* Кнопки */
.dr-hero__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.dr-hero__buttons.buttons-visible {
  opacity: 1;
  transform: translateY(0);
}

.dr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s, border-radius .3s;
}
.dr-btn--primary {
  background: var(--accent);
  color: #fff;
  animation: btn-float 2.8s ease-in-out infinite,
             btn-glow  3.5s ease-in-out infinite;
}
.dr-btn--primary:hover {
  animation: none;
  border-radius: 4px;
  background: linear-gradient(to top, var(--accent-dark) 0%, var(--accent) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,150,80,.45);
}
.dr-btn--outline {
  background: transparent;
  color: var(--accent);
  border-color: rgba(200,150,80,.4);
  animation: btn-float  2.8s ease-in-out infinite .7s,
             border-pulse 2.8s ease-in-out infinite;
}
.dr-btn--outline:hover {
  animation: none;
  border-radius: 4px;
  background: rgba(200,150,80,.06);
  border-color: var(--accent);
}

/* Trust pills — анимированные */
@keyframes dr-trust-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes dr-trust-float {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-4px);}
}
@keyframes dr-trust-tick {
  from { stroke-dashoffset: 20; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes dr-trust-circle {
  from { stroke-dashoffset: 52; }
  to   { stroke-dashoffset: 0;  }
}
@keyframes dr-trust-glow-pulse {
  0%,100% { opacity: 0; transform: scale(.8); }
  50%     { opacity: 1; transform: scale(1.4);}
}
@keyframes dr-trust-shim {
  0%,100% { left: -80%; }
  40%     { left: 140%; }
}
@keyframes dr-trust-border {
  0%,100% { border-color: rgba(25,152,18,.18); }
  50%     { border-color: rgba(25,152,18,.45); }
}

.dr-hero__trust {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.dr-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border-radius: 50px;
  border: 1.5px solid rgba(25,152,18,.18);
  background: rgba(25,152,18,.04);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  position: relative;
  overflow: hidden;
  cursor: default;
  /* Входная анимация со сдвигом */
  animation:
    dr-trust-in    .5s cubic-bezier(.34,1.56,.64,1) both,
    dr-trust-float 4s  ease-in-out infinite,
    dr-trust-border 3s ease-in-out infinite;
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    box-shadow .4s,
    background .3s,
    border-color .3s;
}
.dr-trust-pill--1 { animation-delay: .55s, .55s, .55s; }
.dr-trust-pill--2 { animation-delay: .7s,  .9s,  .9s;  }
.dr-trust-pill--3 { animation-delay: .85s, 1.5s, 1.5s; }

/* Hover — стоп float + поднятие + золото */
.dr-trust-pill:hover {
  animation:
    dr-trust-in .5s cubic-bezier(.34,1.56,.64,1) both,
    none,
    none;
  transform: translateY(-5px) scale(1.04);
  background: rgba(25,152,18,.07);
  border-color: rgba(25,152,18,.5);
  box-shadow: 0 8px 24px rgba(25,152,18,.14), 0 2px 6px rgba(25,152,18,.08);
}

/* Shimmer */
.dr-trust-pill::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-12deg);
  animation: dr-trust-shim 5s ease-in-out infinite;
  pointer-events: none;
}
.dr-trust-pill--2::before { animation-delay: 1.5s; }
.dr-trust-pill--3::before { animation-delay: 3s;   }

/* Glow-spot за иконкой */
.dr-trust-pill__glow {
  position: absolute;
  left: 6px; top: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,152,18,.22) 0%, transparent 70%);
  transform: translateY(-50%);
  animation: dr-trust-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
.dr-trust-pill--2 .dr-trust-pill__glow { animation-delay: 1s;  }
.dr-trust-pill--3 .dr-trust-pill__glow { animation-delay: 2s;  }

/* SVG иконка */
.dr-trust-pill__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dr-trust-pill__svg {
  width: 20px; height: 20px;
  display: block;
}

/* Анимация рисования круга */
.dr-trust-pill__circle {
  stroke-dasharray: 52;
  stroke-dashoffset: 52;
  animation: dr-trust-circle .6s cubic-bezier(.4,0,.2,1) both;
}
.dr-trust-pill--1 .dr-trust-pill__circle { animation-delay: .65s; }
.dr-trust-pill--2 .dr-trust-pill__circle { animation-delay: .80s; }
.dr-trust-pill--3 .dr-trust-pill__circle { animation-delay: .95s; }

/* Анимация рисования галочки */
.dr-trust-pill__tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: dr-trust-tick .4s cubic-bezier(.4,0,.2,1) both;
}
.dr-trust-pill--1 .dr-trust-pill__tick { animation-delay: .9s;  }
.dr-trust-pill--2 .dr-trust-pill__tick { animation-delay: 1.05s;}
.dr-trust-pill--3 .dr-trust-pill__tick { animation-delay: 1.2s; }

.dr-trust-pill__text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}




/* ── Визуал: светлый терминал + JS-орбиты ── */
.dr-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: 40px 20px;
}

/* ══════════════════════════════════════════════════════
   ОРБИТЫ — позиционируются через JS (style.left/top)
══════════════════════════════════════════════════════ */
.dr-orbit-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* Карточка-спутник — базовый стиль */
.dr-fc {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px 10px 12px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.05),
    0 0 0 1px rgba(200,150,80,.18);
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
  /* transform задаётся через JS */
  transition:
    box-shadow .35s,
    border-radius .3s;
  overflow: hidden;
}

/* shimmer */
.dr-fc::after {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  animation: dr-fc-shim 4s ease-in-out infinite;
}
.dr-fc--shield::after { animation-delay: 1.4s; }
.dr-fc--mobile::after { animation-delay: 2.8s; }
@keyframes dr-fc-shim {
  0%,100% { left:-80%; }
  40%     { left:140%; }
}

.dr-fc:hover {
  box-shadow:
    0 16px 40px rgba(200,150,80,.28),
    0 0 0 1.5px rgba(200,150,80,.65);
  border-radius: 18px;
}

.dr-fc__icon  { font-size: 18px; line-height: 1; flex-shrink: 0; }
.dr-fc__body  { display: flex; flex-direction: column; gap: 1px; }
.dr-fc__label { font-size: 12px; font-weight: 600; color: var(--text-light); }
.dr-fc__value { font-size: 18px; font-weight: 900; color: var(--accent); line-height: 1; }

/* ══════════════════════════════════════════════════════
   ТЕРМИНАЛ — СВЕТЛЫЙ
══════════════════════════════════════════════════════ */
.dr-terminal {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.10),
    0 4px 12px rgba(0,0,0,.06);
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 3;
  /* плавное покачивание */
  animation: dr-terminal-float 5s ease-in-out infinite;
  transition: box-shadow .4s;
  will-change: transform;
}
@keyframes dr-terminal-float {
  0%,100% { transform: translateY(0)    rotate(-.3deg); }
  50%     { transform: translateY(-9px) rotate(.3deg);  }
}

/* Шапка — СВЕТЛАЯ */
.dr-terminal__header {
  background: linear-gradient(135deg, #FAF7F2, #F2EBE0);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.dr-terminal__traffic {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.dr-terminal__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .25s, filter .25s;
}
.dr-terminal__header:hover .dr-terminal__dot {
  transform: scale(1.25);
  filter: brightness(1.1);
}
.dr-terminal__title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-align: center;
  font-family: monospace;
  letter-spacing: .04em;
}
.dr-terminal__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #199812;
  font-family: monospace;
  flex-shrink: 0;
}
.dr-terminal__status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #199812;
  animation: dr-status-pulse 2s ease-in-out infinite;
}
@keyframes dr-status-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(25,152,18,.6); }
  50%     { box-shadow: 0 0 0 4px rgba(25,152,18,0);  }
}

/* Тело */
.dr-terminal__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
}

.dr-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  flex-wrap: wrap;
  transition: background .2s, transform .2s;
  cursor: default;
}
.dr-task:hover { transform: translateX(4px); }

.dr-task--done  { color: var(--text-light); }
.dr-task--done:hover  { background: rgba(25,152,18,.05); }
.dr-task--active {
  background: rgba(200,150,80,.07);
  color: var(--text);
  border: 1px solid rgba(200,150,80,.2);
}
.dr-task--active:hover { background: rgba(200,150,80,.12); }
.dr-task--pending { color: #c8bfb5; }
.dr-task--pending:hover { background: rgba(0,0,0,.03); color: var(--text-light); }

.dr-task__status {
  flex-shrink: 0;
  width: 18px; text-align: center; font-size: 11px;
}
.dr-task__status--done   { color: #199812; }
.dr-task__status--active {
  color: var(--accent);
  animation: dr-play-pulse 1.2s ease-in-out infinite;
}
@keyframes dr-play-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.dr-task__name { flex: 1; }
.dr-task__time { font-size: 11px; color: #c8bfb5; margin-left: auto; flex-shrink: 0; }

.dr-task__progress {
  width: 100%;
  height: 3px;
  background: rgba(200,150,80,.15);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.dr-task__progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 2px;
  animation: dr-progress 3s ease-in-out infinite;
}
@keyframes dr-progress {
  0%   { width: 0%;  }
  60%  { width: 72%; }
  100% { width: 72%; }
}

/* Футер */
.dr-terminal__footer {
  padding: 10px 18px 13px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FAF7F2;
}
.dr-terminal__cursor-blink {
  font-family: monospace;
  color: var(--accent);
  font-size: 16px;
  animation: dr-cur-blink .75s step-end infinite;
}
@keyframes dr-cur-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.dr-terminal__hint {
  font-size: 12px;
  color: var(--text-light);
  font-family: monospace;
}

/* ============================================================
   ЗАДАЧИ — КАРТОЧКИ
   ============================================================ */


.dr-tasks-section {
  padding: 40px 0 92px;
  position: relative;
}

/* Dot-grid фон */
.dr-tasks-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,150,80,.2) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: .55;
}
.dr-tasks-section .section-label,
.dr-tasks-section h2,
.dr-tasks-section .divider,
.dr-tasks-section .section-intro { position: relative; z-index: 2; }

/* ─── СЕТКА ─── */
.dr-tasks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  position: relative;
  z-index: 2;
}

/* ─── KEYFRAMES ─── */
/* Float — заметное покачивание */
@keyframes tc-float-1 {
  0%,100% { transform: translateY(0px)   rotate(-0.4deg); }
  50%     { transform: translateY(-12px) rotate(0.35deg); }
}
@keyframes tc-float-2 {
  0%,100% { transform: translateY(0px)   rotate(0.35deg); }
  50%     { transform: translateY(-14px) rotate(-0.4deg); }
}
@keyframes tc-float-3 {
  0%,100% { transform: translateY(0px)   rotate(-0.35deg); }
  50%     { transform: translateY(-10px) rotate(0.4deg); }
}
@keyframes tc-float-4 {
  0%,100% { transform: translateY(0px)   rotate(0.4deg); }
  50%     { transform: translateY(-13px) rotate(-0.35deg); }
}
@keyframes tc-float-5 {
  0%,100% { transform: translateY(0px)   rotate(-0.3deg); }
  50%     { transform: translateY(-11px) rotate(0.35deg); }
}
@keyframes tc-float-6 {
  0%,100% { transform: translateY(0px)   rotate(0.35deg); }
  50%     { transform: translateY(-10px) rotate(-0.3deg); }
}

/* Shimmer */
@keyframes tc-shim {
  0%   { transform: translateX(-180%) skewX(-15deg); }
  100% { transform: translateX(280%)  skewX(-15deg); }
}
/* Иконка — живёт пока не hover */
@keyframes tc-icon-beat {
  0%,70%,100% { transform: scale(1) rotate(0deg); }
  80%         { transform: scale(1.15) rotate(-6deg); }
  90%         { transform: scale(0.95) rotate(3deg); }
}
/* Номер подмигивает */
@keyframes tc-num-wink {
  0%,60%,100% { opacity: .25; transform: translateY(0); }
  70%         { opacity: 1;   transform: translateY(-3px); }
  85%         { opacity: .6;  transform: translateY(0); }
}
/* Цена пульсирует */
@keyframes tc-price-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
/* Бегущая рамка */
@keyframes tc-border-run {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes tc-arrow {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(4px); }
}
@keyframes tc-tick-draw {
  from { stroke-dashoffset: 14; opacity:0; }
  to   { stroke-dashoffset: 0;  opacity:1; }
}
@keyframes tc-price-pop {
  0%   { transform: scale(.88); }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ─── Цветовые переменные ─── */
.dr-task-card--design   { --c:#C89650; --ch:rgba(200,150,80,.14); --cg:rgba(200,150,80,.28); --cs:rgba(200,150,80,.06); }
.dr-task-card--func     { --c:#0aab5e; --ch:rgba(10,171,94,.14);  --cg:rgba(10,171,94,.28);  --cs:rgba(10,171,94,.06);  }
.dr-task-card--speed    { --c:#d49000; --ch:rgba(212,144,0,.14);  --cg:rgba(212,144,0,.28);  --cs:rgba(212,144,0,.06);  }
.dr-task-card--secure   { --c:#1e90ff; --ch:rgba(30,144,255,.14); --cg:rgba(30,144,255,.28); --cs:rgba(30,144,255,.06); }
.dr-task-card--move     { --c:#8040e0; --ch:rgba(128,64,224,.14); --cg:rgba(128,64,224,.28); --cs:rgba(128,64,224,.06); }
.dr-task-card--redesign { --c:#e03060; --ch:rgba(224,48,96,.14);  --cg:rgba(224,48,96,.28);  --cs:rgba(224,48,96,.06);  }

/* ─── КАРТОЧКА — нет overflow:hidden, нет will-change ─── */
.dr-task-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  cursor: default;
  /* НЕТ overflow:hidden — он ломает float-анимацию */
  /* НЕТ will-change — он создаёт stacking context */
  transition: box-shadow .4s, border-color .35s;
}

/* Float-анимации — на самой карточке, без overflow */
.dr-task-card:nth-child(1) { animation: tc-float-1 3.8s ease-in-out infinite; }
.dr-task-card:nth-child(2) { animation: tc-float-2 4.4s ease-in-out infinite .45s; }
.dr-task-card:nth-child(3) { animation: tc-float-3 4.0s ease-in-out infinite .9s; }
.dr-task-card:nth-child(4) { animation: tc-float-4 4.2s ease-in-out infinite .25s; }
.dr-task-card:nth-child(5) { animation: tc-float-5 3.9s ease-in-out infinite .7s; }
.dr-task-card:nth-child(6) { animation: tc-float-6 4.3s ease-in-out infinite .15s; }

/* Shimmer через отдельный элемент внутри — overflow:hidden только на нём */
.dr-task-card__shim {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.dr-task-card__shim::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  animation: tc-shim 5.5s ease-in-out infinite;
}
.dr-task-card:nth-child(2) .dr-task-card__shim::after { animation-delay: .9s;  }
.dr-task-card:nth-child(3) .dr-task-card__shim::after { animation-delay: 1.8s; }
.dr-task-card:nth-child(4) .dr-task-card__shim::after { animation-delay: 2.7s; }
.dr-task-card:nth-child(5) .dr-task-card__shim::after { animation-delay: 3.6s; }
.dr-task-card:nth-child(6) .dr-task-card__shim::after { animation-delay: 4.5s; }

/* Цветная полоска — всегда видна */
.dr-task-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--c), var(--ch), var(--c));
  background-size: 200%;
  opacity: .5;
  transition: opacity .35s, height .3s;
  animation: tc-border-run 3s linear infinite;
  z-index: 4;
}

/* ─── HOVER ─── */
.dr-task-card.is-hovered {
  animation-play-state: paused;
  border-color: var(--c);
  box-shadow:
    0 0 0 1px var(--c),
    0 16px 50px var(--cg),
    0 4px 14px rgba(0,0,0,.07);
}
.dr-task-card.is-hovered::after {
  opacity: 1;
  height: 4px;
  animation: tc-border-run 1.5s linear infinite;
}

/* ─── ТОП КАРТОЧКИ ─── */
.dr-task-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

/* Иконка */
.dr-task-card__icon-wrap {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--ch);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: tc-icon-beat 4s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.dr-task-card:nth-child(2) .dr-task-card__icon-wrap { animation-delay: .7s;  }
.dr-task-card:nth-child(3) .dr-task-card__icon-wrap { animation-delay: 1.4s; }
.dr-task-card:nth-child(4) .dr-task-card__icon-wrap { animation-delay: 2.1s; }
.dr-task-card:nth-child(5) .dr-task-card__icon-wrap { animation-delay: 2.8s; }
.dr-task-card:nth-child(6) .dr-task-card__icon-wrap { animation-delay: 3.5s; }

.dr-task-card.is-hovered .dr-task-card__icon-wrap {
  animation: none;
  transform: translateY(-5px) rotate(-8deg) scale(1.12);
  box-shadow: 0 8px 22px var(--cg);
}

/* Номер */
.dr-task-card__num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--c);
  opacity: .3;
  animation: tc-num-wink 3.5s ease-in-out infinite;
  transition: opacity .3s, transform .3s;
  user-select: none;
}
.dr-task-card:nth-child(2) .dr-task-card__num { animation-delay: .6s;  }
.dr-task-card:nth-child(3) .dr-task-card__num { animation-delay: 1.2s; }
.dr-task-card:nth-child(4) .dr-task-card__num { animation-delay: 1.8s; }
.dr-task-card:nth-child(5) .dr-task-card__num { animation-delay: 2.4s; }
.dr-task-card:nth-child(6) .dr-task-card__num { animation-delay: 3.0s; }
.dr-task-card.is-hovered .dr-task-card__num {
  opacity: 1; animation: none; transform: scale(1.15);
}

/* ─── ЗАГОЛОВОК ─── */
.dr-task-card__title {
  font-size: 18px; font-weight: 800;
  color: var(--text); margin: 0 0 10px;
  line-height: 1.3; position: relative; z-index: 2;
}
.dr-task-card__title::after {
  content: '';
  display: block; height: 2px; border-radius: 2px;
  margin-top: 7px; background: var(--c);
  width: 20px;
  opacity: .5;
  transition: width .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.dr-task-card.is-hovered .dr-task-card__title::after { width: 44px; opacity: 1; }

/* ─── ОПИСАНИЕ ─── */
.dr-task-card__desc {
  font-size: 13.5px; color: var(--text-light);
  line-height: 1.65; margin: 0 0 16px;
  position: relative; z-index: 2;
}

/* ─── СПИСОК ─── */
.dr-task-card__list {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; position: relative; z-index: 2;
}
.dr-task-card__list li {
  font-size: 13px; color: var(--text-light);
  display: flex; align-items: center; gap: 8px;
  transition: color .25s, transform .3s;
}
.dr-task-card.is-hovered .dr-task-card__list li            { color: var(--text); transform: translateX(4px); }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(1){ transition-delay: .03s; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(2){ transition-delay: .07s; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(3){ transition-delay: .11s; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(4){ transition-delay: .15s; }

.dr-task-card__check { flex-shrink: 0; width: 17px; height: 17px; display: block; }
.tc-circle { stroke: var(--ch); stroke-dasharray: 38; stroke-dashoffset: 0; }
.tc-tick {
  stroke: var(--c); stroke-dasharray: 14; stroke-dashoffset: 14; opacity: 0;
  transition: stroke-dashoffset .35s ease, opacity .2s;
}
.dr-task-card.is-hovered .tc-tick { stroke-dashoffset: 0; opacity: 1; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(2) .tc-tick { transition-delay: .07s; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(3) .tc-tick { transition-delay: .14s; }
.dr-task-card.is-hovered .dr-task-card__list li:nth-child(4) .tc-tick { transition-delay: .21s; }

/* ─── ФУТЕР ─── */
.dr-task-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1.5px solid var(--border); margin-top: auto;
  position: relative; z-index: 2;
  transition: border-color .35s;
}
.dr-task-card.is-hovered .dr-task-card__footer { border-color: var(--ch); }

.dr-task-card__price { display: flex; align-items: baseline; gap: 4px; }
.dr-task-card__price-from { font-size: 12px; color: var(--text-light); }
.dr-task-card__price strong {
  font-size: 20px; font-weight: 900; color: var(--c); line-height: 1;
  animation: tc-price-pulse 3s ease-in-out infinite;
}
.dr-task-card:nth-child(2) .dr-task-card__price strong { animation-delay: .5s; }
.dr-task-card:nth-child(3) .dr-task-card__price strong { animation-delay: 1s;  }
.dr-task-card:nth-child(4) .dr-task-card__price strong { animation-delay: 1.5s;}
.dr-task-card:nth-child(5) .dr-task-card__price strong { animation-delay: 2s;  }
.dr-task-card:nth-child(6) .dr-task-card__price strong { animation-delay: 2.5s;}
.dr-task-card.is-hovered .dr-task-card__price strong {
  animation: tc-price-pop .4s ease both;
}

/* КНОПКА — ВИДНА В СТАТИКЕ */
/* Keyframes кнопки */
@keyframes cta-shimmer {
  0%   { left: -80%; }
  45%  { left: 140%; }
  100% { left: 140%; }
}
@keyframes cta-arrow-run {
  0%   { transform: translateX(0);    opacity: 1; }
  45%  { transform: translateX(8px);  opacity: 0; }
  46%  { transform: translateX(-8px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
@keyframes cta-pulse-ring {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.55); opacity: 0;  }
}
@keyframes cta-text-up {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

.dr-task-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  padding: 7px 15px 7px 13px;
  border-radius: 50px;
  color: var(--c);
  border: 1.5px solid var(--ch);
  background: var(--cs);
  cursor: pointer;
  opacity: 1;
  position: relative;
  overflow: hidden;
  /* Пульсирующее кольцо — ::before */
  transition:
    background .28s,
    border-color .28s,
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s,
    color .25s;
}

/* Shimmer в статике */
.dr-task-card__cta::after {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-15deg);
  animation: cta-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Пульсирующее кольцо */
.dr-task-card__cta::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50px;
  border: 1.5px solid var(--c);
  opacity: 0;
  pointer-events: none;
}

/* Прямой hover на кнопке */
.dr-task-card__cta:hover {
  background: var(--ch);
  border-color: var(--c);
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 6px 20px var(--cg),
    0 2px 6px rgba(0,0,0,.08),
    0 0 0 3px var(--cs);
  color: var(--c);
}
.dr-task-card__cta:hover::before {
  animation: cta-pulse-ring .9s ease-out infinite;
}
.dr-task-card__cta:hover::after {
  animation: cta-shimmer 1.2s ease-in-out infinite;
}
.dr-task-card__cta:hover .cta-label {
  animation: cta-text-up .5s ease-in-out infinite;
}
.dr-task-card__cta:hover svg {
  animation: cta-arrow-run .7s ease-in-out infinite;
}

/* При активном состоянии */
.dr-task-card__cta:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 3px 10px var(--cg);
}

/* is-hovered (от родителя) */
.dr-task-card.is-hovered .dr-task-card__cta {
  background: var(--ch);
  border-color: var(--c);
  box-shadow: 0 4px 14px var(--cg);
}



/* ============================================================
   CMS GRID
   ============================================================ */


.dr-cms-section {
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}
.dr-cms-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,150,80,.15) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: .5;
}
.dr-cms-section .section-label,
.dr-cms-section h2,
.dr-cms-section .divider { position: relative; z-index: 2; }

/* ─── СЕТКА: единый блок с внутренними линиями ─── */
.dr-cms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 52px;
  position: relative;
  z-index: 2;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  overflow: visible; /* не clip — иначе float-анимации не видны */
  background: #fff;
  box-shadow:
    0 2px 0 rgba(200,150,80,.1),
    0 20px 60px rgba(0,0,0,.06),
    0 4px 12px rgba(0,0,0,.04);
  /* border-radius только на крайних ячейках — через CSS */
}

/* ─── KEYFRAMES — заметные, топовые ─── */

/* Иконка: непрерывное медленное вращение */
@keyframes cms-icon-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Иконка: покачивание + лёгкий scale для разнообразия */
@keyframes cms-icon-swing {
  0%,100% { transform: rotate(0deg)   scale(1); }
  25%     { transform: rotate(-8deg)  scale(1.08); }
  50%     { transform: rotate(0deg)   scale(1.04); }
  75%     { transform: rotate(8deg)   scale(1.08); }
}
/* Logo-wrap: парение вверх-вниз */
@keyframes cms-logo-float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-8px); }
}
/* Пульсирующий ореол вокруг лого */
@keyframes cms-logo-halo {
  0%,100% { box-shadow: 0 0 0 0 var(--cb), 0 0 0 0 var(--cb); }
  40%     { box-shadow: 0 0 0 8px var(--cb), 0 0 0 0 var(--cb); }
  80%     { box-shadow: 0 0 0 8px transparent, 0 0 0 16px var(--cb); }
}
/* Полоска сверху — бегущий свет */
@keyframes cms-top-run {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}
/* Точки — бегущая волна */
@keyframes cms-dot-wave {
  0%,100% { transform: scaleY(1);   opacity: 1;   }
  50%     { transform: scaleY(1.9); opacity: .55; }
}
/* Номер — мигает */
@keyframes cms-num-wink {
  0%,55%,100% { opacity: .18; transform: scale(1); }
  65%         { opacity: .9;  transform: scale(1.15); }
  80%         { opacity: .45; transform: scale(1); }
}
/* Shimmer */
@keyframes cms-shimmer {
  0%   { left: -80%; }
  45%  { left: 140%; }
  100% { left: 140%; }
}
/* Бейдж дрейфует */
@keyframes cms-badge-drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-3px) rotate(-1deg); }
  66%     { transform: translateY(-1px) rotate(1deg); }
}
/* Hover: спин иконки */
@keyframes cms-icon-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  45%  { transform: rotate(210deg) scale(1.18); }
  72%  { transform: rotate(345deg) scale(.92); }
  88%  { transform: rotate(375deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
/* Hover: переворот для SVG-иконки */
@keyframes cms-icon-flip {
  0%   { transform: rotateY(0deg)    scale(1); }
  45%  { transform: rotateY(195deg)  scale(1.15); }
  72%  { transform: rotateY(340deg)  scale(.94); }
  100% { transform: rotateY(360deg)  scale(1); }
}
/* Hover: glow-пульс */
@keyframes cms-logo-glow {
  0%,100% { box-shadow: 0 0 0 0 var(--cg); }
  50%     { box-shadow: 0 0 0 10px transparent; }
}
/* Hover: dot-seq */
@keyframes cms-dot-seq {
  0%,100% { transform: scale(1);   }
  50%     { transform: scale(1.7); }
}
/* Hover: badge pop */
@keyframes cms-badge-pop {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* Hover: arrow */
@keyframes cms-arrow-run {
  0%   { transform: translateX(0);    opacity: 1; }
  45%  { transform: translateX(7px);  opacity: 0; }
  46%  { transform: translateX(-7px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}


/* ─── Цветовые акценты по CMS ─── */
.dr-cms-card[data-cms="wp"]       { --cc:#2271b1; --cb:rgba(34,113,177,.12); --cg:rgba(34,113,177,.22); }
.dr-cms-card[data-cms="tilda"]    { --cc:#000;    --cb:rgba(0,0,0,.08);      --cg:rgba(0,0,0,.14); }
.dr-cms-card[data-cms="bitrix"]   { --cc:#e12b2b; --cb:rgba(225,43,43,.12); --cg:rgba(225,43,43,.22); }
.dr-cms-card[data-cms="opencart"] { --cc:#1e90ff; --cb:rgba(30,144,255,.12); --cg:rgba(30,144,255,.22); }
.dr-cms-card[data-cms="modx"]     { --cc:#333;    --cb:rgba(51,51,51,.09);   --cg:rgba(51,51,51,.16); }
.dr-cms-card[data-cms="joomla"]   { --cc:#f4a623; --cb:rgba(244,166,35,.12); --cg:rgba(244,166,35,.22); }
.dr-cms-card[data-cms="custom"]   { --cc:#C89650; --cb:rgba(200,150,80,.12); --cg:rgba(200,150,80,.22); }
.dr-cms-card[data-cms="wix"]      { --cc:#0c6efd; --cb:rgba(12,110,253,.12); --cg:rgba(12,110,253,.22); }

/* ─── КАРТОЧКА ─── */
.dr-cms-card {
  background: #fff;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  overflow: hidden;
  cursor: default;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background .35s;
}
.dr-cms-card:nth-child(4),
.dr-cms-card:nth-child(8) { border-right: none; }
.dr-cms-card:nth-child(5),
.dr-cms-card:nth-child(6),
.dr-cms-card:nth-child(7),
.dr-cms-card:nth-child(8) { border-bottom: none; }

/* Цветная полоска сверху — всегда видна, движется */
.dr-cms-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, var(--cc) 30%, var(--cb) 50%, var(--cc) 70%, transparent 100%);
  background-size: 200%;
  opacity: .55;
  animation: cms-top-run 3s linear infinite;
  transition: opacity .35s, height .3s;
  z-index: 4;
}
/* Shimmer */
.dr-cms-card::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-12deg);
  animation: cms-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.dr-cms-card:nth-child(2)::before { animation-delay: .75s; }
.dr-cms-card:nth-child(3)::before { animation-delay: 1.5s; }
.dr-cms-card:nth-child(4)::before { animation-delay: 2.25s; }
.dr-cms-card:nth-child(5)::before { animation-delay: 3s; }
.dr-cms-card:nth-child(6)::before { animation-delay: 3.75s; }
.dr-cms-card:nth-child(7)::before { animation-delay: 4.5s; }
.dr-cms-card:nth-child(8)::before { animation-delay: 5.25s; }

/* ─── Hover ─── */
.dr-cms-card.cms-hovered {
  background: linear-gradient(160deg, rgba(var(--cg), .03) 0%, #fff 60%);
  z-index: 5;
}
.dr-cms-card.cms-hovered::after {
  opacity: 1;
  height: 3px;
}
.dr-cms-card.cms-hovered .dr-cms-card__name {
  color: var(--cc);
}
.dr-cms-card.cms-hovered .dr-cms-card__num {
  opacity: 1;
  transform: scale(1.1);
  color: var(--cc);
  animation: none;
}
.dr-cms-card.cms-hovered .dr-cms-card__badge {
  background: var(--cb);
  border-color: var(--cc);
  color: var(--cc);
  animation: cms-badge-pop .35s ease both;
}
.dr-cms-card.cms-hovered .dr-cms-card__dot--on {
  background: var(--cc);
  animation: cms-dot-seq .35s ease both;
}
.dr-cms-card.cms-hovered .dr-cms-card__dot--on:nth-child(2) { animation-delay: .06s; }
.dr-cms-card.cms-hovered .dr-cms-card__dot--on:nth-child(3) { animation-delay: .12s; }
.dr-cms-card.cms-hovered .dr-cms-card__dot--on:nth-child(4) { animation-delay: .18s; }
.dr-cms-card.cms-hovered .dr-cms-card__dot--on:nth-child(5) { animation-delay: .24s; }
.dr-cms-card.cms-hovered .dr-cms-card__desc {
  color: var(--text);
}
.dr-cms-card.cms-hovered .dr-cms-card__link {
  opacity: 1;
  transform: translateY(0);
}
.dr-cms-card.cms-hovered .dr-cms-card__link svg {
  animation: cms-arrow-run .7s ease-in-out infinite;
}

/* ─── ИКОНКА ─── */
.dr-cms-card__logo-wrap {
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  border-radius: 50%;
  /* парение — всегда видно */
  animation: cms-logo-float 2.8s ease-in-out infinite;
}
.dr-cms-card:nth-child(2) .dr-cms-card__logo-wrap { animation-delay: .35s; }
.dr-cms-card:nth-child(3) .dr-cms-card__logo-wrap { animation-delay: .7s;  }
.dr-cms-card:nth-child(4) .dr-cms-card__logo-wrap { animation-delay: 1.05s;}
.dr-cms-card:nth-child(5) .dr-cms-card__logo-wrap { animation-delay: 1.4s; }
.dr-cms-card:nth-child(6) .dr-cms-card__logo-wrap { animation-delay: 1.75s;}
.dr-cms-card:nth-child(7) .dr-cms-card__logo-wrap { animation-delay: 2.1s; }
.dr-cms-card:nth-child(8) .dr-cms-card__logo-wrap { animation-delay: 2.45s;}

/* Ореол вокруг лого — пульсирует в статике */
.dr-cms-card__logo-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: transparent;
  animation: cms-logo-halo 3s ease-in-out infinite;
  pointer-events: none;
}
.dr-cms-card:nth-child(2) .dr-cms-card__logo-wrap::after { animation-delay: .35s; }
.dr-cms-card:nth-child(3) .dr-cms-card__logo-wrap::after { animation-delay: .7s;  }
.dr-cms-card:nth-child(4) .dr-cms-card__logo-wrap::after { animation-delay: 1.05s;}
.dr-cms-card:nth-child(5) .dr-cms-card__logo-wrap::after { animation-delay: 1.4s; }
.dr-cms-card:nth-child(6) .dr-cms-card__logo-wrap::after { animation-delay: 1.75s;}
.dr-cms-card:nth-child(7) .dr-cms-card__logo-wrap::after { animation-delay: 2.1s; }
.dr-cms-card:nth-child(8) .dr-cms-card__logo-wrap::after { animation-delay: 2.45s;}

.dr-cms-card__img {
  width: 52px; height: 52px;
  object-fit: contain;
  transition: filter .35s;
  /* покачивание иконки — заметное */
  animation: cms-icon-swing 3.5s ease-in-out infinite;
}
.dr-cms-card:nth-child(2) .dr-cms-card__img { animation-delay: .45s; }
.dr-cms-card:nth-child(3) .dr-cms-card__img { animation-delay: .9s;  }
.dr-cms-card:nth-child(4) .dr-cms-card__img { animation-delay: 1.35s;}
.dr-cms-card:nth-child(5) .dr-cms-card__img { animation-delay: 1.8s; }
.dr-cms-card:nth-child(6) .dr-cms-card__img { animation-delay: 2.25s;}
.dr-cms-card:nth-child(7) .dr-cms-card__img { animation-delay: 2.7s; }
.dr-cms-card:nth-child(8) .dr-cms-card__img { animation-delay: 3.15s;}

/* Hover: останавливаем float/swing, делаем спин */
.dr-cms-card.cms-hovered .dr-cms-card__logo-wrap {
  animation: cms-logo-glow 1s ease-in-out infinite;
}
.dr-cms-card.cms-hovered .dr-cms-card__logo-wrap::after {
  animation: none;
}
.dr-cms-card.cms-hovered .dr-cms-card__img {
  animation: cms-icon-spin .75s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 4px 14px var(--cg));
}
.dr-cms-card__logo-code {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--cb);
  display: flex; align-items: center; justify-content: center;
  color: var(--cc);
  transition: box-shadow .35s;
  animation: cms-icon-swing 4s ease-in-out infinite .3s;
}
.dr-cms-card.cms-hovered .dr-cms-card__logo-code {
  box-shadow: 0 6px 20px var(--cg);
  animation: none;
}
.dr-cms-card.cms-hovered .dr-cms-card__logo-code svg {
  animation: cms-icon-flip .75s cubic-bezier(.34,1.56,.64,1) both;
}

/* ─── Порядковый номер ─── */
.dr-cms-card__num {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 11px; font-weight: 900;
  letter-spacing: .08em;
  color: var(--cc);
  opacity: .18;
  animation: cms-num-wink 4s ease-in-out infinite;
  transition: opacity .3s, transform .3s, color .3s;
  user-select: none;
  z-index: 2;
}
.dr-cms-card:nth-child(2) .dr-cms-card__num { animation-delay: .5s; }
.dr-cms-card:nth-child(3) .dr-cms-card__num { animation-delay: 1s; }
.dr-cms-card:nth-child(4) .dr-cms-card__num { animation-delay: 1.5s; }
.dr-cms-card:nth-child(5) .dr-cms-card__num { animation-delay: 2s; }
.dr-cms-card:nth-child(6) .dr-cms-card__num { animation-delay: 2.5s; }
.dr-cms-card:nth-child(7) .dr-cms-card__num { animation-delay: 3s; }
.dr-cms-card:nth-child(8) .dr-cms-card__num { animation-delay: 3.5s; }

/* ─── НАЗВАНИЕ ─── */
.dr-cms-card__name {
  font-size: 14px; font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  position: relative; z-index: 2;
  transition: color .3s;
}

/* ─── ТОЧКИ УРОВНЯ ─── */
.dr-cms-card__level {
  display: flex; gap: 5px;
  margin-bottom: 8px;
  position: relative; z-index: 2;
}
.dr-cms-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background .3s, transform .3s;
}
.dr-cms-card__dot--on {
  background: rgba(200,150,80,.5);
  /* бегущая волна по точкам в статике */
  animation: cms-dot-wave 2s ease-in-out infinite;
}
.dr-cms-card__dot--on:nth-child(1) { animation-delay: .00s; }
.dr-cms-card__dot--on:nth-child(2) { animation-delay: .15s; }
.dr-cms-card__dot--on:nth-child(3) { animation-delay: .30s; }
.dr-cms-card__dot--on:nth-child(4) { animation-delay: .45s; }
.dr-cms-card__dot--on:nth-child(5) { animation-delay: .60s; }

/* ─── БЕЙДЖ ─── */
.dr-cms-card__badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 50px;
  background: rgba(200,150,80,.07);
  color: var(--text-light);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  position: relative; z-index: 2;
  transition: background .3s, border-color .3s, color .3s;
  /* дрейф в статике */
  animation: cms-badge-drift 3.5s ease-in-out infinite;
}

/* ─── ОПИСАНИЕ ─── */
.dr-cms-card__desc {
  font-size: 12px; color: var(--text-light);
  line-height: 1.5; text-align: center;
  position: relative; z-index: 2;
  transition: color .3s;
  margin-bottom: 10px;
  flex: 1;
}

/* ─── Ссылка «Заказать» — появляется при hover ─── */
.dr-cms-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--cc); text-decoration: none;
  padding: 5px 12px; border-radius: 50px;
  border: 1.5px solid var(--cb);
  background: transparent;
  cursor: pointer; font-family: inherit;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .35s cubic-bezier(.34,1.56,.64,1),
              background .25s, border-color .25s;
  position: relative; z-index: 2;
}
.dr-cms-card__link:hover {
  background: var(--cb);
  border-color: var(--cc);
}




/* ============================================================
   ПРАЙС
   ============================================================ */
.dr-pricing-section {
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}
.dr-pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,150,80,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,80,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.dr-pricing-section .section-label,
.dr-pricing-section h2,
.dr-pricing-section .divider,
.dr-pricing-section .section-intro { position: relative; z-index: 2; }

/* ─── СЕТКА ─── */
.dr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  position: relative;
  z-index: 2;
  align-items: start;
}

/* ─── KEYFRAMES ─── */
@keyframes pc-float-1 { 0%,100%{transform:translateY(0) rotate(-.35deg)} 50%{transform:translateY(-12px) rotate(.3deg)} }
@keyframes pc-float-2 { 0%,100%{transform:translateY(0) rotate(.3deg)}  50%{transform:translateY(-15px) rotate(-.35deg)} }
@keyframes pc-float-3 { 0%,100%{transform:translateY(0) rotate(-.3deg)} 50%{transform:translateY(-11px) rotate(.35deg)} }

@keyframes pc-shimmer {
  0%   { left: -80%; }
  45%  { left: 140%; }
  100% { left: 140%; }
}
@keyframes pc-top-run {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pc-icon-beat {
  0%,60%,100% { transform: scale(1) rotate(0deg); }
  70%  { transform: scale(1.22) rotate(-9deg); }
  80%  { transform: scale(.92) rotate(5deg); }
  90%  { transform: scale(1.08) rotate(-2deg); }
}
@keyframes pc-amount-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}
@keyframes pc-dot-breathe {
  0%,100% { opacity: .5; transform: scale(1); box-shadow: 0 0 0 0 rgba(200,150,80,.4); }
  50%     { opacity: 1;  transform: scale(1.2); box-shadow: 0 0 0 5px rgba(200,150,80,0); }
}
@keyframes pc-num-wink {
  0%,60%,100% { opacity: .2; }
  70%         { opacity: 1; transform: scale(1.15); }
  85%         { opacity: .5; }
}
@keyframes pc-popular-bounce {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-4px) rotate(1deg); }
}
@keyframes pc-tick-draw {
  from { stroke-dashoffset: 14; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes pc-circle-draw {
  from { stroke-dashoffset: 38; }
  to   { stroke-dashoffset: 0;  }
}
@keyframes pc-btn-glow {
  0%,100% { box-shadow: 0 4px 16px rgba(200,150,80,.25); }
  50%     { box-shadow: 0 8px 32px rgba(200,150,80,.5); }
}
@keyframes pc-btn-arrow {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(5px); }
}
@keyframes pc-border-pulse {
  0%,100% { border-color: rgba(200,150,80,.3); }
  50%     { border-color: rgba(200,150,80,.8); }
}

/* ─── Цветовые переменные по типу ─── */
.dr-price-card--single  { --pc:#9A6E30; --pcb:rgba(154,110,48,.12); --pcg:rgba(154,110,48,.22); --pcs:rgba(154,110,48,.06); }
.dr-price-card--medium  { --pc:#C89650; --pcb:rgba(200,150,80,.14); --pcg:rgba(200,150,80,.28); --pcs:rgba(200,150,80,.07); }
.dr-price-card--large   { --pc:#7A5E2A; --pcb:rgba(122,94,42,.12);  --pcg:rgba(122,94,42,.22);  --pcs:rgba(122,94,42,.06);  }

/* ─── КАРТОЧКА ─── */
.dr-price-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .35s, box-shadow .4s;
}
.dr-price-card:nth-child(1) { animation: pc-float-1 4.2s ease-in-out infinite; }
.dr-price-card:nth-child(2) { animation: pc-float-2 4.7s ease-in-out infinite .4s; }
.dr-price-card:nth-child(3) { animation: pc-float-3 4.4s ease-in-out infinite .8s; }

/* Цветная бегущая полоска сверху */
.dr-price-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pc), var(--pcb), var(--pc), transparent);
  background-size: 200%;
  opacity: .6;
  animation: pc-top-run 2.5s linear infinite;
  z-index: 5;
  transition: height .3s, opacity .3s;
}
/* Shimmer */
.dr-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-12deg);
  animation: pc-shimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.dr-price-card:nth-child(2)::before { animation-delay: 1.5s; }
.dr-price-card:nth-child(3)::before { animation-delay: 3s; }

/* Canvas */
.dr-price-card__canvas {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
}

/* ─── HOVER ─── */
.dr-price-card.is-hovered {
  animation-play-state: paused;
  border-color: var(--pc);
  box-shadow: 0 0 0 1px var(--pc), 0 20px 56px var(--pcg), 0 4px 14px rgba(0,0,0,.07);
}
.dr-price-card.is-hovered::after { opacity: 1; height: 4px; }

/* Иконка — спин при hover карточки */
.dr-price-card.is-hovered .dr-price-card__icon-wrap {
  transform: rotate(360deg) scale(1.15);
  box-shadow: 0 8px 28px var(--pcg);
  background: var(--pcb);
}

/* Цена — увеличивается при hover */
.dr-price-card.is-hovered .dr-price-card__amount {
  transform: scale(1.22);
  transform-origin: left center;
  color: var(--pc);
  animation: none;
  display: inline-block;
}
.dr-price-card.is-hovered .dr-price-card__num { opacity: 1; color: var(--pc); animation: none; }
.dr-price-card.is-hovered .pf-c { stroke-dashoffset: 0; }
.dr-price-card.is-hovered .pf-t { stroke-dashoffset: 0; opacity: 1; }
.dr-price-card.is-hovered .on   { color: var(--text); transform: translateX(3px); }
.dr-price-card.is-hovered .on:nth-child(1) { transition-delay: .03s; }
.dr-price-card.is-hovered .on:nth-child(2) { transition-delay: .07s; }
.dr-price-card.is-hovered .on:nth-child(3) { transition-delay: .11s; }
.dr-price-card.is-hovered .on:nth-child(4) { transition-delay: .15s; }
.dr-price-card.is-hovered .on:nth-child(5) { transition-delay: .19s; }
.dr-price-card.is-hovered .dr-price-card__btn:not(.dr-price-card__btn--accent) {
  border-color: var(--pc);
  color: var(--pc);
  background: var(--pcs);
}

/* ─── ВЕРХ ─── */
.dr-price-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: linear-gradient(135deg, #FAF7F2, #F2EBE0);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
  border-radius: 20px 20px 0 0;
}
.dr-price-card__label-row {
  display: flex; align-items: center; gap: 7px;
}
.dr-price-card__dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc);
  animation: pc-dot-breathe 2s ease-in-out infinite;
  flex-shrink: 0;
}
.dr-price-card--single  .dr-price-card__dot-live { animation-delay: 0s; }
.dr-price-card--medium  .dr-price-card__dot-live { animation-delay: .6s; }
.dr-price-card--large   .dr-price-card__dot-live { animation-delay: 1.2s; }

.dr-price-card__label-text {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-light);
}
.dr-price-card__num {
  font-size: 11px; font-weight: 900;
  letter-spacing: .08em;
  color: var(--pc);
  opacity: .3;
  animation: pc-num-wink 3.5s ease-in-out infinite;
  transition: opacity .3s;
}
.dr-price-card--medium  .dr-price-card__num { animation-delay: .7s; }
.dr-price-card--large   .dr-price-card__num { animation-delay: 1.4s; }

/* Популярный бейдж */
.dr-price-card__popular {
  position: absolute;
  top: -1px; right: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  animation: pc-popular-bounce 3s ease-in-out infinite;
  z-index: 6;
}

/* ─── ТЕЛО ─── */
.dr-price-card__icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--pcb);
  color: var(--pc);
  display: flex; align-items: center; justify-content: center;
  margin: 24px auto 0;
  transition: background .3s, color .3s, box-shadow .35s, transform .55s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 2;
  flex-shrink: 0;
  cursor: pointer;
}
/* Иконка реагирует на hover иконки напрямую */
.dr-price-card__icon-wrap:hover {
  transform: rotate(360deg) scale(1.18) !important;
  box-shadow: 0 8px 28px var(--pcg);
  background: var(--pcb);
}
.dr-price-card__name {
  font-size: 22px; font-weight: 900;
  color: var(--text);
  margin: 14px 20px 0;
  position: relative; z-index: 2;
}
.dr-price-card__price-block {
  margin: 8px 20px 0;
  display: flex; align-items: baseline; gap: 5px;
  position: relative; z-index: 2;
}
.dr-price-card__from {
  font-size: 14px; color: var(--text-light);
}
.dr-price-card__amount {
  font-size: 32px; font-weight: 900;
  color: var(--text);
  line-height: 1;
  display: inline-block;
  animation: pc-amount-pulse 3.5s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), color .3s;
  transform-origin: left center;
}
.dr-price-card--medium .dr-price-card__amount { animation-delay: .5s; }
.dr-price-card--large  .dr-price-card__amount { animation-delay: 1s; }

.dr-price-card__period {
  font-size: 12.5px; color: var(--text-light);
  margin: 5px 20px 0;
  position: relative; z-index: 2;
}
.dr-price-card__period--green { color: #199812; font-weight: 600; }

/* ─── СПИСОК ─── */
.dr-price-card__list {
  list-style: none; padding: 0;
  margin: 16px 20px 0;
  display: flex; flex-direction: column; gap: 9px;
  flex: 1;
  position: relative; z-index: 2;
}
.dr-price-card__list li {
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  transition: color .25s, transform .3s;
}
.dr-price-card__list li.on  { color: var(--text-light); }
.dr-price-card__list li.off { color: #ccc; }
.pf-check { flex-shrink: 0; width: 17px; height: 17px; display: block; }
.pf-c {
  stroke: rgba(200,150,80,.25);
  stroke-dasharray: 38; stroke-dashoffset: 0;
  transition: stroke .3s;
}
li.off .pf-c { stroke: rgba(200,200,200,.4); }
.pf-t {
  stroke: var(--accent);
  stroke-dasharray: 14; stroke-dashoffset: 14; opacity: 0;
  transition: stroke-dashoffset .35s ease, opacity .2s;
}
li.off .pf-t { stroke: #ccc; }
.dr-price-card.is-hovered .pf-t  { stroke-dashoffset: 0; opacity: 1; }
.dr-price-card.is-hovered .on:nth-child(2) .pf-t { transition-delay: .07s; }
.dr-price-card.is-hovered .on:nth-child(3) .pf-t { transition-delay: .14s; }
.dr-price-card.is-hovered .on:nth-child(4) .pf-t { transition-delay: .21s; }
.dr-price-card.is-hovered .on:nth-child(5) .pf-t { transition-delay: .28s; }

/* ─── КНОПКА ─── */
.dr-price-card__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 20px 20px 24px;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s,
              background .25s, border-color .25s, color .25s;
  z-index: 2;
  border: 1.5px solid var(--pcb);
  background: transparent;
  color: var(--pc);
  animation: pc-border-pulse 2.5s ease-in-out infinite;
}
.dr-price-card__btn:hover {
  animation: none;
  transform: translateY(-2px) scale(1.03);
  border-color: var(--pc);
  background: var(--pcs);
  box-shadow: 0 6px 20px var(--pcg);
}
.dr-price-card__btn:hover svg { animation: pc-btn-arrow .6s ease-in-out infinite; }
.dr-price-card__btn:active  { transform: translateY(0) scale(.98); }

/* Акцентная кнопка (featured) */
.dr-price-card__btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  animation: pc-btn-glow 2.5s ease-in-out infinite;
}
.dr-price-card__btn--accent:hover {
  background: var(--accent-dark);
  animation: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px rgba(200,150,80,.45);
}

/* Shimmer на кнопке */
.dr-price-card__btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-12deg);
  animation: pc-shimmer 3.5s ease-in-out infinite;
}

/* ─── ГАРАНТИЙНАЯ ПОЛОСКА ─── */
.dr-guarantee-strip {
  margin-top: 44px;
  background: #fff;
  border: 1.5px solid rgba(200,150,80,.25);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .35s, box-shadow .4s;
  animation: pc-border-pulse 3s ease-in-out infinite;
}
.dr-guarantee-strip:hover {
  border-color: rgba(200,150,80,.55);
  box-shadow: 0 12px 40px rgba(200,150,80,.14);
  animation: none;
}
/* Бегущая полоска сверху */
.dr-guarantee-strip::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(200,150,80,.4), var(--accent), transparent);
  background-size: 200%;
  animation: pc-top-run 2.5s linear infinite;
  border-radius: 20px 20px 0 0;
  opacity: .7;
}
/* Shimmer */
.dr-guarantee-strip::before {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-12deg);
  animation: pc-shimmer 5s ease-in-out infinite 1.5s;
  pointer-events: none;
  z-index: 0;
}

/* ── ЩИТ-ИКОНКА ── */
@keyframes gs-shield-float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}
@keyframes gs-check-draw {
  from { stroke-dashoffset: 30; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes gs-ring-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.9); opacity: 0;  }
}
@keyframes gs-ring-pulse-2 {
  0%   { transform: scale(1);   opacity: .3; }
  100% { transform: scale(2.4); opacity: 0;  }
}
@keyframes gs-btn-arrow {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(5px); }
}
@keyframes gs-fact-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dr-guarantee-strip__shield {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  animation: gs-shield-float 3s ease-in-out infinite;
  z-index: 2;
}

.dr-gs-svg {
  width: 48px; height: 56px;
  position: relative; z-index: 2;
}
.dr-gs-bg {
  fill: rgba(200,150,80,.12);
}
.dr-gs-outline {
  stroke: var(--accent);
  opacity: .7;
}
.dr-gs-check {
  stroke: var(--accent);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: gs-check-draw .6s cubic-bezier(.4,0,.2,1) .4s both;
}
.dr-gs-glare {
  fill: rgba(255,255,255,.18);
}

/* Кольца */
.dr-gs-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,150,80,.35);
  pointer-events: none;
}
.dr-gs-ring--1 { animation: gs-ring-pulse   2.4s ease-out infinite 0s; }
.dr-gs-ring--2 { animation: gs-ring-pulse-2 2.4s ease-out infinite .7s; }

.dr-guarantee-strip:hover .dr-gs-bg {
  fill: rgba(200,150,80,.18);
  transition: fill .3s;
}
.dr-guarantee-strip:hover .dr-gs-outline {
  opacity: 1;
}

/* ── ТЕЛО ТЕКСТА ── */
.dr-guarantee-strip__body {
  flex: 1;
  position: relative; z-index: 2;
}
.dr-guarantee-strip__title {
  font-size: 16px; font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
}
.dr-guarantee-strip__sub {
  font-size: 13.5px; color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Три факта */
.dr-guarantee-strip__facts {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.dr-gs-fact {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  animation: gs-fact-in .5s ease both;
}
.dr-gs-fact:nth-child(1) { animation-delay: .6s; }
.dr-gs-fact:nth-child(2) { animation-delay: .75s; }
.dr-gs-fact:nth-child(3) { animation-delay: .9s; }
.dr-gs-fact svg { color: #199812; flex-shrink: 0; }

/* ── КНОПКА ── */
.dr-guarantee-strip__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff;
  padding: 13px 26px; border-radius: 50px;
  font-size: 14px; font-weight: 700;
  font-family: inherit; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .3s;
  animation: pc-btn-glow 2.5s ease-in-out infinite;
  z-index: 2;
}
.dr-guarantee-strip__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(-12deg);
  animation: pc-shimmer 3s ease-in-out infinite;
}
.dr-guarantee-strip__btn:hover {
  animation: none;
  background: var(--accent-dark);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 30px rgba(200,150,80,.45);
}
.dr-guarantee-strip__btn:hover svg {
  animation: gs-btn-arrow .6s ease-in-out infinite;
}
.dr-guarantee-strip__btn:active {
  transform: translateY(-1px) scale(.99);
}






/* ============================================================
   КЕЙСЫ
   ============================================================ */
.dr-cases-section { padding: 88px 0 80px; position: relative; }

.dr-cases-list {
  display: flex; flex-direction: column;
  gap: 28px; margin-top: 52px;
}

/* ─── KEYFRAMES ─── */
@keyframes cs-float-1 { 0%,100%{transform:translateY(0)rotate(-.2deg)}50%{transform:translateY(-8px)rotate(.2deg)} }
@keyframes cs-float-2 { 0%,100%{transform:translateY(0)rotate(.2deg)} 50%{transform:translateY(-10px)rotate(-.2deg)} }
@keyframes cs-float-3 { 0%,100%{transform:translateY(0)rotate(-.2deg)}50%{transform:translateY(-7px)rotate(.2deg)} }
@keyframes cs-shimmer { 0%{left:-80%}45%{left:140%}100%{left:140%} }
@keyframes cs-top-run { 0%{background-position:0%50%}100%{background-position:200%50%} }
@keyframes cs-bar-grow { from{width:0} }
@keyframes cs-arrow-bounce { 0%,100%{transform:translateX(0)}50%{transform:translateX(8px)} }
@keyframes cs-tag-float { 0%,100%{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-4px)rotate(1deg)} }
@keyframes cs-score-enter { from{opacity:0;transform:translateY(10px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)} }
@keyframes cs-pulse-ring { 0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0} }
@keyframes cs-result-lift { from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)} }
@keyframes cs-good-pop { 0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)} }
@keyframes cs-num-wink { 0%,60%,100%{opacity:.18}70%{opacity:.9;transform:scale(1.1)} }
@keyframes cs-icon-spin { 0%{transform:rotate(0)scale(1)}45%{transform:rotate(200deg)scale(1.2)}70%{transform:rotate(340deg)scale(.92)}100%{transform:rotate(360deg)scale(1)} }
@keyframes cs-btn-arrow { 0%,100%{transform:translateX(0)}50%{transform:translateX(5px)} }
@keyframes cs-label-pop { 0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)} }
@keyframes cs-sub-glow  { 0%,100%{opacity:.7}50%{opacity:1;color:var(--text)} }

/* ─── Цветовые переменные ─── */
.dr-case--speed  { --cc:#d49000; --cb:rgba(212,144,0,.12);  --cg:rgba(212,144,0,.25); }
.dr-case--func   { --cc:#0aab5e; --cb:rgba(10,171,94,.12);  --cg:rgba(10,171,94,.25);  }
.dr-case--secure { --cc:#1e90ff; --cb:rgba(30,144,255,.12); --cg:rgba(30,144,255,.25); }

/* ─── КАРТОЧКА ─── */
.dr-case {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 300px 1fr;
  /* НЕТ overflow:hidden — он убивает transform на детях */
  position: relative;
  transition: border-color .35s, box-shadow .4s;
}
.dr-case:nth-child(1) { animation: cs-float-1 4.5s ease-in-out infinite; }
.dr-case:nth-child(2) { animation: cs-float-2 5s ease-in-out infinite .5s; }
.dr-case:nth-child(3) { animation: cs-float-3 4.7s ease-in-out infinite 1s; }

/* Shimmer — через отдельный враппер чтобы не было overflow:hidden */
.dr-case__shim {
  position: absolute; inset: 0;
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.dr-case__shim::after {
  content: '';
  position: absolute; top:0; left:-80%; width:45%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-12deg);
  animation: cs-shimmer 6s ease-in-out infinite;
}
.dr-case:nth-child(2) .dr-case__shim::after { animation-delay: 2s; }
.dr-case:nth-child(3) .dr-case__shim::after { animation-delay: 4s; }

/* Бегущая полоска сверху */
.dr-case::after {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2.5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, var(--cc), var(--cb), var(--cc), transparent);
  background-size: 200%;
  opacity: .55;
  animation: cs-top-run 3s linear infinite;
  z-index: 4;
  transition: opacity .3s, height .3s;
}

/* Canvas */
.dr-case__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; border-radius: 20px;
}

/* ── HOVER состояние карточки ── */
.dr-case.cs-active {
  animation-play-state: paused;
  border-color: var(--cc);
  box-shadow:
    0 0 0 1px var(--cc),
    0 20px 56px var(--cg),
    0 4px 14px rgba(0,0,0,.06);
}
.dr-case.cs-active::after { opacity: 1; height: 3.5px; }
.dr-case.cs-active .dr-case__visual {
  background: rgba(200,150,80,.03);
}

/* ─── ЛЕВАЯ ПАНЕЛЬ ─── */
.dr-case__visual {
  padding: 24px;
  border-right: 1px solid var(--border);
  border-radius: 20px 0 0 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 2;
  transition: background .4s;
}

/* ── Тег ── */
.dr-case__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 50px;
  background: var(--cb); color: var(--cc); border: 1px solid var(--cc);
  cursor: default;
  animation: cs-tag-float 3.5s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s, background .25s;
}
.dr-case:nth-child(2) .dr-case__tag { animation-delay: .6s; }
.dr-case:nth-child(3) .dr-case__tag { animation-delay: 1.2s; }

.dr-case__tag:hover {
  animation-play-state: paused;
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow: 0 6px 22px var(--cg);
  background: var(--cc);
  color: #fff;
}

/* CMS бейдж */
.dr-case__cms-badge {
  font-size: 11px; font-weight: 600; color: var(--text-light);
  background: rgba(0,0,0,.05);
  padding: 4px 11px; border-radius: 50px;
  cursor: default;
  transition: background .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.dr-case__cms-badge:hover {
  background: var(--cb);
  color: var(--cc);
  transform: scale(1.08);
}

/* ── До/После ── */
.dr-case__ba {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dr-case__ba-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1;
}

/* Лейблы До/После */
.dr-case__ba-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 50px;
  cursor: default;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.dr-case__ba-label--bad  { background: rgba(220,53,53,.1); color: #c0392b; }
.dr-case__ba-label--good { background: rgba(25,152,18,.1);  color: #199812; }
.dr-case__ba-label:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  animation: cs-label-pop .4s ease;
}

/* Числа PageSpeed */
.dr-case__score {
  font-size: 52px; font-weight: 900; line-height: 1;
  cursor: default;
  display: inline-block;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s, text-shadow .3s;
  animation: cs-score-enter .6s cubic-bezier(.34,1.56,.64,1) both;
}
.dr-case__score--bad  { color: #c0392b; }
.dr-case__score--good { color: #199812; }
.dr-case__score--bad:hover {
  transform: scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 4px 10px rgba(192,57,43,.35));
}
.dr-case__score--good:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 6px 16px rgba(25,152,18,.45));
  animation: cs-good-pop .4s cubic-bezier(.34,1.56,.64,1);
}

.dr-case__ba-sub {
  font-size: 11px; color: var(--text-light); text-align: center;
  transition: color .3s, transform .3s;
}
.dr-case.cs-active .dr-case__ba-sub { color: var(--text); }

/* Прогресс-бар */
.dr-case__score-bar {
  width: 100%; height: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
  cursor: pointer;
  transition: height .3s;
}
.dr-case__score-bar:hover { height: 10px; }
.dr-case__score-fill {
  height: 100%; border-radius: 3px; width: var(--w);
  animation: cs-bar-grow 1.2s ease .5s both;
  transition: filter .3s, transform .3s;
  position: relative;
}
.dr-case__score-fill--bad  { background: linear-gradient(90deg,#c0392b,#e74c3c); }
.dr-case__score-fill--good { background: linear-gradient(90deg,#199812,#2ecc71); }
.dr-case__score-bar:hover .dr-case__score-fill--good {
  filter: brightness(1.3) drop-shadow(0 0 4px rgba(25,152,18,.5));
  transform: scaleX(1.02);
}
.dr-case__score-bar:hover .dr-case__score-fill--bad {
  filter: brightness(1.2);
}

/* Текстовые метрики */
.dr-case__metric {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3;
  padding: 10px 8px; border-radius: 12px; width: 100%;
  cursor: default;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s, background .3s, color .3s;
}
.dr-case__metric svg {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.dr-case__metric--bad  { color: #c0392b; background: rgba(220,53,53,.07); }
.dr-case__metric--good { color: #199812; background: rgba(25,152,18,.07); }

.dr-case__metric--bad:hover {
  transform: scale(.94) rotate(-2deg);
  background: rgba(220,53,53,.04);
}
.dr-case__metric--good:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 8px 24px rgba(25,152,18,.25);
  background: rgba(25,152,18,.13);
}
.dr-case__metric--good:hover svg {
  transform: rotate(360deg) scale(1.25);
}

/* Стрелка */
.dr-case__ba-arrow {
  flex-shrink: 0; color: rgba(200,150,80,.35);
  transition: color .3s, transform .3s;
}
.dr-case.cs-active .dr-case__ba-arrow {
  color: var(--cc);
  animation: cs-arrow-bounce .8s ease-in-out infinite;
}

/* ─── ПРАВАЯ ПАНЕЛЬ ─── */
.dr-case__desc {
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 2;
}

/* Заголовок */
.dr-case__title {
  font-size: 19px; font-weight: 800;
  color: var(--text); margin: 0; line-height: 1.3;
  cursor: default;
  transition: color .3s;
  position: relative; padding-bottom: 8px;
}
.dr-case__title::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; height: 2px;
  background: var(--cc); border-radius: 2px;
  width: 20px; opacity: .45;
  transition: width .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.dr-case.cs-active .dr-case__title { color: var(--cc); }
.dr-case.cs-active .dr-case__title::after { width: 50px; opacity: 1; }
.dr-case__title:hover { color: var(--cc) !important; }
.dr-case__title:hover::after { width: 50px !important; opacity: 1 !important; }

/* Текст */
.dr-case__text {
  font-size: 14px; color: var(--text-light);
  line-height: 1.7; margin: 0; flex: 1;
  transition: color .3s;
}
.dr-case.cs-active .dr-case__text { color: var(--text); }

/* Результат-плашка */
.dr-case__result {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(25,152,18,.08); color: #199812;
  font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 10px;
  align-self: flex-start;
  cursor: default;
  position: relative; overflow: hidden;
  transition: background .3s, box-shadow .35s,
              transform .4s cubic-bezier(.34,1.56,.64,1), color .3s;
}
/* shimmer на результате */
.dr-case__result::before {
  content: '';
  position: absolute; top:0; left:-80%; width:45%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-12deg);
  animation: cs-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.dr-case__result svg {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.dr-case__result:hover {
  background: rgba(25,152,18,.15);
  box-shadow: 0 8px 28px rgba(25,152,18,.25);
  transform: translateY(-4px) scale(1.04);
  color: #0d8a0d;
}
.dr-case__result:hover svg {
  transform: rotate(360deg) scale(1.2);
}

/* Пульс-кольцо на результате */
.dr-case__result-ring {
  position: absolute;
  inset: -1px; border-radius: 10px;
  border: 2px solid rgba(25,152,18,.4);
  opacity: 0;
  pointer-events: none;
}
.dr-case__result:hover .dr-case__result-ring {
  animation: cs-pulse-ring .9s ease-out infinite;
}




/* ============================================================
   ПРОЦЕСС
   ============================================================ */
.dr-process-section {
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}
.dr-process-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(200,150,80,.16) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .45;
  pointer-events: none;
}
.dr-process-section .section-label,
.dr-process-section h2,
.dr-process-section .divider { position: relative; z-index: 2; }

/* Сетка */
.dr-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 52px;
  position: relative;
  z-index: 2;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 2px 0 rgba(200,150,80,.1),
    0 20px 60px rgba(0,0,0,.06),
    0 4px 12px rgba(0,0,0,.04);
}

/* ─── KEYFRAMES ─── */
@keyframes ps-float-1 { 0%,100%{transform:translateY(0)rotate(-.3deg)} 50%{transform:translateY(-10px)rotate(.3deg)} }
@keyframes ps-float-2 { 0%,100%{transform:translateY(0)rotate(.3deg)}  50%{transform:translateY(-12px)rotate(-.3deg)} }
@keyframes ps-float-3 { 0%,100%{transform:translateY(0)rotate(-.25deg)}50%{transform:translateY(-9px)rotate(.25deg)} }
@keyframes ps-float-4 { 0%,100%{transform:translateY(0)rotate(.25deg)} 50%{transform:translateY(-11px)rotate(-.25deg)} }

@keyframes ps-num-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-5px) scale(1.05); }
}
@keyframes ps-ring-pulse-1 {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
}
@keyframes ps-ring-pulse-2 {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: .3; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
@keyframes ps-icon-beat {
  0%,60%,100% { transform: scale(1) rotate(0deg); }
  70%  { transform: scale(1.2) rotate(-10deg); }
  82%  { transform: scale(.92) rotate(5deg); }
  92%  { transform: scale(1.06) rotate(-2deg); }
}
@keyframes ps-shimmer {
  0%   { left: -80%; }
  45%  { left: 140%; }
  100% { left: 140%; }
}
@keyframes ps-top-run {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ps-conn-dot {
  0%,100% { left: 0;   opacity: 1; transform: scale(1); }
  45%     { left: calc(100% - 8px); opacity: 1; transform: scale(1.3); }
  50%     { left: calc(100% - 8px); opacity: 0; }
  51%     { left: 0;   opacity: 0; }
  55%     { left: 0;   opacity: 1; }
}
@keyframes ps-conn-dash {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ps-tag-drift {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-3px) rotate(1deg); }
}
@keyframes ps-icon-spin {
  0%   { transform: rotate(0deg) scale(1); }
  45%  { transform: rotate(200deg) scale(1.18); }
  72%  { transform: rotate(342deg) scale(.93); }
  88%  { transform: rotate(374deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes ps-title-in {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes ps-num-wink {
  0%,65%,100% { opacity:.9; }
  70%         { opacity:1; transform:translateY(-3px) scale(1.08); }
}

/* ─── Цвета шагов ─── */
.dr-ps--1 { --pc:var(--accent); --pb:rgba(200,150,80,.14); --pg:rgba(200,150,80,.26); }
.dr-ps--2 { --pc:#0aab5e;       --pb:rgba(10,171,94,.14);  --pg:rgba(10,171,94,.26); }
.dr-ps--3 { --pc:#1e90ff;       --pb:rgba(30,144,255,.14); --pg:rgba(30,144,255,.26); }
.dr-ps--4 { --pc:#8040e0;       --pb:rgba(128,64,224,.14); --pg:rgba(128,64,224,.26); }

/* ─── КАРТОЧКА ШАГА ─── */
.dr-process-step {
  background: #fff;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
  border-right: 1px solid var(--border);
  cursor: default;
  transition: background .35s;
  /* float */
}
.dr-process-step:last-child { border-right: none; }
.dr-ps--1 { animation: ps-float-1 4.2s ease-in-out infinite; }
.dr-ps--2 { animation: ps-float-2 4.7s ease-in-out infinite .5s; }
.dr-ps--3 { animation: ps-float-3 4.4s ease-in-out infinite 1s; }
.dr-ps--4 { animation: ps-float-4 4.9s ease-in-out infinite 1.5s; }

/* Бегущая полоска */
.dr-process-step::after {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2.5px;
  background: linear-gradient(90deg, transparent, var(--pc), var(--pb), var(--pc), transparent);
  background-size: 200%;
  opacity: .5;
  animation: ps-top-run 3s linear infinite;
  z-index: 4;
  transition: opacity .3s, height .3s;
}
/* shimmer wrapr */
.dr-ps__shim {
  position: absolute; inset:0; border-radius:0; pointer-events:none; overflow:hidden; z-index:1;
}
.dr-ps__shim::after {
  content: '';
  position: absolute; top:0; left:-80%; width:45%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-12deg);
  animation: ps-shimmer 5.5s ease-in-out infinite;
}
.dr-ps--2 .dr-ps__shim::after { animation-delay: 1.2s; }
.dr-ps--3 .dr-ps__shim::after { animation-delay: 2.4s; }
.dr-ps--4 .dr-ps__shim::after { animation-delay: 3.6s; }

/* Canvas */
.dr-ps__canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ── HOVER ── */
.dr-process-step.ps-active {
  animation-play-state: paused;
  background: linear-gradient(160deg, rgba(200,150,80,.04) 0%, #fff 60%);
  z-index: 10;
}
.dr-ps--1.ps-active { background: linear-gradient(160deg,rgba(200,150,80,.05) 0%,#fff 60%); }
.dr-ps--2.ps-active { background: linear-gradient(160deg,rgba(10,171,94,.05) 0%,#fff 60%); }
.dr-ps--3.ps-active { background: linear-gradient(160deg,rgba(30,144,255,.05) 0%,#fff 60%); }
.dr-ps--4.ps-active { background: linear-gradient(160deg,rgba(128,64,224,.05) 0%,#fff 60%); }
.dr-process-step.ps-active::after { opacity:1; height:3.5px; }

/* ─── НОМЕР ─── */
.dr-ps__num-wrap {
  position: relative;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.dr-ps__num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--pc);
  color: #fff;
  font-size: 16px; font-weight: 900;
  letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  animation: ps-num-float 3s ease-in-out infinite, ps-num-wink 4s ease-in-out infinite;
  transition:
    transform .55s cubic-bezier(.34,1.56,.64,1),
    box-shadow .4s,
    background .3s,
    filter .3s;
  user-select: none;
}
.dr-ps--2 .dr-ps__num { animation-delay: .5s, .8s; }
.dr-ps--3 .dr-ps__num { animation-delay: 1s, 1.6s; }
.dr-ps--4 .dr-ps__num { animation-delay: 1.5s, 2.4s; }

/* Hover прямо на кружок — полный оборот */
.dr-ps__num:hover {
  animation: none !important;
  transform: rotate(360deg) scale(1.22) !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 0 0 7px var(--pc),
    0 10px 32px var(--pg) !important;
  filter: brightness(1.1);
}

.dr-process-step.ps-active .dr-ps__num {
  animation: none;
  transform: scale(1.12);
  box-shadow: 0 6px 24px var(--pg);
}

/* Кольца вокруг номера */
.dr-ps__num-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 1.5px solid var(--pc);
  opacity: 0;
  pointer-events: none;
  transition: border-width .2s;
}
.dr-ps__num-ring     { animation: ps-ring-pulse-1 2.4s ease-out infinite; }
.dr-ps__num-ring--2  { animation: ps-ring-pulse-2 2.4s ease-out infinite .6s; }
.dr-ps--2 .dr-ps__num-ring    { animation-delay: .4s; }
.dr-ps--2 .dr-ps__num-ring--2 { animation-delay: 1s; }
.dr-ps--3 .dr-ps__num-ring    { animation-delay: .8s; }
.dr-ps--3 .dr-ps__num-ring--2 { animation-delay: 1.4s; }
.dr-ps--4 .dr-ps__num-ring    { animation-delay: 1.2s; }
.dr-ps--4 .dr-ps__num-ring--2 { animation-delay: 1.8s; }

/* При hover на враппер — кольца ускоряются */
.dr-ps__num-wrap:hover .dr-ps__num-ring {
  animation: ps-ring-pulse-1 .65s ease-out infinite !important;
  border-width: 2px;
}
.dr-ps__num-wrap:hover .dr-ps__num-ring--2 {
  animation: ps-ring-pulse-2 .65s ease-out .18s infinite !important;
  border-width: 2px;
}

/* ─── КОННЕКТОР ─── */
.dr-ps__connector {
  position: absolute;
  top: 56px; right: -30px;
  width: 60px; height: 4px;
  z-index: 3;
  pointer-events: none;
}
.dr-ps__conn-line {
  stroke: var(--border);
  stroke-dasharray: 4 3;
  stroke-dashoffset: 60;
  animation: ps-conn-dash 1.5s ease .3s both;
  transition: stroke .35s;
}
.dr-process-step.ps-active .dr-ps__conn-line { stroke: var(--pc); }
.dr-ps__conn-dot {
  position: absolute;
  top: 50%; margin-top: -4px;
  left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pc);
  animation: ps-conn-dot 2.5s ease-in-out infinite;
}
.dr-ps--2 .dr-ps__conn-dot { animation-delay: .5s; }
.dr-ps--3 .dr-ps__conn-dot { animation-delay: 1s; }

/* Последний шаг — нет коннектора */
.dr-ps--4 .dr-ps__connector { display: none; }

/* ─── ИКОНКА ─── */
.dr-ps__icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--pb);
  color: var(--pc);
  display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, background .3s;
  animation: ps-icon-beat 4s ease-in-out infinite;
  position: relative; z-index: 2;
}
.dr-ps--2 .dr-ps__icon-wrap { animation-delay: .7s; }
.dr-ps--3 .dr-ps__icon-wrap { animation-delay: 1.4s; }
.dr-ps--4 .dr-ps__icon-wrap { animation-delay: 2.1s; }

.dr-ps__icon-svg {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

.dr-process-step.ps-active .dr-ps__icon-wrap {
  animation: none;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 24px var(--pg);
}
.dr-process-step.ps-active .dr-ps__icon-svg {
  animation: ps-icon-spin .75s cubic-bezier(.34,1.56,.64,1) both;
}
.dr-ps__icon-wrap:hover {
  transform: rotate(360deg) scale(1.15) !important;
  box-shadow: 0 8px 28px var(--pg);
}

/* ─── ЗАГОЛОВОК ─── */
.dr-ps__title {
  font-size: 15px; font-weight: 800;
  color: var(--text); margin: 0;
  transition: color .3s;
  position: relative;
}
.dr-ps__title::after {
  content: ''; display: block;
  height: 2px; border-radius: 2px;
  background: var(--pc);
  width: 0; margin: 5px auto 0;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  opacity: .6;
}
.dr-process-step.ps-active .dr-ps__title { color: var(--pc); }
.dr-process-step.ps-active .dr-ps__title::after { width: 36px; }
.dr-ps__title:hover { color: var(--pc) !important; }
.dr-ps__title:hover::after { width: 36px !important; }

/* ─── ТЕКСТ ─── */
.dr-ps__text {
  font-size: 13px; color: var(--text-light);
  line-height: 1.65; margin: 0;
  transition: color .3s;
}
.dr-process-step.ps-active .dr-ps__text { color: var(--text); }

/* ─── ТЕГ-ВРЕМЯ ─── */
.dr-ps__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--pc);
  background: var(--pb);
  border: 1px solid var(--pc);
  padding: 4px 11px; border-radius: 50px;
  animation: ps-tag-drift 3.5s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s, background .25s, color .25s;
  cursor: default;
  position: relative; z-index: 2;
}
.dr-ps--2 .dr-ps__tag { animation-delay: .6s; }
.dr-ps--3 .dr-ps__tag { animation-delay: 1.2s; }
.dr-ps--4 .dr-ps__tag { animation-delay: 1.8s; }
.dr-ps__tag:hover {
  animation-play-state: paused;
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow: 0 6px 18px var(--pg);
  background: var(--pc);
  color: #fff;
}




/* ============================================================
   FAQ
   ============================================================ */
.dr-faq-section {
  padding: 88px 0 80px;
  position: relative;
}
.dr-faq-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,150,80,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,80,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.dr-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
  position: relative;
  z-index: 2;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 20px 60px rgba(0,0,0,.04);
}

/* ─── KEYFRAMES ─── */
@keyframes fq-shimmer   { 0%{left:-80%}45%{left:140%}100%{left:140%} }
@keyframes fq-top-run   { 0%{background-position:0%50%}100%{background-position:200%50%} }
@keyframes fq-icon-beat {
  0%,65%,100%{ transform:scale(1) rotate(0deg); }
  72%{ transform:scale(1.25) rotate(-12deg); }
  83%{ transform:scale(.9) rotate(6deg); }
  92%{ transform:scale(1.08) rotate(-2deg); }
}
@keyframes fq-icon-spin {
  0%  { transform:rotate(0deg) scale(1); }
  45% { transform:rotate(200deg) scale(1.2); }
  72% { transform:rotate(342deg) scale(.93); }
  100%{ transform:rotate(360deg) scale(1); }
}
@keyframes fq-num-wink  {
  0%,60%,100%{ opacity:.2; transform:scale(1); }
  68%        { opacity:.85; transform:scale(1.1); }
}
@keyframes fq-plus-spin {
  from{ transform:rotate(0deg); }
  to  { transform:rotate(135deg); }
}
@keyframes fq-plus-unspin {
  from{ transform:rotate(135deg); }
  to  { transform:rotate(0deg); }
}
@keyframes fq-answer-in {
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fq-stat-pop {
  0%  { transform:scale(.85) translateY(4px); opacity:0; }
  65% { transform:scale(1.08) translateY(-2px); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
@keyframes fq-border-run {
  0%  { background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* ─── Цветовые акценты по номеру ─── */
.dr-faq-item[data-faq="1"] { --fqc:var(--accent);  --fqb:rgba(200,150,80,.12); --fqg:rgba(200,150,80,.22); }
.dr-faq-item[data-faq="2"] { --fqc:#0aab5e;        --fqb:rgba(10,171,94,.12);  --fqg:rgba(10,171,94,.22);  }
.dr-faq-item[data-faq="3"] { --fqc:#1e90ff;        --fqb:rgba(30,144,255,.12); --fqg:rgba(30,144,255,.22); }
.dr-faq-item[data-faq="4"] { --fqc:#8040e0;        --fqb:rgba(128,64,224,.12); --fqg:rgba(128,64,224,.22); }
.dr-faq-item[data-faq="5"] { --fqc:#e03060;        --fqb:rgba(224,48,96,.12);  --fqg:rgba(224,48,96,.22);  }
.dr-faq-item[data-faq="6"] { --fqc:#d49000;        --fqb:rgba(212,144,0,.12);  --fqg:rgba(212,144,0,.22);  }

/* ─── ITEM ─── */
.dr-faq-item {
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background .3s;
}
.dr-faq-item:last-child { border-bottom: none; }
.dr-faq-item::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--fqc), var(--fqb), var(--fqc), transparent);
  background-size: 200%;
  opacity: 0;
  animation: fq-top-run 2.5s linear infinite;
  transition: opacity .3s;
  z-index: 3;
  pointer-events: none;
}
.dr-faq-item:hover::before { opacity: .7; }
.dr-faq-item.is-open::before { opacity: 1; height: 3px; }

/* Shimmer враппер */
.dr-faq-item::after {
  content: '';
  position: absolute; top:0; left:-80%; width:45%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-12deg);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}
.dr-faq-item:hover::after {
  opacity: 1;
  animation: fq-shimmer 3s ease-in-out;
}

.dr-faq-item.is-open {
  background: linear-gradient(160deg, rgba(200,150,80,.025) 0%, #fff 100%);
}
.dr-faq-item[data-faq="2"].is-open { background: linear-gradient(160deg,rgba(10,171,94,.025) 0%,#fff 100%); }
.dr-faq-item[data-faq="3"].is-open { background: linear-gradient(160deg,rgba(30,144,255,.025) 0%,#fff 100%); }
.dr-faq-item[data-faq="4"].is-open { background: linear-gradient(160deg,rgba(128,64,224,.025) 0%,#fff 100%); }
.dr-faq-item[data-faq="5"].is-open { background: linear-gradient(160deg,rgba(224,48,96,.025) 0%,#fff 100%); }
.dr-faq-item[data-faq="6"].is-open { background: linear-gradient(160deg,rgba(212,144,0,.025) 0%,#fff 100%); }

/* ─── КНОПКА ВОПРОСА ─── */
.dr-faq-item__q {
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 700; color: var(--text);
  font-family: inherit;
  transition: color .3s, padding-left .3s;
  position: relative; z-index: 2;
}
.dr-faq-item__q:hover { color: var(--fqc); padding-left: 28px; }
.dr-faq-item.is-open .dr-faq-item__q { color: var(--fqc); }

/* Иконка-враппер */
.dr-faq-item__icon-wrap {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--fqb); color: var(--fqc);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .35s, background .3s;
  animation: fq-icon-beat 4.5s ease-in-out infinite;
}
.dr-faq-item:nth-child(2) .dr-faq-item__icon-wrap { animation-delay: .6s; }
.dr-faq-item:nth-child(3) .dr-faq-item__icon-wrap { animation-delay: 1.2s; }
.dr-faq-item:nth-child(4) .dr-faq-item__icon-wrap { animation-delay: 1.8s; }
.dr-faq-item:nth-child(5) .dr-faq-item__icon-wrap { animation-delay: 2.4s; }
.dr-faq-item:nth-child(6) .dr-faq-item__icon-wrap { animation-delay: 3.0s; }

.dr-faq-item__q:hover .dr-faq-item__icon-wrap,
.dr-faq-item.is-open .dr-faq-item__icon-wrap {
  animation: fq-icon-spin .65s cubic-bezier(.34,1.56,.64,1) both;
  transform: scale(1.1);
  box-shadow: 0 4px 16px var(--fqg);
}

.dr-faq-item__svg {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* Текст вопроса */
.dr-faq-item__text {
  flex: 1;
  transition: transform .3s;
}
.dr-faq-item__q:hover .dr-faq-item__text {
  transform: translateX(3px);
}

/* Номер */
.dr-faq-item__num {
  font-size: 11px; font-weight: 900;
  letter-spacing: .08em; color: var(--fqc);
  opacity: .25;
  animation: fq-num-wink 3.5s ease-in-out infinite;
  transition: opacity .3s;
  flex-shrink: 0;
}
.dr-faq-item:nth-child(2) .dr-faq-item__num { animation-delay: .5s; }
.dr-faq-item:nth-child(3) .dr-faq-item__num { animation-delay: 1.0s; }
.dr-faq-item:nth-child(4) .dr-faq-item__num { animation-delay: 1.5s; }
.dr-faq-item:nth-child(5) .dr-faq-item__num { animation-delay: 2.0s; }
.dr-faq-item:nth-child(6) .dr-faq-item__num { animation-delay: 2.5s; }
.dr-faq-item__q:hover .dr-faq-item__num,
.dr-faq-item.is-open .dr-faq-item__num { opacity: 1; animation: none; }

/* ± кнопка */
.dr-faq-item__toggle {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--fqb);
  display: flex; align-items: center; justify-content: center;
  color: var(--fqc);
  transition: background .3s, border-color .3s, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.dr-faq-item__plus {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.dr-faq-item__q:hover .dr-faq-item__toggle {
  background: var(--fqb); border-color: var(--fqc);
  box-shadow: 0 3px 12px var(--fqg);
  transform: scale(1.1);
}
.dr-faq-item.is-open .dr-faq-item__toggle {
  background: var(--fqc); border-color: var(--fqc);
  box-shadow: 0 4px 16px var(--fqg);
  transform: scale(1.1);
}
.dr-faq-item.is-open .dr-faq-item__toggle { color: #fff; }
.dr-faq-item.is-open .dr-faq-item__plus {
  transform: rotate(135deg);
}

/* ─── ОТВЕТ ─── */
.dr-faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.dr-faq-item.is-open .dr-faq-item__a {
  max-height: 300px;
}

.dr-faq-item__a-inner {
  padding: 0 24px 22px 76px;
  display: flex; align-items: flex-start; gap: 20px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.dr-faq-item.is-open .dr-faq-item__a-inner {
  opacity: 1; transform: translateY(0);
}

.dr-faq-item__a-inner p {
  font-size: 14px; color: var(--text-light);
  line-height: 1.7; margin: 0; flex: 1;
}

/* Мини-статистика внутри ответа */
.dr-faq-item__stat {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px; border-radius: 12px;
  background: var(--fqb);
  border: 1px solid var(--fqc);
  min-width: 90px; text-align: center;
  opacity: 0; transform: scale(.85) translateY(4px);
  transition: opacity .4s ease .2s, transform .4s cubic-bezier(.34,1.56,.64,1) .2s;
}
.dr-faq-item.is-open .dr-faq-item__stat {
  opacity: 1; transform: scale(1) translateY(0);
}
.dr-faq-item__stat-num {
  font-size: 18px; font-weight: 900;
  color: var(--fqc); line-height: 1;
}
.dr-faq-item__stat-label {
  font-size: 10px; font-weight: 600;
  color: var(--fqc); opacity: .7;
  margin-top: 3px; line-height: 1.3;
  text-align: center;
}



@keyframes dr-spin {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-360deg); }
}
@keyframes dr-dot-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(25,152,18,.2); }
  50%     { box-shadow: 0 0 0 8px rgba(25,152,18,.06); }
}
@keyframes dr-shim-face {
  0%,100% { transform: translateX(-140%); }
  40%     { transform: translateX(140%);  }
}

.dr-badge-scene {
  margin-bottom: 20px;
}

.dr-badge-wrap {
  width: 100%;
  max-width: 520px;
  height: 52px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.dr-drum {
  width: 100%;
  height: 52px;
  transform-style: preserve-3d;
  animation: dr-spin 9s linear infinite;
  position: relative;
  transition: animation-duration .8s;
}
.dr-drum.dr-drum--slow {
  animation-duration: 40s;
}
.dr-drum.dr-drum--tilt {
  animation-play-state: paused;
}

.dr-drum__face {
  position: absolute;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 18px;
  border-radius: 50px;
  border: 1px solid rgba(200,150,80,.3);
  background: rgba(200,150,80,.09);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.dr-drum__face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  animation: dr-shim-face 4s ease-in-out infinite;
  pointer-events: none;
}
.dr-drum__face:nth-child(2)::before { animation-delay: 1s; }
.dr-drum__face:nth-child(3)::before { animation-delay: 2s; }
.dr-drum__face:nth-child(4)::before { animation-delay: 3s; }

.dr-drum__face:nth-child(1) { transform: rotateX(0deg)   translateZ(26px); }
.dr-drum__face:nth-child(2) { transform: rotateX(90deg)  translateZ(26px); }
.dr-drum__face:nth-child(3) { transform: rotateX(180deg) translateZ(26px); }
.dr-drum__face:nth-child(4) { transform: rotateX(270deg) translateZ(26px); }

.dr-drum__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #199812;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(25,152,18,.2);
  animation: dr-dot-pulse 2s ease-in-out infinite;
}
.dr-drum__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em;
  white-space: nowrap;
}
.dr-drum__sep {
  opacity: .4;
  margin: 0 6px;
}

.dr-badge-refl {
  width: 100%;
  max-width: 520px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(200,150,80,.07), transparent);
  border-radius: 0 0 10px 10px;
  filter: blur(2px);
  margin-top: 2px;
}


/* ============================================================
   TASK CARD — Canvas (волна + частицы)
   ============================================================ */
.dr-task-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  border-radius: 18px;
}

/* ============================================================
   MODAL
   ============================================================ */
@keyframes tc-modal-in {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tc-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tc-success-pop {
  0%   { transform: scale(.5) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.tc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,32,24,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.tc-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  animation: tc-overlay-in .3s ease both;
}

.tc-modal {
  background: #fff;
  border-radius: 24px;
  padding: 32px 32px 28px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow:
    0 32px 80px rgba(0,0,0,.22),
    0 0 0 1px rgba(200,150,80,.2);
  animation: tc-modal-in .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* Полоска-акцент сверху */
.tc-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #f0c060, var(--accent));
  background-size: 200%;
  border-radius: 0 0 4px 4px;
  animation: tc-border-run 2.5s linear infinite;
}

/* Кнопка закрытия */
.tc-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
  transition: background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.tc-modal__close:hover {
  background: #fff;
  border-color: rgba(200,150,80,.5);
  color: var(--accent);
  transform: rotate(90deg) scale(1.1);
}

/* Сервис-блок */
.tc-modal__service {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(200,150,80,.07);
  border: 1.5px solid rgba(200,150,80,.2);
  border-radius: 14px;
  margin-bottom: 20px;
}
.tc-modal__service-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.tc-modal__service-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.tc-modal__service-price {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 3px;
}

.tc-modal__lead {
  font-size: 14px;
  color: var(--text-light);
  margin: 0 0 20px;
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════
   ФОРМА — богатые анимации каждого элемента
══════════════════════════════════════════════════ */
@keyframes mf-label-up {
  from { transform: translateY(3px); opacity: .5; }
  to   { transform: translateY(0);   opacity: 1;  }
}
@keyframes mf-input-in {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1;  }
}
@keyframes mf-border-run {
  0%   { background-position: 0% 50%;   }
  100% { background-position: 200% 50%; }
}
@keyframes mf-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px);  }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px);  }
}
@keyframes mf-submit-glow {
  0%,100% { box-shadow: 0 4px 18px rgba(200,150,80,.3); }
  50%     { box-shadow: 0 6px 28px rgba(200,150,80,.55), 0 0 0 4px rgba(200,150,80,.1); }
}
@keyframes mf-submit-arrow {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(5px); }
}
@keyframes mf-submit-fill {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes mf-char-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
@keyframes mf-tick-in {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  65%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}
@keyframes mf-pulse-ring {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.5); opacity: 0;  }
}
@keyframes mf-textarea-expand {
  from { box-shadow: 0 0 0 3px rgba(200,150,80,.1); }
  to   { box-shadow: 0 0 0 3px rgba(200,150,80,.18); }
}

.tc-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Поле-враппер ── */
.tc-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  animation: mf-input-in .4s ease both;
}
.tc-modal__form .tc-modal__field:nth-child(1) { animation-delay: .05s; }
.tc-modal__form .tc-modal__field:nth-child(2) { animation-delay: .12s; }
.tc-modal__form .tc-modal__field:nth-child(3) { animation-delay: .19s; }

/* ── Лейбл ── */
.tc-modal__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: color .25s;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: mf-label-up .35s ease both;
}
.tc-modal__field:nth-child(1) .tc-modal__label { animation-delay: .1s; }
.tc-modal__field:nth-child(2) .tc-modal__label { animation-delay: .17s; }
.tc-modal__field:nth-child(3) .tc-modal__label { animation-delay: .24s; }

/* Иконка перед лейблом */
.tc-modal__label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(200,150,80,.1);
  color: var(--accent);
  flex-shrink: 0;
  transition: background .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* При фокусе поля — лейбл оживает */
.tc-modal__field:focus-within .tc-modal__label {
  color: var(--accent);
}
.tc-modal__field:focus-within .tc-modal__label-icon {
  background: rgba(200,150,80,.18);
  transform: rotate(-8deg) scale(1.15);
}

/* ── Инпут-враппер ── */
.tc-modal__input-wrap {
  position: relative;
}
/* Бегущая цветная линия снизу при фокусе */
.tc-modal__input-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, var(--accent), #f0c060, var(--accent));
  background-size: 200%;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.tc-modal__field:focus-within .tc-modal__input-wrap::after {
  opacity: 1;
  animation: mf-border-run 1.8s linear infinite;
}

/* Счётчик символов */
.tc-modal__char-count {
  position: absolute;
  right: 12px; bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.tc-modal__field:focus-within .tc-modal__char-count { opacity: .7; }
.tc-modal__char-count.is-limit { color: var(--accent); opacity: 1; }

/* ── Инпут ── */
.tc-modal__input {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition:
    border-color .25s,
    box-shadow .3s,
    background .25s,
    transform .2s;
  width: 100%;
  resize: none;
}
.tc-modal__input:hover:not(:focus) {
  border-color: rgba(200,150,80,.35);
  background: #fff;
  transform: translateY(-1px);
}
.tc-modal__input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,150,80,.14);
  transform: translateY(-1px);
}

/* ── Textarea ── */
.tc-modal__textarea {
  min-height: 88px;
  padding-bottom: 28px; /* место для счётчика */
  resize: none;
  transition:
    border-color .25s,
    box-shadow .3s,
    background .25s,
    min-height .3s ease;
}
.tc-modal__textarea:focus {
  min-height: 110px;
  animation: mf-textarea-expand .4s ease both;
}

/* Валидный инпут — зелёная галочка */
.tc-modal__input.is-valid {
  border-color: rgba(25,152,18,.45) !important;
  background: rgba(25,152,18,.03) !important;
}
/* valid-icon — сосед input внутри wrap */
.tc-modal__input.is-valid + .tc-modal__valid-icon {
  opacity: 1 !important;
  animation: mf-tick-in .4s cubic-bezier(.34,1.56,.64,1) both !important;
}
.tc-modal__valid-icon {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  color: #199812;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  display: flex; align-items: center;
}

/* ── КНОПКА ОТПРАВИТЬ ── */
.tc-modal__submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition:
    background .25s,
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s,
    border-radius .3s;
  animation: mf-submit-glow 2.5s ease-in-out infinite;
}
/* Shimmer на кнопке всегда */
.tc-modal__submit::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(-12deg);
  animation: mf-input-in 0s, mf-border-run 0s; /* переиспользуем */
  animation: case-shimmer 3.5s ease-in-out infinite;
}
/* Пульс-кольцо */
.tc-modal__submit::after {
  content: '';
  position: absolute;
  inset: -1px; border-radius: 50px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.tc-modal__submit:hover::after {
  animation: mf-pulse-ring .9s ease-out infinite;
}
.tc-modal__submit:hover {
  animation: none;
  background: var(--accent-dark);
  transform: translateY(-3px) scale(1.03);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(200,150,80,.45);
}
.tc-modal__submit:hover .tc-modal__submit-arrow {
  animation: mf-submit-arrow .6s ease-in-out infinite;
}
.tc-modal__submit:active {
  transform: translateY(0) scale(.98);
  border-radius: 50px;
  animation: none;
}
.tc-modal__submit:disabled {
  opacity: .65; cursor: default;
  transform: none; animation: none;
}
.tc-modal__submit-text { position: relative; z-index: 1; }
.tc-modal__submit-arrow {
  display: inline-flex;
  position: relative; z-index: 1;
  transition: transform .3s;
}

/* ── Состояние «отправляется» — прогресс-линия ── */
.tc-modal__submit.is-loading::before {
  left: 0; width: 100%; height: 100%;
  background: none;
  transform: none;
  animation: none;
}
.tc-modal__submit.is-loading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,.5);
  animation: mf-submit-fill 0.8s ease both;
  opacity: 1;
}



/* Успех */
.tc-modal__success {
  text-align: center;
  padding: 20px 0 8px;
}
.tc-modal__success-icon {
  font-size: 52px;
  margin-bottom: 12px;
  animation: tc-success-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.tc-modal__success-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.tc-modal__success-text {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.55;
}

/* Футер модала */
.tc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.tc-modal__tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity .2s;
}
.tc-modal__tg:hover { opacity: .75; }
.tc-modal__footer-note {
  font-size: 12px;
  color: var(--text-light);
}

/* ============================================================
   TASK CARD — Canvas (волна + частицы)
   ============================================================ */
.dr-task-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  border-radius: 18px;
}
/* Текущий пункт меню в футере */
.footer__link--current {
  color: #199812;
  cursor: default;
  pointer-events: none;
  font-size: 14px;
}

/* ============================================================
   HERO TITLE — адаптивные правки
   ============================================================ */

/* Большие экраны (>1280px) — можно чуть крупнее */
@media (min-width: 1280px) {
  .dr-hero__title {
    font-size: 38px;
  }
  .dr-hero__inner {
    grid-template-columns: 1fr 460px;
  }
}

/* Средние экраны (960–1279px) */
@media (max-width: 1279px) {
  .dr-hero__title {
    font-size: 32px;
  }
  .dr-hero__title .typewriter-line[data-line="1"],
  .dr-hero__title .typewriter-line[data-line="2"] {
    white-space: nowrap;
  }
  .dr-hero__inner {
    grid-template-columns: 1fr 400px;
    gap: 36px;
  }
}

/* Планшет (768–959px) */
@media (max-width: 959px) {
  .dr-hero__inner {
    grid-template-columns: 1fr;
  }
  .dr-hero__title {
    font-size: 36px;
  }
  .dr-hero__title .typewriter-line[data-line="1"],
  .dr-hero__title .typewriter-line[data-line="2"] {
    white-space: normal;
  }
}

/* Мобильный (<600px) */
@media (max-width: 599px) {
  .dr-hero__title {
    font-size: 28px;
    letter-spacing: -.2px;
    min-height: unset;
  }
  .dr-hero__title .typewriter-line[data-line="1"],
  .dr-hero__title .typewriter-line[data-line="2"] {
    white-space: normal;
  }
}

/* ============================================================
   SEO-ТЕКСТ (семантический блок)
   ============================================================ */
.dr-seo-text {
  padding: 60px 0;
}
.dr-seo-text__inner {
  max-width: 860px;
  margin: 0 auto;
}
.dr-seo-text__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.dr-seo-text__body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-light);
  margin-bottom: 14px;
}
.dr-seo-text__body strong {
  color: var(--text);
  font-weight: 600;
}
.dr-seo-text__body a {
  color: var(--accent);
  text-decoration: none;
}
.dr-seo-text__body a:hover {
  text-decoration: underline;
}