/* ═══════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
  --sun: #FF9500;
  --sun-dark: #E08200;
  --sun-light: #FFF4E0;
  --sun-pale: #FFFAF2;

  --bg: #faf0dc;           /* main background throughout */
  --cream: #f0e4c8;        /* slightly richer amber for alternate sections */
  --accent: #eedfc0;       /* warm amber for formerly-dark sections */

  --dark: #1C1410;
  --text: #1C1812;
  --text-mid: #5A5044;
  --text-soft: #9A9080;

  --border: rgba(0,0,0,0.08);
  --border-warm: rgba(255,149,0,0.25);

  --card-sand: #DDD4BF;

  --footer-bg: #d4c4a0;
  --footer-bot: #d4c4a0;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 100px;

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background:
    linear-gradient(180deg,
      #faf0dc 0%,
      #f5e8cf 12%,
      #f0e0c0 28%,
      #ecd9b3 46%,
      #e6cea3 64%,
      #e0c594 80%,
      #d8ba84 92%,
      #d4c4a0 100%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  line-height: 1;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

/* ═══════════════════════════════════════════
   MOUSE SPOTLIGHT
═══════════════════════════════════════════ */
#spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(250, 240, 220, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-img {
  height: 110px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 4px 16px rgba(255,149,0,0.35))
    drop-shadow(0 1px 0 rgba(0,0,0,0.15))
    saturate(1.35)
    contrast(1.15);
  transition: transform 0.25s var(--ease);
}
.logo:hover .logo-img { transform: scale(1.05) rotate(-2deg); }
.footer-logo .logo-img { height: 96px; filter: drop-shadow(0 4px 16px rgba(255,149,0,0.28)) saturate(1.3) contrast(1.12); }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mid);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-tour {
  color: var(--sun-dark) !important;
  font-weight: 500 !important;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-sep { color: var(--text-soft); font-size: 13px; }
.lang-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.lang-btn.active { color: var(--sun-dark); }
.lang-btn:hover { color: var(--text); }

/* Nav CTA */
.nav-cta {
  background: var(--sun);
  color: white !important;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,149,0,0.38);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: 0.2s;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 124px;
  left: 0;
  right: 0;
  background: rgba(250, 240, 220, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  padding: 20px 5% 28px;
  gap: 18px;
  z-index: 99;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 15px;
  color: var(--text-mid);
  font-weight: 400;
}
.mobile-cta { width: fit-content; margin-top: 4px; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 90vh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 80px 0 60px;
}
.hero-glow {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,149,0,0.13) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.hero-text {
  max-width: 520px;
  flex: 1;
  min-width: 300px;
}

/* Tag chip */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun-light);
  border: 1px solid rgba(255,149,0,0.28);
  color: #7A5000;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 28px;
  animation: fadeUp 0.5s var(--ease) both;
}
.tag-dot {
  width: 7px;
  height: 7px;
  background: var(--sun);
  border-radius: 50%;
  flex-shrink: 0;
}

h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 24px;
  animation: fadeUp 0.5s 0.08s var(--ease) both;
}
h1 em { font-style: italic; color: var(--sun); }

.hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 38px;
  animation: fadeUp 0.5s 0.16s var(--ease) both;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fadeUp 0.5s 0.24s var(--ease) both;
}

