/* LIVEUIN_DOCS_PROJECT_MARKER: public-marketing-site */

:root {
  --bg-dark: #071126;
  --bg-dark-2: #0c1937;
  --bg-dark-3: #111d4a;
  --bg-light: #f5f7fd;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-dark: rgba(10, 18, 42, 0.94);
  --ink: #0b1430;
  --text: #1d2746;
  --muted: #5f6984;
  --line: rgba(19, 31, 66, 0.09);
  --line-dark: rgba(255, 255, 255, 0.12);
  --purple: #5c31ff;
  --purple-2: #7f59ff;
  --blue: #1f8ffb;
  --cyan: #25c4f3;
  --green: #12b26a;
  --orange: #f59d0c;
  --pink: #ff4f7b;
  --shadow: 0 26px 70px rgba(7, 17, 38, 0.16);
  --shadow-soft: 0 10px 30px rgba(7, 17, 38, 0.08);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --site-width: min(1380px, calc(100vw - 32px));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(92, 49, 255, 0.2), transparent 26%),
    radial-gradient(circle at top right, rgba(37, 196, 243, 0.16), transparent 24%),
    linear-gradient(180deg, var(--bg-dark) 0 22rem, var(--bg-light) 22rem 100%);
  font-family: Inter, "Avenir Next", "Segoe UI", sans-serif;
}

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

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

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.skip-link {
  position: absolute;
  z-index: 40;
  left: 16px;
  top: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-root {
  position: relative;
  min-height: 100vh;
}

.site-shell {
  width: var(--site-width);
  margin: 16px auto 48px;
}

.site-header {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(7, 17, 38, 0.82);
  backdrop-filter: blur(20px);
  box-shadow: 0 14px 40px rgba(3, 8, 23, 0.24);
  color: #fff;
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-u {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #4e2ee7 0%, #823bff 48%, #9eea5b 100%);
}

.brand-copy {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 600;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.nav-group {
  position: relative;
}

.nav-trigger,
.nav-link,
.header-cta,
.header-secondary,
.header-language {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-trigger {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-trigger::marker,
.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group[open] .nav-trigger,
.nav-group.is-active .nav-trigger,
.nav-link.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(92, 49, 255, 0.95), rgba(40, 193, 242, 0.72));
  box-shadow: 0 8px 24px rgba(92, 49, 255, 0.24);
}

.nav-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: grid;
  gap: 8px;
  min-width: 220px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(8, 16, 38, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(3, 8, 23, 0.3);
}

.nav-popover a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.92);
  transition: background 160ms ease, transform 160ms ease;
}

.nav-popover a:hover,
.nav-popover a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-trigger:hover,
.nav-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-language {
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.header-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.header-cta,
.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  box-shadow: 0 12px 26px rgba(92, 49, 255, 0.3);
}

.primary-button:hover,
.header-cta:hover,
.primary-button:focus-visible,
.header-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.button-reset,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

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

.ghost-button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(19, 31, 66, 0.08);
  box-shadow: 0 8px 24px rgba(7, 17, 38, 0.08);
}

.ghost-button:hover,
.secondary-button:hover,
.ghost-button:focus-visible,
.secondary-button:focus-visible {
  transform: translateY(-1px);
}

.page-main {
  display: grid;
  gap: 20px;
}

.hero {
  position: relative;
  display: grid;
  gap: 24px;
  overflow: hidden;
  padding: 34px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 8% 12%, rgba(125, 93, 255, 0.36), transparent 22%),
    radial-gradient(circle at 92% 12%, rgba(37, 196, 243, 0.24), transparent 18%),
    linear-gradient(135deg, #071126 0%, #101b43 42%, #0d1540 100%);
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -18% -44% auto;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 196, 243, 0.14), transparent 66%);
  pointer-events: none;
}

.hero--split {
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

.hero-eyebrow {
  margin: 0;
  color: rgba(167, 228, 255, 0.98);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  max-width: 11.4ch;
  font-size: clamp(44px, 6vw, 74px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #69d4ff 0%, #8a68ff 42%, #b271ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  margin: 0;
  max-width: 60ch;
  color: rgba(235, 239, 255, 0.86);
  font-size: 18px;
  line-height: 1.7;
}

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

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero-frame {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 30px 70px rgba(3, 8, 23, 0.34);
}

.hero-frame img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 9, 24, 0.12), rgba(4, 9, 24, 0.38) 52%, rgba(4, 9, 24, 0.78) 100%),
    linear-gradient(135deg, rgba(7, 17, 38, 0.08), rgba(7, 17, 38, 0.12));
  pointer-events: none;
}

