.engine-repair-page .sd-hero-visual::before {
  z-index: 6;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.18) 90px, transparent 160px);
}

.engine-repair-page .sd-hero-visual::after {
  z-index: 5;
  background:
    radial-gradient(ellipse at 34% 70%, rgba(242,13,22,.08), transparent 31%),
    linear-gradient(0deg, rgba(13,18,25,.2), transparent 38%);
}

.repair-hero-visual { background: #eef2f5; }

.engine-overhaul-page .sd-hero h1 {
  font-size: clamp(42px, 3.55vw, 66px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.repair-hero-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  filter: saturate(.82) contrast(1.02);
}

.repair-hero-car {
  position: absolute;
  z-index: 2;
  left: 2%;
  right: 1%;
  bottom: 7%;
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 28px 24px rgba(35,43,54,.2));
  animation: repair-car-in 1.15s cubic-bezier(.16,1,.3,1) backwards;
}

.repair-hero-base,
.repair-hero-xray {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.repair-hero-base { z-index: 1; }

.repair-hero-xray {
  z-index: 2;
  opacity: .24;
  clip-path: ellipse(7% 9% at 34% 55%);
  filter: saturate(.88) contrast(1.12) brightness(1.08) drop-shadow(0 0 18px rgba(242,13,22,.34));
}

.repair-hero-visual[data-focus="engine"] .repair-hero-xray {
  animation: repair-xray-cycle 4.8s cubic-bezier(.2,.75,.2,1) infinite;
}

.repair-hero-point {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  left: 34%;
  top: 55%;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #f20d16;
  box-shadow: 0 0 0 2px rgba(242,13,22,.76), 0 0 26px rgba(242,13,22,.34);
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease;
}

.repair-hero-point::before,
.repair-hero-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(242,13,22,.38);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: repair-ring 2.4s ease-out infinite;
}

.repair-hero-point::before { width: 98px; height: 98px; }
.repair-hero-point::after { width: 158px; height: 158px; animation-delay: .45s; }

.repair-hero-point span {
  position: absolute;
  top: 31px;
  left: 50%;
  min-width: 145px;
  padding: 8px 11px;
  color: #1b2028;
  border: 1px solid rgba(16,22,30,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(22,28,38,.12);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.repair-hero-point:hover,
.repair-hero-point:focus-visible,
.repair-hero-point.is-active {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(242,13,22,.88), 0 0 30px rgba(242,13,22,.44);
  outline: none;
}

.repair-hero-panel {
  position: absolute;
  z-index: 7;
  top: 34px;
  right: 28px;
  width: min(350px, calc(100% - 56px));
  padding: 20px 22px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(18,22,28,.9);
  box-shadow: 0 24px 60px rgba(18,24,32,.22);
  backdrop-filter: blur(16px);
}

.repair-hero-panel small,
.repair-hero-panel strong,
.repair-hero-panel span { display: block; }

.repair-hero-panel small {
  color: #ff5b62;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.repair-hero-panel strong {
  margin-top: 9px;
  font-size: 21px;
  line-height: 1.1;
}

.repair-hero-panel span {
  margin-top: 8px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.5;
}

@keyframes repair-car-in {
  from { opacity: 0; transform: translate3d(6%,0,0) scale(.98); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes repair-xray-cycle {
  0%, 12% { clip-path: ellipse(7% 9% at 34% 55%); opacity: .28; }
  34%, 72% { clip-path: ellipse(19% 24% at 34% 55%); opacity: 1; }
  92%, 100% { clip-path: ellipse(7% 9% at 34% 55%); opacity: .28; }
}

@keyframes repair-ring {
  0% { opacity: .65; transform: translate(-50%,-50%) scale(.62); }
  72%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08); }
}

.repair-exploded { scroll-margin-top: 78px; }

@media (max-width: 1100px) {
  .repair-hero-car { left: 0; right: -2%; bottom: 5%; }
  .repair-hero-panel { top: 22px; right: 20px; }
}

@media (max-width: 900px) {
  .repair-hero-visual { min-height: 560px; }
  .repair-hero-car { top: 5%; bottom: auto; }
  .repair-hero-panel { width: min(320px, calc(100% - 40px)); }
}

@media (max-width: 760px) {
  .repair-hero-panel { top: 16px; right: 16px; padding: 15px 17px; }
  .repair-hero-panel strong { font-size: 17px; }
  .repair-hero-point span { display: none; }
  .repair-hero-point::before { width: 72px; height: 72px; }
  .repair-hero-point::after { width: 112px; height: 112px; }
}

@media (max-width: 680px) {
  .repair-hero-visual { min-height: 460px; }
  .repair-hero-car { top: 14%; left: -3%; right: -5%; }
  .repair-hero-panel span { display: none; }
  .engine-overhaul-page .sd-hero h1 { font-size: clamp(36px, 10.6vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .repair-hero-car,
  .repair-hero-xray,
  .repair-hero-point::before,
  .repair-hero-point::after { animation: none; }
  .repair-hero-xray { clip-path: ellipse(19% 24% at 34% 55%); opacity: 1; }
}