.consumables-calculation {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background:
    linear-gradient(115deg, rgba(4, 25, 61, .035) 1px, transparent 1px) 0 0 / 22px 22px,
    #f3f6fa;
}

.consumables-calculation::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -310px;
  top: -335px;
  border: 1px solid rgba(5, 45, 102, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 76px rgba(5, 45, 102, .025);
}

.consumables-calculation__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  min-height: 510px;
  border: 1px solid rgba(6, 42, 91, .14);
  background: #fff;
  box-shadow: 0 34px 80px rgba(4, 25, 61, .13);
}

.consumables-calculation__visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  background: #fff;
}

.consumables-calculation__visual::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 216, 0, .78);
  pointer-events: none;
  transition: inset .7s cubic-bezier(.2,.8,.2,1);
}

.consumables-calculation__image {
  position: absolute;
  inset: 0;
  background: url("../../img/спа расчет.png") 67% center / cover no-repeat;
  transform: scale(1.015);
  transition: transform 1.15s cubic-bezier(.2,.8,.2,1), filter 1.15s ease;
}

.consumables-calculation__visual:hover .consumables-calculation__image {
  transform: scale(1.065);
  filter: contrast(1.025) saturate(1.04);
}

.consumables-calculation__visual:hover::after { inset: 11px; }

.consumables-calculation__index {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 220px;
  padding: 17px 22px;
  color: #fff;
  background: #062450;
  box-shadow: 14px -14px 0 rgba(255, 216, 0, .94);
}

.consumables-calculation__index span {
  color: #ffd800;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

.consumables-calculation__index small {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .14em;
}

.consumables-calculation__point {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd800;
  box-shadow: 0 0 0 8px rgba(255,216,0,.12), 0 0 24px rgba(255,216,0,.65);
  animation: calculationPoint 3s ease-in-out infinite;
}

.consumables-calculation__point--one { top: 24%; left: 13%; }
.consumables-calculation__point--two { right: 10%; bottom: 18%; animation-delay: -1.5s; }

.consumables-calculation__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 68px 66px;
  color: #fff;
  background:
    linear-gradient(140deg, rgba(255,216,0,.07), transparent 40%),
    #061e43;
}

.consumables-calculation__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 62px;
  width: 4px;
  height: 72px;
  background: #ffd800;
}

.consumables-calculation__content .consumables-kicker { margin-bottom: 18px; }

.consumables-calculation__content h2 {
  max-width: 590px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 3.5vw, 64px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.045em;
}

.consumables-calculation__content h2 span {
  position: relative;
  display: inline-block;
  color: #ffd800;
}

.consumables-calculation__content h2 .calculation-title__accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 42%;
  height: 3px;
  background: #ffd800;
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}

.consumables-calculation__shell:hover .consumables-calculation__content h2 .calculation-title__accent::after { width: 100%; }

.consumables-calculation__lead {
  max-width: 520px;
  margin: 28px 0 0;
  color: #bac8dc;
  font-size: 16px;
  line-height: 1.75;
}

.consumables-calculation__features {
  display: grid;
  gap: 10px;
  margin: 26px 0 34px;
}

.consumables-calculation__features span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d8e1ee;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
}

.consumables-calculation__features i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #061e43;
  background: #ffd800;
}

.consumables-calculation__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 430px);
  min-height: 72px;
  margin-top: 34px;
  padding: 0 14px 0 32px;
  color: #061e43;
  background: #ffd800;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .045em;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(255, 216, 0, .16);
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
}

.consumables-calculation__button i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: #061e43;
  transition: transform .4s ease;
}

.consumables-calculation__button:hover {
  color: #061e43;
  background: #ffe431;
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(255, 216, 0, .24);
}

.consumables-calculation__button:hover i { transform: translateX(4px); }

