.bob-hero {
  --bob-night: #1e2735;
  --bob-ivory: #f3ecdf;
  --bob-gold: #ffd9a8;
  --bob-serif: "Songti SC", "Noto Serif SC", SimSun, serif;
  --bob-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bob-night);
  color: var(--bob-ivory);
}

.bob-hero__stage {
  --bob-inset: clamp(35px, 6.05vw, 88px);
  position: relative;
  width: min(100%, 1320px);
  height: clamp(500px, 46vw, 600px);
  margin-inline: auto;
}

.bob-hero__art,
.bob-hero__art::before,
.bob-hero__art::after,
.bob-hero__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bob-hero__art {
  z-index: -1;
  width: min(100%, 1760px);
  container-type: inline-size;
  margin-inline: auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.bob-hero__art::before {
  content: "";
  inset: -2% -1%;
  background-image: url("https://canyan.kp-static.com/Fp2Xh7yX7hMJMEqUS33JH2gpJANG.svg"), url("https://canyan.kp-static.com/Fj00hqOumE4xR8Wlgz16-iPWTtr7.webp");
  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: bob-scene-drift 9s ease-in-out infinite alternate;
}

.bob-hero__art::after {
  content: "";
  background:
    linear-gradient(0deg, var(--bob-night), rgba(30, 39, 53, .76) 7%, rgba(30, 39, 53, .27) 20%, transparent 35%),
    linear-gradient(90deg, rgba(16, 23, 34, .40), rgba(16, 23, 34, .30) 31%, transparent 63%);
}

@keyframes bob-scene-drift {
  from { transform: translate3d(-.65%, .32%, 0) scale(1); }
  to { transform: translate3d(.65%, -.70%, 0) scale(1.026); }
}

.bob-hero__light {
  inset: -6% -8%;
  background:
    radial-gradient(ellipse 31% 33% at 59% 22%, rgba(243, 192, 120, .25), transparent 84%),
    radial-gradient(ellipse 46% 35% at 79% 65%, rgba(153, 175, 215, .21), transparent 79%);
  mix-blend-mode: screen;
  opacity: .63;
  animation: bob-hero-light 11s ease-in-out infinite alternate;
}

@keyframes bob-hero-light {
  from { transform: translate3d(-2.5%, 0, 0) scale(.96); opacity: .43; }
  to { transform: translate3d(3.5%, -1.6%, 0) scale(1.11); opacity: .97; }
}

.bob-hero__sky,
.bob-hero__street {
  display: none;
}

.bob-hero__dial {
  --bob-dial-size: min(74cqw, 960px);
  position: absolute;
  top: max(-16px, calc(76% - var(--bob-dial-size) / 2));
  left: 57%;
  width: var(--bob-dial-size);
  aspect-ratio: 2;
  transform: translateX(-50%);
  overflow: hidden;
  mask-image: linear-gradient(#000 0 84%, transparent 100%);
  opacity: .82;
}

.bob-hero__dial-rotor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  background: url("https://canyan.kp-static.com/FkAHMoqJooEeBxC402nSa1SvK962.webp") center / contain no-repeat;
  animation: bob-dial-turn 144s linear infinite;
}

@keyframes bob-dial-turn {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}

.bob-hero__brands {
  position: absolute;
  z-index: 2;
  top: clamp(28px, 4vw, 54px);
  left: var(--bob-inset);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e1d1ba;
  font: 400 13px/1 var(--bob-sans);
}

.bob-hero__brands img {
  display: block;
  width: auto;
  height: 33px;
}

.bob-hero__portrait {
  position: absolute;
  z-index: 1;
  right: clamp(25px, 6.5vw, 98px);
  bottom: -1px;
  display: block;
  height: 90%;
  aspect-ratio: 1550 / 1960;
  mask-image: linear-gradient(#000 0 86%, transparent 100%);
}

.bob-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bob-hero__message {
  position: absolute;
  z-index: 2;
  top: 27%;
  left: var(--bob-inset);
}

.bob-hero__message h1 {
  width: clamp(360px, 36vw, 476px);
  margin: 0;
}

.bob-hero__message h1 img {
  display: block;
  width: 100%;
  height: auto;
}

.bob-hero__subtitle {
  margin: clamp(15px, 2vw, 25px) 0 0;
  color: var(--bob-gold);
  font: 400 clamp(17px, 1.7vw, 23px)/1.4 var(--bob-serif);
  letter-spacing: .045em;
}

.bob-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 27px;
}

.bob-hero__actions a {
  text-decoration: none;
}

.bob-hero__appointment {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  gap: 15px;
  padding: 0 16px;
  border: 1px solid rgba(255, 217, 168, .85);
  border-radius: 2px;
  background: #f0c58f;
  color: #1a202b;
  font: 600 15px/1.25 var(--bob-sans);
}

.bob-hero__appointment:hover {
  background: #ffdcad;
}

.bob-hero__appointment span,
.bob-hero__overview span {
  font-family: var(--bob-sans);
}

.bob-hero__overview {
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  gap: 8px;
  color: var(--bob-ivory);
  font: 400 clamp(12px, 1vw, 14px)/1.3 var(--bob-serif);
}

.bob-hero__overview:hover {
  color: var(--bob-gold);
}

.bob-hero__actions a:focus-visible {
  outline: 2px solid var(--bob-gold);
  outline-offset: 4px;
}

.bob-hero__signature {
  position: absolute;
  z-index: 2;
  right: clamp(37px, 5vw, 74px);
  bottom: clamp(22px, 3vw, 40px);
  color: var(--bob-ivory);
  text-align: right;
  text-shadow: 0 1px 8px rgba(13, 19, 28, .95);
}

.bob-hero__signature p {
  margin: 0;
  font: 400 19px/1.35 var(--bob-serif);
}

.bob-hero__signature p + p {
  margin-top: 4px;
  color: #e5d5b8;
  font-size: 13px;
}

@media (761px <= width <= 1020px) {
  .bob-hero__portrait { right: 13px; height: 80%; }
  .bob-hero__actions { align-items: start; flex-direction: column; gap: 4px; }
  .bob-hero__overview { min-height: 33px; }
}

@media (max-width: 760px) {
  .bob-hero__stage {
    --bob-inset: clamp(21px, 5.6vw, 42px);
    height: clamp(522px, 145vw, 610px);
  }

  .bob-hero__art {
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .bob-hero__art::before { content: none; }

  .bob-hero__art::after {
    background: linear-gradient(0deg, var(--bob-night), rgba(30, 39, 53, .56) 9%, transparent 24%);
  }

  .bob-hero__sky,
  .bob-hero__street {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .bob-hero__sky {
    inset: 0;
    background: url("https://canyan.kp-static.com/Fk4YuVu4t656sf6V-aIsfBwhVufv.webp") center / 100% 100% no-repeat;
  }

  .bob-hero__dial {
    --bob-dial-size: min(94%, 490px);
    top: 58px;
    left: 58%;
    opacity: .74;
  }

  .bob-hero__street {
    right: -8%;
    bottom: 30px;
    left: -8%;
    height: 50%;
    background-image: url("https://canyan.kp-static.com/FsN9JRIS6T-WqJhtv6xL0XKrRAk2.svg"), url("https://canyan.kp-static.com/FmmAukO7wpnKzoI2XMmXEVNTrBoU.webp");
    background-position: 31% center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: .9;
    animation: bob-scene-drift 8s ease-in-out infinite alternate;
  }

  .bob-hero__light {
    background:
      radial-gradient(ellipse 44% 26% at 69% 23%, rgba(235, 190, 129, .24), transparent 82%),
      radial-gradient(ellipse 50% 23% at 73% 70%, rgba(154, 172, 207, .14), transparent 81%);
  }

  .bob-hero__brands {
    top: 26px;
    gap: 8px;
    font-size: 11px;
  }

  .bob-hero__brands img { height: 26px; }

  .bob-hero__message { top: clamp(82px, 22vw, 112px); }

  .bob-hero__message h1 {
    width: min(81vw, 359px);
  }

  .bob-hero__subtitle {
    margin-top: 10px;
    font-size: clamp(15px, 4vw, 19px);
    letter-spacing: .01em;
  }

  .bob-hero__actions { margin-top: 17px; }
  .bob-hero__appointment { min-height: 40px; font-size: 14px; }
  .bob-hero__overview { display: none; }

  .bob-hero__portrait {
    right: max(7px, calc((100% - 520px) * .18));
    bottom: 5px;
    width: clamp(199px, 54.5%, 329px);
    height: auto;
    mask-image: linear-gradient(#000 0 73%, transparent 100%);
  }

  .bob-hero__signature {
    right: auto;
    bottom: 26px;
    left: var(--bob-inset);
    text-align: left;
  }

  .bob-hero__signature p { font-size: 16px; }
  .bob-hero__signature p + p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bob-hero__art::before {
    background-image: url("https://canyan.kp-static.com/Fj00hqOumE4xR8Wlgz16-iPWTtr7.webp");
  }

  .bob-hero__street {
    background-image: url("https://canyan.kp-static.com/FmmAukO7wpnKzoI2XMmXEVNTrBoU.webp");
  }

  .bob-hero__art::before,
  .bob-hero__light,
  .bob-hero__dial-rotor,
  .bob-hero__street { animation: none; }
}

@media (461px <= width <= 760px) {
  .bob-hero__stage { height: clamp(640px, 126vw, 710px); }
  .bob-hero__portrait { width: min(54.5%, 282px); }
  .bob-hero__message h1 { width: min(76vw, 345px); }
}