.hero-frame .hero-frame-copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.hero-frame-copy strong {
  font-size: 24px;
  line-height: 1.1;
}

.hero-frame-copy span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.visual-float {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: min(360px, calc(100% - 48px));
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 48px rgba(7, 17, 38, 0.2);
  color: var(--ink);
  backdrop-filter: blur(16px);
}

.visual-float h3 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.2;
}

.visual-float .metric-list {
  display: grid;
  gap: 10px;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.metric-row strong {
  font-size: 14px;
}

.metric-row span:last-child {
  color: var(--green);
  font-weight: 800;
}

.visual-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.stack-card,
.info-card,
.feature-card,
.quote-card,
.brand-card,
.city-card,
.property-card,
.collection-card,
.plan-card,
.trust-card,
.contact-card,
.solution-card,
.article-card,
.detail-card,
.booking-card,
.checkout-card,
.filter-panel,
.search-result-card,
.sidebar-card,
.map-panel-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.stack-card {
  padding: 18px;
}

.stack-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.2;
}

.stack-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.stack-card .stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(92, 49, 255, 0.09);
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
}

.stack-card.stack-card--dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.stack-card.stack-card--dark p {
  color: rgba(255, 255, 255, 0.78);
}

.page-section {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(19, 31, 66, 0.06);
  box-shadow: var(--shadow-soft);
}

.page-section--dark {
  color: #fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(92, 49, 255, 0.32), transparent 28%),
    linear-gradient(135deg, #0c1431, #111f4c 72%, #0c183a);
  border-color: rgba(255, 255, 255, 0.08);
}

.section-heading {
  display: grid;
  gap: 8px;
}

.section-heading .eyebrow {
  margin: 0;
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.section-heading p {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  line-height: 1.7;
}

.page-section--dark .section-heading .eyebrow {
  color: rgba(164, 226, 255, 0.96);
}

.page-section--dark .section-heading p {
  color: rgba(235, 239, 255, 0.82);
}

.grid {
  display: grid;
  gap: 14px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.promise-card,
.feature-card,
.solution-card,
.stat-card,
.quote-card,
.contact-card,
.trust-card,
.plan-card {
  padding: 22px;
}

.promise-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
}

.promise-top,
.feature-top,
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.icon-badge {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  background: rgba(92, 49, 255, 0.08);
  color: var(--purple);
}

.icon-badge.is-blue {
  background: rgba(31, 143, 251, 0.12);
  color: var(--blue);
}

.icon-badge.is-green {
  background: rgba(18, 178, 106, 0.12);
  color: var(--green);
}

.icon-badge.is-orange {
  background: rgba(245, 157, 12, 0.14);
  color: var(--orange);
}

.icon-badge.is-pink {
  background: rgba(255, 79, 123, 0.12);
  color: var(--pink);
}

.promise-card h3,
.feature-card h3,
.solution-card h3,
.quote-card h3,
.brand-card h3,
.city-card h3,
.property-card h3,
.collection-card h3,
.plan-card h3,
.trust-card h3,
.contact-card h3,
.stat-card h3,
.article-card h3,
.detail-card h3,
.booking-card h3,
.checkout-card h3,
.filter-panel h3,
.sidebar-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.promise-card p,
.feature-card p,
.solution-card p,
.quote-card p,
.brand-card p,
.city-card p,
.property-card p,
.collection-card p,
.plan-card p,
.trust-card p,
.contact-card p,
.stat-card p,
.article-card p,
.detail-card p,
.booking-card p,
.checkout-card p,
.filter-panel p,
.sidebar-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.promise-card ul,
.feature-card ul,
.solution-card ul,
.plan-card ul,
.trust-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.promise-card li,
.feature-card li,
.solution-card li,
.plan-card li,
.trust-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  line-height: 1.45;
}

.promise-card li::before,
.feature-card li::before,
.solution-card li::before,
.plan-card li::before,
.trust-card li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--purple);
  font-size: 14px;
  font-weight: 800;
}

.card-link .icon {
  width: 16px;
  height: 16px;
}

.card-link--light {
  color: #fff;
}

.section-band {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: 30px;
}

