:root {
  --ink: #17211f;
  --muted: #5d6c69;
  --line: #dce5e1;
  --paper: #f6f8f5;
  --panel: #ffffff;
  --teal: #0c6f68;
  --teal-dark: #064b47;
  --amber: #c98b2c;
  --green: #456b42;
  --graphite: #26302f;
  --shadow: 0 22px 70px rgba(23, 33, 31, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

body.entrance-active {
  overflow: hidden;
}

body.entrance-active .site-header,
body.entrance-active main,
body.entrance-active .site-footer {
  transform: scale(1.03);
  filter: blur(2px);
}

body.entrance-open .site-header,
body.entrance-open main,
body.entrance-open .site-footer {
  animation: siteReveal 1700ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.door-entrance {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 54%, rgba(201, 139, 44, 0.34), transparent 18%),
    linear-gradient(115deg, #0c1715, #111f1d 45%, #24312f);
  contain: layout paint;
  perspective: 1200px;
}

.door-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

.photo-car-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0d1715;
  transform: scale(1);
  transition: transform 2300ms cubic-bezier(0.16, 0.86, 0.12, 1), filter 2300ms ease;
}

.photo-car-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 14, 13, 0.12), rgba(8, 14, 13, 0.34) 64%, rgba(8, 14, 13, 0.72)),
    linear-gradient(180deg, rgba(8, 14, 13, 0.12), rgba(8, 14, 13, 0.06) 58%, rgba(8, 14, 13, 0.4));
  pointer-events: none;
}

.photo-car {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 900ms ease, transform 2300ms cubic-bezier(0.16, 0.86, 0.12, 1);
}

.photo-car-open {
  opacity: 0;
  transform: scale(1.015);
}

.photo-car-stage ~ .side-car {
  opacity: 0;
}

body.photo-assets-missing .photo-car-stage {
  opacity: 0;
}

body.photo-assets-missing .photo-car-stage ~ .side-car {
  opacity: 1;
}

.dashboard-glow {
  position: absolute;
  left: 50%;
  bottom: -16vh;
  width: min(760px, 118vw);
  height: 38vh;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center, rgba(12, 111, 104, 0.56), transparent 58%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  border-radius: 50% 50% 0 0;
  opacity: 0.92;
}

.road-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 46vh;
  transform: translateX(-50%) perspective(260px) rotateX(58deg);
  transform-origin: bottom center;
  background: linear-gradient(0deg, rgba(201, 139, 44, 0), rgba(201, 139, 44, 0.9));
  box-shadow: 0 0 28px rgba(201, 139, 44, 0.75);
}

