:root {
  --yellow: #ffd400;
  --yellow2: #ffbf00;
  --black: #080909;
  --panel: #141616;
  --text: #ffffff;
  --muted: #aeb4b4;
  --red: #ef2b25;
  --green: #55c72a;
  --border: rgba(255, 255, 255, 0.09);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
body {
  background:
    radial-gradient(
      circle at 70% 0%,
      rgba(255, 212, 0, 0.1),
      transparent 32rem
    ),
    linear-gradient(180deg, #0c0d0d 0, #070808 100%);
}
.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-weight: 1000;
  letter-spacing: -0.04em;
  font-size: clamp(22px, 4vw, 34px);
}
.brand .speed {
  color: var(--green);
}
.brand .service {
  color: var(--red);
}
.pill {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: #151717;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}
.hero {
  min-height: 72vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 44px;
  padding: 58px 0 34px;
}
.eyebrow {
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 13px;
}
h1 {
  margin: 12px 0 16px;
  font-size: clamp(48px, 8vw, 94px);
  line-height: 0.9;
  letter-spacing: -0.065em;
  max-width: 800px;
}
.yellow {
  color: var(--yellow);
}
.lead {
  color: #d6dada;
  line-height: 1.55;
  font-size: clamp(17px, 2vw, 21px);
  max-width: 650px;
}
.call-wrap {
  margin: 34px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.call-button {
  border: 0;
  cursor: pointer;
  color: #080909;
  font-weight: 1000;
  text-transform: uppercase;
  width: min(100%, 430px);
  min-height: 92px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #ffe55d 0%,
    var(--yellow) 50%,
    var(--yellow2) 100%
  );
  box-shadow:
    0 0 0 10px rgba(255, 212, 0, 0.07),
    0 18px 50px rgba(255, 193, 0, 0.28),
    inset 0 2px 1px rgba(255, 255, 255, 0.65);
  font-size: clamp(18px, 2.3vw, 25px);
  transition: 0.18s ease;
}
.call-button:hover {
  transform: translateY(-2px) scale(1.01);
}
.call-button:active {
  transform: scale(0.985);
}
.emergency {
  min-height: 60px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 212, 0, 0.38);
  background: transparent;
  color: #fff;
  font-weight: 800;
}
.visual {
  border-radius: 34px;
  min-height: 420px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255, 212, 0, 0.16), transparent 45%),
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.025) 0 2px,
      transparent 2px 16px
    ),
    #121414;
  display: grid;
  place-items: center;
  padding: 30px;
}
.tire {
  width: min(340px, 74vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 34px solid #111;
  box-shadow:
    inset 0 0 0 8px #252828,
    0 28px 70px rgba(0, 0, 0, 0.5);
  background: radial-gradient(
    circle,
    #444 0 12%,
    #111 13% 24%,
    #bbb 25% 28%,
    #333 29% 36%,
    #0d0e0e 37%
  );
  position: relative;
}
.tire:after {
  content: none;
}
.badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  background: rgba(7, 8, 8, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 48px;
}
.feature {
  padding: 18px;
  background: #111313;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.feature b {
  color: var(--yellow);
  display: block;
  margin-bottom: 5px;
}
.feature span {
  color: var(--muted);
  font-size: 14px;
}
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  padding: 16px;
  overflow: auto;
}
.modal-backdrop.open {
  display: grid;
  place-items: center;
}
.modal {
  width: min(680px, 100%);
  background: #101212;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 30px 100px #000;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #1c1f1f;
  color: white;
  cursor: pointer;
  font-size: 20px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field.full {
  grid-column: 1/-1;
}
label {
  font-size: 13px;
  color: #c9cece;
  font-weight: 800;
}
input,
textarea,
select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #1a1d1d;
  color: #fff;
  padding: 14px 15px;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255, 212, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.08);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.problem {
  border: 1px solid var(--border);
  background: #1a1d1d;
  color: #fff;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}
.problem.active {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.11);
}
.actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.primary {
  background: var(--yellow);
  color: #090a0a;
  border: 0;
  border-radius: 14px;
  padding: 15px 20px;
  font-weight: 1000;
  cursor: pointer;
}
.secondary {
  background: #1c1f1f;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 20px;
  font-weight: 800;
  cursor: pointer;
}
.statusbox {
  display: none;
  margin-top: 22px;
  padding: 20px;
  border-radius: 20px;
  background: #141616;
  border: 1px solid var(--border);
}
.statusbox.show {
  display: block;
}
.status-big {
  font-size: 28px;
  font-weight: 1000;
  color: var(--yellow);
}
.master-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 100vh;
}
.sidebar {
  border-right: 1px solid var(--border);
  padding: 24px;
  background: #0d0f0f;
  position: sticky;
  top: 0;
  height: 100vh;
}
.main {
  padding: 26px;
}
.master-title {
  font-size: 34px;
  margin: 0 0 20px;
}
.request-list {
  display: grid;
  gap: 14px;
}
.request-card {
  background: #121414;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
}
.request-card.new {
  border-color: rgba(255, 212, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.06);
}
.request-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.request-id {
  font-size: 13px;
  color: var(--muted);
}
.request-phone {
  color: white;
  font-size: 23px;
  font-weight: 1000;
  text-decoration: none;
}
.status {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  background: #242727;
}
.request-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 15px 0;
}
.data-cell {
  background: #191c1c;
  padding: 12px;
  border-radius: 13px;
}
.data-cell small {
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}
.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.status-actions button {
  background: #222525;
  border: 1px solid var(--border);
  color: #fff;
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
}
.status-actions button:hover {
  border-color: var(--yellow);
}
.photo-thumb {
  max-width: 180px;
  max-height: 120px;
  border-radius: 12px;
  margin-top: 12px;
  object-fit: cover;
}
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #080909;
  padding: 20px;
}
.login-card {
  width: min(430px, 100%);
  background: #111313;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
}
.hidden {
  display: none !important;
}
.toast {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 200;
  background: var(--yellow);
  color: #090909;
  font-weight: 900;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 20px 60px #000;
  display: none;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }
  .visual {
    min-height: 310px;
  }
  .features {
    grid-template-columns: 1fr 1fr;
  }
  .master-layout {
    display: block;
  }
  .sidebar {
    height: auto;
    position: relative;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .request-data {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .shell {
    padding: 16px;
  }
  .hero {
    min-height: auto;
    gap: 24px;
  }
  .visual {
    display: none;
  }
  .features {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .call-button {
    min-height: 82px;
  }
  .topbar .pill {
    display: none;
  }
  .main {
    padding: 16px;
  }
}

.active-request-card {
  margin: 4px 0 24px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255, 212, 0, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 212, 0, 0.09), transparent 55%), #111313;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}

.active-request-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.active-request-number {
  margin-top: 5px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 800;
}

.active-request-badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: #252828;
  font-size: 12px;
  font-weight: 1000;
}

.active-request-badge[data-status="new"] {
  color: var(--yellow);
}

.active-request-badge[data-status="accepted"],
.active-request-badge[data-status="on_the_way"],
.active-request-badge[data-status="working"] {
  color: #fff;
  border: 1px solid rgba(255, 212, 0, 0.35);
}

.active-request-badge[data-status="completed"] {
  color: var(--green);
}

.active-request-badge[data-status="cancelled"] {
  color: var(--red);
}

.active-request-status {
  margin-top: 18px;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.05;
  font-weight: 1000;
  color: var(--yellow);
}

.active-request-text {
  margin: 9px 0 18px;
  color: #d6dada;
  font-size: 16px;
}

.active-request-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #292c2c;
}

.active-request-progress-fill {
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow2), var(--yellow));
  transition: width 0.4s ease;
}

.active-request-footer {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* SPEED SERVICE CUSTOM ADDRESS AUTOCOMPLETE */

.address-suggestions {
  position: relative;
  z-index: 10000;
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 0, 0.55);
  border-radius: 14px;
  background: #121414;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.address-suggestions.hidden {
  display: none;
}

.address-suggestion {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: #151818;
  color: #f5f5f5;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.address-suggestion:last-of-type {
  border-bottom: 0;
}

.address-suggestion:hover,
.address-suggestion:focus {
  outline: none;
  background: #202323;
  color: #ffd400;
}

.address-google-attribution {
  padding: 7px 12px;
  background: #ffffff;
  color: #6b6b6b;
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
}

@media (max-width: 700px) {
  .address-suggestions {
    border-radius: 12px;
  }

  .address-suggestion {
    min-height: 58px;
    padding: 14px 13px;
    font-size: 16px;
  }
}

/* SPEED SERVICE DELETE / RESTORE BUTTONS */

.status-actions .btn-delete {
  border: 1px solid rgba(255, 69, 69, 0.48);
  background: linear-gradient(
    180deg,
    rgba(88, 22, 22, 0.72) 0%,
    rgba(47, 13, 13, 0.88) 100%
  );
  color: #ffb9b9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.18);
}

.status-actions .btn-delete:hover {
  border-color: #ff4a4a;
  background: linear-gradient(180deg, #c82d2d 0%, #921d1d 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(210, 40, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.status-actions .btn-delete:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(210, 40, 40, 0.18);
}

.status-actions .btn-restore {
  border: 1px solid rgba(55, 205, 105, 0.48);
  background: linear-gradient(
    180deg,
    rgba(19, 78, 41, 0.78) 0%,
    rgba(10, 43, 23, 0.92) 100%
  );
  color: #a8f5bf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.18);
}

.status-actions .btn-restore:hover {
  border-color: #39d875;
  background: linear-gradient(180deg, #27ad59 0%, #177c3c 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(39, 180, 91, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.status-actions .btn-restore:active {
  transform: translateY(0);
}

.status-actions .btn-delete,
.status-actions .btn-restore {
  font-weight: 800;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

/* MASTER DELETED SIDEBAR BUTTON */

#deletedBtn {
  min-width: 155px;
  padding: 16px 20px;

  border: 1px solid rgba(255, 65, 65, 0.45);
  border-radius: 17px;

  background: linear-gradient(
    180deg,
    rgba(55, 20, 20, 0.82) 0%,
    rgba(27, 14, 14, 0.92) 100%
  );

  color: #ffb3b3;

  font: inherit;
  font-weight: 800;
  font-size: 17px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 5px 14px rgba(0, 0, 0, 0.2);

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#deletedBtn:hover {
  background: linear-gradient(180deg, #a52626 0%, #6f1717 100%);

  border-color: #ff4d4d;
  color: #ffffff;

  transform: translateY(-1px);

  box-shadow: 0 9px 22px rgba(190, 35, 35, 0.25);
}

#deletedBtn:active {
  transform: translateY(0);
}

#deletedBtn.deleted-view-active {
  background: linear-gradient(180deg, #b62c2c 0%, #811c1c 100%);

  border-color: #ff6262;
  color: #ffffff;
}

/* MASTER SIDEBAR ACTION LAYOUT */

#refreshBtn,
#deletedBtn,
#logoutBtn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 194px;
  min-width: 194px;
  min-height: 64px;

  margin: 0 0 12px 0;
  padding: 14px 18px;

  border-radius: 17px;

  font: inherit;
  font-size: 17px;
  font-weight: 800;

  box-sizing: border-box;
}

#deletedBtn {
  min-width: 194px;
}

#logoutBtn {
  margin-top: 2px;
}

/* На вузькій панелі не даємо кнопкам вилізати */
@media (max-width: 900px) {
  #refreshBtn,
  #deletedBtn,
  #logoutBtn {
    width: 100%;
    min-width: 0;
  }
}

/* SPEED SERVICE WHEEL CTA */

.wheel-call-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 230px;
  height: 230px;

  margin: 28px auto;

  padding: 0;

  border: 4px solid #292929;
  border-radius: 50%;

  background: radial-gradient(
    circle at center,
    #171717 0 35%,
    #080808 36% 57%,
    #202020 58% 62%,
    #050505 63% 100%
  );

  color: #fff;

  cursor: pointer;
  overflow: hidden;

  box-shadow:
    0 0 0 2px rgba(255, 214, 0, 0.32),
    0 18px 45px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(255, 255, 255, 0.06);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* прибираємо старий вигляд CTA */
.wheel-call-button::before {
  content: "";

  position: absolute;
  inset: 8px;

  border-radius: 50%;

  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.12) 0deg 5deg,
    transparent 5deg 13deg
  );

  mask: radial-gradient(circle, transparent 0 63%, #000 64% 100%);

  pointer-events: none;
}

.wheel-call-button::after {
  content: "";

  position: absolute;

  width: 132px;
  height: 132px;

  border-radius: 50%;

  border: 2px solid rgba(255, 214, 0, 0.75);

  background: radial-gradient(
    circle,
    #171717 0 20%,
    #292929 21% 24%,
    #101010 25% 100%
  );

  box-shadow:
    0 0 24px rgba(255, 214, 0, 0.13),
    inset 0 0 20px rgba(0, 0, 0, 0.8);

  pointer-events: none;
}

.wheel-inner {
  position: relative;
  z-index: 4;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  line-height: 1.08;

  text-align: center;
}

.wheel-small {
  margin-bottom: 7px;

  color: #ffd600;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 2px;
}

.wheel-main {
  color: #fff;

  font-size: 18px;
  font-weight: 950;

  letter-spacing: 0.4px;

  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.wheel-call-button:hover {
  transform: translateY(-4px) rotate(2deg) scale(1.025);

  box-shadow:
    0 0 0 2px rgba(255, 214, 0, 0.7),
    0 24px 55px rgba(0, 0, 0, 0.58),
    0 0 35px rgba(255, 214, 0, 0.14);
}

.wheel-call-button:active {
  transform: scale(0.97);
}

@media (max-width: 600px) {
  .wheel-call-button {
    width: 205px;
    height: 205px;
  }

  .wheel-call-button::after {
    width: 118px;
    height: 118px;
  }

  .wheel-main {
    font-size: 16px;
  }
}

.wheel-call-button {
  border-color: rgba(255, 214, 0, 0.85);

  box-shadow:
    0 0 0 2px rgba(255, 214, 0, 0.22),
    0 0 22px rgba(255, 214, 0, 0.32),
    0 0 55px rgba(255, 214, 0, 0.14),
    0 24px 50px rgba(0, 0, 0, 0.58),
    inset 0 0 25px rgba(255, 214, 0, 0.06);

  animation: speedservice-wheel-glow 2.4s ease-in-out infinite;
}

.wheel-call-button::after {
  border-color: #ffd600;

  box-shadow:
    0 0 12px rgba(255, 214, 0, 0.42),
    0 0 30px rgba(255, 214, 0, 0.12),
    inset 0 0 24px rgba(0, 0, 0, 0.88);
}

.wheel-call-button:hover {
  transform: translateY(-5px) scale(1.035);

  box-shadow:
    0 0 0 2px rgba(255, 214, 0, 0.55),
    0 0 32px rgba(255, 214, 0, 0.58),
    0 0 75px rgba(255, 214, 0, 0.26),
    0 27px 55px rgba(0, 0, 0, 0.65);
}

.wheel-call-button:active {
  transform: scale(0.96);

  box-shadow:
    0 0 18px rgba(255, 214, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.55);
}

@keyframes speedservice-wheel-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(255, 214, 0, 0.2),
      0 0 18px rgba(255, 214, 0, 0.25),
      0 0 45px rgba(255, 214, 0, 0.1),
      0 24px 50px rgba(0, 0, 0, 0.58);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(255, 214, 0, 0.4),
      0 0 30px rgba(255, 214, 0, 0.45),
      0 0 68px rgba(255, 214, 0, 0.19),
      0 24px 50px rgba(0, 0, 0, 0.58);
  }
}

.speed-wheel-cta {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 250px !important;
  min-width: 250px !important;
  height: 250px !important;
  min-height: 250px !important;

  margin: 28px auto 40px !important;
  padding: 0 !important;

  border: 4px solid #ffd600 !important;
  border-radius: 50% !important;

  overflow: hidden !important;

  background: radial-gradient(
    circle at center,
    #111 0 33%,
    #050505 34% 57%,
    #252525 58% 62%,
    #050505 63% 100%
  ) !important;

  color: #fff !important;

  box-shadow:
    0 0 8px rgba(255, 214, 0, 0.85),
    0 0 26px rgba(255, 214, 0, 0.48),
    0 0 65px rgba(255, 214, 0, 0.22),
    0 24px 55px rgba(0, 0, 0, 0.65) !important;

  cursor: pointer !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease !important;

  animation: speed-wheel-pulse-v20 2.5s ease-in-out infinite !important;
}

/* протектор */
.speed-wheel-cta::before {
  content: "";

  position: absolute;
  inset: 10px;

  border-radius: 50%;

  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.19) 0deg 5deg,
    transparent 5deg 12deg
  );

  -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68% 100%);

  mask: radial-gradient(circle, transparent 0 67%, #000 68% 100%);

  pointer-events: none !important;
}

/* внутрішній диск */
.speed-wheel-cta::after {
  content: "";

  position: absolute;

  width: 142px;
  height: 142px;

  border: 2px solid #ffd600;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    #171717 0 18%,
    #292929 19% 22%,
    #0b0b0b 23% 100%
  );

  box-shadow:
    0 0 16px rgba(255, 214, 0, 0.4),
    inset 0 0 25px rgba(0, 0, 0, 0.85);

  pointer-events: none !important;
}

.speed-wheel-tire {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  pointer-events: none !important;
}

.speed-wheel-center {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: #fff;

  text-align: center;
  line-height: 1.05;

  pointer-events: none !important;
}

.speed-wheel-small {
  margin-bottom: 7px;

  color: #ffd600;

  font-size: 11px;
  font-weight: 950;

  letter-spacing: 2px;

  pointer-events: none !important;
}

.speed-wheel-title {
  color: #fff;

  font-size: 20px;
  font-weight: 950;

  text-shadow:
    0 2px 4px #000,
    0 0 5px rgba(255, 255, 255, 0.15);

  pointer-events: none !important;
}

.speed-wheel-cta:hover {
  transform: translateY(-4px) scale(1.035) !important;

  box-shadow:
    0 0 10px rgba(255, 214, 0, 1),
    0 0 35px rgba(255, 214, 0, 0.68),
    0 0 85px rgba(255, 214, 0, 0.3),
    0 28px 60px rgba(0, 0, 0, 0.68) !important;
}

.speed-wheel-cta:active {
  transform: scale(0.96) !important;
}

@keyframes speed-wheel-pulse-v20 {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(255, 214, 0, 0.7),
      0 0 24px rgba(255, 214, 0, 0.38),
      0 0 55px rgba(255, 214, 0, 0.16),
      0 24px 55px rgba(0, 0, 0, 0.65);
  }

  50% {
    box-shadow:
      0 0 12px rgba(255, 214, 0, 1),
      0 0 36px rgba(255, 214, 0, 0.62),
      0 0 80px rgba(255, 214, 0, 0.27),
      0 24px 55px rgba(0, 0, 0, 0.65);
  }
}

@media (max-width: 600px) {
  .speed-wheel-cta {
    width: 215px !important;
    min-width: 215px !important;

    height: 215px !important;
    min-height: 215px !important;
  }

  .speed-wheel-cta::after {
    width: 124px;
    height: 124px;
  }

  .speed-wheel-title {
    font-size: 17px;
  }

  .speed-wheel-small {
    font-size: 9px;
  }
}

.speed-wheel-main {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 250px !important;
  min-width: 250px !important;

  height: 250px !important;
  min-height: 250px !important;

  margin: 28px auto 42px !important;
  padding: 0 !important;

  border: 4px solid #ffd600 !important;
  border-radius: 50% !important;

  background: radial-gradient(
    circle,
    #111111 0 34%,
    #050505 35% 57%,
    #252525 58% 62%,
    #050505 63% 100%
  ) !important;

  color: white !important;

  overflow: hidden !important;
  cursor: pointer !important;

  box-shadow:
    0 0 8px rgba(255, 214, 0, 0.95),
    0 0 28px rgba(255, 214, 0, 0.52),
    0 0 70px rgba(255, 214, 0, 0.22),
    0 25px 55px rgba(0, 0, 0, 0.65) !important;

  animation: main-wheel-glow 2.4s ease-in-out infinite !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* протектор */
.speed-wheel-main::before {
  content: "";

  position: absolute;
  inset: 10px;

  border-radius: 50%;

  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.2) 0deg 5deg,
    transparent 5deg 12deg
  );

  -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68%);

  mask: radial-gradient(circle, transparent 0 67%, #000 68%);

  pointer-events: none;
}

/* центральний диск */
.speed-wheel-main::after {
  content: "";

  position: absolute;

  width: 142px;
  height: 142px;

  border: 2px solid #ffd600;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    #171717 0 18%,
    #292929 19% 22%,
    #090909 23% 100%
  );

  box-shadow:
    0 0 18px rgba(255, 214, 0, 0.42),
    inset 0 0 26px rgba(0, 0, 0, 0.9);

  pointer-events: none;
}

.wheel-center-copy {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
  line-height: 1.05;

  pointer-events: none;
}

.wheel-mini {
  margin-bottom: 7px;

  color: #ffd600;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

.wheel-big {
  color: #fff;

  font-size: 20px;
  font-weight: 950;

  text-shadow:
    0 2px 4px #000,
    0 0 4px rgba(255, 255, 255, 0.2);
}

.speed-wheel-main:hover {
  transform: translateY(-4px) scale(1.035) !important;

  box-shadow:
    0 0 12px rgba(255, 214, 0, 1),
    0 0 40px rgba(255, 214, 0, 0.7),
    0 0 90px rgba(255, 214, 0, 0.3),
    0 28px 60px rgba(0, 0, 0, 0.7) !important;
}

.speed-wheel-main:active {
  transform: scale(0.96) !important;
}

@keyframes main-wheel-glow {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(255, 214, 0, 0.7),
      0 0 25px rgba(255, 214, 0, 0.38),
      0 0 55px rgba(255, 214, 0, 0.15),
      0 25px 55px rgba(0, 0, 0, 0.65);
  }

  50% {
    box-shadow:
      0 0 12px rgba(255, 214, 0, 1),
      0 0 38px rgba(255, 214, 0, 0.62),
      0 0 82px rgba(255, 214, 0, 0.28),
      0 25px 55px rgba(0, 0, 0, 0.65);
  }
}

@media (max-width: 600px) {
  .speed-wheel-main {
    width: 215px !important;
    min-width: 215px !important;

    height: 215px !important;
    min-height: 215px !important;
  }

  .speed-wheel-main::after {
    width: 122px;
    height: 122px;
  }

  .wheel-big {
    font-size: 17px;
  }
}

.speed-wheel-main {
  animation: speed-wheel-blink-v25 1.35s ease-in-out infinite !important;
}

@keyframes speed-wheel-blink-v25 {
  0%,
  100% {
    transform: scale(1);

    filter: brightness(1);

    box-shadow:
      0 0 6px rgba(255, 214, 0, 0.65),
      0 0 20px rgba(255, 214, 0, 0.3),
      0 0 45px rgba(255, 214, 0, 0.12),
      0 24px 55px rgba(0, 0, 0, 0.65);
  }

  50% {
    transform: scale(1.035);

    filter: brightness(1.13);

    box-shadow:
      0 0 12px rgba(255, 225, 70, 1),
      0 0 36px rgba(255, 214, 0, 0.78),
      0 0 85px rgba(255, 214, 0, 0.4),
      0 0 120px rgba(255, 214, 0, 0.15),
      0 26px 60px rgba(0, 0, 0, 0.7);
  }
}

.speed-wheel-main:hover {
  animation-play-state: paused !important;

  transform: scale(1.055) !important;

  filter: brightness(1.18);

  box-shadow:
    0 0 14px rgba(255, 230, 90, 1),
    0 0 44px rgba(255, 214, 0, 0.85),
    0 0 100px rgba(255, 214, 0, 0.44),
    0 28px 60px rgba(0, 0, 0, 0.7) !important;
}

.speed-wheel-main:active {
  transform: scale(0.94) !important;
}

.speed-wheel-main {
  isolation: isolate !important;
}

/* протектор */
.speed-wheel-main::before {
  z-index: 1 !important;
}

/* центральний чорний диск */
.speed-wheel-main::after {
  z-index: 2 !important;
}

/* напис завжди поверх диска */
.speed-wheel-main .wheel-center-copy {
  position: relative !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 125px !important;
  height: 125px !important;

  margin: 0 !important;

  text-align: center !important;
  pointer-events: none !important;
}

.speed-wheel-main .wheel-mini {
  position: relative !important;
  z-index: 11 !important;

  margin-bottom: 7px !important;

  color: #ffd600 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
}

.speed-wheel-main .wheel-big {
  position: relative !important;
  z-index: 11 !important;

  display: block !important;

  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;

  white-space: nowrap !important;

  text-shadow:
    0 2px 4px #000,
    0 0 5px rgba(255, 255, 255, 0.18) !important;
}

/* Старий центральний диск більше не використовуємо */
.speed-wheel-main::after {
  display: none !important;
}