/* Store buttons — darker orange tone */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #C66A00 0%, #A85500 100%);
  color: #FFF1D6;
  font-size: 12px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,180,80,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 14px 28px rgba(120,60,0,0.35),
    0 4px 10px rgba(120,60,0,0.2);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  min-width: 168px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn-store:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #DD7800 0%, #BB6000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 22px 44px rgba(180,90,0,0.45),
    0 6px 16px rgba(120,60,0,0.3);
}
.btn-store:active { transform: translateY(-1px); }
.btn-store svg path { fill: #FFF1D6 !important; }
.btn-store.light {
  background: linear-gradient(180deg, #ffffff 0%, #ece1c8 100%);
  color: var(--text);
  border: 1px solid rgba(120,80,30,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 0 rgba(160,120,60,0.25),
    0 14px 28px rgba(120,80,30,0.18),
    0 4px 10px rgba(120,80,30,0.12);
  text-shadow: none;
}
.btn-store.light svg path { fill: initial !important; }
.btn-store.light:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 0 rgba(160,120,60,0.25),
    0 22px 40px rgba(120,80,30,0.25),
    0 6px 16px rgba(120,80,30,0.16);
}
.btn-store-text { display: flex; flex-direction: column; }
.btn-store-text small { font-size: 10px; opacity: 0.7; line-height: 1; margin-bottom: 2px; }
.btn-store-text strong { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.1px; }

/* Sun-coloured 3D store button variant */
.btn-store.sun {
  background: linear-gradient(180deg, #FFC76B 0%, #FF9500 55%, #DD7E00 100%);
  color: #1C1410;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.28),
    0 14px 32px rgba(255,149,0,0.5),
    0 4px 10px rgba(120,55,0,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.btn-store.sun svg path { fill: #1C1410 !important; }
.btn-store.sun small { color: rgba(28,20,16,0.65); }
.btn-store.sun:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.28),
    0 22px 44px rgba(255,149,0,0.62),
    0 6px 14px rgba(120,55,0,0.3);
}

/* ── Phone mockup ── */
.hero-visual {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeUp 0.6s 0.2s var(--ease) both;
}
.phone-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.phone-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 460px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,180,40,0.45) 0%, rgba(255,149,0,0.18) 35%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
  animation: phone-glow-pulse 6s ease-in-out infinite;
}
@keyframes phone-glow-pulse {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}
.phone-mockup {
  position: relative;
  width: 296px;
  background:
    linear-gradient(135deg,
      #d8d8d6 0%, #f4f4f2 8%, #b8b8b6 22%,
      #e8e8e6 38%, #d0d0ce 52%,
      #f4f4f2 68%, #a8a8a6 82%, #d8d8d6 100%);
  border-radius: 56px;
  padding: 8px 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.65),
    inset 0 0 0 4px rgba(0,0,0,0.85),
    inset 0 0 0 5px rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.18),
    0 22px 60px rgba(0,0,0,0.32),
    0 64px 110px rgba(0,0,0,0.14);
}
.phone-mockup::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 78px;
  width: 3px;
  height: 142px;
  background: linear-gradient(to right, #a8a8a6, #e0e0de 50%, #888886);
  -webkit-mask: linear-gradient(#000 0 22px, transparent 22px 30px, #000 30px 70px, transparent 70px 78px, #000 78px 142px);
          mask: linear-gradient(#000 0 22px, transparent 22px 30px, #000 30px 70px, transparent 70px 78px, #000 78px 142px);
  border-radius: 2px 0 0 2px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
}
.phone-mockup::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 132px;
  width: 3px;
  height: 74px;
  background: linear-gradient(to left, #a8a8a6, #e0e0de 50%, #888886);
  border-radius: 0 2px 2px 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.4);
}
.phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 33px;
  background: #000;
  border-radius: 18px;
  z-index: 10;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.4);
}
.phone-island::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3540 0%, #0a0e14 60%);
  box-shadow: 0 0 0 1px rgba(40,55,75,0.6);
}
.phone-island::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a6d80 0%, #1a2230 60%);
  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.2),
    0 0 4px rgba(120,160,220,0.35);
}
.phone-screen {
  position: relative;
  width: 100%;
  border-radius: 48px;
  overflow: hidden;
  aspect-ratio: 1179 / 2556;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.app-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Video is 1920×1080 with phone content centered at ~500px wide.
     Cover crops sides to fill the portrait screen; the central 500px maps to ~286px of frame width.
     Phone-content aspect (500/1080 = 0.463) matches screen aspect (1179/2556 = 0.461), so no extra zoom needed. */
  display: block;
  background: #1a1a1a;
}
.app-screen { display: none; }
.app-tap {
  position: absolute;
  left: 50%; top: 65%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,149,0,0.7);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: app-tap 25s 11s infinite;
}
@keyframes app-tap {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  2%       { opacity: 0.85; transform: translate(-50%, -50%) scale(0.5); }
  10%      { opacity: 0; transform: translate(-50%, -50%) scale(6); }
  20%      { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}
.app-canvas { display: none; }
.phone-screen { user-select: none; -webkit-user-select: none; }
/* hide leftover image carousel if present */
.app-screen { display: none; }
/* 5-frame smooth cross-fade (25s total, 5s per frame, overlapping fades) */
.app-screen.f1 { animation: app-fade 25s 0s   infinite; }
.app-screen.f2 { animation: app-fade 25s 5s   infinite; }
.app-screen.f3 { animation: app-fade 25s 10s  infinite; }
.app-screen.f4 { animation: app-fade 25s 15s  infinite; }
.app-screen.f5 { animation: app-fade 25s 20s  infinite; }
@keyframes app-fade {
  0%   { opacity: 0; transform: scale(1.04); }
  4%   { opacity: 1; transform: scale(1.02); }
  20%  { opacity: 1; transform: scale(1); }
  24%  { opacity: 1; transform: scale(0.998); }
  28%  { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.04); }
}
.app-screen.js-driven {
  animation: none !important;
  transition: opacity 0.45s var(--ease);
}
/* Soft tap ripple over slider area */
.app-tap {
  position: absolute;
  left: 50%; top: 65%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,149,0,0.7);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: app-tap 25s 11s infinite;
}
@keyframes app-tap {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  2%       { opacity: 0.85; transform: translate(-50%, -50%) scale(0.5); }
  10%      { opacity: 0; transform: translate(-50%, -50%) scale(6); }
  20%      { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}
.app-canvas { display: none; }
.phone-screen {
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.phone-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-soft);
  text-align: center;
}

