@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

.cuprum-hero {
  font-family: "Cuprum", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.oswald-hero {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.source-code-pro-hero {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.source-code-pro-hero-bold {
  font-weight: 500;
}

/* Плавный scale и тень при ховере для кнопок hero */
.btn-hero-hover {
  transform-origin: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-hero-hover:not(:hover) {
  will-change: auto;
}

.btn-hero-hover:hover {
  will-change: transform;
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.btn-hero-outline:hover {
  background-color: hsl(var(--background)) !important;
  border-color: transparent !important;
}

.btn-hero-white {
  background-color: #fff !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.btn-hero-white:hover {
  background-color: #fff !important;
  border-color: transparent !important;
}

.hero-section-parallax {
  overflow-x: visible;
}

.card-fan-wrap {
  padding-top: 3rem;
  padding-bottom: 3rem;
  min-height: 420px;
  overflow: visible;
}

.hero-card-item {
  position: absolute;
  width: 100%;
  transition: none !important;
}

.hero-card-item .hero-card-inner {
  will-change: transform;
}

.card-fan-wrap[data-hover-allowed="true"] .hero-card-item:hover .hero-card-inner {
  transform: scale(1.03);
}

/* Фон 3-го блока: градиент (как был) + logo-bg.svg поверх с лёгкой прозрачностью */
section#control.control-section {
  position: relative;
  background-image: linear-gradient(to bottom, hsl(var(--primary-new)/0.03), white, white);
  background-repeat: no-repeat;
}

section#control.control-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--control-logo-bg);
  background-size: min(110vw, 960px) auto;
  background-position: 85% 50%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

section#control.control-section > .container {
  position: relative;
  z-index: 1;
}

/* Фон CTA: как 3-й блок — градиент + logo-bg */
section#cta.cta-section {
  position: relative;
  background-image: linear-gradient(to bottom, hsl(var(--primary-new)/0.03), white, white);
  background-repeat: no-repeat;
}

section#cta.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cta-logo-bg);
  background-size: min(110vw, 960px) auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

section#cta.cta-section > .container {
  position: relative;
  z-index: 1;
}

/* CTA: карточки — scale и тень при ховере, как в других секциях */
section#cta .losses-card-wrap .losses-card {
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.3s ease;
}

section#cta .losses-card-wrap:hover .losses-card {
  transform: scale(1.03);
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
}

/* Фон 4-го блока (калькулятор): такой же градиент + тот же svg, но смещён влево */
section#calculator.calculator-section {
  position: relative;
  background-image: linear-gradient(to bottom, hsl(var(--primary-new)/0.03), white, white);
  background-repeat: no-repeat;
}

section#calculator.calculator-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--control-logo-bg);
  background-size: min(110vw, 960px) auto;
  background-position: 5% 40%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

section#calculator.calculator-section > .container {
  position: relative;
  z-index: 1;
}

/* Фон блока тарифов: rocket.svg, анимация в JS */
section#tariffs.tariffs-section {
  position: relative;
}

.tariffs-rocket-svg path {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

section#tariffs.tariffs-section > .container {
  position: relative;
  z-index: 1;
}

/* Фон 5-го блока (результаты): повторяющийся pattern logo-pattern.svg под углом 45° */
section.results-section {
  position: relative;
  overflow: hidden;
}

section.results-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--results-logo-pattern);
  background-size: 1000px 1000px;
  background-repeat: repeat;
  opacity: 0.3;
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  width: 200%;
  height: 200%;
}

section.results-section > .container {
  position: relative;
  z-index: 1;
}

.it-card {
  position: relative;
  overflow: hidden;
}