.door-panel {
  position: absolute;
  left: -2vw;
  top: 4vh;
  width: min(560px, 64vw);
  height: 90vh;
  background:
    radial-gradient(ellipse at 72% 56%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(120deg, #0b1312, #273331 46%, #121b19);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 34px 18px 24px 44px;
  clip-path: polygon(0 0, 82% 0, 100% 18%, 96% 100%, 6% 100%, 0 88%);
  box-shadow: inset -16px 0 34px rgba(255, 255, 255, 0.05), inset 12px 0 28px rgba(0, 0, 0, 0.38), 0 24px 90px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
  transform-origin: 3% 58%;
  transition: transform 1900ms cubic-bezier(0.16, 0.88, 0.12, 1), filter 1700ms ease;
  will-change: transform, filter;
}

.door-left {
  border-right: 3px solid rgba(255, 255, 255, 0.16);
}

.door-panel::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 7%;
  height: 33%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-bottom-width: 5px;
  border-radius: 28px 18px 14px 20px;
  transform: skewX(-8deg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(82, 128, 124, 0.3), rgba(3, 8, 8, 0.68));
}

.window-sheen {
  position: absolute;
  top: 13%;
  right: 18%;
  width: min(210px, 32vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.65;
  transform: rotate(-17deg);
}

.door-handle {
  position: absolute;
  top: 50%;
  right: 18%;
  width: 88px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #83928e, #f2f7f3, #6d7a77);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

.door-trim {
  position: absolute;
  left: 13%;
  right: 13%;
  height: 2px;
  background: linear-gradient(90deg, rgba(220, 229, 225, 0.08), rgba(220, 229, 225, 0.34), transparent);
}

.trim-a {
  bottom: 33%;
}

.trim-b {
  bottom: 21%;
}

.door-pocket {
  position: absolute;
  left: 15%;
  right: 23%;
  bottom: 9%;
  height: 9%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.22));
}

.driver-cockpit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.driver-cockpit::before {
  content: "";
  position: absolute;
  right: 6vw;
  bottom: -8vh;
  width: min(760px, 76vw);
  height: 48vh;
  border-radius: 48% 52% 0 0;
  background:
    radial-gradient(ellipse at 58% 30%, rgba(255, 255, 255, 0.1), transparent 28%),
    linear-gradient(145deg, #0b1110, #24302e 50%, #0d1413);
  box-shadow: inset 0 22px 48px rgba(255, 255, 255, 0.06), 0 -18px 80px rgba(0, 0, 0, 0.44);
}

.a-pillar {
  position: absolute;
  left: min(500px, 54vw);
  top: -5vh;
  width: 44px;
  height: 74vh;
  transform: rotate(-13deg);
  transform-origin: top center;
  border-radius: 999px;
  background: linear-gradient(90deg, #080d0c, #2f3c39, #121918);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.34);
}

.windshield-shine {
  position: absolute;
  top: 11vh;
  right: 16vw;
  width: min(410px, 42vw);
  height: 3px;
  transform: rotate(-10deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

.steering-wheel {
  position: absolute;
  left: min(600px, 58vw);
  bottom: 18vh;
  width: clamp(116px, 16vw, 190px);
  aspect-ratio: 1;
  border: clamp(12px, 1.8vw, 20px) solid rgba(10, 16, 15, 0.95);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 16px 38px rgba(0, 0, 0, 0.44);
}

.steering-wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 12px;
  height: 48%;
  transform: translateX(-50%);
  background: rgba(10, 16, 15, 0.95);
  border-radius: 999px;
}

.seat-edge {
  position: absolute;
  right: -3vw;
  bottom: -2vh;
  width: min(280px, 34vw);
  height: 42vh;
  border-radius: 48px 0 0 0;
  background: linear-gradient(135deg, #111918, #32413e);
  box-shadow: inset 20px 0 42px rgba(255, 255, 255, 0.04);
}

.door-opening-light {
  position: absolute;
  left: min(520px, 58vw);
  top: 7vh;
  width: 8px;
  height: 84vh;
  transform: rotate(-7deg);
  transform-origin: center;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.96) 42%, rgba(201, 139, 44, 0.64), transparent);
  box-shadow: 0 0 48px rgba(255, 255, 255, 0.88), 0 0 110px rgba(201, 139, 44, 0.54);
  transition: opacity 500ms ease;
  will-change: opacity, transform, width;
}

.entrance-copy {
  position: absolute;
  top: 12vh;
  right: clamp(24px, 7vw, 90px);
  z-index: 2;
  display: grid;
  justify-items: start;
  width: min(420px, calc(100% - 36px));
  text-align: left;
  transition: transform 620ms ease, opacity 420ms ease;
}

.entrance-copy .brand-mark {
  margin-bottom: 20px;
  width: 58px;
  height: 58px;
  background: rgba(12, 111, 104, 0.9);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
}

.entrance-copy h2 {
  max-width: 12ch;
  margin: 0 0 24px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
  color: transparent;
  background: linear-gradient(92deg, #fffaf0 0%, #ead6a8 48%, #d7e8e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}

.enter-site-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  color: #f7efe0;
  background: rgba(10, 18, 17, 0.46);
  border: 1px solid rgba(247, 239, 224, 0.42);
  border-radius: 7px;
  backdrop-filter: blur(14px);
  cursor: pointer;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 600;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.door-entrance.opening {
  pointer-events: none;
  animation: entranceFade 900ms cubic-bezier(0.2, 0.9, 0.2, 1) 1500ms forwards;
}

.door-entrance.opening .door-left {
  animation: none;
  transform: perspective(1200px) rotateY(-78deg) rotateZ(-5deg) translateX(-34vw) translateZ(240px) scale(0.92) !important;
  filter: brightness(1.18);
}

.door-entrance.opening .entrance-copy {
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
}

.door-entrance.opening .door-opening-light {
  animation: none;
}

.door-entrance.is-hidden {
  display: none;
}

.sidewalk-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.side-car {
  position: absolute;
  left: 50%;
  bottom: 18vh;
  width: min(980px, 88vw);
  aspect-ratio: 3.15 / 1;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  will-change: transform, filter;
}

.car-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -8%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68), transparent 68%);
  filter: blur(8px);
}

.car-body-side {
  position: absolute;
  left: 4%;
  right: 3%;
  bottom: 15%;
  height: 45%;
  border-radius: 120px 76px 48px 52px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(95deg, #17201f, #41504d 46%, #15201e);
  box-shadow:
    inset 0 -18px 36px rgba(0, 0, 0, 0.28),
    inset 0 8px 26px rgba(255, 255, 255, 0.08),
    0 26px 80px rgba(0, 0, 0, 0.42);
}

.car-roof {
  position: absolute;
  left: 20%;
  top: 17%;
  width: 54%;
  height: 35%;
  border-radius: 66% 48% 0 0;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(90deg, #121b1a, #344340 54%, #121918);
  clip-path: polygon(0 100%, 18% 16%, 62% 0, 100% 100%);
}

.front-window,
.rear-window,
.driver-door-window {
  position: absolute;
  top: 24%;
  height: 25%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(13, 86, 84, 0.32), rgba(5, 12, 12, 0.7));
}

.front-window {
  left: 37%;
  width: 20%;
  clip-path: polygon(0 100%, 15% 0, 100% 0, 88% 100%);
}

.rear-window {
  left: 56%;
  width: 19%;
  clip-path: polygon(6% 0, 72% 0, 100% 100%, 0 100%);
}

.a-pillar-side,
.b-pillar-side,
.rear-door-line,
.front-fender {
  position: absolute;
  background: rgba(7, 12, 12, 0.72);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.36);
}

.a-pillar-side {
  left: 36%;
  top: 22%;
  width: 1.3%;
  height: 34%;
  transform: rotate(16deg);
}

.b-pillar-side {
  left: 56%;
  top: 22%;
  width: 1.1%;
  height: 35%;
}

.rear-door-line {
  left: 70%;
  top: 48%;
  width: 1px;
  height: 33%;
  background: rgba(255, 255, 255, 0.16);
}

.front-fender {
  left: 23%;
  bottom: 19%;
  width: 1px;
  height: 34%;
  background: rgba(255, 255, 255, 0.14);
}

.front-light {
  position: absolute;
  left: 5%;
  bottom: 39%;
  width: 7%;
  height: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(201, 139, 44, 0.5));
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.42);
}