/* Центр колеса тепер є контейнером самого тексту */
.speed-wheel-main .wheel-center-copy {
  position: relative !important;
  z-index: 50 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 142px !important;
  height: 142px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 2px solid #ffd600 !important;
  border-radius: 50% !important;

  background: radial-gradient(
    circle,
    #171717 0%,
    #101010 55%,
    #080808 100%
  ) !important;

  box-shadow:
    0 0 14px rgba(255, 214, 0, 0.3),
    inset 0 0 25px rgba(0, 0, 0, 0.9) !important;

  overflow: visible !important;
  pointer-events: none !important;
}

.speed-wheel-main .wheel-mini {
  position: relative !important;
  z-index: 51 !important;

  display: block !important;

  margin: 0 0 7px !important;

  color: #ffd600 !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 1.7px !important;

  white-space: nowrap !important;
}

.speed-wheel-main .wheel-big {
  position: relative !important;
  z-index: 51 !important;

  display: block !important;

  margin: 0 !important;

  color: #fff !important;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;

  white-space: nowrap !important;

  text-shadow:
    0 2px 4px #000,
    0 0 5px rgba(255, 255, 255, 0.15) !important;
}

/* Значно спокійніше "дихання" */
.speed-wheel-main {
  animation: speed-wheel-soft-pulse-v28 3.8s ease-in-out infinite !important;
}

@keyframes speed-wheel-soft-pulse-v28 {
  0%,
  100% {
    transform: scale(1);

    filter: brightness(1);

    box-shadow:
      0 0 7px rgba(255, 214, 0, 0.65),
      0 0 22px rgba(255, 214, 0, 0.3),
      0 0 48px rgba(255, 214, 0, 0.12),
      0 24px 55px rgba(0, 0, 0, 0.65);
  }

  50% {
    transform: scale(1.012);

    filter: brightness(1.05);

    box-shadow:
      0 0 10px rgba(255, 220, 35, 0.9),
      0 0 30px rgba(255, 214, 0, 0.5),
      0 0 64px rgba(255, 214, 0, 0.2),
      0 24px 55px rgba(0, 0, 0, 0.65);
  }
}

.speed-wheel-main:hover {
  animation-play-state: paused !important;

  transform: translateY(-3px) scale(1.025) !important;

  filter: brightness(1.08) !important;
}

.speed-wheel-main:active {
  transform: scale(0.96) !important;
}

@media (max-width: 600px) {
  .speed-wheel-main .wheel-center-copy {
    width: 124px !important;
    height: 124px !important;
  }

  .speed-wheel-main .wheel-big {
    font-size: 15px !important;
  }

  .speed-wheel-main .wheel-mini {
    font-size: 8px !important;
  }
}

.speed-wheel-main {
  transform: none !important;

  animation: speed-wheel-breathe-v29 6s ease-in-out infinite !important;

  animation-play-state: running !important;

  will-change: box-shadow, filter;
}

/* правильні шари */
.speed-wheel-main::before {
  z-index: 1 !important;
}

.speed-wheel-main::after {
  display: none !important;
}

/* центр фізично містить текст */
.speed-wheel-main .wheel-center-copy {
  position: relative !important;
  z-index: 20 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 142px !important;
  height: 142px !important;

  border: 2px solid #ffd600 !important;
  border-radius: 50% !important;

  background: radial-gradient(
    circle at 50% 42%,
    #171717 0%,
    #0d0d0d 58%,
    #050505 100%
  ) !important;

  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.92),
    0 0 13px rgba(255, 214, 0, 0.24) !important;

  pointer-events: none !important;
}

.speed-wheel-main .wheel-mini {
  display: block !important;

  margin: 0 0 8px !important;

  color: #ffd600 !important;

  font-size: 9px !important;
  font-weight: 950 !important;

  line-height: 1 !important;
  letter-spacing: 1.8px !important;

  white-space: nowrap !important;
}

.speed-wheel-main .wheel-big {
  display: block !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 950 !important;

  line-height: 1.04 !important;

  white-space: nowrap !important;

  text-shadow:
    0 2px 4px #000,
    0 0 5px rgba(255, 255, 255, 0.15) !important;
}

/* ПОВІЛЬНЕ ДИХАННЯ СВІТЛА */
@keyframes speed-wheel-breathe-v29 {
  0%,
  100% {
    filter: brightness(1);

    box-shadow:
      0 0 5px rgba(255, 214, 0, 0.55),
      0 0 16px rgba(255, 214, 0, 0.25),
      0 0 35px rgba(255, 214, 0, 0.1),
      0 22px 50px rgba(0, 0, 0, 0.62) !important;
  }

  25% {
    filter: brightness(1.035);

    box-shadow:
      0 0 8px rgba(255, 220, 35, 0.72),
      0 0 24px rgba(255, 214, 0, 0.38),
      0 0 52px rgba(255, 214, 0, 0.16),
      0 22px 50px rgba(0, 0, 0, 0.62) !important;
  }

  50% {
    filter: brightness(1.09);

    box-shadow:
      0 0 12px rgba(255, 225, 70, 0.95),
      0 0 34px rgba(255, 214, 0, 0.58),
      0 0 72px rgba(255, 214, 0, 0.25),
      0 0 100px rgba(255, 214, 0, 0.1),
      0 22px 50px rgba(0, 0, 0, 0.62) !important;
  }

  75% {
    filter: brightness(1.035);

    box-shadow:
      0 0 8px rgba(255, 220, 35, 0.72),
      0 0 24px rgba(255, 214, 0, 0.38),
      0 0 52px rgba(255, 214, 0, 0.16),
      0 22px 50px rgba(0, 0, 0, 0.62) !important;
  }
}

/* hover не зупиняє дихання */
.speed-wheel-main:hover {
  animation-play-state: running !important;

  transform: translateY(-2px) scale(1.01) !important;
}

.speed-wheel-main:active {
  transform: scale(0.97) !important;
}

@media (max-width: 600px) {
  .speed-wheel-main .wheel-center-copy {
    width: 122px !important;
    height: 122px !important;
  }

  .speed-wheel-main .wheel-big {
    font-size: 15px !important;
  }

  .speed-wheel-main .wheel-mini {
    font-size: 8px !important;
  }
}

/* колесо більше не смикаємо */
.speed-wheel-main {
  animation: none !important;
  overflow: visible !important;
}

/* окремий живий ореол */
.speed-wheel-main::after {
  content: "" !important;

  display: block !important;

  position: absolute !important;
  inset: -9px !important;

  width: auto !important;
  height: auto !important;

  border: 3px solid #ffd600 !important;
  border-radius: 50% !important;

  background: transparent !important;

  pointer-events: none !important;

  z-index: 0 !important;

  opacity: 0.25;

  box-shadow:
    0 0 10px rgba(255, 214, 0, 0.55),
    0 0 28px rgba(255, 214, 0, 0.35),
    0 0 60px rgba(255, 214, 0, 0.18);

  animation: wheel-auto-glow-v30 5.5s ease-in-out infinite !important;
}

/* протектор */
.speed-wheel-main::before {
  z-index: 2 !important;
}

/* текст */
.speed-wheel-main .wheel-center-copy {
  z-index: 10 !important;
}

/* приблизно 2.75 сек світлішає + 2.75 сек згасає */
@keyframes wheel-auto-glow-v30 {
  0%,
  100% {
    opacity: 0.22;

    transform: scale(0.985);

    box-shadow:
      0 0 7px rgba(255, 214, 0, 0.4),
      0 0 20px rgba(255, 214, 0, 0.22),
      0 0 42px rgba(255, 214, 0, 0.1);
  }

  50% {
    opacity: 1;

    transform: scale(1.045);

    box-shadow:
      0 0 14px rgba(255, 235, 100, 1),
      0 0 38px rgba(255, 214, 0, 0.7),
      0 0 78px rgba(255, 214, 0, 0.38),
      0 0 115px rgba(255, 214, 0, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .speed-wheel-main::after {
    animation: wheel-auto-glow-v30 5.5s ease-in-out infinite !important;
  }
}

.master-live-location {
  margin-top: 22px;
  padding: 18px;

  border: 1px solid rgba(255, 214, 0, 0.32);
  border-radius: 20px;

  background:
    linear-gradient(180deg, rgba(255, 214, 0, 0.055), rgba(255, 214, 0, 0.015)),
    #101212;

  overflow: hidden;
}

.master-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}

.master-live-label {
  margin-bottom: 4px;

  color: #ffd600;

  font-size: 11px;
  font-weight: 950;

  letter-spacing: 1.8px;
}

.master-live-title {
  color: #fff;

  font-size: 18px;
  font-weight: 900;
}

.master-live-dot {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: #45e36f;

  box-shadow:
    0 0 8px rgba(69, 227, 111, 0.8),
    0 0 20px rgba(69, 227, 111, 0.4);

  animation: master-live-dot-pulse 2s ease-in-out infinite;
}

.master-live-info {
  margin-bottom: 12px;

  color: #c4c8c8;

  font-size: 14px;
}

.master-live-map {
  width: 100%;
  height: 290px;

  border: 1px solid #2d3030;
  border-radius: 16px;

  overflow: hidden;

  background: #080909;
}

@keyframes master-live-dot-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@media (max-width: 600px) {
  .master-live-location {
    padding: 14px;
  }

  .master-live-map {
    height: 240px;
  }

  .master-live-title {
    font-size: 16px;
  }
}

.master-map-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 0 0 12px;
  padding: 13px 16px;

  border: 1px solid rgba(255, 214, 0, 0.45);
  border-radius: 14px;

  background: rgba(255, 214, 0, 0.08);

  color: #ffd600;

  font: inherit;
  font-size: 15px;
  font-weight: 900;

  cursor: pointer;
}

.master-map-expand-btn[hidden] {
  display: none !important;
}

.master-map-expand-btn:active {
  transform: scale(0.98);
}

/* Поки повний екран відкритий —
   сторінка під картою не скролиться */
body.master-map-open {
  overflow: hidden !important;
}

/* FULL SCREEN MAP */
.master-live-location.map-expanded .master-live-map {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  z-index: 10000 !important;

  width: 100vw !important;
  height: 100dvh !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
}

/* Кнопка закриття поверх карти */
.master-live-location.map-expanded .master-map-expand-btn {
  position: fixed !important;

  top: calc(env(safe-area-inset-top) + 14px) !important;
  right: 14px !important;

  z-index: 10002 !important;

  width: auto !important;

  margin: 0 !important;
  padding: 12px 16px !important;

  border: 1px solid rgba(255, 214, 0, 0.75) !important;

  background: rgba(10, 10, 10, 0.88) !important;

  color: #ffd600 !important;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;

  backdrop-filter: blur(10px);
}

/* Трохи більша карта навіть без fullscreen */
@media (max-width: 600px) {
  .master-live-map {
    height: 310px;
  }

  .master-live-location.map-expanded .master-live-map {
    height: 100dvh !important;
  }
}

.master-live-phone {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 0 0 12px;
  padding: 14px 16px;

  box-sizing: border-box;

  border: 1px solid rgba(69, 227, 111, 0.42);
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(69, 227, 111, 0.11),
    rgba(69, 227, 111, 0.045)
  );

  color: #8df2aa;

  font-size: 16px;
  font-weight: 900;

  text-decoration: none;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.master-live-phone[hidden] {
  display: none !important;
}

.master-live-phone:hover {
  border-color: #45e36f;

  background: rgba(69, 227, 111, 0.17);

  color: #b7ffc9;
}

.master-live-phone:active {
  transform: scale(0.975);
}

#financeBtn {
  width: 194px;
  min-width: 194px;
  min-height: 64px;

  margin: 0 0 12px 0;

  border: 1px solid rgba(255, 214, 0, 0.38);
  border-radius: 17px;

  background: linear-gradient(
    180deg,
    rgba(67, 58, 15, 0.72),
    rgba(35, 31, 12, 0.92)
  );

  color: #ffe56e;

  font-size: 17px;
  font-weight: 850;
}

.request-source {
  display: inline-flex;

  margin-top: 8px;
  padding: 5px 9px;

  border: 1px solid #323636;
  border-radius: 999px;

  background: #101212;

  color: #c7cccc;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.finance-summary {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

  gap: 14px;

  margin-bottom: 30px;
}

.finance-summary-card {
  padding: 20px;

  border: 1px solid #292d2d;
  border-radius: 18px;

  background: linear-gradient(180deg, #151717, #0e1010);
}

.finance-summary-card small {
  display: block;

  margin-bottom: 10px;

  color: #909898;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.finance-summary-card strong {
  display: block;

  color: #fff;

  font-size: 25px;
}

.finance-summary-card.commission {
  border-color: rgba(255, 214, 0, 0.45);
}

.finance-summary-card.commission strong {
  color: #ffd600;
}

.finance-summary-card.paid {
  border-color: rgba(56, 202, 105, 0.35);
}

.finance-summary-card.paid strong {
  color: #7ee79d;
}

.finance-summary-card.unpaid {
  border-color: rgba(255, 176, 51, 0.42);
}

.finance-summary-card.unpaid strong {
  color: #ffba55;
}

.finance-history-title {
  margin: 10px 0 18px;

  color: #fff;
}

.finance-history {
  display: grid;
  gap: 16px;
}

.finance-split {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 18px;
}

.finance-split > div {
  padding: 14px;

  border: 1px solid #292d2d;
  border-radius: 14px;

  background: #0d0f0f;
}

.finance-split small {
  display: block;

  margin-bottom: 7px;

  color: #919999;
}

.finance-split strong {
  color: #fff;

  font-size: 18px;
}

.finance-split .commission {
  border-color: rgba(255, 214, 0, 0.4);
}

.finance-split .commission strong {
  color: #ffd600;
}

.finance-payment-status {
  padding: 7px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
}

.finance-payment-status.paid {
  background: rgba(49, 184, 90, 0.15);

  color: #7ee79d;
}

.finance-payment-status.unpaid {
  background: rgba(255, 174, 46, 0.13);

  color: #ffc36a;
}

.finance-paid-btn {
  margin-top: 15px;
  padding: 12px 16px;

  border: 1px solid rgba(255, 214, 0, 0.42);

  border-radius: 13px;

  background: rgba(255, 214, 0, 0.07);

  color: #ffd600;

  font: inherit;
  font-weight: 850;

  cursor: pointer;
}

.finance-no-commission {
  margin-top: 15px;

  color: #8d9696;

  font-size: 13px;
}

@media (max-width: 700px) {
  .finance-split {
    grid-template-columns: 1fr;
  }

  #financeBtn {
    width: 100%;
    min-width: 0;
  }
}

.master-live-eta {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;

  margin: 14px 0 12px;
}

.master-eta-item {
  min-width: 0;

  padding: 12px 10px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(29, 31, 31, 0.96),
    rgba(15, 17, 17, 0.96)
  );

  text-align: center;
}

.master-eta-item small {
  display: block;

  margin-bottom: 7px;

  color: #929b9b;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.8px;
}

.master-eta-item strong {
  display: block;

  color: #ffffff;

  font-size: 17px;
  font-weight: 950;
}

.master-eta-item:nth-child(2) {
  border-color: rgba(255, 214, 0, 0.32);
}

.master-eta-item:nth-child(2) strong {
  color: #ffd600;
}

.master-eta-item.arrival {
  border-color: rgba(73, 215, 117, 0.27);
}

.master-eta-item.arrival strong {
  color: #7ee79d;
}

.master-live-location.map-expanded .master-live-eta {
  position: fixed;

  z-index: 1000002;

  left: 50%;
  bottom: 18px;

  transform: translateX(-50%);

  width: min(calc(100vw - 30px), 520px);

  margin: 0;

  padding: 7px;

  border-radius: 18px;

  background: rgba(7, 9, 9, 0.88);

  backdrop-filter: blur(14px);

  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.48);
}

@media (max-width: 520px) {
  .master-live-eta {
    gap: 6px;
  }

  .master-eta-item {
    padding: 10px 5px;
  }

  .master-eta-item small {
    font-size: 8px;
  }

  .master-eta-item strong {
    font-size: 14px;
  }

  .master-live-location.map-expanded .master-live-eta {
    bottom: 12px;

    width: calc(100vw - 20px);
  }
}

.customer-notification-toast {
  position: fixed;

  z-index: 2000000;

  left: 50%;
  top: max(16px, env(safe-area-inset-top));

  transform: translate(-50%, -140%);

  width: min(calc(100vw - 28px), 520px);

  padding: 16px 18px;

  border: 1px solid rgba(255, 214, 0, 0.48);

  border-radius: 18px;

  background: rgba(12, 14, 14, 0.96);

  box-shadow: 0 16px 55px rgba(0, 0, 0, 0.52);

  backdrop-filter: blur(16px);

  opacity: 0;

  pointer-events: none;

  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
}

.customer-notification-toast.show {
  transform: translate(-50%, 0);

  opacity: 1;
}

.customer-notification-toast strong {
  display: block;

  margin-bottom: 5px;

  color: #ffd600;

  font-size: 16px;
  font-weight: 950;
}

.customer-notification-toast span {
  display: block;

  color: #f4f6f6;

  font-size: 14px;
  line-height: 1.4;
}

.btn-permanent-delete {
  min-height: 48px;

  padding: 11px 16px;

  border: 1px solid rgba(255, 49, 49, 0.7);

  border-radius: 13px;

  background: linear-gradient(
    180deg,
    rgba(105, 15, 15, 0.62),
    rgba(58, 9, 9, 0.8)
  );

  color: #ff7070;

  font: inherit;
  font-weight: 900;

  cursor: pointer;
}

.btn-permanent-delete:hover {
  border-color: #ff4242;
  background: rgba(130, 18, 18, 0.7);

  color: #ffffff;
}

.btn-permanent-delete:active {
  transform: scale(0.98);
}

.login-overlay {
  padding: 18px;
}

.login-card {
  width: min(430px, calc(100vw - 30px));

  padding: 28px 24px 24px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 24px;

  background: linear-gradient(180deg, #151717 0%, #0d0f0f 100%);

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.login-card .brand {
  margin-bottom: 24px;
}

.login-card h2 {
  margin: 0 0 22px;

  color: #fff;

  font-size: 25px;
  line-height: 1.15;
}

.master-login-label {
  display: block;

  margin: 0 0 7px;

  color: #c2c8c8;

  font-size: 13px;
  font-weight: 800;
}

#masterLogin,
#masterPassword {
  box-sizing: border-box;

  display: block;

  width: 100%;
  height: 54px;

  margin: 0;

  padding: 0 16px;

  border: 1px solid #343939;

  border-radius: 14px;

  outline: none;

  background: #090b0b;

  color: #fff;

  font-size: 16px;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#masterLogin {
  margin-bottom: 18px;
}

#masterLogin:focus,
#masterPassword:focus {
  border-color: #ffd600;

  background: #0d0f0f;

  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.12);
}

#masterLogin::placeholder,
#masterPassword::placeholder {
  color: #697070;
}

.master-password-wrap {
  position: relative;

  width: 100%;

  margin-bottom: 20px;
}

.master-password-wrap #masterPassword {
  padding-right: 58px;
}

.master-password-toggle {
  position: absolute;

  top: 50%;
  right: 7px;

  transform: translateY(-50%);

  display: grid;

  place-items: center;

  width: 42px;
  height: 40px;

  padding: 0;

  border: 0;
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.055);

  color: #fff;

  font-size: 18px;

  cursor: pointer;
}

.master-password-toggle:active {
  transform: translateY(-50%) scale(0.94);
}

.login-card .actions {
  display: block;

  width: 100%;

  margin: 0;
}

.login-card .actions #loginBtn {
  width: 100%;
  min-height: 54px;

  margin: 0;

  border: 0;
  border-radius: 14px;

  background: linear-gradient(180deg, #ffe32c, #ffd000);

  color: #080909;

  font-size: 17px;
  font-weight: 950;

  box-shadow: 0 10px 26px rgba(255, 214, 0, 0.16);
}

.login-card .actions #loginBtn:active {
  transform: scale(0.985);
}

@media (max-width: 520px) {
  .login-overlay {
    align-items: center;

    padding: 15px;
  }

  .login-card {
    width: 100%;

    padding: 25px 20px 21px;

    border-radius: 21px;
  }

  .login-card h2 {
    font-size: 23px;

    margin-bottom: 20px;
  }

  #masterLogin,
  #masterPassword {
    height: 56px;

    font-size: 16px;
  }

  .login-card .actions #loginBtn {
    min-height: 56px;
  }
}

#masterPushBtn {
  width: 194px;
  min-width: 194px;
  min-height: 58px;

  margin-bottom: 12px;

  border: 1px solid rgba(255, 214, 0, 0.25);

  border-radius: 17px;

  background: #141616;

  color: #e7eeee;

  font-size: 16px;
  font-weight: 850;
}

#masterPushBtn.push-enabled {
  border-color: rgba(74, 218, 115, 0.4);

  color: #7ee79d;
}

.customer-push-btn {
  position: fixed;

  z-index: 80;

  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));

  transform: translateX(-50%);

  width: min(360px, calc(100vw - 30px));

  min-height: 50px;

  padding: 10px 18px;

  border: 1px solid rgba(255, 214, 0, 0.42);

  border-radius: 16px;

  background: rgba(13, 15, 15, 0.96);

  color: #ffd600;

  font: inherit;
  font-weight: 900;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.46);

  backdrop-filter: blur(12px);
}

.customer-push-btn.enabled {
  border-color: rgba(67, 214, 111, 0.36);

  color: #7ee79d;
}

.customer-push-btn[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  #masterPushBtn {
    width: 100%;
    min-width: 0;
  }
}

.login-card {
  width: min(100% - 32px, 460px);
  padding: 30px;
}

.login-card h2 {
  margin: 24px 0 8px;
}

.master-login-fields {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.master-login-field {
  display: grid;
  gap: 8px;
}

.master-login-field > span {
  color: #aeb4b4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.master-login-field input {
  width: 100%;
  min-height: 62px;
  box-sizing: border-box;
  padding: 0 18px;

  border: 1px solid #363a3a;
  border-radius: 16px;

  background: #171919;
  color: #fff;

  font-size: 18px;
  outline: none;
}

.master-login-field input:focus {
  border-color: #ffd600;

  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.1);
}

.master-password-wrap {
  position: relative;
}

.master-password-wrap input {
  padding-right: 64px;
}

.master-password-toggle {
  position: absolute;

  top: 50%;
  right: 9px;

  width: 46px;
  height: 46px;

  transform: translateY(-50%);

  border: 0;
  border-radius: 12px;

  background: #242727;
  color: #fff;

  font-size: 20px;
}

.master-login-actions {
  margin-top: 24px;
}

.master-login-actions #loginBtn {
  width: 100%;
  min-height: 62px;

  border-radius: 16px;

  font-size: 19px;
  font-weight: 950;
}

@media (max-width: 520px) {
  .login-card {
    padding: 26px 22px;
  }

  .login-card .brand {
    font-size: 26px;
  }
}

.login-overlay {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  padding:
    max(18px, env(safe-area-inset-top))
    18px
    max(18px, env(safe-area-inset-bottom));

  background: #050606;
}

.login-card {
  box-sizing: border-box;

  width: min(100%, 430px);

  padding: 28px 24px 26px;

  border: 1px solid #2d3131;
  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      #121414 0%,
      #0b0d0d 100%
    );

  box-shadow:
    0 25px 70px rgba(0, 0, 0, .55);
}

.login-card .brand {
  margin: 0 0 24px;
}

.login-card h2 {
  margin: 0 0 10px;

  color: #fff;

  font-size: 28px;
  line-height: 1.1;
}

.login-card > p {
  margin:
    0
    0
    28px !important;

  line-height: 1.4;
}

.master-auth-form {
  display: grid;

  gap: 22px;

  margin: 0;
}

.master-auth-group {
  display: grid;

  gap: 9px;

  margin: 0;
}

.master-auth-group::before,
.master-auth-group::after,
.master-auth-caption::before,
.master-auth-caption::after {
  content: none !important;
  display: none !important;
}

.master-auth-caption {
  margin: 0;

  color: #c5caca;

  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.master-auth-input,
#masterLogin.master-auth-input,
#masterPassword.master-auth-input {
  display: block;

  box-sizing: border-box;

  width: 100%;
  height: 60px;

  margin: 0 !important;

  padding: 0 18px;

  border: 1px solid #343939;
  border-radius: 16px;

  outline: none;

  background: #090b0b;

  color: #fff;

  font-size: 17px;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.master-auth-input::placeholder {
  color: #626969;
  opacity: 1;
}

.master-auth-input:focus,
#masterLogin.master-auth-input:focus,
#masterPassword.master-auth-input:focus {
  border-color: #ffd600;

  background: #0d0f0f;

  box-shadow:
    0 0 0 3px rgba(255, 214, 0, .11);
}

.master-auth-password {
  position: relative;

  width: 100%;

  margin: 0;
}

.master-auth-password
#masterPassword {
  padding-right: 68px;
}