.section-band--dark {
  color: #fff;
  background:
    radial-gradient(circle at 0% 100%, rgba(31, 143, 251, 0.24), transparent 26%),
    linear-gradient(135deg, #0b1430, #161e52 58%, #123b62);
  box-shadow: var(--shadow);
}

.section-band--light {
  background: linear-gradient(180deg, #f9fbff, #edf2ff);
  border: 1px solid rgba(19, 31, 66, 0.06);
  box-shadow: var(--shadow-soft);
}

.section-band .band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.band-head h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.band-head p {
  margin: 0;
  max-width: 66ch;
  color: inherit;
  opacity: 0.78;
  line-height: 1.65;
}

.stat-band {
  display: grid;
  gap: 16px;
  padding: 26px 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 6% 10%, rgba(37, 196, 243, 0.18), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(92, 49, 255, 0.24), transparent 22%),
    linear-gradient(135deg, #0d1540, #16225f 55%, #0d2d52);
  box-shadow: var(--shadow);
}

.stat-band .section-heading h2,
.stat-band .section-heading p,
.stat-band .section-heading .eyebrow {
  color: #fff;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.82);
}

.stat-value {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.stat-sparkline {
  margin-top: 14px;
  height: 42px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 42%, rgba(92, 49, 255, 0.08) 42% 100%),
    linear-gradient(90deg, rgba(92, 49, 255, 0.14) 0 18%, rgba(37, 196, 243, 0.08) 18% 37%, rgba(18, 178, 106, 0.11) 37% 58%, rgba(92, 49, 255, 0.14) 58% 100%);
  position: relative;
  overflow: hidden;
}

.stat-sparkline::after {
  content: "";
  position: absolute;
  inset: 11px 8px auto 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, currentColor 14%, currentColor 40%, transparent 62%, currentColor 76%, currentColor 100%);
  opacity: 0.34;
}

.search-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(19, 31, 66, 0.08);
  box-shadow: 0 22px 55px rgba(7, 17, 38, 0.16);
}

.search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--muted);
  background: #f1f4fb;
  border: 1px solid transparent;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.search-tabs button.is-active,
.search-tabs button:hover,
.search-tabs button:focus-visible {
  color: var(--purple);
  background: rgba(92, 49, 255, 0.08);
  border-color: rgba(92, 49, 255, 0.18);
}

.search-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 12px;
}

.search-field,
.search-cta {
  display: grid;
  align-content: center;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(19, 31, 66, 0.09);
  background: #fbfcff;
  text-align: left;
}

.search-field strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.2;
}

.search-field small {
  color: var(--muted);
  font-size: 13px;
}

.search-cta {
  min-width: 118px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: 0;
  font-weight: 900;
}

.popular-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text);
  background: #f1f4fb;
  border: 1px solid rgba(19, 31, 66, 0.06);
}

.hero-support-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(135deg, #13265f, #1c2f7b 50%, #2c7ea0);
  color: #fff;
  box-shadow: var(--shadow);
}

.hero-support-card .support-copy {
  display: grid;
  gap: 4px;
}

.hero-support-card .support-copy strong {
  font-size: 18px;
}

.hero-support-card .support-copy span {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.hero-support-card .support-icon {
  display: inline-grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.logo-pill {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(19, 31, 66, 0.08);
  color: rgba(11, 20, 48, 0.72);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
}

.logo-pill small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.city-card {
  min-height: 220px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(5, 9, 23, 0.08), rgba(5, 9, 23, 0.78)),
    var(--card-image, linear-gradient(135deg, #1f2b67, #0e132d));
}

.city-card img,
.property-card img,
.collection-card img,
.plan-card img,
.support-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-card .card-copy,
.property-card .card-copy,
.collection-card .card-copy,
.plan-card .card-copy {
  position: absolute;
  inset: auto 16px 16px 16px;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.city-card .meta,
.property-card .meta,
.collection-card .meta,
.plan-card .meta {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 700;
}

.city-card .count,
.property-card .count,
.collection-card .count,
.plan-card .count {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 800;
}

.card-image-frame {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border-radius: 22px;
}

.card-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 13, 26, 0.06), rgba(8, 13, 26, 0.68));
}

.collection-card {
  min-height: 260px;
  color: #fff;
  background: linear-gradient(135deg, rgba(13, 18, 42, 0.1), rgba(13, 18, 42, 0.78));
}

.collection-copy {
  position: absolute;
  inset: auto 18px 18px 18px;
  display: grid;
  gap: 4px;
  z-index: 1;
}

.collection-copy .meta {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.property-card {
  min-height: 290px;
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 13, 26, 0.04), rgba(8, 13, 26, 0.72));
}