/* ═══════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════ */
/* Stats bar — lighter 3D look */
.stats-bar {
  background: linear-gradient(180deg, rgba(255,250,240,0.7) 0%, rgba(248,236,210,0.55) 100%);
  border-top: 1px solid rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(120,80,30,0.08);
  padding: 36px 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(120,80,30,0.06),
    0 8px 24px rgba(120,80,30,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat {
  text-align: center;
  padding: 8px 44px;
}
.stat-divider {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(120,80,30,0.18), transparent);
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(180deg, #FFB347 0%, #DD7E00 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mid);
}

/* ═══════════════════════════════════════════
   SECTION SHARED
═══════════════════════════════════════════ */
/* Reduce world section bottom padding to tighten gap before Tours */
.world { padding-bottom: 40px; }
.tours { padding-top: 24px; padding-bottom: 64px; }

/* Sections — reduce vertical padding for less empty space */
section { padding: 80px 0; }

.section-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 14px;
}

h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 18px;
}
h2 em { font-style: italic; color: var(--sun); }

.lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 520px;
}

.section-header { margin-bottom: 56px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   HOW IT WORKS  –  side-by-side layout
═══════════════════════════════════════════ */
.how { background: var(--bg); }

.how-inner {
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: 56px;
  align-items: center;
}

.how-text { /* left column — no extra bottom margin needed */ }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.step-card {
  position: relative;
  background: linear-gradient(165deg, #f7e8c3 0%, #e8d09b 60%, #d4b87a 100%);
  border-radius: var(--r-lg);
  padding: 28px 22px 24px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(120,80,20,0.18),
    0 22px 40px rgba(80,50,10,0.18),
    0 6px 16px rgba(120,80,20,0.14);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none;
}
.step-card:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(120,80,20,0.18),
    0 32px 56px rgba(80,50,10,0.24),
    0 10px 22px rgba(255,149,0,0.18);
}

.step-num {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 700;
  background: linear-gradient(180deg, #FFB347 0%, #E08200 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.step-icon { display: none; }
.step-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.2px;
}
.step-card p {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   WORLDWIDE
═══════════════════════════════════════════ */
.world { background: var(--cream); }

.world-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.city-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}
.city-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mid);
}
.city-flag { font-size: 18px; }
.city-name { flex: 1; font-weight: 400; color: var(--text); }
.city-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--sun-dark);
  background: var(--sun-light);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ── Animated World Map (replaces earth globe) ── */
.world-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.world-map {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 800 / 420;
}
.world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(80,50,10,0.15));
}
/* Terminator sweeps across once per minute */
.world-terminator { animation: world-term-sweep 60s linear infinite; transform-origin: left center; }
@keyframes world-term-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(1100px); }
}