.master-auth-eye {
  position: absolute;

  top: 50%;
  right: 8px;

  display: grid;
  place-items: center;

  width: 46px;
  height: 44px;

  padding: 0;

  transform: translateY(-50%);

  border: 0;
  border-radius: 12px;

  background: #242727;

  color: #fff;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;
}

.master-auth-eye:active {
  transform:
    translateY(-50%)
    scale(.94);
}

.master-login-actions {
  margin-top: 26px !important;
}

.master-login-actions #loginBtn {
  box-sizing: border-box;

  width: 100%;
  min-height: 60px;

  margin: 0;

  border: 0;
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      #ffe42e,
      #ffd000
    );

  color: #080909;

  font-size: 19px;
  font-weight: 950;
}

@media (max-width: 520px) {
  .login-card {
    width: 100%;

    padding: 26px 22px 24px;

    border-radius: 22px;
  }

  .login-card .brand {
    margin-bottom: 22px;
  }

  .login-card h2 {
    font-size: 26px;
  }

  .login-card > p {
    margin-bottom: 25px !important;
  }

  .master-auth-form {
    gap: 20px;
  }

  .master-auth-input,
  #masterLogin.master-auth-input,
  #masterPassword.master-auth-input {
    height: 58px;
  }

  .master-login-actions #loginBtn {
    min-height: 58px;
  }
}

/* FIXED UKRAINE PHONE PREFIX */
.phone-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #343838;
  border-radius: 17px;
  background: #1b1d1d;
  overflow: hidden;
}

.phone-input-wrap:focus-within {
  border-color: #ffd600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.12);
}

.phone-prefix {
  flex: 0 0 auto;
  padding-left: 20px;
  font-size: inherit;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.phone-input-wrap #phone {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 4px;
}

.service-mode {
  max-width: 720px;
  margin: 34px auto 0;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: 24px;
}

.service-mode-btn {
  min-height: 76px;
  padding: 12px 18px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  transition: .25s ease;
}

.service-mode-btn .mode-icon {
  font-size: 28px;
}

.service-mode-btn b,
.service-mode-btn small {
  display: block;
  text-align: left;
}

.service-mode-btn b {
  font-size: 17px;
}

.service-mode-btn small {
  color: var(--muted);
  margin-top: 3px;
}

.service-mode-btn.active {
  color: #090a0a;
  background: var(--yellow);
}

.service-mode-btn.active small {
  color: rgba(0,0,0,.64);
}

.service-mode-btn.station:hover {
  background: rgba(85,199,42,.13);
  box-shadow: inset 0 0 0 1px rgba(85,199,42,.45);
  transform: translateY(-1px);
}

/* STATION */

.stationary-section {
  max-width: 1180px;
  margin: 20px auto 80px;
  padding: 70px 22px 20px;
  scroll-margin-top: 20px;
}

.stationary-head {
  position: relative;
  overflow: hidden;
  padding: clamp(26px,5vw,54px);
  border: 1px solid var(--border);
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 10%, rgba(85,199,42,.18), transparent 28rem),
    linear-gradient(135deg,#141717,#0d0f0f);
}

.stationary-head:after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border: 46px solid rgba(255,255,255,.025);
  border-radius: 50%;
  right: -80px;
  top: -120px;
}

.stationary-head h2,
.price-heading h2,
.station-location h2 {
  margin: 8px 0 15px;
  letter-spacing: -.045em;
  line-height: .98;
}

.stationary-head h2 {
  font-size: clamp(42px,7vw,78px);
}

.stationary-head p {
  max-width: 760px;
  color: #cdd2d2;
  line-height: 1.65;
  font-size: 18px;
}

.stationary-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.station-action {
  min-width: min(100%,280px);
  padding: 16px 20px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.055);
  display: flex;
  gap: 13px;
  align-items: center;
  transition: .2s ease;
}

.station-action:hover {
  transform: translateY(-2px);
  border-color: rgba(255,212,0,.5);
}

.station-action > span {
  font-size: 27px;
}

.station-action small,
.station-action strong {
  display: block;
}

.station-action small {
  color: var(--muted);
  margin-bottom: 3px;
}

.station-action strong {
  font-size: 17px;
}

.station-action.phone {
  background: var(--yellow);
  color: #090a0a;
  border-color: var(--yellow);
}

.station-action.phone small {
  color: rgba(0,0,0,.6);
}

/* PRICE */

.price-heading {
  margin: 70px 0 24px;
}

.price-heading h2 {
  font-size: clamp(34px,5vw,58px);
}

.price-heading p {
  color: var(--muted);
}

.price-accordion {
  display: grid;
  gap: 12px;
}

.price-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #111313;
  transition: .2s ease;
}

.price-card[open] {
  border-color: rgba(255,212,0,.35);
  background: #151717;
}

.price-card summary {
  list-style: none;
  cursor: pointer;
  min-height: 90px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 15px;
}

.price-card summary::-webkit-details-marker {
  display: none;
}

.price-icon {
  font-size: 28px;
}

.price-name b,
.price-name small {
  display: block;
}

.price-name b {
  font-size: 19px;
}

.price-name small {
  color: var(--muted);
  margin-top: 4px;
}

.price-card summary > strong {
  color: var(--yellow);
  font-size: 18px;
  text-align: right;
}

.price-content {
  padding: 0 22px 24px 85px;
  color: #d4d8d8;
  line-height: 1.55;
}

.price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-chips span {
  padding: 10px 12px;
  background: #1d2020;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.price-chips b {
  color: var(--yellow);
}

.price-note {
  color: var(--muted);
  font-size: 14px;
}

.inline-phone {
  color: var(--yellow);
  font-weight: 900;
}

.station-location {
  margin-top: 50px;
  padding: 30px;
  border: 1px solid rgba(85,199,42,.25);
  border-radius: 28px;
  background: rgba(85,199,42,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.station-location h2 {
  font-size: clamp(28px,4vw,44px);
}

.station-location p {
  color: var(--muted);
  max-width: 650px;
}

.big-station-phone {
  white-space: nowrap;
  text-decoration: none;
  color: #090a0a;
  background: var(--green);
  padding: 16px 22px;
  border-radius: 16px;
  font-weight: 1000;
  font-size: 19px;
}

/* CINEMATIC TRANSITION */

.station-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at center, #222727, #070808 68%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
}

.station-transition.run {
  opacity: 1;
  visibility: visible;
}

.transition-road {
  width: min(620px,80vw);
  height: 6px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--yellow) 0 28px,
      transparent 28px 44px
    );
  position: relative;
  margin-bottom: 42px;
}

.transition-wheel {
  position: absolute;
  left: -10px;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  border: 6px solid #292d2d;
  color: var(--yellow);
  font-size: 27px;
}

.station-transition.run .transition-wheel {
  animation: stationWheelDrive .75s cubic-bezier(.2,.7,.2,1) forwards;
}

.station-transition strong {
  font-size: clamp(28px,6vw,58px);
  letter-spacing: -.05em;
}

.station-transition span {
  color: var(--yellow);
  margin-top: 8px;
  font-weight: 800;
}

@keyframes stationWheelDrive {
  from {
    left: -10px;
    transform: rotate(0);
  }
  to {
    left: calc(100% - 46px);
    transform: rotate(720deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .station-transition.run .transition-wheel {
    animation: none;
  }
}

@media (max-width: 700px) {
  .service-mode {
    margin-top: 22px;
  }

  .service-mode-btn {
    padding: 10px 8px;
  }

  .service-mode-btn .mode-icon {
    font-size: 22px;
  }

  .service-mode-btn b {
    font-size: 14px;
  }

  .service-mode-btn small {
    font-size: 11px;
  }

  .stationary-section {
    padding-top: 40px;
  }

  .stationary-head {
    border-radius: 25px;
  }

  .stationary-actions {
    display: grid;
  }

  .station-action {
    width: 100%;
  }

  .price-card summary {
    grid-template-columns: 38px 1fr;
  }

  .price-card summary > strong {
    grid-column: 2;
    text-align: left;
  }

  .price-content {
    padding: 0 18px 20px;
  }

  .station-location {
    display: block;
  }

  .big-station-phone {
    display: block;
    margin-top: 20px;
    text-align: center;
  }
}

.price-card summary {
  grid-template-columns: 170px 1fr auto;
  padding: 0 22px 0 0;
  min-height: 112px;
}

.price-icon {
  width: 170px;
  height: 112px;
  display: block;
  overflow: hidden;
  border-radius: 21px 0 0 21px;
  background: #090a0a;
}

.price-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease, filter .35s ease;
}

.price-card:hover .price-photo {
  transform: scale(1.055);
  filter: brightness(1.08);
}

.price-card summary > strong {
  padding-right: 10px;
}

.price-content {
  padding-left: 195px;
}

@media (max-width: 700px) {
  .price-card summary {
    grid-template-columns: 105px 1fr;
    min-height: 96px;
    padding-right: 14px;
  }

  .price-icon {
    width: 105px;
    height: 96px;
    border-radius: 18px 0 0 18px;
  }

  .price-card summary > strong {
    grid-column: 2;
    padding-bottom: 12px;
  }

  .price-name b {
    font-size: 16px;
  }

  .price-name small {
    font-size: 12px;
  }

  .price-content {
    padding-left: 18px;
  }
}

/* =========================================================
   SPEED SERVICE — CUSTOM MODE ICONS
   ========================================================= */

.mode-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
}

.mode-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ДО ВАС — GPS / ROUTE */

.mode-icon-route .mode-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-icon-route .mode-dot {
  fill: currentColor;
}

/* ДО НАС — GARAGE */

.mode-icon-garage .mode-roof,
.mode-icon-garage .mode-house,
.mode-icon-garage .mode-door,
.mode-icon-garage .mode-door-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Активна ДО ВАС */

.service-mode-btn.active .mode-icon {
  color: #080909;
}

.service-mode-btn.active .mode-icon-route {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

/* ДО НАС */

.service-mode-btn.station .mode-icon {
  color: #ffd400;
}

.service-mode-btn.station:hover .mode-icon-garage {
  transform: translateY(-2px) scale(1.04);
}

.mode-icon-garage,
.mode-icon-route {
  transition:
    transform .25s ease,
    filter .25s ease;
}

/* маленька анімація GPS */

.service-mode-btn.active .mode-dot {
  animation: speedLocationPulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes speedLocationPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(1.35);
  }
}

@media (max-width: 700px) {
  .mode-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

/* =========================================================
   SPEED SERVICE — ROUTE CHOOSER
   ========================================================= */

.route-button {
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.route-chooser {
  position: fixed;
  inset: 0;
  z-index: 10000;

  padding: 18px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.route-chooser.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.route-chooser-card {
  position: relative;

  width: min(520px, 100%);

  padding: 30px;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,212,0,.12),
      transparent 18rem
    ),
    #111313;

  box-shadow: 0 35px 100px rgba(0,0,0,.7);

  transform: translateY(20px) scale(.97);
  transition: transform .25s ease;
}

.route-chooser.open .route-chooser-card {
  transform: translateY(0) scale(1);
}

.route-chooser-card h2 {
  margin: 8px 0 8px;

  font-size: clamp(34px,6vw,52px);
  letter-spacing: -.05em;
}

.route-address {
  margin: 0 0 24px;

  color: var(--muted);
  line-height: 1.5;
}

.route-chooser-close {
  position: absolute;
  right: 18px;
  top: 18px;

  width: 42px;
  height: 42px;

  border-radius: 50%;
  border: 1px solid var(--border);

  background: #202323;
  color: #fff;

  cursor: pointer;
  font-size: 25px;
}

.route-apps {
  display: grid;
  gap: 12px;
}

.route-app {
  min-height: 84px;

  padding: 14px 18px;

  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;

  border-radius: 19px;
  border: 1px solid var(--border);

  color: #fff;
  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.route-app:hover {
  transform: translateY(-2px);
}

.route-app.google {
  background: #171a1a;
}

.route-app.google:hover {
  border-color: rgba(255,212,0,.5);
}

.route-app.waze {
  background: rgba(85,199,42,.08);
}

.route-app.waze:hover {
  border-color: rgba(85,199,42,.55);
}

.route-logo {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  font-size: 23px;
  font-weight: 1000;
}

.google-logo {
  background:
    linear-gradient(
      135deg,
      #4285f4 0 25%,
      #34a853 25% 50%,
      #fbbc05 50% 75%,
      #ea4335 75%
    );

  color: #fff;
}

.waze-logo {
  background: #55c72a;
  color: #080909;
}

.route-app b,
.route-app small {
  display: block;
}

.route-app b {
  font-size: 18px;
}

.route-app small {
  color: var(--muted);
  margin-top: 4px;
}

.route-app > strong {
  color: var(--yellow);
  font-size: 27px;
}

body.route-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .route-chooser-card {
    padding: 24px 18px 18px;
  }

  .route-app {
    min-height: 78px;
    grid-template-columns: 46px 1fr auto;
  }

  .route-logo {
    width: 44px;
    height: 44px;
  }
}

/* Compact working hours */
.hero-card .stat:nth-child(2),
.hero-card .stat:nth-child(2) * {
    white-space: nowrap;
}

.hero-card .stat:nth-child(2)::before {
    font-size: 26px !important;
    line-height: 1 !important;
}

.tire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 48px);
  padding: 38px !important;
}

/* Сам годинник */

.service-clock {
  position: relative;
  flex: 0 0 auto;

  width: 190px;
  height: 190px;

  border: 4px solid var(--yellow);
  border-radius: 50%;

  background:
    radial-gradient(circle at center,
      #252828 0 5%,
      #111313 6% 66%,
      #080909 67% 100%);

  box-shadow:
    0 0 18px rgba(255, 214, 0, .30),
    inset 0 0 24px rgba(255,255,255,.025);
}

/* Великі позначки 12 / 3 / 6 / 9 */

.clock-mark {
  position: absolute;
  z-index: 2;

  width: 4px;
  height: 15px;

  left: 50%;
  top: 8px;

  margin-left: -2px;

  border-radius: 999px;
  background: var(--yellow);

  transform-origin: 2px 83px;
}

.mark-12 { transform: rotate(0deg); }
.mark-3  { transform: rotate(90deg); }
.mark-6  { transform: rotate(180deg); }
.mark-9  { transform: rotate(270deg); }

/* Стрілки */

.clock-hand {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: 50%;

  border-radius: 999px;

  transform-origin: 50% 100%;
}

/* Годинна */

.clock-hour {
  width: 7px;
  height: 52px;

  margin-left: -3.5px;

  background: #fff;

  animation:
    speedClockHour 43200s linear infinite;
}

/* Хвилинна */

.clock-minute {
  width: 5px;
  height: 70px;

  margin-left: -2.5px;

  background: var(--yellow);

  box-shadow: 0 0 8px rgba(255,214,0,.35);

  animation:
    speedClockMinute 3600s linear infinite;
}

/* Секундна */

.clock-second {
  width: 2px;
  height: 76px;

  margin-left: -1px;

  background: #ffd400;

  opacity: .75;

  animation:
    speedClockSecond 60s linear infinite;
}

/* Центральна вісь */

.clock-pin {
  position: absolute;
  z-index: 6;

  width: 17px;
  height: 17px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border: 3px solid #111;
  border-radius: 50%;

  background: var(--yellow);

  box-shadow: 0 0 9px rgba(255,214,0,.5);
}

/* Текст графіка */

.service-hours {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  min-width: 230px;
}

.service-hours small {
  margin-bottom: 7px;

  color: #c7cccc;

  font-size: 18px;
  font-weight: 700;
}

.service-hours strong {
  color: #fff;

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;

  font-weight: 1000;
  letter-spacing: -.035em;

  white-space: nowrap;
}

/* Рух */

@keyframes speedClockSecond {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes speedClockMinute {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes speedClockHour {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Телефон */

@media (max-width: 700px) {

  .tire {
    gap: 18px;
    padding: 24px 18px 95px !important;
  }

  .service-clock {
    width: 130px;
    height: 130px;
  }

  .clock-mark {
    height: 10px;
    top: 6px;
    transform-origin: 2px 57px;
  }

  .clock-hour {
    height: 35px;
    width: 5px;
    margin-left: -2.5px;
  }

  .clock-minute {
    height: 47px;
    width: 4px;
    margin-left: -2px;
  }

  .clock-second {
    height: 51px;
  }

  .clock-pin {
    width: 13px;
    height: 13px;
  }

  .service-hours {
    min-width: 0;
  }

  .service-hours small {
    font-size: 13px;
  }

  .service-hours strong {
    font-size: clamp(21px, 6vw, 30px);
    white-space: nowrap;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .clock-hour,
  .clock-minute,
  .clock-second {
    animation-play-state: paused;
  }
}

.tire {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 34px !important;
}

.tire:after {
  content: none !important;
}

.clock-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 38px;
  position: relative;
  z-index: 3;
}

.service-clock {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 4px solid var(--yellow);
  background:
    radial-gradient(circle at 50% 50%, #1a1c1c 0 6%, #101212 7% 67%, #070808 68%);
  box-shadow:
    0 0 14px rgba(255,214,0,.5),
    0 0 34px rgba(255,214,0,.18),
    inset 0 0 32px rgba(255,255,255,.03);
}

.service-clock::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.7) 0deg 1deg,
      transparent 1deg 6deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 80%, #000 81% 100%);
  mask: radial-gradient(circle, transparent 0 80%, #000 81% 100%);
  opacity: .72;
}

.clock-num {
  position: absolute;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  z-index: 3;
}

.num-12 { top: 18px; left: 50%; transform: translateX(-50%); }
.num-3  { right: 20px; top: 50%; transform: translateY(-50%); }
.num-6  { bottom: 18px; left: 50%; transform: translateX(-50%); }
.num-9  { left: 20px; top: 50%; transform: translateY(-50%); }

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
  z-index: 5;
}

.clock-hour {
  width: 7px;
  height: 55px;
  margin-left: -3.5px;
  background: #fff;
  box-shadow: 0 0 5px rgba(255,255,255,.15);
}

.clock-minute {
  width: 5px;
  height: 76px;
  margin-left: -2.5px;
  background: #fff;
}

.clock-second {
  width: 2px;
  height: 82px;
  margin-left: -1px;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(255,214,0,.5);
}

.clock-pin {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid #111;
  box-shadow: 0 0 10px rgba(255,214,0,.55);
}

.service-hours {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.service-hours small {
  color: #d5d9d9;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.service-hours strong {
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 1000;
  white-space: nowrap;
}

.service-hours span {
  margin-top: 14px;
  color: #9da4a4;
  font-size: 18px;
}

@media (max-width: 800px) {
  .clock-panel {
    grid-template-columns: 150px 1fr;
    gap: 20px;
  }

  .service-clock {
    width: 145px;
    height: 145px;
  }

  .clock-hour {
    height: 38px;
    width: 5px;
    margin-left: -2.5px;
  }

  .clock-minute {
    height: 50px;
    width: 4px;
    margin-left: -2px;
  }

  .clock-second {
    height: 55px;
  }

  .clock-num {
    font-size: 12px;
  }

  .num-12 { top: 12px; }
  .num-3 { right: 13px; }
  .num-6 { bottom: 12px; }
  .num-9 { left: 13px; }

  .service-hours small {
    font-size: 14px;
  }

  .service-hours strong {
    font-size: clamp(25px, 6vw, 36px);
  }

  .service-hours span {
    font-size: 13px;
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .tire {
    padding: 24px 16px 100px !important;
  }

  .clock-panel {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
  }

  .service-clock {
    width: 110px;
    height: 110px;
    border-width: 3px;
  }

  .clock-num {
    display: none;
  }

  .clock-hour {
    height: 29px;
  }

  .clock-minute {
    height: 38px;
  }

  .clock-second {
    height: 42px;
  }

  .service-hours strong {
    font-size: 22px;
  }
}

/* === REAL CLOCK FIX === */
.service-clock .clock-hour,
.service-clock .clock-minute,
.service-clock .clock-second {
    animation: none !important;
    transition: none !important;
}

/* ==================================================
   SPEED SERVICE CLOCK — FINAL VISUAL
   ================================================== */

.visual {
    border-radius: 28px !important;
    overflow: hidden;
}

.tire {
    padding: 28px 28px 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.clock-panel {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 210px minmax(280px, 1fr) !important;
    align-items: center !important;
    gap: 42px !important;
}

/* ===== ГОДИННИК ===== */

.service-clock {
    width: 200px !important;
    height: 200px !important;

    border: 4px solid #ffd600 !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 50%,
            #151717 0%,
            #0b0d0d 68%,
            #050606 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255, 235, 110, .95),
        0 0 18px rgba(255, 214, 0, .68),
        0 0 42px rgba(255, 214, 0, .24),
        inset 0 0 20px rgba(255,255,255,.025) !important;
}

/* хвилинні поділки */

.service-clock::before {
    content: "" !important;

    position: absolute !important;
    inset: 9px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,255,255,.76) 0deg 1deg,
            transparent 1deg 6deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    opacity: .72 !important;
}

/* цифри */

.clock-num {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #f5f5f5 !important;
}

.num-12 {
    top: 16px !important;
}

.num-3 {
    right: 17px !important;
}

.num-6 {
    bottom: 16px !important;
}

.num-9 {
    left: 17px !important;
}

/* годинна */

.clock-hour {
    width: 6px !important;
    height: 52px !important;

    margin-left: -3px !important;

    background: #f7f7f7 !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.35) !important;
}

/* хвилинна */

.clock-minute {
    width: 5px !important;
    height: 72px !important;

    margin-left: -2.5px !important;

    background: #f7f7f7 !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.25) !important;
}

/* секундна */

.clock-second {
    width: 2px !important;
    height: 78px !important;

    margin-left: -1px !important;

    background: #ffd600 !important;

    box-shadow:
        0 0 7px rgba(255,214,0,.55) !important;
}

/* центр */

.clock-pin {
    width: 16px !important;
    height: 16px !important;

    background: #ffd600 !important;

    border: 3px solid #101111 !important;

    box-shadow:
        0 0 9px rgba(255,214,0,.65) !important;
}

/* ===== ПРАВА ЧАСТИНА ===== */

.service-hours {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    padding-left: 8px !important;
}

.service-hours small {
    color: #dadede !important;

    font-size: 20px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    margin-bottom: 10px !important;
}

/* календарик перед написом */

.service-hours small::before {
    content: "▣";
    color: #ffd600;

    margin-right: 10px;

    font-size: 20px;
}

/* великий час */

.service-hours strong {
    color: #fff !important;

    font-size: clamp(38px, 4.2vw, 58px) !important;
    font-weight: 1000 !important;

    line-height: 1 !important;
    letter-spacing: -.045em !important;

    white-space: nowrap !important;
}

/* жовта лінія */

.service-hours strong::after {
    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 2px !important;

    margin-top: 20px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,214,0,.2) 20%,
            #ffd600 50%,
            rgba(255,214,0,.2) 80%,
            transparent
        ) !important;

    box-shadow:
        0 0 7px rgba(255,214,0,.65) !important;
}

/* без вихідних */

.service-hours span {
    margin-top: 13px !important;

    color: #939999 !important;

    font-size: 17px !important;
}

/* ===== НИЖНЯ ПАНЕЛЬ ===== */

.badge {
    left: 26px !important;
    right: 26px !important;
    bottom: 22px !important;

    min-height: 92px !important;

    padding: 16px 12px !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            180deg,
            rgba(13,15,15,.96),
            rgba(7,8,8,.98)
        ) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.28) !important;
}

.badge > span {
    flex: 1 !important;

    text-align: center !important;

    font-size: 15px !important;
    line-height: 1.35 !important;

    color: #b8bebe !important;
}

.badge > span + span {
    border-left: 1px solid rgba(255,255,255,.12) !important;
}

.badge b {
    display: block !important;

    margin-bottom: 3px !important;

    color: #fff !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}

/* ===== МОБІЛЬНИЙ ===== */

@media (max-width: 700px) {

    .tire {
        padding: 22px 18px 115px !important;
    }

    .clock-panel {
        grid-template-columns: 125px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .service-clock {
        width: 122px !important;
        height: 122px !important;

        border-width: 3px !important;
    }

    .clock-num {
        font-size: 10px !important;
    }

    .num-12 {
        top: 9px !important;
    }

    .num-3 {
        right: 10px !important;
    }

    .num-6 {
        bottom: 9px !important;
    }

    .num-9 {
        left: 10px !important;
    }

    .clock-hour {
        height: 31px !important;
        width: 4px !important;
        margin-left: -2px !important;
    }

    .clock-minute {
        height: 43px !important;
        width: 3px !important;
        margin-left: -1.5px !important;
    }

    .clock-second {
        height: 46px !important;
    }

    .clock-pin {
        width: 12px !important;
        height: 12px !important;
    }

    .service-hours {
        padding-left: 0 !important;
    }

    .service-hours small {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .service-hours small::before {
        font-size: 13px;
        margin-right: 5px;
    }

    .service-hours strong {
        font-size: clamp(23px, 6vw, 32px) !important;
    }

    .service-hours strong::after {
        margin-top: 12px !important;
    }

    .service-hours span {
        font-size: 12px !important;
        margin-top: 8px !important;
    }

    .badge {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }

    .badge b {
        font-size: 14px !important;
    }

    .badge > span {
        font-size: 12px !important;
    }
}

/* ==================================================
   CLOCK CARD LAYOUT FIX
   ================================================== */

.visual {
    overflow: hidden !important;
}

/* головна область */
.tire {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        34px
        34px
        125px !important;
}

/* годинник + графік */
.clock-panel {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns:
        minmax(150px, 185px)
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 30px !important;

    box-sizing: border-box !important;
}

/* =========================
   CLOCK
   ========================= */

.service-clock {
    width: 180px !important;
    height: 180px !important;

    box-sizing: border-box !important;

    justify-self: center !important;

    border: 4px solid #ffd600 !important;

    box-shadow:
        0 0 6px rgba(255,245,180,.95),
        0 0 18px rgba(255,214,0,.58),
        0 0 34px rgba(255,214,0,.20) !important;
}

/* цифри */

.clock-num {
    font-size: 14px !important;
}

.num-12 {
    top: 14px !important;
}

.num-3 {
    right: 15px !important;
}

.num-6 {
    bottom: 14px !important;
}

.num-9 {
    left: 15px !important;
}

/* стрілки */

.clock-hour {
    height: 47px !important;
    width: 6px !important;
    margin-left: -3px !important;
}

.clock-minute {
    height: 64px !important;
    width: 5px !important;
    margin-left: -2.5px !important;
}

.clock-second {
    height: 70px !important;
}

/* =========================
   HOURS TEXT
   ========================= */

.service-hours {
    width: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}

.service-hours small {
    display: block !important;

    margin: 0 0 9px !important;

    color: #d7dada !important;

    font-size: 18px !important;
    line-height: 1.1 !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}

/* прибираємо квадрат */
.service-hours small::before {
    content: none !important;
}

.service-hours strong {
    display: block !important;

    width: 100% !important;

    color: #fff !important;

    font-size: clamp(31px, 3.1vw, 43px) !important;
    line-height: 1 !important;

    font-weight: 1000 !important;

    letter-spacing: -.04em !important;

    white-space: nowrap !important;
}

/* жовта риска */

.service-hours strong::after {
    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 2px !important;

    margin: 18px 0 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,214,0,.08),
            #ffd600 50%,
            rgba(255,214,0,.08)
        ) !important;

    box-shadow:
        0 0 8px rgba(255,214,0,.55) !important;
}

.service-hours span {
    display: block !important;

    margin-top: 12px !important;

    color: #949999 !important;

    font-size: 16px !important;
}

/* =========================
   BOTTOM INFO
   ========================= */

.badge {
    left: 24px !important;
    right: 24px !important;
    bottom: 22px !important;

    min-height: 92px !important;

    padding: 18px 8px !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, 1fr) !important;

    align-items: center !important;

    gap: 0 !important;
}

.badge > span {
    width: 100% !important;

    padding: 0 13px !important;

    text-align: center !important;

    box-sizing: border-box !important;

    color: #b7bcbc !important;

    font-size: 14px !important;
}

.badge > span + span {
    border-left:
        1px solid
        rgba(255,255,255,.12) !important;
}

.badge b {
    display: block !important;

    margin-bottom: 5px !important;

    color: white !important;

    font-size: 16px !important;
}

/* =========================
   SMALL DESKTOP / TABLET
   ========================= */

@media (max-width: 1000px) {

    .tire {
        padding:
            26px
            22px
            118px !important;
    }

    .clock-panel {
        grid-template-columns:
            155px
            minmax(0,1fr) !important;

        gap: 20px !important;
    }

    .service-clock {
        width: 150px !important;
        height: 150px !important;
    }

    .clock-hour {
        height: 39px !important;
    }

    .clock-minute {
        height: 53px !important;
    }

    .clock-second {
        height: 58px !important;
    }

    .service-hours small {
        font-size: 15px !important;
    }

    .service-hours strong {
        font-size: clamp(
            25px,
            3.2vw,
            34px
        ) !important;
    }
}

@media (max-width: 600px) {

    .tire {
        padding:
            20px
            14px
            108px !important;
    }

    .clock-panel {
        grid-template-columns:
            105px
            minmax(0,1fr) !important;

        gap: 14px !important;
    }

    .service-clock {
        width: 102px !important;
        height: 102px !important;
    }

    .clock-num {
        display: none !important;
    }

    .clock-hour {
        height: 27px !important;
    }

    .clock-minute {
        height: 37px !important;
    }

    .clock-second {
        height: 40px !important;
    }

    .service-hours small {
        font-size: 12px !important;
    }

    .service-hours strong {
        font-size: clamp(
            20px,
            5.7vw,
            27px
        ) !important;
    }

    .service-hours strong::after {
        margin-top: 10px !important;
    }

    .service-hours span {
        margin-top: 7px !important;
        font-size: 11px !important;
    }

    .badge {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;

        min-height: 82px !important;

        padding: 13px 3px !important;
    }

    .badge > span {
        padding: 0 5px !important;
        font-size: 11px !important;
    }

    .badge b {
        font-size: 13px !important;
    }
}

.speed-clock-card {
    position: relative !important;

    width: 100% !important;
    min-height: 520px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 34px !important;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(255,214,0,.24),
            transparent 35%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.018) 0 2px,
            transparent 2px 13px
        ),
        #101212 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 24px 60px rgba(0,0,0,.30) !important;
}