.side-mirror {
  position: absolute;
  left: 31%;
  top: 48%;
  width: 5%;
  height: 6%;
  border-radius: 50% 38% 42% 50%;
  background: linear-gradient(135deg, #0b1110, #46524f);
  transform: rotate(-7deg);
}

.wheel {
  position: absolute;
  bottom: 1%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #83928e 0 15%, #111816 16% 38%, #313b39 39% 49%, #070b0b 50%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.48);
}

.wheel-front {
  left: 18%;
}

.wheel-rear {
  right: 13%;
}

.driver-seat-glow {
  position: absolute;
  left: 38%;
  top: 37%;
  width: 18%;
  height: 28%;
  border-radius: 46% 42% 20% 18%;
  background: radial-gradient(ellipse at center, rgba(201, 139, 44, 0.24), transparent 68%);
  opacity: 0;
  transition: opacity 700ms ease;
}

.driver-side-door {
  position: absolute;
  left: 34%;
  top: 23%;
  width: 24%;
  height: 58%;
  border-radius: 18px 12px 28px 12px;
  clip-path: polygon(6% 0, 96% 0, 91% 100%, 0 100%);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(100deg, #151f1e, #4a5a56 48%, #17211f);
  border-left: 3px solid rgba(255, 255, 255, 0.22);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset -14px -16px 32px rgba(0, 0, 0, 0.22), 0 16px 42px rgba(0, 0, 0, 0.32);
  transform-origin: 4% 50%;
  transform-style: preserve-3d;
  transition: transform 2100ms cubic-bezier(0.16, 0.86, 0.12, 1), filter 1600ms ease;
  will-change: transform, filter;
}

.driver-door-window {
  left: 10%;
  top: 2%;
  width: 78%;
  height: 39%;
  clip-path: polygon(7% 0, 100% 0, 88% 100%, 0 100%);
}

.driver-door-handle {
  position: absolute;
  right: 16%;
  top: 51%;
  width: 22%;
  height: 6%;
  border-radius: 999px;
  background: linear-gradient(90deg, #87938f, #f1f5f1, #72807d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
}

.driver-door-lower-line {
  position: absolute;
  left: 10%;
  right: 12%;
  bottom: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

.entry-light {
  position: absolute;
  left: 43%;
  bottom: 26vh;
  width: 0;
  height: 30vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4), rgba(201, 139, 44, 0.18) 36%, transparent 68%);
  opacity: 0;
  transform: translateX(-50%) scale(0.2);
  will-change: opacity, transform, width;
}

.door-entrance.opening .driver-side-door {
  transform: perspective(1100px) rotateY(-72deg) rotateZ(-2deg) translateX(-10vw) translateZ(180px) !important;
  filter: brightness(1.22);
}

.door-entrance.opening .photo-car-stage {
  transform: scale(1.1) translateX(-2vw);
  filter: brightness(1.08) contrast(1.04);
}

.door-entrance.opening .photo-car-closed {
  opacity: 0;
  transform: scale(1.06);
}

.door-entrance.opening .photo-car-open {
  opacity: 1;
  transform: scale(1.1);
}

.door-entrance.opening .side-car {
  animation: sideCarEnter 2200ms cubic-bezier(0.16, 0.86, 0.12, 1) forwards;
}

.door-entrance.opening .driver-seat-glow {
  opacity: 1;
}

.door-entrance.opening .entry-light {
  animation: sideEntryLight 1400ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

@keyframes sideCarEnter {
  0% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }

  68% {
    transform: translateX(-52%) scale(1.14);
    filter: brightness(1.08);
  }

  100% {
    transform: translateX(-58%) scale(1.42);
    filter: brightness(1.16) blur(1px);
  }
}

@keyframes sideEntryLight {
  0% {
    opacity: 0;
    width: 0;
    transform: translateX(-50%) scale(0.2);
  }

  38% {
    opacity: 1;
    width: min(34vw, 380px);
    transform: translateX(-50%) scale(1);
  }

  100% {
    opacity: 0;
    width: min(60vw, 760px);
    transform: translateX(-50%) scale(1.55);
  }
}

@keyframes entranceFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes leftDoorOpen {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }

  18% {
    transform: rotateY(-8deg) translateX(-1vw) translateZ(18px);
  }

  58% {
    transform: rotateY(-92deg) translateX(-12vw) translateZ(110px);
  }

  100% {
    transform: rotateY(-118deg) translateX(-30vw) translateZ(160px) scaleX(0.9);
  }
}

@keyframes rightDoorOpen {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }

  18% {
    transform: rotateY(8deg) translateX(1vw) translateZ(18px);
  }

  58% {
    transform: rotateY(92deg) translateX(12vw) translateZ(110px);
  }

  100% {
    transform: rotateY(118deg) translateX(30vw) translateZ(160px) scaleX(0.9);
  }
}