/* Cities pulse in sequence to create "follow the sun" effect */
.wc-pool {
  transform-box: fill-box;
  transform-origin: center;
  animation: wc-pool 7s ease-in-out infinite;
  opacity: 0.4;
}
.wc-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: wc-ring 2.4s ease-out infinite;
}
.wc-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: wc-dot 7s ease-in-out infinite;
}
@keyframes wc-pool {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}
@keyframes wc-dot {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,149,0,0)); }
  50%      { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(255,149,0,0.9)); }
}
@keyframes wc-ring {
  0%   { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(3.5); }
}
.wc-1 .wc-pool, .wc-1 .wc-dot { animation-delay: 0s; }
.wc-1 .wc-ring { animation-delay: 0s; }
.wc-2 .wc-pool, .wc-2 .wc-dot { animation-delay: 1s; }
.wc-2 .wc-ring { animation-delay: 0.3s; }
.wc-3 .wc-pool, .wc-3 .wc-dot { animation-delay: 2s; }
.wc-3 .wc-ring { animation-delay: 0.6s; }
.wc-4 .wc-pool, .wc-4 .wc-dot { animation-delay: 3s; }
.wc-4 .wc-ring { animation-delay: 0.9s; }
.wc-5 .wc-pool, .wc-5 .wc-dot { animation-delay: 4s; }
.wc-5 .wc-ring { animation-delay: 1.2s; }
.wc-6 .wc-pool, .wc-6 .wc-dot { animation-delay: 5s; }
.wc-6 .wc-ring { animation-delay: 1.5s; }
.wc-7 .wc-pool, .wc-7 .wc-dot { animation-delay: 6s; }
.wc-7 .wc-ring { animation-delay: 1.8s; }

/* Flight arc dash flow */
.world-arcs .arc {
  stroke-dashoffset: 0;
  animation: arc-flow 3.5s linear infinite;
}
.world-arcs .a2 { animation-delay: 0.5s; }
.world-arcs .a3 { animation-delay: 1s; }
.world-arcs .a4 { animation-delay: 1.5s; }
@keyframes arc-flow {
  to { stroke-dashoffset: -28; }
}

.world-map-label {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: #1C1410;
  border: 1px solid rgba(255,149,0,0.32);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Hide all earth-globe styles (legacy) */
.earth-globe, .earth-sphere, .earth-sun, .earth-pin, .earth-stars,
.earth-ocean, .earth-continents-wrap, .earth-terminator, .earth-day-glow,
.earth-shine, .earth-limb { display: none !important; }
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.earth-stars {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(120,80,30,0.5), transparent),
    radial-gradient(1px 1px at 75% 22%, rgba(120,80,30,0.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(120,80,30,0.55), transparent),
    radial-gradient(1px 1px at 14% 78%, rgba(120,80,30,0.4), transparent),
    radial-gradient(1px 1px at 50% 92%, rgba(120,80,30,0.35), transparent),
    radial-gradient(1.5px 1.5px at 62% 12%, rgba(120,80,30,0.45), transparent);
  opacity: 0.7;
  animation: stars-twinkle 4s ease-in-out infinite;
}
@keyframes stars-twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }

.earth-sphere {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset -18px -32px 64px rgba(0,0,0,0.55),
    inset 16px 18px 38px rgba(255,255,255,0.20),
    0 22px 64px rgba(20,60,110,0.4),
    0 0 0 1px rgba(255,255,255,0.1);
}

/* Ocean base */
.earth-ocean {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #6cb5ec 0%, #347eb8 35%, #18568a 65%, #0a2c50 100%);
}

/* Continents SVG (rotates horizontally for "spin" effect) */
.earth-continents-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.earth-continents {
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 100%;
  animation: earth-spin 36s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2));
}
@keyframes earth-spin {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Day/Night terminator — soft gradient sweeping across the globe */
.earth-terminator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(105deg,
    transparent 0%, transparent 32%,
    rgba(15,25,50,0.06) 42%,
    rgba(10,18,40,0.35) 52%,
    rgba(5,12,28,0.78) 64%,
    rgba(2,6,16,0.92) 100%);
  animation: terminator-sweep 18s linear infinite;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@keyframes terminator-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Warm dawn light following the terminator */
.earth-day-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, rgba(255,210,120,0.45) 0%, rgba(255,180,80,0.18) 25%, transparent 50%);
  mix-blend-mode: screen;
  animation: day-glow-sweep 18s linear infinite;
  pointer-events: none;
}
@keyframes day-glow-sweep {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}

/* Specular highlight (glassy reflection on the sphere) */
.earth-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 55% 42% at 30% 22%, rgba(255,255,255,0.34) 0%, transparent 60%),
    radial-gradient(ellipse 16% 12% at 28% 18%, rgba(255,255,255,0.55) 0%, transparent 65%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Atmospheric limb (rim glow) */
.earth-limb {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 49%, rgba(120,180,255,0.45) 50.5%, rgba(120,180,255,0) 56%);
  pointer-events: none;
}