/* ---------- TOP ---------- */

.speed-clock-top {
    box-sizing: border-box !important;

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        205px
        minmax(0,1fr) !important;

    align-items: center !important;

    gap: 42px !important;

    padding:
        44px
        44px
        150px !important;
}

/* ---------- CLOCK ---------- */

.speed-clock-card .service-clock {
    position: relative !important;

    width: 190px !important;
    height: 190px !important;

    justify-self: center !important;

    border:
        4px solid
        #ffd400 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            #171919 0%,
            #090b0b 72%,
            #050606 100%
        ) !important;

    box-shadow:
        0 0 5px rgba(255,245,160,.95),
        0 0 17px rgba(255,214,0,.70),
        0 0 38px rgba(255,214,0,.25),
        inset 0 0 20px rgba(255,255,255,.025) !important;
}

/* minute marks */

.speed-clock-card .service-clock::before {
    content: "" !important;

    position: absolute !important;
    inset: 8px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            rgba(255,255,255,.72) 0deg 1deg,
            transparent 1deg 6deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 84%,
            #000 85%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 84%,
            #000 85%
        ) !important;

    opacity: .72 !important;
}

.speed-clock-card .clock-num {
    position: absolute !important;

    z-index: 4 !important;

    color: #f5f5f5 !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    line-height: 1 !important;
}

.speed-clock-card .num-12 {
    top: 13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.speed-clock-card .num-3 {
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.speed-clock-card .num-6 {
    bottom: 13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.speed-clock-card .num-9 {
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ---------- HANDS ---------- */

.speed-clock-card .clock-hand {
    position: absolute !important;

    left: 50% !important;
    bottom: 50% !important;

    z-index: 6 !important;

    transform-origin:
        50%
        100% !important;

    border-radius: 999px !important;

    animation: none !important;
}

.speed-clock-card .clock-hour {
    width: 6px !important;
    height: 48px !important;

    margin-left: -3px !important;

    background: #f7f7f7 !important;

    box-shadow:
        0 0 4px
        rgba(255,255,255,.35) !important;
}

.speed-clock-card .clock-minute {
    width: 5px !important;
    height: 67px !important;

    margin-left: -2.5px !important;

    background: #f7f7f7 !important;
}

.speed-clock-card .clock-second {
    width: 2px !important;
    height: 73px !important;

    margin-left: -1px !important;

    background: #ffd400 !important;

    box-shadow:
        0 0 7px
        rgba(255,214,0,.65) !important;
}

.speed-clock-card .clock-pin {
    position: absolute !important;

    z-index: 8 !important;

    width: 16px !important;
    height: 16px !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%,-50%) !important;

    border:
        3px solid
        #111 !important;

    border-radius: 50% !important;

    background:
        #ffd400 !important;

    box-shadow:
        0 0 8px
        rgba(255,214,0,.70) !important;
}

/* ---------- RIGHT HOURS ---------- */

.speed-hours {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
}

.speed-hours-title {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    margin-bottom: 11px !important;

    color: #ddd !important;

    font-size: 19px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}

.speed-hours-title svg {
    width: 25px !important;
    height: 25px !important;

    flex: 0 0 25px !important;

    fill: none !important;

    stroke: #ffd400 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.speed-hours strong {
    display: block !important;

    color: #fff !important;

    font-size:
        clamp(
            35px,
            4vw,
            51px
        ) !important;

    line-height: 1 !important;

    font-weight: 1000 !important;

    letter-spacing:
        -.045em !important;

    white-space: nowrap !important;
}

.speed-hours-line {
    width: 100% !important;
    height: 2px !important;

    margin:
        18px
        0
        13px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,214,0,.18),
            #ffd400 50%,
            rgba(255,214,0,.18),
            transparent
        ) !important;

    box-shadow:
        0 0 8px
        rgba(255,214,0,.55) !important;
}

.speed-hours small {
    color: #8e9494 !important;

    font-size: 16px !important;

    line-height: 1 !important;
}

/* ---------- BOTTOM ---------- */

.speed-clock-info {
    position: absolute !important;

    left: 28px !important;
    right: 28px !important;
    bottom: 25px !important;

    min-height: 113px !important;

    display: grid !important;

    grid-template-columns:
        repeat(3,1fr) !important;

    align-items: center !important;

    border:
        1px solid
        rgba(255,255,255,.14) !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            180deg,
            rgba(15,17,17,.97),
            rgba(6,7,7,.98)
        ) !important;

    box-shadow:
        0 9px 25px
        rgba(0,0,0,.28) !important;
}

.speed-info-item {
    height: 72px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

.speed-info-item + .speed-info-item {
    border-left:
        1px solid
        rgba(255,255,255,.12) !important;
}

.speed-info-item svg {
    width: 27px !important;
    height: 27px !important;

    margin-bottom: 4px !important;

    fill: none !important;

    stroke: #ffd400 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.speed-info-item b {
    color: #fff !important;

    font-size: 16px !important;

    line-height: 1.05 !important;

    font-weight: 900 !important;
}

.speed-info-item span {
    margin-top: 4px !important;

    color: #9ba0a0 !important;

    font-size: 13px !important;

    line-height: 1 !important;
}

@media (max-width: 700px) {

    .speed-clock-card {
        min-height: 350px !important;

        border-radius: 25px !important;
    }

    .speed-clock-top {
        grid-template-columns:
            145px
            minmax(0,1fr) !important;

        gap: 20px !important;

        padding:
            24px
            22px
            110px !important;
    }

    .speed-clock-card .service-clock {
        width: 140px !important;
        height: 140px !important;
    }

    .speed-clock-card .clock-hour {
        height: 36px !important;
    }

    .speed-clock-card .clock-minute {
        height: 49px !important;
    }

    .speed-clock-card .clock-second {
        height: 53px !important;
    }

    .speed-hours-title {
        gap: 7px !important;

        font-size: 14px !important;
    }

    .speed-hours-title svg {
        width: 20px !important;
        height: 20px !important;

        flex-basis: 20px !important;
    }

    .speed-hours strong {
        font-size:
            clamp(
                24px,
                5.5vw,
                34px
            ) !important;
    }

    .speed-hours-line {
        margin:
            12px
            0
            9px !important;
    }

    .speed-hours small {
        font-size: 12px !important;
    }

    .speed-clock-info {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;

        min-height: 84px !important;
    }

    .speed-info-item {
        height: 62px !important;
    }

    .speed-info-item svg {
        width: 22px !important;
        height: 22px !important;
    }

    .speed-info-item b {
        font-size: 13px !important;
    }

    .speed-info-item span {
        font-size: 11px !important;
    }
}

/* =========================================================
   SPEED SERVICE CLOCK — DETAIL + FIT FIX
   ========================================================= */

/* Верх: трохи більше місця тексту справа */
.speed-clock-top {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 30px !important;
    padding: 40px 34px 150px !important;
}

/* Сам годинник */
.speed-clock-card .service-clock {
    width: 190px !important;
    height: 190px !important;

    border: 3px solid #ffd600 !important;

    background:
        radial-gradient(
            circle at 50% 50%,
            #202222 0 4%,
            #111313 5% 63%,
            #080909 64% 77%,
            #151717 78% 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,210,.9),
        0 0 13px rgba(255,214,0,.85),
        0 0 30px rgba(255,214,0,.35),
        inset 0 0 22px rgba(255,255,255,.035) !important;
}

/* 60 дрібних хвилинних рисок */
.speed-clock-card .service-clock::before {
    content: "" !important;

    position: absolute !important;
    inset: 7px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(235,238,238,.92) 0deg .8deg,
            transparent .8deg 6deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 83%,
            #000 84% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 83%,
            #000 84% 100%
        ) !important;

    opacity: .95 !important;
}

/* 12 великих часових поділок */
.speed-clock-card .service-clock::after {
    content: "" !important;

    position: absolute !important;
    inset: 5px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            #ffd600 0deg 1.8deg,
            transparent 1.8deg 30deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 78%,
            #000 79% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 78%,
            #000 79% 100%
        ) !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

/* цифри 12 / 3 / 6 / 9 */
.speed-clock-card .clock-num {
    z-index: 4 !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    color: #f8f8f8 !important;

    text-shadow:
        0 1px 4px rgba(0,0,0,.9) !important;
}

.speed-clock-card .num-12 {
    top: 17px !important;
}

.speed-clock-card .num-3 {
    right: 18px !important;
}

.speed-clock-card .num-6 {
    bottom: 17px !important;
}

.speed-clock-card .num-9 {
    left: 18px !important;
}

/* Годинна — коротка товста */
.speed-clock-card .clock-hour {
    width: 6px !important;
    height: 48px !important;

    margin-left: -3px !important;

    background:
        linear-gradient(
            90deg,
            #d9dddd,
            #ffffff 50%,
            #c9cccc
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.35) !important;
}

/* Хвилинна — довша */
.speed-clock-card .clock-minute {
    width: 5px !important;
    height: 68px !important;

    margin-left: -2.5px !important;

    background:
        linear-gradient(
            90deg,
            #d9dddd,
            #ffffff 50%,
            #c9cccc
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.25) !important;
}

/* Секундна — тонка жовта */
.speed-clock-card .clock-second {
    width: 2px !important;
    height: 75px !important;

    margin-left: -1px !important;

    background: #ffd600 !important;

    box-shadow:
        0 0 6px rgba(255,214,0,.65) !important;
}

/* Вісь */
.speed-clock-card .clock-pin {
    width: 17px !important;
    height: 17px !important;

    border: 3px solid #151616 !important;

    background:
        radial-gradient(
            circle at 40% 35%,
            #fff39a,
            #ffd600 45%,
            #d3a900 100%
        ) !important;

    box-shadow:
        0 0 9px rgba(255,214,0,.65) !important;
}

/* Права частина — щоб більше НІКОЛИ не обрізалась */
.speed-hours {
    min-width: 0 !important;
    width: 100% !important;

    overflow: visible !important;
}

.speed-hours-title {
    font-size: 17px !important;
}

.speed-hours strong {
    width: 100% !important;

    font-size: clamp(31px, 3vw, 43px) !important;

    letter-spacing: -.045em !important;

    white-space: nowrap !important;
}

/* якщо ширина картки менша */
@media (max-width: 1100px) {

    .speed-clock-top {
        grid-template-columns: 175px minmax(0,1fr) !important;
        gap: 24px !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
    }

    .speed-clock-card .service-clock {
        width: 165px !important;
        height: 165px !important;
    }

    .speed-clock-card .clock-hour {
        height: 42px !important;
    }

    .speed-clock-card .clock-minute {
        height: 58px !important;
    }

    .speed-clock-card .clock-second {
        height: 64px !important;
    }

    .speed-hours strong {
        font-size: 34px !important;
    }
}

/* =========================================================
   CLOCK FINAL FIT
   ========================================================= */

/* Дамо більше ширини правій частині */
.speed-clock-top {
    grid-template-columns: 185px minmax(300px, 1fr) !important;
    gap: 34px !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
}

/* Час справа трохи менший, але повністю видимий */
.speed-hours strong {
    font-size: 39px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Сам годинник */
.speed-clock-card .service-clock {
    width: 178px !important;
    height: 178px !important;

    border: 3px solid #ffd600 !important;

    background:
        radial-gradient(
            circle at center,
            #191b1b 0 7%,
            #0e1010 8% 68%,
            #070808 69% 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,190,.9),
        0 0 13px rgba(255,214,0,.85),
        0 0 30px rgba(255,214,0,.30),
        inset 0 0 22px rgba(255,255,255,.035) !important;
}

/* 60 хвилинних поділок — робимо реально помітними */
.speed-clock-card .service-clock::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(235,238,238,.95) 0deg 1deg,
            transparent 1deg 6deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 79%,
            #000 80% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 79%,
            #000 80% 100%
        ) !important;

    opacity: .95 !important;
    z-index: 2 !important;
}

/* 12 більших жовтих рисок */
.speed-clock-card .service-clock::after {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            #ffd600 0deg 2deg,
            transparent 2deg 30deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 75%,
            #000 76% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 75%,
            #000 76% 100%
        ) !important;

    opacity: 1 !important;
    z-index: 3 !important;
}

/* Цифри поверх поділок */
.speed-clock-card .clock-num {
    z-index: 5 !important;
    font-size: 13px !important;
}

/* Стрілки поверх усього */
.speed-clock-card .clock-hand {
    z-index: 7 !important;
}

.speed-clock-card .clock-pin {
    z-index: 9 !important;
}

/* Трохи тонші стрілки — ближче до референсу */
.speed-clock-card .clock-hour {
    width: 5px !important;
    height: 45px !important;
    margin-left: -2.5px !important;
}

.speed-clock-card .clock-minute {
    width: 4px !important;
    height: 63px !important;
    margin-left: -2px !important;
}

.speed-clock-card .clock-second {
    width: 2px !important;
    height: 70px !important;
}

/* Адаптація */
@media (max-width: 1100px) {
    .speed-clock-top {
        grid-template-columns: 165px minmax(250px, 1fr) !important;
        gap: 24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .speed-clock-card .service-clock {
        width: 158px !important;
        height: 158px !important;
    }

    .speed-hours strong {
        font-size: 34px !important;
    }
}

/* =====================================================
   REAL CLOCK TICKS
   ===================================================== */

/* старі gradient ticks прибираємо */
.speed-clock-card .service-clock::before,
.speed-clock-card .service-clock::after {
    content: none !important;
}

/* контейнер поділок */
.clock-ticks {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}

/* кожна хвилинна риска */
.clock-tick {
    position: absolute;

    left: calc(50% - 1px);
    top: 7px;

    width: 2px;
    height: 6px;

    border-radius: 10px;

    background: rgba(235,238,238,.72);

    transform-origin:
        1px
        calc(89px - 7px);
}

/* кожна п'ята — велика жовта */
.clock-tick-major {
    top: 6px;

    width: 3px;
    height: 11px;

    left: calc(50% - 1.5px);

    background: #ffd600;

    box-shadow:
        0 0 4px rgba(255,214,0,.45);

    transform-origin:
        1.5px
        calc(89px - 6px);
}

/* трохи витонченіші цифри */
.speed-clock-card .clock-num {
    z-index: 4 !important;

    font-size: 13px !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.95) !important;
}

/* стрілки */
.speed-clock-card .clock-hour {
    width: 5px !important;
    border-radius: 5px !important;
}

.speed-clock-card .clock-minute {
    width: 4px !important;
    border-radius: 5px !important;
}

.speed-clock-card .clock-second {
    width: 1.5px !important;

    box-shadow:
        0 0 4px rgba(255,214,0,.6) !important;
}

@media (max-width: 1100px) {

    .clock-tick {
        top: 6px;

        height: 5px;

        transform-origin:
            1px
            calc(79px - 6px);
    }

    .clock-tick-major {
        top: 5px;

        height: 9px;

        transform-origin:
            1.5px
            calc(79px - 5px);
    }
}

/* =========================================
   CLOCK FINAL SIZE + MOTION FIX
   ========================================= */

/* трохи більше місця для графіка справа */
.speed-clock-top {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 26px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* щоб 07:00–21:30 гарантовано влазило */
.speed-hours strong {
    font-size: 36px !important;
    letter-spacing: -1.5px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* секундна повинна бути поверх інших */
.speed-clock-card .clock-second {
    z-index: 8 !important;
    width: 2px !important;
    background: #ffd600 !important;
    animation: none !important;
    transition: none !important;
}

/* інші стрілки теж повністю контролює JS */
.speed-clock-card .clock-hour,
.speed-clock-card .clock-minute {
    animation: none !important;
    transition: none !important;
}

/* =========================================
   CLOCK TICKS — EDGE ALIGN FIX
   ========================================= */

/* контейнер рисок */
.speed-clock-card .clock-ticks {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

/* дрібні секундні/хвилинні риски */
.speed-clock-card .clock-tick {
    position: absolute !important;

    left: 50% !important;
    top: 3px !important;

    width: 2px !important;
    height: 7px !important;

    margin-left: -1px !important;

    border-radius: 999px !important;

    background: rgba(245,245,245,.92) !important;

    transform-origin:
        1px
        86px !important;

    box-shadow:
        0 0 2px rgba(255,255,255,.18) !important;
}

/* кожна п'ята — жовта, довша */
.speed-clock-card .clock-tick-major {
    top: 2px !important;

    width: 3px !important;
    height: 11px !important;

    margin-left: -1.5px !important;

    background: #ffd600 !important;

    transform-origin:
        1.5px
        87px !important;

    box-shadow:
        0 0 5px rgba(255,214,0,.55) !important;
}

/* =========================================
   CALL BUTTON 5 SECOND ANIMATION
   ========================================= */

#openCall.call-animating {
    pointer-events: none;
    animation: callPulse5s 1s ease-in-out infinite !important;
}

#openCall.call-animating::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    border: 3px solid rgba(255, 214, 0, .8);

    animation: callWave 1s ease-out infinite;

    pointer-events: none;
}

#openCall .call-countdown {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 50;

    transform: translate(-50%, -50%);

    color: #ffd600;

    font-size: 48px;
    font-weight: 1000;

    line-height: 1;

    text-shadow:
        0 0 10px rgba(255,214,0,.8),
        0 0 30px rgba(255,214,0,.45);
}

#openCall.call-animating .wheel-center-copy {
    opacity: .18;
}

@keyframes callPulse5s {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.055);
        filter: brightness(1.3);
    }
}

@keyframes callWave {
    0% {
        opacity: .9;
        transform: scale(.96);
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

/* =========================================
   CALL ANIMATION — FAST / NO COUNTDOWN
   ========================================= */

#openCall .call-countdown {
    display: none !important;
}

#openCall.call-animating .wheel-center-copy {
    opacity: 1 !important;
}

#openCall.call-animating {
    animation: callQuickPulse .5s ease-in-out 2 !important;
}

#openCall.call-animating::after {
    animation: callQuickWave .5s ease-out 2 !important;
}

@keyframes callQuickPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.045);
        filter: brightness(1.25);
    }
}

@keyframes callQuickWave {
    0% {
        opacity: .85;
        transform: scale(.98);
    }

    100% {
        opacity: 0;
        transform: scale(1.13);
    }
}

/* =========================================
   CALL BUTTON — INSTANT FEEDBACK
   ========================================= */

#openCall.call-animating {
    animation: callInstantPulse .45s ease-out 1 !important;
}

#openCall.call-animating::after {
    animation: callInstantWave .45s ease-out 1 !important;
}

