/* ============================================================
   Shahaf Shai - travel link hub
   Design language: quiet premium dark. One accent, soft glass,
   generous whitespace, no visual noise.
   ============================================================ */

/* ---------- Fonts (self-hosted Heebo variable, Hebrew + Latin) ---------- */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0d0714;
  --bg-elevated: #171021;

  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --accent: #a78bfa;
  --accent-strong: #8b5cf6;
  --accent-deep: #6d28d9;
  --gold: #e8b478;
  --teal: #5eead4;

  --text: #f2eef8;
  --text-muted: #a89bc2;
  --text-faint: #776a92;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --max-width: 620px;

  --font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* legacy token aliases (admin panel) */
  --purple-900: #241536;
  --purple-700: #4c2b7a;
  --purple-500: #8b5cf6;
  --purple-400: #a78bfa;
  --purple-300: #c4b5fd;
  --aurora-green: #34d399;
  --aurora-teal: #5eead4;
  --gold-deep: #b98b52;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html {
  background: var(--bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font);
  min-height: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Background: deep night, single soft aurora ---------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(900px 600px at 50% -12%, rgba(109, 40, 217, 0.34), transparent 65%),
    radial-gradient(700px 500px at 88% 108%, rgba(76, 29, 149, 0.22), transparent 60%),
    var(--bg);
}

.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* animated sky backdrop (stars -> sunrise -> clouds), driven by globe.js.
   height uses the LARGEST viewport so it fills the whole screen - including the
   strip under a translucent/retracting browser toolbar - showing the real sky
   there instead of a black gap. */
.globe-sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  transition: none;
}

.bg-aurora-band {
  position: absolute;
  width: 130vw;
  height: 46vh;
  top: -18vh;
  inset-inline-start: -15vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  background: linear-gradient(100deg, transparent 10%, rgba(139, 92, 246, 0.65) 40%, rgba(94, 234, 212, 0.35) 68%, transparent 92%);
  animation: auroraWave 30s ease-in-out infinite alternate;
}
.bg-aurora-band-2 {
  top: -26vh;
  height: 36vh;
  opacity: 0.12;
  background: linear-gradient(115deg, transparent 15%, rgba(94, 234, 212, 0.5) 50%, rgba(139, 92, 246, 0.4) 80%, transparent 95%);
  animation-duration: 38s;
  animation-delay: -10s;
}

@keyframes auroraWave {
  0%   { transform: translateX(-3%) scaleY(1); }
  100% { transform: translateX(3%) scaleY(1.12); }
}

.bg-stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 11% 14%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 41%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 39% 9%, rgba(196,181,253,0.5), transparent),
    radial-gradient(1px 1px at 54% 30%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 71% 17%, rgba(94,234,212,0.4), transparent),
    radial-gradient(1px 1px at 82% 44%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 93% 24%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 16% 66%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 49% 71%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.4px 1.4px at 66% 90%, rgba(196,181,253,0.4), transparent),
    radial-gradient(1px 1px at 87% 76%, rgba(255,255,255,0.25), transparent);
  background-repeat: repeat;
  background-size: 560px 500px;
  opacity: 0.5;
}

/* ---------- Voye promo banner ---------- */
:root { --voye-blue: #2b1df0; --voye-blue-deep: #1a12b8; --banner-h: 0px; }

.promo-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  background: linear-gradient(100deg, var(--voye-blue) 0%, #3a2ef5 55%, var(--voye-blue-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 26px rgba(43, 29, 240, 0.45);
  overflow: hidden;
  isolation: isolate;
}

/* moving sheen */
.promo-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  animation: promoSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoSheen {
  0%, 100% { inset-inline-start: -60%; }
  55%, 100% { inset-inline-start: 130%; }
}
@media (prefers-reduced-motion: reduce) { .promo-banner::after { animation: none; } }

.promo-wordmark {
  width: 66px;
  height: auto;
  color: #fff;
  flex-shrink: 0;
}

.promo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  flex: 1;
}
.promo-title { font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; }
.promo-sub { font-size: 0.78rem; opacity: 0.92; }
.promo-code {
  display: inline-block;
  padding: 0 7px;
  margin-inline-start: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.promo-cta {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--voye-blue);
  font-weight: 800;
  font-size: 0.86rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease;
}
.promo-banner:hover .promo-cta { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }

@media (max-width: 560px) {
  .promo-banner { gap: 10px; padding: 10px 12px; }
  .promo-wordmark { width: 48px; }
  .promo-title { font-size: 0.86rem; }
  .promo-sub { font-size: 0.7rem; }
  .promo-cta { padding: 8px 13px; font-size: 0.76rem; }
}

/* ---------- Hamburger + fullscreen menu ---------- */
.menu-fab {
  position: fixed;
  top: calc(var(--banner-h, 0px) + 20px);
  inset-inline-end: 20px;
  transition: top 0.3s var(--ease);
  z-index: 80;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(13, 7, 20, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.menu-fab:hover { border-color: var(--border-strong); background: rgba(23, 16, 33, 0.8); }

.menu-fab-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}
.menu-fab-lines span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), width 0.3s var(--ease);
}
.menu-fab-lines span:last-child { width: 66%; align-self: flex-end; }

.menu-fab.is-open .menu-fab-lines span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-fab.is-open .menu-fab-lines span:last-child { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(9, 5, 15, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.menu-nav { text-align: center; }

.menu-nav ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-nav li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: calc(var(--stagger) * 0.045s);
}
.menu-overlay.is-open .menu-nav li { opacity: 1; transform: translateY(0); }

.menu-nav a {
  display: inline-block;
  padding: 8px 22px;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color 0.18s ease;
}
.menu-nav a:hover { color: var(--text); }
.menu-nav a.is-active { color: var(--text); font-weight: 700; }
.menu-nav a.is-active::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  margin: 2px auto 0;
  background: var(--accent);
}

.menu-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.2s ease, color 0.2s ease;
  transition-delay: calc(var(--stagger) * 0.045s);
}
.menu-overlay.is-open .menu-lang { opacity: 1; transform: translateY(0); }
.menu-lang:hover { border-color: var(--border-strong); color: var(--text); }
.menu-lang .icon { width: 16px; height: 16px; }

/* ---------- Page shell ---------- */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 20px 60px;
}

.page-wide { max-width: 1040px; }

.site-footer {
  text-align: center;
  padding: 30px 20px 34px;
  color: var(--text-faint);
  font-size: 0.8rem;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* word-by-word headline reveal */
[data-words] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
[data-words] .wi {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 0.75s var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
[data-words].is-visible .wi { transform: translateY(0); }

.parallax-el { will-change: transform; }

/* ---------- Sections ---------- */
.section {
  padding: clamp(64px, 11vh, 110px) 0 0;
}

.kicker {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.section-body {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 560px;
}

/* ---------- Hero (profile + globe, above the fold) ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 0 8px;
  animation: heroIn 0.9s var(--ease) both;
}

.hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

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

.hero-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(140deg, var(--accent-strong), rgba(94, 234, 212, 0.7));
  box-shadow: 0 8px 40px rgba(109, 40, 217, 0.45);
}
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--bg);
}

.hero-tagline {
  margin: 0;
  max-width: 440px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

@media (min-width: 560px) {
  .hero-avatar { width: 92px; height: 92px; }
  .hero-tagline { font-size: 1.55rem; }
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  transition: opacity 0.4s ease;
}
.scroll-cue:hover { color: var(--text-muted); }
.scroll-cue svg {
  width: 24px;
  height: 24px;
  animation: scrollBounce 1.8s var(--ease) infinite;
}
.scroll-cue-text { opacity: 0.85; }
body.scrolled .scroll-cue { opacity: 0; pointer-events: none; }

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* ---------- Globe search (fly-to) ---------- */
.globe-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  margin: 10px auto 0;
  padding: 6px 6px 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[dir='rtl'] .globe-search { padding: 6px 14px 6px 6px; }
.globe-search:focus-within { border-color: var(--accent); }

.globe-search-icon { display: flex; color: var(--text-faint); }
.globe-search-icon svg { width: 18px; height: 18px; }

.globe-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  /* 16px keeps mobile browsers from auto-zooming (and scrolling) on focus */
  font-size: 16px;
  padding: 6px 2px;
}
.globe-search input:focus { outline: none; }
.globe-search input::placeholder { color: var(--text-faint); }

.globe-search-go {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.18s ease;
}
.globe-search-go:hover { background: var(--accent-deep); }

.globe-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  z-index: 20;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s var(--ease);
}
.globe-search-suggest.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.globe-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.globe-search-item:last-child { border-bottom: none; }
.globe-search-item:hover { background: var(--surface); }
/* tap acknowledgment: a soft tint on the picked row, visible through the
   overlay's brief fade-out - subtle on purpose, the fly-to is the real answer */
.globe-search-item.is-picked {
  background: rgba(167, 139, 250, 0.14);
}
.globe-search-item img { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; }

.globe-pin.is-flagged {
  border-color: var(--gold);
  animation: pinPulse 1s var(--ease) 2;
  z-index: 200 !important;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 0 rgba(232, 180, 120, 0.5); }
  50% { box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 10px rgba(232, 180, 120, 0); }
}