/* Sun — orbits around the globe */
.earth-sun {
  position: absolute;
  top: 10%;
  right: -8%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFE99B, #FF9500 65%, #E08200);
  box-shadow: 0 0 32px rgba(255,180,40,0.85), 0 0 72px rgba(255,140,0,0.45);
  animation: sun-orbit 18s linear infinite;
}
@keyframes sun-orbit {
  0%   { top: 14%; right: -6%; opacity: 1; }
  25%  { top: 4%;  right: 32%; opacity: 1; }
  50%  { top: 14%; right: 70%; opacity: 0.7; }
  75%  { top: 4%;  right: 100%; opacity: 0.55; }
  100% { top: 14%; right: 104%; opacity: 0.45; }
}

/* City pins on the globe — Munich, Barcelona, Tokyo etc */
.earth-pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF9500;
  box-shadow: 0 0 0 3px rgba(255,149,0,0.25), 0 0 12px rgba(255,149,0,0.9);
  z-index: 3;
}
.earth-pin::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,149,0,0.6);
  animation: pin-ping 2s ease-out infinite;
}
@keyframes pin-ping {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.earth-pin.pin-1 { top: 36%; left: 48%; }
.earth-pin.pin-2 { top: 50%; left: 30%; animation-delay: 0.6s; }
.earth-pin.pin-2::before { animation-delay: 0.6s; }
.earth-pin.pin-3 { top: 30%; left: 62%; }
.earth-pin.pin-3::before { animation-delay: 1.2s; }

/* ═══════════════════════════════════════════
   TOURS  –  warm accent section
═══════════════════════════════════════════ */
.tours {
  background: transparent;
  padding: 56px 0 80px;
  position: relative;
  overflow: hidden;
}
.tours-glow {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(255,149,0,0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.tours-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.tours-badge {
  display: inline-block;
  background: var(--sun);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.tours-content .section-tag { margin-bottom: 10px; }
.tours-content h2 { margin-bottom: 20px; }

.tours-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 32px;
}
.tours-details {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.tours-detail {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-icon { font-size: 22px; }
.tours-detail strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.tours-detail span {
  font-size: 13px;
  color: var(--text-soft);
}
.btn-tours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #FFB347 0%, #FF9500 55%, #DD7E00 100%);
  color: #1C1410;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.28),
    0 12px 28px rgba(255,149,0,0.45),
    0 3px 8px rgba(120,55,0,0.25);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.btn-tours:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.28),
    0 18px 40px rgba(255,149,0,0.55),
    0 5px 12px rgba(120,55,0,0.3);
}
.btn-tours:active {
  transform: translateY(-1px);
}

/* Ambassador callout — lighter, warm cream 3D card */
.ambassador-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 22px 18px 18px;
  background: linear-gradient(165deg, #FFF6E3 0%, #FBE8C1 100%);
  border: 1.5px solid rgba(255,149,0,0.4);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 0 rgba(180,120,40,0.16),
    0 18px 36px rgba(180,120,40,0.18),
    0 5px 14px rgba(255,149,0,0.14);
  max-width: 520px;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.ambassador-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 12% 50%, rgba(255,180,40,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 80% at 100% 50%, rgba(255,200,80,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.ambassador-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 0 rgba(180,120,40,0.16),
    0 26px 48px rgba(180,120,40,0.24),
    0 8px 20px rgba(255,149,0,0.22);
}
.amb-text strong {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: #4A2D0A;
  letter-spacing: -0.1px;
}
.amb-text span {
  font-size: 13px;
  font-weight: 400;
  color: #7A5A2A;
}
.amb-link {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #C66A00 0%, #A85500 100%);
  border: 1px solid rgba(255,180,80,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    0 6px 14px rgba(120,60,0,0.28);
  transition: all 0.2s var(--ease);
  position: relative;
  z-index: 1;
}
.amb-link:hover {
  background: linear-gradient(180deg, #DD7800 0%, #BB6000 100%);
  transform: translateY(-1px) translateX(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    0 10px 20px rgba(120,60,0,0.35);
}

/* Superhero icon with sun rays */
.amb-icon {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amb-rays {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,200,80,0) 0deg, rgba(255,200,80,0.95) 6deg, rgba(255,200,80,0) 14deg,
      rgba(255,200,80,0) 30deg, rgba(255,200,80,0.95) 36deg, rgba(255,200,80,0) 44deg,
      rgba(255,200,80,0) 60deg, rgba(255,200,80,0.95) 66deg, rgba(255,200,80,0) 74deg,
      rgba(255,200,80,0) 90deg, rgba(255,200,80,0.95) 96deg, rgba(255,200,80,0) 104deg,
      rgba(255,200,80,0) 120deg, rgba(255,200,80,0.95) 126deg, rgba(255,200,80,0) 134deg,
      rgba(255,200,80,0) 150deg, rgba(255,200,80,0.95) 156deg, rgba(255,200,80,0) 164deg,
      rgba(255,200,80,0) 180deg, rgba(255,200,80,0.95) 186deg, rgba(255,200,80,0) 194deg,
      rgba(255,200,80,0) 210deg, rgba(255,200,80,0.95) 216deg, rgba(255,200,80,0) 224deg,
      rgba(255,200,80,0) 240deg, rgba(255,200,80,0.95) 246deg, rgba(255,200,80,0) 254deg,
      rgba(255,200,80,0) 270deg, rgba(255,200,80,0.95) 276deg, rgba(255,200,80,0) 284deg,
      rgba(255,200,80,0) 300deg, rgba(255,200,80,0.95) 306deg, rgba(255,200,80,0) 314deg,
      rgba(255,200,80,0) 330deg, rgba(255,200,80,0.95) 336deg, rgba(255,200,80,0) 344deg);
  -webkit-mask: radial-gradient(circle, transparent 27px, #000 30px, #000 38px, transparent 41px);
          mask: radial-gradient(circle, transparent 27px, #000 30px, #000 38px, transparent 41px);
  animation: amb-rays-spin 18s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,180,40,0.6));
}
@keyframes amb-rays-spin { to { transform: rotate(360deg); } }
.amb-icon::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFE07A 0%, #FFB840 55%, #E08200 100%);
  box-shadow:
    inset 0 -3px 8px rgba(120,60,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.5),
    0 4px 14px rgba(255,149,0,0.5);
  z-index: 1;
}
.amb-hero {
  position: relative;
  width: 38px;
  height: 38px;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
}

.amb-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.amb-text strong {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: #FFE0A0;
  letter-spacing: -0.1px;
}
.amb-text span {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,235,200,0.78);
}
.amb-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--sun);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,149,0,0.14);
  border: 1px solid rgba(255,149,0,0.45);
  transition: all 0.2s var(--ease);
  position: relative;
  z-index: 1;
}
.amb-link:hover {
  background: var(--sun);
  color: #1C1410;
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(255,149,0,0.5);
}

/* Heading above the bar-map (replaces chip on the dot) */
.bar-map-heading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 16px;
  padding: 7px 16px 7px 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(34,116,255,0.35);
  border-radius: var(--r-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2274FF;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  align-self: center;
}
.bar-map-heading .chip-pulse {
  background: #2274FF;
  box-shadow: 0 0 0 0 rgba(34,116,255,0.7);
  animation: live-chip-pulse 1.6s ease-out infinite;
}
@keyframes live-chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,116,255,0.8); }
  100% { box-shadow: 0 0 0 10px rgba(34,116,255,0); }
}
.tours-route {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.bar-map {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 380;
  overflow: visible;
  background: transparent;
  /* Soft fade into page background — no hard edges */
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 95%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 95%);
  filter: drop-shadow(0 18px 36px rgba(80,50,10,0.15));
}
.bar-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bar-route-line {
  animation: bar-route-flow 2.6s linear infinite;
}
@keyframes bar-route-flow {
  to { stroke-dashoffset: -18; }
}
.bar-stop circle:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: bar-stop-pulse 2.8s ease-in-out infinite;
}
.bar-stop[data-stop="1"] circle:first-child { animation-delay: 0s; }
.bar-stop[data-stop="2"] circle:first-child { animation-delay: 0.9s; }
.bar-stop[data-stop="3"] circle:first-child { animation-delay: 1.8s; }
@keyframes bar-stop-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,149,0,0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,149,0,0.9)); transform: scale(1.08); }
}
.bar-user-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: bar-user-ping 2.4s ease-out infinite;
}
.bar-user-halo2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: bar-user-ping 2.4s 0.8s ease-out infinite;
}
@keyframes bar-user-ping {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* Live-Standort chip rides along with the moving dot */
.bar-live-chip {
  position: absolute;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.97);
  padding: 5px 12px 5px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: #2274FF;
  border: 1.5px solid rgba(34,116,255,0.35);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  /* Position is set in JS based on motion progress */
  top: 0; left: 0;
  z-index: 4;
}
.bar-live-chip .chip-pulse {
  background: #2274FF;
  box-shadow: 0 0 0 0 rgba(34,116,255,0.7);
  animation: live-chip-pulse 1.6s ease-out infinite;
}
@keyframes live-chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,116,255,0.8); }
  100% { box-shadow: 0 0 0 10px rgba(34,116,255,0); }
}
.chip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF9500;
  box-shadow: 0 0 0 0 rgba(255,149,0,0.7);
  animation: chip-blink 1.6s ease-out infinite;
}
@keyframes chip-blink {
  0%   { box-shadow: 0 0 0 0 rgba(255,149,0,0.8); }
  100% { box-shadow: 0 0 0 10px rgba(255,149,0,0); }
}