@keyframes callInstantPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    45% {
        transform: scale(1.035);
        filter: brightness(1.25);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes callInstantWave {
    0% {
        opacity: .8;
        transform: scale(.98);
    }

    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

/* =========================================
   REQUEST SUCCESS ANIMATION
   ========================================= */

.request-success-animation {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(5, 6, 6, .92);

  backdrop-filter: blur(8px);

  transition: opacity .25s ease;
}

.request-success-animation.hide {
  opacity: 0;
}

.request-success-road {
  position: relative;

  width: min(520px, 82vw);
  height: 72px;

  overflow: hidden;

  border-bottom: 4px solid #ffd600;
}

.request-success-van {
  position: absolute;

  left: -90px;
  bottom: 6px;

  font-size: 56px;

  animation:
    requestVanDrive
    1.05s
    cubic-bezier(.18,.72,.22,1)
    forwards;
}

.request-success-text {
  margin-top: 24px;

  color: #fff;

  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
}

@keyframes requestVanDrive {
  from {
    left: -90px;
  }

  to {
    left: calc(100% - 70px);
  }
}

.speed-van-dispatch {
    position: fixed;
    inset: 0;
    z-index: 999999;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 62%,
            rgba(255,214,0,.09),
            transparent 32%
        ),
        rgba(4,5,5,.96);

    backdrop-filter: blur(8px);

    opacity: 1;

    transition: opacity .28s ease;

    perspective: 1100px;
}

.speed-van-stage {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

/* Дорога / світло під машиною */

.speed-van-road {
    position: absolute;

    left: 50%;
    bottom: 4%;

    width: min(920px, 92vw);
    height: 220px;

    transform:
        translateX(-50%)
        perspective(700px)
        rotateX(67deg);

    transform-origin: center bottom;

    background:
        radial-gradient(
            ellipse,
            rgba(255,214,0,.20),
            rgba(255,214,0,.04) 37%,
            transparent 70%
        );

    filter: blur(7px);

    opacity: 0;

    transition: opacity .6s ease;
}

.speed-van-dispatch.run .speed-van-road {
    opacity: 1;
}

/* ==================================================
   VAN
   ================================================== */

.speed-van-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(720px, 85vw);

    transform:
        translate(-50%, -46%)
        scale(.12);

    transform-origin: 50% 72%;

    opacity: .3;

    filter:
        blur(3px)
        brightness(.65);

    will-change:
        transform,
        opacity,
        filter;
}

.speed-van-dispatch.run .speed-van-wrap {
    animation:
        speedVanDriveToUser
        1.55s
        cubic-bezier(.12,.72,.18,1)
        forwards;
}

@keyframes speedVanDriveToUser {

    0% {
        transform:
            translate(-50%, -43%)
            scale(.12);

        opacity: .25;

        filter:
            blur(3px)
            brightness(.62);
    }

    28% {
        opacity: .82;
    }

    58% {
        transform:
            translate(-50%, -45%)
            scale(.52);

        opacity: 1;

        filter:
            blur(.5px)
            brightness(.88);
    }

    84% {
        transform:
            translate(-50%, -47%)
            scale(.94);

        filter:
            blur(0)
            brightness(1);
    }

    94% {
        transform:
            translate(-50%, -47%)
            scale(1.025);
    }

    100% {
        transform:
            translate(-50%, -47%)
            scale(1);

        opacity: 1;

        filter:
            blur(0)
            brightness(1);
    }
}

.speed-van-img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

/* ==================================================
   HEADLIGHT FLASH
   ================================================== */

.speed-headlight {
    position: absolute;

    z-index: 10;

    top: 60%;

    width: 14%;
    aspect-ratio: 1 / .6;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,1) 0%,
            rgba(255,252,220,.98) 18%,
            rgba(255,222,100,.78) 38%,
            rgba(255,190,40,.26) 60%,
            transparent 76%
        );

    filter: blur(5px);

    mix-blend-mode: screen;

    pointer-events: none;
}

.speed-headlight-left {
    left: 17%;
}

.speed-headlight-right {
    right: 17%;
}

/*
   Блим 1
   пауза
   Блим 2
*/

.speed-van-dispatch.run .speed-headlight {
    animation:
        speedVanHeadlights
        .90s
        1.55s
        ease-in-out
        forwards;
}

@keyframes speedVanHeadlights {

    0% {
        opacity: 0;
        transform: scale(.75);
    }

    12% {
        opacity: 1;
        transform: scale(1.55);
    }

    27% {
        opacity: .04;
        transform: scale(.9);
    }

    45% {
        opacity: .04;
        transform: scale(.9);
    }

    58% {
        opacity: 1;
        transform: scale(1.65);
    }

    76% {
        opacity: .04;
        transform: scale(.9);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ==================================================
   MESSAGE
   ================================================== */

.speed-van-message {
    position: absolute;

    left: 50%;
    bottom: clamp(24px, 6vh, 70px);

    z-index: 20;

    width: min(620px, 90vw);

    transform:
        translateX(-50%)
        translateY(18px);

    text-align: center;

    opacity: 0;
}

.speed-van-dispatch.run .speed-van-message {
    animation:
        speedVanMessageIn
        .42s
        1.72s
        ease-out
        forwards;
}

.speed-van-message strong {
    display: block;

    color: #fff;

    font-size:
        clamp(23px, 4.5vw, 40px);

    font-weight: 1000;

    line-height: 1.05;
}

.speed-van-message span {
    display: block;

    margin-top: 8px;

    color: #ffd600;

    font-size:
        clamp(14px, 2.8vw, 19px);

    font-weight: 850;
}

@keyframes speedVanMessageIn {
    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* Зникнення */

.speed-van-dispatch.finish {
    opacity: 0;
}

@media (max-width: 600px) {

    .speed-van-wrap {
        width: 105vw;
        top: 48%;
    }

    .speed-van-message {
        bottom: 34px;
    }

    .speed-van-message strong {
        font-size: 24px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .speed-van-dispatch.run .speed-van-wrap {
        animation-duration: .25s;
    }

    .speed-van-dispatch.run .speed-headlight {
        animation: none;
    }
}

/* backdrop blur прибираємо:
   на мобільних GPU він може давати ривок */
.speed-van-dispatch {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* працюємо переважно через transform + opacity */
.speed-van-wrap {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
}

/* Не розмиваємо великий PNG під час масштабування */
.speed-van-dispatch.run .speed-van-wrap {
    animation:
        speedVanDriveSmooth
        1.7s
        cubic-bezier(.14,.72,.18,1)
        forwards !important;
}

@keyframes speedVanDriveSmooth {

    0% {
        transform:
            translate3d(-50%, -43%, 0)
            scale(.14);

        opacity: .28;
    }

    25% {
        opacity: .75;
    }

    55% {
        transform:
            translate3d(-50%, -45%, 0)
            scale(.52);

        opacity: 1;
    }

    82% {
        transform:
            translate3d(-50%, -47%, 0)
            scale(.91);
    }

    94% {
        transform:
            translate3d(-50%, -47%, 0)
            scale(1.018);
    }

    100% {
        transform:
            translate3d(-50%, -47%, 0)
            scale(1);

        opacity: 1;
    }
}

/* Фари починають після повної зупинки */
.speed-van-dispatch.run .speed-headlight {
    animation:
        speedVanHeadlightsSmooth
        .9s
        1.72s
        ease-in-out
        forwards !important;
}

@keyframes speedVanHeadlightsSmooth {

    0%, 100% {
        opacity: 0;
        transform: scale(.9);
    }

    /* перший блим */
    12% {
        opacity: 1;
        transform: scale(1.45);
    }

    27% {
        opacity: 0;
        transform: scale(.95);
    }

    /* другий блим */
    55% {
        opacity: 1;
        transform: scale(1.5);
    }

    72% {
        opacity: 0;
        transform: scale(.95);
    }
}

/* Текст трохи пізніше — коли бус уже під'їхав */
.speed-van-dispatch.run .speed-van-message {
    animation:
        speedVanMessageSmooth
        .38s
        1.82s
        ease-out
        forwards !important;
}

@keyframes speedVanMessageSmooth {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}

/*
   Старий blur був головною причиною
   розмитого фургона.
*/

.speed-van-wrap,
.speed-van-img {
    filter: none !important;
    -webkit-filter: none !important;
}

/*
   GPU малює трансформацію окремим шаром.
*/

.speed-van-wrap {
    will-change: transform, opacity !important;

    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    transform-style: preserve-3d !important;
}

.speed-van-img {
    transform: translateZ(0) !important;

    backface-visibility: hidden !important;

    image-rendering: auto !important;
}

/*
   Головна різниця:
   ніяких стрибків між scale .52 / .91 / 1.02.

   Є ОДИН безперервний рух:
   далеко -> близько.
*/

.speed-van-dispatch.run .speed-van-wrap {
    animation:
        speedVanPhysicalApproach
        2.30s
        cubic-bezier(.18,.72,.22,1)
        forwards !important;
}

@keyframes speedVanPhysicalApproach {

    from {
        transform:
            translate3d(-50%, -68%, 0)
            scale(.18);

        opacity: .32;
    }

    to {
        transform:
            translate3d(-50%, -47%, 0)
            scale(1);

        opacity: 1;
    }
}

/*
   Тінь під машиною теж збільшується,
   тому сприймається не як картинка,
   що zoom-иться, а як авто,
   що фізично наближається.
*/

.speed-van-dispatch.run .speed-van-road {
    animation:
        speedVanRoadApproach
        2.30s
        cubic-bezier(.18,.72,.22,1)
        forwards !important;
}

@keyframes speedVanRoadApproach {

    from {
        opacity: .05;

        transform:
            translateX(-50%)
            perspective(700px)
            rotateX(67deg)
            scale(.42);
    }

    to {
        opacity: .8;

        transform:
            translateX(-50%)
            perspective(700px)
            rotateX(67deg)
            scale(1);
    }
}

/*
   Фари тільки ПІСЛЯ повної зупинки.
*/

.speed-van-dispatch.run .speed-headlight {
    animation:
        speedVanHeadlightsFinal
        .90s
        2.34s
        ease-in-out
        forwards !important;
}

@keyframes speedVanHeadlightsFinal {

    0%,
    100% {
        opacity: 0;
        transform: scale(.9);
    }

    /* блим №1 */
    12% {
        opacity: 1;
        transform: scale(1.45);
    }

    27% {
        opacity: 0;
        transform: scale(.95);
    }

    /* блим №2 */
    57% {
        opacity: 1;
        transform: scale(1.5);
    }

    74% {
        opacity: 0;
        transform: scale(.95);
    }
}

/*
   Напис з'являється після під'їзду,
   а не під час руху.
*/

.speed-van-dispatch.run .speed-van-message {
    animation:
        speedVanMessageFinal
        .38s
        2.42s
        ease-out
        forwards !important;
}

@keyframes speedVanMessageFinal {

    from {
        opacity: 0;

        transform:
            translate3d(-50%, 12px, 0);
    }

    to {
        opacity: 1;

        transform:
            translate3d(-50%, 0, 0);
    }
}

/*
   На телефоні не роздуваємо PNG надмірно.
*/

@media (max-width: 600px) {

    .speed-van-wrap {
        width: 96vw !important;
    }

}

.site-footer {
    width: 100%;
    margin-top: 70px;

    border-top: 1px solid rgba(255,255,255,.09);

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(85,199,42,.08),
            transparent 26rem
        ),
        #080909;

    color: #fff;
}

.site-footer-inner {
    width: min(1180px, calc(100% - 44px));

    margin: 0 auto;

    padding: 46px 0 42px;

    display: grid;

    grid-template-columns:
        minmax(250px,1.25fr)
        minmax(200px,.9fr)
        minmax(220px,1fr);

    gap: 46px;
}

/* BRAND */

.footer-brand .brand {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 17px;

    font-size: 31px;
    font-weight: 1000;

    letter-spacing: -.045em;
}

.footer-brand .speed {
    color: #55c72a;
}

.footer-brand .service {
    color: #ff2929;
}

.footer-brand p {
    max-width: 440px;

    margin: 0;

    color: #aeb5b5;

    font-size: 15px;
    line-height: 1.65;
}

.footer-phone {
    display: inline-flex;

    margin-top: 22px;

    color: #fff !important;

    font-size: 22px;
    font-weight: 950;

    text-decoration: none !important;

    transition:
        color .18s ease,
        transform .18s ease;
}

.footer-phone:hover {
    color: #55c72a !important;

    transform: translateY(-1px);
}

/* LINK GROUPS */

.footer-links-group {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}

.footer-links-group > strong {
    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 16px;
    font-weight: 950;
}

.footer-links-group a {
    position: relative;

    display: inline-flex;

    max-width: 100%;

    color: #979f9f !important;

    font-size: 14px;
    line-height: 1.35;

    text-decoration: none !important;

    transition:
        color .18s ease,
        transform .18s ease;
}

.footer-links-group a::before {
    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    margin:
        .48em
        9px
        0
        0;

    border-radius: 50%;

    background: #ffd600;

    opacity: .72;
}

.footer-links-group a:hover {
    color: #fff !important;

    transform: translateX(2px);
}

/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 900px) {

    .site-footer-inner {
        grid-template-columns:
            1fr
            1fr;

        gap: 34px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    .site-footer {
        margin-top: 48px;
    }

    .site-footer-inner {
        width: calc(100% - 32px);

        padding:
            35px
            0
            30px;

        display: block;
    }

    .footer-brand {
        margin-bottom: 32px;
    }

    .footer-brand .brand {
        font-size: 27px;
    }

    .footer-brand p {
        font-size: 14px;
        line-height: 1.55;
    }

    .footer-phone {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;

        margin-top: 20px;

        padding: 14px 16px;

        border:
            1px solid
            rgba(85,199,42,.32);

        border-radius: 14px;

        background:
            rgba(85,199,42,.08);

        color: #76df50 !important;

        font-size: 19px;
    }

    .footer-links-group {
        gap: 0;

        padding:
            22px
            0;

        border-top:
            1px solid
            rgba(255,255,255,.08);
    }

    .footer-links-group > strong {
        margin-bottom: 12px;

        font-size: 15px;
    }

    .footer-links-group a {
        width: 100%;

        box-sizing: border-box;

        padding:
            9px
            0;

        color: #aeb4b4 !important;

        font-size: 14px;
    }

    .footer-links-group a::before {
        margin-left: 1px;
    }

}

.site-footer {
  margin-top: 70px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 212, 0, .06),
      transparent 24rem
    ),
    #090b0a;
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 22px 36px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 45px;
}

.footer-brand p {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.6;
}

.footer-phone {
  display: inline-block;
  margin-top: 10px;
  color: var(--yellow);
  text-decoration: none;
  font-size: 22px;
  font-weight: 1000;
}

.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-group strong {
  margin-bottom: 5px;
  color: #fff;
  font-size: 17px;
}

.footer-links-group a {
  color: #aeb4b4;
  text-decoration: none;
  line-height: 1.45;
}

.footer-links-group a:hover {
  color: var(--yellow);
}

.site-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 22px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #777f7b;
  font-size: 13px;
}

@media (max-width: 760px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer-bottom {
    flex-direction: column;
    gap: 7px;
  }
}

.site-footer-bottom {
    width: min(1180px, calc(100% - 44px));

    margin: 0 auto;

    padding:
        18px
        0
        24px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.footer-copy {
    color: #747c7c;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}

.footer-address {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    max-width: 100%;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(85,199,42,.24);

    border-radius: 999px;

    background:
        rgba(85,199,42,.055);

    color: #b9c0c0 !important;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.25;

    text-decoration: none !important;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.footer-address-pin {
    display: grid;

    width: 24px;
    height: 24px;

    flex:
        0
        0
        24px;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(85,199,42,.13);

    color: #69dc43;

    font-size: 17px;
    font-weight: 1000;
}

.footer-address:hover {
    color: #fff !important;

    border-color:
        rgba(85,199,42,.48);

    background:
        rgba(85,199,42,.10);

    transform: translateY(-1px);
}

@media (max-width: 600px) {

    .site-footer-bottom {
        width: calc(100% - 32px);

        padding:
            18px
            0
            28px;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

    .footer-copy {
        text-align: center;

        font-size: 12px;
    }

    .footer-address {
        width: 100%;

        box-sizing: border-box;

        justify-content: flex-start;

        padding:
            12px
            14px;

        border-radius: 14px;

        font-size: 13px;
    }

}

/* =========================================================
   CUSTOMER PUSH DISABLED
   ========================================================= */

#customerPushBtn,
.customer-push-btn {
    display: none !important;
}

/* =========================================================
   HERO CALL ROTATOR — WHEEL <-> VAN
   ========================================================= */

.hero-call-rotator {
    position: relative;

    width: min(430px, 86vw);
    aspect-ratio: 1 / 1;

    margin:
        18px
        auto
        34px;
}

.hero-call-pane {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: scale(.96);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility 0s linear .45s;
}

.hero-call-pane.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: scale(1);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

/* existing wheel button inside rotator */
.hero-call-pane-wheel #openCall {
    margin: 0 !important;
}

.hero-call-pane-wheel.is-active #openCall {
    animation: heroWheelPulse 1.6s ease-in-out infinite;
}

@keyframes heroWheelPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.03);
        filter: brightness(1.18);
    }
}

/* VAN SIDE */

.hero-van-button {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    background: none;

    cursor: pointer;
}

.hero-van-ring {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 50% 50%, rgba(18,18,18,.96) 0%, rgba(5,5,5,.98) 63%, rgba(0,0,0,1) 100%);

    box-shadow:
        0 0 0 4px rgba(255,214,0,.96),
        0 0 22px rgba(255,214,0,.48),
        0 0 60px rgba(255,214,0,.22);
}

.hero-van-tire {
    position: absolute;
    inset: 9%;

    border-radius: 50%;

    border: 12px solid rgba(45,45,45,.95);

    box-shadow:
        inset 0 0 0 3px rgba(255,214,0,.18);
}

.hero-van-tire::before {
    content: "";

    position: absolute;
    inset: 10px;

    border-radius: 50%;

    border: 8px dashed rgba(115,115,115,.58);
}

.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanGlow 1.6s ease-in-out infinite;
}

@keyframes heroVanGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 4px rgba(255,214,0,.96),
            0 0 22px rgba(255,214,0,.48),
            0 0 60px rgba(255,214,0,.22);
    }

    50% {
        transform: scale(1.028);
        box-shadow:
            0 0 0 4px rgba(255,214,0,1),
            0 0 30px rgba(255,214,0,.62),
            0 0 78px rgba(255,214,0,.28);
    }
}

.hero-van-image {
    position: relative;
    z-index: 2;

    width: 68%;
    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

.hero-van-caption {
    position: absolute;
    left: 50%;
    bottom: 15%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    pointer-events: none;
}

.hero-van-caption span {
    color: #ffd600;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-van-caption strong {
    margin-top: 4px;

    color: #fff;

    font-size: 22px;
    font-weight: 1000;

    line-height: 1;
}

@media (max-width: 600px) {
    .hero-call-rotator {
        width: min(360px, 88vw);
        margin:
            12px
            auto
            28px;
    }

    .hero-van-image {
        width: 70%;
    }

    .hero-van-caption {
        bottom: 13%;
    }

    .hero-van-caption span {
        font-size: 11px;
    }

    .hero-van-caption strong {
        font-size: 18px;
    }
}

/* плавніший fade між колесом і машинкою */
.hero-call-pane {
    transform: scale(.94);
    transition:
        opacity .65s ease,
        transform .65s ease,
        visibility 0s linear .65s !important;
}

.hero-call-pane.is-active {
    transform: scale(1);
    transition:
        opacity .65s ease,
        transform .65s ease !important;
}

/* ---------------------------------------------------------
   VAN BLOCK
   --------------------------------------------------------- */

.hero-van-button {
    border-radius: 50%;
    overflow: hidden;
}

.hero-van-ring {
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 50% 50%, rgba(15,15,15,.98) 0%, rgba(5,5,5,.99) 58%, rgba(0,0,0,1) 100%);

    box-shadow:
        0 0 0 3px rgba(42, 212, 74, .95),
        0 0 16px rgba(42, 212, 74, .25),
        0 0 32px rgba(255, 49, 49, .20),
        inset 0 0 42px rgba(0,0,0,.45) !important;
}

/* зовнішнє фірмове світіння */
.hero-van-ring::before {
    content: "";

    position: absolute;
    inset: -6%;

    border-radius: 50%;
    z-index: 0;

    background:
        conic-gradient(
            from 210deg,
            rgba(42,212,74,.92) 0deg,
            rgba(18,72,29,.30) 70deg,
            rgba(255,52,52,.88) 180deg,
            rgba(92,15,15,.30) 255deg,
            rgba(42,212,74,.92) 360deg
        );

    filter: blur(18px);
    opacity: .48;

    animation: heroVanBrandAura 3.2s ease-in-out infinite;
}

/* внутрішнє колесо / кільце навколо машини */
.hero-van-tire {
    inset: 8% !important;

    border: 13px solid rgba(42,42,42,.96);

    box-shadow:
        inset 0 0 0 2px rgba(42,212,74,.18),
        0 0 0 2px rgba(255,49,49,.10);
}

.hero-van-tire::before {
    inset: 10px !important;

    border: 8px dashed rgba(140,140,140,.58);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04);
}

/* сама машина — більша, чіткіша й плавно “живе” */
.hero-van-image {
    position: relative;
    z-index: 2;

    width: 74% !important;
    max-width: 74%;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.48))
        drop-shadow(0 0 10px rgba(42,212,74,.08));

    animation: heroVanFloat 3.4s ease-in-out infinite;
}

/* брендова пульсація всього блоку */
.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanBrandPulse 2.7s ease-in-out infinite;
}

/* підпис */
.hero-van-caption {
    bottom: 11% !important;
    width: 80%;
}

.hero-van-caption span {
    color: #2ed95a !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    letter-spacing: .16em;
    text-transform: uppercase;

    text-shadow:
        0 0 10px rgba(46,217,90,.22);
}

.hero-van-caption strong {
    margin-top: 6px !important;

    color: #ff3a3a !important;

    font-size: 30px !important;
    font-weight: 1000 !important;

    letter-spacing: -.03em;
    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(255,58,58,.18);
}

/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes heroVanFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform: translateY(-4px) scale(1.01);
    }

    50% {
        transform: translateY(-8px) scale(1.022);
    }

    75% {
        transform: translateY(-3px) scale(1.01);
    }
}

@keyframes heroVanBrandPulse {
    0%, 100% {
        transform: scale(1);

        box-shadow:
            0 0 0 3px rgba(42, 212, 74, .92),
            0 0 16px rgba(42, 212, 74, .22),
            0 0 32px rgba(255, 49, 49, .16),
            inset 0 0 42px rgba(0,0,0,.45);
    }

    50% {
        transform: scale(1.022);

        box-shadow:
            0 0 0 3px rgba(42, 212, 74, 1),
            0 0 28px rgba(42, 212, 74, .36),
            0 0 56px rgba(255, 49, 49, .28),
            inset 0 0 42px rgba(0,0,0,.45);
    }
}

@keyframes heroVanBrandAura {
    0%, 100% {
        opacity: .42;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: .62;
        transform: scale(1.03) rotate(10deg);
    }
}

@media (max-width: 600px) {

    .hero-van-image {
        width: 76% !important;
        max-width: 76%;
    }

    .hero-van-caption {
        bottom: 10% !important;
    }

    .hero-van-caption span {
        font-size: 12px !important;
    }

    .hero-van-caption strong {
        font-size: 22px !important;
    }
}

/* сам блок трохи компактніший */
.hero-call-rotator {
    width: min(390px, 82vw) !important;
}

/* зовнішнє кільце менш жирне */
.hero-van-ring {
    box-shadow:
        0 0 0 2px rgba(42, 212, 74, .55),
        0 0 10px rgba(42, 212, 74, .14),
        0 0 16px rgba(255, 49, 49, .10),
        inset 0 0 28px rgba(0,0,0,.38) !important;
}

/* головне: кольори по боках */
.hero-van-ring::before {
    inset: -2.5% !important;

    background:
        radial-gradient(circle at 16% 50%,
            rgba(42,212,74,.52) 0%,
            rgba(42,212,74,.22) 24%,
            rgba(42,212,74,.08) 38%,
            transparent 58%
        ),
        radial-gradient(circle at 84% 50%,
            rgba(255,52,52,.52) 0%,
            rgba(255,52,52,.22) 24%,
            rgba(255,52,52,.08) 38%,
            transparent 58%
        ) !important;

    filter: blur(16px) !important;
    opacity: .72 !important;

    animation: heroVanSideAura 3.2s ease-in-out infinite !important;
}

/* внутрішнє колесо теж трохи тонше */
.hero-van-tire {
    inset: 10% !important;
    border: 10px solid rgba(42,42,42,.96) !important;
}

.hero-van-tire::before {
    inset: 9px !important;
    border: 7px dashed rgba(150,150,150,.54) !important;
}

/* машина трохи більша всередині, щоб краще заповнювала блок */
.hero-van-image {
    width: 76% !important;
    max-width: 76% !important;
}

/* текст трохи вище й компактніше */
.hero-van-caption {
    bottom: 9% !important;
}

.hero-van-caption span {
    font-size: 13px !important;
}

.hero-van-caption strong {
    font-size: 26px !important;
}

/* м’якша пульсація */
.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanBrandPulseV3 2.8s ease-in-out infinite !important;
}

@keyframes heroVanBrandPulseV3 {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 2px rgba(42, 212, 74, .55),
            0 0 10px rgba(42, 212, 74, .14),
            0 0 16px rgba(255, 49, 49, .10),
            inset 0 0 28px rgba(0,0,0,.38);
    }

    50% {
        transform: scale(1.012);
        box-shadow:
            0 0 0 2px rgba(42, 212, 74, .70),
            0 0 14px rgba(42, 212, 74, .20),
            0 0 24px rgba(255, 49, 49, .16),
            inset 0 0 28px rgba(0,0,0,.38);
    }
}