.property-card .property-top {
  position: absolute;
  inset: 14px 14px auto 14px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.badge,
.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.mini-badge {
  background: rgba(92, 49, 255, 0.1);
  color: var(--purple);
}

.property-copy {
  position: absolute;
  inset: auto 16px 16px 16px;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.property-copy .price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 900;
}

.property-copy .detail {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
}

.property-copy .features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.property-copy .features span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
}

.operator-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.operator-copy {
  display: grid;
  gap: 2px;
}

.operator-copy strong {
  font-size: 13px;
  line-height: 1.2;
}

.operator-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

.operator-initials {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.operator-initials.is-blue,
.operator-pill.is-blue {
  background: rgba(31, 143, 251, 0.16);
  color: var(--blue);
}

.operator-initials.is-green,
.operator-pill.is-green {
  background: rgba(18, 178, 106, 0.16);
  color: var(--green);
}

.operator-initials.is-orange,
.operator-pill.is-orange {
  background: rgba(245, 157, 12, 0.16);
  color: var(--orange);
}

.operator-initials.is-purple,
.operator-pill.is-purple {
  background: rgba(92, 49, 255, 0.16);
  color: var(--purple);
}

.property-card .operator-initials,
.booking-card .operator-initials {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.operator-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.property-card .operator-pill,
.booking-card .operator-pill {
  justify-self: start;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.operator-line.is-light .operator-copy small,
.search-result-card .operator-copy small,
.brand-card .operator-copy small,
.detail-card .operator-copy small {
  color: var(--muted);
}

.operator-line.is-light .operator-pill {
  justify-self: start;
}

.brand-card,
.detail-card,
.booking-card,
.checkout-card,
.filter-panel,
.sidebar-card,
.map-panel-card,
.source-banner {
  padding: 22px;
}

.source-banner {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.source-banner.is-ready {
  background: linear-gradient(180deg, rgba(18, 178, 106, 0.08), rgba(255, 255, 255, 0.98));
}

.source-banner.is-loading {
  background: linear-gradient(180deg, rgba(31, 143, 251, 0.08), rgba(255, 255, 255, 0.98));
}

.source-banner.is-muted {
  background: linear-gradient(180deg, rgba(92, 49, 255, 0.06), rgba(255, 255, 255, 0.98));
}

.source-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

.source-banner-head strong {
  color: var(--ink);
  font-size: 15px;
}

.source-banner-head span,
.source-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.source-grid strong {
  color: var(--text);
}

.brand-card {
  display: grid;
  gap: 14px;
}

.brand-card-top,
.brand-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-card-meta {
  align-items: flex-end;
}

.brand-card-meta small {
  color: var(--muted);
  font-size: 12px;
}

.search-results-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 0.92fr) minmax(220px, 0.3fr);
  gap: 16px;
  align-items: start;
}

.filter-panel {
  display: grid;
  gap: 16px;
}

.filter-head,
.result-summary,
.search-result-head,
.booking-price,
.booking-meta-grid,
.promo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filter-group {
  display: grid;
  gap: 10px;
}

.filter-group strong,
.result-summary strong,
.booking-price strong {
  color: var(--ink);
}

.filter-list,
.result-tags,
.feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-column {
  display: grid;
  gap: 14px;
}

.search-result-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 14px;
}

.search-result-card img,
.article-card img {
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 18px;
}

.booking-card img {
  min-height: 180px;
  object-fit: cover;
  border-radius: 18px;
}

.search-result-copy,
.search-result-side,
.article-copy {
  display: grid;
  gap: 12px;
}

.search-result-head h3 {
  margin-top: 6px;
}

.search-result-head p {
  margin-top: 4px;
}

.search-result-side {
  align-content: space-between;
  justify-items: end;
  min-width: 132px;
}

.result-price {
  display: grid;
  gap: 4px;
  text-align: right;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(18, 178, 106, 0.1);
  color: var(--green);
  font-weight: 800;
}

.rating-pill.is-quiet {
  background: rgba(92, 49, 255, 0.08);
  color: var(--purple);
}

.rating-pill span {
  color: var(--muted);
  font-weight: 700;
}

.map-panel-card {
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.14)),
    url("/assets/journey-sg.webp") center/cover no-repeat;
}

.map-panel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 20, 48, 0.08), rgba(11, 20, 48, 0.44));
}

.map-chip {
  position: absolute;
  z-index: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(7, 17, 38, 0.26);
}

.map-chip:nth-child(1) {
  top: 18%;
  left: 56%;
}