/* ---------- Globe ---------- */
.globe-stage {
  --grow: 1;
  position: relative;
  width: min(80vw, 440px);
  aspect-ratio: 1 / 1;
  margin: 2px auto 0;
  touch-action: pan-y;      /* far from the globe - the page scrolls freely */
  cursor: grab;
  transform: scale(var(--grow));
  transition: transform 0.4s var(--ease);
  will-change: transform;
}
.globe-stage.is-dragging { cursor: grabbing; }

/* once the globe is in focus it owns the touch: rotate in any
   direction and pinch-zoom, exactly like an embedded map */
.globe-stage.is-engaged { touch-action: none; }

/* drawing surface is 2x the stage so a zoomed globe bleeds
   past the frame instead of being clipped by it */
.globe-canvas {
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  display: block;
  pointer-events: none;
}

.globe-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.globe-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 7, 20, 0.9);
  border: 1.5px solid rgba(196, 181, 253, 0.7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  pointer-events: auto;
  cursor: pointer;
}
.globe-pin:hover { border-color: var(--gold); }

.globe-pin-flag {
  width: 17px;
  height: 12.5px;
  border-radius: 2px;
  object-fit: cover;
}

.globe-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(23, 16, 33, 0.96);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.globe-tooltip.is-visible { opacity: 1; }

.globe-controls {
  position: absolute;
  bottom: 6%;
  inset-inline-end: 8%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
}
.globe-stage.is-engaged .globe-controls { opacity: 1; transform: translateY(0); }

/* touch devices pinch-to-zoom, so the +/- buttons only show on desktop.
   (hover:none) catches phones/tablets/in-app browsers that mis-report pointer */
@media (hover: none), (pointer: coarse) {
  .globe-controls { display: none !important; }
}

.globe-zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(13, 7, 20, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.globe-zoom-btn:hover { border-color: var(--border-strong); background: rgba(23, 16, 33, 0.85); }
.globe-zoom-btn:active { transform: scale(0.94); }

/* ---------- Globe compass (align / reset) - paired with the search ---------- */
/* the compass sits beside the search field as a matched round control */
.globe-search-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 460px;
  margin: 10px auto 0;
}
.globe-search-row .globe-search {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.globe-compass {
  flex-shrink: 0;
  width: 52px;
  align-self: stretch;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
}
.globe-compass:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 180, 120, 0.12); }
.globe-compass:active { transform: scale(0.95); }
.globe-compass.is-home .globe-compass-dial { opacity: 0.8; }

