.dealer-hero { position: relative; isolation: isolate; }
.dealer-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -14%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 64%, #ce593d61, transparent 50%),
    radial-gradient(ellipse at 22% 26%, #a5384045, transparent 46%);
}
.dealer-hero-layout { grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); }
.dealer-hero h1 { white-space: normal; text-wrap: balance; }
.product-stage {
  --stage-accent: #f0977f;
  min-width: 0;
  padding: 18px;
  border: 1px solid #53636e;
  background: #202b34;
}
.stage-header, .stage-readout { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--small); }
.stage-header { padding-bottom: 15px; color: #d8e0e4; }
.stage-header span:last-child, .stage-number { font-variant-numeric: tabular-nums; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 6px; }
.stage-grid:has(button:nth-child(2)[aria-pressed="true"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.stage-grid:has(button:nth-child(3)[aria-pressed="true"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); }
.stage-product {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(155px, 24vw, 320px);
  padding: clamp(7px, 1.15vw, 15px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #566673;
  border-radius: 0;
  color: var(--inverse);
  background: #293741;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stage-product[aria-pressed="true"] { border-color: var(--stage-accent); background-color: #354551; }
.stage-product:focus-visible { outline-color: var(--inverse); outline-offset: -4px; }
.stage-product img { width: 100%; height: 100%; object-fit: contain; transform: scale(.89); }
.stage-product[aria-pressed="true"] img { transform: scale(1); }
.stage-product strong { position: relative; font-size: clamp(.69rem, 1.5vw, 1.05rem); }
.stage-number { font-size: .78rem; color: #d8e0e4; }
.stage-product[aria-pressed="true"] .stage-number { color: var(--stage-accent); }
.stage-product::before, .stage-product::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 27px 7px 31px;
  pointer-events: none;
}
.stage-product::before {
  background: linear-gradient(#a9bcc528 1px, transparent 1px), linear-gradient(90deg, #a9bcc528 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(transparent, #000 27%, #000 73%, transparent);
}
.stage-product::after { z-index: 1; inset: 0; background: linear-gradient(115deg, transparent 40%, #bde5f444 48%, #f0977f44 50%, transparent 61%); transform: translateX(-110%); }
.stage-readout { padding-top: 14px; min-height: 3.6em; }
.stage-readout a { text-align: right; color: var(--inverse); }
.stage-readout a span { color: var(--stage-accent); }
.stage-motors { display: grid; gap: 6px; margin-top: 2px; }
.stage-motors a { min-height: 44px; padding: 6px 8px; border: 1px solid #566673; color: var(--inverse); text-decoration: none; }
.stage-motors a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.stage-motors img { width: 54px; height: 40px; object-fit: contain; }
.stage-motors a span:last-child { color: var(--stage-accent); }
.stage-motors a:hover { border-color: var(--stage-accent); }
.page-motion-progress { display: none; }
.factory-route { position: relative; }
.factory-gallery-images { display: grid; gap: 12px; }
.factory-gallery-images img { display: block; width: 100%; height: auto; }
.factory-gallery-footer { padding-top: 9px; font-size: var(--small); }
.factory-route::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 1px; background: #8f5a51; transform-origin: left; }
.factory-step { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border: 1px solid #8f5a51; border-radius: 50%; background: var(--surface); font-size: .78rem; font-variant-numeric: tabular-nums; }
.winding-union { opacity: 0; }
.winding-wheel { transform-box: fill-box; transform-origin: center; }

@media (max-width: 920px) {
  .dealer-hero-layout { grid-template-columns: 1fr; }
  .stage-product { height: clamp(140px, 33vw, 240px); }
}
@media (max-width: 500px) {
  .product-stage { padding: 11px; }
  .stage-grid, .stage-grid:has(button[aria-pressed="true"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-readout { font-size: .77rem; }
}
@media (max-width: 700px) {
  .factory-route::before { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .stage-product:hover, .dealer-product:hover { background-image: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 50%), #d6eaf236, transparent 54%); }
  .stage-product:hover { border-color: #f0977f; }
  .dealer .button:hover { background-color: #bd473e; }
}

@media (prefers-reduced-motion: no-preference) {
  .dealer-hero::before { animation: hero-heat-drift 12s ease-in-out infinite alternate; }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero-word-shine {
      display: inline-block;
      color: transparent;
      background: var(--inverse) linear-gradient(105deg, transparent 18%, #ffb088 42%, #fff8ee 51%, #ee905c 61%, transparent 82%) no-repeat -200% 0 / 65% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: hero-word-shine 7s linear infinite;
    }
  }
  [data-scroll-stack].is-stacked { isolation: isolate; }
  [data-scroll-stack].is-stacked > :is(.dealer-hero, .dealer-catalog) { position: sticky; top: min(0px, calc(100svh - var(--panel-height, 100svh))); min-height: 100svh; }
  [data-scroll-stack].is-stacked > .dealer-hero { display: grid; align-items: center; min-height: calc(100svh - var(--stack-header-height, 94px)); z-index: 1; }
  [data-scroll-stack].is-stacked > .dealer-catalog { z-index: 2; }
  [data-scroll-stack].is-stacked > .dealer-production { position: relative; z-index: 3; }
  [data-scroll-stack].is-stacked > section:has(:focus-visible) { z-index: 6; }
  .product-stage.is-ready .stage-product { animation: stage-arrive 880ms var(--ease-out) both; }
  .product-stage.is-ready .stage-product:nth-child(2) { animation-delay: 100ms; }
  .product-stage.is-ready .stage-product:nth-child(3) { animation-delay: 200ms; }
  .product-stage[data-motion="pointer"] .stage-grid { transition: grid-template-columns 270ms var(--ease-out); }
  .product-stage[data-motion="pointer"] .stage-product img { transition: transform 260ms var(--ease-out); }
  .product-stage[data-motion="pointer"] .stage-product[aria-pressed="true"]::after { animation: stage-sweep 620ms var(--ease-out) both; }
  .product-stage[data-motion="pointer"] .stage-motors a { animation: stage-arrive 420ms var(--ease-out) both; }
  .product-stage[data-motion="pointer"] .stage-motors a:nth-child(2) { animation-delay: 55ms; }
  .product-stage[data-motion="pointer"] .stage-motors a:nth-child(3) { animation-delay: 110ms; }
  .dealer [data-reveal].has-entered { animation-duration: 800ms; }
  .factory-gallery.is-scroll-linked::after { content: ""; display: block; height: clamp(140px, 28svh, 280px); }
  .is-scroll-linked .factory-gallery-frame { position: sticky; top: clamp(12px, 7svh, 72px); }
  .is-scroll-linked .factory-gallery-images { position: relative; aspect-ratio: 5 / 3; max-height: 78svh; overflow: hidden; background: var(--deep); }
  .is-scroll-linked .factory-gallery-images img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .is-scroll-linked .factory-gallery-images img:first-child { object-position: 50% 62%; }
  .is-scroll-linked .factory-gallery-images img:last-child { opacity: var(--workshop-progress, 0); }
  .is-scroll-linked .factory-gallery-footer { min-height: calc(2lh + 9px); }
  .factory-route.has-entered::before { animation: route-draw 1350ms 160ms var(--ease-out) both; }
  .winding.has-entered {
    --winding-draw-time: 1110ms;
    --triangle-draw-delay: 280ms;
    --winding-roll-start: calc(var(--triangle-draw-delay) + var(--winding-draw-time));
    --winding-roll-time: 890ms;
    --winding-join-time: 390ms;
  }
  .winding.has-entered .winding-line { stroke-dasharray: 1; animation: winding-draw var(--winding-draw-time) 160ms ease-in-out both; }
  .winding.has-entered .winding-triangle .winding-line { animation-delay: var(--triangle-draw-delay); }
  .winding.has-entered :is(.winding-disc, .winding-ticks) { animation: winding-disc calc(var(--winding-roll-start) + var(--winding-roll-time)) linear both; }
  .winding.has-entered .winding-star { animation: roll-star var(--winding-roll-time) var(--winding-roll-start) cubic-bezier(.42, 0, .25, 1) both; }
  .winding.has-entered .winding-triangle { animation: roll-triangle var(--winding-roll-time) var(--winding-roll-start) cubic-bezier(.42, 0, .25, 1) both; }
  .winding.has-entered .winding-union { animation: winding-join var(--winding-join-time) calc(var(--winding-roll-start) + var(--winding-roll-time) - var(--winding-join-time)) var(--ease-out) both; }
  @media (hover: hover) and (pointer: fine) {
    .stage-product img, .dealer-product img { transition: transform 220ms var(--ease-out); }
    .stage-product:hover img { transform: scale(1.04); }
    .dealer-product:hover img { transform: scale(1.03); }
  }
  @supports (animation-timeline: scroll(root block)) {
    .page-motion-progress { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 3px; pointer-events: none; background: #df7c6d; transform-origin: left; animation: route-draw linear both; animation-timeline: scroll(root block); }
  }
}

@keyframes hero-heat-drift {
  from { transform: translate(-8%, 5%); }
  to { transform: translate(7%, -6%); }
}
@keyframes hero-word-shine {
  from { background-position: -200% 0; }
  48%, to { background-position: 300% 0; }
}
@keyframes stage-arrive { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stage-sweep { to { transform: translateX(110%); } }
@keyframes winding-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes route-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes winding-disc { 0% { opacity: 0; } 29%, 61% { opacity: 1; } 85% { opacity: .23; } 100% { opacity: 0; } }
@keyframes roll-star { to { transform: translateX(93px) rotate(120deg); } }
@keyframes roll-triangle { to { transform: translateX(-93px) rotate(-120deg); } }
@keyframes winding-join { from { opacity: 0; } to { opacity: 1; } }