/* The default home visual shares one canvas with the hero copy. Admin-authored
   slide pictures retain their existing carousel presentation. */
.tsh1-home--glass .tsh1-hero.tsn-home-hero {
  background:
    radial-gradient(ellipse 48% 75% at 76% 48%, rgba(255, 255, 255, .86), transparent 100%),
    linear-gradient(115deg, #f5f8fb 4%, #eaf1f7 58%, #e0eaf3 100%);
}

.tsh1-home--glass .tsh1-hero__copy,
.tsh1-home--glass .tsh1-hero__media,
.tsh1-home--glass .tsh1-home-slide.is-fallback {
  background: transparent;
}

.tsh1-home--glass .tsh1-home-slide.is-fallback .tsh1-home-slide__picture {
  display: none;
}

.tsh1-home--glass .tsh1-ecosystem {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #1b2938;
  pointer-events: none;
  user-select: none;
}

.tsh1-home--glass .tsh1-ecosystem::before {
  position: absolute;
  inset: 10% 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .58), transparent 65%);
  content: '';
}

.tsh1-home--glass .tsh1-ecosystem__paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #aebfce;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .7;
}

.tsh1-home--glass .tsh1-ecosystem__paths .tsh1-ecosystem__energy {
  display: none;
  stroke: #bd2133;
  stroke-width: 3.5;
  stroke-dasharray: 16 84;
  opacity: 0;
}

.tsh1-home--glass .tsh1-ecosystem__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 144px;
  height: 144px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 31px;
  background: linear-gradient(145deg, #263a4d, #172534);
  box-shadow: 0 17px 38px rgba(26, 46, 66, .19);
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}

.tsh1-home--glass .tsh1-ecosystem__core::after {
  position: absolute;
  inset: -22px;
  border: 1px solid rgba(184, 31, 48, .14);
  border-top-color: rgba(184, 31, 48, .68);
  border-bottom-color: rgba(184, 31, 48, .4);
  border-radius: 50%;
  content: '';
  opacity: .7;
  pointer-events: none;
}

.tsh1-home--glass .tsh1-ecosystem__core::before {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(185, 26, 43, .37);
  border-radius: 39px;
  content: '';
  opacity: .48;
  pointer-events: none;
}

.tsh1-home--glass .tsh1-ecosystem__emblem {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #edf2f8);
  box-shadow: 0 9px 20px rgba(8, 16, 27, .22);
}

.tsh1-home--glass .tsh1-ecosystem__emblem img {
  display: block;
  position: static;
  width: 39px;
  max-width: 39px;
  height: 39px;
  max-height: 39px;
  object-fit: contain;
  transform: none;
}

.tsh1-home--glass .tsh1-ecosystem__core-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
}

.tsh1-home--glass .tsh1-ecosystem__node {
  position: absolute;
  display: flex;
  width: 128px;
  min-height: 100px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 9px 5px 8px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 16px;
  background: rgba(249, 252, 255, .78);
  box-shadow: 0 10px 26px rgba(49, 74, 97, .09);
  text-align: center;
  transform: translate(-50%, -50%);
}

.tsh1-home--glass .tsh1-ecosystem__node img {
  display: block;
  width: 57px;
  max-width: 57px;
  height: 57px;
  max-height: 57px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: none;
  transform: none;
}

.tsh1-home--glass .tsh1-ecosystem__node span {
  display: block;
  color: #24364a;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  white-space: nowrap;
}

.tsh1-home--glass .tsh1-ecosystem__node--parts {
  top: 25%;
  left: 24%;
}

.tsh1-home--glass .tsh1-ecosystem__node--charge {
  top: 25%;
  left: 77%;
}

.tsh1-home--glass .tsh1-ecosystem__node--service {
  top: 74%;
  left: 24%;
}

.tsh1-home--glass .tsh1-ecosystem__node--cars {
  top: 74%;
  left: 77%;
}

.tsh1-home--glass .tsh1-ecosystem__satellite {
  position: absolute;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  background: rgba(249, 252, 255, .78);
  box-shadow: 0 10px 25px rgba(49, 74, 97, .11);
  transform: translate(-50%, -50%);
}

.tsh1-home--glass .tsh1-ecosystem__satellite img {
  display: block;
  position: static;
  width: 40px;
  max-width: 40px;
  height: 40px;
  max-height: 40px;
  object-fit: contain;
  transform: none;
}