.globe-compass-dial {
  width: 30px;
  height: 30px;
  display: block;
  will-change: transform;
  transition: opacity 0.2s ease;
}
.globe-compass-dial svg { width: 100%; height: 100%; display: block; }
.globe-compass-n { fill: #ff4d5e; }
.globe-compass-s { fill: #e6ddfb; }
.globe-compass-hub { fill: #fff; }

/* ---------- Search overlay ----------
   Tapping the hero search opens this fullscreen overlay with its OWN input
   pinned near the top of the screen. Because the focused input is already at
   the top, mobile browsers have nothing to scroll to reveal it - the page and
   the globe stay exactly where they are. */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90px 16px 16px;
  background: radial-gradient(120% 80% at 50% 16%, rgba(12, 7, 22, 0.5), rgba(6, 3, 12, 0.8));
  opacity: 0;
  pointer-events: none;
  /* closing fade is FAST (0.14s): picking a country starts the fly-to on the
     same frame, and this brief dissolve is all the exit feedback needed -
     the globe is already moving underneath it */
  transition: opacity 0.14s ease;
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; transition: opacity 0.28s ease; }

/* the blur lives on a SIBLING layer of the panel, never on an ancestor of the
   input - iOS draws the text caret in the wrong place (outside the pill) when
   any ancestor has a backdrop-filter or an animated transform */
.search-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px) saturate(0.9);
  -webkit-backdrop-filter: blur(4px) saturate(0.9);
}
/* drop the expensive blur layer INSTANTLY on close - fading a full-screen
   backdrop-filter is what made the page feel stuck for a beat afterwards */
.search-overlay:not(.is-open)::before { display: none; }
.search-overlay-panel {
  position: relative;   /* paints above the blur layer; NO transform ever */
  width: min(440px, 100%);
}
.search-overlay .globe-search {
  max-width: none;
  margin: 0;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(167, 139, 250, 0.22);
  /* no backdrop-filter on the input's parent - iOS paints the caret outside
     the pill otherwise; the scrim behind is blurred anyway */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(23, 16, 33, 0.94);
}
/* suggestions flow below the pill inside the panel (not absolutely positioned) */
.search-overlay .globe-search-suggest {
  position: static;
  margin-top: 10px;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  display: none;
  max-height: 46dvh;
  overflow-y: auto;
}
.search-overlay .globe-search-suggest.is-open { display: block; }

/* the hero field is only a trigger for the overlay: the tap lands on the form,
   the input itself can never be focused - so no stray caret can appear on it */
.globe-search-row .globe-search { cursor: pointer; }
.globe-search-row .globe-search input[readonly] { pointer-events: none; }
.search-overlay .globe-search input { caret-color: var(--accent, #a78bfa); }

html.search-lock, body.search-lock {
  overflow: hidden;
  overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-overlay-panel { transition: none; }
}

.globe-hint {
  text-align: center;
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ---------- Country action sheet ---------- */
.country-sheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(7, 4, 12, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.country-sheet.is-open { opacity: 1; pointer-events: auto; }

.country-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 12px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(20px);
  transition: transform 0.3s var(--ease);
  box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.5);
}
.country-sheet.is-open .country-sheet-panel { transform: translateY(0); }

@media (min-width: 560px) {
  .country-sheet { align-items: center; }
  .country-sheet-panel { border-radius: 22px; border-bottom: 1px solid var(--border-strong); }
}

.country-sheet-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.country-sheet-close:hover { background: var(--surface-hover); color: var(--text); }

.country-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-shrink: 0;
  padding-inline-end: 40px;   /* clear the close button */
}
.country-sheet-flag {
  width: 40px;
  height: 29px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.country-sheet-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.country-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;          /* tall (portrait) covers scroll here; head + close stay put */
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -4px;
  padding: 2px 4px;
}
/* keep every item its natural size (scroll instead of squashing the hl circles) */
.country-sheet-actions > * { flex-shrink: 0; }

.country-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.98rem;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--ease);
  animation: sheetItemIn 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.06s + 0.05s);
}
.country-action:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.country-action > span:nth-child(2) { flex: 1; }

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