@keyframes gapFlash {
  0% {
    opacity: 1;
    width: 6px;
    transform: translateX(-50%) scaleY(1);
  }

  24% {
    opacity: 1;
    width: min(18vw, 180px);
    transform: translateX(-50%) scaleY(1.06);
  }

  72% {
    opacity: 0.72;
    width: min(42vw, 520px);
    transform: translateX(-50%) scaleY(1.14);
  }

  100% {
    opacity: 0;
    width: min(70vw, 900px);
    transform: translateX(-50%) scaleY(1.22);
  }
}

@keyframes siteReveal {
  0% {
    transform: scale(1.08);
    filter: blur(7px) brightness(1.15);
  }

  48% {
    transform: scale(1.02);
    filter: blur(2px) brightness(1.04);
  }

  to {
    transform: scale(1);
    filter: blur(0);
  }
}

/* Refined side-view sedan entrance */
.side-car {
  bottom: 14vh;
  width: min(1180px, 92vw);
  aspect-ratio: 4.15 / 1;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.5));
}

.car-shadow {
  left: 7%;
  right: 7%;
  bottom: -13%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 44%, transparent 72%);
}

.car-body-side {
  left: 2%;
  right: 2%;
  bottom: 13%;
  height: 45%;
  border-radius: 0;
  clip-path: polygon(0 70%, 4% 46%, 14% 38%, 24% 34%, 33% 22%, 48% 19%, 63% 24%, 74% 35%, 91% 38%, 98% 50%, 100% 72%, 96% 87%, 9% 88%, 3% 82%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 8%, rgba(255, 255, 255, 0.08) 9% 18%, transparent 36%),
    linear-gradient(105deg, #111817 0%, #33413e 18%, #64736d 42%, #2d3b38 67%, #101716 100%);
  box-shadow:
    inset 0 12px 22px rgba(255, 255, 255, 0.1),
    inset 0 -22px 34px rgba(0, 0, 0, 0.36),
    inset 34px 0 50px rgba(255, 255, 255, 0.04),
    0 16px 46px rgba(0, 0, 0, 0.38);
}

.car-body-side::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 8%;
  top: 43%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.14), transparent);
}