@keyframes calculationPoint {
  0%, 100% { transform: scale(.8); opacity: .45; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 1050px) {
  .consumables-calculation__shell { grid-template-columns: 1fr 1fr; }
  .consumables-calculation__content { padding: 54px 42px; }
}

@media (max-width: 820px) {
  .consumables-calculation { padding: 58px 0; }
  .consumables-calculation__shell { grid-template-columns: 1fr; }
  .consumables-calculation__visual { min-height: 420px; }
  .consumables-calculation__content { padding: 54px 42px 58px; }
}

@media (max-width: 560px) {
  .consumables-calculation { padding: 38px 0; }
  .consumables-calculation__shell { margin-inline: 15px; width: auto; }
  .consumables-calculation__visual { min-height: 305px; }
  .consumables-calculation__image { background-position: 70% center; }
  .consumables-calculation__visual::after { inset: 10px; }
  .consumables-calculation__content { padding: 44px 25px 38px; }
  .consumables-calculation__content::before { top: 40px; height: 54px; }
  .consumables-calculation__content h2 { font-size: 38px; }
  .consumables-calculation__lead { font-size: 14px; }
  .consumables-calculation__index { min-width: 190px; padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .consumables-calculation__image,
  .consumables-calculation__visual::after,
  .consumables-calculation__content h2 span::after,
  .consumables-calculation__button,
  .consumables-calculation__button i { transition: none; }
  .consumables-calculation__point { animation: none; }
}

/* Full-width calculation presentation: one image, no card-inside-card framing. */
.consumables-calculation {
  min-height: 0;
  padding: 0;
  background: #f7f8fa;
}

.consumables-calculation::before { display: none; }

.consumables-calculation__shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: 1179 / 670;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.consumables-calculation__visual {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: #fff;
}

.consumables-calculation__visual::after,
.consumables-calculation__index,
.consumables-calculation__point { display: none; }

.consumables-calculation__image {
  inset: 0;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.4s ease;
}

.consumables-calculation__visual:hover .consumables-calculation__image,
.consumables-calculation__shell:hover .consumables-calculation__image {
  transform: scale(1.012);
  filter: none;
}

.consumables-calculation__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100%;
  width: min(47%, 720px);
  margin-left: clamp(40px, 8vw, 155px);
  padding: 70px 20px;
  color: #071f45;
  background: transparent;
}

.consumables-calculation__content::before { display: none; }

.consumables-calculation__content .consumables-kicker {
  color: #b28d00;
  text-shadow: 0 1px #fff;
}

.consumables-calculation__content h2 {
  max-width: 670px;
  color: #071f45;
  font-size: clamp(46px, 4vw, 76px);
  line-height: 1.01;
}

.consumables-calculation__content h2 span {
  display: block;
  width: fit-content;
}

.consumables-calculation__content h2 .calculation-title__main {
  color: #071f45;
}

.consumables-calculation__content h2 .calculation-title__accent {
  color: #e6b900;
}

.consumables-calculation__content h2 .calculation-title__outline {
  margin-top: 4px;
  color: transparent;
  -webkit-text-stroke: 1.7px #071f45;
  text-stroke: 1.7px #071f45;
  letter-spacing: -.055em;
}

.consumables-calculation__lead {
  max-width: 590px;
  color: #5e6d82;
  font-size: 17px;
}

.consumables-calculation__features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 650px;
}

.consumables-calculation__features span {
  align-items: flex-start;
  color: #102b51;
  font-size: 11px;
  line-height: 1.35;
}

.consumables-calculation__features i {
  flex: 0 0 30px;
  color: #071f45;
  background: #ffd800;
}

.consumables-calculation__button {
  color: #fff;
  background: #071f45;
  box-shadow: 0 15px 34px rgba(7,31,69,.18);
}

.consumables-calculation__button i {
  color: #071f45;
  background: #ffd800;
}

.consumables-calculation__button:hover {
  color: #071f45;
  background: #ffd800;
  box-shadow: 0 22px 40px rgba(7,31,69,.22);
}

.consumables-calculation__button:hover i {
  color: #fff;
  background: #071f45;
}

@media (max-width: 1180px) {
  .consumables-calculation,
  .consumables-calculation__shell,
  .consumables-calculation__content { min-height: 650px; }
  .consumables-calculation__content {
    width: 52%;
    margin-left: 45px;
    padding-block: 50px;
  }
  .consumables-calculation__content h2 { font-size: 50px; }
}

@media (max-width: 820px) {
  .consumables-calculation { padding: 0; }
  .consumables-calculation,
  .consumables-calculation__shell { min-height: 0; }
  .consumables-calculation__shell { padding-top: 64%; }
  .consumables-calculation__visual { bottom: auto; height: 0; padding-top: 64%; }
  .consumables-calculation__content {
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 48px 32px 56px;
    background: #fff;
  }
  .consumables-calculation__content h2 { font-size: 44px; }
}

@media (max-width: 560px) {
  .consumables-calculation { padding: 0; }
  .consumables-calculation__shell {
    width: 100%;
    margin: 0;
    padding-top: 72%;
  }
  .consumables-calculation__visual { padding-top: 72%; }
  .consumables-calculation__image { background-position: center; }
  .consumables-calculation__content { padding: 38px 22px 44px; }
  .consumables-calculation__content h2 { font-size: 36px; }
  .consumables-calculation__features { grid-template-columns: 1fr; }
}