.home-page .hero-reception {
  background: radial-gradient(ellipse at 77% 30%, #23384e 0%, transparent 52%), #0b1725;
  border-bottom: 1px solid #b7976333;
}

.home-page .hero-reception::before {
  background-image: none;
}

.home-page .hero-reception .hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  min-height: 650px;
  gap: clamp(26px, 5vw, 76px);
  padding-block: 52px;
}

.home-page .hero-reception .hero-copy {
  padding: 0;
}

.home-page .hero-reception h1 {
  font-size: clamp(43px, 5.6vw, 79px);
  line-height: .99;
  letter-spacing: -.069em;
  margin-block: 23px;
}

.home-page .hero-reception h1 em {
  color: #e7cea5;
}

.home-page .hero-reception .hero-actions {
  align-items: center;
  gap: 12px 22px;
}

.hero-reception .hero-booking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #f1e8d9;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.hero-reception .hero-booking:hover {
  color: #f9d9a6;
}

.reception {
  margin: 0;
  min-width: 0;
  border: 1px solid #75869b55;
  border-radius: 18px;
  background: #101d2c;
  box-shadow: 0 32px 80px #060b134d;
  overflow: hidden;
}

.reception-caption {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 12px;
  padding: 12px 19px;
  border-bottom: 1px solid #8fa0b327;
}

.reception-caption h2 {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: -.024em;
}

.reception-caption > span {
  color: #c7d0dc;
  font-size: 11px;
}

.reception-stage {
  position: relative;
  overflow: clip;
  height: clamp(263px, 26vw, 340px);
  background: radial-gradient(ellipse at 50% 48%, #30475d 0%, #1a2a3d 45%, #111d2d 82%);
  touch-action: pan-y pinch-zoom;
}

.reception[data-ready] .reception-stage {
  cursor: grab;
}

.reception[data-ready] .reception-stage.is-dragging {
  cursor: grabbing;
}

.reception-grid {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 122%;
  top: 37%;
  background-image: linear-gradient(#9bb2c524 1px, transparent 1px), linear-gradient(90deg, #9bb2c524 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse, #000 8%, transparent 70%);
  transform: perspective(340px) rotateX(55deg);
  pointer-events: none;
}

.reception-view {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 82%;
  max-width: 354px;
  height: 73%;
  perspective: 850px;
  pointer-events: none;
}

.reception-model {
  --turn: -14deg;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(13deg) rotateY(var(--turn)) rotateZ(-7deg);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}

.is-dragging .reception-model {
  transition: none;
}

.reception-tray {
  --lift: 0px;
  position: absolute;
  width: 82%;
  height: 64px;
  left: 9%;
  top: calc(50% + var(--offset) - 32px);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--depth) + var(--lift))) translateY(calc(var(--lift) * -.19));
  transition: transform 440ms cubic-bezier(.2,.75,.25,1);
}

.tray-inbox { --depth: 54px; --offset: -62px; }
.tray-register { --depth: 22px; --offset: 0px; }
.tray-review { --depth: -10px; --offset: 62px; }

.tray-face,
.tray-rim {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

.tray-rim {
  border: 1px solid #8da1b080;
  background: #172b3c;
  box-shadow: -7px 16px 22px #070e19a6;
  transform: translate3d(-3px, 7px, -9px);
}

.tray-face {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 8px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  color: #f5f7fa;
  border: 1px solid #667d91;
  background: linear-gradient(130deg,#314b60,#20364a 62%,#294358);
  box-shadow: inset 0 1px #c5d8e137, inset 0 -3px #080f1744;
  transform: translateZ(1px);
}

.tray-face svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: .92;
}

.tray-face small,
.tray-face strong {
  display: block;
}

.tray-face small {
  font: 650 9px/1.5 ui-monospace, monospace;
  letter-spacing: .08em;
  opacity: .85;
}

.tray-face strong {
  font-size: clamp(12px, 1.65vw, 16px);
  line-height: 1.25;
}

.tray-light {
  width: 7px;
  height: 7px;
  border: 1px solid #e1eaf0ab;
  border-radius: 50%;
}

.reception[data-step="1"] .tray-inbox,
.reception[data-step="2"] .tray-register,
.reception[data-step="3"] .tray-review {
  --lift: 28px;
}

.reception[data-step="1"] .tray-inbox .tray-face,
.reception[data-step="2"] .tray-register .tray-face,
.reception[data-step="3"] .tray-review .tray-face {
  color: #271f15;
  border-color: #fae0b5;
  background: linear-gradient(128deg,#f1dbb7,#cfad76 72%,#ddbf8d);
  box-shadow: inset 0 1px #fff5da, inset 0 -3px #74562655;
}

.reception[data-step="1"] .tray-inbox .tray-light,
.reception[data-step="2"] .tray-register .tray-light,
.reception[data-step="3"] .tray-review .tray-light {
  border: 0;
  background: #5c411e;
}

.reception-rotation {
  position: absolute;
  display: flex;
  gap: 6px;
  bottom: 9px;
  right: 10px;
}

.reception-rotation button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #7c8ea17a;
  border-radius: 7px;
  background: #121e2c;
  color: #f0e3d1;
  font-size: 22px;
}

.reception-rotation button:hover {
  background: #33495f;
}

.reception-controls {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  padding: 8px;
  border-top: 1px solid #8fa0b327;
  border-bottom: 1px solid #8fa0b327;
}

.reception-controls button {
  min-height: 45px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #e2e7ec;
  font-size: 12px;
  font-weight: 650;
}

.reception-controls button span {
  margin-right: 4px;
  color: #d7b98b;
  font: 11px ui-monospace, monospace;
}

.reception-controls button:hover {
  background: #26384a;
}

.reception-controls button[aria-pressed="true"] {
  background: #302c29;
  border-color: #c6a57589;
  color: #ffebc9;
}

.reception-story {
  min-height: 84px;
  padding: 14px 19px 17px;
  color: #d2dce6;
}

.reception-story p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.reception-story p + p {
  margin-top: 8px;
}

.reception-story strong {
  color: #f7e3bf;
}

.reception [hidden] {
  display: none;
}

.reception button:focus-visible {
  outline-color: #f4d8ab;
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .home-page .hero-reception .hero-grid {
    grid-template-columns: minmax(0,1fr);
    min-height: 0;
    gap: 28px;
    padding-block: 36px 38px;
  }

  .home-page .hero-reception h1 {
    font-size: clamp(40px, 10.5vw, 64px);
    margin-block: 16px;
  }

  .home-page .hero-reception .hero-actions {
    margin-top: 18px;
  }

  .home-page .hero-reception .hero-note {
    margin-top: 14px;
  }

  .home-page .hero-reception .hero-actions .btn {
    flex: 0 1 auto;
  }

  .reception-stage {
    height: 260px;
  }

  .reception-story {
    min-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reception-model,
  .reception-tray {
    transition: none;
  }
}