.body-highlight {
  position: absolute;
  left: 11%;
  right: 13%;
  height: 2px;
  z-index: 2;
  pointer-events: none;
}

.upper-highlight {
  bottom: 46%;
  background: linear-gradient(90deg, transparent, rgba(230, 239, 235, 0.42), rgba(230, 239, 235, 0.08), transparent);
}

.lower-highlight {
  bottom: 24%;
  background: linear-gradient(90deg, transparent, rgba(7, 12, 12, 0.52), transparent);
}

.car-roof {
  left: 27%;
  top: 17%;
  width: 44%;
  height: 31%;
  border-radius: 0;
  clip-path: polygon(0 100%, 16% 21%, 38% 4%, 70% 7%, 100% 100%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(100deg, #0c1211 0%, #263431 38%, #45524f 62%, #0d1514 100%);
  box-shadow: inset 0 7px 20px rgba(255, 255, 255, 0.08);
}

.front-window,
.rear-window,
.driver-door-window {
  top: 24%;
  height: 20%;
  border: 1px solid rgba(220, 244, 239, 0.2);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.22), transparent 31%),
    linear-gradient(180deg, rgba(36, 107, 104, 0.34), rgba(3, 9, 9, 0.82));
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.front-window {
  left: 36%;
  width: 18%;
  clip-path: polygon(6% 100%, 18% 0, 100% 0, 88% 100%);
}

.rear-window {
  left: 54%;
  width: 18%;
  clip-path: polygon(7% 0, 70% 0, 98% 100%, 0 100%);
}

.a-pillar-side {
  left: 35.6%;
  top: 22%;
  width: 0.9%;
  height: 29%;
  transform: rotate(14deg);
  background: rgba(5, 9, 9, 0.86);
}

.b-pillar-side {
  left: 54%;
  top: 22%;
  width: 0.85%;
  height: 30%;
  background: rgba(5, 9, 9, 0.84);
}

.c-pillar-side {
  position: absolute;
  left: 70.4%;
  top: 23%;
  width: 1.4%;
  height: 30%;
  transform: rotate(-17deg);
  background: rgba(5, 9, 9, 0.82);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.34);
}

.front-fender {
  left: 28%;
  top: 51%;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.26), transparent);
}

.rear-door-line {
  left: 70.3%;
  top: 50%;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.front-light {
  left: 5%;
  bottom: 45%;
  width: 7.5%;
  height: 3.2%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(252, 214, 135, 0.65), transparent);
}

.tail-light {
  position: absolute;
  right: 4.5%;
  bottom: 47%;
  width: 5.2%;
  height: 3.4%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(136, 0, 0, 0.2), #d94b3c, #f5a38f);
  box-shadow: 0 0 24px rgba(217, 75, 60, 0.34);
}

.side-mirror {
  left: 33.2%;
  top: 46%;
  width: 4.1%;
  height: 5.2%;
  border-radius: 52% 40% 40% 52%;
  background: linear-gradient(135deg, #070b0b, #5a6762 58%, #101817);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.36);
}

.front-wheel-arch,
.rear-wheel-arch {
  position: absolute;
  bottom: 7%;
  width: 17.4%;
  aspect-ratio: 1.25 / 1;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at center bottom, transparent 57%, rgba(5, 8, 8, 0.92) 58% 73%, transparent 74%);
  z-index: 4;
  pointer-events: none;
}

.front-wheel-arch {
  left: 20.5%;
}

.rear-wheel-arch {
  right: 13%;
}