.it-card .it-decor-icon {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -10px;
  right: -80px;
  opacity: 0.2;
  transform: rotate(-30deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}

.it-card .it-decor-icon svg {
  width: 100%;
  height: 100%;
}

.it-card > div {
  position: relative;
  z-index: 1;
}

.calc-button-wrap {
  cursor: pointer;
}

/* Слайдеры калькулятора: используем фирменный цвет primary-new */
.calculator-slider .bg-primary {
  background-color: hsl(var(--primary-new)) !important;
}

.calculator-slider [role='slider'] {
  border-color: #fff !important;
  border-width: 3px !important;
  background-color: hsl(var(--primary-new)) !important;
}

.calculator-slider .bg-secondary {
  background-color: hsl(var(--primary-new)/0.05) !important;
}

/* Плавное появление чисел в итогах калькулятора делаем через GSAP (без фиксированного opacity в CSS) */
/* Линии между шагами в блоке #control: от центра по вертикали справа блока до верхней границы следующего */
.control-steps .control-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 1px;
  height: 0;
  background: hsl(var(--primary-new));
  pointer-events: none;
  overflow: visible;
}

.control-steps .control-arrow-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--primary-new));
  transform: translate(-50%, -50%) scale(0);
}

.control-steps .control-step:last-child .control-arrow {
  display: none;
}

/* В месте касания линии — обводка сверху карточки подсвечивается primary-new (радиальный градиент) */
.control-steps .control-step:not(:first-child) .losses-card {
  position: relative;
  overflow: visible;
}

.control-steps .control-step:not(:first-child) .losses-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 5px;
  width: 30px;
  height: 1px;
  border-radius: 4px 4px 0 0;
  background: radial-gradient(circle 15px at 50% 50%, hsl(var(--primary-new)), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.control-steps .control-step:not(:first-child) .losses-card.control-border-visible::before {
  opacity: 1;
}

.control-steps .control-step:not(:first-child) .losses-card:hover::before {
  opacity: 0;
}

.losses-card-wrap {
  display: flex;
  min-height: 0;
  transition: none;
}

.losses-card {
  box-shadow: none;
  will-change: transform;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.3s ease, border-color 0.25s ease;
}

.losses-card-wrap .losses-card > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.losses-card-wrap:hover .losses-card {
  transform: scale(1.03);
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
}

.losses-cards-grid .losses-card {
  border-color: hsl(var(--primary-new)/0.1);
}

.control-steps .losses-card {
  border-color: hsl(var(--primary-new)/0.1);
}

.losses-chart-gradient-start {
  stop-color: hsl(var(--primary-new));
  stop-opacity: 0.08;
}

.losses-chart-gradient-end {
  stop-color: hsl(var(--primary-new));
  stop-opacity: 0;
}

.losses-chart-gradient-danger-start {
  stop-color: hsl(220, 4%, 93%);
  stop-opacity: 0.25;
}

.losses-chart-gradient-danger-end {
  stop-color: hsl(220, 4%, 93%);
  stop-opacity: 0;
}

.losses-chart-line-stop--primary {
  stop-color: color-mix(in srgb, hsl(var(--primary-new)), white 45%);
}

.losses-chart-line-stop--danger {
  stop-color: hsl(220, 4%, 93%);
}

.losses-pie-day-fill-center {
  stop-color: hsl(220, 6%, 82%);
  stop-opacity: 0;
}

.losses-pie-day-fill-edge {
  stop-color: hsl(220, 6%, 82%);
  stop-opacity: 0.05;
}

.losses-pie-night-fill-center {
  stop-color: hsl(0, 0%, 100%);
  stop-opacity: 1;
}

.losses-pie-night-fill-edge {
  stop-color: hsl(var(--primary-new));
  stop-opacity: 0.08;
}

.losses-pie-night-fill {
  color: hsl(var(--primary-new));
}

.losses-pie-line-stop--night {
  stop-color: color-mix(in srgb, hsl(var(--primary-new)), white 45%);
}

.losses-pie-line-stop--gray {
  stop-color: hsl(220, 4%, 93%);
}

.losses-chart--pie .losses-pie-fill-day,
.losses-chart--pie .losses-pie-fill-night {
  opacity: 0;
}

.losses-chart,
.losses-chart-svg,
.losses-pie-svg,
.losses-chart-followup-svg,
.losses-chart-curves-svg {
  margin-right: 0;
}

.losses-chart-svg svg,
.losses-pie-svg svg,
.losses-chart-followup-svg svg,
.losses-chart-curves-svg svg {
  display: block;
  overflow: visible;
}

.losses-chart--followup,
.losses-chart-followup-svg {
  overflow: visible;
}

.losses-card--followup {
  overflow: visible;
}

.losses-chart-followup-svg .losses-followup-path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Линии четвёртой карточки: по умолчанию скрыты, чтобы не мигали до GSAP-анимации */
.losses-chart-curves-svg .losses-curves-line {
  opacity: 0;
}

/* Стрелки четвёртой карточки тоже скрыты до GSAP-анимации */
.losses-chart-curves-svg .losses-curves-arrow {
  opacity: 0;
}

.losses-pie-ring {
  color: hsl(220, 4%, 93%);
}

.hero-card-item:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.hero-text-column .hero-reveal-item {
  opacity: 0;
  transform: translateX(-80px);
  transition: none;
}

.losses-reveal-item {
  opacity: 0;
  transform: translateY(-40px);
  transition: none;
}

.control-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.results-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.it-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.calculator-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.tariffs-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.cta-reveal-item {
  opacity: 0;
  transform: none;
  transition: none;
}

.cta-card {
  opacity: 0;
  transform: none;
  transition: none;
}

.cta-step {
  opacity: 0;
  transform: none;
  transition: none;
}

.cta-steps-header-reveal {
  opacity: 0;
  transform: none;
  transition: none;
}

.cta-bottom-reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: none;
}