/* ---------- Instagram-style highlight circles ---------- */
.hl-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.hl-row::-webkit-scrollbar { display: none; }

.hl-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  width: 74px;
  animation: sheetItemIn 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.07s + 0.05s);
}

.hl-ring {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888 75%, #8b5cf6);
  display: block;
  transition: transform 0.22s var(--ease), filter 0.22s ease;
}
.hl-circle:hover .hl-ring { transform: scale(1.06); filter: saturate(1.15); }

.hl-ring img,
.hl-ph {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-elevated);
  background: var(--surface);
}
.hl-ph { color: var(--text-muted); }
.hl-ph svg { width: 26px; height: 26px; }

.hl-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  color: #fff;
}
.country-action-icon svg { width: 21px; height: 21px; }
.country-action-map .country-action-icon { background: linear-gradient(140deg, #8b5cf6, #6d28d9); }
.country-action-insta .country-action-icon { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.country-action-gallery .country-action-icon { background: linear-gradient(140deg, #5eead4, #14b8a6); color: #04211d; }

.country-action-go {
  color: var(--text-faint);
  font-size: 1.3rem;
  transform: scaleX(1);
}
[dir='ltr'] .country-action-go { transform: scaleX(-1); }

.country-sheet-empty {
  margin: 6px 2px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- Link cards ---------- */
.link-section { margin-top: 8px; }

.link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s var(--ease);
}

.link-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.link-card:hover::after { left: 135%; }

.link-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: var(--card-glow, var(--accent));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px -6px var(--card-glow, var(--accent));
}

.link-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  background: var(--card-chip, var(--accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px -2px var(--card-glow, transparent);
}
.link-card-icon .icon { width: 22px; height: 22px; }

/* brand identities */
.link-card[data-brand='instagram'] {
  --card-chip: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888 80%);
  --card-glow: rgba(220, 39, 67, 0.55);
}
.link-card[data-brand='facebook'] {
  --card-chip: #1877f2;
  --card-glow: rgba(24, 119, 242, 0.55);
}
.link-card[data-brand='threads'] {
  --card-chip: linear-gradient(160deg, #3a3a3a, #0a0a0a);
  --card-glow: rgba(255, 255, 255, 0.35);
}
.link-card[data-brand='map-pin'] {
  --card-chip: linear-gradient(140deg, #8b5cf6, #6d28d9);
  --card-glow: rgba(139, 92, 246, 0.55);
}
.link-card[data-brand='tag'] {
  --card-chip: linear-gradient(140deg, #e8b478, #c98d43);
  --card-glow: rgba(232, 180, 120, 0.5);
}
.link-card[data-brand='mail'] {
  --card-chip: linear-gradient(140deg, #5eead4, #14b8a6);
  --card-glow: rgba(94, 234, 212, 0.45);
}

.link-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.link-card-label {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.link-card-host {
  font-size: 0.73rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

.link-card-arrow {
  display: flex;
  align-items: center;
  padding-inline-end: 6px;
  color: var(--text-faint);
  transition: color 0.2s ease, transform 0.25s var(--ease);
}
.link-card-arrow .icon { width: 16px; height: 16px; }
.link-card:hover .link-card-arrow { color: var(--text); transform: translateX(2px); }
[dir='rtl'] .link-card:hover .link-card-arrow { transform: translateX(-2px); }

/* ---------- Section headers ---------- */
.section-heading {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 30px 0 6px;
  letter-spacing: -0.01em;
}

.section-intro {
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 26px;
  font-size: 0.95rem;
}

/* ---------- Cards ---------- */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-wide .card-list {
  grid-template-columns: 1fr;
  max-width: 640px;
}

@media (min-width: 760px) {
  .page-wide .card-list { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

.card {
  position: relative;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease);
}
.card:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}
.card-row .card-title { margin: 0; flex: 1; min-width: 0; }
.card-row .btn { flex-shrink: 0; }

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.card-flag {
  width: 26px;
  height: 19px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.card-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 14px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .icon { width: 16px; height: 16px; }

.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-gold {
  background: var(--gold);
  color: #2a1a06;
  box-shadow: 0 4px 18px rgba(232, 180, 120, 0.25);
}
.btn-gold:hover { background: #f0c48e; }

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { color: var(--text); border-color: var(--text-faint); }

.btn-outline-gold {
  background: rgba(232, 180, 120, 0.06);
  color: var(--gold);
  border: 1px dashed rgba(232, 180, 120, 0.45);
}
.btn-outline-gold:hover { border-color: var(--gold); background: rgba(232, 180, 120, 0.12); }

.btn.is-copied { background: rgba(52, 211, 153, 0.15); color: var(--aurora-green); border-color: rgba(52, 211, 153, 0.5); }

.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.btn-danger { border-color: rgba(255, 107, 107, 0.5); color: #ff9b9b; }

.coupon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

/* ---------- About / contact ---------- */
.about-stat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 18px;
}
.about-stat .icon { width: 17px; height: 17px; color: var(--accent); }
.about-stat strong { font-size: 1.05rem; font-weight: 700; color: var(--text); }

.about-body,
.contact-intro {
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 1rem;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gallery-item {
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  transition: border-color 0.2s ease;
}
.gallery-item:hover { border-color: var(--border-strong); }

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease);
}
.gallery-item:hover .gallery-img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 4, 12, 0.93);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-close, .lightbox-nav {
  position: absolute;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
}
.lightbox-close { top: 20px; inset-inline-end: 20px; }
.lightbox-prev { top: 50%; inset-inline-start: 20px; transform: translateY(-50%); }
.lightbox-next { top: 50%; inset-inline-end: 20px; transform: translateY(-50%); }

@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Landing sections
   ============================================================ */

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 700px) {
  .about-grid { grid-template-columns: 1.2fr 1fr; }
}

.about-visual {
  position: relative;
  height: 300px;
}

.about-card {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.about-card-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 5px;
  border-radius: var(--radius-pill);
  background: rgba(9, 5, 15, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.about-card-label img {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
}

.about-card-1 { width: 52%; aspect-ratio: 4 / 3; top: 4%; inset-inline-start: 2%; }
.about-card-2 { width: 42%; aspect-ratio: 3 / 4; top: 26%; inset-inline-end: 4%; z-index: 2; }
.about-card-3 { width: 34%; aspect-ratio: 1 / 1; bottom: 2%; inset-inline-start: 22%; z-index: 3; }

/* painted travel scenes (pure CSS, no external images) */
.art-aurora {
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(94, 234, 212, 0.5), transparent 60%),
    linear-gradient(200deg, rgba(94, 234, 212, 0.35) 0%, transparent 45%),
    linear-gradient(to bottom, #1a1140 0%, #2a1a4d 55%, #0f0a22 100%);
}
.art-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 30% 24%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 62% 16%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 80% 34%, #cbe9ff, transparent),
    radial-gradient(1.2px 1.2px at 44% 40%, #fff, transparent);
}
.art-dusk {
  background:
    radial-gradient(circle at 50% 88%, #f6b17a 0%, #e88b6b 14%, transparent 42%),
    linear-gradient(to bottom, #3a2159 0%, #7a3f6b 46%, #c9738a 74%, #2a1636 100%);
}
.art-sea {
  background:
    linear-gradient(to bottom, #2a1a4d 0%, #2a1a4d 46%, #2f7f8c 46%, #1a5866 100%);
}
.art-sea::after {
  content: '';
  position: absolute;
  inset: 46% 0 0 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
}

.about-orb {
  position: absolute;
  width: 55%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  inset-inline-end: -10%;
  bottom: -14%;
  background: radial-gradient(circle at 35% 30%, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.05) 65%, transparent);
  filter: blur(6px);
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  /* the same LIGHT glass as every other card - NO darkening of any kind.
     Readability comes from the frost (blur turns the busy backdrop into a
     soft wash) and from tight text shadows on the type itself */
  background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(30px) saturate(0.9);
  -webkit-backdrop-filter: blur(30px) saturate(0.9);
  box-shadow: 0 12px 34px rgba(10, 6, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.feature-card:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(10, 6, 20, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at 50% -20%, rgba(139, 92, 246, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.14);
  color: var(--accent);
  margin-bottom: 6px;
  transition: background 0.25s ease, color 0.25s ease;
}
.feature-card:hover .feature-icon { background: var(--accent-deep); color: #fff; }

.feature-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  /* a TIGHT dark edge shadow (caption-over-photo technique): keeps every
     glyph readable on any brightness behind, without darkening the card */
  text-shadow: 0 1px 3px rgba(12, 8, 24, 0.85), 0 3px 14px rgba(12, 8, 24, 0.5);
}
.feature-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  /* near-white instead of the muted lavender - that one washed out against
     the warm part of the sunrise */
  color: rgba(243, 240, 252, 0.96);
  text-shadow: 0 1px 3px rgba(12, 8, 24, 0.8), 0 3px 12px rgba(12, 8, 24, 0.45);
}

.feature-more {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  color: var(--text-faint);
  transition: color 0.25s ease, transform 0.3s var(--ease);
}
.feature-more .icon { width: 15px; height: 15px; }
.feature-card:hover .feature-more { color: var(--accent); transform: translate(2px, -2px); }
[dir='rtl'] .feature-card:hover .feature-more { transform: translate(-2px, -2px); }

/* ---------- Horizontal destinations (native scroll-snap) ---------- */
.dest-scroller {
  margin-top: 30px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  /* let cards run to the screen edge without causing page overflow */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + 2px);
}
.dest-scroller::-webkit-scrollbar { display: none; }

.dest-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

.dest-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  width: min(64vw, 240px);
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s var(--ease);
}
.dest-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.dest-card {
  background:
    linear-gradient(160deg, hsl(var(--hue, 260) 45% 30% / 0.55), hsl(calc(var(--hue, 260) + 40) 50% 18% / 0.65)),
    var(--surface);
}

.dest-flag-chip {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.dest-flag-chip img { width: 100%; height: 100%; object-fit: cover; }

.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 5, 15, 0.85) 12%, transparent 60%);
}

.dest-name, .dest-cta { position: relative; z-index: 1; }
.dest-name { font-size: 1.15rem; font-weight: 800; }
.dest-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.dest-cta .icon { width: 13px; height: 13px; }

/* ---------- Stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  padding: 24px 18px;
  border-radius: var(--radius-lg);
  /* light frosted glass, NO darkening: the blur melts the cloud puffs into a
     soft wash and the type carries its own contrast via tight shadows */
  background: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(28px) saturate(0.9);
  -webkit-backdrop-filter: blur(28px) saturate(0.9);
  box-shadow: 0 10px 30px rgba(10, 6, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  text-align: center;
}

.stat-value {
  display: block;
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 3px rgba(12, 8, 24, 0.7));
}

.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  /* near-white: the muted lavender vanished against the bright clouds */
  color: rgba(242, 239, 252, 0.96);
  text-shadow: 0 1px 3px rgba(12, 8, 24, 0.8), 0 3px 12px rgba(12, 8, 24, 0.45);
}

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 700px) {
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
}

.testi-card {
  margin: 0;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  /* same frosted treatment as the stats: light glass, no darkening */
  background: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(28px) saturate(0.9);
  -webkit-backdrop-filter: blur(28px) saturate(0.9);
  box-shadow: 0 10px 30px rgba(10, 6, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testi-card blockquote {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.75;
  color: #fff;
  text-shadow: 0 1px 3px rgba(12, 8, 24, 0.8), 0 3px 12px rgba(12, 8, 24, 0.45);
}
.testi-card blockquote::before {
  content: '"';
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 6px;
  font-weight: 800;
}

.testi-card figcaption {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(238, 234, 250, 0.9);
  text-shadow: 0 1px 3px rgba(12, 8, 24, 0.7);
}

/* ---------- CTA ---------- */
.cta-section {
  text-align: center;
  padding-bottom: 10px;
}

.cta-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 8vw, 3.1rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(139, 92, 246, 0.5);
}

.cta-sub {
  margin: 0 auto;
  max-width: 400px;
  color: var(--text-muted);
  line-height: 1.7;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 16px 34px;
  border-radius: var(--radius-pill);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
  box-shadow: 0 10px 34px rgba(220, 39, 67, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.cta-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 44px rgba(220, 39, 67, 0.5);
}
.cta-button .icon { width: 20px; height: 20px; }

/* ---------- Link grid (branded cards) ---------- */
.link-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) {
  .link-grid { grid-template-columns: repeat(2, 1fr); }
}
/* stagger the reveal via transition-delay (link cards already carry .reveal) */
.link-grid .link-card { transition-delay: calc(var(--stagger, 0) * 0.05s); }

/* ---------- 404 (off the map) ---------- */
.notfound {
  min-height: 54vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 40px 0 60px;
}
.notfound-code {
  font-size: clamp(5rem, 22vw, 11rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(140deg, var(--purple-300), var(--accent-strong) 45%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 44px rgba(139, 92, 246, 0.35));
}
.notfound-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -4px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--purple-300);
}
.notfound-mark .icon { width: 24px; height: 24px; }
.notfound-title { font-size: 1.6rem; font-weight: 800; margin: 6px 0 0; }
.notfound-text { max-width: 440px; margin: 0; color: var(--text-muted); line-height: 1.6; }
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .notfound-mark { animation: notfound-bob 3s ease-in-out infinite; }
  @keyframes notfound-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
}

/* ---------- Trips: pin count, sheet trips, covers ---------- */
.globe-pin-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg);
}

.country-sheet-cover {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
  animation: sheetItemIn 0.45s var(--ease) both;
}
/* the box hugs the image's real aspect - full cover, no crop, no letterbox bars
   (works for both landscape 3:2 and portrait 2:3) */
.country-sheet-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.country-sheet-trip-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
}

.country-sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.country-sheet-back:hover { background: var(--surface-hover); color: var(--text); }
[dir='ltr'] .country-sheet-back span { transform: scaleX(-1); display: inline-block; }

.country-trip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: start;
  transition: background 0.18s ease, border-color 0.18s ease;
  animation: sheetItemIn 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
.country-trip-row:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.country-trip-thumb {
  width: 58px;
  height: 40px;              /* ~3:2 */
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.country-trip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.country-trip-thumb.is-flag img { width: 30px; height: 22px; border-radius: 3px; }

.country-trip-label { flex: 1; min-width: 0; font-weight: 700; }
.country-trip-label small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--text-faint); }

/* dest cards with real cover photos */
.dest-card { position: relative; }
.dest-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.5s var(--ease);
}
.dest-card.has-cover:hover .dest-cover { transform: scale(1.05); }
.dest-card.has-cover .dest-flag-chip,
.dest-card.has-cover .dest-name,
.dest-card.has-cover .dest-cta { position: relative; z-index: 2; }

/* about cards can carry a cover image */
.about-card { background-size: cover; background-position: center; }

/* ---------- Per-trip galleries (photos shot 3:2 / 2:3) ---------- */
.trip-gallery { margin-bottom: 40px; }

.trip-gallery-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.trip-gallery-flag {
  width: 30px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.trip-gallery-title { margin: 0; font-size: 1.2rem; font-weight: 800; flex: 1; }
.trip-gallery-count { font-size: 0.78rem; color: var(--text-faint); }

/* landscape-friendly tiles (3:2); portraits crop gracefully, full photo in lightbox */
.gallery-item { aspect-ratio: 3 / 2; }

.card-city { display: block; font-size: 0.72rem; color: var(--text-faint); font-weight: 500; }