/* ═══════════════════════════════════════════
   RESTAURATEURS
═══════════════════════════════════════════ */
.restaurateurs { background: var(--bg); }

.restau-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.restau-text .lead { margin-bottom: 36px; }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--sun-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.feature-item h4 { font-size: 15px; font-weight: 500; margin-bottom: 5px; }
.feature-item p {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.65;
}

/* Pricing cards */
.pricing-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.pricing-card {
  background: rgba(255,255,255,0.7);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.18s var(--ease), box-shadow 0.18s;
  box-shadow: var(--shadow-sm);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pricing-card.featured {
  border-color: rgba(255,149,0,0.4);
  background: var(--sun-pale);
}
.pc-left h4 { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.pc-left p { font-size: 12px; font-weight: 300; color: var(--text-mid); }
.pc-badge {
  display: inline-block;
  background: var(--sun);
  color: white;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  margin-bottom: 5px;
}
.pc-price strong {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  display: block;
  color: var(--text);
}
.pc-price small { font-size: 11px; color: var(--text-soft); }

.restau-link-wrap { text-align: center; margin-top: 8px; }
.restau-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1.5px solid rgba(0,0,0,0.18);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.restau-link:hover { color: var(--sun-dark); border-color: var(--sun-dark); }

/* ═══════════════════════════════════════════
   SOCIAL / COMMUNITY  –  warm accent section
═══════════════════════════════════════════ */
.social {
  background: var(--accent);
  padding: 100px 0;
}

.social .section-header { text-align: left; }
.social .lead { max-width: 560px; }

/* Social header — icons vertically centered with the text block */
.social-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.social-header-text { max-width: 620px; }
.social-icons {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.social-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
  perspective: 600px;
}
.social-icon:hover { transform: translateY(-4px); }
.si-disc {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  transition: transform 0.3s var(--ease);
}
.si-disc::before, .si-disc::after { display: none; }
.si-disc svg {
  width: 92px;
  height: 92px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}
.social-icon.ig .si-disc svg { color: transparent; }
.social-icon.ig .si-disc svg rect,
.social-icon.ig .si-disc svg circle:not([fill]) {
  stroke: url(#ig-gradient);
}
.social-icon.tt .si-disc svg path { stroke: #111; }
.social-icon:hover .si-disc { transform: scale(1.08) rotate(-3deg); }
.si-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 52px;
}
.social-card {
  border-radius: var(--r-xl);
  padding: 32px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.social-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  min-height: 46px;
}
.sc-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255,149,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.social-card-head h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.social-card:has(.sc-icon) .social-card-head h3 { font-size: 18px; font-weight: 500; }
.social-card-head p {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 3px;
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 22px;
}
.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.55;
}
.bdot {
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.benefit-list strong { color: var(--text); font-weight: 500; }

.platform-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.metric {
  background: rgba(255,149,0,0.10);
  border: 1px solid rgba(255,149,0,0.22);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.metric-num {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--sun-dark);
  line-height: 1;
}
.metric-trend { font-size: 11px; color: var(--text-soft); margin-top: 3px; }
.metric-label { font-size: 12px; font-weight: 300; color: var(--text-soft); margin-top: 5px; }

.collab-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--sun-dark);
  border-bottom: 1px solid rgba(224,130,0,0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.collab-link:hover { border-color: var(--sun-dark); }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-section {
  background: var(--bg);
  padding: 100px 0;
}
.cta-inner { text-align: center; }
.cta-inner h2 {
  font-size: clamp(28px, 4.5vw, 52px);
  margin: 0 auto 16px;
  max-width: 520px;
}
.cta-inner .lead {
  margin: 0 auto 36px;
  color: var(--sun-dark);
  max-width: 380px;
}
.cta-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background: var(--footer-bg);
  padding: 64px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-logo .logo-sun { width: 40px; height: 40px; }
.footer-brand p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(60,45,15,0.62);
  line-height: 1.75;
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(60,45,15,0.45);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(60,45,15,0.72);
  transition: color 0.2s;
}
.footer-col a:hover { color: rgba(60,45,15,0.95); }

.footer-bottom {
  background: var(--footer-bot);
  margin-top: 52px;
  padding: 20px 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(60,45,15,0.45);
  flex-wrap: wrap;
  gap: 8px;
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%       { transform: scale(1.06); opacity: 0.3; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .lang-toggle { order: -1; }

  .hero-inner { flex-direction: column; text-align: center; gap: 52px; }
  .hero-text { max-width: 100%; }
  .hero-tag, .hero-actions { justify-content: center; }

  .how-inner { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; }

  .world-inner { grid-template-columns: 1fr; gap: 52px; }
  .world-visual { order: -1; }

  .tours-inner { grid-template-columns: 1fr; gap: 40px; }
  .tours-route { margin: 0 auto; }

  .restau-grid { grid-template-columns: 1fr; gap: 52px; }
  .social-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  nav { height: 96px; }
  .logo-img { height: 76px; }
  .mobile-menu { top: 96px; }

  section { padding: 72px 0; }
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }

  .stats-bar { gap: 0; }
  .stat { padding: 12px 18px; }
  .stat-divider { display: none; }

  .earth-globe { width: 240px; height: 240px; }
  .earth-sphere { width: 180px; height: 180px; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .phone-mockup { width: 220px; }
}

/* ═══════════════════════════════════════════
   GRADIENT BG — override all section solid colors
   (kept at end so it wins specificity battles)
═══════════════════════════════════════════ */
.hero,
.how,
.world,
.restaurateurs,
.cta-section,
.tours,
.social { background: transparent; position: relative; }

.stats-bar {
  background: rgba(238, 218, 184, 0.32);
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Soft warm wash on alternate sections — keeps rhythm without hard edges */
.tours::before,
.social::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(240,210,160,0) 0%,
    rgba(240,210,160,0.22) 20%,
    rgba(240,210,160,0.22) 80%,
    rgba(240,210,160,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.tours > *,
.social > * { position: relative; z-index: 1; }

footer {
  background: linear-gradient(180deg,
    rgba(212,196,160,0) 0%,
    rgba(212,196,160,0.45) 35%,
    rgba(212,196,160,0.85) 100%);
}
.footer-bottom {
  background: rgba(204,184,140,0.5);
  border-top: 1px solid rgba(120,90,30,0.08);
}


/* ═══════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — all CTAs use dark orange (matches hero)
   appended at end so it wins specificity battles
═══════════════════════════════════════════ */

.nav-cta {
  background: linear-gradient(180deg, #C66A00 0%, #A85500 100%) !important;
  color: #FFF1D6 !important;
  font-weight: 600;
  padding: 10px 22px;
  border: 1px solid rgba(255,180,80,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 8px 18px rgba(120,60,0,0.28);
}
.nav-cta:hover {
  background: linear-gradient(180deg, #DD7800 0%, #BB6000 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 14px 28px rgba(180,90,0,0.38);
}

.btn-tours,
.btn-store.sun,
.btn-store.light,
.btn-store.dark {
  background: linear-gradient(180deg, #C66A00 0%, #A85500 100%) !important;
  color: #FFF1D6 !important;
  border: 1px solid rgba(255,180,80,0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 14px 28px rgba(120,60,0,0.35),
    0 4px 10px rgba(120,60,0,0.2) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn-tours svg path,
.btn-tours svg,
.btn-store.sun svg path,
.btn-store.light svg path,
.btn-store.dark svg path { fill: #FFF1D6 !important; stroke: none !important; }
.btn-store.sun small,
.btn-store.light small,
.btn-store.dark small { color: rgba(255,241,214,0.78) !important; }
.btn-store.sun strong,
.btn-store.light strong,
.btn-store.dark strong { color: #FFF1D6 !important; }
.btn-tours:hover,
.btn-store.sun:hover,
.btn-store.light:hover,
.btn-store.dark:hover {
  background: linear-gradient(180deg, #DD7800 0%, #BB6000 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.3),
    inset 0 -2px 0 rgba(60,30,0,0.5),
    0 22px 44px rgba(180,90,0,0.45),
    0 6px 16px rgba(120,60,0,0.3) !important;
}