.map-chip:nth-child(2) {
  top: 36%;
  left: 28%;
}

.map-chip:nth-child(3) {
  top: 52%;
  left: 64%;
}

.map-chip:nth-child(4) {
  bottom: 22%;
  left: 42%;
}

.map-chip.is-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.map-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  gap: 6px;
  color: #fff;
}

.map-copy span {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

.listing-detail-grid,
.checkout-layout,
.blog-layout {
  display: grid;
  gap: 18px;
}

.listing-detail-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.4fr);
  align-items: start;
}

.listing-main,
.listing-info,
.listing-gallery,
.booking-panel,
.checkout-main,
.checkout-side {
  display: grid;
  gap: 16px;
}

.listing-hero-image {
  min-height: 420px;
  border-radius: 24px;
  object-fit: cover;
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.thumb-grid img {
  min-height: 110px;
  object-fit: cover;
  border-radius: 18px;
}

.feature-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(92, 49, 255, 0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.detail-list li,
.detail-list--stack div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.detail-list li span,
.detail-list--stack span {
  display: grid;
  gap: 4px;
}

.detail-list li small {
  color: var(--muted);
}

.booking-price {
  align-items: baseline;
}

.booking-price span,
.result-summary span,
.result-price span,
.booking-card p {
  color: var(--muted);
}

.booking-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-meta-grid div {
  display: grid;
  gap: 4px;
}

.booking-meta-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.checkout-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  align-items: start;
}

.checkout-card {
  display: grid;
  gap: 16px;
}

.form-grid label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.form-grid input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.payment-methods {
  display: grid;
  gap: 10px;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.payment-option.is-active {
  border-color: rgba(92, 49, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(92, 49, 255, 0.18);
}

.promo-row input {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.checkout-submit {
  width: 100%;
  justify-content: center;
}

.blog-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
}

.article-card {
  display: grid;
  overflow: hidden;
}

.article-card.is-featured img {
  min-height: 240px;
}

.article-copy {
  padding: 18px;
}

.article-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sidebar-card {
  display: grid;
  gap: 14px;
}

.sidebar-list {
  display: grid;
  gap: 10px;
}

.sidebar-list a {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(92, 49, 255, 0.05);
}

.sidebar-list span {
  color: var(--muted);
  font-size: 12px;
}

.promo-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 22px;
}

.promo-card.is-green {
  background: linear-gradient(180deg, rgba(18, 178, 106, 0.08), rgba(255, 255, 255, 0.94));
}

.promo-card.is-purple {
  background: linear-gradient(180deg, rgba(92, 49, 255, 0.08), rgba(255, 255, 255, 0.94));
}

.promo-card.is-blue {
  background: linear-gradient(180deg, rgba(31, 143, 251, 0.08), rgba(255, 255, 255, 0.94));
}

.promo-card.is-orange {
  background: linear-gradient(180deg, rgba(245, 157, 12, 0.08), rgba(255, 255, 255, 0.94));
}

.collection-grid,
.city-grid,
.property-grid,
.quote-grid,
.solution-grid,
.feature-grid,
.plan-grid,
.contact-grid {
  display: grid;
  gap: 14px;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.timeline-step {
  position: relative;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(19, 31, 66, 0.08);
}

.timeline-step::before {
  content: attr(data-step);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(92, 49, 255, 0.08);
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
}

.timeline-step h3 {
  margin-bottom: 8px;
}

.timeline-step p {
  color: var(--muted);
}

.quote-card .quote {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

.quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(92, 49, 255, 0.14), rgba(37, 196, 243, 0.14));
  color: var(--purple);
  font-weight: 900;
}

.quote-author strong {
  display: block;
}

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

.cta-band {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 8% 20%, rgba(37, 196, 243, 0.18), transparent 20%),
    linear-gradient(135deg, #10205a, #0f2b69 50%, #0d7b77);
  box-shadow: var(--shadow);
}

.cta-band .cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 18px;
}

.cta-band h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cta-band p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
}

.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.cta-band .cta-actions .ghost-button {
  background: rgba(255, 255, 255, 0.92);
}