.wheel {
  bottom: -1%;
  width: 14.5%;
  background:
    radial-gradient(circle at 50% 50%, #b8c4be 0 10%, #293532 11% 19%, #75827d 20% 23%, #0b1010 24% 48%, #2d3835 49% 53%, #060909 54% 100%);
  box-shadow: inset 0 0 0 9px #070b0b, inset 0 0 0 16px rgba(255, 255, 255, 0.06), 0 11px 28px rgba(0, 0, 0, 0.58);
  z-index: 3;
}

.wheel::before {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: conic-gradient(from 8deg, rgba(255, 255, 255, 0.42), transparent 10% 20%, rgba(255, 255, 255, 0.36) 22% 30%, transparent 32% 44%, rgba(255, 255, 255, 0.28) 46% 54%, transparent 56% 70%, rgba(255, 255, 255, 0.32) 72% 80%, transparent 82%);
}

.wheel-front {
  left: 21.7%;
}

.wheel-rear {
  right: 14.3%;
}

.rim {
  position: absolute;
  bottom: 4.2%;
  width: 6.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #d4ded8 0 18%, #6c7974 19% 36%, transparent 37%);
  z-index: 5;
  pointer-events: none;
}

.front-rim {
  left: 25.9%;
}

.rear-rim {
  right: 18.5%;
}

.driver-seat-glow {
  left: 39%;
  top: 40%;
  width: 18%;
  height: 28%;
  background: radial-gradient(ellipse at center, rgba(221, 169, 91, 0.28), rgba(13, 22, 21, 0.22) 42%, transparent 70%);
}

.cabin-detail {
  position: absolute;
  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 1;
}

.steering-detail {
  left: 38.5%;
  top: 43%;
  width: 5.8%;
  aspect-ratio: 1;
  border: 6px solid rgba(5, 9, 9, 0.82);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.seat-detail {
  left: 47%;
  top: 42%;
  width: 7%;
  height: 24%;
  border-radius: 42% 38% 14% 14%;
  background: linear-gradient(145deg, #1a2422, #4f625c);
}

.door-entrance.opening .cabin-detail {
  opacity: 1;
}

.driver-side-door {
  left: 35.4%;
  top: 23.2%;
  width: 19.2%;
  height: 61.5%;
  border-radius: 7px 8px 16px 10px;
  clip-path: polygon(6% 0, 100% 0, 93% 100%, 0 100%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(100deg, #151d1c 0%, #596862 42%, #263431 78%, #111918 100%);
  border-left: 2px solid rgba(8, 13, 13, 0.86);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset -12px -18px 28px rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.driver-door-window {
  left: 8%;
  top: 2%;
  width: 83%;
  height: 35%;
  clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}

.driver-door-handle {
  right: 12%;
  top: 49%;
  width: 19%;
  height: 4.8%;
}

.driver-door-lower-line {
  left: 9%;
  right: 10%;
  bottom: 29%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.18));
}

.driver-door-reflection {
  position: absolute;
  left: 13%;
  right: 10%;
  top: 55%;
  height: 18%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewY(-8deg);
}

.door-entrance.opening .driver-side-door {
  transform: perspective(1100px) rotateY(-67deg) rotateZ(-1.6deg) translateX(-7vw) translateZ(145px) !important;
  box-shadow: inset -12px -18px 28px rgba(0, 0, 0, 0.2), 28px 18px 48px rgba(0, 0, 0, 0.44);
}

.entry-light {
  left: 45%;
  bottom: 28vh;
  height: 22vh;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34), rgba(211, 159, 80, 0.2) 34%, transparent 68%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(246, 248, 245, 0.92);
  border-bottom: 1px solid rgba(220, 229, 225, 0.85);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: var(--teal-dark);
  border-radius: 8px;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  color: var(--muted);
  font-size: 14px;
}

.nav-links a:hover {
  color: var(--teal-dark);
}

.header-action,
.primary-button,
.secondary-button,
.inquiry-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 750;
}

.header-action,
.primary-button,
.inquiry-form button {
  color: #fff;
  background: var(--teal);
}

.secondary-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.42);
}

[data-lucide] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.hero {
  position: relative;
  min-height: clamp(620px, 86vh, 820px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  object-fit: cover;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(10, 20, 19, 0.84), rgba(10, 20, 19, 0.38) 48%, rgba(10, 20, 19, 0.1)),
    linear-gradient(0deg, rgba(10, 20, 19, 0.76), rgba(10, 20, 19, 0) 42%);
}

