/* --- Nav --- */
.landing-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full-width (no centered max-width): the hero photos span the whole
     viewport in equal thirds, so only a right-hugging cluster reliably
     sits INSIDE the third image on wide screens -- with a centered
     1440px nav the buttons drifted left onto the second photo (founder
     screenshot, both logged-in and logged-out). */
  padding: 20px 28px 20px 32px;
}
.landing-nav-cta { gap: 12px; }

.landing-nav .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--on-ink);
  text-decoration: none;
}

.landing-nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  color: var(--on-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.btn-logout-dark {
  color: var(--on-ink);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  padding: 7px 16px;
}

.btn-logout-dark:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-vivid {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--duration-quick) var(--ease-warm),
              transform var(--duration-quick) var(--ease-warm),
              box-shadow var(--duration-quick) var(--ease-warm);
}

.btn-vivid:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: max(560px, 70vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  overflow: hidden;
  /* Ken Burns drift on the whole photo strip, not per-image -- scaling
     each flex-item image independently would make them paint over their
     neighbors at the seams (transforms don't affect flex layout), so one
     unified, very slow zoom keeps the triptych intact. Slow enough to be
     felt rather than watched; the global reduced-motion rule in main.css
     collapses it to a static frame. */
  animation: hero-drift 26s var(--ease-warm) infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.hero-photo {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deep indigo scrim -- keeps the photos readable while matching the
     violet brand. */
  background:
    linear-gradient(180deg, rgba(15, 12, 41, 0.55) 0%, rgba(15, 12, 41, 0.2) 40%, rgba(15, 12, 41, 0.68) 100%),
    linear-gradient(90deg, rgba(15, 12, 41, 0.35) 0%, rgba(15, 12, 41, 0.1) 25%, rgba(15, 12, 41, 0.1) 75%, rgba(15, 12, 41, 0.35) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  text-align: center;
  transition: opacity 0.2s ease;
}

/* The nav dropdown is anchored near the right edge while this text is
   centered -- at some viewport widths the two compete for the same
   horizontal space, and no fixed pixel offset clears it at every size
   (a narrower viewport actually makes the overlap worse, since the
   centered text ends up proportionally closer to the right-anchored
   menu). Fading the text out whenever the menu is open sidesteps the
   problem instead of chasing it: there's nothing left for the menu's
   opaque background to visibly crop, regardless of screen size. */
body.profile-dropdown-open .hero-inner {
  opacity: 0.1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--on-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0 0 20px;
}

.hero-gradient-text {
  /* High-energy tri-stop sweep -- lavender through hot pink into amber,
     an amped-up take on the brand violet for the hero's one big moment. */
  background: linear-gradient(90deg, #C4B5FD 0%, #F472B6 55%, #FBBF24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  color: var(--on-ink-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 36px;
}

.composer {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 10px 10px 10px 16px;
  box-shadow: 0 20px 50px rgba(15, 12, 41, 0.4);
  text-align: left;
  transition: box-shadow var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm);
}

/* Focused/typing: the same rotating violet-pink-amber ring as the
   companion's generation spinner -- one shared color language for
   "Seenary is listening". */
.composer:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(15, 12, 41, 0.45);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--ring-angle), #7C3AED, #EC4899, #FBBF24, #7C3AED) border-box;
  animation: ring-spin 3s linear infinite;
}

.composer textarea {
  flex: 1;
  border: none;
  resize: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  padding: 8px 0;
  max-height: 180px;
  background: transparent;
  color: var(--ink);
  outline: none;
}

.send-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm);
}

.send-btn:hover:not(:disabled) { background: var(--accent-dark); transform: scale(1.05); }
.send-btn:active:not(:disabled) { transform: scale(0.96); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mic-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-warm), color var(--duration-quick) var(--ease-warm),
              border-color var(--duration-quick) var(--ease-warm);
}

/* Same fix as companion.css's .mic-btn[hidden]: display:grid above
   otherwise overrides the browser's default [hidden] { display:none }
   styling, so hiding this button via JS (for unsupported browsers like
   Firefox) would have had no visual effect without this. */