@keyframes heroVanSideAura {
    0%, 100% {
        opacity: .62;
        transform: scale(1);
    }

    50% {
        opacity: .82;
        transform: scale(1.02);
    }
}

@media (max-width: 600px) {
    .hero-call-rotator {
        width: min(340px, 84vw) !important;
    }

    .hero-van-image {
        width: 77% !important;
        max-width: 77% !important;
    }

    .hero-van-caption strong {
        font-size: 21px !important;
    }
}

/* ---------------------------------------------------------
   ЗАГАЛЬНИЙ РОЗМІР БЛОКУ — МЕНШИЙ
   --------------------------------------------------------- */

.hero-call-rotator {
    width: min(320px, 72vw) !important;
    aspect-ratio: 1 / 1 !important;

    margin:
        12px
        auto
        24px !important;
}

/* ---------------------------------------------------------
   СТАН КНОПКИ-КОЛЕСА
   --------------------------------------------------------- */

.hero-call-pane-wheel #openCall {
    position: relative;
    z-index: 1;

    box-shadow:
        -16px 0 26px rgba(42,212,74,.18),
         16px 0 26px rgba(255,52,52,.18),
         0 0 18px rgba(255,214,0,.08) !important;
}

.hero-call-pane-wheel.is-active #openCall {
    animation: heroWheelPulseBrand 1.8s ease-in-out infinite !important;
}

@keyframes heroWheelPulseBrand {
    0%, 100% {
        transform: scale(1);

        box-shadow:
            -14px 0 22px rgba(42,212,74,.18),
             14px 0 22px rgba(255,52,52,.18),
             0 0 16px rgba(255,214,0,.06);
    }

    50% {
        transform: scale(1.02);

        box-shadow:
            -18px 0 34px rgba(42,212,74,.26),
             18px 0 34px rgba(255,52,52,.26),
             0 0 18px rgba(255,214,0,.09);
    }
}

/* ---------------------------------------------------------
   СТАН З МАШИНКОЮ — КОМПАКТНІШИЙ
   --------------------------------------------------------- */

.hero-van-ring {
    box-shadow:
        0 0 0 2px rgba(255,255,255,.05),
        inset 0 0 24px rgba(0,0,0,.36) !important;
}

.hero-van-ring::before {
    inset: -1.5% !important;

    background:
        radial-gradient(circle at 14% 50%,
            rgba(42,212,74,.48) 0%,
            rgba(42,212,74,.20) 24%,
            rgba(42,212,74,.05) 42%,
            transparent 58%
        ),
        radial-gradient(circle at 86% 50%,
            rgba(255,52,52,.48) 0%,
            rgba(255,52,52,.20) 24%,
            rgba(255,52,52,.05) 42%,
            transparent 58%
        ) !important;

    filter: blur(12px) !important;
    opacity: .78 !important;
}

.hero-van-tire {
    inset: 11% !important;
    border: 8px solid rgba(48,48,48,.96) !important;
}

.hero-van-tire::before {
    inset: 8px !important;
    border: 6px dashed rgba(165,165,165,.50) !important;
}

.hero-van-image {
    width: 74% !important;
    max-width: 74% !important;
}

.hero-van-caption {
    bottom: 8% !important;
    width: 82% !important;
}

.hero-van-caption span {
    font-size: 12px !important;
}

.hero-van-caption strong {
    font-size: 21px !important;
}

.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanBrandPulseV4 2.8s ease-in-out infinite !important;
}

@keyframes heroVanBrandPulseV4 {
    0%, 100% {
        transform: scale(1);

        box-shadow:
            -12px 0 20px rgba(42,212,74,.12),
             12px 0 20px rgba(255,52,52,.12),
             inset 0 0 24px rgba(0,0,0,.36);
    }

    50% {
        transform: scale(1.014);

        box-shadow:
            -18px 0 30px rgba(42,212,74,.20),
             18px 0 30px rgba(255,52,52,.20),
             inset 0 0 24px rgba(0,0,0,.36);
    }
}

@media (max-width: 600px) {

    .hero-call-rotator {
        width: min(285px, 76vw) !important;
        margin:
            8px
            auto
            20px !important;
    }

    .hero-van-image {
        width: 75% !important;
        max-width: 75% !important;
    }

    .hero-van-caption strong {
        font-size: 18px !important;
    }

    .hero-van-caption span {
        font-size: 11px !important;
    }
}

.hero-van-ring::before {
    inset: -1.5% !important;

    background:
        radial-gradient(circle at 10% 50%,
            rgba(35, 220, 80, .82) 0%,
            rgba(35, 220, 80, .38) 20%,
            rgba(35, 220, 80, .14) 34%,
            transparent 52%
        ),
        radial-gradient(circle at 90% 50%,
            rgba(255, 54, 54, .82) 0%,
            rgba(255, 54, 54, .38) 20%,
            rgba(255, 54, 54, .14) 34%,
            transparent 52%
        ) !important;

    filter: blur(10px) !important;
    opacity: .92 !important;

    animation: heroVanSideAuraV5 2.8s ease-in-out infinite !important;
}

/* тонке зовнішнє кільце */
.hero-van-ring {
    box-shadow:
        -12px 0 22px rgba(35,220,80,.12),
         12px 0 22px rgba(255,54,54,.12),
         inset 0 0 20px rgba(0,0,0,.34) !important;
}

/* ---------------------------------------------------------
   САМА МАШИНКА — ЛЕГКЕ ПІД’ЇЗДЖАННЯ ВПЕРЕД
   --------------------------------------------------------- */

.hero-van-image {
    width: 74% !important;
    max-width: 74% !important;

    filter:
        drop-shadow(0 8px 14px rgba(0,0,0,.42))
        drop-shadow(-4px 0 10px rgba(35,220,80,.06))
        drop-shadow(4px 0 10px rgba(255,54,54,.06)) !important;

    animation: heroVanApproachV5 2.8s ease-in-out infinite !important;
}

/* трохи підкрутимо внутрішнє колесо */
.hero-van-tire {
    inset: 11.5% !important;
    border: 8px solid rgba(52,52,52,.96) !important;
}

.hero-van-tire::before {
    inset: 8px !important;
    border: 6px dashed rgba(172,172,172,.48) !important;
}

/* текст трохи акуратніше */
.hero-van-caption {
    bottom: 8.5% !important;
}

.hero-van-caption span {
    color: #2dde64 !important;
    letter-spacing: .14em !important;
    text-shadow: 0 0 8px rgba(45,222,100,.18) !important;
}

.hero-van-caption strong {
    color: #ff3a3a !important;
    text-shadow: 0 0 10px rgba(255,58,58,.18) !important;
}

/* ---------------------------------------------------------
   ПУЛЬСАЦІЯ КРУГА
   --------------------------------------------------------- */

.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanBrandPulseV5 2.8s ease-in-out infinite !important;
}

@keyframes heroVanBrandPulseV5 {
    0%, 100% {
        transform: scale(1);

        box-shadow:
            -12px 0 22px rgba(35,220,80,.12),
             12px 0 22px rgba(255,54,54,.12),
             inset 0 0 20px rgba(0,0,0,.34);
    }

    50% {
        transform: scale(1.01);

        box-shadow:
            -18px 0 34px rgba(35,220,80,.20),
             18px 0 34px rgba(255,54,54,.20),
             inset 0 0 20px rgba(0,0,0,.34);
    }
}

@keyframes heroVanSideAuraV5 {
    0%, 100% {
        opacity: .86;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.015);
    }
}

/* легке "їде на нас" */
@keyframes heroVanApproachV5 {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform: translateY(-1px) scale(1.015);
    }

    50% {
        transform: translateY(-3px) scale(1.035);
    }

    75% {
        transform: translateY(-1px) scale(1.018);
    }
}

.hero-call-pane-wheel #openCall {
    box-shadow:
        -14px 0 24px rgba(35,220,80,.16),
         14px 0 24px rgba(255,54,54,.16),
         0 0 14px rgba(255,214,0,.04) !important;
}

.hero-call-pane-wheel.is-active #openCall {
    animation: heroWheelPulseBrandV5 1.9s ease-in-out infinite !important;
}

@keyframes heroWheelPulseBrandV5 {
    0%, 100% {
        transform: scale(1);

        box-shadow:
            -14px 0 24px rgba(35,220,80,.16),
             14px 0 24px rgba(255,54,54,.16),
             0 0 14px rgba(255,214,0,.04);
    }

    50% {
        transform: scale(1.018);

        box-shadow:
            -20px 0 36px rgba(35,220,80,.24),
             20px 0 36px rgba(255,54,54,.24),
             0 0 16px rgba(255,214,0,.06);
    }
}

@media (max-width: 600px) {

    .hero-call-rotator {
        width: min(280px, 76vw) !important;
    }

    .hero-van-image {
        width: 75% !important;
        max-width: 75% !important;
    }

    .hero-van-caption strong {
        font-size: 18px !important;
    }
}

/* ---------------------------------------------------------
   ЗАГАЛЬНИЙ РОЗМІР
   --------------------------------------------------------- */

.hero-call-rotator {
    width: min(320px, 72vw) !important;
    aspect-ratio: 1 / 1 !important;
}

.hero-call-pane-wheel #openCall {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.hero-call-pane-wheel #openCall::before {
    content: "";

    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: -1;

    background:
        radial-gradient(circle at 18% 50%,
            rgba(35,220,80,.38) 0%,
            rgba(35,220,80,.18) 26%,
            transparent 56%
        ),
        radial-gradient(circle at 82% 50%,
            rgba(255,54,54,.38) 0%,
            rgba(255,54,54,.18) 26%,
            transparent 56%
        );

    filter: blur(12px);
    opacity: .88;

    animation: heroWheelSideGlowV6 2.6s ease-in-out infinite;
}

.hero-call-pane-wheel #openCall::after {
    content: "";

    position: absolute;
    inset: -4px;
    border-radius: 50%;
    z-index: -1;

    background:
        conic-gradient(
            from 180deg,
            rgba(35,220,80,.55) 0deg,
            rgba(35,220,80,0) 70deg,
            rgba(255,54,54,0) 110deg,
            rgba(255,54,54,.55) 180deg,
            rgba(255,54,54,0) 250deg,
            rgba(35,220,80,0) 290deg,
            rgba(35,220,80,.55) 360deg
        );

    filter: blur(3px);
    opacity: .72;

    animation: heroWheelRimPulseV6 2.2s ease-in-out infinite;
}

.hero-call-pane-wheel.is-active #openCall {
    animation: heroWheelMainPulseV6 1.9s ease-in-out infinite !important;
}

@keyframes heroWheelMainPulseV6 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }
}

@keyframes heroWheelSideGlowV6 {
    0%, 100% {
        opacity: .82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}

@keyframes heroWheelRimPulseV6 {
    0%, 100% {
        opacity: .62;
        transform: scale(1);
    }

    50% {
        opacity: .92;
        transform: scale(1.012);
    }
}

.hero-van-ring {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.34) !important;
}

.hero-van-ring::before {
    content: "";

    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: 0;

    background:
        radial-gradient(circle at 16% 50%,
            rgba(35,220,80,.44) 0%,
            rgba(35,220,80,.18) 28%,
            transparent 56%
        ),
        radial-gradient(circle at 84% 50%,
            rgba(255,54,54,.44) 0%,
            rgba(255,54,54,.18) 28%,
            transparent 56%
        );

    filter: blur(12px);
    opacity: .9;

    animation: heroVanSideGlowV6 2.8s ease-in-out infinite;
}

.hero-van-ring::after {
    content: "";

    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 1;

    background:
        conic-gradient(
            from 180deg,
            rgba(35,220,80,.48) 0deg,
            rgba(35,220,80,0) 75deg,
            rgba(255,54,54,0) 105deg,
            rgba(255,54,54,.48) 180deg,
            rgba(255,54,54,0) 255deg,
            rgba(35,220,80,0) 285deg,
            rgba(35,220,80,.48) 360deg
        );

    filter: blur(2px);
    opacity: .68;

    animation: heroVanRimPulseV6 2.4s ease-in-out infinite;
}

@keyframes heroVanSideGlowV6 {
    0%, 100% {
        opacity: .82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.018);
    }
}

@keyframes heroVanRimPulseV6 {
    0%, 100% {
        opacity: .58;
        transform: scale(1);
    }

    50% {
        opacity: .86;
        transform: scale(1.01);
    }
}

/* внутрішнє колесо компактніше */
.hero-van-tire {
    inset: 11.5% !important;
    border: 8px solid rgba(52,52,52,.96) !important;
    z-index: 2 !important;
}

.hero-van-tire::before {
    inset: 8px !important;
    border: 6px dashed rgba(172,172,172,.50) !important;
}

/* =========================================================
   3. ПЛАВАЮЧА МАШИНКА
   ========================================================= */

.hero-van-image {
    position: relative;
    z-index: 3;

    width: 74% !important;
    max-width: 74% !important;

    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.42))
        drop-shadow(-4px 0 8px rgba(35,220,80,.05))
        drop-shadow(4px 0 8px rgba(255,54,54,.05)) !important;

    animation: heroVanFloatV6 3.2s ease-in-out infinite !important;
}

@keyframes heroVanFloatV6 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    20% {
        transform: translate3d(-2px, -4px, 0) scale(1.012);
    }

    40% {
        transform: translate3d(2px, -7px, 0) scale(1.022);
    }

    60% {
        transform: translate3d(3px, -4px, 0) scale(1.015);
    }

    80% {
        transform: translate3d(-1px, -2px, 0) scale(1.008);
    }
}

/* =========================================================
   4. ТЕКСТ
   ========================================================= */

.hero-van-caption {
    bottom: 8.5% !important;
    width: 82% !important;
    z-index: 4 !important;
}

.hero-van-caption span {
    color: #2dde64 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-shadow: 0 0 8px rgba(45,222,100,.18) !important;
}

.hero-van-caption strong {
    color: #ff3a3a !important;
    font-size: 21px !important;
    font-weight: 1000 !important;
    text-shadow: 0 0 10px rgba(255,58,58,.18) !important;
}

@media (max-width: 600px) {

    .hero-call-rotator {
        width: min(285px, 76vw) !important;
    }

    .hero-call-pane-wheel #openCall::before,
    .hero-van-ring::before {
        inset: -10px !important;
        filter: blur(10px) !important;
    }

    .hero-van-image {
        width: 75% !important;
        max-width: 75% !important;
    }

    .hero-van-caption strong {
        font-size: 18px !important;
    }

    .hero-van-caption span {
        font-size: 11px !important;
    }
}

/* ---------------------------------------------------------
   ОДНАКОВИЙ РОЗМІР ДЛЯ ОБОХ СТАНІВ
   --------------------------------------------------------- */

.hero-call-rotator {
    width: min(320px, 72vw) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 12px auto 24px !important;
}

.hero-call-pane,
.hero-call-pane-wheel,
.hero-call-pane-van {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------
   КОЛЕСО-КНОПКА — лишаємо як є, лише трохи акуратніше
   --------------------------------------------------------- */

.hero-call-pane-wheel #openCall {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.hero-van-button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
}

.hero-van-ring {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: visible !important;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 50% 50%,
            rgba(16,18,21,.98) 0%,
            rgba(8,9,10,.99) 58%,
            rgba(0,0,0,1) 100%) !important;

    box-shadow:
        inset 0 0 0 3px rgba(255,214,0,.95),
        inset 0 0 30px rgba(0,0,0,.42) !important;
}

.hero-van-ring::before {
    content: "";

    position: absolute;
    inset: -14px;
    border-radius: 50%;
    z-index: 0;

    background:
        radial-gradient(circle at 18% 50%,
            rgba(40,220,85,.46) 0%,
            rgba(40,220,85,.24) 24%,
            rgba(40,220,85,.10) 38%,
            transparent 58%
        ),
        radial-gradient(circle at 82% 50%,
            rgba(255,58,58,.46) 0%,
            rgba(255,58,58,.24) 24%,
            rgba(255,58,58,.10) 38%,
            transparent 58%
        );

    filter: blur(18px);
    opacity: .95;

    animation: heroVanGlowSideV7 2.8s ease-in-out infinite;
}

/* тонкий кольоровий rim по кругу */
.hero-van-ring::after {
    content: "";

    position: absolute;
    inset: -2px;
    border-radius: 50%;
    z-index: 1;

    background:
        conic-gradient(
            from 180deg,
            rgba(40,220,85,.82) 0deg,
            rgba(40,220,85,0) 72deg,
            rgba(255,58,58,0) 108deg,
            rgba(255,58,58,.82) 180deg,
            rgba(255,58,58,0) 252deg,
            rgba(40,220,85,0) 288deg,
            rgba(40,220,85,.82) 360deg
        );

    filter: blur(4px);
    opacity: .78;

    animation: heroVanRimV7 2.5s ease-in-out infinite;
}

/* внутрішнє колесо під машинкою */
.hero-van-tire {
    position: absolute;
    inset: 11% !important;
    border-radius: 50%;
    z-index: 2;

    border: 10px solid rgba(48,48,52,.98) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.03);
}

.hero-van-tire::before {
    content: "";
    position: absolute;
    inset: 8px !important;
    border-radius: 50%;

    border: 7px dashed rgba(165,165,165,.50) !important;
}

/* ---------------------------------------------------------
   МАШИНКА
   --------------------------------------------------------- */

.hero-van-image {
    position: relative;
    z-index: 3;

    width: 70% !important;
    max-width: 70% !important;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.42))
        drop-shadow(-4px 0 8px rgba(40,220,85,.06))
        drop-shadow(4px 0 8px rgba(255,58,58,.06)) !important;

    animation: heroVanFloatV7 3.2s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   ТЕКСТ
   --------------------------------------------------------- */

.hero-van-caption {
    position: absolute;
    left: 50%;
    bottom: 9% !important;
    transform: translateX(-50%);
    z-index: 4;

    width: 82%;
    text-align: center;
    pointer-events: none;
}

.hero-van-caption span {
    display: block;

    color: #31db64 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;

    text-shadow: 0 0 10px rgba(49,219,100,.20) !important;
}

.hero-van-caption strong {
    display: block;
    margin-top: 4px;

    color: #ff3f3f !important;
    font-size: 21px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    text-transform: uppercase;

    text-shadow: 0 0 12px rgba(255,63,63,.20) !important;
}

/* ---------------------------------------------------------
   Анімації
   --------------------------------------------------------- */

.hero-call-pane-van.is-active .hero-van-ring {
    animation: heroVanMainPulseV7 2.8s ease-in-out infinite !important;
}

@keyframes heroVanMainPulseV7 {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            inset 0 0 0 3px rgba(255,214,0,.95),
            inset 0 0 30px rgba(0,0,0,.42);
    }

    50% {
        transform: scale(1.016);
        box-shadow:
            inset 0 0 0 3px rgba(255,214,0,1),
            inset 0 0 30px rgba(0,0,0,.42);
    }
}

@keyframes heroVanGlowSideV7 {
    0%, 100% {
        opacity: .88;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes heroVanRimV7 {
    0%, 100% {
        opacity: .66;
        transform: scale(1);
    }

    50% {
        opacity: .92;
        transform: scale(1.01);
    }
}

@keyframes heroVanFloatV7 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    20% {
        transform: translate3d(-2px, -3px, 0) scale(1.01);
    }

    40% {
        transform: translate3d(2px, -6px, 0) scale(1.022);
    }

    60% {
        transform: translate3d(3px, -4px, 0) scale(1.014);
    }

    80% {
        transform: translate3d(-1px, -2px, 0) scale(1.008);
    }
}

@media (max-width: 600px) {
    .hero-call-rotator {
        width: min(285px, 76vw) !important;
    }

    .hero-van-image {
        width: 72% !important;
        max-width: 72% !important;
    }

    .hero-van-caption strong {
        font-size: 18px !important;
    }

    .hero-van-caption span {
        font-size: 11px !important;
    }
}

/* сама кнопка такого самого розміру */
.hero-van-button,
.hero-van-ring {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

/* прибираємо старі розмиті плями */
.hero-van-ring {
    position: relative !important;
    overflow: visible !important;

    background:
        radial-gradient(
            circle,
            #151515 0%,
            #080909 65%,
            #020303 100%
        ) !important;

    box-shadow:
        inset 0 0 0 8px #252525,
        inset 0 0 32px rgba(0,0,0,.7) !important;
}

/* САМЕ КОЛЬОРОВИЙ ОБІДОК */
.hero-van-ring::after {
    content: "" !important;

    position: absolute !important;
    inset: -4px !important;

    z-index: 5 !important;

    border-radius: 50% !important;

    padding: 5px !important;

    background:
        conic-gradient(
            from 90deg,
            #ff2525 0deg,
            #ff2525 90deg,
            #ff4848 150deg,
            #31df5f 210deg,
            #20c94d 300deg,
            #31df5f 360deg
        ) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;

    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;

    filter:
        drop-shadow(10px 0 9px rgba(255,37,37,.72))
        drop-shadow(-10px 0 9px rgba(32,201,77,.72)) !important;

    opacity: 1 !important;

    pointer-events: none !important;

    animation:
        vanRimGlowFinal
        1.8s
        ease-in-out
        infinite !important;
}

/* зовнішній glow — тільки біля самого обідка */
.hero-van-ring::before {
    content: "" !important;

    position: absolute !important;
    inset: -8px !important;

    z-index: -1 !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            from 90deg,
            rgba(255,37,37,.9),
            rgba(255,37,37,.18) 45%,
            rgba(32,201,77,.18) 55%,
            rgba(32,201,77,.9)
        ) !important;

    filter: blur(12px) !important;

    opacity: .55 !important;

    pointer-events: none !important;

    animation:
        vanOuterGlowFinal
        1.8s
        ease-in-out
        infinite !important;
}

/* машина продовжує плавати */
.hero-van-image {
    position: relative !important;
    z-index: 3 !important;

    animation:
        vanFloatFinal
        3s
        ease-in-out
        infinite !important;
}

/* текст поверх */
.hero-van-caption {
    z-index: 6 !important;
}

@keyframes vanRimGlowFinal {

    0%, 100% {
        opacity: .78;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.012);
    }
}

@keyframes vanOuterGlowFinal {

    0%, 100% {
        opacity: .40;
        transform: scale(1);
    }

    50% {
        opacity: .72;
        transform: scale(1.02);
    }
}

@keyframes vanFloatFinal {

    0%, 100% {
        transform:
            translate3d(0, 2px, 0);
    }

    50% {
        transform:
            translate3d(0, -7px, 0);
    }
}

/* =========================================================
   HERO VAN — VARIANT 7 ENERGY RIM
   ========================================================= */

/* базовий круг */
.hero-van-ring {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at center,
            #141616 0%,
            #090a0a 62%,
            #020303 100%
        ) !important;

    box-shadow:
        inset 0 0 0 8px #262828,
        inset 0 0 32px rgba(0,0,0,.72) !important;

    overflow: visible !important;
    isolation: isolate !important;
}

/* =========================================================
   ЗОВНІШНЯ ЕНЕРГІЯ
   ========================================================= */

.hero-van-ring::before {
    content: "" !important;

    position: absolute !important;

    inset: -15px !important;

    border-radius: 50% !important;

    z-index: 0 !important;

    background:
        conic-gradient(
            from -90deg,

            #ff2020 0deg,
            #ff3535 35deg,
            rgba(255,32,32,.18) 76deg,

            transparent 88deg,
            transparent 92deg,

            rgba(31,225,82,.20) 104deg,
            #22df59 145deg,
            #16ff55 180deg,

            #16ff55 220deg,
            rgba(31,225,82,.18) 258deg,

            transparent 270deg,
            transparent 274deg,

            rgba(255,32,32,.18) 285deg,
            #ff3434 325deg,
            #ff2020 360deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 70%,
            #000 73% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 70%,
            #000 73% 100%
        ) !important;

    filter:
        blur(8px)
        drop-shadow(-7px 0 12px rgba(255,35,35,.8))
        drop-shadow(7px 0 12px rgba(25,235,80,.8)) !important;

    opacity: .84 !important;

    pointer-events: none !important;

    animation:
        energyAura7
        1.45s
        ease-in-out
        infinite !important;
}

/* =========================================================
   ЯСКРАВИЙ ЕЛЕКТРИЧНИЙ ОБІДОК
   ========================================================= */

.hero-van-ring::after {
    content: "" !important;

    position: absolute !important;

    inset: -4px !important;

    border-radius: 50% !important;

    z-index: 5 !important;

    padding: 4px !important;

    background:
        conic-gradient(
            from -90deg,

            #ff2222 0deg,
            #ff2222 78deg,

            #ff6262 88deg,
            #26ff62 92deg,

            #20dd55 180deg,
            #20dd55 268deg,

            #6aff8b 272deg,
            #ff2222 278deg,

            #ff2222 360deg
        ) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;

    -webkit-mask-composite: xor !important;

    mask-composite: exclude !important;

    filter:
        drop-shadow(-8px 0 7px rgba(255,32,32,.85))
        drop-shadow(8px 0 7px rgba(30,230,80,.85)) !important;

    opacity: .98 !important;

    pointer-events: none !important;

    animation:
        energyRim7
        1.1s
        ease-in-out
        infinite !important;
}

