:root {
  --text: #cbe5ff;
  --glow: 0 0 4px rgba(205,233,255,.85), 0 0 12px rgba(100,177,255,.68), 0 0 25px rgba(45,125,235,.38);
  --panel: rgba(1, 7, 19, .48);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #030b19; color: var(--text); font-family: 'Trebuchet MS', Arial, sans-serif; }
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #030b19 url('bg-desktop.webp') center center / cover no-repeat;
}
.identity {
  position: absolute;
  top: 8%; left: 5%;
  width: max-content;
  max-width: 90vw;
  text-shadow: var(--glow);
}
.identity h1 {
  font-size: clamp(34.1px, 3.938vw, 77px);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.06;
  white-space: nowrap;
  margin: 0;
}
.identity p {
  margin: 13px 0 0;
  font-size: clamp(9.5px, .91vw, 18px);
  letter-spacing: .005em;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.destinations {
  position: absolute;
  top: 74%; left: 5%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 31vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(11px, 1.9vh, 23px);
}
.destination {
  display: block;
  width: 100%;
  padding: clamp(10px, 1.15vw, 18px) clamp(14px, 1.5vw, 26px);
  border-radius: 11px;
  background: var(--panel);
  text-align: center;
  color: var(--text);
  text-decoration: none;
  text-shadow: var(--glow);
  transition: background .2s ease, color .2s ease;
}
.destination:hover, .destination:focus-visible { background: rgba(5, 17, 37, .76); color: #f0f8ff; }
.destination:focus-visible { outline: 2px solid #a4d3ff; outline-offset: 4px; }
.destination-title { display: block; font-size: clamp(11px, 1.02vw, 19px); letter-spacing: .01em; font-weight: 500; white-space: nowrap; }
.quote {
  position: absolute;
  right: 4.5%; top: 76%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 42vw;
  margin: 0;
  padding: clamp(13px, 1.5vw, 25px) clamp(15px, 1.65vw, 29px);
  border-radius: 13px;
  background: var(--panel);
  text-align: center;
  text-shadow: var(--glow);
}
.quote blockquote { margin: 0; font-size: clamp(12px, 1.2vw, 22px); line-height: 1.6; font-style: italic; font-weight: 400; }
.quote figcaption { margin-top: 8px; font-size: clamp(10px, .8vw, 15px); opacity: .9; }
@media (max-width: 1100px) {
  .scene { background-image: url('bg-tablet.webp'); }
  .identity { max-width: 90vw; }
  .identity h1 { font-size: clamp(28.6px, 4.51vw, 52.8px); }
  .identity p { font-size: clamp(8.5px, 1.10vw, 13.5px); }
  .destinations { max-width: 42vw; }
  .destination-title { font-size: clamp(10px, 1.2vw, 15px); }
  .quote { max-width: 47vw; }
  .quote blockquote { font-size: clamp(11px, 1.2vw, 16px); }
}
@media (max-width: 650px) {
  .scene {
    min-height: max(740px, 100svh);
    background-image: url('bg-mobile.webp');
    background-position: center center;
  }
  .identity { top: 7%; left: 6%; width: max-content; max-width: 90%; }
  .identity h1 { font-size: clamp(33px, 9.24vw, 53.9px); letter-spacing: .095em; }
  .identity p { font-size: clamp(8.5px, 2.2vw, 13px); white-space: nowrap; line-height: 1.6; }
  .destinations { top: 57%; left: 6%; max-width: 88%; gap: 13px; }
  .destination { padding: 12px 15px; }
  .destination-title { font-size: clamp(11px, 2.85vw, 15px); white-space: normal; }
  .quote { top: auto; bottom: 6%; transform: none; left: 6%; right: 6%; width: 88%; max-width: none; padding: 14px; }
  .quote blockquote { font-size: clamp(12px, 3.25vw, 15px); }
  .quote blockquote br { display: none; }
  .quote figcaption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .destination { transition: none; } }