.hero-content {
  position: relative;
  width: min(760px, calc(100% - 36px));
  margin: 0 0 clamp(120px, 18vh, 170px) clamp(18px, 7vw, 86px);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(44px, 6vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
  max-width: 11ch;
}

.hero-copy {
  max-width: 690px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.58;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-panel {
  position: absolute;
  right: clamp(18px, 5vw, 62px);
  bottom: 32px;
  width: min(430px, calc(100% - 36px));
  padding: 18px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}

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

.hero-panel span,
.hero-panel small {
  color: rgba(255, 255, 255, 0.74);
}

.hero-panel strong {
  margin: 6px 0;
  font-size: 24px;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.trust-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 20px clamp(16px, 3vw, 34px);
  border-right: 1px solid var(--line);
  color: var(--graphite);
  font-weight: 720;
}

.trust-strip div:last-child {
  border-right: 0;
}

.trust-strip svg {
  color: var(--teal);
}

.section,
.process-band,
.quote-section,
.risk-section,
.inquiry-section {
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(260px, 500px) minmax(260px, 590px);
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}

.section-heading h2,
.quote-copy h2,
.inquiry-section h2 {
  margin-bottom: 0;
  font-size: clamp(31px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: 0;
}

.section-heading p:last-child,
.quote-copy p,
.inquiry-section p {
  color: var(--muted);
  line-height: 1.7;
}

.compact {
  display: block;
  max-width: 760px;
}

.inventory-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 18px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 38px rgba(23, 33, 31, 0.07);
}

.filters label,
.calculator label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.input-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.input-shell input {
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
}

select,
.calculator input,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}

input[type="range"] {
  accent-color: var(--teal);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  background: #eef3f0;
  border-radius: 8px;
}

.segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 780;
}

.segmented button.active {
  color: #fff;
  background: var(--teal-dark);
}

.inventory-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: var(--muted);
}

.inventory-toolbar strong {
  color: var(--ink);
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.vehicle-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

.vehicle-visual {
  position: relative;
  min-height: 160px;
  background:
    linear-gradient(145deg, rgba(12, 111, 104, 0.15), rgba(201, 139, 44, 0.15)),
    url("./assets/hero-uzbekistan-cars.png") center / cover;
}

.vehicle-card:nth-child(2n) .vehicle-visual {
  background-position: 62% 58%;
}

.vehicle-card:nth-child(3n) .vehicle-visual {
  background-position: 42% 62%;
}

.status-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(6, 75, 71, 0.9);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.vehicle-body {
  display: grid;
  gap: 13px;
  padding: 16px;
}

.vehicle-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vehicle-title h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

.vehicle-title span {
  color: var(--muted);
  font-size: 13px;
}

.price {
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 850;
  white-space: nowrap;
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.specs span {
  padding: 8px;
  background: #f5f8f6;
  border-radius: 6px;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.card-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-weight: 780;
}

.card-actions .select-btn {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.process-band {
  color: #fff;
  background: var(--graphite);
}

.process-band .section-heading p:last-child {
  color: rgba(255, 255, 255, 0.74);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.process-grid article {
  min-height: 260px;
  padding: 24px;
  background: var(--graphite);
}

.process-grid span {
  color: var(--amber);
  font-weight: 850;
}

.process-grid h3 {
  margin: 54px 0 10px;
  font-size: 24px;
}

.process-grid p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

.quote-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr);
  gap: 36px;
  align-items: start;
  background: #fff;
}

.quote-copy {
  max-width: 560px;
}

.quote-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  color: var(--teal-dark);
  background: #edf6f2;
  border-radius: 8px;
  line-height: 1.5;
}

.calculator {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.quote-total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 0 18px;
  color: #fff;
  background: var(--teal-dark);
  border-radius: 8px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 850;
}

.quote-total::before {
  content: "Estimated landed quote";
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 750;
}

.risk-section {
  background: #edf1ec;
}

.risk-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.risk-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 86px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.45;
  font-weight: 720;
}

.risk-list input {
  margin-top: 3px;
  accent-color: var(--teal);
}

.inquiry-section {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 34px;
  align-items: start;
}

.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.inquiry-form textarea {
  grid-column: 1 / -1;
  min-height: 126px;
  padding-top: 12px;
  resize: vertical;
}

.inquiry-form button {
  width: fit-content;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 24px clamp(18px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.68);
  background: #111816;
  font-size: 14px;
}