.mic-btn[hidden] {
  display: none;
}

.mic-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mic-btn.mic-listening {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: mic-pulse 1.4s var(--ease-warm) infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

.mic-message {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  max-width: 260px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 5;
}

.composer-hint {
  font-size: 12px;
  color: var(--on-ink-muted);
  margin: 10px 0 24px;
}

.prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--duration-quick) var(--ease-warm),
              background var(--duration-quick) var(--ease-warm),
              transform var(--duration-quick) var(--ease-warm);
}

.chip:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.scroll-teaser {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s var(--ease-warm);
}

.scroll-teaser:hover {
  transform: translateY(3px);
}

.scroll-teaser-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.scroll-teaser-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.scroll-teaser-arrow {
  display: block;
  margin-top: 6px;
  color: var(--on-ink-muted);
  animation: cue-float 2.2s var(--ease-warm) infinite;
}

@keyframes cue-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 640px) {
  .hero { min-height: 620px; padding: 80px 20px 40px; }
  .hero-headline { font-size: 36px; }
}

/* --- Content sections --- */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.landing-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

.landing-section:last-child { border-bottom: none; }

.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: var(--accent-bg-soft);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.section-heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 560px;
}

.section-sub {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 0 40px;
  line-height: 1.6;
}

/* --- How it works --- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}

/* A real sequence earns a line connecting its steps -- not decoration,
   since the three cards genuinely happen in this order. Sits behind the
   cards at the icon's vertical center; hidden on mobile once the grid
   stacks to a single column, where "connected in a row" no longer
   applies. */
.step-connector {
  position: absolute;
  top: 50px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-bg-soft) 0%, var(--accent) 50%, var(--accent-bg-soft) 100%);
  z-index: 0;
}

.step-card {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform var(--duration-quick) var(--ease-warm), box-shadow var(--duration-quick) var(--ease-warm);
}

.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(var(--shadow-ink), 0.1);
}

.step-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-dark, var(--accent)) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28);
}

.step-number {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}

.step-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* --- Destinations --- */
.destination-marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Full viewport width, breaking out of the page's normal centered
     max-width container -- the moving rows read as a continuous strip
     rather than a boxed-in carousel. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.marquee-row {
  overflow: hidden;
  /* A soft fade at both edges instead of a hard clip -- cards seem to
     dissolve in and out of view rather than being cut off mid-image. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 4px 2px 12px;
  will-change: transform;
}

.marquee-band {
  text-align: center;
  padding: 8px 24px;
}

.marquee-band h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  margin: 0;
  color: var(--ink);
}

@keyframes marquee-rightward {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}

@keyframes marquee-leftward {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

/* "Like a slow train": a long, slow, unhurried loop -- and each row a
   slightly different duration than the other, so the two rows drift in
   and out of alignment rather than looking mechanically synced. */
.marquee-row-a .marquee-track {
  animation: marquee-rightward 75s linear infinite;
}

.marquee-row-b .marquee-track {
  animation: marquee-leftward 88s linear infinite;
}

/* Pausing on hover -- without this, clicking a specific destination
   accurately while it's still drifting past would be genuinely
   frustrating. */
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
  }
}

.destination-card {
  position: relative;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
  width: 260px;
  height: 320px;
  padding: 0;
  cursor: pointer;
  display: block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.destination-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 12, 41, 0.3);
}

.destination-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(15, 12, 41, 0.88) 0%, rgba(15, 12, 41, 0.25) 50%, transparent 72%);
}

.destination-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 12, 41, 0);
  transition: background 0.25s ease;
}

.destination-card:hover::after {
  background: rgba(15, 12, 41, 0.08);
}

.destination-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.destination-card:hover img {
  transform: scale(1.06);
}

