/* kp.css — таблицы коммерческого предложения + анимация + hover + scroll-reveal
   v4.1.0 — добавлены светлые переопределения для .skp-regions__main (тёмные карточки в skp.css).
   Применяется только на is_page(729). Базовые стили — в skp.css. */

:root {
  --kp-shadow-1: 0 1px 2px rgba(15, 15, 17, 0.05);
  --kp-shadow-2: 0 14px 32px -16px rgba(15, 15, 17, 0.18);
  --kp-shadow-3: 0 24px 56px -22px rgba(204, 44, 44, 0.45);
  --kp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Уменьшаем пробелы между секциями === */
.skp-section {
  padding: 56px 0;
  position: relative;
}
.skp-hero + .skp-section { padding-top: 56px; }
.skp-section + .skp-section { padding-top: 56px; }
@media (min-width: 1024px) {
  .skp-section { padding: 64px 0; }
}

/* === Таблица цен === */
.kp-table {
  margin: 28px 0 32px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--kp-shadow-1);
  transition: transform .55s var(--kp-ease-out),
              box-shadow .55s var(--kp-ease-out),
              border-color .55s var(--kp-ease-out);
}
.kp-table:hover {
  transform: translateY(-4px);
  box-shadow: var(--kp-shadow-2);
  border-color: rgba(204, 44, 44, .3);
}
.kp-table__title {
  margin: 0;
  padding: 18px 24px;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.kp-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.kp-table__grid th,
.kp-table__grid td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
  text-align: left;
}
.kp-table__grid th {
  font-weight: 700;
  font-size: 12px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fff;
}
.kp-table__grid tbody tr {
  transition: background-color .35s ease;
}
.kp-table__grid tbody tr:last-child td {
  border-bottom: none;
}
.kp-table__grid tbody tr:hover {
  background: var(--c-bg-soft);
}
.kp-table__grid tbody tr:hover td:last-child {
  color: var(--c-red-deep);
  transform: translateX(-2px);
  letter-spacing: 0.04em;
}
.kp-table__grid tbody tr td:last-child {
  transition: color .35s ease, transform .35s ease, letter-spacing .35s ease;
}
.kp-table__grid td:first-child {
  font-weight: 600;
  color: var(--c-ink);
  min-width: 220px;
}
.kp-table__grid td:nth-child(3),
.kp-table__grid th:nth-child(3) {
  white-space: nowrap;
  color: var(--c-muted);
}
.kp-table__grid td:last-child,
.kp-table__grid th:last-child {
  font-weight: 700;
  color: var(--c-red);
  white-space: nowrap;
  text-align: right;
}
.kp-footnote {
  margin-top: 18px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.6;
}
.kp-footnote strong,
.skp-section__lead strong,
.skp-section--dark .kp-footnote strong { color: var(--c-ink); }
.skp-section--dark .kp-footnote,
.skp-section--dark .kp-footnote strong { color: rgba(255,255,255,.65); }

@media (max-width: 860px) {
  .kp-table__grid,
  .kp-table__grid thead,
  .kp-table__grid tbody,
  .kp-table__grid tr,
  .kp-table__grid th,
  .kp-table__grid td {
    display: block;
  }
  .kp-table__grid thead { display: none; }
  .kp-table__grid tr {
    border-bottom: 1px solid var(--c-line);
    padding: 14px 18px;
  }
  .kp-table__grid tr:last-child { border-bottom: none; }
  .kp-table__grid td {
    border-bottom: none;
    padding: 4px 0;
  }
  .kp-table__grid td:last-child {
    text-align: left;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed var(--c-line);
  }
}