.footer-logo-reveal {
  opacity: 0;
  transition: none;
}

.calculator-card {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

.losses-bottom-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: none;
}

.it-bottom-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: none;
}

.nav-reveal-wrap .nav-reveal-item {
  opacity: 0;
  transform: translateY(-40px);
  transition: color 0.2s ease;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal[data-visible='true'] {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-stagger[data-visible='true'] > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger[data-visible='true'] > *:nth-child(1) {
  transition-delay: 0ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(2) {
  transition-delay: 50ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(3) {
  transition-delay: 100ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(4) {
  transition-delay: 150ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(5) {
  transition-delay: 200ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(6) {
  transition-delay: 250ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(7) {
  transition-delay: 300ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(8) {
  transition-delay: 350ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(9) {
  transition-delay: 400ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(10) {
  transition-delay: 450ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(11) {
  transition-delay: 500ms;
}

.reveal-stagger[data-visible='true'] > *:nth-child(n + 12) {
  transition-delay: 550ms;
}

/* Карточки потерь и IT-системы: скрыты до GSAP-анимации */
.losses-cards-grid .losses-card-wrap,
.it-cards-grid .losses-card-wrap {
  opacity: 0;
}

/* Карточка и нижний текст тарифов: скрыты до GSAP-анимации (снизу вверх, как it-bottom) */
.tariffs-card-wrap .losses-card,
.tariffs-bottom-reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: none;
}

/* Шаги #control: скрыты до GSAP-анимации */
.control-steps .losses-card-wrap {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal-stagger[data-visible='true'] > * {
    transition-delay: 0ms;
  }
  .losses-cards-grid .losses-card-wrap,
  .it-cards-grid .losses-card-wrap {
    opacity: 1;
  }
  .control-steps .losses-card-wrap {
    opacity: 1;
  }
  .losses-bottom-reveal {
    opacity: 1;
    transform: none;
  }
  .it-bottom-reveal {
    opacity: 1;
    transform: none;
  }
  .control-reveal-item {
    opacity: 1;
  }
  .it-reveal-item {
    opacity: 1;
    transform: none;
  }
  .calculator-reveal-item,
  .calculator-card {
    opacity: 1;
    transform: none;
  }
  .tariffs-reveal-item,
  .tariffs-card-wrap .losses-card,
  .tariffs-bottom-reveal {
    opacity: 1;
    transform: none;
  }
  .cta-reveal-item,
  .cta-card,
  .cta-step,
  .cta-steps-header-reveal,
  .cta-bottom-reveal,
  .footer-logo-reveal {
    opacity: 1;
    transform: none;
  }
  .tariffs-rocket-svg path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
    opacity: 1;
  }
  .control-steps .control-arrow {
    height: calc(50% + 0.75rem);
  }
  .control-steps .control-arrow-dot {
    transform: translate(-50%, -50%) scale(1);
  }
  .control-steps .control-step:not(:first-child) .losses-card::before {
    opacity: 1;
  }
}