.destination-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.destination-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.destination-tagline {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* --- Features --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  cursor: default;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

/* The popup: a self-contained copy of the card's icon/title plus the
   fuller detail text, positioned to float over the original card
   rather than growing it. position:absolute takes this completely out
   of normal document flow -- it can be as tall as its content needs
   without changing the card's own height, the grid row's height, or
   pushing anything below the section. This is what actually keeps the
   page from resizing on hover, at any viewport width. */
.feature-detail-popup {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(var(--shadow-ink), 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.2s var(--ease-warm), transform 0.2s var(--ease-warm), visibility 0.2s;
  pointer-events: none;
}

.feature-detail-popup .feature-icon {
  margin-bottom: 14px;
}

.feature-detail-popup h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--ink);
}

.feature-detail-popup p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.feature-card:hover .feature-detail-popup,
.feature-card:focus-within .feature-detail-popup,
.feature-card.expanded .feature-detail-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.feature-card:hover,
.feature-card:focus-within,
.feature-card.expanded {
  outline: none;
}

/* Warm-leaning tint family -- same class names, sunnier hues. */
.feature-icon-pink { background: #FBE3E0; }
.feature-icon-blue { background: #E0EEF2; }
.feature-icon-indigo { background: #EAE4F4; }
.feature-icon-amber { background: #FBEFD4; }
.feature-icon-green { background: #E3EFDC; }

.feature-card h3 {
  font-size: 15px;
  margin: 0 0 6px;
}

.feature-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .step-grid, .feature-grid { grid-template-columns: 1fr; }
  .step-connector { display: none; }
  .destination-card { width: 210px; height: 270px; }
}

/* --- Closing CTA --- */
.closing-cta {
  /* Electric dusk -- deep violet through the brand accent into fuchsia,
     the highest-energy surface on the page. */
  background: linear-gradient(120deg, #2E1065 0%, #7C3AED 55%, #EC4899 100%);
  text-align: center;
  padding: 80px 24px;
}

.closing-cta h2 {
  font-family: var(--font-display);
  color: var(--on-ink);
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
}

.closing-cta p {
  color: var(--on-ink-muted);
  font-size: 15px;
  margin: 0 0 32px;
}

.btn-cta-white {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 100px;
  text-decoration: none;
}

.btn-cta-white:hover { opacity: 0.92; }

/* --- Footer --- */
.landing-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.footer-brand p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover { color: var(--ink); }

/* Offline "view saved trips" escape hatch in the hero -- revealed by
   offline.js only while the device has no connection. */
/* The hidden attribute must ALWAYS win -- an author display value on
   the class would otherwise override the UA's [hidden]{display:none}
   and show this "offline" button while online (real reported bug). */
.offline-trips-cta[hidden] {
  display: none !important;
}

.offline-trips-cta {
  display: inline-block;
  margin: 14px auto 0;
  padding: 12px 22px;
  border-radius: 100px;
  background: rgba(22, 19, 43, 0.92);
  color: #EDEAFB;
  text-decoration: none;
  font-size: 14.5px;
  border: 1.5px solid #7C3AED;
  box-shadow: 0 10px 30px rgba(10, 8, 24, 0.35);
}

.offline-trips-cta strong {
  color: #A78BFA;
}

.offline-trips-cta:hover {
  background: #1E1936;
}

/* ==========================================================================
   Destination detail modal -- opens when a "Where will you go next" card
   is clicked. Brief: vibrant and travel-friendly, but calming rather than
   visually loud -- a rich photo for warmth and travel feeling, then
   generous whitespace, soft muted-ink text, and gentle motion for
   everything the person actually reads.
   ========================================================================== */

.destination-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 33, 61, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: destination-modal-backdrop-in 0.2s ease;
}

/* display:flex above overrides the browser's default [hidden] rule
   (equal selector specificity, and author styles always win over
   user-agent defaults) -- without this, a "hidden" backdrop still
   renders and blocks clicks across the entire page. Same fix already
   used in this codebase for .mic-btn[hidden]. */
.destination-modal-backdrop[hidden] {
  display: none;
}

@keyframes destination-modal-backdrop-in {
  from { opacity: 0; }
}

.destination-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  background: var(--bg);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(15, 12, 41, 0.35);
  animation: destination-modal-in 0.3s var(--ease-warm);
}

@keyframes destination-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

.destination-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 12, 41, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.destination-modal-close:hover {
  background: rgba(15, 12, 41, 0.6);
}

.destination-modal-hero {
  position: relative;
  height: 220px;
  flex-shrink: 0;
}

.destination-modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.destination-modal-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 12, 41, 0) 40%, rgba(15, 12, 41, 0.75) 100%);
}