/* =========================================================
   ВНУТРІШНЄ КОЛЕСО
   ========================================================= */

.hero-van-tire {
    inset: 11% !important;

    z-index: 2 !important;

    border:
        8px solid
        rgba(46,48,48,.98) !important;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.025) !important;
}

.hero-van-tire::before {
    inset: 8px !important;

    border:
        6px dashed
        rgba(175,180,180,.52) !important;
}

/* =========================================================
   ПЛАВАЮЧИЙ БУС
   ========================================================= */

.hero-van-image {
    position: relative !important;

    z-index: 3 !important;

    width: 71% !important;
    max-width: 71% !important;

    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.55))
        drop-shadow(-3px 0 5px rgba(255,35,35,.09))
        drop-shadow(3px 0 5px rgba(25,230,80,.09)) !important;

    animation:
        energyVanFloat7
        3.1s
        ease-in-out
        infinite !important;
}

/* текст */
.hero-van-caption {
    z-index: 7 !important;
    bottom: 8% !important;
}

.hero-van-caption span {
    color: #2be45f !important;
}

.hero-van-caption strong {
    color: #ff3838 !important;
}

/* =========================================================
   ENERGY ANIMATIONS
   ========================================================= */

@keyframes energyAura7 {

    0%, 100% {
        opacity: .68;
        transform: scale(1);
        filter:
            blur(8px)
            drop-shadow(-7px 0 10px rgba(255,35,35,.60))
            drop-shadow(7px 0 10px rgba(25,235,80,.60));
    }

    35% {
        opacity: .95;
        transform: scale(1.018);
    }

    55% {
        opacity: .74;
        transform: scale(1.006);
    }

    72% {
        opacity: 1;
        transform: scale(1.025);
        filter:
            blur(9px)
            drop-shadow(-9px 0 15px rgba(255,35,35,.90))
            drop-shadow(9px 0 15px rgba(25,235,80,.90));
    }
}

@keyframes energyRim7 {

    0%, 100% {
        opacity: .80;
        transform: scale(1);
    }

    18% {
        opacity: 1;
    }

    34% {
        opacity: .72;
    }

    50% {
        opacity: 1;
        transform: scale(1.009);
    }

    67% {
        opacity: .78;
    }

    84% {
        opacity: 1;
    }
}

@keyframes energyVanFloat7 {

    0%, 100% {
        transform:
            translate3d(0, 2px, 0)
            rotate(.15deg);
    }

    25% {
        transform:
            translate3d(-2px, -3px, 0)
            rotate(-.25deg);
    }

    50% {
        transform:
            translate3d(1px, -7px, 0)
            rotate(.18deg);
    }

    75% {
        transform:
            translate3d(2px, -3px, 0)
            rotate(-.12deg);
    }
}

@media (max-width: 600px) {

    .hero-van-ring::before {
        inset: -11px !important;
        filter:
            blur(7px)
            drop-shadow(-6px 0 9px rgba(255,35,35,.75))
            drop-shadow(6px 0 9px rgba(25,235,80,.75)) !important;
    }

    .hero-van-image {
        width: 72% !important;
        max-width: 72% !important;
    }
}

/* =========================================================
   VARIANT 7 — ENERGY RIM FIX
   Safari-safe, no mask-composite
   ========================================================= */

/* ГОЛОВНИЙ КРУГ */
.hero-van-ring {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    border:
        5px solid
        transparent !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            #151717 0%,
            #090a0a 62%,
            #020303 100%
        ) padding-box,

        conic-gradient(
            from 0deg,

            #ff2525 0deg,
            #ff2525 82deg,

            #ff4747 88deg,

            #2cff64 92deg,
            #22df58 180deg,

            #22df58 268deg,

            #45ff78 272deg,

            #ff4242 278deg,
            #ff2525 360deg
        ) border-box !important;

    /*
       ЧЕРВОНИЙ glow зліва
       ЗЕЛЕНИЙ glow справа
    */
    box-shadow:
        -13px 0 24px rgba(255,35,35,.38),
         13px 0 24px rgba(35,230,90,.38),

        -5px 0 10px rgba(255,35,35,.45),
         5px 0 10px rgba(35,230,90,.45),

        inset 0 0 0 7px #292b2b,
        inset 0 0 28px rgba(0,0,0,.72) !important;

    filter:
        drop-shadow(-6px 0 7px rgba(255,35,35,.35))
        drop-shadow(6px 0 7px rgba(35,230,90,.35)) !important;

    overflow: visible !important;

    animation:
        energyRingReal7
        1.65s
        ease-in-out
        infinite !important;
}

/* ВИМИКАЄМО СТАРІ НЕПРАЦЮЮЧІ PSEUDO-RINGS */
.hero-van-ring::before,
.hero-van-ring::after {
    content: none !important;
}

/* =========================================================
   ВНУТРІШНЄ КОЛЕСО
   ========================================================= */

.hero-van-tire {
    position: absolute !important;

    inset: 11% !important;

    z-index: 2 !important;

    border-radius: 50% !important;

    border:
        8px solid
        #343636 !important;

    background:
        radial-gradient(
            circle,
            transparent 62%,
            rgba(255,255,255,.015) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.025) !important;
}

.hero-van-tire::before {
    content: "" !important;

    position: absolute !important;

    inset: 8px !important;

    border-radius: 50% !important;

    border:
        6px dashed
        rgba(180,185,185,.55) !important;
}

/* =========================================================
   БУС — ПЛАВАЄ
   ========================================================= */

.hero-van-image {
    position: relative !important;

    z-index: 4 !important;

    width: 72% !important;
    max-width: 72% !important;

    filter:
        drop-shadow(
            0
            10px
            15px
            rgba(0,0,0,.55)
        ) !important;

    animation:
        energyVanFloatReal7
        3s
        ease-in-out
        infinite !important;

    will-change: transform;
}

/* =========================================================
   ТЕКСТ
   ========================================================= */

.hero-van-caption {
    z-index: 6 !important;

    bottom: 8% !important;
}

.hero-van-caption span {
    color: #32eb68 !important;

    text-shadow:
        0 0 8px
        rgba(50,235,104,.35) !important;
}

.hero-van-caption strong {
    color: #ff3b3b !important;

    text-shadow:
        0 0 9px
        rgba(255,59,59,.34) !important;
}

/* =========================================================
   ENERGY PULSE
   ========================================================= */

@keyframes energyRingReal7 {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            -13px 0 24px rgba(255,35,35,.30),
             13px 0 24px rgba(35,230,90,.30),

            -5px 0 10px rgba(255,35,35,.40),
             5px 0 10px rgba(35,230,90,.40),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }

    45% {
        transform: scale(1.012);

        box-shadow:
            -17px 0 34px rgba(255,35,35,.62),
             17px 0 34px rgba(35,230,90,.62),

            -7px 0 14px rgba(255,35,35,.74),
             7px 0 14px rgba(35,230,90,.74),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }

    65% {
        transform: scale(1.004);
    }
}

/* ПЛАВАННЯ БУСА */
@keyframes energyVanFloatReal7 {

    0%,
    100% {
        transform:
            translate3d(
                0,
                2px,
                0
            );
    }

    25% {
        transform:
            translate3d(
                -2px,
                -3px,
                0
            );
    }

    50% {
        transform:
            translate3d(
                1px,
                -8px,
                0
            );
    }

    75% {
        transform:
            translate3d(
                2px,
                -3px,
                0
            );
    }
}

@media (max-width: 600px) {

    .hero-van-ring {
        border-width:
            4px !important;

        box-shadow:
            -10px 0 19px rgba(255,35,35,.38),
             10px 0 19px rgba(35,230,90,.38),

            inset 0 0 0 6px #292b2b,
            inset 0 0 24px rgba(0,0,0,.72) !important;
    }

}

.hero-van-ring {
    border: 5px solid transparent !important;

    background:
        radial-gradient(
            circle,
            #151717 0%,
            #090a0a 62%,
            #020303 100%
        ) padding-box,

        linear-gradient(
            90deg,
            #20df55 0%,
            #2cff65 48.5%,
            #ff3030 51.5%,
            #ff2020 100%
        ) border-box !important;

    box-shadow:
        -12px 0 24px rgba(32,223,85,.48),
         12px 0 24px rgba(255,40,40,.48),

        -5px 0 10px rgba(32,223,85,.62),
         5px 0 10px rgba(255,40,40,.62),

        inset 0 0 0 7px #292b2b,
        inset 0 0 28px rgba(0,0,0,.72) !important;

    filter: none !important;

    animation:
        vanSideGlowLR
        1.8s
        ease-in-out
        infinite !important;
}

/* старі pseudo ефекти точно вимикаємо */
.hero-van-ring::before,
.hero-van-ring::after {
    content: none !important;
}

@keyframes vanSideGlowLR {

    0%, 100% {
        transform: scale(1);

        box-shadow:
            -12px 0 22px rgba(32,223,85,.38),
             12px 0 22px rgba(255,40,40,.38),

            -4px 0 8px rgba(32,223,85,.52),
             4px 0 8px rgba(255,40,40,.52),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }

    50% {
        transform: scale(1.012);

        box-shadow:
            -17px 0 34px rgba(32,223,85,.68),
             17px 0 34px rgba(255,40,40,.68),

            -6px 0 13px rgba(32,223,85,.78),
             6px 0 13px rgba(255,40,40,.78),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }
}

/*
   Розмір та внутрішній дизайн НЕ чіпаємо.
   Підсилюємо тільки світіння від обідка.
*/

.hero-van-ring {
    box-shadow:

        -9px 0 18px rgba(32, 223, 85, .48),
        -16px 0 34px rgba(32, 223, 85, .30),
        -25px 0 58px rgba(32, 223, 85, .15),

         9px 0 18px rgba(255, 40, 40, .48),
         16px 0 34px rgba(255, 40, 40, .30),
         25px 0 58px rgba(255, 40, 40, .15),

        /* INNER WHEEL */
        inset 0 0 0 7px #292b2b,
        inset 0 0 28px rgba(0,0,0,.72)

        !important;

    animation:
        vanEnergyGlowPulse
        2.2s
        ease-in-out
        infinite !important;
}

/* Плавне "дихання" світіння */

@keyframes vanEnergyGlowPulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:

            -8px 0 16px rgba(32,223,85,.38),
            -14px 0 29px rgba(32,223,85,.23),
            -22px 0 48px rgba(32,223,85,.11),

             8px 0 16px rgba(255,40,40,.38),
             14px 0 29px rgba(255,40,40,.23),
             22px 0 48px rgba(255,40,40,.11),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }

    50% {
        transform: scale(1.012);

        box-shadow:

            -11px 0 22px rgba(32,223,85,.62),
            -20px 0 42px rgba(32,223,85,.38),
            -30px 0 66px rgba(32,223,85,.19),

             11px 0 22px rgba(255,40,40,.62),
             20px 0 42px rgba(255,40,40,.38),
             30px 0 66px rgba(255,40,40,.19),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }
}

/* На телефоні трохи компактніше світіння */

@media (max-width: 600px) {

    .hero-van-ring {
        box-shadow:

            -7px 0 14px rgba(32,223,85,.48),
            -13px 0 27px rgba(32,223,85,.27),

             7px 0 14px rgba(255,40,40,.48),
             13px 0 27px rgba(255,40,40,.27),

            inset 0 0 0 6px #292b2b,
            inset 0 0 24px rgba(0,0,0,.72)

            !important;
    }

}

/* ---------------------------------------------------------
   ОБІДОК
   --------------------------------------------------------- */

.hero-van-ring {
    border: 5px solid transparent !important;

    background:
        radial-gradient(
            circle,
            #151717 0%,
            #090a0a 62%,
            #020303 100%
        ) padding-box,

        linear-gradient(
            90deg,
            #22e65d 0%,
            #32ff70 49%,
            #ff4040 51%,
            #ff2525 100%
        ) border-box !important;

    box-shadow:

        -7px 0 12px rgba(34,230,93,.80),
        -14px 0 28px rgba(34,230,93,.52),
        -24px 0 48px rgba(34,230,93,.26),

         7px 0 12px rgba(255,37,37,.80),
         14px 0 28px rgba(255,37,37,.52),
         24px 0 48px rgba(255,37,37,.26),

        inset 0 0 0 7px #292b2b,
        inset 0 0 28px rgba(0,0,0,.72)

        !important;

    overflow: visible !important;

    /*
       тільки glow-пульсація.
       Машинку ця animation більше НЕ рухає.
    */
    animation:
        speedVanRimBreath
        2.2s
        ease-in-out
        infinite
        !important;
}

/* старі pseudo-ефекти не заважають */
.hero-van-ring::before,
.hero-van-ring::after {
    content: none !important;
}

/* ---------------------------------------------------------
   МАШИНКА — ОКРЕМА АНІМАЦІЯ
   --------------------------------------------------------- */

.hero-van-image {
    position: relative !important;

    z-index: 5 !important;

    width: 72% !important;
    max-width: 72% !important;

    /*
       дуже важливо:
       перебиваємо всі старі animation
    */
    animation:
        speedVanRealFloat
        2.8s
        ease-in-out
        infinite
        !important;

    transform-origin:
        50%
        70% !important;

    will-change: transform !important;

    filter:
        drop-shadow(
            0
            12px
            14px
            rgba(0,0,0,.58)
        )
        !important;
}

/* ---------------------------------------------------------
   РЕАЛЬНЕ ПЛАВАННЯ
   --------------------------------------------------------- */

@keyframes speedVanRealFloat {

    0% {
        transform:
            translate3d(0, 5px, 0)
            scale(1);
    }

    25% {
        transform:
            translate3d(-2px, 0, 0)
            scale(1.01);
    }

    50% {
        transform:
            translate3d(1px, -12px, 0)
            scale(1.025);
    }

    75% {
        transform:
            translate3d(2px, -3px, 0)
            scale(1.012);
    }

    100% {
        transform:
            translate3d(0, 5px, 0)
            scale(1);
    }
}

/* ---------------------------------------------------------
   ОБІДОК "ДИХАЄ"
   --------------------------------------------------------- */

@keyframes speedVanRimBreath {

    0%,
    100% {
        transform: scale(1);

        box-shadow:

            -6px 0 11px rgba(34,230,93,.65),
            -12px 0 24px rgba(34,230,93,.40),
            -20px 0 42px rgba(34,230,93,.20),

             6px 0 11px rgba(255,37,37,.65),
             12px 0 24px rgba(255,37,37,.40),
             20px 0 42px rgba(255,37,37,.20),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }

    50% {
        transform: scale(1.012);

        box-shadow:

            -9px 0 16px rgba(34,230,93,.95),
            -18px 0 36px rgba(34,230,93,.64),
            -30px 0 60px rgba(34,230,93,.32),

             9px 0 16px rgba(255,37,37,.95),
             18px 0 36px rgba(255,37,37,.64),
             30px 0 60px rgba(255,37,37,.32),

            inset 0 0 0 7px #292b2b,
            inset 0 0 28px rgba(0,0,0,.72);
    }
}

@media (max-width: 600px) {

    .hero-van-image {
        animation:
            speedVanRealFloatMobile
            2.8s
            ease-in-out
            infinite
            !important;
    }

}

@keyframes speedVanRealFloatMobile {

    0%,
    100% {
        transform:
            translate3d(0, 3px, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            scale(1.018);
    }
}

.hero-call-pane {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.hero-call-pane.is-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    align-items: center;
    justify-content: center;

    animation:
        ssV7PaneIn
        .55s
        ease
        both !important;
}

/* справжня існуюча кнопка */
.hero-call-pane-wheel #openCall {
    margin: 0 !important;
}

.ss-v7-button {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.ss-v7-art {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    will-change: transform;

    animation:
        ssV7Float
        3s
        ease-in-out
        infinite;
}

/* плавна поява при перемиканні */
@keyframes ssV7PaneIn {

    from {
        opacity: 0;
        transform: scale(.965);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes ssV7Float {

    0%,
    100% {
        transform:
            translate3d(0, 3px, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0, -6px, 0)
            scale(1.012);
    }

}

.ss-v7-art-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    overflow: visible;

    isolation: isolate;
}

/* Основна картинка повністю нерухома */
.ss-v7-art {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    z-index: 2;

    animation: none !important;
    transform: none !important;
}

/* =========================================================
   ДРУГА КОПІЯ — ЛИШЕ ЗОВНІШНІЙ ВОГНЯНИЙ ОБІДОК
   ========================================================= */

.ss-v7-fire-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 3;

    pointer-events: none;

    transform-origin: 50% 50%;

    /*
       Вирізаємо середину.
       Від другої картинки лишається
       ТІЛЬКИ зовнішнє полум'я.
    */
    -webkit-mask-image:
        radial-gradient(
            circle at center,
            transparent 0%,
            transparent 68%,
            #000 75%,
            #000 100%
        );

    mask-image:
        radial-gradient(
            circle at center,
            transparent 0%,
            transparent 68%,
            #000 75%,
            #000 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    will-change:
        transform,
        filter,
        opacity;
}

/* =========================================================
   FIRE LAYER A
   Повільний рух язиків по колу
   ========================================================= */

.ss-v7-fire-layer-a {
    opacity: .82;

    animation:
        ssV7FireMoveA
        2.4s
        ease-in-out
        infinite;
}

@keyframes ssV7FireMoveA {

    0% {
        transform:
            rotate(-2deg)
            scale(.995);

        opacity: .67;

        filter:
            brightness(1.0)
            saturate(1.05);
    }

    28% {
        transform:
            rotate(1.6deg)
            scale(1.018);

        opacity: .92;

        filter:
            brightness(1.22)
            saturate(1.20);
    }

    55% {
        transform:
            rotate(-.8deg)
            scale(1.006);

        opacity: .74;

        filter:
            brightness(1.08)
            saturate(1.10);
    }

    78% {
        transform:
            rotate(2.8deg)
            scale(1.024);

        opacity: 1;

        filter:
            brightness(1.30)
            saturate(1.28);
    }

    100% {
        transform:
            rotate(-2deg)
            scale(.995);

        opacity: .67;

        filter:
            brightness(1.0)
            saturate(1.05);
    }
}

/* =========================================================
   FIRE LAYER B
   Друга копія рухається інакше.
   Саме це прибирає відчуття статичної картинки.
   ========================================================= */

.ss-v7-fire-layer-b {
    opacity: .32;

    filter: blur(4px);

    animation:
        ssV7FireMoveB
        1.55s
        ease-in-out
        infinite alternate;
}

@keyframes ssV7FireMoveB {

    from {
        transform:
            rotate(2deg)
            scale(1.01);

        opacity: .20;

        filter:
            blur(5px)
            brightness(1.15)
            saturate(1.20);
    }

    to {
        transform:
            rotate(-3deg)
            scale(1.045);

        opacity: .48;

        filter:
            blur(7px)
            brightness(1.38)
            saturate(1.38);
    }
}

/* =========================================================
   ЛЕГКЕ ПЛАВАННЯ ВСІЄЇ КНОПКИ
   Але значно слабше, ніж рух вогню.
   ========================================================= */

.hero-call-pane-van.is-active .ss-v7-art-wrap {
    animation:
        ssV7ButtonFloat
        3.6s
        ease-in-out
        infinite;
}

@keyframes ssV7ButtonFloat {

    0%,
    100% {
        transform:
            translate3d(0, 2px, 0);
    }

    50% {
        transform:
            translate3d(0, -5px, 0);
    }
}

@media (max-width: 600px) {

    .ss-v7-fire-layer {
        -webkit-mask-image:
            radial-gradient(
                circle at center,
                transparent 0%,
                transparent 67%,
                #000 75%,
                #000 100%
            );

        mask-image:
            radial-gradient(
                circle at center,
                transparent 0%,
                transparent 67%,
                #000 75%,
                #000 100%
            );
    }

}

/*
   Fire asset already contains ONLY the outer fire.
   Therefore NO radial mask is needed anymore.
*/

.ss-v7-fire-layer {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    z-index: 4 !important;

    pointer-events: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform-origin: 50% 50% !important;

    will-change:
        transform,
        opacity,
        filter !important;
}

/* ---------------------------------------------------------
   ПЕРШИЙ ШАР —
   рухаються всі язики по всьому колу
   --------------------------------------------------------- */

.ss-v7-fire-layer-a {
    opacity: .90 !important;

    animation:
        ssWholeFireAliveA
        1.65s
        ease-in-out
        infinite !important;
}

@keyframes ssWholeFireAliveA {

    0% {
        transform:
            translate3d(-1px, 1px, 0)
            scale(.995)
            rotate(-.7deg);

        opacity: .72;

        filter:
            brightness(.95)
            saturate(1.05);
    }

    20% {
        transform:
            translate3d(1px, -2px, 0)
            scale(1.018)
            rotate(.8deg);

        opacity: .94;

        filter:
            brightness(1.16)
            saturate(1.16);
    }

    42% {
        transform:
            translate3d(-2px, -1px, 0)
            scale(1.006)
            rotate(-1deg);

        opacity: .80;
    }

    63% {
        transform:
            translate3d(2px, 1px, 0)
            scale(1.026)
            rotate(1.15deg);

        opacity: 1;

        filter:
            brightness(1.27)
            saturate(1.26);
    }

    82% {
        transform:
            translate3d(-1px, -2px, 0)
            scale(1.012)
            rotate(-.4deg);

        opacity: .84;
    }

    100% {
        transform:
            translate3d(-1px, 1px, 0)
            scale(.995)
            rotate(-.7deg);

        opacity: .72;
    }
}

/* ---------------------------------------------------------
   ДРУГИЙ ШАР —
   м'який ореол рухається незалежно
   --------------------------------------------------------- */

.ss-v7-fire-layer-b {
    opacity: .36 !important;

    animation:
        ssWholeFireAliveB
        1.05s
        ease-in-out
        infinite alternate !important;
}

@keyframes ssWholeFireAliveB {

    from {
        transform:
            translate3d(2px, -1px, 0)
            scale(1.015)
            rotate(1deg);

        opacity: .22;

        filter:
            blur(4px)
            brightness(1.15)
            saturate(1.18);
    }

    to {
        transform:
            translate3d(-2px, 2px, 0)
            scale(1.055)
            rotate(-1.3deg);

        opacity: .52;

        filter:
            blur(7px)
            brightness(1.40)
            saturate(1.38);
    }
}

/* ---------------------------------------------------------
   ОСНОВНИЙ APPROVED DESIGN НЕ РУХАЄМО
   --------------------------------------------------------- */

.ss-v7-art {
    animation: none !important;
    transform: none !important;
}

/*
   Не рухаємо весь контейнер.
   Інакше бус і напис теж плавали б разом з полум'ям.
*/
.hero-call-pane-van.is-active .ss-v7-art-wrap {
    animation: none !important;
    transform: none !important;
}

@media (max-width: 600px) {

    .ss-v7-fire-layer-a {
        animation-duration: 1.8s !important;
    }

    .ss-v7-fire-layer-b {
        animation-duration: 1.2s !important;
    }

}

/* =========================================================
   SIMPLE FULL FIRE RING
   плавний вогонь по всьому колу кнопки
   ========================================================= */

/* ховаємо старі експерименти з fire-layer */
.ss-v7-fire-layer {
  display: none !important;
}

.ss-v7-button {
  position: relative !important;
  border-radius: 50% !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.ss-v7-art-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* основна кнопка/картинка */
.ss-v7-art {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  animation: none !important;
  transform: none !important;
}

/* м'який зовнішній ореол */
.ss-v7-art-wrap::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  z-index: 1;

  background:
    conic-gradient(
      from 0deg,
      #ff2a2a 0deg,
      #ff5a2a 40deg,
      #ff2a2a 90deg,
      #2fff74 180deg,
      #43ff8e 230deg,
      #2fff74 300deg,
      #ff2a2a 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 30px),
      #000 calc(100% - 18px),
      #000 calc(100% - 10px),
      transparent calc(100% - 2px)
    );
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 30px),
      #000 calc(100% - 18px),
      #000 calc(100% - 10px),
      transparent calc(100% - 2px)
    );

  filter: blur(12px) saturate(1.25);
  opacity: .95;

  animation:
    ssFireGlowSpin 7s linear infinite,
    ssFireGlowPulse 2.1s ease-in-out infinite;
}

/* чіткі язики полум'я */
.ss-v7-art-wrap::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  z-index: 2;

  background:
    repeating-conic-gradient(
      from 0deg,
      #ff3a3a 0deg 8deg,
      transparent 8deg 14deg,
      #37ff7d 14deg 22deg,
      transparent 22deg 28deg,
      #ff612b 28deg 34deg,
      transparent 34deg 40deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 12px),
      #000 calc(100% - 8px),
      transparent calc(100% - 2px)
    );
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 18px),
      #000 calc(100% - 12px),
      #000 calc(100% - 8px),
      transparent calc(100% - 2px)
    );

  filter:
    blur(2px)
    drop-shadow(0 0 6px rgba(255, 60, 60, .65))
    drop-shadow(0 0 6px rgba(55, 255, 125, .55));

  opacity: .96;

  animation:
    ssFireTonguesSpin 2.6s linear infinite,
    ssFireTonguesBreath 1.25s ease-in-out infinite alternate;
}