.footer {
  display: grid;
  gap: 22px;
  margin-top: 20px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, #0b1430, #071126);
  color: #fff;
  box-shadow: var(--shadow);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.footer-brand {
  display: grid;
  gap: 12px;
}

.footer-brand p {
  margin: 0;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-social a {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links h4 {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.6;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.footer-bottom .bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom .bottom-links a {
  color: inherit;
}

.compact-stack {
  display: grid;
  gap: 12px;
}

.page-note {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.6;
}

.muted {
  color: var(--muted);
}

.align-center {
  align-items: center;
}

details.nav-group[open] .nav-popover {
  animation: popIn 220ms ease both;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.hero-frame,
.visual-float,
.stack-card,
.page-section,
.section-band,
.stat-band,
.cta-band,
.footer {
  animation: drift 8s ease-in-out infinite;
}

.hero-frame,
.visual-float,
.stack-card:nth-child(2n),
.page-section:nth-of-type(2n),
.section-band:nth-of-type(2n),
.stat-band,
.cta-band,
.footer {
  animation-duration: 10s;
}

.site-shell .hero,
.site-shell .page-section,
.site-shell .section-band,
.site-shell .stat-band,
.site-shell .cta-band,
.site-shell .footer {
  animation: fadeRise 700ms ease both;
}

.site-shell .page-section:nth-of-type(2) {
  animation-delay: 80ms;
}

.site-shell .page-section:nth-of-type(3) {
  animation-delay: 130ms;
}

.site-shell .page-section:nth-of-type(4) {
  animation-delay: 180ms;
}

@keyframes fadeRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  .header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .site-nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .footer-grid,
  .stat-grid,
  .grid-5,
  .logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero--split,
  .cta-band .cta-inner,
  .search-results-layout,
  .listing-detail-grid,
  .checkout-layout,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .source-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: 13ch;
  }

  .visual-float {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: -20px;
  }
}

@media (max-width: 920px) {
  .site-shell {
    width: min(100vw - 20px, 1380px);
    margin-top: 10px;
  }

  .site-header {
    position: static;
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 24px;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero,
  .page-section,
  .section-band,
  .stat-band,
  .cta-band,
  .footer {
    padding: 22px;
    border-radius: 24px;
  }

  .hero h1 {
    max-width: 100%;
  }

  .grid-3,
  .grid-4,
  .grid-5,
  .timeline-grid,
  .stat-grid,
  .logo-row,
  .footer-grid,
  .search-fields,
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-cta {
    grid-column: 1 / -1;
  }

  .hero-frame {
    min-height: 320px;
  }

  .hero-frame img {
    min-height: 320px;
  }

  .search-result-card {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .search-result-side {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: stretch;
  }
}

@media (max-width: 680px) {
  body {
    background:
      radial-gradient(circle at top left, rgba(92, 49, 255, 0.18), transparent 24%),
      radial-gradient(circle at top right, rgba(37, 196, 243, 0.12), transparent 22%),
      linear-gradient(180deg, var(--bg-dark) 0 16rem, var(--bg-light) 16rem 100%);
  }

  .site-shell {
    width: min(100vw - 16px, 1380px);
    margin-bottom: 28px;
  }

  .brand-mark {
    font-size: 22px;
  }

  .brand-u {
    width: 30px;
    height: 30px;
  }

  .hero {
    gap: 18px;
    padding: 18px;
  }

  .hero--split {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(34px, 12vw, 52px);
  }

  .hero-lead {
    font-size: 16px;
  }

  .hero-actions,
  .cta-band .cta-actions {
    width: 100%;
  }

  .hero-actions > *,
  .cta-band .cta-actions > *,
  .header-actions > * {
    flex: 1 1 auto;
  }

  .nav-group {
    flex: 0 0 auto;
  }

  .nav-popover {
    position: fixed;
    top: 84px;
    right: 16px;
    left: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .timeline-grid,
  .stat-grid,
  .logo-row,
  .footer-grid,
  .search-fields {
    grid-template-columns: 1fr;
  }

  .search-tabs {
    gap: 8px;
  }

  .search-tabs button {
    min-height: 38px;
    padding-inline: 12px;
  }

  .search-field,
  .search-cta {
    min-height: 66px;
  }

  .hero-support-card {
    grid-template-columns: 1fr;
  }

  .band-head,
  .section-band .band-head,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-social {
    gap: 8px;
  }

  .page-section,
  .section-band,
  .stat-band,
  .cta-band,
  .footer {
    padding: 18px;
  }

  .property-card {
    min-height: 260px;
  }

  .search-result-card,
  .thumb-grid,
  .booking-meta-grid {
    grid-template-columns: 1fr;
  }

  .source-banner {
    padding: 18px;
  }

  .search-result-card img,
  .article-card img,
  .listing-hero-image {
    min-height: 220px;
  }
}