.destination-modal-hero-text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  color: #fff;
}

.destination-modal-hero-text h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 4px;
}

.destination-modal-hero-text p {
  font-size: 14px;
  opacity: 0.88;
  margin: 0;
}

.destination-modal-body {
  padding: 24px 28px 8px;
  overflow-y: auto;
}

.destination-modal-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--muted);
}

.destination-modal-rating[hidden] {
  display: none;
}

.destination-modal-stars {
  color: var(--sun);
  letter-spacing: 1px;
}

.destination-modal-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
}

.destination-modal-section {
  margin-bottom: 24px;
}

.destination-modal-section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 12px;
}

.destination-modal-reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.destination-modal-review {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 14px 16px;
}

.destination-modal-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.destination-modal-review-stars {
  color: var(--sun);
  font-size: 12px;
  font-weight: 400;
}

.destination-modal-review p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.review-read-more {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.review-read-more[hidden] {
  display: none;
}

.review-read-more:hover {
  text-decoration: underline;
}

.destination-modal-nearby {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.destination-modal-nearby-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 11px 16px;
}

.destination-modal-nearby-item .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.destination-modal-nearby-item .rating {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sun);
}

.destination-modal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0 24px;
}

.destination-modal-loading[hidden] {
  display: none;
}

.destination-modal-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: destination-modal-spin 0.7s linear infinite;
}

@keyframes destination-modal-spin {
  to { transform: rotate(360deg); }
}

.destination-modal-footer {
  padding: 16px 28px 24px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.destination-modal-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .destination-modal-backdrop, .destination-modal {
    animation: none !important;
  }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s var(--ease-warm);
}

.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* grid-template-rows 0fr -> 1fr for a smooth height animation without
   needing to guess a max-height -- appropriate here (unlike the
   feature-card hover) since a click-to-expand accordion pushing
   content down is the normal, expected behavior for this pattern. */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease-warm);
}

.faq-question[aria-expanded="true"] + .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  margin: 0;
  padding: 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.faq-question[aria-expanded="true"] + .faq-answer-wrap .faq-answer {
  padding-bottom: 20px;
}

/* ==========================================================================
   About Founder
   ========================================================================== */

.founder-card {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-soft);
  border-radius: calc(var(--radius) + 6px);
  padding: 32px;
}

.founder-photo-placeholder {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent-bg-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
}

.founder-text h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 2px;
  color: var(--ink);
}

.founder-title {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 10px;
}

.founder-story {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 640px) {
  .founder-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Feature rows -- replaces the dense card grid with full-width,
   alternating rows so each feature gets real room to be explained,
   revealed one at a time as the user scrolls rather than packed into
   hover-only detail.
   ========================================================================== */

.feature-rows {
  display: flex;
  flex-direction: column;
  gap: 110px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 72px;
}

.feature-row:nth-child(even) {
  flex-direction: row-reverse;
}

.feature-row-visual {
  flex: 0 0 460px;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: calc(var(--radius) + 12px);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(var(--shadow-ink), 0.1);
}

.feature-row-text {
  flex: 1;
}

.feature-row-text h3 {
  font-family: var(--font-display);
  font-size: 34px;
  margin: 8px 0 16px;
  color: var(--ink);
}

.feature-row-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 440px;
}

@media (max-width: 800px) {
  .feature-row-visual {
    flex: 0 0 auto;
    width: 100%;
    height: 340px;
  }
}

@media (max-width: 800px) {
  .feature-row, .feature-row:nth-child(even) {
    flex-direction: column;
    gap: 24px;
  }
  .feature-row-visual {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --- Visual 1: AI That Learns You -- chat bubble sequence --- */
.viz-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 40px;
  width: 100%;
}

.viz-bubble {
  padding: 16px 22px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.45;
  max-width: 85%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-warm), transform 0.4s var(--ease-warm);
}