@media (max-width: 1120px) {
  .vehicle-grid,
  .risk-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-strip,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 840px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .brand small {
    display: none;
  }

  .hero {
    min-height: 720px;
  }

  .hero-content {
    margin-bottom: 190px;
  }

  h1 {
    max-width: 9ch;
  }

  .hero-panel {
    left: 18px;
    right: 18px;
    width: auto;
  }

  .door-panel {
    left: -18vw;
    width: 82vw;
    height: 86vh;
  }

  .a-pillar {
    left: 54vw;
  }

  .steering-wheel {
    left: 51vw;
    bottom: 17vh;
  }

  .door-opening-light {
    left: 55vw;
  }

  .entrance-copy {
    top: 7vh;
    left: 18px;
    right: 18px;
    width: auto;
  }

  .side-car {
    width: 112vw;
    bottom: 15vh;
  }

  .door-entrance.opening .driver-side-door {
    transform: perspective(1000px) rotateY(-74deg) rotateZ(-2deg) translateX(-16vw) translateZ(150px) !important;
  }

  .section-heading,
  .inventory-layout,
  .quote-section,
  .inquiry-section {
    grid-template-columns: 1fr;
  }

  .filters {
    position: static;
  }

  .vehicle-grid,
  .risk-list,
  .process-grid,
  .calculator,
  .inquiry-form,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .trust-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .site-header {
    gap: 12px;
    padding: 12px;
  }

  .header-action {
    width: 42px;
    padding: 0;
  }

  .header-action {
    font-size: 0;
  }

  .header-action svg {
    margin: 0;
  }

  .hero-content {
    width: calc(100% - 24px);
    margin-left: 12px;
  }

  .section,
  .process-band,
  .quote-section,
  .risk-section,
  .inquiry-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .inventory-toolbar {
    display: grid;
  }

  .vehicle-title {
    display: grid;
  }

  .price {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .door-panel,
  .entrance-copy,
  .door-gap {
    transition-duration: 120ms;
  }

  .door-entrance.opening,
  body.entrance-open .site-header,
  body.entrance-open main,
  body.entrance-open .site-footer {
    animation-duration: 900ms;
  }
}

/* Platform redesign layer */
.brand-mark {
  letter-spacing: 0;
}

.hero-content {
  max-width: 760px;
}

.hero-content h1 {
  max-width: 13.5ch;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.02;
}

.hero-copy {
  max-width: 720px;
}

.hero-panel strong {
  line-height: 1.22;
}

.trust-strip {
  background: #fff;
}

.trust-strip div {
  min-height: 104px;
}

.vehicle-card {
  overflow: hidden;
}

.vehicle-visual {
  position: relative;
  min-height: 128px;
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.78), transparent 10%),
    linear-gradient(135deg, rgba(12, 111, 104, 0.95), rgba(201, 139, 44, 0.82)),
    linear-gradient(180deg, #dce5e1, #fff);
}

.vehicle-visual::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 24%;
  height: 34%;
  border-radius: 999px 999px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.28) 42%, rgba(20, 36, 34, 0.22) 43%),
    linear-gradient(90deg, #eff6f1, #cfdcd7);
  box-shadow: inset 0 -20px 26px rgba(23, 33, 31, 0.14), 0 18px 38px rgba(23, 33, 31, 0.18);
  clip-path: polygon(7% 55%, 21% 16%, 72% 10%, 91% 47%, 100% 64%, 94% 100%, 5% 100%, 0 76%);
}

.vehicle-visual::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 18%;
  height: 20px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 50%, #17211f 0 9px, #dce5e1 10px 13px, transparent 14px),
    radial-gradient(circle at 88% 50%, #17211f 0 9px, #dce5e1 10px 13px, transparent 14px);
}

.status-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
}

.route-section {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 34px;
  align-items: center;
  padding: 64px clamp(18px, 5vw, 72px);
  color: #fff;
  background: #14211f;
}

.route-section h2 {
  color: #fff;
}

.route-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.route-line span {
  position: relative;
  display: grid;
  min-height: 92px;
  place-items: center;
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 780;
}

.route-line span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.route-line span::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 7px rgba(201, 139, 44, 0.16);
}

.quote-total::before {
  content: "Estimated Tashkent landed cost";
}

@media (max-width: 840px) {
  .hero-content h1 {
    max-width: 12ch;
    font-size: clamp(40px, 12vw, 58px);
  }

  .route-section {
    grid-template-columns: 1fr;
  }

  .route-line {
    grid-template-columns: 1fr;
  }

  .route-line span + span {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}