/* === Услуги-карточки === */
.kp-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 900px) { .kp-services { gap: 24px; } }
.kp-service {
  padding: 28px 26px 26px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--kp-shadow-1);
  transition: transform .55s var(--kp-ease-out),
              box-shadow .55s var(--kp-ease-out),
              border-color .55s var(--kp-ease-out);
}
.kp-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 0% 0%, rgba(204, 44, 44, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity .55s var(--kp-ease-out);
  pointer-events: none;
}
.kp-service:hover {
  transform: translateY(-6px);
  border-color: rgba(204, 44, 44, .35);
  box-shadow: var(--kp-shadow-2);
}
.kp-service:hover::before { opacity: 1; }
.kp-service__icon {
  font-size: 34px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: var(--c-bg-soft);
  border-radius: 14px;
  margin-bottom: 16px;
  transition: transform .55s var(--kp-ease-spring),
              background-color .35s ease;
}
.kp-service:hover .kp-service__icon {
  transform: rotate(-6deg) scale(1.06);
  background: rgba(204, 44, 44, .08);
}
.kp-service__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.kp-service__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-2);
}
.kp-service__price {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(204, 44, 44, .08);
  color: var(--c-red-deep);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .kp-services { grid-template-columns: 1fr; }
}

/* === Hero-карточка (компактная) === */
.skp-hero__card-wrap {
  position: relative;
  padding: 0;
  display: inline-block;
  max-width: 100%;
  perspective: 1200px;
}
.skp-hero__card {
  position: relative;
  padding: 36px 32px;
  border-radius: 22px;
  background: linear-gradient(#fff, #fff) padding-box,
              conic-gradient(from var(--kp-orb, 0deg),
                            #cc2c2c 0deg, #f48a4f 90deg,
                            #cc2c2c 180deg, #7a1414 270deg, #cc2c2c 360deg) border-box;
  background-size: 100% 100%, 200% 200%;
  background-position: 0% 0%, var(--kp-orb-x, 50%) var(--kp-orb-y, 50%);
  border: 2px solid transparent;
  box-shadow:
    0 30px 60px -28px rgba(204, 44, 44, 0.45),
    0 12px 36px -16px rgba(15, 15, 17, 0.15);
  transform-style: preserve-3d;
  animation: kp-card-float 6s ease-in-out infinite;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}
.skp-hero__card:hover {
  transform: translateY(-6px);
}
.skp-hero__card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.5), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.skp-hero__card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.skp-hero__card-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #18181b 0%, #cc2c2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
  line-height: 1.15;
}
.skp-hero__card-row {
  font-size: 14px;
  color: var(--c-ink-2);
  margin-bottom: 6px;
  line-height: 1.45;
}
@keyframes kp-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 720px) {
  .skp-hero__card { padding: 28px 22px; }
}

/* === Hover на skp-adv и skp-stage === */
.skp-adv {
  transition: transform .55s var(--kp-ease-out),
              box-shadow .55s var(--kp-ease-out),
              border-color .55s var(--kp-ease-out),
              background-color .55s ease;
}
.skp-adv:hover {
  transform: translateY(-6px);
  border-color: rgba(204, 44, 44, .35);
  box-shadow: var(--kp-shadow-2);
}
.skp-adv:hover .skp-adv__num {
  background: var(--c-red);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.skp-adv__num {
  transition: background-color .35s ease,
              color .35s ease,
              transform .55s var(--kp-ease-spring);
}

.skp-stage {
  transition: transform .55s var(--kp-ease-out),
              box-shadow .55s var(--kp-ease-out);
}
.skp-stage:hover {
  transform: translateY(-4px);
}
.skp-stage__num {
  transition: color .35s ease, transform .55s var(--kp-ease-spring);
}
.skp-stage:hover .skp-stage__num {
  color: #ff5757;
  transform: scale(1.06);
}

/* === Кнопки === */
.kp-calc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--c-red);
  color: var(--c-red);
  background: transparent;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all .3s var(--kp-ease-spring);
  position: relative;
  overflow: hidden;
}
.kp-calc-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
.kp-calc-cta:hover {
  background: var(--c-red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(204, 44, 44, .55);
}
.kp-calc-cta:hover::after {
  transform: translateX(100%);
}

.skp-cta__btn {
  position: relative;
  overflow: hidden;
}
.skp-cta__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  transition: transform .7s ease;
}
.skp-cta__btn:hover::after {
  transform: translateX(100%);
}