.feature-row.in-view .viz-bubble-user { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.feature-row.in-view .viz-bubble-ai { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.viz-bubble-user {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.viz-bubble-ai {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.viz-check {
  flex-shrink: 0;
  font-weight: 700;
}

/* --- Visual 2: Works Offline -- phone with no signal, itinerary intact --- */
.viz-phone {
  width: 300px;
  padding: 32px 26px;
  background: var(--ink);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.viz-phone-signal {
  font-size: 14px;
  font-weight: 700;
  color: #F87171;
  margin-bottom: 8px;
}

.viz-phone-item {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-bright), var(--pop));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-warm);
}

.feature-row.in-view .viz-phone-item { opacity: 1; transform: scaleX(1); }
.feature-row.in-view .viz-phone-item:nth-child(2) { transition-delay: 0.1s; }
.feature-row.in-view .viz-phone-item:nth-child(3) { transition-delay: 0.2s; }
.feature-row.in-view .viz-phone-item:nth-child(4) { transition-delay: 0.3s; }
.feature-row.in-view .viz-phone-item:nth-child(5) { transition-delay: 0.4s; }

/* --- Visual 3: Real-Time Alternatives -- swap cards --- */
.viz-swap {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
}

.viz-swap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 24px;
  border-radius: 18px;
  font-size: 22px;
  min-width: 140px;
}

.viz-swap-card span {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}

.viz-swap-out {
  background: var(--bg);
  border: 1px dashed var(--border);
  opacity: 0.6;
}

.viz-swap-in {
  background: var(--accent-bg-soft);
  border: 1px solid var(--accent);
}

.viz-swap-arrow {
  font-size: 40px;
  color: var(--accent);
  font-weight: 700;
}

/* --- Visual 4: Privacy First -- shield with contained data --- */
.viz-shield {
  position: relative;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
}

.viz-shield-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pop);
  animation: viz-shield-orbit 3s linear infinite;
}

.viz-shield-dot-1 { top: 10%; left: 15%; animation-delay: 0s; }
.viz-shield-dot-2 { top: 60%; left: 5%; animation-delay: 1s; }
.viz-shield-dot-3 { top: 20%; right: 10%; animation-delay: 2s; }

@keyframes viz-shield-orbit {
  0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  70% { transform: translate(28px, 18px) scale(0.4); opacity: 0.5; }
  100% { transform: translate(34px, 22px) scale(0); opacity: 0; }
}

/* --- Visual 5: Honest Pacing -- crammed vs relaxed timeline --- */
.viz-pacing {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 0 36px;
}

.viz-pacing-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.viz-pacing-row {
  display: flex;
  gap: 5px;
  margin-bottom: 4px;
}

.viz-pacing-crammed span {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  background: #FCA5A5;
}

.viz-pacing-relaxed span {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--pop));
}

.viz-pacing-caption {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

/* --- Visual 6: You See The Work -- reasoning flow steps --- */
.viz-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 40px;
  width: 100%;
}

.viz-flow-step {
  position: relative;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 17px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-warm), transform 0.4s var(--ease-warm);
}

.feature-row.in-view .viz-flow-step { opacity: 1; transform: translateX(0); }
.feature-row.in-view .viz-flow-step:nth-child(2) { transition-delay: 0.15s; }
.feature-row.in-view .viz-flow-step:nth-child(3) { transition-delay: 0.3s; }

/* Loops continuously once the row is in view, so the sequence keeps
   reading as a live, ongoing process rather than settling into three
   static labels the moment the one-time scroll-in fade finishes. */
.feature-row.in-view .viz-flow-step:not(.viz-flow-step-final) {
  animation: viz-flow-pulse 4.5s ease-in-out infinite;
}
.feature-row.in-view .viz-flow-step:nth-child(1) { animation-delay: 0s; }
.feature-row.in-view .viz-flow-step:nth-child(2) { animation-delay: 1.5s; }