@keyframes ssFireGlowSpin {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1.02); }
}

@keyframes ssFireGlowPulse {
  0%,100% {
    opacity: .72;
    filter: blur(11px) saturate(1.15);
  }
  50% {
    opacity: 1;
    filter: blur(14px) saturate(1.4);
  }
}

@keyframes ssFireTonguesSpin {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(-360deg) scale(1.015); }
}

@keyframes ssFireTonguesBreath {
  0% {
    opacity: .78;
    filter:
      blur(1.5px)
      drop-shadow(0 0 4px rgba(255, 60, 60, .50))
      drop-shadow(0 0 4px rgba(55, 255, 125, .45));
  }
  100% {
    opacity: 1;
    filter:
      blur(3px)
      drop-shadow(0 0 8px rgba(255, 60, 60, .75))
      drop-shadow(0 0 8px rgba(55, 255, 125, .65));
  }
}

/* щоб вся кнопка трохи "жила" */
.hero-call-pane-van.is-active .ss-v7-button {
  animation: ssFireButtonFloat 3.2s ease-in-out infinite;
}

@keyframes ssFireButtonFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* =========================================================
   TRUE FIRE RING
   SVG turbulence + displacement
   ========================================================= */

/* Вимикаємо всі попередні fake-fire експерименти */

.ss-v7-fire-layer,
.ss-v7-art-wrap::before,
.ss-v7-art-wrap::after {
    display: none !important;
    content: none !important;
}

/* Контейнер */

.ss-v7-art-wrap {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;

    border-radius: 50% !important;
}

/* Approved design — нерухомий */

.ss-v7-art {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    z-index: 2 !important;

    animation: none !important;
    transform: none !important;

    pointer-events: none !important;
}

/* =========================================================
   SVG FIRE
   ========================================================= */

.ss-true-fire {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 111%;
    height: 111%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    overflow: visible;

    pointer-events: none;
}

/* всі лінії */

.ss-true-fire path {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.ss-fire-green {
    stroke: #2cff70;
}

.ss-fire-red {
    stroke: #ff3434;
}

/* =========================================================
   SOFT GLOW
   ========================================================= */

.ss-fire-glow {
    stroke-width: 17;

    opacity: .42;

    filter:
        url(#ssFireGlow);
}

/* =========================================================
   MAIN FLAME EDGE
   ========================================================= */

.ss-fire-core {
    stroke-width: 5.5;

    opacity: .96;

    filter:
        drop-shadow(
            0 0 5px
            currentColor
        )
        drop-shadow(
            0 0 11px
            currentColor
        );
}

/* =========================================================
   OUTER TIPS
   Це створює "язики", а не рівне кільце
   ========================================================= */

.ss-fire-tip {
    stroke-width: 2.8;

    stroke-dasharray:
        7
        13
        18
        9
        4
        15;

    opacity: .86;

    filter:
        drop-shadow(
            0 0 5px
            currentColor
        );

    animation:
        ssFireTipMove
        1.7s
        linear
        infinite;
}

.ss-fire-secondary {
    transform-origin:
        160px
        160px;

    animation:
        ssFireSecondaryMove
        2.2s
        ease-in-out
        infinite;
}

/* =========================================================
   FIRE LIFE
   ========================================================= */

@keyframes ssFireTipMove {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -66;
    }

}

@keyframes ssFireSecondaryMove {

    0%,
    100% {
        opacity: .60;

        transform:
            scale(.995)
            rotate(-.5deg);
    }

    33% {
        opacity: .96;

        transform:
            scale(1.025)
            rotate(.8deg);
    }

    67% {
        opacity: .72;

        transform:
            scale(1.008)
            rotate(-.8deg);
    }

}

/* весь glow дуже легко дихає */

.hero-call-pane-van.is-active
.ss-true-fire {
    animation:
        ssWholeFireBreath
        2s
        ease-in-out
        infinite;
}

@keyframes ssWholeFireBreath {

    0%,
    100% {
        opacity: .82;
    }

    50% {
        opacity: 1;
    }

}

@media (max-width: 600px) {

    .ss-true-fire {
        width: 108%;
        height: 108%;
    }

    .ss-fire-glow {
        stroke-width: 13;
    }

    .ss-fire-core {
        stroke-width: 4.5;
    }

}

/* =========================================================
   TRUE FIRE TUNE 2
   ближче до кнопки / виразніше / плавніше
   ========================================================= */

/* ближче до самого кола кнопки */
.ss-true-fire {
    width: 101% !important;
    height: 101% !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

/* м'який загальний glow */
.ss-fire-glow {
    stroke-width: 22 !important;
    opacity: .58 !important;
}

/* основний контур полум'я - більш виразний */
.ss-fire-core {
    stroke-width: 7.2 !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 7px currentColor)
        drop-shadow(0 0 16px currentColor)
        drop-shadow(0 0 24px currentColor) !important;
}

/* зовнішні "язики" - більші і плавніші */
.ss-fire-tip {
    stroke-width: 4.2 !important;
    stroke-dasharray: 18 18 30 16 12 18 !important;
    opacity: .92 !important;
    filter:
        drop-shadow(0 0 7px currentColor)
        drop-shadow(0 0 14px currentColor) !important;
    animation: ssFireTipMoveSmooth 3.4s linear infinite !important;
}

/* другий контур дихає спокійніше */
.ss-fire-secondary {
    animation: ssFireSecondaryMoveSmooth 3.8s ease-in-out infinite !important;
}

/* вся обводка дуже легко "дихає" */
.hero-call-pane-van.is-active .ss-true-fire {
    animation: ssWholeFireBreathSmooth 3.1s ease-in-out infinite !important;
}

@keyframes ssFireTipMoveSmooth {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -84;
    }
}

@keyframes ssFireSecondaryMoveSmooth {
    0%, 100% {
        opacity: .72;
        transform: scale(.998) rotate(-.35deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.02) rotate(.35deg);
    }
}

@keyframes ssWholeFireBreathSmooth {
    0%, 100% {
        opacity: .88;
        filter: saturate(1.02);
    }
    50% {
        opacity: 1;
        filter: saturate(1.18);
    }
}

/* мобілка */
@media (max-width: 600px) {
    .ss-true-fire {
        width: 100.5% !important;
        height: 100.5% !important;
    }

    .ss-fire-glow {
        stroke-width: 18 !important;
    }

    .ss-fire-core {
        stroke-width: 6 !important;
    }

    .ss-fire-tip {
        stroke-width: 3.8 !important;
    }
}

/* прибиваємо всі старі експерименти */
.ss-true-fire,
.ss-v7-fire-layer {
  display: none !important;
}

.ss-v7-art-wrap::before,
.ss-v7-art-wrap::after {
  content: "" !important;
  display: block !important;
}

.ss-v7-button {
  position: relative !important;
  border-radius: 50% !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.ss-v7-art-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.ss-v7-art {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   OUTER SOFT HALO
   --------------------------------------------------------- */
.ss-v7-art-wrap::before {
  position: absolute !important;
  inset: -7% !important;
  border-radius: 50% !important;
  z-index: 1 !important;

  background:
    conic-gradient(
      from 180deg,
      rgba(40,255,110,.95) 0deg,
      rgba(65,255,150,.90) 70deg,
      rgba(255,220,70,.55) 90deg,
      rgba(255,90,90,.88) 180deg,
      rgba(255,60,60,.95) 270deg,
      rgba(255,220,70,.55) 290deg,
      rgba(40,255,110,.95) 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 60%,
      #000 67%,
      #000 73%,
      transparent 79%
    );
  mask:
    radial-gradient(
      circle,
      transparent 60%,
      #000 67%,
      #000 73%,
      transparent 79%
    );

  filter: blur(14px) saturate(1.18) !important;
  opacity: .92 !important;

  animation:
    ssV7HaloRotate 8s linear infinite,
    ssV7HaloPulse 2.8s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   INNER SHARP RING
   --------------------------------------------------------- */
.ss-v7-art-wrap::after {
  position: absolute !important;
  inset: -1.6% !important;
  border-radius: 50% !important;
  z-index: 2 !important;

  background:
    conic-gradient(
      from 180deg,
      #32ff7a 0deg,
      #40ff8a 80deg,
      #ffd94d 92deg,
      #ff4a4a 180deg,
      #ff3838 280deg,
      #ffd94d 292deg,
      #32ff7a 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 67.8%,
      #000 70.6%,
      #000 72.4%,
      transparent 74.8%
    );
  mask:
    radial-gradient(
      circle,
      transparent 67.8%,
      #000 70.6%,
      #000 72.4%,
      transparent 74.8%
    );

  filter:
    blur(2px)
    drop-shadow(0 0 8px rgba(50,255,122,.35))
    drop-shadow(0 0 8px rgba(255,72,72,.35)) !important;

  opacity: .98 !important;

  animation:
    ssV7HaloRotateReverse 12s linear infinite,
    ssV7HaloPulse2 3.2s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   VERY LIGHT FLOAT
   --------------------------------------------------------- */
.hero-call-pane-van.is-active .ss-v7-button {
  animation: ssV7Float 3.6s ease-in-out infinite !important;
}

@keyframes ssV7HaloRotate {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1.01); }
}

@keyframes ssV7HaloRotateReverse {
  from { transform: rotate(360deg) scale(1); }
  to   { transform: rotate(0deg) scale(1.005); }
}

@keyframes ssV7HaloPulse {
  0%, 100% {
    opacity: .78;
    filter: blur(12px) saturate(1.05);
  }
  50% {
    opacity: 1;
    filter: blur(16px) saturate(1.24);
  }
}

@keyframes ssV7HaloPulse2 {
  0%, 100% {
    opacity: .86;
  }
  50% {
    opacity: 1;
  }
}

@keyframes ssV7Float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* мобілка */
@media (max-width: 600px) {
  .ss-v7-art-wrap::before {
    inset: -6% !important;
    filter: blur(11px) saturate(1.14) !important;
  }

  .ss-v7-art-wrap::after {
    inset: -1.2% !important;
  }
}

/* CLEAN HERO + CLOCK FINAL START */

/* =========================================================
   ЧОРНА КНОПКА — БЕЗ БУСА / FIRE
   ========================================================= */

.call-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#openCall {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(320px, 78vw) !important;
    height: min(320px, 78vw) !important;

    padding: 0 !important;
    margin: 22px auto !important;

    border-radius: 50% !important;

    border: 4px solid #ffd600 !important;

    background:
        radial-gradient(
            circle,
            #151717 0%,
            #090a0a 58%,
            #020303 100%
        ) !important;

    box-shadow:
        0 0 13px rgba(255,214,0,.72),
        0 0 34px rgba(255,214,0,.28),
        inset 0 0 30px rgba(0,0,0,.72)
        !important;

    color: #fff !important;

    animation: none !important;
    transform: none !important;

    overflow: visible !important;
}

/* сіра шинна риска */
#openCall::before {
    content: "" !important;

    position: absolute !important;

    inset: 19px !important;

    border-radius: 50% !important;

    border:
        9px dashed
        rgba(150,150,150,.45)
        !important;

    background: transparent !important;

    animation: none !important;

    pointer-events: none !important;
}

/* внутрішнє тонке жовте кільце */
#openCall::after {
    content: "" !important;

    position: absolute !important;

    inset: 52px !important;

    border-radius: 50% !important;

    border:
        2px solid
        rgba(255,214,0,.92)
        !important;

    background: transparent !important;

    animation: none !important;

    pointer-events: none !important;
}

#openCall .wheel-center-copy {
    position: relative !important;

    z-index: 4 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    text-align: center !important;
}

#openCall .wheel-big {
    color: #fff !important;

    font-weight: 1000 !important;

    line-height: .95 !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.8)
        !important;
}

/* =========================================================
   ГОДИННИК — 60 РИСОК ПО САМОМУ КРАЮ
   Розмір самого годинника НЕ ЧІПАЄМО.
   ========================================================= */

/*
   Ховаємо старі DOM-ticks, щоб вони
   не конфліктували з новими.
*/
.speed-clock-card .clock-ticks {
    display: none !important;
}

/* 60 тонких білих рисок */
.speed-clock-card .service-clock::before {
    content: "" !important;

    position: absolute !important;

    inset: 4px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,

            rgba(242,245,245,.95)
                0deg 1.15deg,

            transparent
                1.15deg 6deg
        )
        !important;

    -webkit-mask:
        radial-gradient(
            circle,

            transparent 0 80%,

            #000 81% 100%
        )
        !important;

    mask:
        radial-gradient(
            circle,

            transparent 0 80%,

            #000 81% 100%
        )
        !important;

    z-index: 2 !important;

    opacity: .92 !important;

    pointer-events: none !important;
}

/* кожна п'ята — довша жовта */
.speed-clock-card .service-clock::after {
    content: "" !important;

    position: absolute !important;

    inset: 3px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,

            #ffd600
                0deg 2.2deg,

            transparent
                2.2deg 30deg
        )
        !important;

    -webkit-mask:
        radial-gradient(
            circle,

            transparent 0 75%,

            #000 76% 100%
        )
        !important;

    mask:
        radial-gradient(
            circle,

            transparent 0 75%,

            #000 76% 100%
        )
        !important;

    z-index: 3 !important;

    pointer-events: none !important;

    filter:
        drop-shadow(
            0 0 2px
            rgba(255,214,0,.55)
        )
        !important;
}

/* цифри / стрілки точно поверх рисок */
.speed-clock-card .clock-num {
    z-index: 5 !important;
}

.speed-clock-card .clock-hand {
    z-index: 7 !important;
}

.speed-clock-card .clock-pin {
    z-index: 9 !important;
}

@media (max-width: 600px) {

    #openCall {
        width: min(290px, 82vw) !important;
        height: min(290px, 82vw) !important;
    }

}

/* CLEAN HERO + CLOCK FINAL END */

/* =========================================
   CLOCK 60 TICKS — RESTORE
   ========================================= */

.speed-clock-card .clock-ticks {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 50% !important;

    z-index: 4 !important;
    pointer-events: none !important;
}

/* 60 дрібних рисок */
.speed-clock-card .clock-tick {
    position: absolute !important;

    left: 50% !important;
    top: 3px !important;

    width: 2px !important;
    height: 7px !important;

    margin-left: -1px !important;

    border-radius: 999px !important;

    background: rgba(245,245,245,.90) !important;

    transform-origin:
        1px
        86px !important;

    box-shadow:
        0 0 2px rgba(255,255,255,.22) !important;

    opacity: 1 !important;
}

/* кожна п'ята — довша жовта */
.speed-clock-card .clock-tick-major {
    top: 2px !important;

    width: 3px !important;
    height: 11px !important;

    margin-left: -1.5px !important;

    background: #ffd600 !important;

    transform-origin:
        1.5px
        87px !important;

    box-shadow:
        0 0 5px rgba(255,214,0,.60) !important;
}

/* на меншому годиннику */
@media (max-width: 1100px) {

    .speed-clock-card .clock-tick {
        top: 3px !important;

        transform-origin:
            1px
            76px !important;
    }

    .speed-clock-card .clock-tick-major {
        top: 2px !important;

        transform-origin:
            1.5px
            77px !important;
    }
}

.seo-service .seo-service-link {
    color: inherit;
    text-decoration: none;
}

.seo-service .seo-service-link:hover,
.seo-service .seo-service-link:focus-visible {
    text-decoration: underline;
}

.seo-station .seo-inline-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.seo-related-hub {
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.seo-related-hub h2 {
    margin-top: 0;
}

.seo-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.seo-related-links a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #ffd400;
    background: rgba(255,255,255,.025);
    font-weight: 700;
    text-decoration: none;
}

.seo-related-links a:hover,
.seo-related-links a:focus-visible {
    border-color: rgba(255,212,0,.42);
    background: rgba(255,212,0,.055);
}

@media (max-width: 600px) {
    .seo-related-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .seo-related-links a {
        width: 100%;
        box-sizing: border-box;
    }
}

body.master-green-red{
    --master-green:#76df00;
    --master-green-hot:#8cff20;
    --master-red:#ff2929;
    --master-red-hot:#ff4848;
    --master-panel:#101312;
    --master-panel-2:#151817;

    background:
        radial-gradient(circle at 8% 0%,rgba(118,223,0,.09),transparent 27rem),
        radial-gradient(circle at 96% 8%,rgba(255,41,41,.075),transparent 30rem),
        #080a09 !important;
}

/* ===== LAYOUT ===== */

body.master-green-red .master-layout{
    background:transparent !important;
}

body.master-green-red .sidebar{
    background:
        radial-gradient(circle at 0 0,rgba(118,223,0,.08),transparent 18rem),
        #090c0a !important;

    border-right:
        1px solid rgba(118,223,0,.16) !important;

    box-shadow:
        14px 0 40px rgba(0,0,0,.18);
}

body.master-green-red .main{
    background:
        radial-gradient(circle at 100% 0,rgba(255,41,41,.045),transparent 30rem);
}

/* ===== BRAND ===== */

body.master-green-red .brand .speed{
    color:var(--master-green) !important;
    text-shadow:0 0 20px rgba(118,223,0,.12);
}

body.master-green-red .brand .service{
    color:var(--master-red) !important;
    text-shadow:0 0 20px rgba(255,41,41,.11);
}

body.master-green-red .master-title{
    color:#fff !important;
    letter-spacing:-.035em;
}

body.master-green-red .eyebrow{
    color:var(--master-green) !important;
}

/* ===== SIDEBAR BUTTONS ===== */

body.master-green-red .sidebar button,
body.master-green-red .sidebar .pill,
body.master-green-red .sidebar a{
    border-color:rgba(255,255,255,.10) !important;
}

body.master-green-red .sidebar button:hover,
body.master-green-red .sidebar .pill:hover,
body.master-green-red .sidebar a:hover{
    border-color:rgba(118,223,0,.40) !important;

    box-shadow:
        -4px 0 15px rgba(118,223,0,.08),
         4px 0 15px rgba(255,41,41,.05);
}

/* ===== REQUEST CARDS ===== */

body.master-green-red .request-card{
    position:relative;

    background:
        linear-gradient(
            #111412,
            #0f1210
        ) padding-box,

        linear-gradient(
            115deg,
            rgba(118,223,0,.38),
            rgba(255,255,255,.07) 45%,
            rgba(255,41,41,.34)
        ) border-box !important;

    border:1px solid transparent !important;

    box-shadow:
        -6px 0 24px rgba(118,223,0,.035),
         6px 0 24px rgba(255,41,41,.035),
         0 18px 44px rgba(0,0,0,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

body.master-green-red .request-card:hover{
    transform:translateY(-1px);

    box-shadow:
        -8px 0 28px rgba(118,223,0,.07),
         8px 0 28px rgba(255,41,41,.06),
         0 22px 50px rgba(0,0,0,.24);
}

/* НОВА ЗАЯВКА */

body.master-green-red .request-card.new{
    background:
        linear-gradient(
            110deg,
            rgba(118,223,0,.09),
            #101311 34%,
            #101211 72%,
            rgba(255,41,41,.045)
        ) padding-box,

        linear-gradient(
            110deg,
            var(--master-green),
            rgba(118,223,0,.30) 45%,
            rgba(255,41,41,.50)
        ) border-box !important;

    box-shadow:
        -8px 0 30px rgba(118,223,0,.10),
         6px 0 24px rgba(255,41,41,.045)
        !important;
}

/* ===== DATA CELLS ===== */

body.master-green-red .data-cell{
    background:
        rgba(255,255,255,.035) !important;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:14px;
}

body.master-green-red .data-cell small{
    color:#8e9693 !important;
}

/* ===== PHONE ===== */

body.master-green-red .request-phone{
    color:#fff !important;

    text-decoration:none;

    transition:.16s ease;
}

body.master-green-red .request-phone:hover{
    color:var(--master-green-hot) !important;
}

/* ===== STATUS BADGE ===== */

body.master-green-red .status{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(118,223,0,.11),
            rgba(255,41,41,.07)
        ) !important;

    border:
        1px solid rgba(118,223,0,.20);
}

/* ===== STATUS BUTTONS ===== */

body.master-green-red .status-actions button{
    background:
        #171a18 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    color:#fff !important;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background .15s ease;
}

body.master-green-red .status-actions button:hover{
    border-color:
        var(--master-green) !important;

    background:
        rgba(118,223,0,.07) !important;

    transform:
        translateY(-1px);
}

/* остання destructive дія */
body.master-green-red .status-actions button:last-child:hover{
    border-color:
        var(--master-red) !important;

    background:
        rgba(255,41,41,.07) !important;
}

/* ===== PRIMARY / SECONDARY ===== */

body.master-green-red .primary{
    border:
        1px solid transparent !important;

    color:#fff !important;

    background:
        linear-gradient(
            #0d100e,
            #0d100e
        ) padding-box,

        linear-gradient(
            90deg,
            var(--master-green),
            var(--master-red)
        ) border-box !important;

    box-shadow:
        -5px 0 18px rgba(118,223,0,.09),
         5px 0 18px rgba(255,41,41,.08);
}

body.master-green-red .primary:hover{
    box-shadow:
        -7px 0 22px rgba(118,223,0,.14),
         7px 0 22px rgba(255,41,41,.12);
}

body.master-green-red .secondary{
    background:#171a18 !important;

    border-color:
        rgba(255,255,255,.11) !important;
}

/* ===== FINANCE ===== */

body.master-green-red .finance-history,
body.master-green-red .finance-card,
body.master-green-red .finance-summary{
    background:
        linear-gradient(
            120deg,
            rgba(118,223,0,.035),
            rgba(255,41,41,.025)
        ),
        #101311 !important;

    border-color:
        rgba(118,223,0,.14) !important;
}

/* ===== MAP ===== */

body.master-green-red .master-map,
body.master-green-red .map-wrap,
body.master-green-red [class*="map-card"]{
    border-color:
        rgba(118,223,0,.20) !important;

    box-shadow:
        -4px 0 18px rgba(118,223,0,.04),
         4px 0 18px rgba(255,41,41,.04);
}

/* ===== LOGIN ===== */

body.master-green-red .login-overlay{
    background:
        radial-gradient(circle at 20% 20%,rgba(118,223,0,.12),transparent 28rem),
        radial-gradient(circle at 85% 80%,rgba(255,41,41,.10),transparent 30rem),
        #070908 !important;
}

body.master-green-red .login-card{
    border:
        1px solid transparent !important;

    background:
        linear-gradient(
            #101311,
            #0d100e
        ) padding-box,

        linear-gradient(
            120deg,
            var(--master-green),
            rgba(255,255,255,.10) 48%,
            var(--master-red)
        ) border-box !important;

    box-shadow:
        -14px 0 45px rgba(118,223,0,.08),
         14px 0 45px rgba(255,41,41,.07),
         0 30px 90px rgba(0,0,0,.52);
}

/* INPUTS */

body.master-green-red input,
body.master-green-red textarea,
body.master-green-red select{
    background:#151816 !important;

    border-color:
        rgba(255,255,255,.10) !important;
}

body.master-green-red input:focus,
body.master-green-red textarea:focus,
body.master-green-red select:focus{
    border-color:
        rgba(118,223,0,.58) !important;

    box-shadow:
        -2px 0 0 rgba(118,223,0,.18),
         2px 0 0 rgba(255,41,41,.10)
        !important;
}

/* ===== TOAST / LIVE MESSAGE ===== */

body.master-green-red .toast{
    color:#fff !important;

    border:
        1px solid transparent;

    background:
        linear-gradient(
            #101311,
            #101311
        ) padding-box,

        linear-gradient(
            90deg,
            var(--master-green),
            var(--master-red)
        ) border-box !important;

    box-shadow:
        -8px 0 25px rgba(118,223,0,.10),
         8px 0 25px rgba(255,41,41,.09),
         0 20px 60px rgba(0,0,0,.55)
        !important;
}

/* ===== PHOTO ===== */

body.master-green-red .photo-thumb{
    border:
        1px solid rgba(118,223,0,.18);

    box-shadow:
        5px 5px 20px rgba(255,41,41,.035);
}

@media(max-width:820px){

    body.master-green-red .sidebar{
        border-right:0 !important;

        border-bottom:
            1px solid rgba(118,223,0,.15) !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.17);
    }

    body.master-green-red .main{
        padding:
            16px !important;
    }

    body.master-green-red .request-card{
        border-radius:
            17px !important;

        padding:
            15px !important;
    }

    body.master-green-red .request-data{
        grid-template-columns:
            1fr !important;
    }

    body.master-green-red .status-actions{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.master-green-red .status-actions button{
        width:
            100%;
    }
}