/* === Калькулятор-блок === */
.skp-section--calc {
  padding: 36px 0;
}
.kp-calcbox {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 36px 32px;
  background: linear-gradient(120deg, #fff 0%, var(--c-bg-soft) 100%);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.kp-calcbox::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(204, 44, 44, .18), transparent 70%);
  filter: blur(8px);
  animation: kp-calcblob 18s ease-in-out infinite;
}
@keyframes kp-calcblob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(1.1); }
}
.kp-calcbox__cta {
  text-align: right;
  position: relative;
  z-index: 1;
}
.kp-calcbox__hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--c-muted);
}
.kp-cta__btn--calc {
  font-size: 17px;
  padding: 16px 36px;
}
@media (max-width: 720px) {
  .kp-calcbox { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
  .kp-calcbox__cta { text-align: left; }
}

/* === Контакты в hero (.skp-hero — тёмный фон) — телефоны БЕЛЫЕ === */
.skp-hero__contacts {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
}
.skp .skp-hero__phone {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  transition: color .3s ease, transform .25s ease;
}
.skp .skp-hero__phone:hover { color: #ff5757; }
.skp .skp-hero__phone span {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.skp .skp-hero__phone--sales { color: #ff5757; }
.skp .skp-hero__phone--sales:hover { color: #ff8e8e; }
.skp .skp-hero__phone--sales span { color: rgba(255,255,255,.55); }
.skp .skp-hero__email {
  align-self: center;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 15px;
  transition: color .25s ease;
}
.skp .skp-hero__email:hover { color: #ff5757; }

/* === CTA-блок === */
.skp-cta__contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 22px 0 30px;
}
.skp .skp-cta__phone {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff !important;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  transition: color .25s ease, transform .25s ease;
}
.skp .skp-cta__phone:hover { color: #ff5757 !important; }
.skp .skp-cta__phone span {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
}
.skp .skp-cta__phone--sales { color: #ff5757 !important; }
.skp .skp-cta__phone--sales span { color: rgba(255,255,255,.78) !important; }
.skp .skp-cta__email {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 16px;
  align-self: center;
  letter-spacing: 0.01em;
  transition: color .25s ease;
}
.skp .skp-cta__email:hover { color: #ff5757; }
.skp-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* === Регионы: три блока === */
.skp-regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Карточки .skp-regions__main имеют в skp.css тёмный фон (--c-ink = #18181b),
   а skp.css .skp h3 жёстко задаёт color: var(--c-ink). Переопределяем на светлый. */
.skp .skp-regions__main,
.skp .skp-regions__main h3,
.skp .skp-regions__main-title,
.skp .skp-regions__main p {
  color: #fff;
}
.skp .skp-regions__main-title {
  background: linear-gradient(135deg, #ffffff 0%, #ff8e8e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.skp .skp-regions__main-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8e8e;
  font-weight: 700;
  margin-bottom: 14px;
}
.skp .skp-regions__main p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* === SCROLL REVEAL === */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--kp-ease-out),
              transform .9s var(--kp-ease-out);
  will-change: opacity, transform;
}
[data-reveal="fade-left"] { transform: translateX(-40px); }
[data-reveal="fade-right"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
[data-stagger] > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--kp-ease-out),
              transform .7s var(--kp-ease-out);
  will-change: opacity, transform;
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .20s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .28s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: .44s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: .52s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: .60s; }
[data-stagger].is-visible > *:nth-child(9) { transition-delay: .68s; }
[data-stagger].is-visible > *:nth-child(n+10) { transition-delay: .76s; }

/* === Прогресс-бар === */
.skp__progress {
  background: linear-gradient(90deg, #cc2c2c 0%, #f48a4f 100%);
  box-shadow: 0 1px 8px rgba(204, 44, 44, .3);
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}