@keyframes viz-flow-pulse {
  0%, 66%, 100% { border-color: var(--border); background: var(--bg); }
  15% { border-color: var(--accent); background: var(--accent-bg-soft); }
}

.viz-flow-step-final {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .viz-bubble, .viz-phone-item, .viz-flow-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .viz-flow-step:not(.viz-flow-step-final) {
    animation: none !important;
  }
  .viz-shield-dot {
    animation: none !important;
  }
}

/* --- Booking-file attach (+) button & drag-and-drop --- */
.attach-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-warm), color var(--duration-quick) var(--ease-warm),
              border-color var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm);
}
.attach-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.attach-btn:disabled { opacity: 0.5; cursor: progress; }
.attach-btn.attach-busy svg { animation: attach-spin 0.9s linear infinite; }
@keyframes attach-spin { to { transform: rotate(180deg); } }

.composer.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 89, 0.25), 0 20px 50px rgba(15, 12, 41, 0.4);
}

.attach-status {
  margin-top: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(15, 12, 41, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: left;
}
.attach-status.attach-status-error { color: #ffd7cd; border-color: rgba(255, 122, 89, 0.5); }

/* --- Dynamic destination pool additions --- */
.marquee-credit {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
  letter-spacing: 0.02em;
}

/* Card whose Wikimedia image couldn't be resolved: branded gradient so
   the marquee never shows a broken-image hole. */
.destination-card-noimg {
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #3b2f63 0%, #7C3AED 55%, #b78bff 100%);
}

/* Traveler essentials grid inside the destination modal */
.destination-modal-essentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 640px) {
  .destination-modal-essentials { grid-template-columns: 1fr; }
}
.destination-essential {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--bg-soft, #F4F6F9);
  border: 1px solid var(--border, #E1E5EC);
  border-radius: 10px;
  padding: 9px 11px;
}
.destination-essential-icon {
  color: var(--accent, #7C3AED);
  flex-shrink: 0;
  margin-top: 2px;
}
.destination-essential-body { display: block; min-width: 0; }
.destination-essential-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #67728A);
  margin-bottom: 2px;
}
.destination-essential-text {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink, #1c2333);
}

/* --- Hero-wide booking drop zone --- */
.hero { position: relative; }
.booking-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(22, 163, 74, 0.28), rgba(16, 185, 129, 0.38));
  backdrop-filter: blur(3px);
  border: 3px dashed rgba(134, 239, 172, 0.9);
  border-radius: 18px;
  margin: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.booking-drag-active .booking-drop-overlay { opacity: 1; }
.booking-drop-overlay-inner {
  text-align: center;
  color: #f0fdf4;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-shadow: 0 2px 12px rgba(6, 78, 59, 0.55);
}
.booking-drop-overlay-inner svg { color: #bbf7d0; animation: drop-bounce 1.1s ease-in-out infinite; }
.booking-drop-overlay-inner strong { font-size: 1.25rem; }
.booking-drop-overlay-inner span { font-size: 0.85rem; opacity: 0.9; }
@keyframes drop-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* While dragging, the composer itself glows green too */
.booking-drag-active .composer {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.35), 0 20px 50px rgba(15, 12, 41, 0.4);
}

/* --- Language picker --- */
.lang-picker { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lang-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); }
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink, #1c2333);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(15, 12, 41, 0.35);
  padding: 14px;
}
.lang-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 4px 2px 8px;
}
.lang-group-label + .lang-grid { margin-bottom: 12px; }
.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.lang-option {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 9px;
  padding: 8px 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lang-option:hover { border-color: var(--accent); color: var(--accent); }
.lang-option.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .lang-menu { width: 290px; }
  .lang-btn span { display: none; } /* icon-only on small screens */
}

/* Card labels while a non-English spread is still loading: a soft
   shimmer bar instead of English text flashing under a localized page. */
.destination-label-pending {
  display: block;
  width: 58%;
  height: 0.9em;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.55), rgba(255,255,255,0.28));
  background-size: 200% 100%;
  animation: destination-label-shimmer 1.4s ease-in-out infinite;
}
@keyframes destination-label-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .destination-label-pending { animation: none; }
}