.tsh1-home--glass .tsh1-ecosystem__satellite--deals { top: 10%; left: 50%; }
.tsh1-home--glass .tsh1-ecosystem__satellite--shops { top: 50%; left: 91%; }
.tsh1-home--glass .tsh1-ecosystem__satellite--diy { top: 89%; left: 50%; }
.tsh1-home--glass .tsh1-ecosystem__satellite--navigation { top: 50%; left: 9%; }

.tsh1-home--glass .tsh1-ecosystem__caption {
  position: absolute;
  right: 12px;
  bottom: 13px;
  left: 12px;
  color: #52677c;
  font-size: 11px;
  font-weight: 670;
  letter-spacing: .01em;
  line-height: 1.3;
  text-align: center;
}

/* Motion uses transforms and opacity for the cards, satellites and halo.
   The four short SVG streaks are the only paint animation. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tsh1-home--glass .tsh1-ecosystem__core::before {
    animation: tsh1-ecosystem-pulse 4.5s ease-in-out infinite;
  }

  .tsh1-home--glass .tsh1-ecosystem__core::after {
    animation: tsh1-ecosystem-orbit 16s linear infinite;
  }

  .tsh1-home--glass .tsh1-ecosystem__node {
    --tsh1-float: -9px;
    animation: tsh1-ecosystem-float 4.8s ease-in-out infinite;
    will-change: transform;
  }

  .tsh1-home--glass .tsh1-ecosystem__satellite {
    --tsh1-float: -12px;
    animation: tsh1-ecosystem-satellite 5.4s ease-in-out infinite;
    will-change: transform;
  }

  .tsh1-home--glass .tsh1-ecosystem__paths .tsh1-ecosystem__energy {
    display: inline;
    animation: tsh1-ecosystem-energy 4.2s linear infinite;
  }

  .tsh1-home--glass .tsh1-ecosystem__node--charge { animation-delay: -.9s; }
  .tsh1-home--glass .tsh1-ecosystem__node--service { animation-delay: -1.8s; }
  .tsh1-home--glass .tsh1-ecosystem__node--cars { animation-delay: -2.7s; }
  .tsh1-home--glass .tsh1-ecosystem__satellite--shops { animation-delay: -1.35s; }
  .tsh1-home--glass .tsh1-ecosystem__satellite--diy { animation-delay: -2.7s; }
  .tsh1-home--glass .tsh1-ecosystem__satellite--navigation { animation-delay: -4.05s; }
  .tsh1-home--glass .tsh1-ecosystem__energy:nth-child(6) { animation-delay: -.3s; }
  .tsh1-home--glass .tsh1-ecosystem__energy:nth-child(7) { animation-delay: -.6s; }
  .tsh1-home--glass .tsh1-ecosystem__energy:nth-child(8) { animation-delay: -.9s; }
}

@keyframes tsh1-ecosystem-pulse {
  0%, 100% { opacity: .34; transform: scale(.96); }
  48% { opacity: .85; transform: scale(1.04); }
}

@keyframes tsh1-ecosystem-orbit {
  to { transform: rotate(360deg); }
}

@keyframes tsh1-ecosystem-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(var(--tsh1-float)); }
}

@keyframes tsh1-ecosystem-satellite {
  0%, 100% { opacity: .72; transform: translate(-50%, -50%) translateY(0) scale(.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) translateY(var(--tsh1-float)) scale(1.06); }
}

@keyframes tsh1-ecosystem-energy {
  0% { stroke-dashoffset: 0; opacity: 0; }
  9% { opacity: .92; }
  72% { stroke-dashoffset: -100; opacity: .92; }
  82%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@media (min-width: 761px) and (max-width: 1160px) {
  .tsh1-home--glass .tsh1-ecosystem__core {
    width: 112px;
    height: 112px;
    gap: 5px;
    border-radius: 27px;
  }

  .tsh1-home--glass .tsh1-ecosystem__core::before { border-radius: 34px; }
  .tsh1-home--glass .tsh1-ecosystem__emblem { width: 47px; height: 47px; border-radius: 15px; }
  .tsh1-home--glass .tsh1-ecosystem__emblem img { width: 32px; max-width: 32px; height: 32px; max-height: 32px; }
  .tsh1-home--glass .tsh1-ecosystem__core-label { font-size: 8px; }

  .tsh1-home--glass .tsh1-ecosystem__satellite { width: 44px; height: 44px; border-radius: 14px; }
  .tsh1-home--glass .tsh1-ecosystem__satellite img { width: 30px; max-width: 30px; height: 30px; max-height: 30px; }

  .tsh1-home--glass .tsh1-ecosystem__node {
    width: 99px;
    min-height: 78px;
    gap: 0;
    padding: 6px 3px;
    border-radius: 13px;
  }

  .tsh1-home--glass .tsh1-ecosystem__node img {
    width: 43px;
    max-width: 43px;
    height: 43px;
    max-height: 43px;
  }

  .tsh1-home--glass .tsh1-ecosystem__node span { font-size: 10px; }
  .tsh1-home--glass .tsh1-ecosystem__node--parts,
  .tsh1-home--glass .tsh1-ecosystem__node--charge { top: 32%; }
  .tsh1-home--glass .tsh1-ecosystem__node--service,
  .tsh1-home--glass .tsh1-ecosystem__node--cars { top: 68%; }
}

@media (max-width: 760px) {
  /* The legacy mobile app layer forces a white hero with !important. Restore
     one continuous canvas so the illustration has no horizontal cut. */
  body[data-module="home"] .tsh1-home--glass .tsh1-hero.tsn-home-hero {
    background: linear-gradient(165deg, #f5f8fb 0%, #e9f1f7 100%) !important;
  }

  .tsh1-home--glass .tsh1-home-slider--ecosystem {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border-top: 0;
    border-bottom: 0;
    border: 0 !important;
    background: transparent !important;
  }

  .tsh1-home--glass .tsh1-ecosystem__paths,
  .tsh1-home--glass .tsh1-ecosystem__caption { display: none; }

  .tsh1-home--glass .tsh1-ecosystem__core {
    width: 86px;
    height: 86px;
    gap: 3px;
    border-radius: 23px;
  }

  .tsh1-home--glass .tsh1-ecosystem__core::before { inset: -6px; border-radius: 27px; }
  .tsh1-home--glass .tsh1-ecosystem__core::after { inset: -11px; }
  .tsh1-home--glass .tsh1-ecosystem__emblem { width: 39px; height: 39px; border-radius: 12px; }
  .tsh1-home--glass .tsh1-ecosystem__emblem img { width: 27px; max-width: 27px; height: 27px; max-height: 27px; }
  .tsh1-home--glass .tsh1-ecosystem__core-label { font-size: 7px; }

  .tsh1-home--glass .tsh1-ecosystem__node {
    width: 82px;
    min-height: 69px;
    padding: 4px 2px;
    border-radius: 12px;
  }

  .tsh1-home--glass .tsh1-ecosystem__node img {
    width: 35px;
    max-width: 35px;
    height: 35px;
    max-height: 35px;
  }

  .tsh1-home--glass .tsh1-ecosystem__node span {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
  }
  .tsh1-home--glass .tsh1-ecosystem__node--parts,
  .tsh1-home--glass .tsh1-ecosystem__node--charge { top: 27%; }
  .tsh1-home--glass .tsh1-ecosystem__node--service,
  .tsh1-home--glass .tsh1-ecosystem__node--cars { top: 73%; }
  .tsh1-home--glass .tsh1-ecosystem__node--parts,
  .tsh1-home--glass .tsh1-ecosystem__node--service { left: 22%; }
  .tsh1-home--glass .tsh1-ecosystem__node--charge,
  .tsh1-home--glass .tsh1-ecosystem__node--cars { left: 78%; }
}

@media (max-width: 360px) {
  .tsh1-home--glass .tsh1-ecosystem__core { width: 76px; height: 76px; }
  .tsh1-home--glass .tsh1-ecosystem__node { width: 72px; }
  .tsh1-home--glass .tsh1-ecosystem__node span { font-size: 9px; }
  .tsh1-home--glass .tsh1-ecosystem__satellite { display: none; }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .tsh1-home--glass .tsh1-ecosystem__core::before,
  .tsh1-home--glass .tsh1-ecosystem__core::after,
  .tsh1-home--glass .tsh1-ecosystem__node,
  .tsh1-home--glass .tsh1-ecosystem__satellite,
  .tsh1-home--glass .tsh1-ecosystem__energy { animation: none; }
}