/* ==========================================================================
   Public landing — "Crest", Hotel Pricing Engine. Product front for ANY hotel
   or resort. Minimalist, premium hospitality, a shade of dark (not black), one
   warm brass accent (--gold). Fully fluid (clamp) + explicit breakpoints across
   big/medium/small desktop, tablet and mobile. One subtle ambient drift only
   (no cursor effect). Motion is transform/opacity and respects reduced-motion.
   ========================================================================== */
body.landing {
  background:
    radial-gradient(120% 90% at 50% -10%, #1b1f27 0%, var(--ink-deep) 55%, #0b0d11 100%);
  color: var(--text);
}
body.landing .app-main { min-height: 0; }

.landing-stage {
  position: relative; overflow: hidden;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(1.5rem, 5vw, 5rem);
}

/* the only animation: a very slow, very subtle ambient drift, always present */
.landing-aurora {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 26% 30%, rgba(201, 162, 39, .09), transparent 70%),
    radial-gradient(42% 42% at 76% 68%, rgba(70, 96, 140, .10), transparent 72%);
  filter: blur(26px);
  will-change: transform; transform: translateZ(0);
  animation: aurora-drift 38s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.landing-inner { position: relative; z-index: 1; width: 100%; max-width: 44rem; text-align: left; }

.landing-eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: clamp(.66rem, .6rem + .2vw, .78rem);
  color: rgba(232, 232, 228, .55); font-weight: 600; margin: 0 0 var(--s4);
}
.landing-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.8rem, 1.4rem + 7vw, 6rem); line-height: 1.02;
  letter-spacing: -.01em; color: var(--ink); margin: 0;
}
/* distinct font for the subheading: spaced uppercase mono — a precise "engine" label */
.landing-sub {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .26em; font-weight: 500;
  font-size: clamp(.74rem, .68rem + .35vw, .95rem);
  color: rgba(232, 232, 228, .62); margin: var(--s3) 0 0;
}

/* bigger primary CTA */
.landing-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: clamp(var(--s5), 4vh, var(--s7)); }
/* the landing CTA is just the system brass primary (.btn-primary) + a soft hero glow.
   Glow is a pre-rendered layer faded via opacity (smooth); motion stays the system default. */
body.landing .btn-primary { position: relative; isolation: isolate; }
body.landing .btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 12px 34px rgba(201, 162, 39, .38);
  opacity: 0; transition: opacity 220ms var(--ease); pointer-events: none;
}
body.landing .btn-primary:hover::after { opacity: 1; }

/* the trio — icon in a ring + a single quiet word, set off by a vertical gap.
   The ICON itself enhances on hover (ring brightens + glows, icon scales). */
.landing-trio {
  list-style: none; padding: 0;
  margin-top: clamp(2.75rem, 9vh, 5.5rem);
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 3.5rem);
}
.landing-trio .item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  color: rgba(232, 232, 228, .58); transition: color var(--dur-in) var(--ease); cursor: default;
}
.landing-trio .ic {
  position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); will-change: transform;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease);
}
.landing-trio .ic::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  box-shadow: 0 10px 28px rgba(201, 162, 39, .30);
  opacity: 0; transition: opacity 220ms var(--ease); pointer-events: none;
}
.landing-trio svg { width: 1.55rem; height: 1.55rem; color: var(--gold); opacity: .9; will-change: transform;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.landing-trio .word { font-size: clamp(.66rem, .62rem + .2vw, .76rem); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

.landing-trio .item:hover { color: rgba(232, 232, 228, .92); }
.landing-trio .item:hover .ic {
  border-color: var(--gold); background: rgba(201, 162, 39, .10); transform: translateY(-4px);
}
.landing-trio .item:hover .ic::after { opacity: 1; }
.landing-trio .item:hover svg { transform: scale(1.14); opacity: 1; }

/* ---- responsive across every applicable web size -------------------------- */
/* Big desktop */
@media (min-width: 1536px) { .landing-inner { max-width: 48rem; } }
/* Tablet (big → small): tighten the stage padding */
@media (max-width: 1024px) { .landing-stage { padding: clamp(1.5rem, 6vw, 3.5rem); } }
/* Small tablet / big mobile */
@media (max-width: 600px) {
  .landing-stage { padding: clamp(1.25rem, 7vw, 2.25rem); }
  .landing-trio { gap: 1.5rem; width: 100%; }
}
/* Mobile (big → medium): full-width CTA, evenly-spread trio */
@media (max-width: 440px) {
  .landing-cta { width: 100%; }
  .landing-cta .btn { width: 100%; }
  .landing-trio { justify-content: space-between; gap: 1rem; }
  .landing-trio .ic { width: 2.9rem; height: 2.9rem; }
  .landing-trio svg { width: 1.4rem; height: 1.4rem; }
}
/* Small mobile (≈320–360) */
@media (max-width: 360px) {
  .landing-trio .ic { width: 2.7rem; height: 2.7rem; }
  .landing-trio .word { letter-spacing: .08em; }
  .landing-sub { letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-aurora { animation: none; }
  body.landing .btn-primary:hover,
  .landing-trio .item:hover .ic,
  .landing-trio .item:hover svg { transform: none; }
}